vue-支付模块集成实现一套代码实现兼容pc/h5 -- 微信/支付宝--支付

场景：

在手机浏览器中打开微信支付，支付宝支付，在网页版浏览器打开支付实现方法，一套代码实现兼容

• pc支付：主要实现方法是生成二维码
• h5支付：主要是网页拉起支付宝或者微信App

参考的开发文档：

pc支付 ：

• 支付宝：开通当面付

  https://opensupport.alipay.com/support/helpcenter/95/201602482184?ant_source=opendoc_recommend

• 微信： Native调起支付API

 https://pay.weixin.qq.com/wiki/doc/apiv3/apis/chapter3_4_4.shtml

h5支付 ：

• 支付宝：开通手机网站支付

https://b.alipay.com/signing/productDetailV2.htm?productId=I1011000290000001001

• 微信： H5支付

https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_4

实现须知

主要实现原理是：

参考页面

实现部分由三部分组成

• 1.校验手机号-验证码设置
• 2.选择支付方式
• 3.立即购买按钮防抖

代码如下

• 校验手机号-验证码设置

html结构：

     <div class="content_item">
        <div class="title">验证手机号</div>
        <van-form validate-first ref="phoneFrom">
          <van-field
            v-model.trim="phone"
            label="手机号"
            type="tel"
            placeholder="请输入"
            :rules="[
              { required: true, validator, message: '请输入正确的手机号' },
            ]"
          />
          <van-field
            v-model.trim="sms"
            center
            clearable
            label="验证码"
            placeholder="请输入"
            :rules="[{ required: true, message: '请输入短信验证码' }]"
          >
            <template #button>
              <van-button
                size="small"
                type="primary"
                @click="!sendCodeVisible ? sendCode() : ''"
              >
                {{ !sendCodeVisible ? "发送验证码" : `${count}s` }}</van-button
              >
            </template>
          </van-field>
        </van-form>
      </div>

data结构

 data() {
    return {
      sendCodeVisible: false,
      count: 60,
      phone: "",
      sms: "",     
      timer: null,
    };
  },

methods结构

  // 获取验证码
      getCode({ phone: this.phone }).then((res) => {
        if (res.code === 200) {
          this.sendCodeVisible = true;
          this.sms = "";
          var Codetimer;
          clearInterval(Codetimer);
          Codetimer = setInterval(() => {
            this.count--;
            if (this.count < 0) {
              clearInterval(Codetimer);
              this.sendCodeVisible = false;
              this.count = 60;
            }
          }, 1000);
        } else {
          Dialog.alert({
            message: res.message,
            theme: "round-button",
          });
        }

注意：要及时清除定时器

  destroyed() {
    clearTimeout(this.timer);
  },

• 立即购买按钮防抖

1. 根据设备类型-选择不同的支付方式

  // 获取设备
        const isMobile = navigator.userAgent.match(
          /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
        );

        //  payType 支付方式。1：pc支付宝，2：pc微信 3: h5支付宝 4:h5微信
         switch (payType) {
              case 1:
                this.getQrCode(qrcode);
                break;
              case 2:
                this.getQrCode(qrcode);
                break;
              case 3:
                this.alipay(qrcode);
                break;
              case 4:
                this.wechatpay(qrcode);
                break;

              default:
                break;
            }

可以进行方法封装

1.setQrCode 获取预支付接口返回的url生产qrcode，不断的轮询查询订单状态

qyOrder({
        orderId: this.orderId,
        payType: this.payWay === 0 ? "2" : "1",
      }).then((res) => {
        if (res.code === 200 && res.result === "FAILPAY") {
          // 发现支付没有完成, 设置一个定时器, 定时调用自己
          this.timer = setTimeout(() => {
            this.checkPayment();
          }, 2000);
        } else if (res.code === 200 && res.result === "SUCCESSPAY") {
          this.orderId = "";
          // 支付成功
          this.$router.push({
            path: "/payResults",
            query: {
              packageInfo: JSON.stringify(this.packageInfo),
            },
          });
        } else {
          Dialog.alert({
            message: res.message,
            theme: "round-button",
          });
        }
      });

2.手机端支付
通过返回的url，直接跳转或者构造表单标签

• 支付宝

    // h5端 支付宝支付
    alipay(from) {
      let divForm = document.querySelector("#alipay");
      if (divForm && divForm.length) {
        document.body.removeChild(divForm[0]);
      }
      const div = document.createElement("div");
      div.id = "alipay";
      div.innerHTML = from;
      document.body.appendChild(div);
      document.querySelector("#alipay").children[0].submit(); // 执行后会唤起支付宝
    },

• 微信–分为微信浏览器打开和一般浏览器打开

    // h5端 微信支付
    wechatpay(from) {
       let ua = navigator.userAgent.toLowerCase();
      let isWeixin = ua.indexOf("micromessenger") != -1;
      // 微信浏览器打开
      if (this.isWeixin) {
        调用微信支付WeixinJSBridge
      } else {
        window.location.replace(from);
      }
    },

注意：微信支付需要在商户设置的同一域名打开