web-retail-h5/components/addressMarket.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,
            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('getAddressData', 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('addressData', 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>