Skip to content

Commit ab37335

Browse files
gookinggooking
committed
完成收货地址管理
1 parent 6011fa3 commit ab37335

5 files changed

Lines changed: 364 additions & 238 deletions

File tree

‎components/city-select/city-select.vue‎

Lines changed: 146 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,55 @@
11
<template>
2-
<u-popup v-model="value" mode="bottom" :popup="false" :mask="true" :closeable="true" :safe-area-inset-bottom="true"
3-
close-icon-color="#ffffff" :z-index="uZIndex" :maskCloseAble="maskCloseAble" @close="close">
4-
<u-tabs v-if="value" :list="genTabsList" :is-scroll="true" :current="tabsIndex" @change="tabsChange" ref="tabs"></u-tabs>
2+
<u-popup :show="value" mode="bottom" round="32rpx" :closeable="true"
3+
:z-index="uZIndex" :closeOnClickOverlay="maskCloseAble" @close="close">
4+
<u-tabs v-if="value" :list="genTabsList" :current="tabsIndex" @change="tabsChange"></u-tabs>
55
<view class="area-box">
66
<view class="u-flex" :class="{ 'change':isChange }">
77
<view class="area-item">
88
<view class="u-padding-10 u-bg-gray" style="height: 100%;">
99
<scroll-view :scroll-y="true" style="height: 100%">
1010
<u-cell-group>
11-
<u-cell-item v-for="(item,index) in provinces" :title="item.label" :arrow="false" :index="index" :key="index"
11+
<u-cell v-for="(item,index) in provinces" :key="index" :title="item.label" :name="index"
1212
@click="provinceChange">
1313
<u-icon v-if="isChooseP&&province===index" slot="right-icon" size="34" name="checkbox-mark"></u-icon>
14-
</u-cell-item>
14+
</u-cell>
1515
</u-cell-group>
1616
</scroll-view>
1717
</view>
1818
</view>
19-
<view class="area-item">
19+
<view v-if="isChooseP" class="area-item">
2020
<view class="u-padding-10 u-bg-gray" style="height: 100%;">
2121
<scroll-view :scroll-y="true" style="height: 100%">
22-
<u-cell-group v-if="isChooseP">
23-
<u-cell-item v-for="(item,index) in citys" :title="item.label" :arrow="false" :index="index" :key="index"
22+
<u-cell-group>
23+
<u-cell v-for="(item,index) in citys" :key="index" :title="item.label" :name="index"
2424
@click="cityChange">
2525
<u-icon v-if="isChooseC&&city===index" slot="right-icon" size="34" name="checkbox-mark"></u-icon>
26-
</u-cell-item>
26+
</u-cell>
2727
</u-cell-group>
2828
</scroll-view>
2929
</view>
3030
</view>
3131

32-
<view class="area-item">
32+
<view v-if="isChooseC" class="area-item">
3333
<view class="u-padding-10 u-bg-gray" style="height: 100%;">
3434
<scroll-view :scroll-y="true" style="height: 100%">
35-
<u-cell-group v-if="isChooseC">
36-
<u-cell-item v-for="(item,index) in areas" :title="item.label" :arrow="false" :index="index" :key="index"
35+
<u-cell-group>
36+
<u-cell v-for="(item,index) in areas" :key="index" :title="item.label" :name="index"
3737
@click="areaChange">
3838
<u-icon v-if="isChooseA&&area===index" slot="right-icon" size="34" name="checkbox-mark"></u-icon>
39-
</u-cell-item>
39+
</u-cell>
40+
</u-cell-group>
41+
</scroll-view>
42+
</view>
43+
</view>
44+
45+
<view v-if="isChooseA && level == 4" class="area-item">
46+
<view class="u-padding-10 u-bg-gray" style="height: 100%;">
47+
<scroll-view :scroll-y="true" style="height: 100%">
48+
<u-cell-group>
49+
<u-cell v-for="(item,index) in streets" :key="index" :title="item.label" :name="index"
50+
@click="streetChange">
51+
<u-icon v-if="isChooseS&&street===index" slot="right-icon" size="34" name="checkbox-mark"></u-icon>
52+
</u-cell>
4053
</u-cell-group>
4154
</scroll-view>
4255
</view>
@@ -85,6 +98,10 @@
8598
zIndex: {
8699
type: [String, Number],
87100
default: 0
101+
},
102+
level: {
103+
type: Number,
104+
default: 3
88105
}
89106
},
90107
data() {
@@ -99,6 +116,9 @@
99116
isChooseA: false, //是否已经选择了区
100117
area: 0, //区级下标
101118
areas: [],
119+
isChooseS: false, //是否已经选择了街道
120+
street: 0, //街道下标
121+
streets: [],
102122
tabsIndex: 0,
103123
}
104124
},
@@ -127,6 +147,14 @@
127147
}
128148
if (this.isChooseA) {
129149
tabsList[2]['name'] = this.areas[this.area]['label'];
150+
if(this.level == 4) {
151+
tabsList[3] = {
152+
name: "请选择"
153+
};
154+
}
155+
}
156+
if (this.isChooseS && this.level == 4) {
157+
tabsList[3]['name'] = this.streets[this.street]['label'];
130158
}
131159
return tabsList;
132160
},
@@ -138,6 +166,7 @@
138166
methods: {
139167
async init() {
140168
// 获取所有的省份
169+
// https://www.yuque.com/apifm/nu0f75/anab2a
141170
const res = await this.$wxapi.province()
142171
this.provinces = []
143172
if(res.code == 0) {
@@ -149,14 +178,29 @@
149178
})
150179
}
151180
console.log(this.areaCode);
152-
if (this.areaCode.length == 3) {
153-
await this.setProvince("", this.areaCode[0]);
154-
await this.setCity("", this.areaCode[1]);
155-
await this.setArea("", this.areaCode[2]);
156-
} else if (this.defaultRegion.length == 3) {
157-
await this.setProvince(this.defaultRegion[0], "");
158-
await this.setCity(this.defaultRegion[1], "");
159-
await this.setArea(this.defaultRegion[2], "");
181+
if(this.level == 3) {
182+
if (this.areaCode.length == 3) {
183+
await this.setProvince("", this.areaCode[0]);
184+
await this.setCity("", this.areaCode[1]);
185+
await this.setArea("", this.areaCode[2]);
186+
} else if (this.defaultRegion.length == 3) {
187+
await this.setProvince(this.defaultRegion[0], "");
188+
await this.setCity(this.defaultRegion[1], "");
189+
await this.setArea(this.defaultRegion[2], "");
190+
}
191+
}
192+
if(this.level == 4) {
193+
if (this.areaCode.length == 4) {
194+
await this.setProvince("", this.areaCode[0]);
195+
await this.setCity("", this.areaCode[1]);
196+
await this.setArea("", this.areaCode[2]);
197+
await this.setStreet("", this.areaCode[3]);
198+
} else if (this.defaultRegion.length == 4) {
199+
await this.setProvince(this.defaultRegion[0], "");
200+
await this.setCity(this.defaultRegion[1], "");
201+
await this.setArea(this.defaultRegion[2], "");
202+
await this.setStreet(this.defaultRegion[3], "");
203+
}
160204
}
161205
},
162206
async setProvince(label = "", value = "") {
@@ -166,7 +210,7 @@
166210
console.log(k);
167211
if(k != -1) {
168212
const v = this.provinces[k]
169-
await this.provinceChange(k)
213+
await this.provinceChange({ name: k })
170214
}
171215
},
172216
async setCity(label = "", value = "") {
@@ -175,7 +219,7 @@
175219
})
176220
if(k != -1) {
177221
const v = this.citys[k]
178-
await this.cityChange(k)
222+
await this.cityChange({ name: k })
179223
}
180224
},
181225
async setArea(label = "", value = "") {
@@ -184,22 +228,51 @@
184228
})
185229
if(k != -1) {
186230
const v = this.areas[k]
187-
this.isChooseA = true;
188-
this.area = k;
231+
if(this.level == 3) {
232+
this.isChooseA = true;
233+
this.area = k;
234+
}
235+
if(this.level == 4) {
236+
await this.areaChange({ name: k })
237+
}
238+
}
239+
},
240+
async setStreet(label = "", value = "") {
241+
const k = this.streets.findIndex(v => {
242+
return value ? v.value == value : v.label == label
243+
})
244+
if(k != -1) {
245+
const v = this.streets[k]
246+
this.isChooseS = true;
247+
this.street = k;
189248
}
190249
},
191250
close() {
192251
this.$emit('input', false);
193252
},
194-
tabsChange(index) {
195-
this.tabsIndex = index;
253+
tabsChange(e) {
254+
this.tabsIndex = e.index;
255+
if(e.index == 0) {
256+
this.provinceChange({ name: this.province })
257+
}
258+
if(e.index == 1) {
259+
this.cityChange({ name: this.city })
260+
}
261+
if(e.index == 2) {
262+
this.areaChange({ name: this.area })
263+
}
264+
if(e.index == 3) {
265+
this.streetChange({ name: this.street })
266+
}
196267
},
197-
async provinceChange(index) {
268+
async provinceChange(e) {
269+
const index = e.name
198270
this.isChooseP = true;
199271
this.isChooseC = false;
200272
this.isChooseA = false;
273+
this.isChooseS = false;
201274
this.province = index;
202-
// 接口读取
275+
// https://www.yuque.com/apifm/nu0f75/kfukig
203276
const res = await this.$wxapi.nextRegion(this.provinces[index].value)
204277
this.citys = []
205278
if(res.code == 0) {
@@ -213,11 +286,13 @@
213286
// 接口读取结束
214287
this.tabsIndex = 1;
215288
},
216-
async cityChange(index) {
289+
async cityChange(e) {
290+
const index = e.name
217291
this.isChooseC = true;
218292
this.isChooseA = false;
293+
this.isChooseS = false;
219294
this.city = index;
220-
// 接口读取
295+
// https://www.yuque.com/apifm/nu0f75/kfukig
221296
const res = await this.$wxapi.nextRegion(this.citys[index].value)
222297
this.areas = []
223298
if(res.code == 0) {
@@ -231,13 +306,44 @@
231306
// 接口读取结束
232307
this.tabsIndex = 2;
233308
},
234-
areaChange(index) {
309+
async areaChange(e) {
310+
const index = e.name
235311
this.isChooseA = true;
312+
this.isChooseS = false;
236313
this.area = index;
314+
if(this.level == 3) {
315+
let result = {};
316+
result.province = this.provinces[this.province];
317+
result.city = this.citys[this.city];
318+
result.area = this.areas[this.area];
319+
this.$emit('city-change', result);
320+
this.close();
321+
}
322+
if(this.level == 4) {
323+
// https://www.yuque.com/apifm/nu0f75/kfukig
324+
const res = await this.$wxapi.nextRegion(this.areas[index].value)
325+
this.streets = []
326+
if(res.code == 0) {
327+
res.data.forEach(ele => {
328+
this.streets.push({
329+
label: ele.name,
330+
value: ele.id
331+
})
332+
})
333+
}
334+
// 接口读取结束
335+
this.tabsIndex = 3;
336+
}
337+
},
338+
streetChange(e) {
339+
const index = e.name
340+
this.isChooseS = true;
341+
this.street = index;
237342
let result = {};
238343
result.province = this.provinces[this.province];
239344
result.city = this.citys[this.city];
240345
result.area = this.areas[this.area];
346+
result.street = this.streets[this.street];
241347
this.$emit('city-change', result);
242348
this.close();
243349
}
@@ -257,13 +363,16 @@
257363
transform: translateX(0);
258364
259365
&.change {
260-
transform: translateX(-33.3333333%);
366+
transform: translateX(-0%);
261367
}
262368
}
263-
264-
.area-item {
265-
width: 33.3333333%;
266-
height: 800rpx;
369+
.u-flex {
370+
width: 100vw;
371+
display: flex;
372+
.area-item {
373+
flex: 1;
374+
height: 800rpx;
375+
}
267376
}
268377
}
269378
</style>

‎components/page-box-empty/page-box-empty.vue‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
{{ title }}
88
<view v-if="subTitle" class="tips">{{ subTitle }}</view>
99
</view>
10-
<view v-if="showBtn" class="btn" @click="goIndex">随便逛逛</view>
10+
<view v-if="showBtn" class="btn" @click="goIndex">{{ btnName }}</view>
1111
</view>
1212
</view>
1313
</view>
@@ -25,6 +25,14 @@
2525
type: String,
2626
default: ''
2727
},
28+
btnName: {
29+
type: String,
30+
default: '随便逛逛'
31+
},
32+
url: {
33+
type: String,
34+
default: ''
35+
},
2836
showBtn: {
2937
type: Boolean,
3038
default: false
@@ -46,9 +54,15 @@
4654
},
4755
methods: {
4856
goIndex() {
49-
uni.switchTab({
50-
url: "../../pages/index/index"
51-
})
57+
if(!this.url) {
58+
uni.switchTab({
59+
url: "../../pages/index/index"
60+
})
61+
} else {
62+
uni.navigateTo({
63+
url: this.url
64+
})
65+
}
5266
},
5367
}
5468
}

0 commit comments

Comments
 (0)