Merge branch 'feat/cal_fee' into 'master'

feat: 华贵试算前端校验；fix: 日期选择器优化，添加时间限制；华贵生效日期问题修复；下单后隐藏确认购买；泰康费率

See merge request !68

package.json

@@ -17,6 +17,8 @@
     "axios": "^0.19.2",
     "core-js": "^3.6.5",
     "lodash": "^4.17.19",
+    "moment": "^2.27.0",
+    "vant": "^2.10.2",
     "vconsole": "^3.3.4",
     "vue": "2.6.11",
     "vue-pdf": "^4.1.0",

src/api/consultant.js

 import req from "@/service/http";
 
+// 获取顾问剩余份数
+export const getRemainNum = () => {
+  return req.get("consultant/surplusNum");
+};
+
 // 创建顾问订单
 export const create = param => {
   return req.post("consultant/order/create", param);

src/api/detail.huatai.zhongjixian.js

@@ -4,7 +4,7 @@
  * @Description:华太30万轻重疾险
  * @Date: 2020-07-27 15:46:37
  * @LastEditors: gzw
- * @LastEditTime: 2020-08-20 10:34:05
+ * @LastEditTime: 2020-08-21 20:00:22
  */
 
 import goodsBg from "@/assets/images/goods/detail/zhongjixian/bg.png";
@@ -235,6 +235,7 @@ export default {
   rateInfo: [
     {
       title: "按月交费",
+      th: ["投保年龄", "男", "女"],
       age: ["0-1", "2-17", "18-20", "21-25", "26-30", "31-35", "36-40", "41-45", "46-50", "51-55", "56-60"],
       list: [
         [
@@ -253,6 +254,7 @@ export default {
     },
     {
       title: "一次交清",
+      th: ["投保年龄", "男", "女"],
       age: ["0-1", "2-17", "18-20", "21-25", "26-30", "31-35", "36-40", "41-45", "46-50", "51-55", "56-60", "61-65", "66-70", "71-75", "76-80", "81-85", "86-90", "91-95", "96-99"],
       list: [
         [

src/api/detail.taikang.yiliaobaozhang.js

@@ -4,7 +4,7 @@
  * @Description: 泰康600万医疗保障
  * @Date: 2020-07-27 15:46:37
  * @LastEditors: gzw
- * @LastEditTime: 2020-08-20 18:27:48
+ * @LastEditTime: 2020-08-21 20:15:58
  */
 
 import goodsBg from "@/assets/images/goods/detail/yiliaoxian/bg.png";
@@ -196,38 +196,20 @@ export default {
   rateInfo: [
     {
       title: "按月交费",
-      age: ["0-1", "2-17", "18-20", "21-25", "26-30", "31-35", "36-40", "41-45", "46-50", "51-55", "56-60"],
+      th: ["投保年龄", "有社保", "无社保"],
+      age: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65],
       list: [
-        [
-          [30.7, 19.5, 23.1, 25.8, 34.3, 51.3, 86.8, 146.4, 252.3, "", ""],
-          [26.2, 17.2, 21.3, 29.3, 46.4, 75.6, 113.7, 166.6, 229.0, "", ""]
-        ],
-        [
-          [20.4, 12.9, 15.3, 17.1, 22.8, 34.1, 57.8, 97.5, 168.1, 285.1, 443.3],
-          [17.4, 11.4, 14.1, 19.5, 30.8, 50.3, 75.7, 111, 152.6, 210.9, 303.6]
-        ],
-        [
-          [10, 6.3, 7.5, 8.4, 11.2, 16.9, 28.7, 48.6, 83.9, 142.4, 221.5],
-          [8.6, 5.6, 6.9, 9.6, 15.3, 25, 37.7, 55.4, 76.2, 105.3, 151.7]
-        ]
+        [891.8, 833.6, 785.8, 715.9, 690.4, 498.6, 424.4, 374.7, 355.6, 342.9, 338.6, 206.2, 175.4, 143.6, 156.3, 169, 181.8, 194.5, 206.1, 214.6, 222, 244.4, 252.9, 261.4, 263.5, 267.7, 286.8, 293.2, 301.6, 310.1, 329.2, 368, 398.8, 414.7, 438, 451.8, 481.2, 505.6, 519.3, 539.5, 557.5, 579.1, 616.3, 653.3, 683, 713.8, 781.7, 838.9, 886.7, 939.7, 989.4, 1041.2, 1095.2, 1187.5, 1256.3, 1314.7, 1399.4, 1467.3, 1561.7, 1600.8, 1706.8, 1938.5, 2105, 2256.5, 2447.3, 2628.6],
+        [1887.2, 1726.1, 1630.7, 1483.3, 1387.9, 996.8, 822, 717, 685.2, 649.2, 634.3, 411.8, 348.2, 282.5, 304.7, 325.9, 351.4, 371.4, 396.9, 416, 446.8, 492.4, 509.4, 532.7, 557.2, 584.7, 636.6, 648.2, 686.4, 719.3, 751.1, 864.1, 907.6, 951, 989.2, 1060.3, 1116.2, 1243.4, 1316.4, 1382.2, 1495.6, 1657.2, 1840.5, 2008, 2110.9, 2239.1, 2380.2, 2608.1, 2799.9, 2924, 3002.4, 3375.3, 3581, 3701.8, 3872.4, 3957.2, 4458.6, 4676, 4841.3, 5044.8, 5350.1, 6128.8, 6828.4, 7413.5, 7866, 8091.9]
       ]
     },
     {
       title: "一次交清",
-      age: ["0-1", "2-17", "18-20", "21-25", "26-30", "31-35", "36-40", "41-45", "46-50", "51-55", "56-60", "61-65", "66-70", "71-75", "76-80", "81-85", "86-90", "91-95", "96-99"],
+      th: ["投保年龄", "有社保", "无社保"],
+      age: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65],
       list: [
-        [
-          [334, 213, 252, 281, 373, 556, 939, 1582, 2724, 4616, 7176, 10505, 15247, 22582, 34031, 49350, 68806, 91974, 120048],
-          [285, 189, 232, 319, 503, 818, 1229, 1800, 2473, 3416, 4916, 7650, 13398, 21368, 32216, 46892, 64195, 83506, 105165]
-        ],
-        [
-          [223, 142, 168, 187, 248, 371, 626, 1055, 1816, 3077, 4784, 7003, 10165, 15055, 22687, 32900, 45871, 61316, 80032],
-          [190, 126, 155, 213, 335, 545, 819, 1200, 1648, 2277, 3277, 5100, 8932, 14245, 21477, 31261, 42797, 55671, 70110]
-        ],
-        [
-          [111, 71, 84, 94, 124, 185, 313, 527, 908, 1539, 2392, 3502, 5082, 7527, 11344, 16450, 22935, 30658, 40016],
-          [95, 63, 77, 106, 168, 273, 410, 600, 824, 1139, 1639, 2550, 4466, 7123, 10739, 15631, 21398, 27835, 35055]
-        ]
+        [88.5, 82.6, 77.9, 71, 68.4, 49.4, 42, 37.1, 35.2, 33.8, 33.4, 20.4, 17.3, 14.1, 15.4, 16.7, 17.9, 19.3, 20.4, 21.3, 22, 24.2, 25.1, 25.9, 26.1, 26.6, 28.3, 29, 29.8, 30.7, 32.6, 36.5, 39.6, 41.1, 43.4, 44.8, 47.6, 50, 51.4, 53.4, 55.3, 57.3, 61.1, 64.7, 67.6, 70.8, 77.5, 83.2, 87.9, 93.2, 98.1, 103.3, 108.7, 117.9, 124.7, 130.5, 138.8, 145.5, 154.9, 158.8, 169.3, 192.4, 208.9, 223.9, 242.8, 260.9, 88.5],
+        [187.3, 171.2, 161.7, 147.1, 137.6, 98.9, 81.5, 71.1, 67.9, 64.3, 62.8, 40.8, 34.5, 27.9, 30.2, 32.3, 34.8, 36.8, 39.3, 41.2, 44.3, 48.8, 50.5, 52.9, 55.3, 57.9, 63.2, 64.3, 68.1, 71.3, 74.5, 85.7, 90, 94.3, 98.2, 105.2, 110.7, 123.3, 130.6, 137, 148.3, 164.4, 182.6, 199.2, 209.4, 222.1, 236.2, 258.8, 277.9, 290.2, 297.9, 335, 355.5, 367.4, 384.4, 392.7, 442.5, 464, 480.4, 500.7, 531, 608.4, 677.8, 735.9, 780.8, 803.3, 187.3, 171.2]
       ]
     }
   ],

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/Consultant/Buy/index.less

@@ -175,6 +175,9 @@
     }
   }
   &-list {
+    background-color: @gray-1;
+    border-radius: @border-radius-md;
+    padding: 0 14px;
     &-item {
       margin-bottom: 5px;
     }
@@ -207,14 +210,13 @@
     &-content {
       color: @gray-5;
       font-size: @font-size-12;
-      background-color: @gray-1;
+      background-color: #FBFCFF;
       border-radius: @border-radius-md;
-      padding: 16px;
+      padding: 16px 9px;
       line-height: @line-height-sm + 2;
       .svg-icon {
-        height: 13px;
-        width: 13px;
-        margin-right: 2px;
+        height: 12px;
+        width: 12px;
       }
       &-item {
         display: flex;
@@ -226,10 +228,11 @@
       }
       &-title {
         font-weight: @font-weight-bold;
+        color: @orange-dark;
       }
       &-txt {
-        margin-left: 8px;
         width: 216px;
+        color: @black;
       }
     }
   }

src/views/Consultant/Buy/index.vue

@@ -27,7 +27,7 @@
               stroke-width="6"
               color="#FFC842"
               track-color="#F9F3F3"
-              :percentage="25"
+              :percentage="remainPercentage"
             />
           </div>
         </div>
@@ -48,7 +48,7 @@
       <card title="想买保险，你是不是也有这些疑问?">
         <cr-image src="@/assets/images/consultant/intro.png" width="100%" height="auto" />
       </card>
-      <card title="芒果保险·1对1保险顾问来帮您?">
+      <card title="芒果保险·1对1保险顾问来帮您">
         <div class="cul-odds-sign">
           <div class="cul-odds-sign-item" v-for="(item, index) in oddsList" :key="index">
             <svg-icon :icon-class="item.icon" />
@@ -84,11 +84,11 @@ import localStorage from "@/service/localStorage";
 import { payByWay } from "@/service/pay";
 import { isXyqb } from "@/service/validation";
 import { mapActions, mapState } from "vuex";
-import { create, goPay } from "@/api/consultant";
+import { create, goPay, getRemainNum } from "@/api/consultant";
 import Card from "@/components/Card";
 import Collapse from "@/components/Collapse";
 import CpsQa from "../../Goods/Detail/modules/CpsQA";
-
+const SUM = 300;
 export default {
   name: "ConsultantBuy",
   components: {
@@ -144,7 +144,7 @@ export default {
           ]
         },
         {
-          title: "省钱",
+          title: "投保后",
           children: [["协助理赔:", "申请理赔时，理赔专家全程协助"]]
         }
       ],
@@ -202,7 +202,10 @@ export default {
     };
   },
   computed: {
-    ...mapState(["isShowLogin"])
+    ...mapState(["isShowLogin"]),
+    remainPercentage() {
+      return Math.floor((this.remain / SUM) * 100);
+    }
   },
   watch: {
     isShowLogin(val) {
@@ -230,15 +233,11 @@ export default {
         this.generateOrder();
       }
     },
-    updateRemain() {
-      let historyRemain = localStorage.get("historyRemain");
-      if (historyRemain && +historyRemain > 100) {
-        historyRemain--;
-      } else {
-        historyRemain = Math.floor(Math.random() * (200 - 100) + 100);
+    async updateRemain() {
+      const res = await getRemainNum();
+      if (res) {
+        this.remain = res;
       }
-      this.remain = historyRemain;
-      localStorage.set("historyRemain", historyRemain);
     },
     async generateOrder() {
       const res = await create();

src/views/Consultant/Exclusive/index.vue

@@ -57,7 +57,7 @@
         </div>
         <cr-divider :style="{ marginBottom: 0 }" />
       </card>
-      <card title="芒果保险·1对1保险顾问来帮您?">
+      <card title="芒果保险·1对1保险顾问来帮您">
         <div class="cul-odds-list">
           <div class="cul-odds-list-item" v-for="(item, index) in oddsInsureList" :key="index">
             <div class="cul-odds-list-title">
@@ -126,7 +126,7 @@ export default {
           ]
         },
         {
-          title: "省钱",
+          title: "投保后",
           children: [["协助理赔:", "申请理赔时，理赔专家全程协助"]]
         }
       ]

src/views/Consultant/Question/index.vue

@@ -32,17 +32,16 @@
             :radio-data="insuredOptions"
             v-show="currentStep === 0"
           />
-          <cr-date-picker
-            ref="birthday"
-            @change="
-              (picker, value) => {
-                onPickerChange(picker, value, 'birthday');
-              }
-            "
+          <date-picker
             v-show="currentStep === 1"
-            item-height="35"
-            :later="endYear"
+            v-model="formBirth"
+            type="date"
+            :min-date="minDate"
+            :max-date="maxDate"
+            @change="onPickerChange('', 'birthday')"
             :show-toolbar="false"
+            tem-height="35"
+            visible-item-count="5"
           />
           <cr-radio-btn
             v-model="formData.socialSecurity"
@@ -152,29 +151,35 @@
 </template>
 
 <script>
+import DatePicker from "vant/lib/datetime-picker";
+import "vant/lib/datetime-picker/style";
+import moment from "moment";
 import CrRadioBtn from "@/components/CrRadioBtn";
 import Card from "@/components/Card";
 import localStorage from "@/service/localStorage";
 import areaList from "@qg/cherry-ui/src/area/demo/china";
 import { subCulQus } from "@/api/consultant";
 
-const CURRENT_TIME = new Date();
-const CURRENT_YEAR = CURRENT_TIME.getFullYear();
-const START_YEAR = 1949;
-const END_YEAR = CURRENT_YEAR;
+const START_YEAR = moment(new Date())
+  .subtract(65, "years")
+  .format("YYYY-MM-DD");
+const END_YEAR = moment(new Date())
+  .subtract(18, "years")
+  .format("YYYY-MM-DD");
 
 export default {
   name: "ConsultantQuestion",
   components: {
     Card,
-    CrRadioBtn
+    CrRadioBtn,
+    DatePicker
   },
   data() {
     return {
       isLogin: localStorage.get("mongoToken"),
       areaList,
       formData: {
-        birthday: "",
+        birthday: "1990-01-01",
         socialSecurity: "",
         annualIncome: "10万",
         loan: "无房贷",
@@ -184,8 +189,9 @@ export default {
         gender: "",
         relation: ""
       },
-      startYear: CURRENT_YEAR - START_YEAR,
-      endYear: END_YEAR - CURRENT_YEAR,
+      formBirth: new Date("1990-01-01"),
+      minDate: new Date(START_YEAR),
+      maxDate: new Date(END_YEAR),
       currentStep: 0,
       showSubState: false,
       stepTips: [
@@ -276,9 +282,6 @@ export default {
   watch: {
     currentStep(val) {
       this.$forceUpdate();
-      if (val === 1) {
-        this.$refs["birthday"].refreshColumns();
-      }
       if (val === 3) {
         this.$refs["income"].refreshColumns();
       }
@@ -314,7 +317,7 @@ export default {
     },
     onPickerChange(picker, value, type) {
       if (type === "birthday") {
-        value = value.map(item => item[0]).join("-");
+        value = moment(this.formBirth).format("YYYY-MM-DD");
       }
       if (type === "annualIncome" || type === "loan") {
         value = value[0];

src/views/Goods/Detail/AIDetail.vue

@@ -255,7 +255,8 @@ export default {
     },
     nextStep() {
       this.generateFormData();
-      this.generateOrder();
+      this.goInsureState = false;
+      this.generateOrder("ai");
     },
     generateFormData() {
       const {

src/views/Goods/Detail/LIDetail.vue

@@ -86,7 +86,14 @@
     </popup-with-iframe>
     <div style="position: relative;z-index: 204;">
       <cr-popup v-model="showCalDate" position="bottom">
-        <cr-date-picker @confirm="onBirthConfirm" ref="birthDatePicker" />
+        <date-picker
+          v-model="calBirth"
+          type="date"
+          :min-date="minDate"
+          :max-date="maxDate"
+          @confirm="onBirthConfirm"
+          @cancel="showCalDate = false"
+        />
       </cr-popup>
     </div>
   </cr-form>
@@ -96,6 +103,9 @@
 /**
  * @description: 华贵大麦2020定期寿险 Life insurance
  */
+import DatePicker from "vant/lib/datetime-picker";
+import "vant/lib/datetime-picker/style";
+import moment from "moment";
 import CrRadioBtn from "@/components/CrRadioBtn";
 import Card from "@/components/Card";
 import Copyright from "@/components/Copyright";
@@ -117,6 +127,13 @@ import detailLoginMixin from "./modules/detailLogin.mixin";
 
 import Detail from "@/api/detail.huagui.shouxian";
 import { trail, list } from "@/api/product";
+const START_YEAR = moment(new Date())
+  .subtract(60, "years")
+  .format("YYYY-MM-DD");
+const END_YEAR = moment(new Date())
+  .subtract(18, "years")
+  .format("YYYY-MM-DD");
+
 export default {
   name: "GoodsDetail-LI",
   components: {
@@ -137,7 +154,8 @@ export default {
     PlanTip,
     NavTab,
     ProtocolRead,
-    CalInsuredFee
+    CalInsuredFee,
+    DatePicker
   },
   mixins: [detailLoginMixin],
   data() {
@@ -152,10 +170,12 @@ export default {
       formData: {
         payType: "1"
       },
+      minDate: new Date(START_YEAR),
+      maxDate: new Date(END_YEAR),
       read: true,
       showLayer: false,
       showCalDate: false,
-      calDateRefresh: false
+      calBirth: new Date("1990-01-01")
     };
   },
   watch: {
@@ -199,17 +219,11 @@ export default {
   },
   methods: {
     showBirthPickerHandler() {
-      if (!this.calDateRefresh && this.$refs["birthDatePicker"]) {
-        this.calDateRefresh = true;
-        setTimeout(() => {
-          this.$refs["birthDatePicker"].refreshColumns();
-        });
-      }
       this.showCalDate = true;
     },
-    onBirthConfirm(p, e) {
+    onBirthConfirm(val) {
       this.showCalDate = false;
-      this.$set(this.formData, "birth", e);
+      this.$set(this.formData, "birth", moment(val).format("YYYY-MM-DD"));
     },
     openIframePupop(index) {
       if (index === 4) {

src/views/Goods/Detail/MIDetail.vue

@@ -50,7 +50,7 @@
       :url="pupopData.url"
     >
       <cps-process-detail v-if="currentPupopIndex === 5" :process-data="processDetail" />
-      <cps-rate v-if="currentPupopIndex === 6" :rate-data="rateInfo" />
+      <cps-rate v-if="currentPupopIndex === 6" :rate-data="rateInfo" :is-mi="true" />
     </popup-with-iframe>
     <go-insure-dialog
       v-model="goInsureState"
@@ -251,7 +251,8 @@ export default {
     },
     nextStep() {
       this.generateFormData();
-      this.generateOrder();
+      this.goInsureState = false;
+      this.generateOrder("mi");
     },
     generateFormData() {
       if (!this.formData.socialSecurity) {

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,9 +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
   },
@@ -95,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 && val && 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/CpsRate.vue

@@ -2,7 +2,12 @@
   <div class="rate-container">
     <cr-sticky class="rate-head">
       <cr-radio-btn v-model="titleIndex" :radio-data="titleOptions" />
-      <cr-tabbar v-model="amountIndex" active-color="#333" inactive-color="#666" v-if="!isAi">
+      <cr-tabbar
+        v-model="amountIndex"
+        active-color="#333"
+        inactive-color="#666"
+        v-if="!isAi && !isMi"
+      >
         <cr-tabbar-item v-for="(item, index) in amountOptions" :key="index">
           {{ item }}
         </cr-tabbar-item>
@@ -12,9 +17,9 @@
       <table class="table rate-table rate-table-padding" v-if="!isAi">
         <thead>
           <tr>
-            <th style="width: 40%">投保年龄</th>
-            <th style="width: 30%">男</th>
-            <th style="width: 30%">女</th>
+            <th style="width: 40%">{{ thOptions[0] }}</th>
+            <th style="width: 30%">{{ thOptions[1] }}</th>
+            <th style="width: 30%">{{ thOptions[2] }}</th>
           </tr>
         </thead>
         <tbody>
@@ -64,6 +69,10 @@ export default {
     isAi: {
       type: Boolean,
       default: false
+    },
+    isMi: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -81,23 +90,35 @@ export default {
         };
       });
     },
+    thOptions() {
+      const { rateData, titleIndex } = this;
+      return rateData[titleIndex || 0].th;
+    },
     amountOptions() {
       const { rateData, titleIndex } = this;
       if (this.isAi) {
         return [];
+      } else if (this.isMi) {
+        return [];
       } else {
-        const _length = rateData[titleIndex].list.length;
-        return rateData[titleIndex].list.map((item, index) => `${_length - index}0万保额`);
+        const _length = rateData[titleIndex || 0].list.length;
+        return rateData[titleIndex || 0].list.map((item, index) => `${_length - index}0万保额`);
       }
     },
     listOptions() {
       if (this.isAi) {
         return [];
+      } else if (this.isMi) {
+        const { rateData, titleIndex } = this;
+        return {
+          age: rateData[titleIndex || 0].age,
+          list: rateData[titleIndex || 0].list
+        };
       } else {
         const { rateData, titleIndex, amountIndex } = this;
         return {
-          age: rateData[titleIndex].age,
-          list: rateData[titleIndex].list[amountIndex]
+          age: rateData[titleIndex || 0].age,
+          list: rateData[titleIndex || 0].list[amountIndex]
         };
       }
     }

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

@@ -20,13 +20,14 @@ export default {
   },
   methods: {
     ...mapActions(["setIsLoading", "setIsPayWait"]),
-    async generateOrder() {
+    async generateOrder(detailType) {
       this.setIsLoading(true);
       const res = await placeOrder.create({
         ...this.subFormData
       });
       if (res) {
         this.orderInfo = res;
+        detailType && localStorage.remove(detailType + "DetailFormData");
         this.goPay();
       }
     },
@@ -49,8 +50,9 @@ export default {
       this.setIsPayWait(true);
       const res = await placeOrder.pay(params);
       if (res) {
-        let payInfo = {
-          mock: true,
+        let payInfo = "";
+        if (res.payUrl) {
+          payInfo = {
             url: res.payUrl,
             params: {
               ...orderInfo,
@@ -58,8 +60,17 @@ export default {
               state: 1
             }
           };
-        if (tradeType === "JSAPI") {
+        } else if (tradeType === "JSAPI") {
           payInfo = res.payInfo;
+        } else {
+          payInfo = {
+            url: res.payUrl,
+            params: {
+              ...orderInfo,
+              tradeType,
+              state: 1
+            }
+          };
         }
         payByWay(tradeType, payInfo).then(() => {
           this.getPayResult();

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

+export default {
+  data() {
+    return {
+      ageIndexCache: "",
+      isAgeIndexChange: false
+    };
+  },
+  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;
+      let _index = 0;
+      const ageRangeList = [
+        [18, 35],
+        [31, 35],
+        [36, 40],
+        [41, 45],
+        [46, 50],
+        [51, 55],
+        [56, 60]
+      ];
+      // 特殊情况
+      if (31 <= age && age <= 35) {
+        _index = 1;
+      } else {
+        _index = ageRangeList.findIndex(item => item[0] <= age && age <= item[1]);
+      }
+      if (this.ageIndexCache !== _index) {
+        this.ageIndexCache = _index;
+        this.isAgeIndexChange = true;
+      } else {
+        this.isAgeIndexChange = false;
+      }
+      return _index;
+    },
+    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/Goods/Inform/index.vue

@@ -58,7 +58,8 @@ export default {
         this.$router.push({ path: "/policy/add", query: { userInfoSecId } });
       } else {
         // this.generateFormData();
-        this.generateOrder();
+        // TODO 目前只有一种在当前页支付的险种，先写死
+        this.generateOrder("cii");
       }
     }
   }

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="生效日期" />
@@ -399,11 +405,11 @@
       </cr-cell-group>
       <cr-cell-group title="续费银行账户">
         <cr-field
-          v-model="formData.holderUserInfo.bankCardName"
+          :value="formData.holderUserInfo.name"
           name="insuredUserInfo_bankCardName"
+          disabled
           label="持卡人"
           placeholder="请填写持卡人姓名"
-          :rules="[{ required: true, message: '请填写持卡人姓名' }]"
         />
         <cr-field
           v-model="formData.holderUserInfo.bankCardCode"
@@ -492,13 +498,15 @@ 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";
 
 import localStorage from "@/service/localStorage";
 import { mapState, mapActions } from "vuex";
 import Detail from "@/api/detail.huagui.shouxian";
 import { list, trail } from "@/api/product";
 import { getFamilyList } from "@/api/user";
-import { parseTime } from "@/service/utils";
 import {
   isIdNo,
   isChineseName,
@@ -525,7 +533,7 @@ const {
 } = JSON.parse(JSON.stringify(Detail));
 export default {
   name: "AddPolicy",
-  mixins: [detailPayMixin, autoSaveForm],
+  mixins: [detailPayMixin, autoSaveForm, liCalFee],
   components: {
     GoodAction,
     CrRadioBtn,
@@ -573,7 +581,7 @@ export default {
       termOptions,
       paywayOptions,
       benefitOptions,
-      insuredAmountOptions,
+      countOptions: insuredAmountOptions,
       bankInfo,
       selfInfoReadonly: false,
       infoReadonly: false,
@@ -634,6 +642,7 @@ export default {
         } = oldVal.productItem;
         let idNoWho = !relation || relation === "1" ? val.holderUserInfo.idNo : idNo;
         let oldidNoWho = !relation || relation === "1" ? oldVal.holderUserInfo.idNo : oldIdNo;
+        this.setEffectiveDate();
         if (
           (idNoWho && idNoWho.indexOf("************") === -1 && !isIdNo(idNoWho)) ||
           (idNoWho === oldidNoWho &&
@@ -665,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] || {};
@@ -771,7 +787,8 @@ export default {
       }
       sessionStorage.setItem("policyFormData", JSON.stringify(this.subFormData));
       // this.$router.push({ path: "/goods/inform", query: { url: popupArray[1].url } });
-      this.generateOrder();
+      this.goInsureState = false;
+      this.generateOrder("li");
     },
     relationOptionChange(relation) {
       relation && this.relationChange(relation, this.clearInsured);
@@ -856,10 +873,69 @@ export default {
           ...{ amountInsured, policyPeriod, payPeriod, payType }
         };
       }
-      const nextDate = Date.parse(new Date()) + 86400000;
-      this.formData.effectiveDate = parseTime(nextDate, "{y}-{m}-{d} 00:00:00");
       this.$forceUpdate();
     },
+    getBirthDate(idCard) {
+      let birthday = "";
+      if (idCard) {
+        if (idCard.length == 15) {
+          birthday = "19" + idCard.substr(6, 6);
+        } else if (idCard.length == 18) {
+          birthday = idCard.substr(6, 8);
+        }
+
+        birthday = birthday.replace(/(.{4})(.{2})/, "$1-$2-");
+      }
+      return birthday;
+    },
+    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 "";
+      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()
+        .format("YYYY-MM-DD")
+        .split("-");
+      const nextDate =
+        birthdayArr[1] === currentdayArr[1] && +currentdayArr[2] === +birthdayArr[2] - 1
+          ? moment().format("YYYY-MM-DD 00:00:00")
+          : moment()
+              .add(1, "d")
+              .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 && 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) {

yarn.lock

@@ -780,6 +780,13 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
+"@babel/runtime@7.x":
+  version "7.11.2"
+  resolved "https://registry.npm.taobao.org/@babel/runtime/download/@babel/runtime-7.11.2.tgz?cache=0&sync_timestamp=1596637803941&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fruntime%2Fdownload%2F%40babel%2Fruntime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
+  integrity sha1-9UnBPHVMxAuHZEufqfCaapX+BzY=
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.6":
   version "7.10.5"
   resolved "http://npmprivate.quantgroups.com/@babel%2fruntime/-/runtime-7.10.5.tgz#303d8bd440ecd5a491eae6117fd3367698674c5c"
@@ -886,7 +893,7 @@
   resolved "http://npmprivate.quantgroups.com/@nodelib%2ffs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
-"@qg/cherry-ui@^1.2.1":
+"@qg/cherry-ui@=1.2.1":
   version "1.2.1"
   resolved "http://npmprivate.quantgroups.com/@qg%2fcherry-ui/-/cherry-ui-1.2.1.tgz#5f59ebf0ed677c6d3f41dd04e3b9f6a43811936b"
   integrity sha512-icj5WLUCJswPLF02YtCdppdfSDwQQrFoLxhRFCie2SFffIKVZSMEtSVVuEh2nZv2khPd/cvEISGpmzwDcBS7tw==
@@ -955,6 +962,11 @@
   resolved "http://npmprivate.quantgroups.com/@types%2fq/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
+"@vant/icons@1.2.5":
+  version "1.2.5"
+  resolved "https://registry.npm.taobao.org/@vant/icons/download/@vant/icons-1.2.5.tgz#f3db43c4b300300829e3c4e909beaa33d1cbe786"
+  integrity sha1-89tDxLMAMAgp48TpCb6qM9HL54Y=
+
 "@vue/babel-helper-vue-jsx-merge-props@^1.0.0":
   version "1.0.0"
   resolved "http://npmprivate.quantgroups.com/@vue%2fbabel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.0.0.tgz#048fe579958da408fb7a8b2a3ec050b50a661040"
@@ -5640,6 +5652,11 @@ mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.5"
 
+moment@^2.27.0:
+  version "2.27.0"
+  resolved "http://npmprivate.quantgroups.com/moment/-/moment-2.27.0.tgz#8bff4e3e26a236220dfe3e36de756b6ebaa0105d"
+  integrity sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "http://npmprivate.quantgroups.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -8504,6 +8521,16 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+vant@^2.10.2:
+  version "2.10.2"
+  resolved "https://registry.npm.taobao.org/vant/download/vant-2.10.2.tgz?cache=0&sync_timestamp=1598067578898&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvant%2Fdownload%2Fvant-2.10.2.tgz#f792d8583315c932f4a70051c122904b9c6e5002"
+  integrity sha1-95LYWDMVyTL0pwBRwSKQS5xuUAI=
+  dependencies:
+    "@babel/runtime" "7.x"
+    "@vant/icons" "1.2.5"
+    "@vue/babel-helper-vue-jsx-merge-props" "^1.0.0"
+    vue-lazyload "1.2.3"
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "http://npmprivate.quantgroups.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@@ -8550,6 +8577,11 @@ vue-hot-reload-api@^2.3.0:
   resolved "http://npmprivate.quantgroups.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
+vue-lazyload@1.2.3:
+  version "1.2.3"
+  resolved "https://registry.npm.taobao.org/vue-lazyload/download/vue-lazyload-1.2.3.tgz#901f9ec15c7e6ca78781a2bae4a343686bdedb2c"
+  integrity sha1-kB+ewVx+bKeHgaK65KNDaGve2yw=
+
 vue-loader@^15.9.2:
   version "15.9.3"
   resolved "http://npmprivate.quantgroups.com/vue-loader/-/vue-loader-15.9.3.tgz#0de35d9e555d3ed53969516cac5ce25531299dda"