cfc/cfc-frontend/components/GenerationPicker.vue

<template>
  <view class="generation-picker-wrap">
    <view class="form-item required" v-if="showLabel">
      <text class="label"><text class="required-mark">*</text>辈分关系</text>
    </view>
    <picker :range="generationNames" :value="selectedIndex" @change="onGenerationChange" :disabled="disabled">
      <view class="picker" :class="{ 'picker-disabled': disabled }">
        <text>{{ selectedGenerationName || '请选择辈分关系' }}</text>
      </view>
    </picker>
    
    <!-- 同辈配偶选择器（仅当选择"同辈"时显示） -->
    <view class="peer-type-selector" v-if="selectedGeneration === 'PEER' && showPeerType">
      <view class="radio-group">
        <label class="radio-item" @tap="selectPeerType('sibling')">
          <view class="radio-icon" :class="{ active: peerType === 'sibling' }">
            <view class="radio-inner" v-if="peerType === 'sibling'"></view>
          </view>
          <text class="radio-label">兄弟姐妹</text>
        </label>
        <label class="radio-item" @tap="selectPeerType('spouse')">
          <view class="radio-icon" :class="{ active: peerType === 'spouse' }">
            <view class="radio-inner" v-if="peerType === 'spouse'"></view>
          </view>
          <text class="radio-label">配偶</text>
        </label>
      </view>
    </view>
  </view>
</template>

<script>
import { GenerationLevel } from '../utils/constants.js'

export default {
  name: 'GenerationPicker',
  props: {
    generationLevel: { type: String, default: '' },
    peerType: { type: String, default: '' },
    disabled: { type: Boolean, default: false },
    showLabel: { type: Boolean, default: true },
    showPeerType: { type: Boolean, default: true }
  },
  data() {
    return {
      generations: [
        { value: 'ELDER_2', name: '祖父母辈（+2）' },
        { value: 'ELDER_1', name: '父母辈（+1）' },
        { value: 'PEER', name: '同辈（0）' },
        { value: 'YOUNGER_1', name: '子女辈（-1）' },
        { value: 'YOUNGER_2', name: '孙辈（-2）' }
      ],
      selectedGeneration: '',
      selectedPeerType: ''
    }
  },
  computed: {
    generationNames() {
      var names = []
      for (var i = 0; i < this.generations.length; i++) {
        names.push(this.generations[i].name)
      }
      return names
    },
    selectedIndex() {
      if (!this.selectedGeneration) return 0
      for (var i = 0; i < this.generations.length; i++) {
        if (this.generations[i].value === this.selectedGeneration) {
          return i
        }
      }
      return 0
    },
    selectedGenerationName() {
      if (!this.selectedGeneration) return ''
      for (var i = 0; i < this.generations.length; i++) {
        if (this.generations[i].value === this.selectedGeneration) {
          return this.generations[i].name
        }
      }
      return ''
    }
  },
  mounted() {
    if (this.generationLevel) {
      this.selectedGeneration = this.generationLevel
    }
    if (this.peerType) {
      this.selectedPeerType = this.peerType
    }
  },
  watch: {
    generationLevel(val) {
      if (val) {
        this.selectedGeneration = val
      }
    },
    peerType(val) {
      if (val) {
        this.selectedPeerType = val
      }
    }
  },
  methods: {
    onGenerationChange(e) {
      var idx = e.detail.value
      if (idx >= 0 && idx < this.generations.length) {
        this.selectedGeneration = this.generations[idx].value
        this.$emit('update:generationLevel', this.selectedGeneration)
        
        // 如果不是同辈，清空 peerType
        if (this.selectedGeneration !== 'PEER') {
          this.selectedPeerType = ''
          this.$emit('update:peerType', '')
        }
      }
    },
    selectPeerType(type) {
      this.selectedPeerType = type
      this.$emit('update:peerType', type)
    }
  }
}
</script>

<style scoped>
.generation-picker-wrap {
  margin-bottom: 30rpx;
}
.form-item {
  margin-bottom: 10rpx;
}
.form-item .label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  font-weight: bold;
}
.required-mark {
  color: #F97316;
  margin-right: 4rpx;
}
.picker {
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #666;
  background: #fff;
}
.picker-disabled {
  background: #f5f5f5;
  color: #999;
}
.peer-type-selector {
  margin-top: 20rpx;
  padding: 20rpx;
  background: #f9f9f9;
  border-radius: 10rpx;
}
.radio-group {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.radio-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.radio-icon {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid #ddd;
  border-radius: 50%;
  margin-right: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.radio-icon.active {
  border-color: #F97316;
}
.radio-inner {
  width: 20rpx;
  height: 20rpx;
  background: #F97316;
  border-radius: 50%;
}
.radio-label {
  font-size: 28rpx;
  color: #333;
}
</style>