订单组件支付有关笔记（支付宝微信）

订单组件支付有关笔记

首先说明支付功能百分之七十都是由后端完成的

接口：

一.支付宝支付：
1》首先了解支付宝content是html源码，渲染到页面上后自动跳转到支付页面，支付宝有层网关，网关有层签名，重定向到收银台，进行扫码支付

2》由于接口需要orderId为参数所以需要的data为orderId和content=‘’
3》用payType判断是支付宝支付还是微信支付

orderPay.vue：


4》其次调用支付接口需要另起一个页面（alipay.vue），因为支付宝会新打开一个支付宝页面进行支付

orderPay.vue:
注意此处url传参的方式？order以及用’_blank’重新开启一个新页面

5》在alipay组件中，进行接口调用
且orderId从url中获取
alipay.vue：


6》
alipay.vue：


content值是html源码，需要用v-htm进行渲染
由于加载需要时间，我们用一个定时器给一个渲染的时间且用document.forms的API实现到达支付宝支付页面的跳转

7》在渲染过程中，插入一个loading组件
loading.vue：

alipay.vue：

二.微信支付：
1》微信支付的content内容是支付链接，转换为二维码即可扫码支付
2》如何转换成二维码呢，需要qrcode插件，可以再npmjs中找到es6的promise形式的用法

QRCode.toDataURL('I am a pony!')
  .then(url => {
    console.log(url)
  })
  .catch(err => {
    console.error(err)
  })

3》在点击微信支付的时候，调用接口
加载二维码
并渲染到ScanPayCode组件上
并显示ScanPayCode组件：

orderPay.vue:



ScanPayCode.vue：

注意此处close事件为子传父自定义事件的做法

4》关闭微信支付（ScanPayCode组件），弹出一个模态框，用户自主判断是支付还是未支付，未支付的话关闭模态框留在当前页面，支付的话进行页面跳转到订单详情页面：（如果未支付的用户选择支付的情况后面会进行处理）

5》进行微信状态轮询，每隔一段时间调用接口查看订单支付状态判断有没有进行支付，若支付成功，则直接跳转到订单详情页面，否则一直调用接口查询：
此处利用定时器！！


6》若不支付
点击微信支付页面（ScanPayCode组件）关闭按钮也要停止接口调用，即清空定时器：

7》当我们该订单支付完成后，再次从订单详情回到订单支付页面
点击微信支付会报错，为服务器异常

我们要重新修改拦截器：由于是服务器异常，所以在use（）的第二个参数里面设置一个error。第一个参数返回的状态码都是200，只是里面的status不同导致业务不同，比如0，10等等。