计划书生成模块 - 快速使用指南

适用场景：需要在页面中添加"计划书"功能

---

🚀 5分钟快速集成

1. 在页面中引入组件

<script setup>
import { ref } from 'vue'
import PlanFormContainer from '@/components/PlanFormContainer.vue'

const showPlanPopup = ref(false)
const selectedProduct = ref(null)
</script>

2. 绑定按钮点击事件

<template>
  <!-- 在产品列表或产品详情页 -->
  <nut-button
    type="primary"
    @click="openPlanPopup(product)"
  >
    计划书
  </nut-button>
</template>

3. 打开计划书弹窗

const openPlanPopup = (product) => {
  // 确保产品有 form_sn 字段
  if (!product.form_sn) {
    console.error('产品缺少 form_sn 字段', product)
    return
  }

  selectedProduct.value = product
  showPlanPopup.value = true
}

4. 处理提交

const handleClose = () => {
  showPlanPopup.value = false
}

const handleSubmit = (formData) => {
  console.log('提交计划书:', formData)

  // 调用 API 提交
  submitPlanAPI({
    product_id: selectedProduct.value.id,
    form_sn: selectedProduct.value.form_sn,
    form_data: formData
  })

  handleClose()
}

5. 渲染弹窗组件

<template>
  <PlanFormContainer
    v-model:visible="showPlanPopup"
    :product="selectedProduct"
    @close="handleClose"
    @submit="handleSubmit"
  />
</template>

---

✅ 完整示例

<template>
  <div class="product-page">
    <!-- 产品信息 -->
    <nut-card>
      <h2>{{ product.product_name }}</h2>
      <nut-button
        type="primary"
        @click="openPlanPopup(product)"
      >
        生成计划书
      </nut-button>
    </nut-card>

    <!-- 计划书弹窗 -->
    <PlanFormContainer
      v-model:visible="showPlanPopup"
      :product="selectedProduct"
      @close="handleClose"
      @submit="handleSubmit"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import PlanFormContainer from '@/components/PlanFormContainer.vue'
import { submitPlanAPI } from '@/api/plan'

const product = ref({
  id: 1,
  product_name: "WIOP3E 盈传创富保障计划 3",
  form_sn: "life-insurance-wiop3e"
})

const showPlanPopup = ref(false)
const selectedProduct = ref(null)

const openPlanPopup = (prod) => {
  if (!prod.form_sn) {
    Taro.showToast({
      title: '产品配置错误',
      icon: 'error'
    })
    return
  }

  selectedProduct.value = prod
  showPlanPopup.value = true
}

const handleClose = () => {
  showPlanPopup.value = false
}

const handleSubmit = async (formData) => {
  try {
    Taro.showLoading({ title: '提交中...' })

    const res = await submitPlanAPI({
      product_id: selectedProduct.value.id,
      form_sn: selectedProduct.value.form_sn,
      form_data: formData
    })

    if (res.code === 1) {
      Taro.showToast({
        title: '提交成功',
        icon: 'success'
      })

      // 跳转到结果页
      Taro.navigateTo({
        url: `/pages/plan-submit-result/index?id=${res.data.plan_id}`
      })
    } else {
      Taro.showToast({
        title: res.msg || '提交失败',
        icon: 'error'
      })
    }
  } catch (err) {
    console.error('提交计划书失败:', err)
    Taro.showToast({
      title: '网络错误',
      icon: 'error'
    })
  } finally {
    Taro.hideLoading()
  }

  handleClose()
}
</script>

---

🔧 添加新产品支持

步骤 1: 添加配置

在 src/config/plan-templates.js 中添加：

export const PLAN_TEMPLATES = {
  // ... 现有配置

  'your-product-form-sn': {
    name: '产品名称',
    component: 'YourProductTemplate',
    config: {
      currency: 'USD',
      payment_periods: ['5 年', '10 年'],
      age_range: { min: 0, max: 65 },
      insurance_period: '终身'
    }
  }
}

步骤 2: 创建模板

在 src/components/PlanTemplates/YourProductTemplate.vue：

<template>
  <div v-if="config">
    <!-- 使用通用字段组件 -->
    <PlanFieldRadio v-model="form.gender" label="性别" :options="['男', '女']" />
    <!-- ... 其他字段 -->
  </div>
</template>

<script setup>
import { reactive, watch } from 'vue'
import PlanFieldRadio from '../PlanFields/RadioGroup.vue'

const props = defineProps({
  modelValue: { type: Object, default: () => ({}) },
  config: { type: Object, required: true }
})

const emit = defineEmits(['update:modelValue'])

const form = reactive({ ...props.modelValue })

watch(() => form, (newVal) => emit('update:modelValue', newVal), { deep: true })
</script>

步骤 3: 注册组件

在 src/components/PlanFormContainer.vue 中：

import YourProductTemplate from './PlanTemplates/YourProductTemplate.vue'

const componentMap = {
  // ... 现有组件
  'YourProductTemplate': YourProductTemplate
}

---

🐛 常见问题

Q1: 弹窗显示"未找到对应的计划书模版"

原因：产品缺少 form_sn 字段

解决：

// 检查产品数据
console.log(product.form_sn)  // 应该有值，如 "life-insurance-wiop3e"

// 如果没有，联系后端添加

---

Q2: 表单输入时出现 value.replace is not a function

原因：这是已修复的问题

解决：确保使用最新版本的 AmountInput.vue

---

Q3: 年龄选择器显示为 018，提交需要 18

说明：这是正常行为

• 显示：3 位数字格式（018）
• 提交：普通数字（18）

组件会自动处理转换，无需手动处理。

---

Q4: 提取计划字段显示不正确

说明：提取计划有复杂的条件渲染逻辑

• 第一层：是否启用（是/否）
• 第二层：提取选项（指定提取金额/最高固定提取金额）
• 第三层：具体方式（按年岁/按保单年度）

确保按顺序选择，相关字段会自动显示。

---

📚 更多信息

• 完整架构文档
• 经验教训总结
• API 联调日志

---

最后更新: 2026-02-06