saas_pc/src/pages/person-center/my-mock/index.vue

<template>
  <div class="my-order">
    <div class="my-order__header">
      <el-tabs :value="activeName" @tab-click="tabChange">
        <el-tab-pane
          v-for="(tab, tabIndex) in list"
          :key="tabIndex"
          :name="tab.name"
        >
          <span slot="label" class="label">{{
            tab.count ? `${tab.label}(${tab.count})` : `${tab.label}`
          }}</span>
        </el-tab-pane>
      </el-tabs>
    </div>

    <div class="my-order__body">
      <template v-if="activeName == '1'">
        <div class="mock-list">
          <div class="mock-list__header">
            <div class="tabs">
              <div
                class="tab"
                :class="{ active: examParam.mockStatus == 0 }"
                @click="stateChange(0)"
              >
                未考试
              </div>
              <div
                class="tab"
                :class="{ active: examParam.mockStatus == 1 }"
                @click="stateChange(1)"
              >
                已结束
              </div>
            </div>
          </div>
          <div class="mock-list__body">
            <div class="selects">
              <div class="item clearfix">
                <div class="text">考试时间</div>
                <div class="select">
                  <el-date-picker
                    v-model="examParam.dateRange"
                    type="datetimerange"
                    value-format="timestamp"
                    @change="mockExamDateChange"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </div>
              </div>
              <div class="item clearfix">
                <div class="text">考试标题</div>
                <div class="select">
                  <el-select
                    placeholder="请选择"
                    v-model="examParam.applyName"
                    @change="mockSubscribeListSubscribe"
                  >
                    <el-option
                      v-for="(item, index) in listApplyName"
                      :key="index"
                      :label="item.applyName"
                      :value="item.applyId"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>
            </div>

            <div class="list">
              <div
                class="mock-item"
                v-for="(item, index) in examList"
                :key="index"
              >
                <template v-if="examParam.mockStatus == 0">
                  <div class="mock-item__header">
                    <div class="title">{{ item.subjectName }}</div>
                    <!-- <div class="time">2022/4/15 9:30:00</div> -->
                  </div>

                  <div class="mock-item__body">
                    <div class="content">
                      <div class="item">
                        <span class="item__left">项目：</span>
                        <span class="item__right"
                          >{{ item.businessName }} {{ item.projectName }}</span
                        >
                      </div>
                      <div class="item">
                        <span class="item__left">专业：</span>
                        <span class="item__right">{{ item.categoryName }}</span>
                      </div>
                      <!-- <div class="item">
                        <span class="item__left">科目：</span>
                        <span class="item__right">{{ item.subjectName }}</span>
                      </div> -->
                      <div class="item">
                        <span class="item__left">考试时间：</span>
                        <span class="item__right">
                          {{ $tools.timestampToTime(item.applySiteExamTime) }}
                          {{ item.applySiteStartTime }} -
                          {{ item.applySiteEndTime }}
                        </span>
                      </div>
                    </div>
                    <div class="btn-wrap">
                      <div class="btn-item" v-if="goTest(item)">
                        <el-button class="btn" disabled type="primary"
                          >去考试</el-button
                        >

                        <div class="text" v-if="!isStart(item)">考试未开始</div>
                      </div>
                      <div class="btn-item" v-else-if="item.handStatus">
                        <el-button class="btn" disabled type="primary"
                          >已考试</el-button
                        >
                      </div>
                      <div class="btn-item" v-else>
                        <el-button
                          class="btn"
                          @click="goExamCount(item)"
                          type="primary"
                          >去考试</el-button
                        >
                      </div>
                    </div>
                  </div>
                </template>

                <template v-if="examParam.mockStatus == 1">
                  <div class="mock-item__header">
                    <div class="title">{{ item.applyName }}</div>
                    <!-- <div class="time">2022/4/15 9:30:00</div> -->
                  </div>

                  <div class="mock-item__body">
                    <div class="content">
                      <div class="item">
                        <span class="item__left">项目：</span>
                        <span class="item__right"
                          >{{ item.businessName }} {{ item.projectName }}</span
                        >
                      </div>
                      <div class="item">
                        <span class="item__left">专业：</span>
                        <span class="item__right">{{ item.categoryName }}</span>
                      </div>
                      <div class="item">
                        <span class="item__left">科目：</span>
                        <span class="item__right">{{ item.subjectName }}</span>
                      </div>
                      <div class="item">
                        <span class="item__left">考试时间：</span>
                        <span class="item__right">
                          {{ $tools.timestampToTime(item.applySiteExamTime) }}
                          {{ item.applySiteStartTime }} -
                          {{ item.applySiteEndTime }}
                        </span>
                      </div>
                    </div>
                    <div class="btn-wrap btn-wrap--over">
                      <template>
                        <div class="btn-item" v-if="item.reSubscribe == 1">
                          <el-button
                            class="btn"
                            plain
                            type="primary"
                            @click="reApply(item)"
                            >重新预约</el-button
                          >
                        </div>
                        <div class="btn-item">
                          <el-button
                            class="btn"
                            :disabled="item.canDo === 0"
                            plain
                            type="primary"
                            @click="doQuestion(item)"
                            >去做题</el-button
                          >
                          <div class="text red" v-if="!item.handStatus">
                            由于未按时参加考试，主观题将不会提交至后台进行人工阅卷
                          </div>
                        </div>
                        <div class="btn-item" v-if="item.handStatus">
                          <el-button
                            class="btn"
                            plain
                            type="primary"
                            @click="report(item)"
                            >查看报告</el-button
                          >

                          <div class="text red">
                            当前报告含主观题需人工阅卷，阅卷完成后显示完整报告
                          </div>
                        </div>
                      </template>
                    </div>
                  </div>
                  <div
                    class="mock-item__footer"
                    v-if="
                      item.liveEndTime && item.liveStartTime && item.liveUrl
                    "
                  >
                    <div class="text">
                      模考讲解直播时间：{{
                        $tools.timestampToTime(item.liveStartTime, false)
                      }}
                      - {{ $tools.timestampToTime(item.liveEndTime, false) }}
                    </div>
                    <el-button
                      class="btn"
                      type="primary"
                      plain
                      @click="goLive(item)"
                      >去查看</el-button
                    >
                  </div>
                </template>
              </div>
            </div>

            <div class="pagination">
              <el-pagination
                @current-change="examCurrentChange"
                background
                layout="prev, pager, next"
                :total="examParam.total"
                :pager-count="5"
                :page-size="formData.pageSize"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </template>

      <template v-if="activeName == '2'">
        <div class="mock-list">
          <div class="mock-list__body">
            <div class="selects">
              <div class="item clearfix">
                <div class="text">业务层次</div>
                <div class="select">
                  <el-select
                    placeholder="请选择"
                    clearable
                    @change="businessChange"
                    v-model="appointParam.businessId"
                  >
                    <el-option
                      v-for="(item, index) in businesslist"
                      :key="index"
                      :label="
                        item.educationName +
                        ':' +
                        item.businessName +
                        '-' +
                        item.projectName
                      "
                      :value="item.businessId"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>

              <div class="item clearfix">
                <div class="text">专业</div>
                <div class="select">
                  <el-select
                    placeholder="请选择"
                    @change="subjectChange"
                    v-model="appointParam.majorId"
                  >
                    <el-option
                      v-for="(item, index) in sList"
                      :key="index"
                      :label="item.categoryName"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="item clearfix">
                <div class="text">考试时间</div>
                <div class="select">
                  <el-date-picker
                    @change="mockApplyListApply"
                    v-model="appointParam.dateRange"
                    type="datetimerange"
                    value-format="timestamp"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </div>
              </div>
            </div>

            <div class="list">
              <div
                class="mock-item"
                v-for="(item, mockIndex) in mockList"
                :key="mockIndex"
              >
                <div class="mock-item__header">
                  <div class="title">{{ item.applyName }}</div>
                  <!-- <div class="time">{{$tools.timestampToTime(item.examTime)}}</div> -->
                </div>

                <div class="mock-item__body">
                  <div class="content">
                    <div class="item">
                      <span class="item__left">项目：</span>
                      <span class="item__right"
                        >{{ item.businessName }} {{ item.projectName }}</span
                      >
                    </div>
                    <div class="item">
                      <span class="item__left">专业：</span>
                      <span class="item__right">{{ item.categoryName }}</span>
                    </div>
                    <div class="item">
                      <span class="item__left">科目：</span>
                      <span class="item__right">{{ item.subjectName }}</span>
                    </div>
                    <div class="item">
                      <span class="item__left">考试时间：</span>
                      <span class="item__right">
                        {{ $tools.timestampToTime(item.examTime) }}
                        {{ item.startTime }} - {{ item.endTime }}
                      </span>
                    </div>
                  </div>
                  <div class="btn-wrap">
                    <div class="btn-item" v-if="!item.isSubscribe">
                      <el-button class="btn" disabled type="primary" plain
                        >已预约</el-button
                      >
                    </div>
                    <div class="btn-item" v-else>
                      <el-button
                        class="btn"
                        type="primary"
                        plain
                        :disabled="!canApply(item)"
                        @click="appoint(item)"
                        >预约考试</el-button
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="pagination">
              <el-pagination
                @current-change="appointParamCurrentChange"
                background
                layout="prev, pager, next"
                :total="appointParam.total"
                :pager-count="5"
                :page-size="appointParam.pageSize"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </template>

      <template v-if="activeName == '3'">
        <div class="mock-list">
          <div class="mock-list__body">
            <div class="selects">
              <div class="item clearfix">
                <div class="text">考试时间</div>
                <div class="select">
                  <el-date-picker
                    v-model="liveParam.dateRange"
                    type="datetimerange"
                    value-format="timestamp"
                    @change="mockLiveDateChange"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </div>
              </div>
              <div class="item clearfix">
                <div class="text">考试标题</div>
                <div class="select">
                  <el-select
                    placeholder="请选择"
                    @change="mockApplyListMockLive"
                    v-model="liveParam.applyName"
                  >
                    <el-option
                      v-for="(item, index) in listLiveName"
                      :key="index"
                      :label="item.applyName"
                      :value="item.applyId"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>
            </div>

            <div class="live-list clearfix">
              <div
                class="live-item"
                v-for="(item, index) in liveList"
                :key="index"
                @click="goLivingRoom(item)"
              >
                <div class="live-item__header">
                  <img src="@/assets/pic.png" alt="" class="img" />
                  <div
                    class="note"
                    :class="{
                      'note--blue': item.liveStatus == 1,
                      'note--green': item.liveStatus == 2,
                      'note--gray': item.liveStatus == 3,
                    }"
                  >
                    <img
                      v-if="item.liveStatus == 2"
                      src="@/assets/play.png"
                      alt=""
                    />
                    <img
                      v-if="item.liveStatus == 0"
                      src="@/assets/living.png"
                      alt=""
                    />
                    <img
                      v-if="item.liveStatus == 1"
                      src="@/assets/wait.png"
                      alt=""
                    />

                    {{ item.liveStatus == 0 ? "直播中" : "" }}
                    {{ item.liveStatus == 1 ? "未开播" : "" }}
                    {{ item.liveStatus == 2 ? "回放中" : "" }}
                    {{ item.liveStatus == 3 ? "已结束" : "" }}
                  </div>
                </div>
                <div class="live-item__body">
                  <div class="title">{{ item.sectionName }}</div>
                  <div class="desc">
                    直播时间：{{
                      $tools.timestampToTime(item.liveStartTime, false)
                    }}
                    - {{ $tools.timestampToTime(item.liveEndTime, false) }}
                  </div>
                </div>
              </div>
            </div>

            <div class="pagination">
              <el-pagination
                @current-change="liveParamCurrentChange"
                background
                layout="prev, pager, next"
                :total="liveParam.total"
                :pager-count="5"
                :page-size="liveParam.pageSize"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </template>
    </div>

    <el-dialog :visible.sync="appointModal" width="462px" class="appoint-modal">
      <div class="appoint-modal__content">
        <img class="img" src="@/assets/appoinsuccess.png" alt="" />
        <div class="title">预约成功</div>
        <div class="content">
          您预约的模拟考试，安排如下：
          <div class="item">
            <span class="item__left">模考场次：</span>
            <span class="item__right">{{ showItem.applyName }} </span>
          </div>
          <div class="item">
            <span class="item__left">项目：</span>
            <span class="item__right"
              >{{ showItem.businessName }} {{ showItem.projectName }}
            </span>
          </div>
          <!-- <div class="item">
            <span class="item__left">专业：</span>
            <span class="item__right">{{ showItem.subjectName }} </span>
          </div> -->
          <div class="item">
            <span class="item__left">科目：</span>
            <span class="item__right">{{ showItem.subjectName }} </span>
          </div>
          <div class="item">
            <span class="item__left">考试时间：</span>
            <span class="item__right">
              {{ $tools.timestampToTime(showItem.examTime) }}
              {{ showItem.startTime }} - {{ showItem.endTime }}
            </span>
          </div>
          请准时参加考试哦~

          <el-button class="btn" type="primary" @click="ok">我知道了</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="playBackModal"
      width="800px"
      @close="closePlayBackModal"
    >
      <div class="">
        <div v-show="vid" id="player"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapMutations, mapActions, mapGetters } from "vuex";
export default {
  name: "MyOrder",
  data() {
    return {
      vid: "",
      vodPlayerJs: "https://player.polyv.net/script/player.js",
      playerJs:
        "https://player.polyv.net/resp/live-h5-player/latest/liveplayer.min.js",
      uidzb: "egsxlptzdq",
      appointModal: false,
      playBackModal: false,
      appointParam: {
        dateRange: "",
        pageNum: 1,
        pageSize: 10,
        businessId: "",
        majorId: "",
        total: 0,
      },
      examParam: {
        applyName: "",
        dateRange: "",
        pageNum: 1,
        pageSize: 10,
        mockStatus: 0,
        total: 0,
      },
      liveParam: {
        applyName: "",
        dateRange: "",
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      total: 1,
      title: 0,
      liveList: [],
      orderList: [],
      mockList: [],
      examList: [],
      sList: [],
      showItem: {},
      businesslist: [],
      activeName: "1",
      formData: {
        status: "0,1",
        pageNum: 1,
        pageSize: 10,
      },
      player: null,
      date: "",
      state: 0,
      nowTime: 0,
      subscribeId: 0,
      listApplyName: [],
      listLiveName: [],
      list: [
        {
          label: "模拟考试",
          count: 0,
          name: "1",
        },
        {
          label: "考试预约",
          count: 0,
          name: "2",
        },
        {
          label: "讲解直播",
          count: 0,
          name: "3",
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["sysTime"]),
  },
  async mounted() {
    this.nowTime = +this.$tools.timest();
    this.mockSubscribeListSubscribe();
  },
  async destroyed() {
    await this.clears();
  },
  methods: {
    ...mapActions(["setSystemTime"]),
    mockExamDateChange() {
      this.mockApplyListApplyName();
    },
    mockLiveDateChange() {
      this.mockLiveListApplyName();
    },
    mockLiveListApplyName() {
      let liveParam = JSON.parse(JSON.stringify(this.liveParam));
      if (liveParam.dateRange && liveParam.dateRange[0]) {
        liveParam.startTime = liveParam.dateRange[0].toString().substr(0, 10);
      }

      if (liveParam.dateRange && liveParam.dateRange[1]) {
        liveParam.endTime = liveParam.dateRange[1].toString().substr(0, 10);
      }
      this.$request.mockApplyListApplyName(liveParam).then((res) => {
        this.listLiveName = res.rows;
        this.liveParam.applyName = "";
        this.mockApplyListMockLive();
      });
    },
    mockApplyListApplyName() {
      let examParam = JSON.parse(JSON.stringify(this.examParam));
      if (examParam.dateRange && examParam.dateRange[0]) {
        examParam.startTime = examParam.dateRange[0].toString().substr(0, 10);
      }

      if (examParam.dateRange && examParam.dateRange[1]) {
        examParam.endTime = examParam.dateRange[1].toString().substr(0, 10);
      }
      this.$request.mockApplyListApplyName(examParam).then((res) => {
        this.listApplyName = res.rows;
        this.examParam.applyName = "";
        this.mockSubscribeListSubscribe();
      });
    },
    async closePlayBackModal() {
      await this.clears();
    },
    goLivingRoom(item) {
      if (item.liveStatus == 0) {
        //直播中
        this.$router.push({
          path: "/living-room/" + item.liveUrl,
          query: {
            sectionType: 2,
          }
        });
      } else if (item.liveStatus == 1) {
        //未开播
        this.$message.warning("暂未开播，请在开播后查看");
      } else if (item.liveStatus == 2) {
        //回放中
        this.playBackModal = true;
        this.$nextTick(() => {
          this.vid = item.recordingUrl;
          this.loadPlayerScript(this.loadPlayer);
        });
      } else if (item.liveStatus == 3) {
        //已结束
        this.$message.warning("直播已结束，不能查看回放");
      }
    },
    loadPlayerScript(callback) {
      if (!window.polyvPlayer) {
        const myScript = document.createElement("script");
        myScript.setAttribute("src", this.vodPlayerJs);
        myScript.onload = callback;
        document.body.appendChild(myScript);
      } else {
        callback();
      }
    },
    loadPlayer() {
      var self = this;
      const polyvPlayer = window.polyvPlayer;
      self.$request.obtainpolyvvideosign(self.vid).then((res) => {
        self.player = polyvPlayer({
          wrap: "#player",
          width: "100%",
          showLine: "off",
          height: 455,
          ban_history_time: "on",
          vid: self.vid,
          autoplay: true,
          ban_seek: "on",
          speed: true,
          teaser_show: 1,
          tail_show: 1,
          hideSwitchPlayer: true,
          watchStartTime: 0,
          ts: res.data.ts,
          sign: res.data.sign,
          playsafe: function (vid, next) {
            next();
          },
        });
      });
    },
    clears() {
      return new Promise((resolve, reject) => {
        this.vid = "";
        if (this.player) {
          this.player.destroy();
        }
        resolve();
      });
    },
    report(item) {
      this.$router.push({
        path: "/mock-report",
        query: {
          recordId: item.recordId,
          examId: item.examId,
          eachExamId: item.eachExamId,
          subscribeId: item.subscribeId,
        },
      });
    },
    doQuestion(item) {
      if (item.canDo === 0) {
        this.$message.warning("请等待所有科目考试结束后再进入刷题");
        return;
      }

      this.$router.push({
        path: "/mock-exam",
        query: {
          examId: item.examId,
          eachExamId: item.eachExamId,
        },
      });
    },
    async reApply(item) {
      this.activeName = "2";
      await this.mockApplyListApplyBusiness();

      this.mockApplyListApply();
    },
    goLive(item) {
      this.$router.push({
        path: "/living-room/" + item.liveUrl,
        query: {
          sectionType: 2,
        }
      });
    },
    goTest(item) {
      let startTime = this.$tools.TimeTotimestamp(
        this.$tools.timestampToTime(item.applySiteExamTime) +
          " " +
          item.applySiteStartTime
      );
      let canGo =
        startTime - this.nowTime <= 600 &&
        startTime - this.nowTime >= (-(item.timeLimit * 60) || 0);

      return !canGo;
    },
    isStart(item) {
      let startTime = this.$tools.TimeTotimestamp(
        this.$tools.timestampToTime(item.applySiteExamTime) +
          " " +
          item.applySiteStartTime
      );

      return startTime - this.nowTime <= 600;
    },
    goExamCount(item) {
      if (this.goTest(item)) {
        this.$message.warning("不在考试时间");
        return;
      }

      this.$router.push({
        path: "/mock-countdown",
        query: {
          start: this.$tools.TimeTotimestamp(
            this.$tools.timestampToTime(item.applySiteExamTime) +
              " " +
              item.applySiteStartTime
          ),
          mockName: item.applyName,
          limit: item.timeLimit,
          examId: item.examId,
          eachExamId: item.eachExamId,
          examEndTime: this.$tools.TimeTotimestamp(
            this.$tools.timestampToTime(item.applySiteExamTime) +
              " " +
              item.applySiteEndTime
          ),
          subscribeId: item.subscribeId,
        },
      });
    },
    appoint(item) {
      let canApply = this.canApply(item);
      if (!canApply) {
        this.$message.warning("不在预约时间范围");

        return;
      }

      if (!item.isSubscribe) {
        this.$message.warning("您已预约");
        return;
      }

      this.$request
        .mockSubscribe({
          applySiteExamTime: item.examTime,
          applySiteEndTime: item.endTime,
          applySiteStartTime: item.startTime,
          applyId: item.applyId,
          mockMajorSubjectId: item.mockMajorSubjectId,
          eachExamId: item.eachExamId,
          // applySiteExamTime:1653899220,
          // applySiteEndTime:"17:27:54",
          // applySiteStartTime:'16:27:54',
          // applyId:26,
          // mockMajorSubjectId:49
        })
        .then((res) => {
          if (res.code == 200) {
            this.showItem = item;
            this.subscribeId = res.data;
            this.appointModal = true;
            this.mockApplyListApply();
          } else {
            this.$message.warning(err.msg);
          }
        })
        .catch((err) => {
          this.$message.warning(err.msg);
        });
    },
    canApply(item) {
      let startTime = item.applyStartTime;
      let endTime = item.applyEndTime;
      let examTime = item.examTime;
      console.log(this.sysTime);
      console.log(startTime);
      console.log(endTime);
      console.log(examTime);
      if (
        this.sysTime >= startTime &&
        this.sysTime <= endTime &&
        this.sysTime < examTime
      ) {
        return true;
      } else {
        return false;
      }
    },
    async businessChange(e) {
      let projectObj = this.businesslist.find((item) => item.businessId == e);

      let projectId = "";

      if (projectObj) {
        projectId = projectObj.projectId;
      }
      await this.courseMajorList({
        businessId: this.appointParam.businessId,
        projectId: projectId,
        status: 1,
      });
      this.mockApplyListApply();
    },
    subjectChange(e) {
      this.mockApplyListApply();
    },
    ok() {
      this.appointModal = false;
      this.$confirm(`开考前10分钟提醒入场，不错过实战机会`, "开考提醒", {
        confirmButtonText: "立即开启",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        closeOnPressEscape: false,
        distinguishCancelAndClose: false,
        showClose: true,
      })
        .then((_) => {
          this.mockSubscribeEdit();
        })
        .catch((_) => {});
    },

    mockSubscribeEdit() {
      this.$request
        .mockSubscribeEdit({
          mockRemind: 1,
          subscribeId: this.subscribeId,
        })
        .then((res) => {
          this.$message.success("开启成功");
        });
    },
    mockApplyListApplyBusiness() {
      return new Promise((resolve) => {
        this.$request.mockApplyListApplyBusiness().then(async (res) => {
          this.businesslist = res.rows;
          this.appointParam.businessId = this.businesslist[0].businessId;
          await this.courseMajorList({
            businessId: res.rows[0].businessId,
            projectId: res.rows[0].projectId,
            status: 1,
          });
          resolve();
        });
      });
    },
    courseMajorList(data) {
      return new Promise((resolve) => {
        let self = this;
        this.$request.courseMajorList(data).then((res) => {
          if (res.code == 200) {
            self.sList = res.rows;
            let allItem = { id: "", categoryName: "全部" };
            self.sList.unshift(allItem);
            this.appointParam.majorId = "";

            resolve();
          }
        });
      });
    },
    examCurrentChange(e) {
      this.examParam.pageNum = e;
      this.mockSubscribeListSubscribe();
    },
    appointParamCurrentChange(e) {
      this.appointParam.pageNum = e;
      this.mockApplyListApply();
    },
    liveParamCurrentChange(e) {
      this.liveParam.pageNum = e;
      this.mockLiveListApplyName();
    },
    async tabChange(e) {
      if (this.activeName == e.name) {
        return;
      }

      this.formData.pageNum = 1;
      this.activeName = e.name;

      if (this.activeName == "1") {
        this.mockSubscribeListSubscribe();
        return;
      }

      if (this.activeName == "2") {
        await this.mockApplyListApplyBusiness();

        this.mockApplyListApply();
        return;
      }

      if (this.activeName == "3") {
        this.mockApplyListMockLive();
        return;
      }
    },

    mockSubscribeListSubscribe() {
      let examParam = JSON.parse(JSON.stringify(this.examParam));
      if (examParam.dateRange && examParam.dateRange[0]) {
        examParam.startTime = examParam.dateRange[0].toString().substr(0, 10);
      }

      if (examParam.dateRange && examParam.dateRange[1]) {
        examParam.endTime = examParam.dateRange[1].toString().substr(0, 10);
      }

      if (this.listApplyName.length) {
        examParam.applyName = this.listApplyName.find(
          (item) => examParam.applyName == item.applyId
        )
          ? this.listApplyName.find(
              (item) => examParam.applyName == item.applyId
            ).applyName
          : "";
      }
      this.$request.mockSubscribeListSubscribe(examParam).then((res) => {
        this.examList = res.rows;
        this.examParam.total = res.total;
      });
    },

    async mockApplyListApply() {
      let appointParam = JSON.parse(JSON.stringify(this.appointParam));
      if (appointParam.dateRange && appointParam.dateRange[0]) {
        appointParam.startTime = appointParam.dateRange[0]
          .toString()
          .substr(0, 10);
      }

      if (appointParam.dateRange && appointParam.dateRange[1]) {
        appointParam.endTime = appointParam.dateRange[1]
          .toString()
          .substr(0, 10);
      }
      this.setSystemTime();
      this.$request.mockApplyListApply(appointParam).then((res) => {
        this.mockList = res.rows;
        this.appointParam.total = res.total;
      });
    },
    mockApplyListMockLive() {
      let liveParam = JSON.parse(JSON.stringify(this.liveParam));
      if (liveParam.dateRange && liveParam.dateRange[0]) {
        liveParam.startTime = liveParam.dateRange[0].toString().substr(0, 10);
      }

      if (liveParam.dateRange && liveParam.dateRange[1]) {
        liveParam.endTime = liveParam.dateRange[1].toString().substr(0, 10);
      }

      if (this.listLiveName.length) {
        liveParam.applyName = this.listLiveName.find(
          (item) => liveParam.applyName == item.applyId
        )
          ? this.listLiveName.find(
              (item) => liveParam.applyName == item.applyId
            ).applyName
          : "";
      }
      this.$request.mockApplyListMockLive(liveParam).then((res) => {
        this.liveList = res.rows;
        this.liveParam.total = res.total;
      });
    },
    stateChange(state) {
      this.examParam.mockStatus = state;
      this.mockSubscribeListSubscribe();
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.my-order {
  &__header {
    /deep/ .el-tabs__header {
      margin-bottom: 0;
    }
    .label {
      padding: 0 30px !important;
    }
  }
  &__body {
    .mock-list {
      &__header {
        .tabs {
          padding: 14px 0;

          .tab {
            cursor: pointer;
            display: inline-block;
            padding: 0 50px;
            position: relative;
            color: #666666;

            &.active {
              color: #3f8dfd;
            }
          }
        }
      }

      &__body {
        .selects {
          margin-top: 15px;
          display: flex;
          .item {
            flex: 1;
            padding: 0 10px;

            .text {
              margin-top: 10px;
              float: left;
              width: 60px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #666666;
            }

            .select {
              margin-left: 60px;

              .el-select,
              .el-input {
                width: 100%;
              }
            }
          }
        }

        .list {
          margin-top: 20px;
          .mock-item {
            margin-top: 20px;
            border: 1px solid #eeeeee;
            box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.04);
            border-radius: 8px;
            &__header {
              padding: 0 20px;
              height: 48px;
              display: flex;
              align-items: center;

              .title {
                flex: 1;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #333333;
              }

              .time {
                font-size: 12px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #666666;
              }
            }

            &__body {
              border-top: 1px solid #eee;
              display: flex;
              .content {
                height: 160px;
                padding: 16px;
                flex: 1;

                .item {
                  padding: 4px 0;
                  &__left {
                    width: 80px;
                    display: inline-block;
                    vertical-align: middle;
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #333333;
                  }

                  &__right {
                    vertical-align: middle;
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #666666;
                  }
                }
              }

              .btn-wrap {
                border-left: 1px solid #eee;
                width: 154px;
                height: 160px;
                display: flex;
                padding-top: 60px;
                justify-content: center;

                &--over {
                  width: 568px;
                }

                .btn-item {
                  width: 200px;
                  margin: 0 5px;
                  text-align: center;
                }

                .btn {
                  width: 122px;
                  height: 32px;
                  padding: 0;
                  line-height: 32px;
                  border-radius: 16px;
                  text-align: center;
                  margin: 0 5px;
                }

                .text {
                  text-align: center;
                  color: #999999;

                  &.red {
                    color: #f5222d;
                  }
                }
              }
            }

            &__footer {
              border-top: 1px solid #eee;
              height: 64px;
              padding: 0 20px;
              display: flex;
              align-items: center;

              .text {
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
                flex: 1;
              }

              .btn {
                width: 122px;
                height: 32px;
                border-radius: 16px;
                padding: 0;
                line-height: 32px;
                text-align: center;
              }
            }
          }
        }
      }
    }

    .live-list {
      .live-item {
        cursor: pointer;
        float: left;
        margin-top: 86px;
        margin-right: 24px;
        width: 240px;
        height: 140px;
        background: #ffffff;
        box-shadow: 0px 3px 6px 0px rgba(213, 218, 224, 0.8);
        border-radius: 10px;
        position: relative;
        padding: 62px 8px 0;
        &__header {
          position: absolute;
          left: 8px;
          top: -62px;
          width: 224px;
          height: 125px;
          background: #333333;
          border-radius: 8px;

          .img {
            width: 100%;
            height: 100%;
          }

          .note {
            width: 80px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            background: #9254de;
            border-radius: 8px 0px 8px 0px;
            position: absolute;
            left: 0;
            top: 0;

            img {
              margin-right: 5px;
            }

            &--blue {
              background: #3f8dfd;
            }

            &--green {
              background: #36cfc9;
            }

            &--gray {
              background: #999999;
            }
          }
        }

        &__body {
          .title {
            margin-top: 12px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
          }

          .desc {
            margin-top: 5px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #999999;
          }
        }
      }
    }

    .no-data {
      text-align: center;
      padding: 50px 0;
      color: #666;
      font-size: 16px;
    }

    .pagination {
      padding: 30px 0;
      text-align: center;
    }
  }

  .appoint-modal {
    /deep/ .el-dialog__header {
      display: none;
    }
    /deep/ .el-dialog__body {
      padding: 0;
      overflow: unset;
    }

    &__content {
      height: 452px;
      position: relative;
      padding-top: 120px;

      .img {
        width: 196px;
        position: absolute;
        left: 50%;
        top: -54px;
        margin-left: -98px;
      }
      .title {
        text-align: center;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
      }

      .content {
        padding: 24px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666666;
        line-height: 24px;

        .item {
          line-height: 30px;
          &__left {
            font-size: 16px;
            color: #333;
          }

          &__right {
            font-size: 16px;
            color: #666;
          }
        }

        .btn {
          display: block;
          margin: 20px auto;
          width: 200px;
          height: 40px;
          border-radius: 8px;
          line-height: 40px;
          padding: 0;
          text-align: center;
        }
      }
    }
  }
}
</style>