h5地址填写修改选择样式优化

zhiyangdu
1 parent 8ca7f4d4
Showing 10 changed files with 85 additions and 107 deletions
src/components/addressCreateBar/addressCreateBar.vue
src/components/addressList/addressList.vue
src/components/navBar/navBar.less
src/pages/addressCreate/addressCreate.less
src/pages/addressCreate/addressCreate.vue
src/pages/addressEdit/addressEdit.less
src/pages/addressEdit/addressEdit.vue
src/pages/addressList/addressList.less
src/pages/addressList/addressList.vue
src/pages/logistics/logistics.vue
@@ -4,7 +4,7 @@
 		<div class="box">
 				<div class="buttons">
 					<div class="btn btn-bright" @click="doCreate">
-						<img src="/static/img/icon_add.png" class="img"/>
+						<img src="static/img/icon_add.png" class="img"/>
 						<div class="text">新增地址</div>
 					</div>
 				</div>
@@ -33,16 +33,16 @@
                    type="checkbox"
                    name="like"
                    :value="item.state == 2">
-            <img src="/static/img/icon_check_active.png"
+            <img src="static/img/icon_check_active.png"
                  class="check-box"
                  v-if="item.state == 2" />
-            <img src="/static/img/icon_check.png"
+            <img src="static/img/icon_check.png"
                  class="check-box"
                  v-else/>
-            <div class="text">
-              <img src="/static/img/icon_check.png"
+            <!-- <div class="text">
+              <img src="static/img/icon_check.png"
                    class="check-box" />
-            </div>
+            </div> -->
           </label>
           <div class="buttons-box">
             <div class="edit-box buttons"
@@ -62,7 +62,7 @@
   </div>
   <div class="no-address"
        v-else>
-    <img src="/static/img/icon_no_address.png"
+    <img src="static/img/icon_no_address.png"
          class="img" />
     <div class="text">还没有地址哦～</div>
   </div>
@@ -13,23 +13,23 @@
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		width: 690rpx;
+		width: 690px;
 		height: 100%;
 		margin: 0 auto;
 		.left-box {
 			.back {
-				width: 38rpx;
-				height: 38rpx;
+				width: 38px;
+				height: 38px;
 				.img {
 					display: block;
-					width: 38rpx;
-					height: 38rpx;
+					width: 38px;
+					height: 38px;
 				}
 			}
 			&.visibility {
 				visibility: hidden;
-				width: 38rpx;
-				height: 38rpx;
+				width: 38px;
+				height: 38px;
 			}
 		}
 		.center-box {
@@ -46,9 +46,9 @@
 				align-items: center;
 				margin: 0 auto;
 				color: #333333;
-				font-size: 36rpx;
+				font-size: 36px;
 				font-weight: 600;
-				width: 500rpx;
+				width: 500px;
 				height: 44px;
 				white-space: nowrap;
 				text-overflow: ellipsis;
@@ -63,33 +63,33 @@
 				align-items: center;
 				.img {
 					display: block;
-					width: 38rpx;
-					height: 38rpx;
+					width: 38px;
+					height: 38px;
 					& + .text {
-						margin-left: 10rpx;
+						margin-left: 10px;
 					}
 				}
 				.text {
 					color: #999999;
-					font-size: 28rpx;
+					font-size: 28px;
 					font-weight: 400;
 					& + .symbol-img {
-						margin-left: 10rpx;
+						margin-left: 10px;
 					}
 				}
 				.symbol-img {
 					display: block;
-					width: 10rpx;
-					height: 10rpx;
+					width: 10px;
+					height: 10px;
 				}
 				& + .func-box {
-					margin-left: 20rpx;
+					margin-left: 20px;
 				}
 			}
 			&.visibility {
 				visibility: hidden;
-				width: 38rpx;
-				height: 38rpx;
+				width: 38px;
+				height: 38px;
 			}
 		}
 	}
@@ -33,6 +33,7 @@
 			position: unset;
 			background-color: #FFFFFF;
 			border-bottom: 1px solid #E6E6E6;
+      padding:20px 0;
 		}
 	}
 	.pl {
 <template>
   <div class="address-create-page">
-    <!-- 导航栏 -->
-    <!-- <div class="nav"
-         :style="{'paddingTop': top.value + 'px'}"> -->
+   <!-- 导航栏 -->
+    <div class="nav">
     <!-- navBar -->
-    <!-- <nav-bar v-if="!this.isWeChat.value"
+      <nav-bar
                @back="back"
                :navs="navs">
-      </nav-bar> -->
-    <!-- </div> -->
-
-    <!-- <div class="pl"
-         :class="{'is-cnlive': isCNLive2.value, 'not-is-wechat': !isWeChat.value, 'not-is-cnlive': !isCNLive2.value, 'is-open-app': isOpenApp.value}"
-         :style="{'paddingTop': top.value + 'px'}"></div> -->
+      </nav-bar>
+    </div>
     <address-select-layer ref="selectLayer"
                           :addressInfo="addressInfo">
@@ -86,8 +81,7 @@
 import navBar from '@/components/navBar/navBar';
 import addressSelectLayer from "@/components/addressSelectLayer/addressSelectLayer.vue";
 import Vue from "vue";
-import { Toast } from 'vant';
-Vue.use(Toast);
+import { Toast, Indicator } from "mint-ui";
 export default {
   name: 'addressCreatePage',
   data () {
@@ -126,7 +120,7 @@ export default {
     this.$set(this, "navs", {
       back: {
-        img: "/static/img/icon_back.png"
+        img: "static/img/icon_back.png"
       },
       title: this.title
     });
@@ -214,12 +208,7 @@ export default {
         this.$set(this, 'isDisabled', true);
         // 显示loading
-        Toast.loading({
-          duration: 0, // 持续展示 toast
-          message: '加载中...',
-          forbidClick: true,
-          loadingType: 'spinner',
-        });
+       Indicator.open('加载中...');
         // 请求接口
         this.http("/Api/" + (this.getApiVersion().index) + "/addAddress", addressInfo, this.doAddressCreateCallback, {
@@ -241,7 +230,7 @@ export default {
       // 返回处理
       if (res.code == 200) {
-        Toast.clear();
+        Indicator.close();
         // Toast("添加地址成功");
         // 先返回列表页，在列表页显示操作结果（Storage传输）
         window.localStorage.setItem("addressOption", "添加地址成功");
@@ -35,6 +35,7 @@
 			position: unset;
 			background-color: #FFFFFF;
 			border-bottom: 1px solid #E6E6E6;
+      padding:20px 0;
 		}
 	}
 	.pl {
@@ -2,19 +2,14 @@
   <div class="address-edit-page">
     <!-- 导航栏 -->
-    <!-- <div class="nav"
-         :style="{'paddingTop': top.value + 'px'}"> -->
+    <div class="nav">
     <!-- navBar -->
-    <!-- <nav-bar v-if="!this.isWeChat.value"
+      <nav-bar
                @back="back"
                :navs="navs">
-      </nav-bar> -->
-    <!-- </div> -->
-
-    <!-- <div class="pl"
-         :class="{'is-cnlive': isCNLive2.value, 'not-is-wechat': !isWeChat.value, 'not-is-cnlive': !isCNLive2.value, 'is-open-app': isOpenApp.value}"
-         :style="{'paddingTop': top.value + 'px'}"></div> -->
+      </nav-bar>
+    </div>
     <address-select-layer ref="selectLayer"
                           :addressInfo="addressInfo">
@@ -85,8 +80,7 @@
 import navBar from '@/components/navBar/navBar';
 import addressSelectLayer from "@/components/addressSelectLayer/addressSelectLayer.vue";
 import Vue from "vue";
-import { Toast } from 'vant';
-Vue.use(Toast);
+import { Toast, Indicator } from "mint-ui";
 export default {
   name: 'addressEditPage',
   data () {
@@ -116,7 +110,7 @@ export default {
     this.$set(this, "navs", {
       back: {
-        img: "/static/img/icon_back.png"
+        img: "static/img/icon_back.png"
       },
       title: this.title
     });
@@ -145,12 +139,7 @@ export default {
       if (this.query.id && this.getStore("uid")) {
         // 显示loading
-        Toast.loading({
-          duration: 0, // 持续展示 toast
-          message: '加载中...',
-          forbidClick: true,
-          loadingType: 'spinner',
-        });
+       Indicator.open('加载中...');
         console.log(this.query.id);
         // 请求接口
         this.http("/Api/" + (this.getApiVersion().index) + "/addressInfo", {
@@ -187,7 +176,7 @@ export default {
         /* 设置地址相关属性（不含默认值选项） 结束 */
         // 隐藏loading
-        Toast.clear();
+        Indicator.close();
       } else if (res.code == 400) {
         // 获取收件人详情失败
@@ -267,12 +256,7 @@ export default {
         this.$set(this, 'isDisabled', true);
         // 显示loading
-        Toast.loading({
-          duration: 0, // 持续展示 toast
-          message: '加载中...',
-          forbidClick: true,
-          loadingType: 'spinner',
-        });
+       Indicator.open('加载中...');
         let options = {
           id: addressInfo.id,
@@ -307,7 +291,7 @@ export default {
       // 返回处理
       if (res.code == 200) {
         // 隐藏loading
-        Toast.clear();
+        Indicator.close();
         // 解构数据
         let datas = res.data;
@@ -354,12 +338,7 @@ export default {
       } else {
         // 显示loading
-        Toast.loading({
-          duration: 0, // 持续展示 toast
-          message: '加载中...',
-          forbidClick: true,
-          loadingType: 'spinner',
-        });
+       Indicator.open('加载中...');
         // 请求接口
         this.http("/Api/" + (this.getApiVersion().index) + "/editAddress", {
@@ -10,6 +10,7 @@
 			position: unset;
 			background-color: #FFFFFF;
 			border-bottom: 1px solid #E6E6E6;
+      padding:20px 0;
 		}
 	}
 	.pl {
@@ -2,15 +2,14 @@
   <div class="address-list-page">
     <!-- 导航栏 -->
-    <!-- <div class="nav"
-         :style="{'paddingTop': top.value + 'px'}"> -->
+    <div class="nav">
     <!-- navBar -->
-    <!-- <nav-bar v-if="!this.isWeChat.value"
+      <nav-bar
                @back="back"
                :navs="navs">
-      </nav-bar> -->
-    <!-- </div> -->
+      </nav-bar>
+    </div>
     <!-- <div class="pl"
          :class="{'is-cnlive': isCNLive2.value, 'not-is-wechat': !isWeChat.value, 'not-is-cnlive': !isCNLive2.value, 'is-open-app': isOpenApp.value}"
@@ -37,8 +36,8 @@ import navBar from &#39;@/components/navBar/navBar&#39;;
 import addressList from "@/components/addressList/addressList.vue";
 import addressCreateBar from "@/components/addressCreateBar/addressCreateBar.vue";
 import Vue from "vue";
-import { Toast, Dialog } from 'vant';
-Vue.use(Toast);
+import { Toast, Indicator } from "mint-ui";
+import { Dialog } from 'vant';
 export default {
   name: 'addressListPage',
   data () {
@@ -115,12 +114,7 @@ export default {
       if (this.getStore("uid")) {
         // 显示loading
-        Toast.loading({
-          duration: 0, // 持续展示 toast
-          message: '加载中...',
-          forbidClick: true,
-          loadingType: 'spinner',
-        });
+       Indicator.open('加载中...');
         // 请求接口
         this.http("/Api/" + (this.getApiVersion().index) + "/myAddress", {
@@ -139,7 +133,7 @@ export default {
     getMyAddressCallback (res, ext) {
       // 返回处理
       if (res.code == 200) {
-        Toast.clear();
+        Indicator.close();
         // 解构数据
         let datas = res.data;
         // 添加加星电话号码
@@ -295,7 +289,7 @@ export default {
      * @param {Object} item [地址信息对象]
      */
     doDelete (item) {
-      Dialog.alert({
+      Dialog.confirm({
         title: '标题',
         message: '确定删除收件人？',
       }).then((res) => {
@@ -306,13 +300,7 @@ export default {
           if (item.uid && item.id) {
             // 显示loading
-            Toast.loading({
-              duration: 0, // 持续展示 toast
-              message: '加载中...',
-              forbidClick: true,
-              loadingType: 'spinner',
-            });
-
+           Indicator.open('加载中...');
             // 请求接口
             this.http("/Api/" + (this.getApiVersion().index) + "/delAddress", {
               uid: item.uid,
@@ -389,12 +377,7 @@ export default {
       } else {
         // 显示loading
-        Toast.loading({
-          duration: 0, // 持续展示 toast
-          message: '加载中...',
-          forbidClick: true,
-          loadingType: 'spinner',
-        });
+       Indicator.open('加载中...');
         // 请求接口
         this.http("/Api/" + (this.getApiVersion().index) + "/editAddress", {
@@ -494,4 +477,28 @@ export default {
 <style rel="stylesheet/less" lang="less">
 @import './addressList';
+.van-dialog{
+width: 640px;
+font-size: 32px;
+}
+.van-dialog__header {
+    padding-top: 52px;
+    font-weight: 500;
+    line-height: 48px;
+    text-align: center;
+}
+.van-dialog__message {
+    max-height: 72px;
+    padding: 26px 24px;
+    overflow-y: auto;
+    font-size: 28px;
+    line-height: 40px;
+}
+.van-dialog{
+    font-size: 32px;
+}
+.van-button{
+    font-size: 32px;
+    padding: 40px 0;
+}
 </style>
 \ No newline at end of file
@@ -62,7 +62,7 @@ export default {
     this.$set(this, "navs", {
       back: {
-        img: "/static/img/icon_back.png"
+        img: "static/img/icon_back.png"
       },
       title: this.title
     });