新增vuex控制变量、考试tab页、考试详情、部分考试答题页面，修改答题页面部分结构

public/index.html

@@ -44,6 +44,6 @@
 c.dr=ye(s),i?c.fs=de(r,s,c.fp,c):c.__fs=0;var f="",l=be(),d=_(u,c)||{};l&&o(l,function(t,e){Ce(t)&&t>=0&&(d[e]=t)});var h;if(i){var v="trace",p=Math.max(d.ls,0);p||(p=ae()-s.navigationStart||n),d[v]=p;var g=_e(s);o(["fp","fs","dr",v],function(e){f+=t((g?d[e]-g:d[e])>=qn[e+"_threshold"])}),delete d[v],f.indexOf("1")>-1&&(h=se(r,s)),l&&(h||(h={}),h.mark=l)}d.trflag=f||"0000",Vn.pfStart=k(),delete d.firstScreenResources,delete d.resources,h&&(h=xe(h,150)),or.emit("send","/pf",d,h,function(){J("pf sent!"),or.xhrs=or.errs=null,Qn.pf=!0})});return nr.on(Ge,function(){var e=0;if(qn.pfDelay&&Re(qn.pfDelay)){var n=be();o(qn.pfDelay,function(t,r){(!n||null==n[r])&&Ce(t)&&t>e&&(e=t)})}setTimeout(t,e)}).on([Je,We,$e],t)},di=Se();return di}(function(ty_rum){ty_rum.server = {id:'PTMGBRszKcY',ignore_err : true,beacon:'beacon.tingyun.com',beacon_err:'beacon-err.tingyun.com',key:'9uJeQ44eGVE',trace_threshold:7000,fp_threshold:2000,fs_threshold:4000,dr_threshold:4000,custom_urls:[],sr:1.0};},window,+new Date);
 </script>
 
-<!--<script src="//cdn.jsdelivr.net/npm/eruda"></script>-->
-<!--<script>eruda.init();</script>-->
+<script src="//cdn.jsdelivr.net/npm/eruda"></script>
+<script>eruda.init();</script>
 </html>

src/router/index.js

@@ -1,23 +1,35 @@
 import Vue from "vue";
 import Router from "vue-router";
-import Home from "@/views/home";
-import answerRecruit from "@/views/home/answer/page-answer-recruit.vue";
+// import Home from "@/views/home";
+// import answerRecruit from "@/views/home/answer/page-answer-recruit";
+// import pageExamItemDetail from "@/views/home/exam/page-exam-item-detail";
+// import pageExamItem from "@/views/home/exam/page-exam-item";
 
 Vue.use(Router);
 
 let routes = [
   {
     alias: "/",
-    path: "/Home", // 专家门诊
+    path: "/Home",
     name: "home",
     meta: { keepAlive: true },
-    component: Home
+    component: () => import("@/views/home")
   },
   {
-    path: "/Answer-Recruit", // 专家门诊
+    path: "/Answer-Recruit",
     name: "answer-recruit",
-    component: answerRecruit
-  }
+    component: () => import("@/views/home/answer/page-answer-recruit")
+  }, // 竞赛答题页
+  {
+    path: "/ExamDetail",
+    name: "ExamDetail",
+    component: () => import("@/views/home/exam/page-exam-item-detail")
+  }, // 单个考试的详情页
+  {
+    path: "/Exam",
+    name: "Exam",
+    component: () => import("@/views/home/exam/page-exam-item-doing")
+  } // 单个考试的试卷页
 ];
 
 export default new Router({

src/store/index.js

@@ -2,6 +2,9 @@ import Vue from "vue";
 import Vuex from "vuex";
 import createPersistedState from "vuex-persistedstate"; // 持久化存储插件
 
+import exam from "./modules/exam";
+import answer from "./modules/answer";
+
 Vue.use(Vuex);
 
 export default new Vuex.Store({
@@ -9,8 +12,7 @@ export default new Vuex.Store({
     storage: window.sessionStorage,
     reducer: state => {
       return {
-        user: {
-        }
+        user: { }
       };
     }
   })],
@@ -43,5 +45,7 @@ export default new Vuex.Store({
     }
   },
   modules: {
+    exam,
+    answer
   }
 });

src/store/modules/answer.js

@@ -0,0 +1,14 @@
+const answer = {
+  state: {
+    answerRecruitId: null, // 竞赛答题的类型ID
+    examItemQuestionsList: [] // 单个考试的试题信息
+  },
+  mutations: {
+    updateAnswerStore(state, { field, value }) {
+      state[field] = value;
+    }
+  },
+  actions: {}
+};
+
+export default answer;

src/store/modules/exam.js

@@ -0,0 +1,14 @@
+const exam = {
+  state: {
+    examItem: null, // 单个考试的信息
+    examItemQuestionsList: [] // 单个考试的试题信息
+  },
+  mutations: {
+    updateExamStore(state, { field, value }) {
+      state[field] = value;
+    }
+  },
+  actions: {}
+};
+
+export default exam;

src/styles/vant.scss

@@ -30,3 +30,8 @@
     color: #fff;
   }
 }
+
+// 修改button按钮样式
+.van-button {
+  border-radius: 0.2rem;
+}

src/views/home/answer/page-answer-recruit.vue

@@ -1,18 +1,25 @@
 <template>
   <div>
-    <van-nav-bar title="答题" left-arrow @click-left="onClickLeft"
-      />
+    <van-nav-bar title="答题" left-arrow @click-left="onClickLeft" />
   </div>
 </template>
 
 <script>
+import { mapState } from "vuex";
 export default {
   name: "page-answer-recruit",
   components: {},
   data() {
     return {};
   },
-  mounted() {},
+  created() {
+    console.log("竞赛答题的类型ID", this.answerRecruitId);
+  },
+  computed: {
+    ...mapState({
+      answerRecruitId: state => state.answer.answerRecruitId
+    })
+  },
   methods: {
     onClickLeft() {
       this.$router.back();

src/views/home/answer/page-answer.vue

@@ -45,24 +45,43 @@ export default {
   components: {},
   data() {
     return {
-      answerPracticeList: [
+      answerPracticeList: [], // 答题练习的列表数据
+      answerRaceList: [] // 竞赛答题的列表数据
+    };
+  },
+  computed: {},
+  created() {
+    this.initDataFun(); // 初始化数据
+  },
+  methods: {
+    // 初始化数据
+    initDataFun() {
+      this.getAnswerPracticeListFun(); // 查询：答题练习的列表数据
+      this.getAnswerRaceListFun(); // 查询：竞赛答题的列表数据
+    },
+    // 查询：答题练习的列表数据
+    getAnswerPracticeListFun() {
+      this.answerPracticeList = [
         {
           id: 1,
-          url: "https://img.yzcdn.cn/vant/cat.jpeg",
+          url: require("@/assets/image/answer/01.png"),
           title: ["不积跬步", "无以至千里"]
         },
         {
           id: 2,
-          url: "https://img.yzcdn.cn/vant/cat.jpeg",
+          url: require("@/assets/image/answer/02.png"),
           title: ["周而复始", "方得始终"]
         },
         {
           id: 3,
-          url: "https://img.yzcdn.cn/vant/cat.jpeg",
+          url: require("@/assets/image/answer/03.png"),
           title: ["闻道有先后", "术业有专攻"]
         }
-      ], // 答题练习的列表数据
-      answerRaceList: [
+      ];
+    },
+    // 查询：竞赛答题的列表数据
+    getAnswerRaceListFun() {
+      this.answerRaceList = [
         {
           id: 1,
           title: "闯关答题",
@@ -73,22 +92,17 @@ export default {
           title: "双人PK",
           describe: "两两PK，舍我其谁"
         }
-      ] // 竞赛答题的列表数据
-    };
-  },
-  computed: {},
-  methods: {
+      ];
+    },
     // 操作：点击了答题练习中的某个
     handleClickAnswerPracticeFun(item) {
+      console.log(item.title);
       switch (item.id) {
         case this.answerPracticeList[0].id:
-          console.log(this.answerPracticeList[0].title);
           break;
         case this.answerPracticeList[1].id:
-          console.log(this.answerPracticeList[1].title);
           break;
         case this.answerPracticeList[2].id:
-          console.log(this.answerPracticeList[2].title);
           break;
         default:
           break;
@@ -96,13 +110,16 @@ export default {
     },
     // 操作：点击了竞赛答题中的某个
     handleClickAnswerRaceFun(item) {
+      console.log(item.title);
       switch (item.id) {
         case this.answerRaceList[0].id:
-          console.log(this.answerRaceList[0].title);
-          this.$router.push({ name: "answer-recruit", query: { } });
+          this.$store.commit("updateAnswerStore", {
+            field: "answerRecruitId",
+            value: item.id
+          });
+          this.$router.push({ name: "answer-recruit" });
           break;
         case this.answerRaceList[1].id:
-          console.log(this.answerRaceList[1].title);
           break;
         default:
           break;
@@ -115,14 +132,11 @@ export default {
 <style lang="scss" scoped>
 @import "~@/styles/mixin";
 .page-answer-box {
+  width: 100%;
+  height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
-  position: relative;
-  background-color: #f7f5f6;
   font-size: 0.6rem;
-  width: 100%;
-  height: 100%;
-  background-color: #fff;
   .answer-practice {
     padding: 0.5rem 0.5rem;
     border-bottom: 2px solid #e6e6e6;
@@ -142,15 +156,16 @@ export default {
       justify-content: space-between;
       .answer-practice-item {
         width: 31%;
-        padding: 0.5rem 0.5rem;
+        padding: 0.75rem 0.75rem;
         border: 1px solid #e4e8eb;
+        border-radius: 4px;
+        background-color: #fff;
         display: flex;
         flex-direction: column;
         align-items: center;
-        border-radius: 4px;
         .answer-practice-item-img {
-          width: 3.5rem;
-          height: 3.5rem;
+          width: 2rem;
+          height: 2rem;
           overflow: hidden;
         }
         .answer-practice-item-title {
@@ -170,9 +185,10 @@ export default {
     }
     .answer-race-item {
       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);
-      margin-bottom: 0.7rem;
       .answer-race-item-title {
         height: 2rem;
         border-bottom: 1px solid #e4e8eb;
@@ -182,8 +198,7 @@ export default {
         color: #000;
       }
       .answer-race-item-describe {
-        height: 2rem;
-        line-height: 2rem;
+        margin: 0.5rem 0;
       }
     }
   }

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

@@ -0,0 +1,114 @@
+<template>
+  <div class="page-exam-item-detial-box">
+    <van-nav-bar title="考试详情" />
+    <div class="exam-item-detial-div">
+      <div class="exam-item-detial">
+        <div class="exam-item-detial-title">{{ examItemData.title }}</div>
+        <div class="exam-item-detial-describe">
+          考试时间：{{ examItemData.examTime }}
+        </div>
+        <div class="exam-item-detial-describe">
+          考试时长：{{ examItemData.examTimeMins }}
+        </div>
+        <div class="exam-item-detial-describe">
+          考试描述：{{ examItemData.examDescribe }}
+        </div>
+      </div>
+    </div>
+    <div class="exam-item-detial-button-box">
+      <van-button
+        class="exam-item-detial-button"
+        type="primary"
+        color="#FE6347"
+        @click="handleStartExamFun"
+        >开始考试</van-button
+      >
+      <van-button
+        class="exam-item-detial-button"
+        type="primary"
+        color="#FE6347"
+        @click="handleBackFun"
+        >返回</van-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "page-exam-item-detial",
+  components: {},
+  data() {
+    return {
+      examItemData: {} // 当前考试的信息
+    };
+  },
+  created() {
+    this.getExamItemDataFun(); // 查询：当前考试的信息
+  },
+  computed: {
+    ...mapState({
+      examItem: state => state.exam.examItem
+    })
+  },
+  methods: {
+    // 查询：当前考试的信息
+    getExamItemDataFun() {
+      this.examItemData = this.examItem;
+    },
+    // 操作：开始考试
+    handleStartExamFun() {
+      this.$router.push({ name: "Exam" });
+    },
+    // 操作：返回
+    handleBackFun() {
+      this.$router.back();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.page-exam-item-detial-box {
+  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 {
+        height: 2rem;
+        border-bottom: 1px solid #e4e8eb;
+        line-height: 2rem;
+        text-align: center;
+        font-size: 0.65rem;
+        font-weight: bold;
+        color: #000;
+      }
+      .exam-item-detial-describe {
+        margin-top: 0.5rem;
+      }
+    }
+  }
+  .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>

src/views/home/exam/page-exam-item-doing.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="page-exam-question-box">
+    <van-nav-bar title="考试" />
+    <!-- 倒计时 -->
+    <div class="exam-question-countdown">
+      <span>剩余考试时间：{{ timeDiff }}</span>
+    </div>
+    <!-- 题序 -->
+    <div></div>
+    <!-- 题目卡片 -->
+    <div class="exam-question-div">
+      <div class="exam-question-card">
+        <div class="exam-question-title">题目标题</div>
+        <div class="exam-question-options">
+          <div class="exam-question-button-box">
+            <van-button
+              class="exam-question-button"
+              type="primary"
+              color="#FE6347"
+              @click="handleSureFun"
+              >确定</van-button
+            >
+            <van-button
+              class="exam-question-button"
+              type="primary"
+              color="#FE6347"
+              @click="handleSubmitFun"
+              >交卷</van-button
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "page-exam-question-",
+  components: {},
+  data() {
+    return {
+      examItemData: {}, // 当前考试的信息
+      startTimeSeconds: null, // 考试开始时间的信息
+      timeDiff: "00:00:00", // 距离考试结束的时间
+      interval: null // 计时器
+    };
+  },
+  created() {
+    this.initDataFun(); // 初始化数据信息
+  },
+  beforeDestroy() {
+    if (this.interval) {
+      clearInterval(this.interval); // 销毁前清空计时器
+    }
+  },
+  watch: {
+    timeDiff(val) {
+      if (val === "00:00:00") {
+        console.log("结束了");
+      }
+    }
+  },
+  computed: {
+    ...mapState({
+      examItem: state => state.exam.examItem
+    })
+  },
+  methods: {
+    // 初始化数据信息
+    initDataFun() {
+      console.log("考试信息：", this.examItem);
+      if (!this.examItem) {
+        return;
+      }
+      this.getExamItemQuestionsListFun(); // 查询：当前考试的信息
+      this.getExamTimeFun(); // 获取：当前时间及考试限时
+      this.setIntervalFun(); // 设置：倒计时定时器
+    },
+    // 查询：当前考试的信息
+    getExamItemQuestionsListFun() {
+      // TODO...
+      this.examItemData = [{ id: 1 }];
+    },
+    // 获取：当前时间及考试限时
+    getExamTimeFun() {
+      let tarTime = this.timeEvent(this.examItem.examTimeMins);
+      let curTime = new Date();
+      // 在当前时间curTime变量上加上小时
+      let addHour = curTime.setHours(curTime.getHours() + tarTime.hours);
+      curTime = new Date(addHour);
+      // 在当前时间curTime变量上加上分钟
+      let addMinute = new Date(
+        curTime.setMinutes(curTime.getMinutes() + tarTime.minute)
+      );
+      curTime = new Date(addMinute);
+      // 在当前时间curTime变量上加上秒
+      let addSeconds = new Date(
+        curTime.setSeconds(curTime.getSeconds() + tarTime.seconds)
+      );
+      curTime = new Date(addSeconds);
+      this.startTimeSeconds = curTime.getTime();
+    },
+    // 方法：分别获取时 分 秒
+    timeEvent(e) {
+      let time = e;
+      let len = time.split(":");
+      if (len.length === 3) {
+        let hour = time.split(":")[0];
+        let min = time.split(":")[1];
+        let sec = time.split(":")[2];
+        return {
+          hours: Number(hour),
+          minute: Number(min),
+          seconds: Number(sec)
+        };
+      }
+      if (len.length === 2) {
+        let min = time.split(":")[0];
+        let sec = time.split(":")[1];
+        return { hours: 0, minute: Number(min), seconds: Number(sec) };
+      }
+      if (len.length === 1) {
+        let sec = time.split(":")[0];
+        return { hours: 0, minute: 0, seconds: Number(sec) };
+      }
+      return { hours: 0, minute: 0, seconds: 0 };
+    },
+    // 设置：倒计时定时器
+    setIntervalFun() {
+      let _self = this;
+      // 获取距离目标时间的毫秒时间戳
+      this.interval = setInterval(() => {
+        let curTime = Date.now(); // 获取当前时间的毫秒时间戳
+        let diffTime = this.startTimeSeconds - curTime; // 计算出当前时间距离目标时间的时间差
+        // 判断倒计时是否完成，成立则清除定时器，关闭函数执行
+        if (diffTime <= 0) {
+          clearInterval(_self.interval);
+          _self.timeDiff = "00:00:00";
+          return;
+        }
+        let hours = Math.floor(diffTime / (1000 * 60 * 60));
+        let minutes = Math.floor(
+          (diffTime - hours * 60 * 60 * 1000) / (1000 * 60)
+        );
+        let seconds = Math.floor(
+          (diffTime - hours * 60 * 60 * 1000 - minutes * 60 * 1000) / 1000
+        );
+        let timeDiff = zero(hours) + ":" + zero(minutes) + ":" + zero(seconds);
+        _self.timeDiff = timeDiff;
+        // 数字补零
+        function zero(num) {
+          return num < 10 ? "0" + num : num;
+        }
+      }, 1000);
+    },
+    // 操作：确定
+    handleSureFun() {},
+    // 操作：交卷
+    handleSubmitFun() {}
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.page-exam-question-box {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  font-size: 0.6rem;
+  .exam-question-countdown {
+    height: 2rem;
+    background-color: #f8e7d7;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    span {
+      color: #666;
+    }
+  }
+  .exam-question-div {
+    padding: 0.5rem 0.5rem;
+    .exam-question-card {
+      padding: 0 0.5rem 0.5rem;
+      background-color: #fff;
+      border-radius: 4px;
+      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+      .exam-question-title {
+      }
+      .exam-question-options {
+      }
+      .exam-question-button-box {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        .exam-question-button {
+          width: 6rem;
+          height: auto;
+          padding: 0.5rem 0.5rem;
+          font-size: 0.65rem;
+          margin-top: 0.75rem;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/home/exam/page-exam.vue

@@ -1,7 +1,19 @@
 <template>
-  <div class="scroll">
-    <div class="contentBody">
-      <span>page-exam</span>
+  <div class="page-exam-box">
+    <div class="exam-list">
+      <div
+        class="exam-item"
+        v-for="(item, index) in examList"
+        :key="index"
+        @click="handleClickExamItemFun(item)"
+      >
+        <div class="exam-item-title">{{ item.title }}</div>
+        <div class="exam-item-describe">考试时间：{{ item.examTime }}</div>
+        <div class="exam-item-describe">
+          考试时长：{{ item.examTimeMinsTxt }}
+        </div>
+        <div class="exam-item-describe">考试描述：{{ item.examDescribe }}</div>
+      </div>
     </div>
   </div>
 </template>
@@ -11,12 +23,100 @@ export default {
   name: "page-exam",
   components: {},
   data() {
-    return {};
+    return {
+      examList: []
+    };
   },
   computed: {},
-  methods: {}
+  created() {
+    this.getExamListFun(); // 查询：考试的场次列表信息
+  },
+  methods: {
+    // 查询：考试场次的列表信息
+    getExamListFun() {
+      this.examList = [
+        {
+          id: 1,
+          title: "测试考试-fto",
+          examTime: "",
+          examTimeMins: "05:53:20",
+          examTimeMinsTxt: "05小时53分钟20秒",
+          examDescribe: "可以回家做"
+        },
+        {
+          id: 2,
+          title: "测试考试-xWs",
+          examTime: "",
+          examTimeMins: "17:31:40",
+          examTimeMinsTxt: "17小时31分钟40秒",
+          examDescribe: "可以回家做"
+        },
+        {
+          id: 3,
+          title: "测试考试-vkx",
+          examTime: "",
+          examTimeMins: "12:35:00",
+          examTimeMinsTxt: "12小时35分钟00秒",
+          examDescribe: "可以回家做"
+        },
+        {
+          id: 4,
+          title: "测试考试-bMs",
+          examTime: "",
+          examTimeMins: "10:30:00",
+          examTimeMinsTxt: "10小时30分钟00秒",
+          examDescribe: "可以回家做"
+        },
+        {
+          id: 5,
+          title: "测试考试-yTb",
+          examTime: "",
+          examTimeMins: "02:00:00",
+          examTimeMinsTxt: "02小时00分钟00秒",
+          examDescribe: "可以回家做"
+        }
+      ];
+    },
+    // 操作：点击了某个考试
+    handleClickExamItemFun(item) {
+      this.$store.commit("updateExamStore", {
+        field: "examItem",
+        value: item
+      });
+      this.$router.push({ name: "ExamDetail" });
+    }
+  }
 };
 </script>
 
 <style lang="scss" scoped>
+.page-exam-box {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  font-size: 0.6rem;
+  .exam-list {
+    padding: 0.5rem 0.5rem;
+    .exam-item {
+      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-title {
+        height: 2rem;
+        border-bottom: 1px solid #e4e8eb;
+        line-height: 2rem;
+        text-align: center;
+        font-size: 0.65rem;
+        font-weight: bold;
+        color: #000;
+      }
+      .exam-item-describe {
+        margin-top: 0.5rem;
+      }
+    }
+  }
+}
 </style>

src/views/home/index.vue

@@ -67,7 +67,7 @@ export default {
     };
   },
   created() {
-    this.activeTabName = 1;
+    this.activeTabName = 2;
     this.currentComponents = this.tabbars[this.activeTabName].pageName;
   },
   methods: {