ebiz-h5/src/components/ebiz/customer/CustomerPicker.vue

<template>
  <div id="customer-picker">
    <van-field
      :label="label"
      v-model="name"
      @input="onChange"
      :placeholder="placeholder"
      :required="required"
      :right-icon="$assetsUrl + 'images/avatar.png'"
      @click-right-icon="chooseCustomer"
      :readonly="readonly"
    />
    <van-popup v-model="parentShowPicker" position="bottom">
      <customer @on-choose="choose" :code="code" :name="name" :life="life" :health="health"></customer>
    </van-popup>
  </div>
</template>
<script>
import { Field, Popup, Icon, Sticky } from 'vant'
import Customer from './Customer'
export default {
  name: 'CustomerPicker',
  props: {
    label: {
      type: String,
      default: '11'
    },
    value: {
      type: String,
      default: ''
    },
    chooseName: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请选择'
    },

    required: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: () => {}
    },
    //选项对象中，文字对应的 key
    valueKey: {
      type: String,
      default: 'text'
    },
    keyId: {},
    lifeGrade: {
      type: String,
      default: ''
    },
    healthGrade: {
      type: String,
      default: ''
    },
    parentShowPicker: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      name: '',
      code: '',
      life: '',
      health: '',
      showPicker: false
    }
  },
  components: {
    [Field.name]: Field,
    [Popup.name]: Popup,
    [Customer.name]: Customer,
    [Icon.name]: Icon,
    [Sticky.name]: Sticky
  },
  mounted() {
    this.showPicker = this.parentShowPicker
  },
  watch: {
    value: {
      handler() {
        this.name = this.value
      },
      immediate: true
    }
  },
  methods: {
    onChange(value) {
      // let regExp = /\s+/
      // value = value.replace(regExp, '')
      this.name = value
      this.$emit('input', value)
    },
    choose(data) {
      this.name = data.customerName
      this.$emit('on-choose', data)
    },
    chooseCustomer() {
      if (this.disabled) {
        return
      }
      this.showPicker = true
      this.$emit('on-click')
    },
    cancel() {
      this.showPicker = false
      this.$emit('cancel', '')
    }
  }
}
</script>
<style lang="scss" scoped>
#customer-picker {
  .van-popup--bottom {
    height: 100%;
  }
  .van-popup {
    background: #f5f5f5;
  }
  /deep/.van-cell:not(:last-child)::after {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 0;
    bottom: 0;
    left: 4.26667vw;
    border-bottom: 1px solid transparent;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
}
#customer-picker:not(:last-child)::after {
  position: absolute;
  z-index: 99;
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
  right: 0;
  // bottom: 0;
  // top: 0;
  left: 4.26667vw;
  border-bottom: 1px solid #dadada;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
</style>