forked from angelo/web-retail-h5
203 lines
6.9 KiB
Vue
203 lines
6.9 KiB
Vue
<!--
|
||
* @Descripttion:
|
||
* @version:
|
||
* @Author: 王三华
|
||
* @Date: 2023-05-30 20:18:30
|
||
-->
|
||
|
||
<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,
|
||
provinceList: [],
|
||
cityList: [],
|
||
quList: [],
|
||
diqu: '',
|
||
form: {},
|
||
defaultIndex: [],
|
||
user: '',
|
||
}
|
||
},
|
||
props: {
|
||
defaultCode: {
|
||
type: Array,
|
||
default: [],
|
||
},
|
||
},
|
||
watch: {
|
||
defaultCode: {
|
||
deep: true,
|
||
handler(n) {
|
||
if (this.cityList.length > 0) {
|
||
this.getDefaultIndex(n)
|
||
} else {
|
||
this.getAllAreaList(this.user.pkSettleCountry).then((res) => {
|
||
if (res) {
|
||
this.getDefaultIndex(n)
|
||
}
|
||
})
|
||
}
|
||
},
|
||
},
|
||
},
|
||
created() {
|
||
this.user = uni.getStorageSync('User')
|
||
this.getAllAreaList(this.user.pkSettleCountry)
|
||
console.error(this.defaultCode)
|
||
this.getAllAreaList(this.user.pkSettleCountry).then((res) => {
|
||
if (res) {
|
||
this.getDefaultIndex(this.defaultCode,0)
|
||
}
|
||
})
|
||
},
|
||
methods: {
|
||
getDefaultIndex(arr) {
|
||
let a = this.provinceList.findIndex((item) => item.pkId == arr[0])
|
||
let b = this.cityList[a].arrList.findIndex((item) => item.pkId == arr[1])
|
||
let c = this.quList.findIndex((item) => item.pkId == arr[1])
|
||
let d = this.quList[c].arrList.findIndex((item) => item.pkId == arr[2])
|
||
this.columns = [
|
||
this.provinceList,
|
||
this.cityList[a].arrList,
|
||
this.quList[c].arrList,
|
||
]
|
||
let diqu
|
||
this.defaultIndex = [a, b, d > -1 ? d : 0]
|
||
if (d > -1) {
|
||
diqu = `${this.provinceList[a].name}-${this.cityList[a].arrList[b].name}-${this.quList[c].arrList[d].name}`
|
||
} else {
|
||
diqu = `${this.provinceList[a].name}-${this.cityList[a].arrList[b].name}`
|
||
}
|
||
console.error(diqu)
|
||
this.$emit('getAddressData1', diqu)
|
||
|
||
|
||
},
|
||
setShow() {
|
||
this.pickershow = true
|
||
},
|
||
getAllAreaList(pkCountry) {
|
||
return new Promise((reslove, reject) => {
|
||
api
|
||
.getAllAreaList({
|
||
pkCountry: pkCountry,
|
||
})
|
||
.then((res) => {
|
||
this.provinceList = res.data.provinceList
|
||
// 市数组
|
||
let cityList = []
|
||
res.data.provinceList.forEach((element, index) => {
|
||
cityList.push({
|
||
pkId: element.pkId,
|
||
arrList: [],
|
||
})
|
||
res.data.cityList.forEach((item, cndex) => {
|
||
if (element.pkId == item.parent) {
|
||
cityList[index].arrList.push(item)
|
||
}
|
||
})
|
||
})
|
||
this.cityList = cityList
|
||
// 区数组
|
||
let quList = []
|
||
res.data.cityList.forEach((element, index) => {
|
||
quList.push({
|
||
pkId: element.pkId,
|
||
arrList: [],
|
||
})
|
||
res.data.countyList.forEach((item, cndex) => {
|
||
if (element.pkId == item.parent) {
|
||
quList[index].arrList.push(item)
|
||
}
|
||
})
|
||
})
|
||
this.quList = quList
|
||
this.columns = [
|
||
res.data.provinceList,
|
||
cityList[0].arrList,
|
||
quList[0].arrList,
|
||
]
|
||
reslove(true)
|
||
})
|
||
})
|
||
},
|
||
changeHandler(e) {
|
||
const {
|
||
columnIndex,
|
||
value,
|
||
values, // values为当前变化列的数组内容
|
||
index,
|
||
indexs,
|
||
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
||
picker = this.$refs.uPicker,
|
||
} = e
|
||
// 当第一列值发生变化时，变化第二列(后一列)对应的选项
|
||
if (columnIndex === 0) {
|
||
picker.setColumnValues(1, this.cityList[indexs[0]].arrList)
|
||
let arr = []
|
||
this.quList.forEach((item) => {
|
||
if (item.pkId == this.cityList[indexs[0]].arrList[0].pkId) {
|
||
arr = item.arrList
|
||
}
|
||
})
|
||
picker.setColumnValues(2, arr)
|
||
// picker为选择器this实例，变化第二列对应的选项
|
||
} else if (columnIndex === 1) {
|
||
let arr = []
|
||
this.quList.forEach((item) => {
|
||
if (item.pkId == this.cityList[indexs[0]].arrList[index].pkId) {
|
||
arr = item.arrList
|
||
}
|
||
})
|
||
picker.setColumnValues(2, arr)
|
||
}
|
||
},
|
||
// 回调参数为包含columnIndex、value、values
|
||
confirm(e) {
|
||
this.pickershow = false
|
||
if (e.value[2]) {
|
||
this.diqu = `${e.value[0].name}-${e.value[1].name}-${e.value[2].name}`
|
||
this.form.province = e.value[0].pkId
|
||
this.form.city = e.value[1].pkId
|
||
this.form.county = e.value[2].pkId
|
||
} else {
|
||
this.diqu = `${e.value[0].name}-${e.value[1].name}`
|
||
this.form.province = e.value[0].pkId
|
||
this.form.city = e.value[1].pkId
|
||
this.form.county = ''
|
||
}
|
||
this.$emit('addressData1', this.diqu, this.form)
|
||
},
|
||
},
|
||
}
|
||
</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> |