<!--
|
* @Author: 小明丶
|
* @Date: 2020-07-08 16:47:37
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-07-09 13:59:25
|
* @Description:
|
-->
|
<template>
|
<div class="pay-result-page">
|
<v-navbar title="交易结果"></v-navbar>
|
<div class="res-box">
|
<div class="img-box">
|
<img v-if="orderStatus==0" src="../../../../static/img/ing.png" alt />
|
<img v-if="orderStatus==1" src="../../../../static/img/cg.png" alt />
|
<img v-if="orderStatus==2" src="../../../../static/img/cs.png" alt />
|
<img v-if="orderStatus==3" src="../../../../static/img/cs.png" alt />
|
<p>{{text}}</p>
|
</div>
|
</div>
|
<div class="btn-box">
|
<button class="btn-1" @click="goHome">返回首页</button>
|
<button class="btn-2" v-if="orderStatus==0" @click="goDetail">查看订单详情</button>
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
timer: "", //定时器
|
text: "支付中，请稍候",
|
orderStatus: 0
|
};
|
},
|
computed: {
|
orderId() {
|
return this.$route.query.orderId;
|
}
|
},
|
created() {
|
this.orderSts();
|
},
|
methods: {
|
//轮询查询订单状态
|
orderSts() {
|
this.timer = setInterval(() => {
|
this.$api.hbOrderFindOrderSts({ orderId: this.orderId }).then(
|
res => {
|
this.orderStatus = res.body.orderStatus;
|
if (res.body.orderStatus == 1) {
|
clearInterval(this.timer);
|
this.text = "支付成功";
|
} else if (res.body.orderStatus == 2) {
|
clearInterval(this.timer);
|
this.text = "支付超时";
|
} else if (res.body.orderStatus == 3) {
|
clearInterval(this.timer);
|
this.text = "支付失败";
|
}
|
},
|
err => {
|
err, clearInterval(this.timer);
|
}
|
);
|
}, 10000);
|
},
|
goHome(){
|
this.$router.push('/main/product')
|
},
|
goDetail(){
|
if(this.$route.query.mode == 'hb'){
|
this.$router.push({
|
path:'/product/hb-detail',
|
query:{
|
id:this.$route.query.orderId,
|
mode:this.$route.query.mode
|
}
|
})
|
}
|
if(this.$route.query.mode == 'shtx'){
|
this.$router.push({
|
path:'/product/shtx-detail',
|
query:{
|
id:this.$route.query.orderId,
|
mode:this.$route.query.mode
|
}
|
})
|
}
|
|
}
|
},
|
beforeRouteLeave(to, from, next) {
|
if (this.timer) {
|
clearInterval(this.timer);
|
}
|
next();
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.pay-result-page {
|
& {
|
min-height: 100vh;
|
background-color: #f5f5f7;
|
}
|
.res-box {
|
width: 96vw;
|
height: 190px;
|
background: rgba(255, 255, 255, 1);
|
border-radius: 3px;
|
margin-left: 2vw;
|
margin-top: 10px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
p {
|
font-size: 14px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(51, 51, 51, 1);
|
}
|
.img-box {
|
text-align: center;
|
img {
|
width: 95px;
|
height: 95px;
|
}
|
}
|
}
|
.btn-box {
|
padding-top: 44px;
|
text-align: center;
|
.btn-1 {
|
width: 86vw;
|
height: 44px;
|
background: rgba(137, 110, 219, 1);
|
border-radius: 22px;
|
border: 0;
|
outline: none;
|
color: #fff;
|
margin-bottom: 12px;
|
}
|
.btn-2 {
|
width: 86vw;
|
height: 44px;
|
background: rgba(247, 245, 255, 1);
|
border: 1px solid rgba(137, 110, 219, 1);
|
border-radius: 22px;
|
outline: none;
|
color: #896edb;
|
}
|
}
|
}
|
</style>
|
