vue尚品汇商城项目-day06【43.微信支付业务】

刘大猫.

已于 2023-04-03 11:39:28 修改

阅读量250

点赞数

分类专栏： Vue2专栏文章标签：微信 vue尚品汇商城项目微信支付业务 vue2

于 2023-04-03 09:05:59 首次发布

本文链接：https://blog.csdn.net/a924382407/article/details/129921522

版权

Vue2专栏专栏收录该内容

109 篇文章 43 订阅

订阅专栏

在这里插入图片描述

文章目录

- 43.微信支付业务
本人其他相关文章链接

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} />`, "请你微信支付", {

在这里插入图片描述

如图1

在这里插入图片描述

如图2

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

注意点3：

问题：报错如图

在这里插入图片描述

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

注意点4：

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

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

注意点5：

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

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

注意点6：

弹窗框逻辑：

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