refactor(plan): 重构多阶段提取方案 UI 渲染逻辑

- 统一单阶段和多阶段的 UI 渲染流程
- 新增 shouldRenderField() 方法智能控制字段显示
- 多阶段模式现在支持"指定提取金额"和"最高固定提取金额"两种方式
- 优化校验逻辑：基础字段 → withdrawal_fields → 多阶段卡片
- 关闭 Mock 数据（准备联调测试）

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

@@ -83,3 +83,20 @@
 
 
 **变更摘要**:
 **变更摘要**:
 - 无详细描述
 - 无详细描述
+## 2026-02-27
+
+### 09:56:15 - 完成任务
+
+**影响文件**:
+- `src/utils/README.md`
+
+**变更摘要**:
+- 无详细描述
+
+### 10:00:56 - 完成任务
+
+**影响文件**:
+- `src/utils/README.md`
+
+**变更摘要**:
+- 无详细描述

@@ -25,104 +25,22 @@
 
 
     <div class="border-t border-gray-200 my-6"></div>
     <div class="border-t border-gray-200 my-6"></div>
 
 
-    <!-- 多阶段提取计划（优先显示） -->
-    <div v-if="isMultiStageMode" class="multi-stage-withdrawal-section">
-      <h3 class="text-base font-semibold text-gray-900 mb-4">
-        款项提取（允许减少名义金额）
-      </h3>
-
-      <!-- 阶段卡片列表 -->
-      <div
-        v-for="(stage, index) in stages"
-        :key="index"
-        class="stage-card bg-white border border-gray-200 rounded-lg p-4 mb-4"
-      >
-        <!-- 阶段标题 -->
-        <div class="flex items-center justify-between mb-3">
-          <h4 class="text-sm font-medium text-gray-900">阶段{{ index + 1 }}</h4>
-          <!-- 删除按钮（≥12岁且至少有2个阶段时显示） -->
-          <nut-button
-            v-if="canRemoveStage && index > 0"
-            size="small"
-            type="danger"
-            @click="removeStage(index)"
-          >
-            删除
-          </nut-button>
-        </div>
-
-        <!-- 每年提取金额 -->
-        <PlanFieldAmount
-          v-model="stage.annual_withdrawal_amount"
-          label="每年提取金额"
-          placeholder="请输入每年提取金额"
-          inputLabel="请输入每年提取金额"
-          :required="true"
-          :currency="config.withdrawal_plan?.default_currency || config.currency"
-          class="mb-3"
-        />
-
-        <!-- 由几岁开始 -->
-        <PlanFieldAgePicker
-          v-model="stage.withdrawal_start_age"
-          label="由几岁开始"
-          placeholder="请输入开始提取年龄"
-          :required="true"
-          class="mb-3"
-        />
-
-        <!-- 提取期 -->
-        <PlanFieldSelect
-          v-model="stage.withdrawal_period"
-          label="提取期"
-          placeholder="请选择提取期"
-          :required="true"
-          :options="multiStagePeriodOptions"
-          class="mb-3"
-        />
-
-        <!-- 每年递增提取之百分比（可选） -->
-        <div class="percentage-field">
-          <div class="text-sm text-gray-700 mb-2 flex items-center">
-            <span>每年递增提取之百分比（%）</span>
-            <span class="text-gray-400 text-xs ml-2">（可选）</span>
-          </div>
-          <nut-input
-            v-model="stage.annual_increase_percentage"
-            type="digit"
-            placeholder="请输入递增百分比"
-            @input="(value) => onPercentageInput(value, `stages.${index}.annual_increase_percentage`)"
-            class="w-full"
-          />
-        </div>
-      </div>
-
-      <!-- 添加阶段按钮（≥12岁且未达上限时显示） -->
-      <nut-button
-        v-if="canAddStage"
-        type="primary"
-        block
-        @click="addStage"
-        class="add-stage-btn"
-      >
-        + 添加阶段
-      </nut-button>
-    </div>
-
-    <!-- 单阶段提取计划（原有逻辑） -->
-    <div v-else-if="config.withdrawal_plan?.enabled" class="withdrawal-plan-section">
+    <!-- 提取计划（单阶段和多阶段通用逻辑） -->
+    <div v-if="config.withdrawal_plan?.enabled" class="withdrawal-plan-section">
+      <!-- 1. 渲染 withdrawal_fields（包含 withdrawal_enabled、withdrawal_mode、withdrawal_method 等） -->
+      <!-- 注意：多阶段模式 + 选择"指定提取金额"时，跳过单组字段渲染 -->
       <template v-for="field in withdrawalFields" :key="field.id || field.key">
       <template v-for="field in withdrawalFields" :key="field.id || field.key">
         <h3 v-if="field.section_title" class="text-base font-semibold text-gray-900 mb-4">
         <h3 v-if="field.section_title" class="text-base font-semibold text-gray-900 mb-4">
           {{ field.section_title }}
           {{ field.section_title }}
         </h3>
         </h3>
         <component
         <component
-          v-if="isFieldVisible(field.key) && field.type !== 'percentage'"
+          v-if="shouldRenderField(field) && field.type !== 'percentage'"
           :is="getFieldComponent(field)"
           :is="getFieldComponent(field)"
           v-model="form[field.key]"
           v-model="form[field.key]"
           v-bind="getFieldProps(field)"
           v-bind="getFieldProps(field)"
           class="mb-5"
           class="mb-5"
         />
         />
-        <div v-else-if="isFieldVisible(field.key) && field.type === 'percentage'" class="mb-5">
+        <div v-else-if="shouldRenderField(field) && field.type === 'percentage'" class="mb-5">
           <div class="text-sm text-gray-700 mb-2 flex items-center">
           <div class="text-sm text-gray-700 mb-2 flex items-center">
             <span v-if="field.required" class="text-red-500 mr-1">*</span>
             <span v-if="field.required" class="text-red-500 mr-1">*</span>
             <span>{{ field.label }}</span>
             <span>{{ field.label }}</span>
@@ -136,6 +54,86 @@
           />
           />
         </div>
         </div>
       </template>
       </template>
+
+      <!-- 2. 多阶段模式 + 选择"指定提取金额"：显示多组阶段卡片 -->
+      <div v-if="isMultiStageMode && form.withdrawal_mode === '指定提取金额'" class="multi-stage-withdrawal-section">
+        <!-- 阶段卡片列表 -->
+        <div
+          v-for="(stage, index) in stages"
+          :key="index"
+          class="stage-card bg-white border border-gray-200 rounded-lg p-4 mb-4"
+        >
+          <!-- 阶段标题 -->
+          <div class="flex items-center justify-between mb-3">
+            <h4 class="text-sm font-medium text-gray-900">阶段{{ index + 1 }}</h4>
+            <!-- 删除按钮（≥12岁且至少有2个阶段时显示） -->
+            <nut-button
+              v-if="canRemoveStage && index > 0"
+              size="small"
+              type="danger"
+              @click="removeStage(index)"
+            >
+              删除
+            </nut-button>
+          </div>
+
+          <!-- 每年提取金额 -->
+          <PlanFieldAmount
+            v-model="stage.annual_withdrawal_amount"
+            label="每年提取金额"
+            placeholder="请输入每年提取金额"
+            inputLabel="请输入每年提取金额"
+            :required="true"
+            :currency="config.withdrawal_plan?.default_currency || config.currency"
+            class="mb-3"
+          />
+
+          <!-- 由几岁开始 -->
+          <PlanFieldAgePicker
+            v-model="stage.withdrawal_start_age"
+            label="由几岁开始"
+            placeholder="请输入开始提取年龄"
+            :required="true"
+            class="mb-3"
+          />
+
+          <!-- 提取期 -->
+          <PlanFieldSelect
+            v-model="stage.withdrawal_period"
+            label="提取期"
+            placeholder="请选择提取期"
+            :required="true"
+            :options="multiStagePeriodOptions"
+            class="mb-3"
+          />
+
+          <!-- 每年递增提取之百分比（可选） -->
+          <div class="percentage-field">
+            <div class="text-sm text-gray-700 mb-2 flex items-center">
+              <span>每年递增提取之百分比（%）</span>
+              <span class="text-gray-400 text-xs ml-2">（可选）</span>
+            </div>
+            <nut-input
+              v-model="stage.annual_increase_percentage"
+              type="digit"
+              placeholder="请输入递增百分比"
+              @input="(value) => onPercentageInput(value, `stages.${index}.annual_increase_percentage`)"
+              class="w-full"
+            />
+          </div>
+        </div>
+
+        <!-- 添加阶段按钮（≥12岁且未达上限时显示） -->
+        <nut-button
+          v-if="canAddStage"
+          type="primary"
+          block
+          @click="addStage"
+          class="add-stage-btn"
+        >
+          + 添加阶段
+        </nut-button>
+      </div>
     </div>
     </div>
   </div>
   </div>
 
 
@@ -309,6 +307,32 @@ const getFieldProps = (field) => {
 
 
 const { isFieldVisible } = useFieldDependencies(form, fieldDefinitions)
 const { isFieldVisible } = useFieldDependencies(form, fieldDefinitions)
 
 
+/**
+ * 判断字段是否应该渲染
+ * @description 多阶段模式 + 选择"指定提取金额"时，跳过单组字段渲染
+ * @param {Object} field - 字段配置
+ * @returns {boolean} 是否应该渲染
+ */
+const shouldRenderField = (field) => {
+  // 基础可见性检查
+  if (!isFieldVisible(field.key)) return false
+
+  // 多阶段模式 + 选择"指定提取金额"时，跳过部分单组字段
+  // 注意：withdrawal_method（提取方式）需要保留
+  if (isMultiStageMode.value && form.withdrawal_mode === '指定提取金额') {
+    // 需要跳过的字段：单阶段"指定提取金额"的金额和期数相关字段
+    const skipFields = [
+      'annual_withdrawal_amount',
+      'withdrawal_start_age_specified',
+      'withdrawal_period_specified',
+      'annual_increase_percentage'
+    ]
+    if (skipFields.includes(field.key)) return false
+  }
+
+  return true
+}
+
 // ====== 多阶段提取计划逻辑 ======
 // ====== 多阶段提取计划逻辑 ======
 
 
 /**
 /**
@@ -681,12 +705,7 @@ const isFieldRequired = (field) => {
  * @returns {boolean} 校验是否通过
  * @returns {boolean} 校验是否通过
  */
  */
 const validate = () => {
 const validate = () => {
-  // 多阶段模式校验
-  if (isMultiStageMode.value) {
-    return validateMultiStage()
-  }
-
-  // 单阶段模式校验（原有逻辑）
+  // 1. 基础字段校验（单阶段和多阶段通用）
   const fields = [...baseFields.value, ...(props.config.withdrawal_plan?.enabled ? withdrawalFields.value : [])]
   const fields = [...baseFields.value, ...(props.config.withdrawal_plan?.enabled ? withdrawalFields.value : [])]
 
 
   // 年龄与出生年月日二选一校验
   // 年龄与出生年月日二选一校验
@@ -705,6 +724,7 @@ const validate = () => {
     form.age = currentYear - birthYear
     form.age = currentYear - birthYear
   }
   }
 
 
+  // 2. 校验基础字段和 withdrawal_fields 中可见的必填字段
   for (const field of fields) {
   for (const field of fields) {
     if (!isFieldVisible(field.key)) {
     if (!isFieldVisible(field.key)) {
       continue
       continue
@@ -733,44 +753,21 @@ const validate = () => {
     }
     }
   }
   }
 
 
+  // 3. 多阶段模式 + 选择"指定提取金额"：额外校验多阶段卡片
+  if (isMultiStageMode.value && form.withdrawal_mode === '指定提取金额') {
+    return validateMultiStage()
+  }
+
   return true
   return true
 }
 }
 
 
 /**
 /**
  * 多阶段表单校验
  * 多阶段表单校验
- * @description 校验每个阶段的必填字段
+ * @description 校验多阶段卡片的必填字段
+ * @note 基础字段和 withdrawal_fields 已在 validate() 中校验
  * @returns {boolean} 校验是否通过
  * @returns {boolean} 校验是否通过
  */
  */
 const validateMultiStage = () => {
 const validateMultiStage = () => {
-  // 基础字段校验（年龄与出生年月日）
-  const hasAge = !isEmptyValue(form.age)
-  const hasBirthday = !isEmptyValue(form.birthday)
-
-  if (!hasAge && !hasBirthday) {
-    Taro.showToast({ title: '年龄与出生年月日至少填写一项', icon: 'none' })
-    return false
-  }
-
-  // 如果都填写了，以生日为准，重新计算年龄
-  if (hasAge && hasBirthday) {
-    const birthYear = new Date(form.birthday).getFullYear()
-    const currentYear = new Date().getFullYear()
-    form.age = currentYear - birthYear
-  }
-
-  // 基础字段校验（其他字段）
-  for (const field of baseFields.value) {
-    if (field.key === 'age') continue // 已处理
-
-    if (isFieldRequired(field)) {
-      const value = form[field.key]
-      if (isEmptyValue(value)) {
-        Taro.showToast({ title: getRequiredMessage(field), icon: 'none' })
-        return false
-      }
-    }
-  }
-
   // 多阶段字段校验
   // 多阶段字段校验
   for (let i = 0; i < stages.value.length; i++) {
   for (let i = 0; i < stages.value.length; i++) {
     const stage = stages.value[i]
     const stage = stages.value[i]

 /*
 /*
  * @Date: 2026-02-13 01:05:52
  * @Date: 2026-02-13 01:05:52
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2026-02-25 17:18:05
+ * @LastEditTime: 2026-02-27 10:22:51
  * @FilePath: /manulife-weapp/src/config/app.js
  * @FilePath: /manulife-weapp/src/config/app.js
  * @Description: 应用配置
  * @Description: 应用配置
  */
  */
@@ -29,7 +29,7 @@
  * // 关闭 Mock 数据（生产环境）
  * // 关闭 Mock 数据（生产环境）
  * USE_MOCK_DATA = false
  * USE_MOCK_DATA = false
  */
  */
-export const USE_MOCK_DATA = true
+export const USE_MOCK_DATA = false
 
 
 /**
 /**
  * 根据 NODE_ENV 自动判断是否使用 Mock
  * 根据 NODE_ENV 自动判断是否使用 Mock

@@ -393,7 +393,8 @@ export const PLAN_TEMPLATES = {
         enabled: true,
         enabled: true,
         currencies: ['HKD', 'USD', 'CNY'],
         currencies: ['HKD', 'USD', 'CNY'],
         default_currency: 'USD',
         default_currency: 'USD',
-        withdrawal_modes: ['指定提取金额'], // 多阶段模式只支持指定提取金额
+        // 多阶段模式：支持指定提取金额（多组）和最高固定提取金额（单组）
+        withdrawal_modes: ['指定提取金额', '最高固定提取金额'],
         withdrawal_periods: multiStageWithdrawalConfig.withdrawal_periods
         withdrawal_periods: multiStageWithdrawalConfig.withdrawal_periods
       },
       },
       form_schema: savingsFormSchema,
       form_schema: savingsFormSchema,