app内嵌h5支付功能，跳转支付宝&微信，vue组件

一、功能梳理

app内前h5涉及到支付的功能，ios非实物商品实付需要使用ios原生支付方式，实物商品则可以三方支付，主要的实现思路为后端返回跳转支付宝或微信的支付scheme链接，前端进行跳转支付，同时需要实时查询用户的支付状态。

整个过程中复杂的部分在于查询用户支付状态的体验方面，需要保证用户在支付成功、支付失败、跳转支付宝、微信回来或者没有跳转支付宝微信等未知的行为下的用户体验。

组件内容为底部升起的支付选择弹窗，可以选择支付宝或者微信。

二、实现步骤

1. 用户进行下单操作，前端调用下单接口，成功则返回三方支付app跳转链接，前端进行跳转

2. 跳转三方app同时进行查询订单接口轮训，实时获取订单状态，轮训时间定位30s，依据需求调整

3. 用户如果支付时间超过了30s未返回我们app的情况下，需要针对此种情况进行处理，捕捉用户返回我们app的情况

三、组件可支配参数&事件设置

设置支持参数2个、事件4个，分别为

参数：

successStatus: {
default: '1'
}, // 支付成功的状态码，默认1
errorStatus: {
default: '2'
} // 支付失败的状态码，默认2

事件：

@payMoney="payMoney" // 下单事件
@payStatus="payStatus" //查询支付状态事件
@succcessFunction="succcessFunction" // 成功支付操作
@errorFunction="errorFunction" // 失败实付操作

四、从支付app返回，事件捕获方法

为了防止用户在支付时间超过我们设置轮训时长情况，需要监听用户从支付app返回当前页面，来进行查询支付状态操作。方法为监听页面显示or隐藏事件

reloadState () {
// 添加监听器
if (typeof document.hidden !== 'undefined') {
this.hidden = 'hidden';
this.visibilityChange = 'visibilitychange';
} else if (typeof document.mozHidden !== 'undefined') {
this.hidden = 'mozHidden';
this.visibilityChange = 'mozvisibilitychange';
} else if (typeof document.msHidden !== 'undefined') {
this.hidden = 'msHidden';
this.visibilityChange = 'msvisibilitychange';
} else if (typeof document.webkitHidden !== 'undefined') {
this.hidden = 'webkitHidden';
this.visibilityChange = 'webkitvisibilitychange';
}
document.addEventListener(this.visibilityChange, this.forceUpdate);
},
forceUpdate () {
if (document.visibilityChange === this.hidden) {
} else {
this.searchTimer();
}
},

五、组件源码

<template>
<div class="pay-info">
<div class="pay-content">
<span class="pay-left"><img class="pay-icon" src="../assets/zfb.png" alt=""> 支付宝支付</span>
<img class="radio-icon" src="../assets/radio2.svg" alt="">
</div>
<div class="pay-content">
<span class="pay-left"><img class="pay-icon" src="../assets/wx.png" alt=""> 微信支付</span>
<img class="radio-icon" src="../assets/radio2.svg" alt="">
</div>
<div class="pay-button" @click="payFun"><span>支付</span></div>
<div class="loading-dom" v-if="loadingPay">
支付中
<van-loading color="#ffffff" style="margin-left: 5px"/>
</div>
</div>
</template>
<script type="text/javascript">
export default {
data () {
return {
isApp: !!browers.appUA,
timer: null,
loadingPay: false,
orderNo: '', // 订单号
payStatus: '' // 订单支付状态
};
},
props: {
successStatus: {
default: '1'
}, // 支付成功的状态码，默认1
errorStatus: {
default: '2'
} // 支付失败的状态码，默认2
},
mounted () {
this.$once('hook:beforeDestroy', () => {
clearInterval(this.timer);
this.timer = null;
});
},
methods: {
reloadState () {
// 添加监听器
if (typeof document.hidden !== 'undefined') {
this.hidden = 'hidden';
this.visibilityChange = 'visibilitychange';
} else if (typeof document.mozHidden !== 'undefined') {
this.hidden = 'mozHidden';
this.visibilityChange = 'mozvisibilitychange';
} else if (typeof document.msHidden !== 'undefined') {
this.hidden = 'msHidden';
this.visibilityChange = 'msvisibilitychange';
} else if (typeof document.webkitHidden !== 'undefined') {
this.hidden = 'webkitHidden';
this.visibilityChange = 'webkitvisibilitychange';
}
document.addEventListener(this.visibilityChange, this.forceUpdate);
},
forceUpdate () {
if (document.visibilityChange === this.hidden) {
} else {
this.searchTimer();
}
},
payFun () {
this.$emit('payMoney', (res) => {
this.reloadState();
// 下单接口的回调，执行轮训结果
this.orderNo = res.order_no;
this.loadingPay = true;
this.searchPay();// 监听从其他app返回，为了解决从支付宝回来不轮训的问题
setTimeout(() => {
location.href = res.pay_address;
}, 200);
});
},
searchPay () {
this.$emit('payStatus', (res) => {
if (this.payStatus === '') {
this.searchTimer();
}
// 下单接口的回调，执行轮训结果
this.payStatus = res;
});
},
searchTimer() {
if (this.timer) {
return;
}
if (this.orderNo) {
let times = 0;
this.searchPay();
if (this.payStatus === '') {
this.timer = setInterval(res => {
times++;
this.searchPay();
if (this.payStatus === this.$props.successStatus) {
clearInterval(this.timer);
this.timer = null;
this.loadingPay = false;
document.removeEventListener(this.visibilityChange, this.forceUpdate);
// 支付成功事件
this.$emit('succcessFunction', (res) => {
});
}
if (this.payStatus === this.$props.errorStatus) {
clearInterval(this.timer);
this.timer = null;
this.loadingPay = false;
document.removeEventListener(this.visibilityChange, this.forceUpdate);
// 支付失败事件
this.$emit('errorFunction', (res) => {
});
}
if (times > 30) {
this.$toast('未查询到支付状态，请重新支付');
clearInterval(this.timer);
this.timer = null;
this.loadingPay = false;
document.removeEventListener(this.visibilityChange, this.forceUpdate);
}
}, 1000);
}
}
}
}
};
</script>
<style lang="less" scoped>
.pay-info {
.pay-content {
background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
font-size: 28px;
color: #222;
.pay-left {
display: flex;
align-items: center;
}
.pay-icon {
width: 60px;
height: 60px;
margin-right: 10px
}
.radio-icon {
width: 34px;
height: 34px;
}
}
.pay-button {
width: 100%;
text-align: center;
margin-top: 30px;
span {
display: inline-block;
background: #4e88f6;
color: #fff;
width: 100%;
font-size: 32px;
height: 88px;
line-height: 88px;
border-radius: 50px;
display: inline-block;
}
}
.loading-dom {
width: 100%;
height: 100vh;
background: rgba(0,0,0,.5);
color: #fff;
text-align: center;
font-size: 34px;
font-weight: 500;
position: fixed;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0
}
}
</style>

六、父组件调用

<Pay
    @payMoney="payMoney"
    @payStatus="payStatus"
    @succcessFunction="succcessFunction"
    @errorFunction="errorFunction"
    :success-status='1'
    :error-status='2'
></Pay>

// 下单事件
payMoney (callback) {
this.$axios.post(`url`, params).then((res) => {
let data = res.data;
if (Number(data.code) === 0) {
// 执行支付操作，跳转url，结果回调给收银台组件
this.currentOrder = data.data.order_no;
callback(data.data);
} else {
this.$toast(data.message);
}
}).catch((e) => {
});
},
// 轮训状态接口
payStatus (callback) {
this.$axios.get(`url`).then((res) => {
let data = res.data;
if (Number(data.code) === 0) {
// 执行支付结果查询，结果回调给收银台组件
callback(data.data.pay_result);
if (data.data.list && data.data.list.length) {
this.resultData = data.data.list;
}
} else {
this.$toast(data.message);
}
}).catch((e) => {
});
},
succcessFunction () {
// 支付成功父组件操作事件
this.$toast('支付成功');
// 先弹出支付成功提示，延时1秒出结果弹窗
setTimeout(() => {
// 支付成功后刷新一下接口
}, 1000);
},
errorFunction () {
// 支付失败父组件操作事件
this.$toast('支付失败，请重新发起支付');
},