feat(product):优化产品流程与UI展示

- 新增 DestroyablePopup 组件用于弹窗管理
- 页面 重构 SelectedProduct展示结构，使用 van-field 替代原有布局
- 引入 riskMap 映射文件优化字段展示- 在 CalculatePremium 组件中替换 popup 为 destroyable-popup
- 新增 TitleBar 组件支持自定义布局操作按钮
-优化 InsuranceApplicationFlow 页面结构与逻辑- 添加保障信息模块并支持修改保障计划功能
- 完善组件间数据传递与事件处理机制

src/assets/js/propertyMap/risk.js

@@ -0,0 +1,8 @@
+export const riskMap = Object.freeze({
+  riskName: '主险名称',
+  payIntv: "交费方式",
+  insuYear: "保险期间",
+  payEndYear: "缴费期间",
+  amt: "保额",
+  prem: "保费"
+})

src/components/common/DestroyablePopup.vue

@@ -0,0 +1,29 @@
+<script>
+export default {
+  name: 'DestroyablePopup',
+  data() {
+    return {
+      isPopupOpen: this.show, isDestroyPopup: false
+    }
+  },
+  watch: {
+    isPopupOpen(val) {
+      this.isPopupOpen = val
+      this.$emit('update:show', val)
+    },
+    show() {
+      if (this.show) this.isDestroyPopup = false
+      this.$nextTick(() => this.isPopupOpen = this.show)
+    }
+  },
+  props: ['show']
+}
+</script>
+
+<template>
+  <div v-if="!isDestroyPopup">
+    <van-popup v-model="isPopupOpen" round position="bottom" @closed="()=>{isDestroyPopup = true}">
+      <slot></slot>
+    </van-popup>
+  </div>
+</template>

src/views/ebiz/commonFlowImprove/SelectedProduct.vue

@@ -1,54 +1,34 @@
 <template>
   <div style="background: #f5f5f5" class="select-product-container">
-    <div v-for="(item, index) in chooseProducts" :key="index" class="mb20 bg-white pv15 pr15 pl10 radius5">
-      <div class="flex mv10 align-items-c">
-        <div class="fs14 w45">
-          <van-tag plain type="danger">主险</van-tag>
+    <div v-for="(item, index) in chooseProducts" :key="index" class="bg-white  radius5">
+      <!--      因子 -->
+      <div>
+        <!--   主险名称   -->
+        <van-field label="主险名称" required>
+          <template #input>{{ item.riskName }}</template>
+        </van-field>
+        <!--      缴费方式-->
+        <van-field label="缴费方式" required>
+          <template #input>{{ item.payIntv }}</template>
+        </van-field>
+        <!--      缴费方式-->
+        <van-field label="缴费期间" required>
+          <template #input>{{ item.payEndYear }}</template>
+        </van-field>
+        <!--      保费    -->
+        <van-field label="保费  (万元)" required>
+          <template #input>{{ item.prem }}</template>
+        </van-field>
+        <!--      保额    -->
+        <van-field label="保额 (元)" required>
+          <template #input>{{ item.amt | moneyFormat }}</template>
+        </van-field>
       </div>
-        <div class="fs15 c-gray-dark">{{ item.riskName }}</div>
+
     </div>
-      <div class="pl45 flex mv10" v-for="(addtion, addIndex) in item.addtion" :key="addIndex">
-        <div class="w50">
-          <van-tag mark color="#DDF2EF" text-color="#E9332E">附加</van-tag>
-        </div>
-        <div class="fs13">{{ addtion.riskName }}</div>
-      </div>
-      <div class="flex fs15 justify-content-s align-items-b pb5">
-        <div class="c-gray-darker fwb">首期保费（元）</div>
-        <div class="yellow fwb">{{ item.prem.toFixed(2) | moneyFormat }}</div>
-      </div>
-      <div class="text-right pv5">
-        <van-button v-if="isFrom === 'proposal'" size="small" round @click="editInsure(index, item)" class="mr5" type="danger">编辑</van-button>
-        <van-button size="small" round @click="deteleInsure(index)" plain type="danger">删除</van-button>
-      </div>
-    </div>
-    <div v-if="isFrom === 'sale' && !isShow">
-      <div class="p15 pl8 fs14" style="margin-bottom: 20px;background: #fff;">
-        <van-radio-group v-model="isElecCont" class="flex" style="display: flex;align-items: center;">
-          <label>
-            <i class="red pr5">*</i>
-            保单形式
-          </label>
-          <van-radio name="1" class="ml10" style="display: flex;align-items: center;color: red;">
-            电子(不打印保单)
-          </van-radio>
-          <van-radio
-            name="2"
-            v-if="!['GFRS_M0076', 'GFRS_M0077'].includes(chooseProducts[0].mainRiskCode)"
-            class="ml10"
-            style="display: flex;align-items: center;color: red;"
-          >
-            电子+纸质
-          </van-radio>
-        </van-radio-group>
-      </div>
-    </div>
-    <div class="pt30 bg-white pb50">
-      <div class="text-center m20 pv15 border-dotted c-gray-base bg-white" @click="addProduct" v-if="isShow">
-        <span class="v-middle mr10" style="font-size:32px">+</span>添加产品
-      </div>
-    </div>
-    <van-dialog v-model="active_show" :show-confirm-button="false" class="dialog_class" style="position: relative; overflow: visible;">
+
+    <van-dialog v-model="active_show" :show-confirm-button="false" class="dialog_class"
+                style="position: relative; overflow: visible;">
       <img class="icon_image" src="@/assets/images/kmh/close_bg.png" @click="active_show = false" alt="" />
       <div class="pl20 pr20 mt30">
         <!-- <div class="flex justify-content-c align-items-c">
@@ -116,7 +96,9 @@
         <div class="flex justify-content-c align-items-c click_buttons">
           <!--<img class="icon_click_image" src="@/assets/images/kmh/click_bg.png" @click="comfirmCheckActive" />-->
           <!-- <van-button type="danger" class="dialog-comfirm-button" @click="comfirmCheckActive('SQY')" v-no-more-click="1000">确认</van-button> -->
-          <van-button type="danger" class="dialog-comfirm-button" @click="comfirmCheckActive('PRODUCT')" v-no-more-click="1000">确认</van-button>
+          <van-button type="danger" class="dialog-comfirm-button" @click="comfirmCheckActive('PRODUCT')"
+                      v-no-more-click="1000">确认
+          </van-button>
         </div>
       </div>
     </van-dialog>
@@ -131,32 +113,34 @@
         <van-button type="danger" block style="font-size: 14px;" @click="thisdoubledialogfunc">确定</van-button>
       </div>
     </van-dialog>
-<!--    <div>-->
-<!--      <van-submit-bar button-text="下一步" @submit="nextStep" :disabled="nextStepFlag">-->
-<!--        <div class="fs15 ml15 fwb" style="flex:1" slot="default">-->
-<!--          合计：-->
-<!--          <span class="yellow mr5">￥{{ (total / 100).toFixed(2) | moneyFormat }}</span-->
-<!--          >元-->
-<!--        </div>-->
-<!--      </van-submit-bar>-->
-<!--    </div>-->
+
+
   </div>
 </template>
 <script>
 import { Tag, SubmitBar, Icon, Dialog, RadioGroup, Radio, Image } from 'vant'
 import FieldPicker from '@/components/ebiz/FieldPicker'
-import { orderDetail, deleteOrderInfo, mainRiskList, mainRiskListProposal, calculatePremium } from '@/api/ebiz/common/common'
+import {
+  orderDetail,
+  deleteOrderInfo,
+  mainRiskList,
+  mainRiskListProposal,
+  calculatePremium
+} from '@/api/ebiz/common/common'
 import { formatAllRisk } from '@/assets/js/utils/formatRiskList'
 import { getDetail, deleteProposal } from '@/api/ebiz/proposal/proposal.js'
 import { saveOrderActiveType, getActivityList, getDoubleRecordProductLst, saveOrderType } from '@/api/ebiz/sale/sale.js'
-import utilsAge from '@/assets/js/utils/age'
 import IndexBar from '@/components/ebiz/sale/IndexBar'
 import riskRules from './risk-rules'
+import CalculatePremium from '@/views/ebiz/productFlowImprove/components/CalculatePremium.vue'
+import TitleBar from '@/views/ebiz/productFlowImprove/components/TitleBar.vue'
+import { riskMap } from '@/assets/js/propertyMap/risk'
 
 export default {
   name: 'selectedProduct',
   data() {
     return {
+      isShowCalculatePremium: false,
       thisdoubledialogshow: false,
       chooseProducts: [],
       total: 0,
@@ -180,6 +164,7 @@ export default {
     }
   },
   components: {
+    TitleBar, CalculatePremium,
     [Tag.name]: Tag,
     [FieldPicker.name]: FieldPicker,
     [SubmitBar.name]: SubmitBar,
@@ -269,6 +254,13 @@ export default {
     next()
   },
   methods: {
+    riskNameFilter(risk) {
+      const value = riskMap[risk]
+      return {
+        value: value ? value : risk,
+        hasValue: !!value
+      }
+    },
     appCallBack(data) {
       if (data.trigger == 'left_button_click' && localStorage.isFrom == 'sale') {
         return this.$dialog
@@ -328,7 +320,7 @@ export default {
     async getProductList() {
       //建议书、电投详情
       let resultData
-      let isProposal = localStorage.isFrom == 'proposal' ? true : false
+      let isProposal = localStorage.isFrom == 'proposal'
       if (isProposal) {
         let saleInsuredPersonInfo = this.$CacheUtils.getLocItem('saleInsuredPersonInfo') && JSON.parse(this.$CacheUtils.getLocItem('saleInsuredPersonInfo'))
 
@@ -366,7 +358,7 @@ export default {
       if (resultData.result == 0) {
         if (resultData.orderDTO) {
           //判断是否显示风险测评tab
-          let updateAnswerType = resultData.orderDTO.riskEvaluationDTO.isShowEvaluationPoint == '1' ? true : false
+          let updateAnswerType = resultData.orderDTO.riskEvaluationDTO && resultData.orderDTO.riskEvaluationDTO.isShowEvaluationPoint == '1'
           this.$store.commit('updateAnswerType', updateAnswerType)
           // console.log(updateAnswerType,'updateAnswerType');
           this.renovate = new Date().getTime()
@@ -393,6 +385,7 @@ export default {
         this.$utils.intLocalStorage(resultData, isProposal)
 
         this.chooseProducts = formatAllRisk(riskDTOLst)
+        console.log(`currentProducts is `, this.chooseProducts)
         if (riskDTOLst.length > 0) {
           this.nextStepFlag = false
         }
@@ -673,7 +666,12 @@ export default {
                 item[item.code] = factor[item.code]
               }
             }
-            let itemColumns = { text: factor.showContent, value: factor[item.code], flag: factor[item.code + 'Flag'], sex: factor.sex }
+            let itemColumns = {
+              text: factor.showContent,
+              value: factor[item.code],
+              flag: factor[item.code + 'Flag'],
+              sex: factor.sex
+            }
             if (factor.medical !== undefined) {
               itemColumns.medical = factor.medical
             }
@@ -1058,27 +1056,33 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '@/assets/sass/variables.scss';
+
 .select-product-container {
   .border-dotted {
     border: 1px dashed #999;
   }
+
   .van-submit-bar {
     border-top: 1px solid #dadada;
     box-sizing: border-box;
   }
+
   .van-submit-bar__text {
     text-align: left;
     padding-left: 20px;
   }
+
   /deep/ .van-submit-bar__price {
     color: #f56123;
     font-weight: bold;
     font-size: 15px;
   }
+
   .radio_class {
     height: 47px;
     margin-bottom: 10px;
   }
+
   .dialog-comfirm-button {
     width: 167px;
     height: 36px;
@@ -1087,6 +1091,7 @@ export default {
     text-align: center;
     vertical-align: center;
   }
+
   .icon_image {
     width: 19px;
     height: 19px;
@@ -1094,6 +1099,7 @@ export default {
     right: 15px;
     top: -30px;
   }
+
   .icon_image_close {
     width: 19px;
     height: 19px;
@@ -1101,44 +1107,54 @@ export default {
     right: 4px;
     top: -22px;
   }
+
   .icon_title_image {
     width: 50px;
     padding-top: 45px;
   }
+
   .icon_select_image {
     width: 167px;
     height: 47px;
   }
+
   .icon_click_image {
     width: 107px;
   }
+
   /deep/ .van-radio-group .van-radio__icon {
     height: 1.3em;
     line-height: 1.3em;
   }
+
   .radio_icon_image {
     width: 20px;
     height: 20px;
     padding-top: 3px;
   }
+
   .dialog_class {
     width: 330px;
     height: 376px;
     background: url('../../../assets/images/kmh/dialog_bg.png');
     background-size: 100% 100%;
   }
+
   .click_buttons {
     padding-top: 5px;
     padding-right: 0px;
     padding-bottom: 10px;
   }
+
   /deep/ .van-radio__icon--round {
     display: flex;
     align-items: center;
   }
+
   /deep/ .van-icon {
     line-height: 100%;
   }
+
   /deep/ .van-radio__label {
     color: red;
   }

src/views/ebiz/productFlowImprove/components/CalculatePremium.vue

@@ -4,9 +4,10 @@
       <span style="border-radius:8px;height: 15px; width: 10px; background-color: red;"></span>
       <h4 class="ml5">保费试算</h4>
     </div>
-    <template v-if="persionMessageInfo">
+    <template v-if="personMessageInfo">
       <!--被保人信息详情-->
-      <insured-message-info @update="$nextTick(getTrial)" :msgInfo="saleInsuredPersonInfo" :applicantInfo="saleInsuredInfo"
+      <insured-message-info @update="$nextTick(getTrial)" :msgInfo="saleInsuredPersonInfo"
+                            :applicantInfo="saleInsuredInfo"
                             type="insured" />
       <!--投保人信息详情-->
       <insured-message-info @update="$nextTick(getTrial)" :msgInfo="saleInsuredInfo"
@@ -395,7 +396,7 @@
     </div>
 
     <!--底部总保费计算-->
-    <total-premium @submit="nextStep" :money="firstTermTotalPremium"
+    <total-premium v-if="personMessageInfo" @submit="nextStep" :money="firstTermTotalPremium"
                    :btn-option="{ disable: nextStepFlag, name: '立即投保' }" />
 
     <van-action-sheet v-model="show" cancel-text="取消" :actions="policyInfo" @select="openDocument" />
@@ -406,7 +407,7 @@
     </van-popup>
 
     <!--    附加险添加窗口   -->
-    <van-popup v-model="showAdditionRiskPopup" round position="bottom" class="addtion-risk">
+    <destoryable-popup :show.sync="showAdditionRiskPopup" class="addtion-risk">
       <van-picker title="选择附加险" show-toolbar @confirm="handleSubmitAddAdditionRisk"
                   @cancel="handleSubmitAddAdditionRisk({ submit: false })">
         <template #columns-top>
@@ -414,7 +415,7 @@
                              @changeProducts="handleChoosedProductsChange" />
         </template>
       </van-picker>
-    </van-popup>
+    </destoryable-popup>
 
     <van-dialog v-model="trialResultsShow" title="核保试算结果" :show-cancel-button="false">
       <div class="pl20 pr20 mt10">
@@ -514,14 +515,15 @@ export default {
     [RadioGroup.name]: RadioGroup,
     FieldDatePicter: FieldDatePicter,
     SelectRadio: SelectRadio,
-    InsuredMessageInfo: () => import('./CalculatePremiumInsuredMessageInfo.vue')
+    InsuredMessageInfo: () => import('./CalculatePremiumInsuredMessageInfo.vue'),
+    DestoryablePopup: () => import('@/components/common/DestroyablePopup.vue')
   },
   props: {
     productDTOS: {
       type: Array,
       default: () => []
     },
-    persionMessageInfo: {
+    personMessageInfo: {
       type: Boolean,
       default: true
     }
@@ -795,7 +797,6 @@ export default {
     //初始化数据
     async init() {
       let that = this
-
       const { productCode: productDetailCode, productName } = this.productDTOS[0]
       const productDetail = await information({
         productCodes: [productDetailCode],

src/views/ebiz/productFlowImprove/components/TitleBar.vue

@@ -1,12 +1,19 @@
 <template>
   <div style="position: sticky; top: 0; padding: 10px 0; background: #FFF">
     <div class="fs16" style="text-align: center;color: #000000">{{ title || '标题' }}</div>
-      <div style="position: absolute;right: 10px; top: 10px; color: red;" @click="handleChangePopup">取消</div>
+    <div class="absolute red w-full" style="top: 10px;" @click="handleChangePopup">
+      <span v-if="!layout">取消</span>
+      <div v-else class="flex justify-content-s" :style="{flexFlow: layout.reverse ? 'row-reverse' : 'row'}">
+        <div class="pl15" @click="layout.cancel.click">{{ layout.cancel.text }}</div>
+        <div class="pr15" @click="layout.confirm.click">{{ layout.confirm.text }}</div>
+      </div>
+    </div>
+
   </div>
 </template>
 <script>
 export default {
-  props: ['value', 'title'],
+  props: ['value', 'title', 'layout'],
   data() {
     return {
       canShow: this.value
@@ -14,9 +21,15 @@ export default {
   },
   methods: {
     handleChangePopup() {
-      this.$emit("update:value", false);
+      this.$emit('update:value', false)
       console.log(this.value)
     }
   }
 }
 </script>
+
+<style scoped lang="scss">
+.w-full {
+  width: 100%;
+}
+</style>

src/views/ebiz/saleFlowProImprove/InsuranceApplicationFlow.vue

@@ -1,7 +1,25 @@
 <script>
+import { orderDetail } from '@/api/ebiz/common/common'
 
 export default {
   name: 'InsuranceApplicationFlow',
+  components: {
+    InsuredInfo: () => import('@/views/ebiz/saleFlowProImprove/InsuredInfo.vue'),
+    InsuredPersonInfo: () => import('@/views/ebiz/saleFlowProImprove/InsuredPerson.vue'),
+    Beneficiary: () => import('@/views/ebiz/saleFlowProImprove/Beneficiary.vue'),
+    AdditionalInfo: () => import('@/views/ebiz/commonFlowImprove/SelectedProduct.vue'),
+    SelectedProduct: () => import('@/views/ebiz/commonFlowImprove/SelectedProduct.vue'),
+    TotalPremium: () => import ('@/views/ebiz/saleFlowProImprove/components/TotalPremium.vue'),
+    AdditionalDetails: () => import('@/views/ebiz/saleFlowProImprove/InsuranceApplicationFlowAdditionalDetails.vue'),
+    TitleBar: () => import ('@/views/ebiz/productFlowImprove/components/TitleBar.vue'),
+    CalculatePremium: () => import ('@/views/ebiz/productFlowImprove/components/CalculatePremium.vue')
+  },
+  beforeEnter() {
+    if (process.env.NODE_ENV === 'development') return
+    if (this.$route.query.orderNo) {
+      this.$router.push('/')
+    }
+  },
   data() {
     return {
       insuredInfo: {
@@ -9,7 +27,7 @@ export default {
           flow: false
         }
       },
-      activeCollapse: [/*'Applicant', 'Insured',*/"AdditionalDetails"],
+      activeCollapse: [/*'Applicant', 'Insured', 'Beneficiary', */'CoverageDetails' /*'AdditionalDetails'*/],
       collapseItems: [
         {
           title: '投保人信息',
@@ -26,11 +44,22 @@ export default {
           name: 'Beneficiary',
           component: 'Beneficiary'
         },
-        // {
-        //   title: '保障信息',
-        //   name: 'CoverageDetails',
-        //   component: 'AdditionalInfo'
-        // },
+        {
+          title: '保障信息',
+          name: 'CoverageDetails',
+          component: 'SelectedProduct',
+          rightBtn: {
+            text: '修改保障计划',
+            /**
+             * @param event
+             * @param index {Number} 当前元素的索引
+             */
+            click: (event) => {
+              event.stopPropagation()
+              this.options.isShowCalculatePremium = true
+            }
+          }
+        },
         // {
         //   title: '续期银行信息',
         //   name: 'AutoRenewalBankInfo',
@@ -41,38 +70,74 @@ export default {
           name: 'AdditionalDetails',
           component: 'AdditionalDetails'
         }
-      ]
+      ],
+      options: {
+        isShowCalculatePremium: false
+      },
+      risks: [],
+      titleBarLayout: {
+        reverse: false,
+        cancel: {
+          text: '取消',
+          click: () => {
+            this.options.isShowCalculatePremium = false
           }
         },
-  computed: {},
-  components: {
-    InsuredInfo: () => import('@/views/ebiz/saleFlowProImprove/InsuredInfo.vue'),
-    InsuredPersonInfo: () => import('@/views/ebiz/saleFlowProImprove/InsuredPerson.vue'),
-    Beneficiary: () => import('@/views/ebiz/saleFlowProImprove/Beneficiary.vue'),
-    AdditionalInfo: () => import('@/views/ebiz/commonFlowImprove/SelectedProduct.vue'),
-    SelectedProduct: () => import('@/views/ebiz/commonFlowImprove/SelectedProduct.vue'),
-    TotalPremium: ()=> import ("@/views/ebiz/saleFlowProImprove/components/TotalPremium.vue"),
-    AdditionalDetails: ()=> import("@/views/ebiz/saleFlowProImprove/InsuranceApplicationFlowAdditionalDetails.vue")
-  },
-  methods: {},
-  beforeEnter() {
-    if(process.env.NODE_ENV === "development") return
-    if (this.$route.query.orderNo) {
-      this.$router.push("/")
+        confirm: {
+          text: '确定',
+          click: () => {
+            // 调用内部的 next 方法
+            this.$refs.calculatePremRef.nextStep()
+            this.options.isShowCalculatePremium = false
+          }
+        }
+      }
     }
   },
-  mounted() {}
+  computed: {
+    mainRisk(){
+      console.log('this.risks', this.risks)
+      if (!this.risks.length) return ""
+      const mainRisk = this.risks.find(risk => risk.isMainRisk === '0')
+
+      if (!mainRisk) return ""
+
+      return {
+        productCode: mainRisk.mainRiskCode,
+        productName: mainRisk.riskName
+      }
+    }
+  },
+  created() {
+    const orderNo = this.$route.query.orderNo
+    orderDetail({ orderNo }).then(({ result, orderDTO, resultMessage }) => {
+        if (result !== '0') return this.$toast(resultMessage)
+        const { insuredDTOs } = orderDTO
+        const { riskDTOLst } = insuredDTOs[0]
+        this.risks = riskDTOLst
+      }
+    )
+  }
 }
 </script>
 
 <template>
   <div class="insurance-application-flow-container">
     <van-collapse v-model="activeCollapse">
-      <van-collapse-item v-for="item in collapseItems" :key="item.name" :title="item.title" :name="item.name">
+      <van-collapse-item v-for="(item, index) in collapseItems" :key="item.name" :title="item.title" :name="item.name">
+        <template #value v-if="item.rightBtn">
+          <van-button size="mini" @click="item.rightBtn.click($event,index)"> {{ item.rightBtn.text }}</van-button>
+        </template>
         <component :is="item.component" :options="insuredInfo.option" />
       </van-collapse-item>
     </van-collapse>
     <!--    首期总保费   -->
     <total-premium />
+
+    <!--  核保试算面板  -->
+    <van-popup round position="bottom" v-model="options.isShowCalculatePremium">
+      <title-bar :value.sync="options.isShowCalculatePremium" title="保费试算" :layout = "titleBarLayout"/>
+      <CalculatePremium ref="calculatePremRef" :productDTOS="[mainRisk]" :personMessageInfo="false"/>
+    </van-popup>
   </div>
 </template>