@foxit/pay-layer v0.1.1

web端支付弹窗

install

npm i @foxit/pay-layer -S

use

// main.js

import payLayer from '@foxit/pay-layer'
import '@foxit/pay-layer/npm_pay_layer.css'
Vue.use(payLayer)

参数

其中goodsDetails、tips和userData为必填， 其他参数为微信请求预支付后得到的参数。

示例

    <pay-layer
      v-if="showPay"
      @closePayLayer="showPay = false"
      @createPreVIPOrder="createPreVIPOrder"
      @checkWxPay="checkWxPay"
      @reChoosePayWay="reChoosePayWay"
      :goodsDetails="details"
      :tips="tips"
      :userData="userData"
      :orderNum="orderNum"
      :WXQRCode="WXQRCode"
      :payUnfinished="payUnfinished"
    />

参数的数据结构

tips: [
  {
    "title":"购买说明",
    "list":[
      "本内容为正版电子图书，虚拟物品付费之后概不接收任何退款。",
      "本内容只支持在线阅读，不支持下载。"
    ]
  }
]

userData: { "userId":900038694, "nickName":"cxx", "figure1":"http://thirdwx.qlogo.cn/mmopen/ajNicQQ/132","openIdType":"weixin", "tel":null, "email":null }

goodsDetails: { "title":"我的中国故事：海外学者的中国缘", }

WXQRCode:"http://foxit-common.s3.cn-north-1.amazonaws.com.cn/foxit-vip/qrCode/aee101c6f0e541eeb609e96021b466d3"

orderNum:"muban16363510937359000386945"

payUnfinished:false

### 回调函数

@closePayLayer 第一幕点击右上角关闭图标触发的回调。 @createPreVIPOrder="createPreVIPOrder" 第一幕点击立即支付触发的回调 @checkWxPay="checkWxPay" 第二幕点击付款完成触发的回调 @reChoosePayWay="reChoosePayWay" 第二幕点击重新选择支付方式

reChoosePayWay() {
  this.WXQRCode = "";
  this.payUnfinished = false;
},
checkWxPay(e) {
  console.log(e);
  const params = {
    user_id: this.userId,
    product_id: this.id
  };
  isPay(params).then(res => {
    if (res.message == "已购买") {
      this.$router.go(0);
    }
    if (res.message == "未购买" && e == 1) {
      this.payUnfinished = true;
    }
  });
},
createPreVIPOrder(payway) {
  if (!this.userId) {
    localStorage.removeItem("userInfo");
    window.location.href = `https://muban.pdf365.cn/login_cb?cb=${encodeURIComponent(
      window.location.href
    )}`;
    return false;
  }
  if (payway === 0) {
    const params = {
      payType: payway === 0 ? 2 : 1,
      amount: 1,
      preId: this.preId,
      extra: this.extra || null,
      orderFrom: this.orderFrom,
      returnUrl: encodeURIComponent(window.location.href)
    };
    // 微信支付
    createPreVIPOrder(params).then(res => {
      console.log(res);
      if (res.ret === 0) {
        this.WXQRCode = res.data.img;
        this.orderNum = res.data.order_num;
        setInterval(this.checkWxPay, 3000);
      }
    });
  } else {
    window.location.href =
      "https://vip.foxitreader.cn/preOrder/createPreVIPOrder?payType=1&amount=1&preId=" +
      this.preId +
      "&extra=" +
      this.extra +
      "&orderFrom=" +
      this.orderFrom +
      "&returnUrl=" +
      encodeURIComponent(window.location.href);
  }
},

![示例图片](./exp.png)
![示例图片](./exp1.png)
> tips