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="genLabels" @change="onGenerationChange" :disabled="disabled">
      <view class="picker" :class="{ 'picker-disabled': disabled }">
        <text>{{ selectedGenLabel || '请选择辈分' }}</text>
      </view>
    </picker>

    <!-- 同辈关系类型（仅当选中的是同辈时显示） -->
    <view class="peer-type-wrap" v-if="selectedGen === 'peer'">
      <view class="form-item">
        <text class="label"><text class="required-mark">*</text>同辈关系类型</text>
      </view>
      <view class="radio-group">
        <label class="radio-item" @tap="selectPeerType('sibling')">
          <view class="radio-icon" :class="{ active: selectedPeer === 'sibling' }">
            <view class="radio-inner" v-if="selectedPeer === 'sibling'"></view>
          </view>
          <text class="radio-label">兄弟姐妹</text>
        </label>
        <label class="radio-item" @tap="selectPeerType('spouse')">
          <view class="radio-icon" :class="{ active: selectedPeer === 'spouse' }">
            <view class="radio-inner" v-if="selectedPeer === 'spouse'"></view>
          </view>
          <text class="radio-label">配偶</text>
        </label>
      </view>
    </view>
  </view>
</template>

<script>
import genLevel from '../utils/generationLevel.js'
var GENERATION_LEVELS = genLevel.GENERATION_LEVELS
var PEER_TYPES = genLevel.PEER_TYPES
var getGenerationLabel = genLevel.getGenerationLabel
var getPeerTypeLabel = genLevel.getPeerTypeLabel

export default {
  name: 'GenerationPicker',
  props: {
    generationLevel: { type: String, default: '' },
    peerType: { type: String, default: '' },
    disabled: { type: Boolean, default: false },
    showLabel: { type: Boolean, default: true }
  },
  data() {
    return {
      GEN_LEVELS: GENERATION_LEVELS,
      selectedGen: this.generationLevel || '',
      selectedPeer: this.peerType || ''
    }
  },
  computed: {
    genLabels() {
      var labels = []
      for (var i = 0; i < this.GEN_LEVELS.length; i++) {
        labels.push(this.GEN_LEVELS[i].label)
      }
      return labels
    },
    selectedGenLabel() {
      return getGenerationLabel(this.selectedGen)
    }
  },
  watch: {
    generationLevel(val) {
      this.selectedGen = val || ''
    },
    peerType(val) {
      this.selectedPeer = val || ''
    }
  },
  methods: {
    onGenerationChange(e) {
      var idx = e.detail.value
      if (idx >= 0 && idx < this.GEN_LEVELS.length) {
        var gen = this.GEN_LEVELS[idx]
        this.selectedGen = gen.value
        if (gen.value !== 'peer') {
          this.selectedPeer = ''
          this.$emit('update:peerType', '')
        }
        this.$emit('update:generationLevel', this.selectedGen)
      }
    },
    selectPeerType(type) {
      this.selectedPeer = type
      this.$emit('update:peerType', type)
    }
  }
}
</script>

<style scoped>
.generation-picker-wrap {
  width: 100%;
}
.picker {
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #666;
  background: #fff;
}
.picker-disabled {
  background: #f5f5f5;
  color: #999;
}
.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;
}
.peer-type-wrap {
  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>