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

components/benben-picker/selector-picker.vue

@@ -0,0 +1,135 @@
+<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" :key="index">{{ item[nodeKey] }}</view>
+      </picker-view-column>
+    </picker-view>
+  </view>
+</template>
+<script>
+export default {
+  props: {
+    itemHeight: {
+      type: String,
+      default: '44px',
+    },
+    options: {
+      type: [Array, Object],
+      default() {
+        return []
+      },
+    },
+    value: {
+      type: [String, Array, Number],
+      default: '',
+    },
+    defaultType: {
+      type: String,
+      default: 'label',
+    },
+    defaultProps: {
+      type: Object,
+      default() {
+        return {
+          label: 'label',
+          value: 'value',
+        }
+      },
+    },
+  },
+  data() {
+    return {
+      pickVal: [],
+    }
+  },
+  computed: {
+    nodeKey() {
+      return this.defaultProps.label
+    },
+    nodeValue() {
+      return this.defaultProps.value
+    },
+    range() {
+      return this.options
+    },
+  },
+  watch: {
+    value(val) {
+      if (this.options.length != 0) {
+        this.initData()
+      }
+    },
+    options(val) {
+      this.initData()
+    },
+  },
+  created() {
+    if (this.options.length != 0) {
+      this.initData()
+    }
+  },
+  methods: {
+    initData() {
+      let dVal = this.value || ''
+      let data = this.range
+      let pickVal = [0]
+      let cur = null
+      let label = ''
+      let value, idx
+      if (this.defaultType == this.nodeValue) {
+        value = data.find((v) => v[this.nodeValue] == dVal)
+        idx = data.findIndex((v) => v[this.nodeValue] == dVal)
+      } else {
+        value = data.find((v) => v[this.nodeKey] == dVal)
+        idx = data.findIndex((v) => v[this.nodeKey] == dVal)
+      }
+      pickVal = [idx != -1 ? idx : 0]
+      this.$nextTick(() => {
+        this.pickVal = pickVal
+      })
+      if (data.length == 0) {
+        this.$emit('change', {
+          result: '',
+          value: '',
+          obj: { [this.nodeValue]: '', [this.nodeKey]: '' },
+        })
+        return
+      }
+      if (this.defaultType == this.nodeValue) {
+        this.$emit('change', {
+          result: value ? value[this.nodeKey] : data[0][this.nodeKey],
+          value: dVal || data[0][this.nodeKey],
+          obj: value ? value : data[0],
+        })
+      } else {
+        this.$emit('change', {
+          result: dVal || data[0][this.nodeKey],
+          value: value ? value[this.nodeValue] : data[0][this.nodeValue],
+          obj: value ? value : data[0],
+        })
+      }
+    },
+    handlerChange(e) {
+      let arr = [...e.detail.value]
+      let pickVal = [arr[0] || 0]
+      let data = this.range
+      let cur = data[arr[0]]
+      let label = ''
+      let value = ''
+      this.$nextTick(() => {
+        this.pickVal = pickVal
+      })
+      this.$emit('change', {
+        result: cur[this.nodeKey],
+        value: cur[this.nodeValue],
+        obj: cur,
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+@import './w-picker.css';
+</style>