<!--
|
* @Author: 小明丶
|
* @Date: 2020-11-27 09:14:20
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-12-10 09:36:40
|
* @Description: 商户收款支付结果页面
|
-->
|
<template>
|
<div class="payResult-page">
|
<van-nav-bar
|
title="支付结果"
|
left-text="返回"
|
left-arrow
|
@click-left="onClickLeft"
|
style="line-height: 43px"
|
>
|
<i
|
class="iconfont iconzuojiantou"
|
slot="left"
|
style="font-size: 25px"
|
></i>
|
</van-nav-bar>
|
<div class="result">
|
<img
|
src="../../../../assets/img/支付成功.png"
|
alt=""
|
v-show="status == 1"
|
/>
|
<img
|
src="../../../../assets/img/支付中.png"
|
alt=""
|
v-show="status == 0"
|
/>
|
<img src="../../../../assets/img/超时.png" alt="" v-show="status == 2" />
|
<p>{{ text }}</p>
|
</div>
|
<div class="btn-box" v-show="status != 0">
|
<button
|
class="getQrCode"
|
@click="goback"
|
:style="{ background: $store.state.backColor, color: '#fff' }"
|
>
|
返回
|
</button>
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
timeId:'',
|
status: 0,
|
text: "用户支付中，请稍后",
|
};
|
},
|
created() {
|
if(this.$route.query.needSearch == 1){
|
this.timeId = setInterval(() => {
|
this.search()
|
}, 2000);
|
}else{
|
this.search_status()
|
}
|
|
},
|
methods: {
|
// 轮询 支付状态
|
search_status() {
|
let status = this.$route.query.orderStatus
|
this.status = status
|
console.log(this.status,status)
|
if(status==0){
|
this.text = '用户支付中，请稍后'
|
}else if(status==1){
|
this.text = '用户支付成功'
|
}else{
|
this.text = '用户支付失败，请重试'
|
}
|
},
|
search(){
|
this.$api.facepay_getStatus(
|
this.$route.query.orderId
|
).then((res) => {
|
let orderStatus = res.body.orderStatus;
|
this.status = orderStatus
|
if(orderStatus == 0){
|
this.text = '用户支付中，请稍后'
|
}else if(orderStatus == 1){
|
this.text = '用户支付成功'
|
clearInterval(this.timeId);
|
}else{
|
this.text = '用户支付失败，请重试'
|
clearInterval(this.timeId);
|
}
|
});
|
},
|
goback(){
|
this.$router.push('/main/product')
|
}
|
},
|
beforeRouteLeave(to, from, next) {
|
clearInterval(this.timeId);
|
next();
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.payResult-page {
|
& {
|
min-height: 100vh;
|
background: #f5f5f5;
|
}
|
.result {
|
& {
|
width: 359px;
|
height: 190px;
|
background: #ffffff;
|
border-radius: 3px;
|
margin: auto;
|
margin-top: 10px;
|
text-align: center;
|
box-sizing: border-box;
|
padding: 32px 0;
|
}
|
img {
|
width: 95px;
|
height: 95px;
|
margin-bottom: 16px;
|
}
|
}
|
.btn-box{
|
text-align: center;
|
}
|
.getQrCode {
|
width: 320px;
|
height: 44px;
|
outline: none;
|
border-radius: 22px;
|
border: 0;
|
margin-top: 42px;
|
}
|
}
|
</style>
|
