43.微信支付业务

修改代码：

src/pages/Pay/index.vue

<a class="btn" @click="open">立即支付</a>

data() {
      return {
        payInfo: {},
        timer: null,
        //支付状态码
        code: "",
      };
    },

methods: {
//弹出框
      async open() {
        //生成二维(地址)
        let url = await QRCode.toDataURL(this.payInfo.codeUrl);

        //注意路径下面/之前一定要有空格，否则解析失败不展示图
        this.$alert(`<img src=${url} />`, "请你微信支付", {
          dangerouslyUseHTMLString: true,
          //中间布局
          center: true,
          //是否显示取消按钮
          showCancelButton: true,
          //取消按钮的文本内容
          cancelButtonText: "支付遇见问题",
          //确定按钮的文本
          confirmButtonText: "已支付成功",
          //右上角的叉子没了
          showClose: false,
          //关闭弹出框的配置值
          beforeClose: (type, instance, done) => {
            //type:区分取消|确定按钮
            //instance：当前组件实例
            //done:关闭弹出框的方法
            if (type == "cancel") {
              alert("请联系管理员中哥");
              //清除定时器
              clearInterval(this.timer);
              this.timer = null;
              //关闭弹出框
              done();
            } else {
              //判断是否真的支付了
              //开发人员：为了自己方便，这里判断先不要了
              // if (this.code == 200) {
              clearInterval(this.timer);
              this.timer = null;
              done();
              this.$router.push("/paysuccess");
              // }
            }
          },
        });
        //你需要知道支付成功|失败
        //支付成功，路由的跳转，如果支付失败，提示信息
        //定时器没有，开启一个新的定时器
        if (!this.timer) {
          this.timer = setInterval(async () => {
            //发请求获取用户支付状态
            let result = await this.$API.reqPayStatus(this.orderId);
            //如果code==200
            if (result.code == 200) {
              //第一步：清除定时器
              clearInterval(this.timer);
              this.timer = null;
              //保存支付成功返回的code
              this.code = result.code;
              //关闭弹出框
              this.$msgbox.close();
              //跳转到下一路由
              this.$router.push("/paysuccess");
            }
          }, 1000);
        }
      },
}

注意点1：

问题：一定要注意大括号和反斜杠之间要有空格，严格注意语法形式，如下代码，如果中间没有空格，错误展示如图1；如果有空格，正确展示如图2

this.$alert(`<img src=${url} />`, "请你微信支付", {

注意点2：作为项目要一直问，是否支付成功，可能调取接口返回微信码是只有一次调用，但是用户是否支付成功，是需要开启定时器不停的去询问是否支付成功的。

注意点3：

问题：报错如图

答案：因为“获取支付信息”接口返回为201，没有拿到payInfo.codeUrl的值，所以需要手动初始化赋值字符串即可。

注意点4：

问题：判断逻辑中为啥要判断code=200后在跳转支付成功页面？

答案：防止用户还未支付，直接点击按钮“已支付成功”，跳转到支付成功页面。

注意点5：

问题：为啥需要方法beforeClose()？

答案：当用户点击按钮【“支付遇到问题”|“已支付成功”】会直接关闭弹窗，但实际点击按钮后还应该执行一些逻辑，比如支付成功跳转，比如失败弹窗提示等等。所以不能让它直接关闭，需要通过beforeClose去控制弹窗框的方法。

注意点6：

弹窗框逻辑：

• 使用插件QRCode，先生成支付二维码
• 弹窗提示
  • 关闭弹出框的配置值
    • 如果用户点击“取消”按钮，则：
      • 清除定时器
      • 设置timer为空
      • 关闭弹出框
    • 如果用户点击“已支付成功”，则：
      • 先判断是否支付成功了，是的话：
        • 清除定时器
        • 设置timer为空
        • 关闭弹出框
        • 跳转到下一路由("/paysuccess")
• 这一步用于知道支付【成功|失败】，判断定时器有没有，没有就创建一个
  • 定时器发请求一直轮询获取用户支付状态，如果成功：
    • 清除定时器
    • 设置timer为空
    • 保存支付成功返回的code
    • 关闭弹出框
    • 跳转到下一路由("/paysuccess")

本人其他相关文章链接

1.vue尚品汇商城项目-day06【37.获取交易数据+38.用户地址信息展示+39.交易信息展示及交易页面完成+40.提交订单+41.支付组件内获取订单号与展示支付信息】
2.vue尚品汇商城项目-day06【vue插件-42.支付页面中使用ElementUI以及按需引入】
3.vue尚品汇商城项目-day06【43.微信支付业务】