H5页面微信支付

<template>
  <div class="pay_wrap">
    <!-- 待支付 -->
    <div v-if="waitPay">
      <div class="pay_list">
        <div class="shop_number">
          订单号：<span>{{ orderId }}</span>
        </div>
        <div class="money">
          ￥<span>{{ payFee }}</span>
        </div>
      </div>
      <div class="payee">
        <span>收款方</span>
        <span>{{ appName }}</span>
      </div>
      <div class="pay_button">
        <el-button :disabled="!finish" type="primary" @click="payWx">立即支付</el-button>
      </div>
    </div>
    <!-- 支付成功 -->
    <el-col v-else :sm="12" :lg="6">
      <el-result icon="success" title="支付成功" sub-title="支付成功，点击确定返回页面">
        <template #extra>
          <el-button type="primary" @click="callback">确定</el-button>
        </template>
      </el-result>
    </el-col>
  </div>
</template>
<script setup>
import {
  getAppId,
  getOrderId,
  setOpenid,
  payOrder,
} from "../../utils/api/courseManage.js";
let orderId = ref(""); // 订单id
let payFee = ref(0); // 金额
let appName = ref(""); // 收款名称
let code = ref(""); // 微信code
let finish = ref(false); // 完成 获取到所有需要的支付参数后变为true
let waitPay = ref(true); // 待支付状态

onBeforeMount(() => {
  // ---------------1.获取浏览器url截取orderId---------------
  let queryString = new URL(window.location.href);
  let params = new URLSearchParams(queryString.search);
  orderId.value = params.get("orderId");

  // ---------------2.获取appid 是一个固定值 用于微信链接跳转---------------
  getAppId().then((res) => {
    // res.data.appId
    // 获取order详情
    getOrderId({ orderId: orderId.value }).then((orederRes) => {
      payFee.value = orederRes.data.payFee / 100;
      appName.value = orederRes.data.appName;
      if (window.location.href.toString().indexOf("code") == -1) {
        // http://192.168.1.117:3000/payment_h5?orderId=1567545721803567105
        window.location.href =
          `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${res.data.appId}&redirect_uri=` +
          window.location.href +
          `&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
      } else {
        code.value = getParam("code");
        setOpenid({ code: code.value, orderId: orderId.value }).then(
          (openRes) => {
            if (openRes.code == 200) {
              finish.value = true;
            }
          }
        );
      }
    });
  });
});

// 截取code
const getParam = (paraName, href) => {
  var reg = new RegExp("[?&]+" + paraName + "=([^&]+)");
  let url = href || location.href;
  if (url && reg.test(url)) {
    return decodeURIComponent(RegExp["$1"]).replace(/\+/g, " ");
  }
  return null;
};

// 支付 获取支付信息
const payWx = () => {
  payOrder({ orderId: orderId.value }).then((res) => {
    getRequestPayment(res.data);
  });
};

// 微信支付
const getRequestPayment = (data) => {
  function onBridgeReady() {
    WeixinJSBridge.invoke(
      "getBrandWCPayRequest",
      {
        appId: data.appId, //公众号ID，由商户传入
        timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数
        nonceStr: data.nonceStr, //随机串
        package: data.packageValue,
        signType: data.signType, //微信签名方式：
        paySign: data.paySign, //微信签名
      },
      function (res) {
        // alert(res.err_msg)
        if (res.err_msg == "get_brand_wcpay_request:ok") {
          // 使用以上方式判断前端返回,微信团队郑重提示：
          //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          waitPay.value = false;
        }
      }
    );
  }
  if (typeof WeixinJSBridge == "undefined") {
    if (document.addEventListener) {
      document.addEventListener("WeixinJSBridgeReady", onBridgeReady, false);
    } else if (document.attachEvent) {
      document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
      document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
    }
  } else {
    onBridgeReady();
  }
};

// 关闭页面返回
const callback = () => {
  document.addEventListener(
    "WeixinJSBridgeReady",
    function () {
      WeixinJSBridge.call("closeWindow");
    },
    false
  );
  WeixinJSBridge.call("closeWindow");
};
</script>
<style lang="scss"  scoped>
.pay_wrap {
  font-size: 0.16rem;
  .pay_list {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    .shop_number {
      margin: 0.2rem;
      span {
        font-weight: bold;
      }
    }
    .money {
      font-weight: bold;
      margin-bottom: 0.2rem;
      span {
        font-size: 0.35rem;
      }
    }
  }
  .payee {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: 0.15rem;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
  }
  .pay_button {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.15rem;
    .el-button {
      width: 100%;
      height: 0.4rem;
      margin-top: 0.3rem;
    }
  }
}
</style>