@foxit/pay-layer/README.md

``` npm i @foxit/pay-layer -S ```

# 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)
```
## 参数
![参数](./props.png)
> 其中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