JingTieXueTang.H5/src/views/home/exam/page-exam-item-detail.vue

<template>
  <div class="page-exam-item-detial-box">
    <van-nav-bar v-if="env!=='pro'" title="考试详情" />
    <div class="page-exam-item-detial-body">
      <div class="exam-item-detial-div">
        <div class="exam-item-detial">
          <div class="exam-item-detial-title">{{ examItemData.name }}</div>
          <div class="exam-item-detial-txt">
            考试时间：{{
              formateDateTimeFun(examItemData.startTime) ||
                examItemData.startTime
            }}
          </div>
          <div class="exam-item-detial-txt">
            考试时长：{{ examItemData.examTimeMinsTxt }}
          </div>
          <div class="exam-item-detial-describe">
            考试描述：<span style="letter-spacing:0.05rem">{{ examItemData.description }}</span>
          </div>
        </div>
      </div>
      <div class="exam-item-detial-button-box">
        <van-button
          class="exam-item-detial-button"
          type="primary"
          color="#0088e9"
          @click="handleBackFun"
          >返回</van-button
        >
        <van-button
          class="exam-item-detial-button"
          type="primary"
          color="#0088e9"
          @click="handleStartExamFun"
          >开始考试</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "page-exam-item-detial",
  components: {},
  data() {
    return {
      examItemData: {}, // 当前考试的信息
      env: "pro"
    };
  },
  created() {
    this.env = process.env.VUE_APP_ENV;
    this.getExamItemDataFun(); // 查询：当前考试的信息
    this.setLanXinNavigator();
  },
  activated() {
    this.setLanXinNavigator();
  },
  computed: {
    ...mapState({
      examItem: state => state.exam.examItem
    })
  },
  methods: {
    // 设置蓝信navigator
    setLanXinNavigator() {
      lx.ui.setNavigationBarTitle({
        title: "考试详情"
      });
    },
    // 查询：当前考试的信息
    getExamItemDataFun() {
      this.examItemData = this.examItem;
      // this.$store.commit("toggleLoading", true);
      // this.$_http
      //   .get(
      //     this.$pathParams(this.$_API.GET_JTXT_GET_EXAMS_ONE_DETAIL, {
      //       examId: this.examItem.id
      //     })
      //   )
      //   .then(res => {
      //     console.log(res);
      //     this.$store.commit("toggleLoading", false);
      //   })
      //   .catch(() => {
      //     this.$store.commit("toggleLoading", false);
      //   });
    },
    // 操作：开始考试
    handleStartExamFun() {
      this.$router.replace({ name: "Exam" });
    },
    // 操作：返回
    handleBackFun() {
      this.$router.back();
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin";
.page-exam-item-detial-box {
  width: 100%;
  height: 100%;
  .page-exam-item-detial-body {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 0.6rem;
    .exam-item-detial-div {
      padding: 0.5rem 0.5rem;
      .exam-item-detial {
        padding: 0 0.5rem 0.5rem;
        margin-bottom: 0.7rem;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
        .exam-item-detial-title {
          padding: 0.5rem 0;
          border-bottom: 1px solid #e4e8eb;
          font-size: 0.7rem;
          font-weight: bold;
          color: #000;
        }
        .exam-item-detial-txt {
          margin-top: 0.5rem;
          font-size: 0.65rem;
        }
        .exam-item-detial-describe {
          margin-top: 0.5rem;
          font-size: 0.65rem;
          span {
            letter-spacing: 0.2rem;
          }
        }
      }
    }
    .exam-item-detial-button-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 0.5rem;
      .exam-item-detial-button {
        width: 48%;
        height: auto;
        padding: 0.5rem 0.5rem;
        font-size: 0.65rem;
      }
    }
  }
}
</style>