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['prdId'] = this.$route.query.prdId;
                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.query.subSystem}`, query: {lessonId: this.$route.query.lessonId, mapId: this.$route.query.mapId, prdId: this.$route.query.prdId}});
            } else if (type === PermissionType.EXAM) {
                this.$router.replace({ path: `${UrlConfig.trainingPlatform.course}/${this.$route.query.subSystem}`});
            } 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.query.subSystem}`, query: { mapId: this.$route.query.mapId} });
            } else {
                this.$router.replace({ path: `/` });
            }
        }
    }
};
</script>