feat: 支付流程对接

src/api/detail.huagui.shouxian.js

@@ -4,7 +4,7 @@
  * @Description: 华贵大麦2020定期寿险
  * @Date: 2020-07-27 15:46:37
  * @LastEditors: gzw
- * @LastEditTime: 2020-08-06 14:57:34
+ * @LastEditTime: 2020-08-06 16:09:06
  */
 
 import goodsBg from "@/assets/images/goods/detail/shouxian/bg.png";
@@ -20,6 +20,7 @@ export default {
     company: "",
     title: "大麦2020定期寿险",
     price: [155, "元/年起"],
+    subPrice: [155, "元/年", "剩余", "(共9年)"],
     insuredNum: 0,
     stamp: false
   },

src/assets/icons/svg/less.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="32px" height="32.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#787eff" d="M117.734106 458.213254 906.212134 458.213254C925.995765 458.213254 959.972 482.279754 959.972 511.97312 959.972 541.666486 925.995765 565.732986 906.212134 565.732986L117.734106 565.732986C97.950475 565.732986 63.97424 541.666486 63.97424 511.97312 63.97424 482.279754 97.950475 458.213254 117.734106 458.213254Z" /></svg>
\ No newline at end of file

src/assets/icons/svg/plus.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="32px" height="32.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#787eff" d="M451.76 451.76V60.24a60.24 60.24 0 0 1 120.48 0v391.52h391.52a60.24 60.24 0 0 1 0 120.48h-391.52v391.52a60.24 60.24 0 0 1-120.48 0v-391.52H60.24a60.24 60.24 0 0 1 0-120.48h391.52z" /></svg>
\ No newline at end of file

src/components/Stepper.vue

+<template>
+  <div class="stepper">
+    <button type="button" class="stepper-btn decrease" @click="optionClick('decrease')">
+      <slot name="decrease">
+        <svg-icon icon-class="less" />
+      </slot>
+    </button>
+    <div class="stepper-lebel">{{ currentLabel }}</div>
+    <button type="button" class="stepper-btn increase" @click="optionClick('increase')">
+      <slot name="increase">
+        <svg-icon icon-class="plus" />
+      </slot>
+    </button>
+  </div>
+</template>
+
+<script>
+/**
+ * @description: 面板组件
+ * @param {type}
+ * @return:
+ */
+const OPTION_CLICK_EVENT = "click";
+const CHANGE_EVENT = "input";
+export default {
+  name: "Stepper",
+  props: {
+    value: {
+      type: String,
+      default: ""
+    },
+    option: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+    // increase: {
+    //   txt: "",
+    //   icon: ""
+    // },
+    // decrease: {
+    //   txt: "",
+    //   icon: ""
+    // }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        this.current = this.option.findIndex(item => item.value === val);
+      }
+    },
+    current(val) {
+      this.$emit(CHANGE_EVENT, this.option[val].value);
+    }
+  },
+  computed: {
+    currentLabel() {
+      return this.option[this.current].label;
+    }
+  },
+  data() {
+    return {
+      current: ""
+    };
+  },
+  methods: {
+    optionClick(type, index) {
+      const { option, current } = this;
+      if (type === "increase" && current < option.length - 1) {
+        this.current = current + 1;
+      }
+      if (type === "decrease" && current > 0) {
+        this.current = current - 1;
+      }
+      this.$emit(OPTION_CLICK_EVENT, { type, index, value: option[current] });
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@import "../style/var.less";
+.stepper {
+  display: flex;
+  align-items: center;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+  &-btn {
+    background-color: #f4f5ff;
+    color: #787eff;
+    text-align: center;
+    border: 0;
+    outline: none;
+    height: 24px;
+    .svg-icon {
+      vertical-align: -1px;
+      width: 10px;
+      height: 10px;
+    }
+    &.decrease {
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
+    }
+    &.increase {
+      border-top-right-radius: 8px;
+      border-bottom-right-radius: 8px;
+    }
+  }
+  &-lebel {
+    color: #aaa;
+    font-size: 14px;
+    height: 24px;
+    line-height: 24px;
+    padding: 0 10px;
+  }
+}
+</style>

src/views/Goods/Detail/AIDetail.vue

@@ -85,12 +85,14 @@ import InsurePersonForm from "./modules/InsurePersonForm";
 import AutoDeduct from "./modules/AutoDeduct";
 import ProtocolRead from "./modules/ProtocolRead";
 import NavTab from "./modules/NavTab";
+import detailPayMixin from "./modules/detailPay.mixin";
 
 import Detail from "@/api/detail.zhongan.yiwai";
 import { detail, trail } from "@/api/product";
 
 export default {
   name: "GoodsDetail-AI",
+  mixins: [detailPayMixin],
   components: {
     DetailHeader,
     DetailFooter,
@@ -207,7 +209,11 @@ export default {
       this.$notify({ type: "warning", message: errors[0].message });
     },
     nextStep() {
-      // 支付
+      this.generateFormData();
+      this.generateOrder();
+    },
+    generateFormData() {
+      this.subFromData = {};
     },
     async getDetail() {
       this.goodId = this.$route.query.id;

src/views/Goods/Detail/MIDetail.vue

@@ -82,12 +82,14 @@ import InsurePersonForm from "./modules/InsurePersonForm";
 import AutoDeduct from "./modules/AutoDeduct";
 import ProtocolRead from "./modules/ProtocolRead";
 import NavTab from "./modules/NavTab";
+import detailPayMixin from "./modules/detailPay.mixin";
 
 import { detail, trail } from "@/api/product";
 import Detail from "@/api/detail.taikang.yiliaobaozhang";
 
 export default {
   name: "GoodsDetail-MI",
+  mixins: [detailPayMixin],
   components: {
     DetailHeader,
     DetailFooter,
@@ -213,7 +215,11 @@ export default {
       this.$notify({ type: "warning", message: errors[0].message });
     },
     nextStep() {
-      // 支付
+      this.generateFormData();
+      this.generateOrder();
+    },
+    generateFormData() {
+      this.subFromData = {};
     },
     async getDetail() {
       this.goodId = this.$route.query.id;

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

+import { payByWay } from "@/service/pay";
+import { isXyqb, isWeixinBrower } from "@/service/validation";
+import { placeOrder } from "@/api/product";
+
+export default {
+  data() {
+    return {
+      subFromData: {}, // 组装好的数据
+      orderInfo: {},
+      tradeType: ""
+      // customTradeType: ""
+    };
+  },
+  created() {
+    this.tradeType = this.customTradeType ?? (isXyqb ? "MWEB" : isWeixinBrower ? "JSAPI" : "MWEB");
+  },
+  methods: {
+    async generateOrder() {
+      const res = await placeOrder.create(...this.subFromData);
+      if (res) {
+        this.orderInfo = res;
+        this.goPay();
+      }
+    },
+    async goPay() {
+      const { tradeType, orderInfo } = this;
+      const { payOrderNo, payType, orderNo } = orderInfo;
+      if (!payOrderNo) {
+        this.$toast("请先生成订单");
+        return;
+      }
+      const res = await placeOrder.pay({ payOrderNo, payType, tradeType });
+      if (res) {
+        let payInfo = {
+          url: res.data.payUrl,
+          params: {
+            ...orderInfo,
+            tradeType,
+            state: 1
+          }
+        };
+        if (tradeType === "JSAPI") {
+          payInfo = res.data.payInfo;
+        }
+        payByWay(tradeType, payInfo).then(() => {
+          this.$router.push({ url: "/policy/detail", query: { id: orderNo } });
+        });
+      }
+    }
+  }
+};

src/views/Goods/Inform/index.vue

@@ -22,11 +22,10 @@
 
 <script>
 import card from "@/components/Card";
-import { placeOrder } from "@/api/product";
-import { payByWay } from "@/service/pay";
-
+import detailPayMixin from "../Detail/modules/detailPay.mixin";
 export default {
   name: "GoodsInform",
+  mixins: [detailPayMixin],
   components: {
     card
   },
@@ -40,39 +39,11 @@ export default {
   },
   methods: {
     conform() {
+      this.generateFormData();
       this.generateOrder();
     },
-    async generateOrder() {
-      const res = await placeOrder.create();
-      if (res) {
-        this.orderInfo = res;
-        this.goPay();
-      }
-    },
-    async goPay() {
-      const { tradeType, orderInfo } = this;
-      const { payOrderNo, payType } = orderInfo;
-      if (!payOrderNo) {
-        this.$toast("请先生成订单");
-        return;
-      }
-      const res = await placeOrder.pay({ payOrderNo, payType, tradeType });
-      if (res) {
-        let payInfo = {
-          url: res.data.payUrl,
-          params: {
-            ...orderInfo,
-            tradeType,
-            state: 1
-          }
-        };
-        if (tradeType === "JSAPI") {
-          payInfo = res.data.payInfo;
-        }
-        payByWay(tradeType, payInfo).then(() => {
-          this.payBack = 1;
-        });
-      }
+    generateFormData() {
+      this.subFromData = {};
     }
   }
 };

src/views/Policy/Add/index.vue

@@ -3,114 +3,142 @@
     <div class="policy-tip-wrap">
       <div class="policy-tip">您所填写的数据，仅用于投保，平台将严格保密</div>
     </div>
-    <cr-form class="policy-form" scroll-to-error @submit="onFormSubmit" @failed="onFormFailed">
+    <cr-form
+      ref="policyForm"
+      class="policy-form"
+      scroll-to-error
+      @submit="onFormSubmit"
+      @failed="onFormFailed"
+    >
       <cr-cell-group title="投保人信息">
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.holderUserInfo.name"
+          name="holderUserInfo.name"
           label="姓名"
           placeholder="请输入投保人姓名"
           :rules="[{ require: true, message: '请输入投保人姓名' }]"
         />
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.holderUserInfo.idNo"
+          name="holderUserInfo.idNo"
           label="身份证号"
           placeholder="请填写投保人身份证号"
           :rules="[{ require: true, message: '请填写投保人身份证号' }]"
         />
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.holderUserInfo.phoneNo"
+          name="formData.holderUserInfo.phoneNo"
           type="tel"
           label="手机号"
           placeholder="请填写投保人手机号"
           :rules="[{ require: true, message: '请填写投保人手机号' }]"
         />
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.holderUserInfo.email"
+          name="holderUserInfo.email"
           type="email"
           label="电子邮箱"
           placeholder="用户接收电子保单"
           :rules="[{ require: true, message: '请填写电子邮箱' }]"
         />
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.holderUserInfo.annualIncome"
+          name="holderUserInfo.annualIncome"
           label="年收入"
           type="digit"
           placeholder="请输入投保人年收入"
           :rules="[{ require: true, message: '请输入投保人年收入' }]"
         />
         <cr-field
-          name="selfName"
+          v-model="formData.holderUserInfo.addressCode"
+          name="holderUserInfo.addressCode"
           label="居住省市"
           :rules="[{ require: true, message: '请选择投保人居住省市' }]"
         >
           <template #input>
-            <popup-area-picker v-model="formData.text" placeholder="请选择投保人居住省市" />
+            <popup-area-picker
+              v-model="formData.holderUserInfo.addressCode"
+              placeholder="请选择投保人居住省市"
+            />
           </template>
         </cr-field>
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.holderUserInfo.addressDetail"
+          name="holderUserInfo.addressDetail"
           label="详细地址"
           placeholder="请输入居住详细地址"
           :rules="[{ require: true, message: '请输入居住详细地址' }]"
         />
         <cr-field
-          name="selfName"
+          v-model="formData.holderUserInfo.occupation"
+          name="holderUserInfo.occupation"
           label="职业"
           :rules="[{ require: true, message: '请选择投保人职业' }]"
         >
           <template #input>
             <popup-picker
               :picker-data="['老师', '工人']"
-              v-model="formData.text"
+              v-model="formData.holderUserInfo.occupation"
               placeholder="请选择投保人职业"
             />
           </template>
         </cr-field>
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.holderUserInfo.longTerm"
+          name="holderUserInfo.longTerm"
           label="身份证有效期"
           :rules="[{ require: true, message: '请选择身份证有效期' }]"
         >
           <template #input>
-            <cr-radio-btn v-model="formData.planValue" :radio-data="idCardInvaildOptions" />
+            <cr-radio-btn
+              v-model="formData.holderUserInfo.longTerm"
+              :radio-data="idCardInvaildOptions"
+            />
           </template>
         </cr-field>
         <cr-field
-          name="selfName"
+          v-model="formData.holderUserInfo.validEnd"
+          name="holderUserInfo.validEnd"
           label="有效期至"
           :rules="[{ require: true, message: '请选择您的证件有效止期' }]"
         >
           <template #input>
-            <popup-date-picker v-model="formData.text" placeholder="请选择您的证件有效止期" />
+            <popup-date-picker
+              v-model="formData.holderUserInfo.validEnd"
+              placeholder="请选择您的证件有效止期"
+            />
           </template>
         </cr-field>
       </cr-cell-group>
       <cr-cell-group title="被保人信息">
-        <cr-field v-model="formData.text" name="selfName" label="为谁投保">
+        <cr-field
+          v-model="formData.insuredUserInfo.relation"
+          name="insuredUserInfo.relation"
+          label="为谁投保"
+        >
           <template #input>
-            <cr-radio-btn v-model="formData.planValue" :radio-data="insuredOptions" />
+            <cr-radio-btn
+              v-model="formData.insuredUserInfo.relation"
+              :radio-data="insuredOptions"
+            />
           </template>
         </cr-field>
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.insuredUserInfo.socialSecurity"
+          name="insuredUserInfo.socialSecurity"
           label="有无社保"
           :rules="[{ require: true, message: '请选择社保状态' }]"
         >
           <template #input>
-            <cr-radio-btn v-model="formData.planValue" :radio-data="socialSecOptions" />
+            <cr-radio-btn
+              v-model="formData.insuredUserInfo.socialSecurity"
+              :radio-data="socialSecOptions"
+            />
           </template>
         </cr-field>
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.insuredUserInfo.height"
+          name="insuredUserInfo.height"
           label="身高"
           type="digit"
           placeholder="请填写被保人身高"
@@ -119,8 +147,8 @@
           <div class="form-unit" slot="button">厘米</div>
         </cr-field>
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.insuredUserInfo.weight"
+          name="insuredUserInfo.weight"
           label="体重"
           type="digit"
           placeholder="请填写被保人体重"
@@ -129,135 +157,156 @@
           <div class="form-unit" slot="button">公斤</div>
         </cr-field>
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.insuredUserInfo.name"
+          name="insuredUserInfo.name"
           label="姓名"
           placeholder="请输入投保人姓名"
           :rules="[{ require: true, message: '请输入投保人姓名' }]"
         />
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.insuredUserInfo.idNo"
+          name="insuredUserInfo.idNo"
           label="身份证号"
           placeholder="请填写投保人身份证号"
           :rules="[{ require: true, message: '请填写投保人身份证号' }]"
         />
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.insuredUserInfo.phoneNo"
+          name="insuredUserInfo.phoneNo"
           label="手机号"
           type="tel"
           placeholder="请填写投保人手机号"
           :rules="[{ require: true, message: '请填写投保人手机号' }]"
         />
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.insuredUserInfo.annualIncome"
+          name="insuredUserInfo.annualIncome"
           label="年收入"
           type="digit"
           placeholder="请输入投保人年收入"
           :rules="[{ require: true, message: '请输入投保人年收入' }]"
         />
         <cr-field
-          name="selfName"
+          v-model="formData.insuredUserInfo.addressCode"
+          name="insuredUserInfo.addressCode"
           label="居住省市"
           :rules="[{ require: true, message: '请选择投保人居住省市' }]"
         >
           <template #input>
-            <popup-area-picker v-model="formData.text" placeholder="请选择投保人居住省市" />
+            <popup-area-picker
+              v-model="formData.insuredUserInfo.addressCode"
+              placeholder="请选择投保人居住省市"
+            />
           </template>
         </cr-field>
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.insuredUserInfo.addressDetail"
+          name="insuredUserInfo.weigaddressDetailht"
           label="详细地址"
           placeholder="请输入居住详细地址"
           :rules="[{ require: true, message: '请输入居住详细地址' }]"
         />
         <cr-field
-          name="selfName"
+          v-model="formData.insuredUserInfo.occupation"
+          name="insuredUserInfo.occupation"
           label="职业"
           :rules="[{ require: true, message: '请选择投保人职业' }]"
         >
           <template #input>
             <popup-picker
               :picker-data="['老师', '工人']"
-              v-model="formData.text"
+              v-model="formData.insuredUserInfo.occupation"
               placeholder="请选择投保人职业"
             />
           </template>
         </cr-field>
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.insuredUserInfo.longTerm"
+          name="insuredUserInfo.longTerm"
           label="身份证有效期"
           :rules="[{ require: true, message: '请选择身份证有效期' }]"
         >
           <template #input>
-            <cr-radio-btn v-model="formData.planValue" :radio-data="idCardInvaildOptions" />
+            <cr-radio-btn
+              v-model="formData.insuredUserInfo.longTerm"
+              :radio-data="idCardInvaildOptions"
+            />
           </template>
         </cr-field>
         <cr-field
-          name="selfName"
+          v-model="formData.insuredUserInfo.validEnd"
+          name="insuredUserInfo.validEnd"
           label="有效期至"
           :rules="[{ require: true, message: '请选择您的证件有效止期' }]"
         >
           <template #input>
-            <popup-date-picker v-model="formData.text" placeholder="请选择您的证件有效止期" />
+            <popup-date-picker
+              v-model="formData.insuredUserInfo.validEnd"
+              placeholder="请选择您的证件有效止期"
+            />
           </template>
         </cr-field>
       </cr-cell-group>
       <cr-cell-group title="保障方案">
         <cr-field
-          name="selfName"
+          v-model="formData.productItem.insuredAmount"
+          name="productItem.insuredAmount"
           label="投保限额"
           :rules="[{ require: true, message: '请选择投保限额' }]"
         >
           <template #input>
-            <cr-stepper v-model="formData.stepper" disable-input :step="10" />
+            <stepper v-model="formData.productItem.insuredAmount" :option="insuredAmountOptions" />
           </template>
         </cr-field>
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.productItem.policyPeriod"
+          name="productItem.policyPeriod"
           label="保险期限"
           :rules="[{ require: true, message: '请选择保险期限' }]"
         >
           <template #input>
-            <cr-radio-btn v-model="formData.planValue" :radio-data="termOptions" />
+            <cr-radio-btn v-model="formData.productItem.policyPeriod" :radio-data="termOptions" />
           </template>
         </cr-field>
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.payPeriod"
+          name="payPeriod"
           label="交费方式"
           :rules="[{ require: true, message: '请选择交费方式' }]"
         >
           <template #input>
-            <cr-radio-btn v-model="formData.planValue" :radio-data="paywayOptions" />
+            <cr-radio-btn v-model="formData.payPeriod" :radio-data="paywayOptions" />
           </template>
         </cr-field>
         <cr-field
-          v-model="formData.text"
-          name="selfName"
-          label="为谁投保"
-          :rules="[{ require: true, message: '请选择为谁投保' }]"
+          v-model="formData.productItem.paymentPeriod"
+          name="productItem.paymentPeriod"
+          label="交费期间"
+          :rules="[{ require: true, message: '请选择交费期间' }]"
         >
           <template #input>
-            <cr-radio-btn v-model="formData.planValue" :radio-data="benefitOptions" />
+            <cr-radio-btn
+              v-model="formData.productItem.paymentPeriod"
+              :radio-data="benefitOptions"
+            />
           </template>
         </cr-field>
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.effectiveDate"
+          name="effectiveDate"
           label="生效日期"
-          :rules="[{ require: true, message: '请选择生效日期' }]"
-        />
+          :rules="[{ require: true, message: '生效日期' }]"
+        >
+          <template #input>
+            <popup-date-picker v-model="formData.effectiveDate" placeholder="请选择生效日期" />
+          </template>
+        </cr-field>
         <cr-field
-          v-model="formData.text"
-          name="selfName"
+          v-model="formData.beneficiaryUser"
+          name="beneficiaryUser"
+          placeholder="请填写受益人"
           label="受益人"
-          :rules="[{ require: true, message: '请选择受益人' }]"
+          :rules="[{ require: true, message: '请填写受益人' }]"
         />
       </cr-cell-group>
       <good-action @leftClick="goInsureState = true" :content="goodActionInfo" />
@@ -294,25 +343,40 @@ import CrRadioBtn from "@/components/CrRadioBtn";
 import PopupPicker from "@/components/PopupPicker";
 import PopupAreaPicker from "@/components/PopupAreaPicker";
 import PopupDatePicker from "@/components/PopupDatePicker";
+import Stepper from "@/components/Stepper";
 import GoInsureDialog from "@/views/Goods/Detail/modules/GoInsureDialog";
+import detailPayMixin from "@/views/Goods/Detail/modules/detailPay.mixin";
 
 import Detail from "@/api/detail.huagui.shouxian";
-
+import { detail, trail } from "@/api/product";
+const { headerInfo, popupArray } = Detail;
 export default {
   name: "AddPolicy",
+  mixins: [detailPayMixin],
   components: {
     GoodAction,
     CrRadioBtn,
     GoInsureDialog,
     PopupPicker,
     PopupAreaPicker,
-    PopupDatePicker
+    PopupDatePicker,
+    Stepper
   },
   data() {
     return {
-      ...Detail,
+      popupArray,
+      headerInfo,
+      calTimer: null,
       goInsureState: false,
-      formData: {},
+      goodActionInfo: {},
+      goodBuyModalInfo: [],
+      formData: {
+        insuredUserInfo: {},
+        holderUserInfo: {},
+        productItem: {
+          insuredAmount: "50万"
+        }
+      },
       formMaskData: {},
       idCardInvaildOptions: [
         { label: "非长期", value: "1" },
@@ -346,19 +410,92 @@ export default {
         { label: "交20年", value: "3" },
         { label: "交30年", value: "4" },
         { label: "一次付清", value: "5" }
+      ],
+      insuredAmountOptions: [
+        { label: "30万", value: "30万" },
+        { label: "50万", value: "50万" },
+        { label: "100万", value: "100万" },
+        { label: "150万", value: "150万" },
+        { label: "200万", value: "200万" },
+        { label: "250万", value: "250万" },
+        { label: "300万", value: "300万" },
+        { label: "350万", value: "350万" }
       ]
     };
   },
-  mounted() {},
+  watch: {
+    headerInfo: {
+      deep: true,
+      handler(val) {
+        const { price, subPrice } = val;
+        this.goodActionInfo = {
+          title: price
+        };
+        this.goodBuyModalInfo = [
+          { title: `${price[2]}保费`, value: `${price[0]}${price[1]}` },
+          { title: `${subPrice[2]}保费`, value: `${subPrice[0]}${subPrice[1]}${subPrice[3]}` }
+        ];
+      }
+    },
+    formDataCpu: {
+      deep: true,
+      handler() {
+        if (this.calTimer) {
+          clearTimeout(this.calTimer);
+        }
+        this.calTimer = setTimeout(() => {
+          this.$refs.policyForm.validate().then(() => {
+            this.calFee();
+          });
+        }, 600);
+      }
+    }
+  },
+  computed: {
+    formDataCpu() {
+      return JSON.parse(JSON.stringify(this.formData));
+    }
+  },
+  mounted() {
+    this.getDetail();
+  },
   methods: {
-    onFormSubmit(values) {
-      console.log("submit", values);
+    onFormSubmit() {
       this.goInsureState = true;
     },
     onFormFailed(errorInfo) {
       const { errors } = errorInfo;
       this.$notify({ type: "warning", message: errors[0].message });
-      this.goInsureState = true;
+    },
+    nextStep() {
+      this.generateFormData();
+      this.generateOrder();
+    },
+    generateFormData() {
+      this.subFromData = {};
+    },
+    async getDetail() {
+      this.goodId = this.$route.query.id;
+      const res = await detail({ productNo: this.goodId });
+      if (res) {
+        this.headerInfo.price[0] = res.firstMonthPrice;
+        this.headerInfo.subPrice[0] = res.price;
+      }
+    },
+    async calFee() {
+      let { price, subPrice } = this.headerInfo;
+      const res = await trail(this.formData);
+      if (res) {
+        price[0] = res.firstPrice;
+        subPrice[0] = res.regularPrice;
+        this.goodActionInfo = {
+          title: price
+        };
+        this.goodBuyModalInfo = [
+          { title: `${price[2]}保费`, value: `${price[0]}${price[1]}` },
+          { title: `${subPrice[2]}保费`, value: `${subPrice[0]}${subPrice[1]}${subPrice[3]}` }
+        ];
+      }
     }
   }
 };