82 lines
2.0 KiB
Vue
82 lines
2.0 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 v-if="finishStatus === '02'" style=" color: green;">{{ $t('global.paymentSuccessful') }}</span>
|
||
<span v-else-if="finishStatus === '03'" style=" color: green;">{{ $t('global.cancelSuccessfully') }}</span>
|
||
<span v-else style=" color: red;">{{ $t('global.paymentFailed') }}</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() {
|
||
const that = this;
|
||
// 如果计时器已存在，则先注销
|
||
this.destroy();
|
||
// 重新创建定时器
|
||
if (this.timer == null) {
|
||
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>
|