Implementación de WeChat Official Account Web Payment

1. Añadir referencia de pago js

 <script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

2. El proceso de implementación específico:

1. Primero obtenga el número de orden de pago

2. Obtenga los parámetros de pago de acuerdo con el número de orden de pago

3. Llame a la interfaz getBrandWCPayRequest a través de JavaScript para iniciar una solicitud de pago WeChat, y el usuario ingresa al proceso de pago

4. Después de que el usuario paga con éxito y hace clic en el botón Finalizar, el front-end del comerciante recibirá un valor de retorno de JavaScript. Los comerciantes pueden saltar directamente a la página estática donde el pago se realiza correctamente para su visualización.

5. La oficina administrativa del comerciante recibe la notificación de devolución de llamada de pago exitoso de la plataforma abierta WeChat, marcando el pago exitoso de la orden.

3. Ejemplo de pago

// Asumiendo la recarga del usuario

async chargeClick() {
      if (!this.validaPhone()) return;
      if (!this.userName) {
        this.$toast('请输入会员姓名');
        return;
      }
      if (!this.cashMoney || isNaN(this.cashMoney) || this.cashMoney <= 0) {
        this.$toast('请输入正确金额');
        return;
      }

      if ((this.cashMoney + '').split('.')[1] && (this.cashMoney + '').split('.')[1].length > 2) {
        this.$toast('金额最多输入两位小数');
        return;
      }
      let data = {
        ShopNo: this.shopId, // 门店编号,
        Name: this.userName, //会员姓名,
        Phone: this.userPhone, //手机号,
        RechargeMoney: +this.cashMoney //充值金额
      };
      let res = await customerRecharge(data);
      if (res.IsSuccess) {
        this.getPayParams(res.Result.OuterMiJiRechargeOrderNo);
      }
    },

	//通过支付订单号获取支付参数
    async getPayParams(orderNo) {
      const params = {
        M: false,
        OrderNo: orderNo
      };
      let res = await getwxjsapiparam(params);
      if (res.IsSuccess) {
        this.appParams = res.Result;
        this.initPay();
      }
    },

//获取到支付参数后调用微信支付api 进行支付
initPay() {
      if (typeof WeixinJSBridge == 'undefined') {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
          document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
        }
      } else {
        this.onBridgeReady();
      }
    },

    onBridgeReady() {
      const that = this;

      WeixinJSBridge.invoke('getBrandWCPayRequest', this.appParams, function(res) {
        var msg = res.err_msg.split(':')[1];
        if (msg === 'ok') {
          // that.$toast('支付成功');
          that.$router.replace('/recharge/rechargeSuccess');
        } else if (msg === 'cancel') {
          that.$toast('用户取消支付');
        } else {
          that.$toast(msg);
        }
      });
    },