wanjiashangchao-user/components/benben-picker/region-picker.vue

<template>
  <view class="w-picker-view">
    <picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
      <picker-view-column>
        <view class="w-picker-item" v-for="(item, index) in range.provinces" :key="index">{{ item.label }}</view>
      </picker-view-column>
      <picker-view-column>
        <view class="w-picker-item" v-for="(item, index) in range.citys" :key="index">{{ item.label }}</view>
      </picker-view-column>
      <picker-view-column v-if="!hideArea">
        <view class="w-picker-item" v-for="(item, index) in range.areas" :key="index">{{ item.label }}</view>
      </picker-view-column>
    </picker-view>
  </view>
</template>

<script>
import areaData from './areadata/areadata.json'
export default {
  data() {
    return {
      pickVal: [],
      range: {
        provinces: [],
        citys: [],
        areas: [],
      },
      checkObj: {},
    }
  },
  props: {
    itemHeight: {
      type: String,
      default: '44px',
    },
    value: {
      type: [Array, String],
      default: '',
    },
    defaultType: {
      type: String,
      default: 'value',
    },
    hideArea: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    value(val) {
      this.initData()
    },
  },
  created() {
    this.initData()
  },
  methods: {
    getData() {
      //用来处理初始化数据
      let provinces = areaData
      let dVal = []
      let value = this.value
      let a1 = value[0] //默认值省
      let a2 = value[1] //默认值市
      let a3 = value[2] //默认值区、县
      let province, city, area
      let provinceIndex = provinces.findIndex((v) => {
        return v[this.defaultType] == a1
      })
      provinceIndex = value ? (provinceIndex != -1 ? provinceIndex : 0) : 0
      let citys = provinces[provinceIndex].children
      let cityIndex = citys.findIndex((v) => {
        return v[this.defaultType] == a2
      })
      cityIndex = value ? (cityIndex != -1 ? cityIndex : 0) : 0
      let areas = citys[cityIndex].children
      let areaIndex = areas.findIndex((v) => {
        return v[this.defaultType] == a3
      })
      areaIndex = value ? (areaIndex != -1 ? areaIndex : 0) : 0
      dVal = this.hideArea ? [provinceIndex, cityIndex] : [provinceIndex, cityIndex, areaIndex]
      province = provinces[provinceIndex]
      city = citys[cityIndex]
      area = areas[areaIndex]
      let obj = this.hideArea
        ? {
            province,
            city,
          }
        : {
            province,
            city,
            area,
          }
      return this.hideArea
        ? {
            provinces,
            citys,
            dVal,
            obj,
          }
        : {
            provinces,
            citys,
            areas,
            dVal,
            obj,
          }
    },
    initData() {
      let dataData = this.getData()
      let provinces = dataData.provinces
      let citys = dataData.citys
      let areas = this.hideArea ? [] : dataData.areas
      let obj = dataData.obj
      let province = obj.province,
        city = obj.city,
        area = this.hideArea ? {} : obj.area
      let value = this.hideArea ? [province.value, city.value] : [province.value, city.value, area.value]
      let result = this.hideArea ? `${province.label + city.label}` : `${province.label + city.label + area.label}`
      this.range = this.hideArea
        ? {
            provinces,
            citys,
          }
        : {
            provinces,
            citys,
            areas,
          }
      this.checkObj = obj
      this.$nextTick(() => {
        this.pickVal = dataData.dVal
      })
      this.$emit('change', {
        result: result,
        value: value,
        obj: obj,
      })
    },
    handlerChange(e) {
      let arr = [...e.detail.value]
      let _index = this.findChangeIndex(this.pickVal, arr)
      if (_index == 0) {
        arr = [arr[0], 0, 0]
      } else if (_index == 1) {
        arr = [arr[0], arr[1], 0]
      }
      let provinceIndex = arr[0],
        cityIndex = arr[1],
        areaIndex = this.hideArea ? 0 : arr[2]
      let provinces = areaData
      let citys = (provinces[provinceIndex] && provinces[provinceIndex].children) || provinces[provinces.length - 1].children || []
      let areas = this.hideArea ? [] : (citys[cityIndex] && citys[cityIndex].children) || citys[citys.length - 1].children || []
      let province = provinces[provinceIndex] || provinces[provinces.length - 1],
        city = citys[cityIndex] || [citys.length - 1],
        area = this.hideArea ? {} : areas[areaIndex] || [areas.length - 1]
      let obj = this.hideArea
        ? {
            province,
            city,
          }
        : {
            province,
            city,
            area,
          }
      if (this.checkObj.province.label != province.label) {
        //当省更新的时候需要刷新市、区县的数据;
        this.range.citys = citys
        if (!this.hideArea) {
          this.range.areas = areas
        }
      }
      if (this.checkObj.city.label != city.label) {
        //当市更新的时候需要刷新区县的数据;
        if (!this.hideArea) {
          this.range.areas = areas
        }
      }
      this.checkObj = obj
      this.$nextTick(() => {
        this.pickVal = arr
      })
      let result = this.hideArea ? `${province.label + city.label}` : `${province.label + city.label + area.label}`
      let value = this.hideArea ? [province.value, city.value] : [province.value, city.value, area.value]
      this.$emit('change', {
        result: result,
        value: value,
        obj: obj,
      })
    },
    findChangeIndex(arr1, arr2) {
      if (arr1[0] !== arr2[0]) {
        return 0
      } else if (arr1[1] !== arr2[1]) {
        return 1
      } else if (arr1[2] !== arr2[2]) {
        return 2
      }
      return -1
    },
  },
}
</script>

<style lang="scss">
@import './w-picker.css';
</style>