forked from angelo/web-retail-h5
145 lines
3.5 KiB
Vue
145 lines
3.5 KiB
Vue
<template>
|
||
<view>
|
||
<u-picker
|
||
@cancel="pickershow = false"
|
||
:show="pickershow"
|
||
ref="uPicker"
|
||
:defaultIndex="defaultIndex"
|
||
:columns="columns"
|
||
@confirm="confirm"
|
||
keyName="name"
|
||
@change="changeHandler"
|
||
></u-picker>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as api from '@/config/goods'
|
||
import { mapGetters } from 'vuex'
|
||
export default {
|
||
data() {
|
||
return {
|
||
columns: [],
|
||
pickershow: false,
|
||
diqu: '',
|
||
form: {},
|
||
defaultIndex: [],
|
||
user: '',
|
||
}
|
||
},
|
||
props: {
|
||
defaultCode: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
cityList: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
provinceList: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
countyList: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
},
|
||
watch: {
|
||
defaultCode: {
|
||
deep: true,
|
||
handler(n) {
|
||
if (this.cityList.length > 0) {
|
||
this.getDefaultIndex(n)
|
||
} else {
|
||
this.getAllAreaList(
|
||
uni.getStorageSync('pkCountry') || this.user.pkSettleCountry
|
||
).then(res => {
|
||
if (res) {
|
||
this.getDefaultIndex(n)
|
||
}
|
||
})
|
||
}
|
||
},
|
||
},
|
||
},
|
||
created() {},
|
||
methods: {
|
||
getDefaultIndex(province) {
|
||
const cityList = this.cityList.filter(item => item.parent === province)
|
||
const countyList = this.countyList.filter(
|
||
item => item.parent === cityList[0].pkId
|
||
)
|
||
|
||
const columns = [this.provinceList, cityList]
|
||
if (countyList.length) {
|
||
columns.push(countyList)
|
||
}
|
||
this.columns = columns
|
||
this.defaultIndex = [0, 0]
|
||
if (countyList.length) {
|
||
this.defaultIndex.push(0)
|
||
}
|
||
this.$emit('getAddressData', columns)
|
||
},
|
||
setShow(province) {
|
||
this.pickershow = true
|
||
this.getDefaultIndex(province)
|
||
},
|
||
getCityList(province) {
|
||
const cityList = this.cityList.filter(item => item.parent === province)
|
||
return cityList
|
||
},
|
||
getCountyList(city) {
|
||
const countyList = this.countyList.filter(item => item.parent === city)
|
||
return countyList
|
||
},
|
||
changeHandler(e) {
|
||
const {
|
||
columnIndex,
|
||
value,
|
||
values, // values为当前变化列的数组内容
|
||
index,
|
||
indexs,
|
||
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
||
picker = this.$refs.uPicker,
|
||
} = e
|
||
// 当第一列值发生变化时，变化第二列(后一列)对应的选项
|
||
if (columnIndex === 0) {
|
||
const province = this.provinceList[index]
|
||
const cityList = this.getCityList(province.pkId)
|
||
picker.setColumnValues(1, cityList)
|
||
if (this.countyList.length) {
|
||
const city = cityList[0]
|
||
const countyList = this.getCountyList(city.pkId)
|
||
picker.setColumnValues(2, countyList)
|
||
}
|
||
// picker为选择器this实例，变化第二列对应的选项
|
||
} else if (columnIndex === 1 && this.countyList.length) {
|
||
const city = cityList[indexs[columnIndex]]
|
||
const countyList = this.getCountyList(city.pkId)
|
||
picker.setColumnValues(2, countyList)
|
||
}
|
||
},
|
||
// 回调参数为包含columnIndex、value、values
|
||
confirm(e) {
|
||
this.pickershow = false
|
||
this.$emit('setAddress', e.value)
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.picker {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
border-width: 0.5px !important;
|
||
border-color: #dadbde !important;
|
||
border-style: solid;
|
||
border-radius: 4px;
|
||
padding: 6px 9px;
|
||
}
|
||
</style>
|