style(plan): 优化缴费年期组件为单选按钮形式

- 创建 PaymentPeriodRadio 组件替代弹窗选择器
- 未选中状态：灰色边框和文字
- 选中状态：蓝色边框、浅蓝背景、蓝色文字
- 移除单选按钮图标，只显示文字
- 两列网格布局，点击即选

影响文件:
- src/components/plan/PlanFields/PaymentPeriodRadio.vue (新建)
- src/components/plan/PlanTemplates/CriticalIllnessTemplate.vue
- src/components/plan/PlanTemplates/LifeInsuranceTemplate.vue
- src/components/plan/PlanTemplates/SavingsTemplate.vue

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

@@ -33,6 +33,7 @@ declare module 'vue' {
     NutTabPane: typeof import('@nutui/nutui-taro')['TabPane']
     NutTabs: typeof import('@nutui/nutui-taro')['Tabs']
     OfficeViewer: typeof import('./src/components/documents/OfficeViewer.vue')['default']
+    PaymentPeriodRadio: typeof import('./src/components/plan/PlanFields/PaymentPeriodRadio.vue')['default']
     PdfPreview: typeof import('./src/components/documents/PdfPreview.vue')['default']
     PlanFormContainer: typeof import('./src/components/plan/PlanFormContainer.vue')['default']
     PlanPopupNew: typeof import('./src/components/plan/PlanPopupNew.vue')['default']

+<template>
+  <div>
+    <!-- 标签 -->
+    <div v-if="label" class="text-sm text-gray-600 mb-3 flex items-center">
+      <span v-if="required" class="text-red-500 mr-1">*</span>
+      <span>{{ label }}</span>
+    </div>
+
+    <!-- 单选按钮组 -->
+    <div class="grid grid-cols-2 gap-3">
+      <view
+        v-for="option in options"
+        :key="option"
+        class="
+          relative
+          border-2
+          rounded-lg
+          p-4
+          cursor-pointer
+          transition-all
+          flex
+          items-center
+          justify-center
+          text-center
+        "
+        :class="
+          modelValue === option
+            ? 'border-primary bg-primary-light'
+            : 'border-gray-300 bg-white'
+        "
+        @tap="selectOption(option)"
+      >
+        <text
+          class="text-sm"
+          :class="modelValue === option ? 'text-primary font-medium' : 'text-gray-500'"
+        >
+          {{ option }}
+        </text>
+      </view>
+    </div>
+  </div>
+</template>
+
+<script setup>
+/**
+ * 缴费年期单选组件
+ *
+ * @description 使用单选按钮组形式选择缴费年期，替代弹窗选择器
+ * @component PaymentPeriodRadio
+ * @example
+ * <PaymentPeriodRadio
+ *   v-model="paymentPeriod"
+ *   label="缴费年期"
+ *   :options="['整付（0-75 岁）', '5 年（0-70 岁）']"
+ *   :required="true"
+ * />
+ */
+
+/**
+ * 组件属性
+ */
+const props = defineProps({
+  /**
+   * 标签文本
+   * @type {string}
+   */
+  label: {
+    type: String,
+    default: ''
+  },
+
+  /**
+   * 是否必填
+   * @type {boolean}
+   */
+  required: {
+    type: Boolean,
+    default: false
+  },
+
+  /**
+   * 选项数组
+   * @type {Array<string>}
+   * @example ['整付（0-75 岁）', '5 年（0-70 岁）', '10 年（0-70 岁）']
+   */
+  options: {
+    type: Array,
+    required: true
+  },
+
+  /**
+   * 绑定的值
+   * @type {string}
+   */
+  modelValue: {
+    type: String,
+    default: ''
+  }
+})
+
+/**
+ * 组件事件
+ */
+const emit = defineEmits({
+  /**
+   * 更新值事件
+   * @event update:modelValue
+   * @param {string} value - 选中的选项
+   */
+  'update:modelValue': (value) => typeof value === 'string'
+})
+
+/**
+ * 选择选项
+ * @param {string} option - 选中的选项
+ */
+const selectOption = (option) => {
+  emit('update:modelValue', option)
+}
+</script>
+
+<style lang="less">
+// 主色样式 - 蓝色
+.border-primary {
+  border-color: #1677ff;
+}
+
+.bg-primary {
+  background-color: rgba(22, 119, 255, 0.1);
+}
+
+.text-primary {
+  color: #1677ff;
+}
+
+.bg-primary-light {
+  background-color: rgba(22, 119, 255, 0.05);
+}
+
+.border-primary\/50 {
+  border-color: rgba(22, 119, 255, 0.5);
+}
+
+// 选中状态的边框加粗
+.border-primary {
+  border-width: 2px;
+}
+</style>

@@ -46,11 +46,10 @@
       class="mb-5"
     />
 
-    <!-- 缴费年期 -->
-    <PlanFieldSelect
+    <!-- 缴费年期 - 单选形式 -->
+    <PaymentPeriodRadio
       v-model="form.payment_period"
       label="缴费年期"
-      placeholder="请选择缴费年期"
       :options="config.payment_periods"
       :required="true"
       class="mb-5"
@@ -83,7 +82,7 @@ import PlanFieldName from '../PlanFields/NameInput.vue'
 import PlanFieldAmount from '../PlanFields/AmountKeyboard.vue'
 import PlanFieldDatePicker from '../PlanFields/DatePickerGlobal.vue'
 import PlanFieldRadio from '../PlanFields/RadioGroup.vue'
-import PlanFieldSelect from '../PlanFields/SelectPickerGlobal.vue'
+import PaymentPeriodRadio from '../PlanFields/PaymentPeriodRadio.vue'
 
 /**
  * 组件属性

@@ -46,11 +46,10 @@
       class="mb-5"
     />
 
-    <!-- 缴费年期 -->
-    <PlanFieldSelect
+    <!-- 缴费年期 - 单选形式 -->
+    <PaymentPeriodRadio
       v-model="form.payment_period"
       label="缴费年期"
-      placeholder="请选择缴费年期"
       :options="config.payment_periods"
       :required="true"
       class="mb-5"
@@ -83,7 +82,7 @@ import PlanFieldName from '../PlanFields/NameInput.vue'
 import PlanFieldAmount from '../PlanFields/AmountKeyboard.vue'
 import PlanFieldDatePicker from '../PlanFields/DatePickerGlobal.vue'
 import PlanFieldRadio from '../PlanFields/RadioGroup.vue'
-import PlanFieldSelect from '../PlanFields/SelectPickerGlobal.vue'
+import PaymentPeriodRadio from '../PlanFields/PaymentPeriodRadio.vue'
 
 /**
  * 组件属性

@@ -46,11 +46,10 @@
       class="mb-5"
     />
 
-    <!-- 缴费年期 -->
-    <PlanFieldSelect
+    <!-- 缴费年期 - 单选形式 -->
+    <PaymentPeriodRadio
       v-model="form.payment_period"
       label="缴费年期"
-      placeholder="请选择缴费年期"
       :options="config.payment_periods"
       :required="true"
       class="mb-5"
@@ -209,6 +208,7 @@ import PlanFieldAmount from '../PlanFields/AmountKeyboard.vue'
 import PlanFieldDatePicker from '../PlanFields/DatePickerGlobal.vue'
 import PlanFieldRadio from '../PlanFields/RadioGroup.vue'
 import PlanFieldSelect from '../PlanFields/SelectPickerGlobal.vue'
+import PaymentPeriodRadio from '../PlanFields/PaymentPeriodRadio.vue'
 
 /**
  * 组件属性