ykt-team-wxapp/components/form-template/form-cell/form-select-and-other.vue

<template>
  <common-cell :name="name" :required="required">
    <view class="select-other">
      <picker mode="selector" :range="range" :disabled="disableChange" @change="changeSelect">
        <view class="select-other__picker" :class="selectedValue ? '' : 'form__placeholder'">
          {{ selectedValue || '请选择' }}
        </view>
      </picker>
      <view v-if="showOther" class="select-other__input">
        <input :disabled="disableChange" :value="otherValue" placeholder="请填写其他原因" @input="changeOther" />
      </view>
    </view>
  </common-cell>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import commonCell from '../common-cell.vue';

const emits = defineEmits(['change']);
const props = defineProps({
  form: { type: Object, default: () => ({}) },
  name: { default: '' },
  title: { default: '' },
  range: { type: Array, default: () => [] },
  otherFiled: { default: '' },
  otherField: { default: '' },
  required: { type: Boolean, default: false },
  disableChange: { type: Boolean, default: false },
});

const value = computed(() => props.form?.[props.title] || '');
const otherOption = computed(() => props.otherFiled || props.otherField || props.range.find((item) => /^(其它|其他)$/.test(item)) || '其它');
const isPreset = computed(() => props.range.includes(value.value));
const selectingOther = ref(false);
const showOther = computed(() => selectingOther.value || (Boolean(value.value) && !isPreset.value));
const selectedValue = computed(() => showOther.value ? otherOption.value : value.value);
const otherValue = computed(() => showOther.value ? value.value : '');

watch(value, (nextValue) => {
  if (nextValue && props.range.includes(nextValue)) selectingOther.value = false;
});

function changeSelect(event) {
  const selected = props.range[event.detail.value];
  if (selected === otherOption.value) {
    selectingOther.value = true;
    return;
  }
  selectingOther.value = false;
  emits('change', { title: props.title, value: selected });
}
function changeOther(event) { emits('change', { title: props.title, value: event.detail.value }); }
</script>

<style>
@import '../cell-style.css';

.select-other {
  width: 100%;
}

.select-other__picker,
.select-other__input {
  box-sizing: border-box;
  width: 100%;
  padding: 12rpx 16rpx;
  border: 1rpx solid #dcdfe6;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.select-other__input {
  margin-top: 14rpx;
}
</style>