初始化万家商超用户端仓库

components/benben-picker/region-picker.vue

@@ -0,0 +1,209 @@
+<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>