|
|
@@ -1,12 +1,11 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <!-- #ifdef MP-ALIPAY -->
|
|
|
<u-popup :show="areaShow" @close="cancel">
|
|
|
<view class="flex warp">
|
|
|
<view class="warp-left" @click="cancel"> 取消 </view>
|
|
|
<view class="warp-right" @click="setArea"> 确定 </view>
|
|
|
</view>
|
|
|
- <picker-view indicator-style="" :value="value" @change="bindChange">
|
|
|
+ <picker-view style="height: 500rpx; text-align: center; line-height: 68rpx;" :value="value" @change="bindChange">
|
|
|
<picker-view-column>
|
|
|
<view v-for="(item,index) in provinceRes" :key="index">{{item.areaName}}</view>
|
|
|
</picker-view-column>
|
|
|
@@ -18,12 +17,6 @@
|
|
|
</picker-view-column>
|
|
|
</picker-view>
|
|
|
</u-popup>
|
|
|
- <!-- #endif -->
|
|
|
- <!-- #ifndef MP-ALIPAY -->
|
|
|
- <u-picker ref="uPicker" :show="areaShow" :defaultIndex="[1, 0, 0]" :columns="columns" @change="changeHandler"
|
|
|
- @confirm="confirm" @cancel="cancel" keyName="areaName"></u-picker>
|
|
|
- <!-- #endif -->
|
|
|
-
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -39,8 +32,6 @@
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- columns: [],
|
|
|
-
|
|
|
value: [0,0,0],//所选下标
|
|
|
provinceRes: [],//省
|
|
|
cityRes: [],//市
|
|
|
@@ -49,7 +40,7 @@
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
- //zfb切换
|
|
|
+ //切换
|
|
|
async bindChange(e){
|
|
|
if(e.detail.value[0] != this.value[0]){
|
|
|
let cityRes = await $http.post('/api/v1/mp/area/listByPid', {
|
|
|
@@ -75,7 +66,7 @@
|
|
|
return
|
|
|
}
|
|
|
},
|
|
|
- //zfb确定修改
|
|
|
+ //确定修改
|
|
|
setArea() {
|
|
|
let confirmObj = {
|
|
|
province: this.provinceRes[this.value[0]].areaName,
|
|
|
@@ -88,9 +79,8 @@
|
|
|
}
|
|
|
this.$emit('confirmArea', confirmObj)
|
|
|
},
|
|
|
-
|
|
|
+ //初始加载
|
|
|
async getArea() {
|
|
|
- const picker = this.$refs.uPicker
|
|
|
let provinceRes = await $http.post('/api/v1/mp/area/listByPid', {
|
|
|
pid: 0
|
|
|
})
|
|
|
@@ -100,62 +90,10 @@
|
|
|
let areaRes = await $http.post('/api/v1/mp/area/listByPid', {
|
|
|
pid: cityRes && cityRes.data && cityRes.data[0].areaId
|
|
|
})
|
|
|
- // #ifdef MP-ALIPAY
|
|
|
this.provinceRes = provinceRes.data
|
|
|
this.cityRes = cityRes.data
|
|
|
this.areaRes = areaRes.data
|
|
|
- // #endif
|
|
|
- // #ifndef MP-ALIPAY
|
|
|
- picker.setColumnValues(0, provinceRes.data)
|
|
|
- picker.setColumnValues(1, cityRes.data)
|
|
|
- picker.setColumnValues(2, areaRes.data)
|
|
|
- // #endif
|
|
|
},
|
|
|
-
|
|
|
- async changeHandler(e) {
|
|
|
- const {
|
|
|
- columnIndex,
|
|
|
- index,
|
|
|
- value,
|
|
|
- // 微信小程序无法将picker实例传出来，只能通过ref操作
|
|
|
- picker = this.$refs.uPicker
|
|
|
- } = e
|
|
|
- if (columnIndex === 0) {
|
|
|
- let cityRes = await $http.post('/api/v1/mp/area/listByPid', {
|
|
|
- pid: value && value[0].areaId
|
|
|
- })
|
|
|
- let areaRes = await $http.post('/api/v1/mp/area/listByPid', {
|
|
|
- pid: cityRes && cityRes.data && cityRes.data[0].areaId
|
|
|
- })
|
|
|
- picker.setColumnValues(1, cityRes.data)
|
|
|
- picker.setColumnValues(2, areaRes.data)
|
|
|
- }
|
|
|
- if (columnIndex === 1) {
|
|
|
- let areaRes = await $http.post('/api/v1/mp/area/listByPid', {
|
|
|
- pid: value && value[1].areaId
|
|
|
- })
|
|
|
- picker.setColumnValues(2, areaRes.data)
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 回调参数为包含columnIndex、value、values
|
|
|
- confirm(e) {
|
|
|
- const picker = this.$refs.uPicker
|
|
|
- const {
|
|
|
- value
|
|
|
- } = e
|
|
|
- let confirmObj = {
|
|
|
- province: value[0].areaName,
|
|
|
- provinceId: value[0].areaId,
|
|
|
- city: value[1].areaName,
|
|
|
- cityId: value[1].areaId,
|
|
|
- area: value[2].areaName,
|
|
|
- areaId: value[2].areaId,
|
|
|
- cityShow: value.map(item => item.areaName).join('-')
|
|
|
- }
|
|
|
- this.$emit('confirmArea', confirmObj)
|
|
|
- },
|
|
|
-
|
|
|
cancel() {
|
|
|
this.$emit('cancel')
|
|
|
},
|
