yd_qycpfb/jp-mobile/components/DoublePicker/DoublePicker2.vue

<template>
  <view>
    <!-- 触发按钮 -->
    <view class="picker-trigger" @click="showPicker">
      <view class="picker-action">
        <view class="text-grey">{{ label }}</view>
      </view>
    </view>

    <!-- 弹出层 -->
    <picker
      mode="multiSelector"
      :value="pickerValue"
      :range="pickerRange"
      @change="PickerChange"
      @columnchange="PickerColumnChange"
      :show="show"
    >
      <view class="picker-content">
        <view class="picker-column">{{ pickerRange[0][pickerValue[0]][rangeKey] }}</view>
        <view class="picker-column">{{ pickerRange[1][pickerValue[1]][rangeKey] }}</view>
      </view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false, // 控制选择器的显示
      pickerValue: [0, 0], // 两列的默认选中索引
      pickerRange: [[], []], // 两列数据
      label: '请选择', // 显示的标签
    };
  },
  props: {
    value: {
      type: Array,
      default: () => [null, null] // 两列的绑定值
    },
    empty: {
      type: String,
      default: ''
    },
    rangeKey: {
      type: String,
      default: 'label'
    },
    rangeValue: {
      type: String,
      default: 'value'
    },
    range1: {
      type: Array,
      default: () => []
    },
    range2: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    },
    onChangeNew: {
      type: Function,
      default: null,
    }
  },
  watch: {
    range1: {
      handler(newRange) {
        this.pickerRange[0] = newRange;
      },
      immediate: true
    },
    range2: {
      handler(newRange) {
        this.pickerRange[1] = newRange;
      },
      immediate: true
    },
    value: {
      handler(newVal) {
        if (newVal && newVal.length === 2) {
          const [val1, val2] = newVal;
          this.label = `${this.findLabel(this.pickerRange[0], val1)} - ${this.findLabel(this.pickerRange[1], val2)}`;
        }
      },
      immediate: true
    }
  },
  methods: {
    showPicker() {
      if (!this.disabled) {
        this.show = true;
      }
    },
    PickerChange(e) {
      const [index1, index2] = e.detail.value;
      const value1 = this.pickerRange[0][index1][this.rangeValue];
      const value2 = this.pickerRange[1][index2][this.rangeValue];
      this.label = `${this.pickerRange[0][index1][this.rangeKey]} - ${this.pickerRange[1][index2][this.rangeKey]}`;
      this.$emit('input', [value1, value2]);
      this.show = false; // 关闭选择器
      if (this.onChangeNew) {
        this.onChangeNew();
      }
    },
    PickerColumnChange(e) {
      const { column, value } = e.detail;
      this.pickerValue[column] = value;
    },
    findLabel(range, value) {
      const option = range.find(item => item[this.rangeValue] === value);
      return option ? option[this.rangeKey] : '请选择';
    }
  },
  mounted() {
    if (this.empty) {
      this.label = this.empty;
    }
    this.pickerRange = [this.range1, this.range2];
  }
};
</script>

<style>
.picker-trigger {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  display: flex;
  align-items: center;
}

.text-grey {
  color: #999;
  margin-left: 8px;
}
</style>