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

深藏阁楼爱情的钟 2024-03-24 13:40 54阅读 0赞

![在这里插入图片描述][201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]

#### 文章目录 ####

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

![在这里插入图片描述][8658d410186145228fdae422611d7399.png_pic_center]

如图1

![在这里插入图片描述][734673611953462091572fdd5d8de237.png_pic_center]

如图2

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

注意点3：

> 问题：报错如图

![在这里插入图片描述][72bdec63971c432cb3ae76f0631d3470.png_pic_center]

答案：因为“获取支付信息”接口返回为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.支付组件内获取订单号与展示支付信息】][vue_-day06_37._38._39._40._41.]  
2.[vue尚品汇商城项目-day06【vue插件-42.支付页面中使用ElementUI以及按需引入】][vue_-day06_vue_-42._ElementUI]  
3.[vue尚品汇商城项目-day06【43.微信支付业务】][vue_-day06_43.]

[201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/e7e223ea16b342aa8ea2458e90eec980.png
[8658d410186145228fdae422611d7399.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/e72a09e182a545d6b9e1b1c36840e216.png
[734673611953462091572fdd5d8de237.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/49702aa41014488d9de436045f372ce0.png
[72bdec63971c432cb3ae76f0631d3470.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/54232c1a96054bbbbe4c650c2633aa2f.png
[vue_-day06_37._38._39._40._41.]: https://blog.csdn.net/a924382407/article/details/129921394
[vue_-day06_vue_-42._ElementUI]: https://blog.csdn.net/a924382407/article/details/129921435
[vue_-day06_43.]: https://blog.csdn.net/a924382407/article/details/129921522