rt-sim-training-client/src/views/components/pay/finish.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>