w-front-end / select_good · Commits

Commit e57ec5ab866b83546b04b7b31d730647db8caac1

Authored by zhiyangdu
1 parent 8ca7f4d4

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

Inline Side-by-side
Showing 10 changed files with 85 additions and 107 deletions
src/components/addressCreateBar/addressCreateBar.vue
  View file @e57ec5a
... ... @@ -4,7 +4,7 @@
4 4 <div class="box">
5 5 <div class="buttons">
6 6 <div class="btn btn-bright" @click="doCreate">
7   - <img src="/static/img/icon_add.png" class="img"/>
  7 + <img src="static/img/icon_add.png" class="img"/>
8 8 <div class="text">新增地址</div>
9 9 </div>
10 10 </div>
... ...
src/components/addressList/addressList.vue
  View file @e57ec5a
... ... @@ -33,16 +33,16 @@
33 33 type="checkbox"
34 34 name="like"
35 35 :value="item.state == 2">
36   - <img src="/static/img/icon_check_active.png"
  36 + <img src="static/img/icon_check_active.png"
37 37 class="check-box"
38 38 v-if="item.state == 2" />
39   - <img src="/static/img/icon_check.png"
  39 + <img src="static/img/icon_check.png"
40 40 class="check-box"
41 41 v-else/>
42   - <div class="text">
43   - <img src="/static/img/icon_check.png"
  42 + <!-- <div class="text">
  43 + <img src="static/img/icon_check.png"
44 44 class="check-box" />
45   - </div>
  45 + </div> -->
46 46 </label>
47 47 <div class="buttons-box">
48 48 <div class="edit-box buttons"
... ... @@ -62,7 +62,7 @@
62 62 </div>
63 63 <div class="no-address"
64 64 v-else>
65   - <img src="/static/img/icon_no_address.png"
  65 + <img src="static/img/icon_no_address.png"
66 66 class="img" />
67 67 <div class="text">还没有地址哦～</div>
68 68 </div>
... ...
src/components/navBar/navBar.less
  View file @e57ec5a
... ... @@ -13,23 +13,23 @@
13 13 display: flex;
14 14 justify-content: space-between;
15 15 align-items: center;
16   - width: 690rpx;
  16 + width: 690px;
17 17 height: 100%;
18 18 margin: 0 auto;
19 19 .left-box {
20 20 .back {
21   - width: 38rpx;
22   - height: 38rpx;
  21 + width: 38px;
  22 + height: 38px;
23 23 .img {
24 24 display: block;
25   - width: 38rpx;
26   - height: 38rpx;
  25 + width: 38px;
  26 + height: 38px;
27 27 }
28 28 }
29 29 &.visibility {
30 30 visibility: hidden;
31   - width: 38rpx;
32   - height: 38rpx;
  31 + width: 38px;
  32 + height: 38px;
33 33 }
34 34 }
35 35 .center-box {
... ... @@ -46,9 +46,9 @@
46 46 align-items: center;
47 47 margin: 0 auto;
48 48 color: #333333;
49   - font-size: 36rpx;
  49 + font-size: 36px;
50 50 font-weight: 600;
51   - width: 500rpx;
  51 + width: 500px;
52 52 height: 44px;
53 53 white-space: nowrap;
54 54 text-overflow: ellipsis;
... ... @@ -63,33 +63,33 @@
63 63 align-items: center;
64 64 .img {
65 65 display: block;
66   - width: 38rpx;
67   - height: 38rpx;
  66 + width: 38px;
  67 + height: 38px;
68 68 & + .text {
69   - margin-left: 10rpx;
  69 + margin-left: 10px;
70 70 }
71 71 }
72 72 .text {
73 73 color: #999999;
74   - font-size: 28rpx;
  74 + font-size: 28px;
75 75 font-weight: 400;
76 76 & + .symbol-img {
77   - margin-left: 10rpx;
  77 + margin-left: 10px;
78 78 }
79 79 }
80 80 .symbol-img {
81 81 display: block;
82   - width: 10rpx;
83   - height: 10rpx;
  82 + width: 10px;
  83 + height: 10px;
84 84 }
85 85 & + .func-box {
86   - margin-left: 20rpx;
  86 + margin-left: 20px;
87 87 }
88 88 }
89 89 &.visibility {
90 90 visibility: hidden;
91   - width: 38rpx;
92   - height: 38rpx;
  91 + width: 38px;
  92 + height: 38px;
93 93 }
94 94 }
95 95 }
... ...
src/pages/addressCreate/addressCreate.less
  View file @e57ec5a
... ... @@ -33,6 +33,7 @@
33 33 position: unset;
34 34 background-color: #FFFFFF;
35 35 border-bottom: 1px solid #E6E6E6;
  36 + padding:20px 0;
36 37 }
37 38 }
38 39 .pl {
... ...
src/pages/addressCreate/addressCreate.vue
  View file @e57ec5a
1 1 <template>
2 2 <div class="address-create-page">
3 3  
4   - <!-- 导航栏 -->
5   - <!-- <div class="nav"
6   - :style="{'paddingTop': top.value + 'px'}"> -->
  4 + <!-- 导航栏 -->
  5 + <div class="nav">
7 6  
8 7 <!-- navBar -->
9   - <!-- <nav-bar v-if="!this.isWeChat.value"
  8 + <nav-bar
10 9 @back="back"
11 10 :navs="navs">
12   - </nav-bar> -->
13   - <!-- </div> -->
14   -
15   - <!-- <div class="pl"
16   - :class="{'is-cnlive': isCNLive2.value, 'not-is-wechat': !isWeChat.value, 'not-is-cnlive': !isCNLive2.value, 'is-open-app': isOpenApp.value}"
17   - :style="{'paddingTop': top.value + 'px'}"></div> -->
  11 + </nav-bar>
  12 + </div>
18 13  
19 14 <address-select-layer ref="selectLayer"
20 15 :addressInfo="addressInfo">
... ... @@ -86,8 +81,7 @@
86 81 import navBar from '@/components/navBar/navBar';
87 82 import addressSelectLayer from "@/components/addressSelectLayer/addressSelectLayer.vue";
88 83 import Vue from "vue";
89   -import { Toast } from 'vant';
90   -Vue.use(Toast);
  84 +import { Toast, Indicator } from "mint-ui";
91 85 export default {
92 86 name: 'addressCreatePage',
93 87 data () {
... ... @@ -126,7 +120,7 @@ export default {
126 120  
127 121 this.$set(this, "navs", {
128 122 back: {
129   - img: "/static/img/icon_back.png"
  123 + img: "static/img/icon_back.png"
130 124 },
131 125 title: this.title
132 126 });
... ... @@ -214,12 +208,7 @@ export default {
214 208 this.$set(this, 'isDisabled', true);
215 209  
216 210 // 显示loading
217   - Toast.loading({
218   - duration: 0, // 持续展示 toast
219   - message: '加载中...',
220   - forbidClick: true,
221   - loadingType: 'spinner',
222   - });
  211 + Indicator.open('加载中...');
223 212  
224 213 // 请求接口
225 214 this.http("/Api/" + (this.getApiVersion().index) + "/addAddress", addressInfo, this.doAddressCreateCallback, {
... ... @@ -241,7 +230,7 @@ export default {
241 230  
242 231 // 返回处理
243 232 if (res.code == 200) {
244   - Toast.clear();
  233 + Indicator.close();
245 234 // Toast("添加地址成功");
246 235 // 先返回列表页，在列表页显示操作结果（Storage传输）
247 236 window.localStorage.setItem("addressOption", "添加地址成功");
... ...
src/pages/addressEdit/addressEdit.less
  View file @e57ec5a
... ... @@ -35,6 +35,7 @@
35 35 position: unset;
36 36 background-color: #FFFFFF;
37 37 border-bottom: 1px solid #E6E6E6;
  38 + padding:20px 0;
38 39 }
39 40 }
40 41 .pl {
... ...
src/pages/addressEdit/addressEdit.vue
  View file @e57ec5a
... ... @@ -2,19 +2,14 @@
2 2 <div class="address-edit-page">
3 3  
4 4 <!-- 导航栏 -->
5   - <!-- <div class="nav"
6   - :style="{'paddingTop': top.value + 'px'}"> -->
  5 + <div class="nav">
7 6  
8 7 <!-- navBar -->
9   - <!-- <nav-bar v-if="!this.isWeChat.value"
  8 + <nav-bar
10 9 @back="back"
11 10 :navs="navs">
12   - </nav-bar> -->
13   - <!-- </div> -->
14   -
15   - <!-- <div class="pl"
16   - :class="{'is-cnlive': isCNLive2.value, 'not-is-wechat': !isWeChat.value, 'not-is-cnlive': !isCNLive2.value, 'is-open-app': isOpenApp.value}"
17   - :style="{'paddingTop': top.value + 'px'}"></div> -->
  11 + </nav-bar>
  12 + </div>
18 13  
19 14 <address-select-layer ref="selectLayer"
20 15 :addressInfo="addressInfo">
... ... @@ -85,8 +80,7 @@
85 80 import navBar from '@/components/navBar/navBar';
86 81 import addressSelectLayer from "@/components/addressSelectLayer/addressSelectLayer.vue";
87 82 import Vue from "vue";
88   -import { Toast } from 'vant';
89   -Vue.use(Toast);
  83 +import { Toast, Indicator } from "mint-ui";
90 84 export default {
91 85 name: 'addressEditPage',
92 86 data () {
... ... @@ -116,7 +110,7 @@ export default {
116 110  
117 111 this.$set(this, "navs", {
118 112 back: {
119   - img: "/static/img/icon_back.png"
  113 + img: "static/img/icon_back.png"
120 114 },
121 115 title: this.title
122 116 });
... ... @@ -145,12 +139,7 @@ export default {
145 139 if (this.query.id && this.getStore("uid")) {
146 140  
147 141 // 显示loading
148   - Toast.loading({
149   - duration: 0, // 持续展示 toast
150   - message: '加载中...',
151   - forbidClick: true,
152   - loadingType: 'spinner',
153   - });
  142 + Indicator.open('加载中...');
154 143 console.log(this.query.id);
155 144 // 请求接口
156 145 this.http("/Api/" + (this.getApiVersion().index) + "/addressInfo", {
... ... @@ -187,7 +176,7 @@ export default {
187 176 /* 设置地址相关属性（不含默认值选项） 结束 */
188 177  
189 178 // 隐藏loading
190   - Toast.clear();
  179 + Indicator.close();
191 180 } else if (res.code == 400) {
192 181  
193 182 // 获取收件人详情失败
... ... @@ -267,12 +256,7 @@ export default {
267 256 this.$set(this, 'isDisabled', true);
268 257  
269 258 // 显示loading
270   - Toast.loading({
271   - duration: 0, // 持续展示 toast
272   - message: '加载中...',
273   - forbidClick: true,
274   - loadingType: 'spinner',
275   - });
  259 + Indicator.open('加载中...');
276 260  
277 261 let options = {
278 262 id: addressInfo.id,
... ... @@ -307,7 +291,7 @@ export default {
307 291 // 返回处理
308 292 if (res.code == 200) {
309 293 // 隐藏loading
310   - Toast.clear();
  294 + Indicator.close();
311 295 // 解构数据
312 296 let datas = res.data;
313 297  
... ... @@ -354,12 +338,7 @@ export default {
354 338 } else {
355 339  
356 340 // 显示loading
357   - Toast.loading({
358   - duration: 0, // 持续展示 toast
359   - message: '加载中...',
360   - forbidClick: true,
361   - loadingType: 'spinner',
362   - });
  341 + Indicator.open('加载中...');
363 342  
364 343 // 请求接口
365 344 this.http("/Api/" + (this.getApiVersion().index) + "/editAddress", {
... ...
src/pages/addressList/addressList.less
  View file @e57ec5a
... ... @@ -10,6 +10,7 @@
10 10 position: unset;
11 11 background-color: #FFFFFF;
12 12 border-bottom: 1px solid #E6E6E6;
  13 + padding:20px 0;
13 14 }
14 15 }
15 16 .pl {
... ...
src/pages/addressList/addressList.vue
  View file @e57ec5a
... ... @@ -2,15 +2,14 @@
2 2 <div class="address-list-page">
3 3  
4 4 <!-- 导航栏 -->
5   - <!-- <div class="nav"
6   - :style="{'paddingTop': top.value + 'px'}"> -->
  5 + <div class="nav">
7 6  
8 7 <!-- navBar -->
9   - <!-- <nav-bar v-if="!this.isWeChat.value"
  8 + <nav-bar
10 9 @back="back"
11 10 :navs="navs">
12   - </nav-bar> -->
13   - <!-- </div> -->
  11 + </nav-bar>
  12 + </div>
14 13  
15 14 <!-- <div class="pl"
16 15 :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;;
37 36 import addressList from "@/components/addressList/addressList.vue";
38 37 import addressCreateBar from "@/components/addressCreateBar/addressCreateBar.vue";
39 38 import Vue from "vue";
40   -import { Toast, Dialog } from 'vant';
41   -Vue.use(Toast);
  39 +import { Toast, Indicator } from "mint-ui";
  40 +import { Dialog } from 'vant';
42 41 export default {
43 42 name: 'addressListPage',
44 43 data () {
... ... @@ -115,12 +114,7 @@ export default {
115 114 if (this.getStore("uid")) {
116 115  
117 116 // 显示loading
118   - Toast.loading({
119   - duration: 0, // 持续展示 toast
120   - message: '加载中...',
121   - forbidClick: true,
122   - loadingType: 'spinner',
123   - });
  117 + Indicator.open('加载中...');
124 118  
125 119 // 请求接口
126 120 this.http("/Api/" + (this.getApiVersion().index) + "/myAddress", {
... ... @@ -139,7 +133,7 @@ export default {
139 133 getMyAddressCallback (res, ext) {
140 134 // 返回处理
141 135 if (res.code == 200) {
142   - Toast.clear();
  136 + Indicator.close();
143 137 // 解构数据
144 138 let datas = res.data;
145 139 // 添加加星电话号码
... ... @@ -295,7 +289,7 @@ export default {
295 289 * @param {Object} item [地址信息对象]
296 290 */
297 291 doDelete (item) {
298   - Dialog.alert({
  292 + Dialog.confirm({
299 293 title: '标题',
300 294 message: '确定删除收件人？',
301 295 }).then((res) => {
... ... @@ -306,13 +300,7 @@ export default {
306 300 if (item.uid && item.id) {
307 301  
308 302 // 显示loading
309   - Toast.loading({
310   - duration: 0, // 持续展示 toast
311   - message: '加载中...',
312   - forbidClick: true,
313   - loadingType: 'spinner',
314   - });
315   -
  303 + Indicator.open('加载中...');
316 304 // 请求接口
317 305 this.http("/Api/" + (this.getApiVersion().index) + "/delAddress", {
318 306 uid: item.uid,
... ... @@ -389,12 +377,7 @@ export default {
389 377 } else {
390 378  
391 379 // 显示loading
392   - Toast.loading({
393   - duration: 0, // 持续展示 toast
394   - message: '加载中...',
395   - forbidClick: true,
396   - loadingType: 'spinner',
397   - });
  380 + Indicator.open('加载中...');
398 381  
399 382 // 请求接口
400 383 this.http("/Api/" + (this.getApiVersion().index) + "/editAddress", {
... ... @@ -494,4 +477,28 @@ export default {
494 477  
495 478 <style rel="stylesheet/less" lang="less">
496 479 @import './addressList';
  480 +.van-dialog{
  481 +width: 640px;
  482 +font-size: 32px;
  483 +}
  484 +.van-dialog__header {
  485 + padding-top: 52px;
  486 + font-weight: 500;
  487 + line-height: 48px;
  488 + text-align: center;
  489 +}
  490 +.van-dialog__message {
  491 + max-height: 72px;
  492 + padding: 26px 24px;
  493 + overflow-y: auto;
  494 + font-size: 28px;
  495 + line-height: 40px;
  496 +}
  497 +.van-dialog{
  498 + font-size: 32px;
  499 +}
  500 +.van-button{
  501 + font-size: 32px;
  502 + padding: 40px 0;
  503 +}
497 504 </style>
498 505 \ No newline at end of file
... ...
src/pages/logistics/logistics.vue
  View file @e57ec5a
... ... @@ -62,7 +62,7 @@ export default {
62 62  
63 63 this.$set(this, "navs", {
64 64 back: {
65   - img: "/static/img/icon_back.png"
  65 + img: "static/img/icon_back.png"
66 66 },
67 67 title: this.title
68 68 });
... ...