feat: 支付测试页完成

src/service/pay.service.js

@@ -2,9 +2,12 @@
  * @Description: 支付微信h5, jsapi, 第三方收银台，跳转）
  * @Date: 2020-07-28 15:03:52
  * @LastEditors: gzw
- * @LastEditTime: 2020-07-28 15:20:28
+ * @LastEditTime: 2020-07-29 15:08:38
  */
 
+import { Notify } from "@qg/cherry-ui";
+import qs from "qs";
+
 /**
  * payByWeixinJsapi
  * @description: 微信通过jsapi支付
@@ -12,27 +15,30 @@
  * @param {type}
  * @return:
  */
-export function payByWeixinJsapi() {
+function payByWeixinJsapi(info, callback) {
   function onBridgeReady() {
     // eslint-disable-next-line no-undef
     WeixinJSBridge.invoke(
       "getBrandWCPayRequest",
       {
-        appId: "wx2421b1c4370ec43b", //公众号名称，由商户传入
-        timeStamp: "1395712654", //时间戳，自1970年以来的秒数
-        nonceStr: "e61463f8efa94090b1f366cccfbbb444", //随机串
-        package: "prepay_id=u802345jgfjsdfgsdg888",
+        appId: info.appId, //公众号名称，由商户传入
+        timeStamp: info.timeStamp, //时间戳，自1970年以来的秒数
+        nonceStr: info.nonceStr, //随机串
+        package: `prepay_id=${info.prepayId}&partner_id=${info.partnerId}`,
         signType: "MD5", //微信签名方式：
-        paySign: "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名
+        paySign: info.sign //微信签名
       },
       function(res) {
         if (res.err_msg == "get_brand_wcpay_request:ok") {
           // 使用以上方式判断前端返回,微信团队郑重提示：
           //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
+          callback("ok");
         } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
           // 支付取消
+          callback("cancel");
         } else {
           // 支付失败
+          callback("fail");
         }
       }
     );
@@ -56,8 +62,12 @@ export function payByWeixinJsapi() {
  * @param {type}
  * @return:
  */
-export function payByWeixinH5() {
-  window.location.href = "";
+function payByWeixinH5(info) {
+  if (!info.url) return;
+  const currentPath = encodeURIComponent(
+    window.location.href + qs.stringify(info.params, { encode: true, addQueryPrefix: true })
+  );
+  window.location.href = `${info.url}&redirect_url=${currentPath}`;
 }
 
 /**
@@ -66,6 +76,37 @@ export function payByWeixinH5() {
  * @param {type}
  * @return:
  */
-export function payByThirdPartyCashier() {
-  window.location.href = "";
+function payByThirdPartyCashier(info) {
+  if (!info.url) return;
+  const currentPath = encodeURIComponent(
+    window.location.href + qs.stringify(info.params, { encode: true, addQueryPrefix: true })
+  );
+  window.location.href = `${info.url}&redirect_uri=${currentPath}`;
+}
+
+/**
+ * @description: 支付方式判断， 返回promise
+ * @param {String} type 支付方式，THIRD -> 第三方，MWEB -> H5支付， JSAPI -> jsapi支付，默认支付方式，THIRD
+ * @param {Object/String} payInfo 支付信息
+ * @return {Promise} 回调
+ */
+export function payByWay(type = "THIRD", payInfo) {
+  return new Promise(resolve => {
+    if (type === "JSAPI") {
+      payByWeixinJsapi(payInfo, function(e) {
+        if (e === "ok") {
+          Notify({ type: "success", message: "支付成功" });
+        } else {
+          Notify({ type: "warning", message: "支付失败" });
+        }
+        resolve(e);
+      });
+    } else if (type === "MWEB") {
+      payByWeixinH5(payInfo);
+      resolve();
+    } else {
+      payByThirdPartyCashier(payInfo);
+      resolve();
+    }
+  });
 }

src/views/paytest.vue

 <template>
   <div class="container">
-    <cr-button block type="danger" @click="login">登录</cr-button>
+    <cr-button block type="danger" @click="login" v-if="!mongoToken">登录</cr-button>
     <cr-divider />
-    <cr-button block>生成订单（微信JSAPI支付）</cr-button>
-    <cr-button block>生成订单（微信H5支付）</cr-button>
-    <cr-button block>生成订单（第三方收银台支付）</cr-button>
+    <cr-button block @click="generateOrder('JSAPI')">生成订单（微信JSAPI支付）</cr-button>
+    <cr-button block @click="generateOrder('MWEB')">生成订单（微信H5支付）</cr-button>
+    <cr-button block @click="generateOrder('THRID')">生成订单（第三方收银台支付）</cr-button>
     <cr-divider />
-    <cr-button type="warning" block>调起支付</cr-button>
+    <cr-button type="warning" block @click="goPay">调起支付</cr-button>
     <cr-divider />
     <div class="state">
       <h5>基本信息：</h5>
       <p>当前环境：{{ browerEnv }}</p>
       <p>登录状态：{{ !!mongoToken }}</p>
-      <p v-if="browerEnv === 'weixin'">微信code获取状态：</p>
+      <p>支付方式：{{ tradeType }}</p>
+      <p>支付支付状态：{{ payState }}</p>
+      <p v-if="browerEnv === 'weixin'">微信openId：{{ openId }}</p>
       <cr-divider />
       <h5>登录信息：</h5>
       <p v-for="(item, key) in loginInfo" :key="key">{{ key }}: {{ item }}</p>
@@ -40,14 +42,17 @@
  * @return:
  */
 import { loginByPhone, getwxOpenId } from "@/api/user";
+import { placeOrder } from "@/api/order";
 import cfg from "@/config";
+import { payByWay } from "@/service/pay.service";
+let pollTimer = null;
 export default {
   name: "paytest",
   data() {
     return {
       browerEnv: "",
       xyqbToken: "",
-      mongoToken: "",
+      mongoToken: localStorage.getItem("mongoToken"),
       loginInfo: {
         phoneNo: "18611428880",
         verifyCode: "123456",
@@ -100,12 +105,25 @@ export default {
         autoRenewPolicy: true
       },
       orderInfo: {},
+      tradeType: "",
       openId: localStorage.getItem("openId"),
-      payInfo: {}
+      payInfo: {},
+      payState: "未支付",
+      payBack: 0 // 0未调起支付，1已调起支付
     };
   },
   mounted() {
     this.getCurrentBrowerEnv();
+    this.payBack = this.$route.query.state;
+    if (this.payBack) {
+      const { payOrderNo, payType, tradeType, orderNo } = this.$route.query;
+      this.orderInfo = { payOrderNo, payType, orderNo };
+      this.tradeType = tradeType;
+      this.getPayState();
+    }
+  },
+  destroyed() {
+    clearTimeout(pollTimer);
   },
   methods: {
     async login() {
@@ -142,6 +160,63 @@ export default {
       let val = JSON.stringify(txt);
       val = val.replace(/[{},]/g, "<br />").replace(/"/g, "");
       return val;
+    },
+    async generateOrder(tradeType) {
+      if (!this.mongoToken) {
+        this.$toast("请登录");
+        return;
+      }
+      this.tradeType = tradeType;
+      const res = await placeOrder.create(this.insuredOrderInfo);
+      if (res.code === 0) {
+        this.orderInfo = res.data;
+      }
+    },
+    async goPay() {
+      const { payOrderNo, payType } = this.orderInfo;
+      const { tradeType, orderInfo } = this;
+      if (!payOrderNo) {
+        this.$toast("请先生成订单");
+        return;
+      }
+      const res = await placeOrder.pay({ payOrderNo, payType, tradeType });
+      if (res.code === 0) {
+        let payInfo = {
+          url: res.data.payUrl,
+          params: {
+            ...orderInfo,
+            tradeType,
+            state: 1
+          }
+        };
+        if (tradeType === "JSAPI") {
+          payInfo = res.data.payInfo;
+          payInfo.appId = cfg.wxAppId;
+        }
+        payByWay(tradeType, payInfo).then(() => {
+          this.payBack = 1;
+        });
+      }
+    },
+    getPayState() {
+      pollTimer = setTimeout(() => {
+        const { payOrderNo, payType } = this.orderInfo;
+        placeOrder.polling({ payOrderNo, payType }).then(res => {
+          if (res.code === 0) {
+            const { result, payState } = res.data;
+            if (result) {
+              this.$toast("支付成功");
+              this.payState = "支付成功";
+            } else if (payState) {
+              this.payState = "支付中。。。";
+              this.getPayState();
+            } else {
+              this.payState = "支付失败";
+              return;
+            }
+          }
+        });
+      }, 3000);
     }
   }
 };