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>收银台</b>
    </div>
    <div :style=" { height: height - 60 +'px' }">
      <el-scrollbar wrapClass="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="提交订单"></el-step>
          <el-step title="完成支付"></el-step>
        </el-steps>
        <div style="margin-top: 20px; margin-left: auto; margin-right: auto; width: 80%;">
          <commit-draft ref="commit" @commit="commit" :orderData="orderData" :systemName="systemName"
            v-show="active===0"></commit-draft>
          <confirm-draft ref="confirm" @confirm="confirm" :orderData="orderData" :systemName="systemName" :order="order"
            v-show="active===1"></confirm-draft>
          <finish-draft ref="finish" @finish="finish" :finishStatus="finishStatus" v-show="active===2"></finish-draft>
        </div>
      </el-scrollbar>
    </div>
  </el-card>
</template>

<script>
  import { mapGetters } from "vuex";
  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";
  import WindowResizeHandler from "@/mixin/WindowResizeHandler";

  export default {
    name: "LessonDetail",
    components: {
      CommitDraft,
      ConfirmDraft,
      FinishDraft
    },
    mixins: [WindowResizeHandler],
    data() {
      return {
        height: "",
        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 '教学系统';
          case PermissionType.EXAM: return '考试系统';
          case PermissionType.SIMULATION: return '仿真系统';
          case PermissionType.SCREEN: return '大屏系统';
        }
      }
    },
    watch: {
      $route(newVal) {
        this.initLoadPage();
      }
    },
    mounted() {
      this.initLoadPage();
    },
    methods: {
      resizeHandler: function () {
        this.height = this._clientHeight;
      },
      //加载课程信息
      initLoadPage() {
        let data = {
          mapId: this.$route.query.mapId,
          lessonId: this.$route.params.lessonId,
          productType: this.$route.query.permissionType,
          mapProductCode: this.$route.query.prdCode,
        };

        getCommodityDetailByParams(data).then(response => {
          this.active = 0;
          this.orderData = response.data;
        }).catch(error => {
          this.$messageBox('获取课程信息失败');
        });
      },
      //提交订单后处理
      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;
        let type = this.$route.query.permissionType;
        if (type === PermissionType.LESSON) {
          this.$router.replace({ path: `${UrlConfig.teach.detail}/${this.$route.params.lessonId}` });
        } else if (type === PermissionType.EXAM) {
          this.$router.replace({ path: `${UrlConfig.exam.course}/${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.demonstration.detail}/${this.$route.params.lessonId}` });
        } else {
          this.$router.replace({ path: `/` });
        }
      }
    }
  };
</script>