web-store-retail-h5/components/region-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,
      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>