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 = {};
     }
   }
 };