78 lines
2.6 KiB
Vue
78 lines
2.6 KiB
Vue
|
<template>
|
|||
|
|
<el-card shadow="never">
|
|||
|
|
<div style="width: 400px; margin-top:180px; margin-bottom:220px; margin-left: auto; margin-right: auto; text-align: center">
|
|||
|
|
<div>
|
|||
|
|
<template v-if="finishStatus === '02' || finishStatus === '03'">
|
|||
|
|
<img :src=" images.img_pay_success" width=" 100px">
|
|||
|
|
</template>
|
|||
|
|
<template v-else>
|
|||
|
|
<img :src="images.img_pay_fail" width=" 100px">
|
|||
|
|
</template>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<span style="line-height: 30px;font-size: 14px;">{{count}}s</span>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<a href="#" style="border-style: dashed; border-width: 1px; padding: 1px; border-color:darkgray; border-radius:5px;"
|
|||
|
|
@click="finish">
|
|||
|
|
<span style=" color: green;" v-if="finishStatus === '02'">支付成功,点击返回</span>
|
|||
|
|
<span style=" color: green;" v-else-if="finishStatus === '03'">取消成功,点击返回</span>
|
|||
|
|
<span style=" color: red;" v-else>支付失败,点击返回</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</el-card>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import img_pay_fail from '@/assets/pay_images/PayFail.png';
|
|||
|
|
import img_pay_success from '@/assets/pay_images/PaySuccess.png';
|
|||
|
|
export default {
|
|||
|
|
name: 'finishDraft',
|
|||
|
|
props: {
|
|||
|
|
finishStatus: {
|
|||
|
|
type: String,
|
|||
|
|
required: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
count: 0,
|
|||
|
|
maxTime: 5,
|
|||
|
|
timer: null,
|
|||
|
|
images: {
|
|||
|
|
img_pay_fail,
|
|||
|
|
img_pay_success
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
beforeDestroy() {
|
|||
|
|
this.destroy();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//设置计时器，maxTime后返回
|
|||
|
|
createCountTimer() {
|
|||
|
|
let that = this;
|
|||
|
|
//如果计时器已存在，则先注销
|
|||
|
|
this.destroy();
|
|||
|
|
//重新创建定时器
|
|||
|
|
if (null == this.timer) {
|
|||
|
|
this.count = this.maxTime;
|
|||
|
|
this.timer = setInterval(() => {
|
|||
|
|
(that.count-- <= 0) && that.finish();
|
|||
|
|
}, 1000);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//返回到课程首页
|
|||
|
|
finish() {
|
|||
|
|
this.$emit('finish');
|
|||
|
|
},
|
|||
|
|
//注销计时器
|
|||
|
|
destroy() {
|
|||
|
|
clearInterval(this.timer);
|
|||
|
|
this.timer = null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|