web-base-h5/components/address.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(uni.getStorageSync('pkCountry')||this.user.pkSettleCountry).then((res) => {
            if (res) {
              this.getDefaultIndex(n)
            }
          })
        }
      },
    },
  },
  created() {
    this.user = uni.getStorageSync('User')
    this.getAllAreaList(uni.getStorageSync('pkCountry')||this.user.pkSettleCountry)
  },
  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}`
      }
      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>