vue h5公众号支付

Posted 2021-01-19 lovemiao

调用：this.onBridgeReady(JSON.parse(res.data.data));

onBridgeReady: function (data) {
  let vm = this;
  vm.isPaying = false;
  WeixinJSBridge.invoke(
    ‘getBrandWCPayRequest‘, {
      "appId": data.appId,
      "nonceStr": data.nonceStr,
      "package": data.package,
      "signType": ‘MD5‘,
      "timeStamp": data.timeStamp,
      "paySign": data.sign
    },
    function (res) {
      if (res.err_msg === "get_brand_wcpay_request:ok") {
        window.location.replace(‘http://‘ + vm.$route.query.state + ‘一级域名/#/payResult?out_trade_no=‘ + vm.$route.query.majorOrderCode)

      } else if ((res.err_msg === "get_brand_wcpay_request:cancel")) {
        window.location.replace(‘http://‘ + vm.$route.query.state + ‘一级域名/#/orders/wait‘)

      }
    }
  );
},

公众号支付先获取openId：

created() {
  let vm = this;
  if (!this.$route.query.code && !this.$route.query.openId && this.$route.query.payType === ‘wx_app_pay‘) {
    vm.showLoading = true;
    this.axios.post(API.order.queryOpenId).then((res) => {
      if (res.data.status === 0) {
        vm.$router.replace({
          path: ‘/wxAppPay‘,
          query: {
            payType: vm.$route.query.payType,
            majorOrderCode: vm.$route.query.majorOrderCode,
            openId: res.data.data.openId
          }
        })
      } else {
        vm.$router.replace({
          path: ‘/wxAppPay‘,
          query: {payType: vm.$route.query.payType, majorOrderCode: vm.$route.query.majorOrderCode}
        })
      }
    });
  } else if (this.$route.query.payType !== ‘wx_app_pay‘) {
    vm.hasOpenId = true;
  }
}

wxAppPay.vue

<template>
  <div class="pay-box"></div>
</template>

<script>
  export default {
    name: "wxAppPay",
    data() {
      return {}
    },
    mounted() {
      let vm = this;
      let local = window.location.href;
      if (this.$route.query.openId) {
        let token = localStorage.getItem(‘token‘);
        let majorOrderCode = vm.$route.query.majorOrderCode;
        let host = local.split(‘.‘)[0];
        let state = host.split(‘//‘)[1];
        window.location.replace(‘http://一级域名/#/pay?payType=wx_app_pay&majorOrderCode=‘ + majorOrderCode +
          ‘&state=‘ + state + ‘&token=‘ + token + ‘&openId=‘ + vm.$route.query.openId)
      } else {
        if (local.indexOf(‘code‘) === -1) {
          let hasState = local.split(‘.‘)[0];
          let state = hasState.split(‘//‘)[1];
          let majorOrderCode = vm.$route.query.majorOrderCode;
          let token = localStorage.getItem(‘token‘);
          let stateData = state + ‘+‘ + majorOrderCode + ‘+‘ + token;

          window.location.replace(‘https://open.weixin.qq.com/connect/oauth2/authorize?appid=####‘ +
            ‘&redirect_uri=‘ + encodeURIComponent(‘http://一级域名/#/wxAppPay‘) +
            ‘&response_type=code&scope=snsapi_base&state=‘ + stateData + ‘&connect_redirect=1#wechat_redirect‘)

        } else {
          let hasCode = local.split(‘code=‘)[1];
          let code = hasCode.split(‘&‘)[0];
          let hasState = local.split(‘state=‘)[1];

          if (hasState.indexOf(‘#‘) > -1) {
            hasState = hasState.split(‘#‘)[0]
          }

          let state = hasState.split(‘+‘)[0];
          let majorOrderCode = hasState.split(‘+‘)[1];
          let token = hasState.split(‘+‘)[2];

          localStorage.setItem(‘token‘, token);
          window.location.replace(‘http://一级域名/#/pay?payType=wx_app_pay&code=‘ + code + ‘&majorOrderCode=‘ +
            majorOrderCode + ‘&state=‘ + state)
        }
      }

    },
    methods: {},
    filters: {}
  }
</script>

<style scoped>
  .pay-box {
    width: 750px;
    height: 100%;
    background: #f6f6f6;
  }
</style>