rt-sim-training-client/src/views/components/pay/index.vue

<template>
  <el-card :style="{ height: height +'px' }">
    <div style="text-align: center;  padding-top: 30px">
      <b>{{ $t('global.checkstand') }}</b>
    </div>
    <div :style=" { height: height - 60 +'px' }">
      <el-scrollbar wrap-class="scrollbar-wrapper">
        <el-steps
          :active="active"
          finish-status="success"
          style="margin-top: 20px; margin-left: auto; margin-right: auto; width: 80%"
          center
        >
          <el-step :title="$t('global.submitOrders')" />
          <el-step :title="$t('global.completePayment')" />
        </el-steps>
        <div style="margin-top: 20px; margin-left: auto; margin-right: auto; width: 80%;">
          <commit-draft
            v-show="active===0"
            ref="commit"
            :order-data="orderData"
            :system-name="systemName"
            @commit="commit"
          />
          <confirm-draft
            v-show="active===1"
            ref="confirm"
            :order-data="orderData"
            :system-name="systemName"
            :order="order"
            @confirm="confirm"
          />
          <finish-draft v-show="active===2" ref="finish" :finish-status="finishStatus" @finish="finish" />
        </div>
      </el-scrollbar>
    </div>
  </el-card>
</template>

<script>
import { getCommodityDetailByParams } from '@/api/management/goods';
import { PermissionType } from '@/scripts/ConstDic';
import { UrlConfig } from '@/router/index';
import CommitDraft from './commit';
import ConfirmDraft from './confirm';
import FinishDraft from './finish';

export default {
	name: 'LessonDetail',
	components: {
		CommitDraft,
		ConfirmDraft,
		FinishDraft
	},
	data() {
		return {
			active: -1,
			order: {},
			title: '',
			finishStatus: '02',
			orderData: {},
			routeDict: {
				0: 'commit',
				1: 'confirm',
				2: 'finish'
			}
		};
	},
	computed: {
		systemName() {
			switch (this.$route.query.permissionType) {
			case PermissionType.LESSON: return this.$t('global.coursePrice');
			case PermissionType.EXAM: return this.$t('global.testPrice');
			case PermissionType.SIMULATION: return this.$t('global.simulationPrice');
			case PermissionType.SCREEN: return this.$t('global.timeUnitPrice');
			}
			return '';
		},
		height() {
			if (/\/dp\//.test(this.$route.path) ||
				/\/plan\//.test(this.$route.path)) {
				return this.$store.state.app.height;
			}

			return this.$store.state.app.height - 61;
		}
	},
	watch: {
		$route(newVal) {
			this.initLoadPage();
		}
	},
	mounted() {
		this.initLoadPage();
	},
	methods: {
		// 加载课程信息
		initLoadPage() {
			const data = {
				permissionType: this.$route.query.permissionType
			};
			if (this.$route.query.permissionType != '04') {
				data['mapId'] = this.$route.query.mapId;
				data['prdCode'] = this.$route.query.prdCode;
				data['lessonId'] = this.$route.query.lessonId;
			}

			getCommodityDetailByParams(data).then(response => {
				this.active = 0;
				this.orderData = response.data;
			}).catch(() => {
				this.$messageBox(this.$t('tip.failedCourse'));
			});
		},
		// 提交订单后处理
		commit(data) {
			this.active = 1;
			this.order = data;
		},
		// 确认支付后处理
		confirm(data) {
			this.active = 2;
			this.finishStatus = data;
			this.$refs.finish.createCountTimer();
		},
		// 完成跳转处理
		finish(data) {
			this.active = 0;
			const type = this.$route.query.permissionType;
			if (type === PermissionType.LESSON) {
				this.$router.replace({ path: `${UrlConfig.trainingPlatform.teachDetail}/${this.$route.params.lessonId}` });
			} else if (type === PermissionType.EXAM) {
				this.$router.replace({ path: `${UrlConfig.trainingPlatform.examDetail}/${this.orderData.lessonId}` });
			} else if (type === PermissionType.SCREEN) {
				this.$router.replace({ path: `${UrlConfig.dp.detail}/${this.$route.params.lessonId}` });
			} else if (type === PermissionType.SIMULATION) {
				this.$router.replace({ path: `${UrlConfig.trainingPlatform.prodDetail}/${this.$route.params.lessonId}` });
			} else {
				this.$router.replace({ path: `/` });
			}
		}
	}
};
</script>