feat:华贵试算

src/components/CrRadioBtn.vue

 <template>
-  <cr-radio-group v-model="radioVal" class="radio-btn" :class="{ readonly }">
+  <cr-radio-group :value="radioVal" class="radio-btn" :class="{ readonly }" @input="onChange">
     <cr-radio
       :disabled="disabled"
       :name="item.value"
-      :class="{ checked: value === item.value }"
+      :class="{
+        checked: value === item.value,
+        disabled: item.disabled
+      }"
       v-for="(item, index) in radioData"
       :key="index"
     >
@@ -40,19 +43,25 @@ export default {
   watch: {
     value: {
       immediate: true,
+      deep: true,
       handler(val) {
         this.radioVal = val || "";
-        this.$emit(CHANGE_EVENT, val);
+        // this.$emit(CHANGE_EVENT, val);
       }
-    },
-    radioVal(val) {
-      this.$emit(CHANGE_EVENT, val);
     }
   },
   data() {
     return {
       radioVal: ""
     };
+  },
+  methods: {
+    onChange(val) {
+      const item = this.radioData.find(item => item.value === val);
+      if (item.disabled) return;
+      this.radioVal = val;
+      this.$emit(CHANGE_EVENT, val);
+    }
   }
 };
 </script>
@@ -96,6 +105,9 @@ export default {
         font-weight: @font-weight-bold;
       }
     }
+    &.disabled {
+      opacity: 0.5;
+    }
     &__icon {
       display: none;
     }

src/components/GoodAction.vue

@@ -120,7 +120,7 @@ export default {
   }
   &-content {
     flex: 1;
-    padding: 0 12px;
+    padding: 0 11px;
     h6 {
       font-size: @font-size-16;
       font-weight: @font-weight-bold;
@@ -141,7 +141,7 @@ export default {
   &-right {
     padding-right: 8px;
     .cr-button {
-      width: 188px;
+      width: 175px;
       font-size: @font-size-16 !important;
       border-radius: @border-radius-max !important;
       box-shadow: 1px 2px 8px 0px rgba(255, 200, 66, 0.4);

src/views/Goods/Detail/modules/CalInsuredFee.vue

@@ -17,7 +17,7 @@
         :rules="[{ required: true, message: 'required' }]"
       >
         <template #input>
-          <cr-radio-btn v-model="formData.amountInsured" :radio-data="countOptions" />
+          <cr-radio-btn v-model="formData.amountInsured" :radio-data="amountOptions" />
         </template>
       </cr-field>
       <cr-field
@@ -26,7 +26,7 @@
         :rules="[{ required: true, message: 'required' }]"
       >
         <template #input>
-          <cr-radio-btn v-model="formData.policyPeriod" :radio-data="termOptions" />
+          <cr-radio-btn v-model="formData.policyPeriod" :radio-data="insureTermOptions" />
         </template>
       </cr-field>
       <cr-field
@@ -35,7 +35,7 @@
         :rules="[{ required: true, message: 'required' }]"
       >
         <template #input>
-          <cr-radio-btn v-model="formData.payPeriod" :radio-data="benefitOptions" />
+          <cr-radio-btn v-model="formData.payPeriod" :radio-data="insureBenefitOptions" />
         </template>
       </cr-field>
       <cr-field name="gender" label="性别" :rules="[{ required: true, message: 'required' }]">
@@ -56,10 +56,12 @@
 import CrRadioBtn from "@/components/CrRadioBtn";
 const DATA_CHANGE_EVENT = "input";
 import liDetail from "@/api/detail.huagui.shouxian";
+import liCalFee from "./liCalFee.mixin";
 const { paywayOptions, sexOptions, insuredAmountOptions, termOptions, benefitOptions } = liDetail;
-
+import moment from "moment";
 export default {
   name: "CalInsuredFee",
+  mixins: [liCalFee],
   components: {
     CrRadioBtn
   },
@@ -96,10 +98,34 @@ export default {
       }
     }
   },
+  computed: {
+    age() {
+      const userAge = parseInt(moment(this.formData.birth).fromNow(), 10);
+      return isNaN(userAge) ? 18 : userAge;
+    }
+  },
   mounted() {},
   methods: {
     onFormSubmit() {
       this.$emit(DATA_CHANGE_EVENT, this.formData);
+    },
+    resetFormItemVal(key, val) {
+      if (this.formData.birth && this.formData[key] && !val) {
+        switch (key) {
+          case "amountInsured":
+            this.$notify({ type: "warning", message: "已超出该年龄承保的最高保额，请重新选择" });
+            break;
+          case "policyPeriod":
+          case "payPeriod":
+            this.$notify({ type: "warning", message: "交费期间不应长于保障期间，请重新选择" });
+            break;
+          default:
+            break;
+        }
+      }
+      if (this.formData[key] === val) {
+        this.formData[key] = "";
+      }
     }
   }
 };

src/views/Goods/Detail/modules/liCalFee.mixin.js

+export default {
+  computed: {
+    // 场景不同暂不做整合
+    // age() {
+    //   const userAge = parseInt(moment(this.formData.birth).fromNow(), 10);
+    //   return isNaN(userAge) ? 18 : userAge;
+    // },
+    // 年龄范围：['18~35', '31~35', '36~40', '41~45', '46~50', '51~55', '56~60']
+    calFormData() {
+      if (this.formData.productItem) {
+        return this.formData.productItem;
+      }
+      if (this.formData) {
+        return this.formData;
+      }
+    },
+    ageIndex() {
+      const { age } = this;
+      const ageRangeList = [
+        [18, 35],
+        [31, 35],
+        [36, 40],
+        [41, 45],
+        [46, 50],
+        [51, 55],
+        [56, 60]
+      ];
+      // 特殊情况
+      if (31 <= age && age <= 35) {
+        return 1;
+      }
+      return ageRangeList.findIndex(item => item[0] <= age && age <= item[1]);
+    },
+    amountOptions() {
+      const { ageIndex, countOptions } = this;
+      return countOptions.map((item, index) => {
+        if (ageIndex === 6 && index > 3) {
+          item.disabled = true;
+        } else if (ageIndex > 2 && index > 5) {
+          item.disabled = true;
+        } else {
+          item.disabled = false;
+        }
+        this.resetFormItemVal("amountInsured", item.disabled ? item.value : "");
+        return item;
+      });
+    },
+    insureTermOptions() {
+      const { ageIndex: a, termOptions } = this;
+      const { payPeriod: p } = this.calFormData;
+      return termOptions.map((item, index) => {
+        switch (index) {
+          case 0:
+            item.disabled = p === "3";
+            break;
+          case 1:
+            item.disabled = p === "4" || a > 4;
+            break;
+          case 2:
+            item.disabled = a > 2;
+            break;
+          case 3:
+            item.disabled = (a > 0 && p === "4") || (a > 2 && p === "3") || a > 4;
+            break;
+          case 4:
+            item.disabled = (a > 1 && p === "4") || (a > 3 && p === "3") || a === 4;
+            break;
+          case 5:
+            item.disabled = (a > 2 && p === "4") || (a > 4 && p === "3");
+            break;
+          default:
+            break;
+        }
+        this.resetFormItemVal("policyPeriod", item.disabled ? item.value : "");
+        return item;
+      });
+    },
+    insureBenefitOptions() {
+      const { ageIndex: a, benefitOptions } = this;
+      const { policyPeriod: p } = this.calFormData;
+      return benefitOptions.map((item, index) => {
+        switch (index) {
+          case 0:
+          case 1:
+            break;
+          case 2:
+            item.disabled = p === "1" || (+p >= 4 && +p <= 6 && a > 2);
+            break;
+          case 3:
+            item.disabled = a > 2;
+            break;
+          default:
+            break;
+        }
+        this.resetFormItemVal("payPeriod", item.disabled ? item.value : "");
+        return item;
+      });
+    }
+  }
+  // 场景不同暂不做整合
+  // methods: {
+  //   resetFormItemVal(key, val) {
+  //     if (this.formData.birth && this.formData[key] && !val) {
+  //       switch (key) {
+  //         case "amountInsured":
+  //           this.$notify({ type: "warning", message: "已超出该年龄承保的最高保额，请重新选择" });
+  //           break;
+  //         case "policyPeriod":
+  //         case "payPeriod":
+  //           this.$notify({ type: "warning", message: "交费期间不应长于保障期间，请重新选择" });
+  //           break;
+  //         default:
+  //           break;
+  //       }
+  //     }
+  //     if (this.formData[key] === val) {
+  //       this.formData[key] = "";
+  //     }
+  //   }
+  // }
+};

src/views/Policy/Add/index.vue

@@ -361,7 +361,7 @@
           :rules="[{ required: true, message: '请选择投保限额' }]"
         >
           <template #input>
-            <stepper v-model="formData.productItem.amountInsured" :option="insuredAmountOptions" />
+            <stepper v-model="formData.productItem.amountInsured" :option="amountOptions" />
           </template>
         </cr-field>
         <cr-field
@@ -371,7 +371,10 @@
           :rules="[{ required: true, message: '请选择保险期限' }]"
         >
           <template #input>
-            <cr-radio-btn v-model="formData.productItem.policyPeriod" :radio-data="termOptions" />
+            <cr-radio-btn
+              v-model="formData.productItem.policyPeriod"
+              :radio-data="insureTermOptions"
+            />
           </template>
         </cr-field>
         <cr-field
@@ -391,7 +394,10 @@
           :rules="[{ required: true, message: '请选择交费期间' }]"
         >
           <template #input>
-            <cr-radio-btn v-model="formData.productItem.payPeriod" :radio-data="benefitOptions" />
+            <cr-radio-btn
+              v-model="formData.productItem.payPeriod"
+              :radio-data="insureBenefitOptions"
+            />
           </template>
         </cr-field>
         <cr-field :value="formData.effectiveDate" name="effectiveDate" readonly label="生效日期" />
@@ -492,6 +498,7 @@ import Stepper from "@/components/Stepper";
 import GoInsureDialog from "@/views/Goods/Detail/modules/GoInsureDialog";
 import detailPayMixin from "@/views/Goods/Detail/modules/detailPay.mixin";
 import autoSaveForm from "@/mixins/autoSaveForm.mixin";
+import liCalFee from "@/views/Goods/Detail/modules/liCalFee.mixin";
 import moment from "moment";
 import _ from "lodash";
 
@@ -526,7 +533,7 @@ const {
 } = JSON.parse(JSON.stringify(Detail));
 export default {
   name: "AddPolicy",
-  mixins: [detailPayMixin, autoSaveForm],
+  mixins: [detailPayMixin, autoSaveForm, liCalFee],
   components: {
     GoodAction,
     CrRadioBtn,
@@ -574,7 +581,7 @@ export default {
       termOptions,
       paywayOptions,
       benefitOptions,
-      insuredAmountOptions,
+      countOptions: insuredAmountOptions,
       bankInfo,
       selfInfoReadonly: false,
       infoReadonly: false,
@@ -667,6 +674,13 @@ export default {
   computed: {
     ...mapState(["showAuthXyqb"]),
     ...mapState("user", ["userInfo"]),
+    age() {
+      const currentIdNo = this.getRealIdNo();
+      if (!currentIdNo) return;
+      const birthday = this.getBirthDate(currentIdNo);
+      const userAge = parseInt(moment(birthday).fromNow(), 10);
+      return isNaN(userAge) ? 18 : userAge;
+    },
     pupopData() {
       const { popupArray, currentPupopIndex } = this;
       return popupArray[currentPupopIndex] || {};
@@ -874,16 +888,21 @@ export default {
       }
       return birthday;
     },
-    setEffectiveDate: _.debounce(function() {
+    getRealIdNo() {
       const { relation, userInfoSecId: userId, idNo: idNoMask } = this.formData.insuredUserInfo;
       const { userInfoSecId: holderUserId, idNo: holderIdNoMask } = this.formData.holderUserInfo;
       let currentIdNo = !relation || relation === "1" ? holderIdNoMask : idNoMask;
       const currentUserId = !relation || relation === "1" ? holderUserId : userId;
-      if (!currentIdNo) return;
+      if (!currentIdNo) return "";
       currentIdNo =
         currentIdNo.indexOf("**") > -1
           ? this.familyList.find(item => item.userInfoSecId === currentUserId).idNo
           : currentIdNo;
+      return currentIdNo;
+    },
+    setEffectiveDate: _.debounce(function() {
+      const currentIdNo = this.getRealIdNo();
+      if (!currentIdNo) return;
       const birthday = this.getBirthDate(currentIdNo);
       const birthdayArr = birthday.split("-");
       const currentdayArr = moment()
@@ -897,6 +916,26 @@ export default {
               .format("YYYY-MM-DD 00:00:00");
       this.formData.effectiveDate = nextDate;
     }),
+    resetFormItemVal(key, val) {
+      const currentIdNo = this.getRealIdNo();
+      const birthday = this.getBirthDate(currentIdNo);
+      if (birthday && this.formData.productItem[key] && !val) {
+        switch (key) {
+          case "amountInsured":
+            this.$notify({ type: "warning", message: "已超出该年龄承保的最高保额，请重新选择" });
+            break;
+          case "policyPeriod":
+          case "payPeriod":
+            this.$notify({ type: "warning", message: "交费期间不应长于保障期间，请重新选择" });
+            break;
+          default:
+            break;
+        }
+      }
+      if (this.formData.productItem[key] === val) {
+        this.$set(this.formData.productItem, key, "");
+      }
+    },
     async getDetail() {
       const res = await list();
       if (res) {