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() 메서드가 필요한 이유는 무엇입니까?

답변: 사용자가 ["Payment Encountered Problems"|"Payment Succeeded"] 버튼을 클릭하면 팝업창이 바로 닫히지만 실제로 버튼을 클릭한 후 결제 성공으로 이동하는 등 일부 로직이 실행되어야 합니다. 실패 시 팝업 프롬프트 등 . 그래서 직접 닫게 할 수 없고, 팝업창 상자를 제어하기 위해 beforeClose를 사용해야 합니다.

주의점 6:

팝업 창 논리:

플러그인 QRCode를 사용하여 결제 QR 코드 생성
팝업 프롬프트
- 팝업의 구성 값을 닫습니다.
  - 사용자가 "취소" 버튼을 클릭하면 다음과 같이 됩니다.
    - 타이머 지우기
    - 타이머를 비어 있음으로 설정
    - 팝업 닫기
  - 사용자가 "결제 성공"을 클릭하면 다음과 같이 됩니다.
    - 먼저 결제가 성공했는지 여부를 판단합니다(예인 경우).
      - 타이머 지우기
      - 타이머를 비어 있음으로 설정
      - 팝업 닫기
      - 다음 경로로 이동("/paysuccess")
이 단계는 결제[성공 | 실패]를 알고, 타이머가 있는지 판단하고 없으면 생성하는 데 사용됩니다.
- 타이머는 요청을 보내고 사용자의 지불 상태를 얻기 위해 폴링을 계속합니다. 성공하면:
  - 타이머 지우기
  - 타이머를 비어 있음으로 설정
  - 성공적인 결제로 반환된 코드 저장
  - 팝업 닫기
  - 다음 경로로 이동("/paysuccess")

Vue Shangpinhui Mall Project-day06 [43. 위챗 결제 사업]

기사 디렉토리

43. 위챗 결제 서비스

내 다른 관련 기사 링크

추천