支付业务流程精讲 + 代码实战

现在你已经获取了订单的基本信息，要开始进行支付。

1.引入点击按钮，已经messageBox的弹窗

import { MessageBox} from 'element-ui';

Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;

2.绑定点击事件

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

3.这里点击事件我先不写，我们先生成一个微信支付二维码的流程

3.11装包

npm install --save qrcode //装包

3.12 在该页面中引入

import QRCode from "qrcode";

3.13 将你获取到的支付的url地址传给他

let url = await QRCode.toDataURL(this.payInfo.codeUrl);
//这个时候，改url地址就是微信支付二维码的地址，你可以用一个img标签，导入这个url，他就出来了

4.定义data我们需要的数据

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

5.这个时候我们开始写点击事件 （代码内我会给出十分详细的注释，请慢慢观看）

   //这里我们不仅需要发送请求一直问是否支付完成，同意也要生成一个微信二维码的支付地址，所要用到async await来处理promise 
   async open() {
      // 生成一个二维码
      let url = await QRCode.toDataURL(this.payInfo.codeUrl);
      // console.log(res);
      this.$alert(`<img src=${url}>`, "请用微信扫一扫支付", {
        // 这里是是否允许使用html标签
        dangerouslyUseHTMLString: true,
        // 内容居中对其
        center: true,
        // 这里是否显示取消按钮
        showCancelButton: true,
        // 取消按钮的文本内容
        cancelButtonText: "支付有问题",
        // 确定按钮的文本
        confirmButtonText: "支付成功",
        // 是否显示右上角的关闭按钮
        showClose: false,
        // 关闭前的回调
        beforeClose: (type, intance, done) => {
          // type是确定点击的是   取消还是确定
          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 res = await this.$API.reqPayStatus(this.orderId);
          console.log(res);
          if (res.code == 200) {
            //清空定时器，关闭改弹出框、进行路由跳转
            clearInterval(this.timer);
            this.timer = null;
            //  保存支付的状态码、
            this.code = res.code;
            //  关闭窗口
            this.$message.close();
            // 跳转路由
            this.$router.push("/paysuccess");
          }
        }, 50000);
      }
    },