Vue Shangpinhui Mall Project-day06 [43. WeChat payment business]

43. WeChat payment service

Modify the code:

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);
        }
      },
}

Note 1:

Question: Be sure to pay attention to the space between the curly braces and the backslash, and strictly pay attention to the grammatical form. The following code, if there is no space in the middle, the error display is shown in Figure 1; if there is a space, the correct display is shown in Figure 2

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

Figure 1

Figure 2

Note 2: As a project, you must always ask whether the payment is successful. It may be only one call to call the interface to return the WeChat code, but whether the user has paid successfully or not, you need to start the timer to continuously ask whether the payment is successful.

Note 3:

Question: The error is shown in the figure

Answer: Because the "get payment information" interface returns 201, the value of payInfo.codeUrl is not obtained, so the assignment string needs to be initialized manually.

Note 4:

Question: Why do you need to jump to the payment success page after judging code=200 in the judgment logic?

Answer: In case the user has not yet paid, directly click the button "Payment succeeded" to jump to the payment success page.

Note 5:

Question: Why is the method beforeClose() needed?

Answer: When the user clicks the button ["Payment Encountered Problems"|"Payment Succeeded"], the pop-up window will be closed directly, but some logic should be executed after actually clicking the button, such as jumping to successful payment, pop-up prompts on failure, etc. . So you can't let it close directly, you need to use beforeClose to control the pop-up window box.

Note 6:

Pop-up window logic:

• Use the plug-in QRCode to generate a payment QR code
• pop-up prompt
  • Close the configuration value of the popup
    • If the user clicks the "Cancel" button, then:
      • clear timer
      • Set timer to empty
      • close popup
    • If the user clicks "Payment succeeded", then:
      • First judge whether the payment is successful, if yes:
        • clear timer
        • Set timer to empty
        • close popup
        • Jump to the next route ("/paysuccess")
• This step is used to know the payment [success | failure], judge whether there is a timer, and create one if not
  • The timer sends a request and keeps polling to obtain the user's payment status. If successful:
    • clear timer
    • Set timer to empty
    • Save the code returned by successful payment
    • close popup
    • Jump to the next route ("/paysuccess")

Links to my other related articles

1. Vue Shangpinhui Mall Project-day06 [37. Obtain transaction data + 38. User address information display + 39. Transaction information display and transaction page completion + 40. Submit order + 41. Obtain order number and display payment in the payment component Information]
2. vue Shangpinhui mall project-day06【vue plug-in-42. Use ElementUI in the payment page and import on demand】
3. Vue Shangpinhui mall project-day06【43. WeChat payment business】