1.服务器请求支付宝返回表单
2.把服务器返回的form表单通过URL传递到中间页面
注意:通过url传递需要进行编码(url参数过长,并且里面包含特殊字符)
3.在中间页面拿到form后,插入文档并提交
注意:这里判断环境,只在浏览器环境提交,微信环境是不能进行支付宝支付的
<view class="min100 bg plr-30 gray-2">
<img src="../../static/zhishi.png" alt="" class='zhishi'>
<view class="des flex flex-center">
请前往手机浏览器完成支付
</view>
<view class="mt-200 " v-if="!payStatus">
<view class="mt-100 flex flex-center bt" @click="toHome">
我已支付
</view>
<view class="mt-100 flex flex-center bt" @click="toOrder">
支付遇到问题
</view>
</view>
<view class="" v-else>
支付成功
</view>
</view>
</template>
<script>
export default {
data() {
return {
id: '',
payStatus: 0,
timer: null,
count: 0,
timerOut: false,
type: ''
}
},
onLoad(option) {
// #ifdef H5
let ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
} else {
let data = decodeURI(option.payData) ;
const div = document.createElement('divform');
div.innerHTML = data
document.body.appendChild(div);
document.forms[0].setAttribute('target', '_self')
document.forms[0].submit();
}
// #endif
this.id = option.id
this.type = option.type
this.timer = setInterval(() => {
if (this.count > 10) {
this.clearTimer()
this.timerOut = true
} else {
this.checkOrder()
}
}, 3000)
},
methods: {
// 清除定时器
clearTimer() {
clearInterval(this.timer)
},
// 查询支付状态
checkOrder() {
this.$http('api/orders/get_goods_pay_status', {
order_id: this.id,
type: this.type
}).then(res => {
if (res.status) {
if (this.timerOut) {
this.toHome()
} else {
this.payStatus = Number(res.status)
this.count = 0
this.clearTimer()
this.toHome()
}
} else {
if (this.timerOut) {
this.toOrder()
} else {
this.count++
}
}
})
},
toOrder() {
uni.redirectTo({
url: '/pages/my/myOrder'
})
},
toHome() {
uni.switchTab({
url: '/pages/home/index'
})
}
},
destroyed() {
this.clearTimer()
}
}
</script>
<style lang="less" scoped>
.des {
color: #fff;
padding-top: 30rpx;
}
.mt-200 {
margin-top: 200rpx;
}
.bt {
background-color: #EFAA1C;
border-radius: 20rpx;
height: 80rpx;
color: #fff;
margin: 100rpx;
}
.zhishi {
position: fixed;
top: 60rpx;
right: 0;
width: 240rpx;
height: 140rpx;
}
</style>
本文章只提供参考,希望和同学们互相学习,加油!