修复bug

src/apis/mock.js

@@ -60,8 +60,39 @@ export default {
 			method: 'get'
 		})
 	},
+
+  mockReport(data) {
+		return request({
+			url: '/mock/record/'+data,
+			method: 'get',
+		})
+	},
+	
+	mockWrongRecord(data) {
+		return request({
+			url: '/mock/wwrong/record',
+			data:data,
+			method: 'POST',
+		})
+	},
+	
+	
+	mockSubscribeEdit(data) {
+		return request({
+			url: '/mock/subscribe/edit',
+			data:data,
+			method: 'POST',
+		})
+	},
 	
   
+	mockApplyListMockLive(data) {
+		return request({
+			url: '/mock/apply/listMockLive',
+			params:data,
+			method: 'get',
+		})
+	},
   
   
   

src/apis/polvy.js

@@ -48,6 +48,17 @@ export default {
     })
   },
 
+  //获取保利威视频信息详细信息
+  studyRecordGetChannelBasicInfo(data) {
+    return request({
+        url: `/study/record/getChannelBasicInfo`,
+        method: 'get',
+        params:data
+    })
+  },
+
+
+  
   
   
 }

src/assets/css/pc.css

@@ -1,16 +1,13 @@
-body {
-  /* background-color: #141518; */
-}
+body {}
 
 .plv-watch-pc {
-  width: 1272;
+  width: 1180px;
   margin: auto;
-  /* padding-top: 50px; */
   background-color: #141518
 }
 
 .plv-pc-menu__container {
-  width: 1272;
+  width: 1180px;
   margin: auto;
   background: #fff;
 }
@@ -26,6 +23,35 @@ body {
   }
 }
 
+@media (min-width: 1440px) {
+  .plv-watch-pc {
+    width: 1350px;
+  }
+
+  .plv-pc-menu__container {
+    width: 1350px;
+  }
+}
+
+@media (min-width: 1600px) {
+  .plv-watch-pc {
+    width: 1430px;
+  }
+
+  .plv-pc-menu__container {
+    width: 1430px;
+  }
+}
+
+@media (min-width: 1920px) {
+  .plv-watch-pc {
+    width: 1680px;
+  }
+
+  .plv-pc-menu__container {
+    width: 1680px;
+  }
+}
 
 
 .plv-watch-pc__top {

src/axios.js

@@ -2,8 +2,8 @@ import axios from 'axios'
 import store from './store'
 // export const BASE_URL = 'https://api.xyyxt.net'   //release
 // export const BASE_URL = 'http://42.192.164.187:19005'    //test
-// export const BASE_URL = 'http://api.xyyxt.net:19009'   //预发布
-export const BASE_URL = 'http://192.168.1.222:5055'    //dev
+export const BASE_URL = 'http://api.xyyxt.net:19009'   //预发布
+// export const BASE_URL = 'http://192.168.1.222:5055'    //dev
 export const tenantId = '867735392558919680'
 
 

src/pages/course-detail/index.vue

@@ -4886,11 +4886,42 @@ export default {
           });
         }
 
+        let data = await this.studyRecordGetChannelBasicInfo(option.liveUrl);
+        if (data.watchStatus == "end" || data.watchStatus == "playback") {
+          this.clickLock = false;
+          this.$message({
+            type: "warning",
+            message: `直播已结束`,
+          });
+          return;
+        }
+
+        if (data.watchStatus == "waiting") {
+          this.clickLock = false;
+          this.$message({
+            type: "warning",
+            message: `直播未开始`,
+          });
+          return;
+        }
+
         this.playVideo(option);
       }
 
       return;
     },
+    studyRecordGetChannelBasicInfo(channelId) {
+      return new Promise((resolve) => {
+        this.$request
+          .studyRecordGetChannelBasicInfo({
+            channelId,
+          })
+          .then((res) => {
+            console.log(res, "channel");
+            resolve(res.data);
+          });
+      });
+    },
     /**
      * 判断是否是当前播放的节
      */
@@ -5121,7 +5152,7 @@ export default {
           this.hasStart = true;
           clearInterval(this.postTimer);
           this.postTimer = setInterval(() => {
-            this.postStudyRecord(0);
+            this.postStudyRecord(0, this.playSectionId, 5);
           }, 5000);
           if (this.recordObj.videoCurrentTime) {
             this.showRecordStatus = true;
@@ -5135,6 +5166,18 @@ export default {
           }
         });
 
+        this.player.on("s2j_onVideoPause", () => {
+          clearInterval(this.postTimer);
+        });
+
+        this.player.on("s2j_onVideoPlay", () => {
+          if (this.postTimer) {
+            this.postTimer = setInterval(() => {
+              this.postStudyRecord(0, this.playSectionId, 5);
+            }, 5000);
+          }
+        });
+
         this.player.on("s2j_onPlayOver", () => {
           this.hasStart = false;
           clearInterval(this.postTimer);

src/pages/home/index.vue

@@ -298,16 +298,7 @@
 
               <div class="history">
                 <div class="btn">上次播放</div>
-                <div
-                  class="title"
-                  @click="
-                    go('/my-course-detail/' + recordList.goodsId, {
-                      gradeId: recordList.gradeId,
-                      orderGoodsId: recordList.orderGoodsId,
-                      courseId: recordList.courseId,
-                    })
-                  "
-                >
+                <div class="title" @click="goLast">
                   {{ recordList.goodsName }}
                 </div>
                 <div class="progress">
@@ -594,6 +585,21 @@ export default {
     },
   },
   methods: {
+    goLast() {
+      if (this.recordList.goodsType == 6) {
+        this.go("/my-live-detail/" + this.recordList.goodsId, {
+          gradeId: this.recordList.gradeId,
+          orderGoodsId: this.recordList.orderGoodsId,
+          courseId: this.recordList.courseId,
+        });
+      } else if (this.recordList.goodsType == 1) {
+        this.go("/my-course-detail/" + this.recordList.goodsId, {
+          gradeId: this.recordList.gradeId,
+          orderGoodsId: this.recordList.orderGoodsId,
+          courseId: this.recordList.courseId,
+        });
+      }
+    },
     swiperJump(swiper) {
       if (swiper.jumpType == 1) {
         //无跳转
@@ -1489,6 +1495,7 @@ export default {
               }
 
               .title {
+                cursor: pointer;
                 margin-top: 15px;
                 padding-right: 15px;
                 font-size: 14px;

src/pages/live-detail/index.vue

@@ -221,6 +221,21 @@
                                                       >
                                                     </div>
                                                   </div>
+                                                  <div
+                                                    v-if="
+                                                      section.sectionType ==
+                                                        3 &&
+                                                      !section.recordingUrl
+                                                    "
+                                                    style="
+                                                      font-size: 12px;
+                                                      color: red;
+                                                    "
+                                                  >
+                                                    <span
+                                                      >当前直播回放视频请稍后再查看</span
+                                                    >
+                                                  </div>
                                                 </div>
                                               </template>
 
@@ -465,6 +480,20 @@
                                                     >
                                                   </div>
                                                 </div>
+                                                <div
+                                                  v-if="
+                                                    section.sectionType == 3 &&
+                                                    !section.recordingUrl
+                                                  "
+                                                  style="
+                                                    font-size: 12px;
+                                                    color: red;
+                                                  "
+                                                >
+                                                  <span
+                                                    >当前直播回放视频请稍后再查看</span
+                                                  >
+                                                </div>
                                               </div>
 
                                               <!-- <template
@@ -671,6 +700,20 @@
                                                 >
                                               </div>
                                             </div>
+                                            <div
+                                              v-if="
+                                                menu.sectionType == 3 &&
+                                                !menu.recordingUrl
+                                              "
+                                              style="
+                                                font-size: 12px;
+                                                color: red;
+                                              "
+                                            >
+                                              <span
+                                                >当前直播回放视频请稍后再查看</span
+                                              >
+                                            </div>
                                           </div>
                                         </template>
 
@@ -2872,7 +2915,10 @@ export default {
           courseId: this.courseId,
         })
         .then((res) => {
-          this.liveLast = res.data;
+          if (res.data) {
+            res.data.sectionType = 2;
+            this.liveLast = res.data;
+          }
         });
     },
     studyRecordQueryLiveLast() {
@@ -4889,51 +4935,51 @@ export default {
           return;
         }
 
-        if (this.businessData.goodsLearningOrder == 2 && !section.isRebuild) {
-          //要按从头到尾顺序学习, 且不是重修课程
-
-          let rows = await this.studyRecordMenuAllList();
-          if (!this.hasPreItem(rows, section)) {
-            //判断是否有上一节
-            let newRows = [];
-            for (let i = 0; i < rows.length; i++) {
-              let moduleTrue =
-                rows[i].moduleId == section.moduleId || rows[i].moduleId == 0;
-              let chapterTrue =
-                rows[i].chapterId == section.chapterId ||
-                rows[i].chapterId == 0;
-              let sectionTrue =
-                rows[i].sectionId == section.sectionId ||
-                rows[i].sectionId == section.menuId;
-              if (moduleTrue && chapterTrue && sectionTrue) {
-                break;
-              } else {
-                if (rows[i].sectionType != 2) {
-                  newRows.push(rows[i]);
-                }
-              }
-            }
-
-            let isAllLearn = newRows.every((item) => {
-              return item.studyStatus == 1;
-            });
-
-            if (isAllLearn) {
-              this.initVideo(section);
-            } else {
-              this.clickLock = false;
-              this.$message({
-                type: "warning",
-                message: "请按顺序学习视频课程",
-              });
-            }
-          } else {
-            //第一章第一节
-            this.initVideo(section);
-          }
-        } else {
-          this.initVideo(section);
-        }
+        // if (this.businessData.goodsLearningOrder == 2 && !section.isRebuild) {
+        //   //要按从头到尾顺序学习, 且不是重修课程
+
+        //   let rows = await this.studyRecordMenuAllList();
+        //   if (!this.hasPreItem(rows, section)) {
+        //     //判断是否有上一节
+        //     let newRows = [];
+        //     for (let i = 0; i < rows.length; i++) {
+        //       let moduleTrue =
+        //         rows[i].moduleId == section.moduleId || rows[i].moduleId == 0;
+        //       let chapterTrue =
+        //         rows[i].chapterId == section.chapterId ||
+        //         rows[i].chapterId == 0;
+        //       let sectionTrue =
+        //         rows[i].sectionId == section.sectionId ||
+        //         rows[i].sectionId == section.menuId;
+        //       if (moduleTrue && chapterTrue && sectionTrue) {
+        //         break;
+        //       } else {
+        //         if (rows[i].sectionType != 2) {
+        //           newRows.push(rows[i]);
+        //         }
+        //       }
+        //     }
+
+        //     let isAllLearn = newRows.every((item) => {
+        //       return item.studyStatus == 1;
+        //     });
+
+        //     if (isAllLearn) {
+        //       this.initVideo(section);
+        //     } else {
+        //       this.clickLock = false;
+        //       this.$message({
+        //         type: "warning",
+        //         message: "请按顺序学习视频课程",
+        //       });
+        //     }
+        //   } else {
+        //     //第一章第一节
+        //     this.initVideo(section);
+        //   }
+        // } else {
+        this.initVideo(section);
+        // }
       }
     },
 
@@ -4983,24 +5029,24 @@ export default {
       if (option.sectionType == 1 || option.sectionType == 3) {
         //录播
 
-        let learnNum = await this.goodsTodayStudySectionNum(option);
-        let hasLearn = await this.gradeCheckGoodsStudy(option);
-        console.log(hasLearn, "hasLearn");
-        console.log(learnNum, "learnNum");
-        console.log(
-          this.goodsData.sectionMaxNum,
-          "this.goodsData.sectionMaxNum"
-        );
-        if (this.goodsData.sectionMaxNum > 0) {
-          if (learnNum >= this.goodsData.sectionMaxNum && !hasLearn) {
-            this.clickLock = false;
-            this.$message({
-              type: "warning",
-              message: `每天最多学习${this.goodsData.sectionMaxNum}节`,
-            });
-            return;
-          }
-        }
+        // let learnNum = await this.goodsTodayStudySectionNum(option);
+        // let hasLearn = await this.gradeCheckGoodsStudy(option);
+        // console.log(hasLearn, "hasLearn");
+        // console.log(learnNum, "learnNum");
+        // console.log(
+        //   this.goodsData.sectionMaxNum,
+        //   "this.goodsData.sectionMaxNum"
+        // );
+        // if (this.goodsData.sectionMaxNum > 0) {
+        //   if (learnNum >= this.goodsData.sectionMaxNum && !hasLearn) {
+        //     this.clickLock = false;
+        //     this.$message({
+        //       type: "warning",
+        //       message: `每天最多学习${this.goodsData.sectionMaxNum}节`,
+        //     });
+        //     return;
+        //   }
+        // }
         if (!option.recordingUrl) {
           this.clickLock = false;
           this.$message({
@@ -5021,19 +5067,19 @@ export default {
       if (option.sectionType == 2) {
         //直播
 
-        let learnNum = await this.goodsTodayStudySectionNum(option);
-        let hasLearn = await this.gradeCheckGoodsStudy(option);
+        // let learnNum = await this.goodsTodayStudySectionNum(option);
+        // let hasLearn = await this.gradeCheckGoodsStudy(option);
 
-        if (this.goodsData.sectionMaxNum > 0) {
-          if (learnNum >= this.goodsData.sectionMaxNum && !hasLearn) {
-            this.clickLock = false;
-            this.$message({
-              type: "warning",
-              message: `每天最多学习${this.goodsData.sectionMaxNum}节`,
-            });
-            return;
-          }
-        }
+        // if (this.goodsData.sectionMaxNum > 0) {
+        //   if (learnNum >= this.goodsData.sectionMaxNum && !hasLearn) {
+        //     this.clickLock = false;
+        //     this.$message({
+        //       type: "warning",
+        //       message: `每天最多学习${this.goodsData.sectionMaxNum}节`,
+        //     });
+        //     return;
+        //   }
+        // }
         if (!option.liveUrl) {
           this.clickLock = false;
           this.$message({
@@ -5043,15 +5089,39 @@ export default {
           return;
         }
 
+        let data = await this.studyRecordGetChannelBasicInfo(option.liveUrl);
         let nowTime = +this.$tools.timest();
 
         if (option.liveStartTime > nowTime) {
-          this.clickLock = false;
-          this.$message({
-            type: "warning",
-            message: `直播未开始`,
-          });
-          return;
+          if (data.watchStatus == "end" || data.watchStatus == "playback") {
+            this.clickLock = false;
+            this.$message({
+              type: "warning",
+              message: `直播未开始`,
+            });
+            return;
+          }
+        } else if (
+          option.liveStartTime < nowTime &&
+          option.liveEndTime > nowTime
+        ) {
+          if (data.watchStatus == "end" || data.watchStatus == "playback") {
+            this.clickLock = false;
+            this.$message({
+              type: "warning",
+              message: `暂无直播`,
+            });
+            return;
+          }
+        } else if (option.liveEndTime < nowTime) {
+          if (data.watchStatus == "end" || data.watchStatus == "playback") {
+            this.clickLock = false;
+            this.$message({
+              type: "warning",
+              message: `直播已结束`,
+            });
+            return;
+          }
         }
 
         this.playVideo(option);
@@ -5059,6 +5129,18 @@ export default {
 
       return;
     },
+    studyRecordGetChannelBasicInfo(channelId) {
+      return new Promise((resolve) => {
+        this.$request
+          .studyRecordGetChannelBasicInfo({
+            channelId,
+          })
+          .then((res) => {
+            console.log(res, "channel");
+            resolve(res.data);
+          });
+      });
+    },
     /**
      * 判断是否是当前播放的节
      */
@@ -5078,6 +5160,7 @@ export default {
     },
 
     async playVideo(option) {
+      console.log(option, "option");
       if (option.sectionType == 1 || option.sectionType == 3) {
         //录播
 
@@ -5112,7 +5195,10 @@ export default {
         if (option.sectionType == 3) {
           this.polyvLiveHistoryChatMsgList();
         }
-
+        this.liveLast = null;
+        if (!this.vid) {
+          return;
+        }
         this.loadPlayerScript(this.loadPlayer);
         setTimeout(() => {
           this.clickLock = false;
@@ -5293,7 +5379,7 @@ export default {
           this.hasStart = true;
           clearInterval(this.postTimer);
           this.postTimer = setInterval(() => {
-            this.postStudyRecord(0);
+            this.postStudyRecord(0, this.playSectionId, 5);
           }, 5000);
           if (this.recordObj.videoCurrentTime) {
             this.showRecordStatus = true;
@@ -5307,6 +5393,18 @@ export default {
           }
         });
 
+        this.player.on("s2j_onVideoPause", () => {
+          clearInterval(this.postTimer);
+        });
+
+        this.player.on("s2j_onVideoPlay", () => {
+          if (this.postTimer) {
+            this.postTimer = setInterval(() => {
+              this.postStudyRecord(0, this.playSectionId, 5);
+            }, 5000);
+          }
+        });
+
         this.player.on("s2j_onPlayOver", () => {
           this.hasStart = false;
           clearInterval(this.postTimer);
@@ -5640,13 +5738,15 @@ export default {
     /**
      * 提交观看记录
      */
-    postStudyRecord(status = 0, sectionId = this.playSectionId) {
+    postStudyRecord(
+      status = 0,
+      sectionId = this.playSectionId,
+      PlayDuration = 0
+    ) {
       let currentTime = 0;
-      let PlayDuration = 0;
       var polyvPlayerContext = this.player;
       if (polyvPlayerContext) {
         currentTime = polyvPlayerContext.j2s_getCurrentTime(); //当前视频播放时刻
-        PlayDuration = polyvPlayerContext.j2s_realPlayVideoTime(); //本次看的时长
       }
       if (this.vidzb) {
         currentTime = 2; //直播无法获取，无论开始结束都传2秒
@@ -6513,6 +6613,10 @@ export default {
             }
 
             .live-btn {
+              position: absolute;
+              left: 0;
+              top: 0;
+              z-index: 999;
               overflow: hidden;
               width: 100%;
               height: 100%;

src/pages/live-list/index.vue

@@ -8,7 +8,7 @@
             <el-breadcrumb-item :to="{ path: '/index' }"
               >首页</el-breadcrumb-item
             >
-            <el-breadcrumb-item>题库</el-breadcrumb-item>
+            <el-breadcrumb-item>直播</el-breadcrumb-item>
           </el-breadcrumb>
         </div>
       </div>

src/pages/living-room/index.vue

@@ -13,51 +13,49 @@
           >返回</el-button
         >
       </div>
-      <!-- pc端 -->
-      <div class="plv-watch-pc">
-        <div class="plv-watch-pc__top" id="plv-pc-top">
-          <div class="plv-watch-pc__screen plv-watch-pc__screen-main">
-            <div class="plv-watch-pc__screen__height">
-              <div class="plv-watch-pc__screen__inner" id="plv-pc-main"></div>
-            </div>
+    </div>
+    <!-- pc端 -->
+    <div class="plv-watch-pc">
+      <div class="plv-watch-pc__top" id="plv-pc-top">
+        <div class="plv-watch-pc__screen plv-watch-pc__screen-main">
+          <div class="plv-watch-pc__screen__height">
+            <div class="plv-watch-pc__screen__inner" id="plv-pc-main"></div>
           </div>
+        </div>
 
-          <div class="plv-watch-pc__screen plv-watch-pc__screen-sub">
-            <div class="plv-watch-pc__screen__height">
-              <div class="plv-watch-pc__screen__inner" id="plv-pc-side"></div>
-            </div>
+        <div class="plv-watch-pc__screen plv-watch-pc__screen-sub">
+          <div class="plv-watch-pc__screen__height">
+            <div class="plv-watch-pc__screen__inner" id="plv-pc-side"></div>
           </div>
+        </div>
 
-          <div class="plv-watch-pc__side">
-            <div
-              class="plv-watch-pc__chat plv-skin--dark"
-              id="plv-pc-chat"
-            ></div>
-          </div>
+        <div class="plv-watch-pc__side">
+          <div class="plv-watch-pc__chat plv-skin--dark" id="plv-pc-chat"></div>
         </div>
+      </div>
 
-        <div id="plv-pc-channel-info" class="plv-watch-pc__info">
-          <img
-            class="plv-watch-pc__info__logo"
-            src="https://live.polyv.cn/assets/wimages/pc_images/logo.png"
-          />
-          <div class="plv-watch-pc__info__desc">
-            <p class="plv-watch-pc__info__desc__name"></p>
-            <span class="plv-watch-pc__info__desc__publisher-ico"></span>
-            <span class="plv-watch-pc__info__desc__publisher"></span>
-            <span class="plv-watch-pc__info__desc__view"></span>
-          </div>
+      <div id="plv-pc-channel-info" class="plv-watch-pc__info">
+        <img
+          class="plv-watch-pc__info__logo"
+          src="https://live.polyv.cn/assets/wimages/pc_images/logo.png"
+        />
+        <div class="plv-watch-pc__info__desc">
+          <p class="plv-watch-pc__info__desc__name"></p>
+          <span class="plv-watch-pc__info__desc__publisher-ico"></span>
+          <span class="plv-watch-pc__info__desc__publisher"></span>
+          <span class="plv-watch-pc__info__desc__view"></span>
         </div>
       </div>
+    </div>
 
-      <!-- pc菜单栏 -->
-      <!-- <div class="plv-pc-menu">
+    <!-- pc菜单栏 -->
+    <!-- <div class="plv-pc-menu">
         <div class="plv-pc-menu__container">
           <ul id="plv-menu-tab" class="plv-pc-menu__tab"></ul>
           <div id="plv-menu-content" class="plv-pc-menu__content"></div>
         </div>
       </div> -->
-    </div>
+    <!-- </div> -->
     <!-- <div class="container">
       <div ref="living" id="living" class="living">
         <div
@@ -90,6 +88,39 @@
       </div>
     </div> -->
     <Footer></Footer>
+
+    <el-dialog
+      width="462px"
+      class="sign-modal"
+      :visible.sync="signModal"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+    >
+      <div class="sign-modal__content">
+        <img class="img" src="@/assets/sign.png" alt="" />
+        <div class="box">
+          <div class="title">直播已经开始啦，赶紧签到进入直播吧！</div>
+          <el-button type="primary" class="btn" @click="close"
+            >立即签到</el-button
+          >
+        </div>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      width="400px"
+      class="sign-success"
+      :visible.sync="signSuccess"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+    >
+      <div class="sign-success__content">
+        <img class="img" src="@/assets/appoinsuccess.png" alt="" />
+        <div class="title">签到成功！</div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -112,6 +143,8 @@ export default {
   },
   data() {
     return {
+      signSuccess: false,
+      signModal: false,
       playerJs: "https://player.polyv.net/livesdk/polyv-live.min.js",
       chatroomJs: "https://player.polyv.net/jssdk/polyv-chatroom.min.js",
       uidzb: "egsxlptzdq",
@@ -140,6 +173,7 @@ export default {
       playTime: 0,
       duraing: 0,
       timer: null,
+      liveLast: null,
       isFirst: true,
     };
   },
@@ -151,11 +185,12 @@ export default {
     this.goodsId = this.$route.query.goodsId;
     this.courseId = this.$route.query.courseId;
     this.orderGoodsId = this.$route.query.orderGoodsId;
-    this.gradeId = this.$route.query.gradeId;
+    this.gradeId = +this.$route.query.gradeId;
     this.chapterId = this.$route.query.chapterId;
     this.moduleId = this.$route.query.moduleId;
     this.channelId = this.$route.params.channelId;
     this.playVideo();
+    this.studyRecordGetLastLive();
   },
   beforeDestroy() {
     this.plv.liveSdk.destroy();
@@ -163,7 +198,13 @@ export default {
   },
   methods: {
     ...mapMutations(["getCartCount"]),
-
+    close() {
+      this.signModal = false;
+      this.signSuccess = true;
+      setTimeout(() => {
+        this.signSuccess = false;
+      }, 1000);
+    },
     polyvLivesign() {
       console.log(this.channelId);
       this.$request
@@ -189,6 +230,24 @@ export default {
       this.polyvLivesign();
     },
 
+    /**
+     * 获取上次观看的直播
+     */
+    studyRecordGetLastLive() {
+      if (!this.gradeId && this.sectionId) {
+        this.$request
+          .studyRecordGetLastLive({
+            orderGoodsId: this.orderGoodsId,
+            courseId: this.courseId,
+          })
+          .then((res) => {
+            if (!res.data) {
+              this.signModal = true;
+            }
+          });
+      }
+    },
+
     jquery() {
       return new Promise((resolve) => {
         if (!window.polyvLivePlayer) {
@@ -342,6 +401,9 @@ export default {
     },
 
     studyRecord(status, duraing) {
+      if (!this.sectionId) {
+        return;
+      }
       let self = this;
       this.$request.studyRecord({
         sectionId: parseInt(this.sectionId),
@@ -447,9 +509,6 @@ export default {
 <style scoped lang="scss">
 .living-room {
   background: #eee;
-  .container {
-    margin: 10px auto;
-  }
   .top-line {
     margin: 10px 0;
     .float-right {
@@ -500,5 +559,80 @@ export default {
       bottom: 0;
     }
   }
+
+  .sign-modal {
+    /deep/ .el-dialog__header {
+      display: none;
+    }
+    /deep/ .el-dialog__body {
+      padding: 0;
+      overflow: unset;
+    }
+
+    &__content {
+      .img {
+        width: 462px;
+        display: block;
+      }
+
+      .box {
+        padding: 24px 0;
+        background: #ffffff;
+
+        .title {
+          font-size: 16px;
+          font-weight: bold;
+          color: #333333;
+          line-height: 24px;
+          text-align: center;
+        }
+
+        .btn {
+          display: block;
+          margin: 40px auto 0;
+          width: 200px;
+          height: 40px;
+          padding: 0;
+          text-align: center;
+          line-height: 40px;
+          border-radius: 8px;
+        }
+      }
+    }
+  }
+
+  .sign-success {
+    /deep/ .el-dialog__header {
+      display: none;
+    }
+    /deep/ .el-dialog__body {
+      padding: 0;
+      overflow: unset;
+    }
+
+    &__content {
+      width: 400px;
+      height: 200px;
+      position: relative;
+      background: #ffffff;
+      border-radius: 8px;
+      .img {
+        position: absolute;
+        left: 50%;
+        top: -54px;
+        width: 196px;
+        margin-left: -98px;
+        display: block;
+      }
+      .title {
+        padding-top: 120px;
+        font-size: 16px;
+        font-weight: bold;
+        color: #333333;
+        line-height: 24px;
+        text-align: center;
+      }
+    }
+  }
 }
 </style>

src/pages/mock-countdown/index.vue

@@ -17,12 +17,18 @@
 
         <div class="title">距离管理开考还有</div>
         <div class="countdown">
-          <div class="box">08</div>
+          <div class="box">{{ getDuring("minutes") }}</div>
           <span class="pin">:</span>
-          <div class="box">56</div>
+          <div class="box">{{ getDuring("seconds") }}</div>
         </div>
 
-        <el-button class="btn" type="primary">开始考试</el-button>
+        <el-button
+          class="btn"
+          :disabled="!(nowTime > start && nowTime < end)"
+          @click="examBank()"
+          type="primary"
+          >开始考试</el-button
+        >
       </div>
     </section>
     <Footer></Footer>
@@ -41,11 +47,77 @@ export default {
     ToolBar,
   },
   data() {
-    return {};
+    return {
+      state: 1,
+      start: 0,
+      timer: null,
+      timeText: "",
+      nowTime: 0,
+      timeLimit: 0,
+      examId: 0,
+      end: 0,
+      eachExamId: 0,
+      subscribeId: 0,
+    };
   },
   computed: {},
-  mounted() {},
-  methods: {},
+  mounted() {
+    this.subscribeId = this.$route.query.subscribeId;
+    this.eachExamId = this.$route.query.eachExamId;
+    this.examId = this.$route.query.examId;
+    this.timeLimit = +this.$route.query.timeLimit || 0;
+    this.start = +this.$route.query.start;
+    this.end = this.timeLimit * 60 + this.start;
+    this.timer = setInterval(() => {
+      this.timeText = this.getDuring();
+    }, 1000);
+  },
+  methods: {
+    getDuring(type) {
+      this.nowTime = +this.$tools.timest();
+      let during = this.start - this.nowTime;
+      if (during <= 0) {
+        if (type == "minutes") {
+          return "00";
+        }
+
+        if (type == "seconds") {
+          return "00";
+        }
+        return "00:00";
+      }
+
+      let minutes =
+        parseInt(during / 60) >= 10
+          ? "0" + parseInt(during / 60)
+          : parseInt(during / 60);
+      let seconds = during % 60 >= 10 ? during % 60 : "0" + (during % 60);
+
+      if (type == "minutes") {
+        return minutes;
+      }
+
+      if (type == "seconds") {
+        return seconds;
+      }
+      return minutes + ":" + seconds;
+    },
+    canTest() {},
+    examBank() {
+      if (this.nowTime > this.start && this.nowTime < this.end) {
+        this.$router.push({
+          path: "/mock-exam",
+          query: {
+            examId: this.examId,
+            eachExamId: this.eachExamId,
+            subscribeId: this.subscribeId,
+          },
+        });
+      } else {
+        this.$message.warning("不在考试时间");
+      }
+    },
+  },
 };
 </script>
 

src/pages/mock-exam-all-explain/index.vue

@@ -0,0 +1,1665 @@
+<template>
+  <div class="course-exam">
+    <Header></Header>
+    <section class="section">
+      <div class="container">
+        <div class="section__header">
+          <!-- <el-breadcrumb separator="/">
+            <el-breadcrumb-item
+              v-for="(item, index) in $route.matched"
+              :key="index"
+              :to="{ path: item.path }"
+              >{{ item.name }}</el-breadcrumb-item
+            >
+          </el-breadcrumb> -->
+        </div>
+        <div class="section__body">
+          <div class="explain-record">
+            <div class="explain-record__body clearfix">
+              <div class="left-box">
+                <div class="left-box__header">
+                  <el-progress
+                    class="progress"
+                    :text-inside="true"
+                    :stroke-width="26"
+                    :percentage="
+                      toFixed(
+                        (questionOverNum(true) / questionList.length) * 100
+                      ) || 0
+                    "
+                  ></el-progress>
+                  <div class="text">
+                    已完成<span>{{ questionOverNum(true) }}</span
+                    >/{{ questionList.length }}道题
+                  </div>
+                </div>
+                <div class="left-box__footer">
+                  <div class="btn" @click="prevQuestion">上一题</div>
+                  <div class="btn" @click="nextQuestion">下一题</div>
+                </div>
+                <div class="left-box__body">
+                  <template v-for="(question, questionIndex) in questionList">
+                    <div
+                      class="question"
+                      v-if="question.type == 1 && current == questionIndex"
+                      :key="questionIndex"
+                    >
+                      <div class="question__title">
+                        {{ questionIndex + 1 }}、单选题
+                      </div>
+                      <div
+                        class="question__desc"
+                        v-html="question.content"
+                      ></div>
+                      <div class="question__content">
+                        <div class="question-list" v-if="!question.ques">
+                          <div
+                            class="radio"
+                            v-for="(item, index) in question.jsonStr"
+                            :key="index"
+                          >
+                            <div>
+                              {{ ast[index] }}. {{ item.content }}
+                              <div v-if="item.imgUrl">
+                                <img
+                                  style="max-width: 100%"
+                                  :src="$tools.splitImgHost(item.imgUrl)"
+                                  alt=""
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="question-list" v-if="question.ques">
+                          <div
+                            class="radio"
+                            :class="{
+                              right:
+                                item.optionsId == question.ques ||
+                                item.optionsId == question.ans,
+                              wrong:
+                                item.optionsId == question.ques &&
+                                question.ques != question.ans,
+                            }"
+                            v-for="(item, index) in question.jsonStr"
+                            :key="index"
+                          >
+                            <div>
+                              {{ ast[index] }}. {{ item.content }}
+                              <div v-if="item.imgUrl">
+                                <img
+                                  style="max-width: 100%"
+                                  :src="$tools.splitImgHost(item.imgUrl)"
+                                  alt=""
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="answer-list">
+                          <div class="answer-list__left">
+                            正确答案：{{ ast[question.ans - 1] }}
+                          </div>
+                          <div class="answer-list__left">
+                            我的答案：{{ ast[question.ques - 1] }}
+                          </div>
+                        </div>
+                        <div class="explain-list">
+                          <div class="explain-list__header">答案解析：</div>
+                          <div
+                            class="explain-list__body"
+                            v-html="question.analysisContent"
+                          ></div>
+                        </div>
+                      </div>
+                      <div class="question__btns">
+                        <!-- <div class="collect" @click="collect">收藏本题</div> -->
+                      </div>
+                    </div>
+                    <div
+                      class="question"
+                      v-if="question.type == 2 && current == questionIndex"
+                      :key="questionIndex"
+                    >
+                      <div class="question__title">
+                        {{ questionIndex + 1 }}、多选题
+                      </div>
+                      <div
+                        class="question__desc"
+                        v-html="question.content"
+                      ></div>
+                      <div class="question__content">
+                        <div class="question-list" v-if="!question.ques">
+                          <el-checkbox
+                            disabled
+                            class="checkbox"
+                            v-for="(item, index) in question.jsonStr"
+                            :key="index"
+                            :label="item.optionsId"
+                            v-model="item.checked"
+                          >
+                            <div>
+                              {{ ast[index] }}. {{ item.content }}
+                              <div v-if="item.imgUrl">
+                                <img
+                                  style="max-width: 100%"
+                                  :src="$tools.splitImgHost(item.imgUrl)"
+                                  alt=""
+                                />
+                              </div>
+                            </div>
+                          </el-checkbox>
+                        </div>
+                        <div class="question-list" v-if="question.ques">
+                          <el-checkbox
+                            disabled
+                            class="checkbox"
+                            :class="{
+                              right:
+                                question.ques.indexOf(item.optionsId) != -1 ||
+                                question.ans.indexOf(item.optionsId) != -1,
+                              wrong:
+                                question.ques.indexOf(item.optionsId) != -1 &&
+                                question.ans.indexOf(item.optionsId) == -1,
+                            }"
+                            v-for="(item, index) in question.jsonStr"
+                            :key="index"
+                            :label="item.optionsId"
+                            v-model="item.checked"
+                          >
+                            <div>
+                              {{ ast[index] }}. {{ item.content }}
+                              <div v-if="item.imgUrl">
+                                <img
+                                  style="max-width: 100%"
+                                  :src="$tools.splitImgHost(item.imgUrl)"
+                                  alt=""
+                                />
+                              </div>
+                            </div>
+                          </el-checkbox>
+                        </div>
+                        <div class="answer-list">
+                          <div class="answer-list__left">
+                            正确答案：
+                            <template v-for="ansItem in question.ans">{{
+                              ast[ansItem - 1]
+                            }}</template>
+                          </div>
+                          <div class="answer-list__left">
+                            我的答案：
+                            <template v-for="quesItem in question.ques">{{
+                              ast[quesItem - 1]
+                            }}</template>
+                          </div>
+                        </div>
+                        <div class="explain-list">
+                          <div class="explain-list__header">答案解析：</div>
+                          <div
+                            class="explain-list__body"
+                            v-html="question.analysisContent"
+                          ></div>
+                        </div>
+                      </div>
+                      <div class="question__btns">
+                        <!-- <div class="collect" @click="collect">收藏本题</div> -->
+                      </div>
+                    </div>
+                    <div
+                      class="question"
+                      v-if="question.type == 3 && current == questionIndex"
+                      :key="questionIndex"
+                    >
+                      <div class="question__title">
+                        {{ questionIndex + 1 }}、判断题
+                      </div>
+                      <div
+                        class="question__desc"
+                        v-html="question.content"
+                      ></div>
+                      <div class="question__content">
+                        <div class="question-list" v-if="!question.ques">
+                          <div
+                            class="radio"
+                            v-for="(item, index) in judge"
+                            :key="index"
+                          >
+                            <div>
+                              {{ ast[index] }}. {{ item }}
+                              <div v-if="item.imgUrl">
+                                <img
+                                  style="max-width: 100%"
+                                  :src="$tools.splitImgHost(item.imgUrl)"
+                                  alt=""
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="question-list" v-if="question.ques">
+                          <div
+                            class="radio"
+                            :class="{
+                              right:
+                                index == question.ques || index == question.ans,
+                              wrong:
+                                index == question.ques &&
+                                question.ques != question.ans,
+                            }"
+                            v-for="(item, index) in judge"
+                            :key="index"
+                          >
+                            <div>
+                              {{ ast[index] }}. {{ item }}
+                              <div v-if="item.imgUrl">
+                                <img
+                                  style="max-width: 100%"
+                                  :src="$tools.splitImgHost(item.imgUrl)"
+                                  alt=""
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="answer-list">
+                          <div class="answer-list__left">
+                            正确答案：{{ ast[question.ans] }}
+                          </div>
+                          <div class="answer-list__left">
+                            我的答案：{{ ast[question.ques] }}
+                          </div>
+                        </div>
+                        <div class="explain-list">
+                          <div class="explain-list__header">答案解析：</div>
+                          <div
+                            class="explain-list__body"
+                            v-html="question.analysisContent"
+                          ></div>
+                        </div>
+                      </div>
+                      <div class="question__btns">
+                        <!-- <div class="collect" @click="collect">收藏本题</div> -->
+                      </div>
+                    </div>
+                    <div
+                      class="question"
+                      v-if="question.type == 4 && current == questionIndex"
+                      :key="questionIndex"
+                    >
+                      <div class="question__title">
+                        {{ questionIndex + 1 }}、案例题
+                      </div>
+                      <div class="question__content">
+                        <el-tabs v-model="question.tabIndex">
+                          <el-tab-pane
+                            v-for="(json, jsonIndex) in question.jsonStr"
+                            :label="'问题' + (jsonIndex + 1)"
+                            :name="jsonIndex + ''"
+                            :key="jsonIndex"
+                          >
+                            <div
+                              class="question"
+                              v-if="json.type == 1"
+                              :key="questionIndex"
+                            >
+                              <div class="question__title">
+                                {{ jsonIndex + 1 }}、单选题
+                              </div>
+                              <div
+                                class="question__desc"
+                                v-html="json.content"
+                              ></div>
+                              <div class="question__content">
+                                <div
+                                  class="question-list"
+                                  v-if="!question.ques[jsonIndex]"
+                                >
+                                  <div
+                                    class="radio"
+                                    v-for="(item, index) in json.optionsList"
+                                    :key="index"
+                                  >
+                                    <div>
+                                      {{ ast[index] }}. {{ item.content }}
+                                      <div v-if="item.imgUrl">
+                                        <img
+                                          style="max-width: 100%"
+                                          :src="
+                                            $tools.splitImgHost(item.imgUrl)
+                                          "
+                                          alt=""
+                                        />
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  class="question-list"
+                                  v-if="question.ques[jsonIndex]"
+                                >
+                                  <div
+                                    class="radio"
+                                    :class="{
+                                      right:
+                                        item.optionsId ==
+                                          question.ques[jsonIndex] ||
+                                        item.optionsId ==
+                                          question.ans[jsonIndex],
+                                      wrong:
+                                        item.optionsId ==
+                                          question.ques[jsonIndex] &&
+                                        question.ques[jsonIndex] !=
+                                          question.ans[jsonIndex],
+                                    }"
+                                    v-for="(item, index) in json.optionsList"
+                                    :key="index"
+                                  >
+                                    <div>
+                                      {{ ast[index] }}. {{ item.content }}
+                                      <div v-if="item.imgUrl">
+                                        <img
+                                          style="max-width: 100%"
+                                          :src="
+                                            $tools.splitImgHost(item.imgUrl)
+                                          "
+                                          alt=""
+                                        />
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div class="answer-list">
+                                  <div class="answer-list__left">
+                                    正确答案：{{
+                                      ast[question.ans[jsonIndex] - 1]
+                                    }}
+                                  </div>
+                                  <div class="answer-list__left">
+                                    我的答案：{{
+                                      ast[question.ques[jsonIndex] - 1]
+                                    }}
+                                  </div>
+                                </div>
+                                <div class="explain-list">
+                                  <div class="explain-list__header">
+                                    答案解析：
+                                  </div>
+                                  <div
+                                    class="explain-list__body"
+                                    v-html="json.analysisContent"
+                                  ></div>
+                                </div>
+                              </div>
+                              <div class="question__btns"></div>
+                            </div>
+                            <div
+                              class="question"
+                              v-if="json.type == 2"
+                              :key="jsonIndex"
+                            >
+                              <div class="question__title">
+                                {{ jsonIndex + 1 }}、多选题
+                              </div>
+                              <div
+                                class="question__desc"
+                                v-html="json.content"
+                              ></div>
+                              <div class="question__content">
+                                <div
+                                  class="question-list"
+                                  v-if="!question.ques[jsonIndex]"
+                                >
+                                  <el-checkbox
+                                    disabled
+                                    class="checkbox"
+                                    v-for="(item, index) in json.optionsList"
+                                    :key="index"
+                                    :label="item.optionsId"
+                                    v-model="item.checked"
+                                  >
+                                    <div>
+                                      {{ ast[index] }}. {{ item.content }}
+                                      <div v-if="item.imgUrl">
+                                        <img
+                                          style="max-width: 100%"
+                                          :src="
+                                            $tools.splitImgHost(item.imgUrl)
+                                          "
+                                          alt=""
+                                        />
+                                      </div>
+                                    </div>
+                                  </el-checkbox>
+                                </div>
+                                <div
+                                  class="question-list"
+                                  v-if="question.ques[jsonIndex]"
+                                >
+                                  <el-checkbox
+                                    disabled
+                                    class="checkbox"
+                                    :class="{
+                                      right:
+                                        question.ques[jsonIndex].indexOf(
+                                          item.optionsId
+                                        ) != -1 ||
+                                        question.ans[jsonIndex].indexOf(
+                                          item.optionsId
+                                        ) != -1,
+                                      wrong:
+                                        question.ques[jsonIndex].indexOf(
+                                          item.optionsId
+                                        ) != -1 &&
+                                        question.ans[jsonIndex].indexOf(
+                                          item.optionsId
+                                        ) == -1,
+                                    }"
+                                    v-for="(item, index) in json.optionsList"
+                                    :key="index"
+                                    :label="item.optionsId"
+                                    v-model="item.checked"
+                                  >
+                                    <div>
+                                      {{ ast[index] }}. {{ item.content }}
+                                      <div v-if="item.imgUrl">
+                                        <img
+                                          style="max-width: 100%"
+                                          :src="
+                                            $tools.splitImgHost(item.imgUrl)
+                                          "
+                                          alt=""
+                                        />
+                                      </div>
+                                    </div>
+                                  </el-checkbox>
+                                </div>
+                                <div class="answer-list">
+                                  <div class="answer-list__left">
+                                    正确答案：
+                                    <template
+                                      v-for="ansItem in question.ans[jsonIndex]"
+                                      >{{ ast[ansItem - 1] }}</template
+                                    >
+                                  </div>
+                                  <div class="answer-list__left">
+                                    我的答案：
+                                    <template
+                                      v-for="quesItem in question.ques[
+                                        jsonIndex
+                                      ]"
+                                      >{{ ast[quesItem - 1] }}</template
+                                    >
+                                  </div>
+                                </div>
+                                <div class="explain-list">
+                                  <div class="explain-list__header">
+                                    答案解析：
+                                  </div>
+                                  <div
+                                    class="explain-list__body"
+                                    v-html="json.analysisContent"
+                                  ></div>
+                                </div>
+                              </div>
+                              <div class="question__btns"></div>
+                            </div>
+                            <div
+                              class="question"
+                              v-if="json.type == 3"
+                              :key="jsonIndex"
+                            >
+                              <div class="question__title">
+                                {{ jsonIndex + 1 }}、判断题
+                              </div>
+                              <div
+                                class="question__desc"
+                                v-html="json.content"
+                              ></div>
+                              <div class="question__content">
+                                <div
+                                  class="question-list"
+                                  v-if="!question.ques[jsonIndex]"
+                                >
+                                  <div
+                                    class="radio"
+                                    v-for="(item, index) in judge"
+                                    :key="index"
+                                  >
+                                    <div>
+                                      {{ ast[index] }}. {{ item }}
+                                      <div v-if="item.imgUrl">
+                                        <img
+                                          style="max-width: 100%"
+                                          :src="
+                                            $tools.splitImgHost(item.imgUrl)
+                                          "
+                                          alt=""
+                                        />
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  class="question-list"
+                                  v-if="question.ques[jsonIndex]"
+                                >
+                                  <div
+                                    class="radio"
+                                    :class="{
+                                      right:
+                                        index == question.ques[jsonIndex] ||
+                                        index == question.ans[jsonIndex],
+                                      wrong:
+                                        index == question.ques[jsonIndex] &&
+                                        question.ques[jsonIndex] !=
+                                          question.ans[jsonIndex],
+                                    }"
+                                    v-for="(item, index) in judge"
+                                    :key="index"
+                                  >
+                                    <div>
+                                      {{ ast[index] }}. {{ item }}
+                                      <div v-if="item.imgUrl">
+                                        <img
+                                          style="max-width: 100%"
+                                          :src="
+                                            $tools.splitImgHost(item.imgUrl)
+                                          "
+                                          alt=""
+                                        />
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div class="answer-list">
+                                  <div class="answer-list__left">
+                                    正确答案：{{ ast[question.ans[jsonIndex]] }}
+                                  </div>
+                                  <div class="answer-list__left">
+                                    我的答案：{{
+                                      ast[question.ques[jsonIndex]]
+                                    }}
+                                  </div>
+                                </div>
+                                <div class="explain-list">
+                                  <div class="explain-list__header">
+                                    答案解析：
+                                  </div>
+                                  <div
+                                    class="explain-list__body"
+                                    v-html="json.analysisContent"
+                                  ></div>
+                                </div>
+                              </div>
+                              <div class="question__btns"></div>
+                            </div>
+
+                            <div
+                              class="question"
+                              v-if="json.type == 5"
+                              :key="jsonIndex"
+                            >
+                              <div class="question__title">
+                                {{ jsonIndex + 1 }}、简答题
+                              </div>
+                              <div
+                                class="question__desc"
+                                v-html="json.content"
+                              ></div>
+                              <div class="question__content">
+                                <div class="explain-list">
+                                  <div class="explain-list__header">
+                                    我的答案:
+                                  </div>
+                                  <div class="explain-list__body">
+                                    <div>
+                                      {{
+                                        question.ques[jsonIndex] &&
+                                        question.ques[jsonIndex].text
+                                      }}
+                                    </div>
+                                    <div class="upload clearfix">
+                                      <div
+                                        class="upload__imgs"
+                                        v-for="(img, imgIndex) in question.ques[
+                                          jsonIndex
+                                        ] && question.ques[jsonIndex].imageList"
+                                        :key="imgIndex"
+                                      >
+                                        <img
+                                          :src="$tools.splitImgHost(img, true)"
+                                          alt=""
+                                        />
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div class="explain-list__header">
+                                    答案解析：
+                                  </div>
+                                  <div
+                                    class="explain-list__body"
+                                    v-html="question.analysisContent"
+                                  ></div>
+                                </div>
+                              </div>
+                              <div class="question__btns"></div>
+                            </div>
+                          </el-tab-pane>
+                        </el-tabs>
+                      </div>
+                      <div class="question__btns">
+                        <!-- <div class="collect" @click="collect">收藏本题</div> -->
+                      </div>
+                    </div>
+                    <div
+                      class="question"
+                      v-if="question.type == 5 && current == questionIndex"
+                      :key="questionIndex"
+                    >
+                      <div class="question__title">
+                        {{ questionIndex + 1 }}、简答题
+                      </div>
+                      <div
+                        class="question__desc"
+                        v-html="question.content"
+                      ></div>
+                      <div class="question__content">
+                        <div class="explain-list">
+                          <div class="explain-list__header">我的答案:</div>
+                          <div class="explain-list__body">
+                            <div>{{ question.ques.text }}</div>
+                            <div class="upload clearfix">
+                              <div
+                                class="upload__imgs"
+                                v-for="(img, imgIndex) in question.ques
+                                  .imageList"
+                                :key="imgIndex"
+                              >
+                                <img
+                                  :src="$tools.splitImgHost(img, true)"
+                                  alt=""
+                                />
+                              </div>
+                            </div>
+                          </div>
+                          <div class="explain-list__header">答案解析：</div>
+                          <div
+                            class="explain-list__body"
+                            v-html="question.analysisContent"
+                          ></div>
+                        </div>
+                      </div>
+                      <div class="question__btns">
+                        <!-- <div class="collect" @click="collect">收藏本题</div> -->
+                      </div>
+                    </div>
+                  </template>
+                </div>
+              </div>
+              <div class="right-box">
+                <div class="right-box__header">
+                  <el-button
+                    type="primary"
+                    round
+                    plain
+                    size="small"
+                    class="back-btn"
+                    @click="$router.back(-1)"
+                    >返回</el-button
+                  >
+                </div>
+                <div class="right-box__header">答题卡</div>
+                <div class="right-box__body">
+                  <div class="card">
+                    <div class="card__note">
+                      <div class="item">
+                        <div class="box green"></div>
+                        正确
+                      </div>
+                      <div class="item">
+                        <div class="box red"></div>
+                        错误
+                      </div>
+                      <div class="item">
+                        <div class="box blue"></div>
+                        已做未评改
+                      </div>
+
+                      <div class="item">
+                        <div class="box yellow"></div>
+                        少选
+                      </div>
+                      <div class="item">
+                        <div class="box white"></div>
+                        未做
+                      </div>
+                    </div>
+                    <div class="card__content">
+                      <ul class="list">
+                        <li
+                          class="item white"
+                          v-for="(item, index) in questionList"
+                          :key="index"
+                          :class="{
+                            green: isRight(item, index),
+                            red: isWrong(item, index),
+                            yellow: isPart(item, index),
+                            blue: isOver(item, index),
+                          }"
+                          @click="changeIndex(index)"
+                        >
+                          {{ index + 1 }}
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <ToolBar></ToolBar>
+    <Footer></Footer>
+  </div>
+</template>
+
+<script>
+import Footer from "@/components/footer/index";
+import Header from "@/components/header/index";
+import ToolBar from "@/components/toolbar/index";
+import { mapMutations } from "vuex";
+export default {
+  name: "BankExplain",
+  components: {
+    Footer,
+    Header,
+    ToolBar,
+  },
+  data() {
+    return {
+      recordId: 0,
+      questionIndex: 0,
+      checked: false,
+      questionList: [],
+      judge: ["错误", "正确"],
+      ast: [
+        "A",
+        "B",
+        "C",
+        "D",
+        "E",
+        "F",
+        "G",
+        "H",
+        "I",
+        "J",
+        "K",
+        "L",
+        "M",
+        "N",
+        "O",
+        "P",
+        "Q",
+        "R",
+        "S",
+        "T",
+        "U",
+        "V",
+        "W",
+        "X",
+        "Y",
+        "Z",
+      ],
+      lastCount: 0,
+      examId: 0,
+      goodsId: 0,
+      courseId: 0,
+      gradeId: 0,
+      moduleId: 0,
+      chapterId: 0,
+      current: 0,
+    };
+  },
+  async mounted() {
+    this.recordId = this.$route.params.recordId;
+    this.examId = this.$route.query.examId;
+    this.goodsQuestionList();
+  },
+  methods: {
+    ...mapMutations(["setExamResult"]),
+    toFixed(num) {
+      if (num) {
+        let str = String(num).indexOf(".");
+
+        if (str != -1) {
+          return +num.toFixed(2);
+        } else {
+          return num;
+        }
+      } else {
+        return 0;
+      }
+    },
+
+    changeIndex(index) {
+      this.current = index;
+    },
+
+    /**
+     * 请求题目列表
+     */
+    goodsQuestionList() {
+      this.$request.mockReport(this.recordId).then(async (res) => {
+        this.questionList = JSON.parse(res.data.historyExamJson);
+      });
+    },
+
+    nextQuestion() {
+      if (this.current >= this.questionList.length - 1) {
+        this.$message({
+          type: "warning",
+          message: "已经是最后一题了！",
+        });
+        return;
+      }
+      this.current++;
+    },
+    prevQuestion() {
+      if (this.current == 0) {
+        this.$message({
+          type: "warning",
+          message: "已经是第一题了！",
+        });
+        return;
+      } else {
+        this.current--;
+      }
+    },
+    isOver(item, index) {
+      if (this.questionList[index].ques) {
+        if (item.type == 4) {
+          //案例题
+          let isOver = item.jsonStr.every((jsonItem, indexs) => {
+            if (
+              jsonItem.type == 1 ||
+              jsonItem.type == 2 ||
+              jsonItem.type == 3
+            ) {
+              if (item.ques[indexs]) {
+                return true;
+              } else {
+                return false;
+              }
+            } else if (jsonItem.type == 5) {
+              // if (
+              //   item.ques[indexs] &&
+              //   (item.ques[indexs].text || item.ques[indexs].imageList.length)
+              // ) {
+              //   console.log("chil");
+              //   return true;
+              // } else {
+              //   return false;
+              // }
+            }
+          });
+
+          if (isOver) {
+            return true;
+          } else {
+            return false;
+          }
+        } else if (item.type == 5) {
+          //简答题
+          //每一项都相等
+          if (item.ques && (item.ques.imageList.length || item.ques.text)) {
+            return true;
+          }
+          //判断
+        } else {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+    isRight(item, index) {
+      //单选
+      if (this.questionList[index].ques) {
+        if (item.type == 1) {
+          console.log(
+            this.questionList[index].ques == this.questionList[index].ans
+          );
+          return this.questionList[index].ques == this.questionList[index].ans;
+          //多选
+        } else if (item.type == 2) {
+          //每一项都相等
+          return this.questionList[index].ans.every((item, i) => {
+            return item == this.questionList[index].ques[i];
+          });
+          //判断
+        } else if (item.type == 3) {
+          return this.questionList[index].ques == this.questionList[index].ans;
+        } else {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+
+    isWrong(item, index) {
+      if (this.questionList[index].ques) {
+        //单选
+        if (item.type == 1) {
+          return this.questionList[index].ques != this.questionList[index].ans;
+          //多选
+        } else if (item.type == 2) {
+          //每一项都相等
+          return this.questionList[index].ques.some((item, i) => {
+            return this.questionList[index].ans.indexOf(item) == -1;
+          });
+          //判断
+        } else if (item.type == 3) {
+          return this.questionList[index].ques != this.questionList[index].ans;
+        } else {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+    isPart(item, index) {
+      if (this.questionList[index].ques) {
+        if (item.type == 2) {
+          let isWrong = this.questionList[index].ques.some((item, i) => {
+            return this.questionList[index].ans.indexOf(item) == -1;
+          });
+
+          let isRight = this.questionList[index].ans.every((item, i) => {
+            return item == this.questionList[index].ques[i];
+          });
+
+          if (!isRight && !isWrong) {
+            return true;
+          }
+        }
+      } else {
+        return false;
+      }
+    },
+    right(bankIndex, ansIndex, option) {
+      if (
+        this.questionList[bankIndex].ques[ansIndex] &&
+        this.questionList[bankIndex].ans[ansIndex]
+      ) {
+        if (
+          this.questionList[bankIndex].ques[ansIndex].indexOf(
+            option.optionsId
+          ) != -1 ||
+          this.questionList[bankIndex].ans[ansIndex].indexOf(
+            option.optionsId
+          ) != -1
+        ) {
+          return true;
+        } else {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+
+    wrong(bankIndex, ansIndex, option) {
+      if (
+        this.questionList[bankIndex].ques[ansIndex] &&
+        this.questionList[bankIndex].ans[ansIndex]
+      ) {
+        if (
+          this.questionList[bankIndex].ques[ansIndex].indexOf(
+            option.optionsId
+          ) != -1 &&
+          this.questionList[bankIndex].ans[ansIndex].indexOf(
+            option.optionsId
+          ) == -1
+        ) {
+          return true;
+        } else {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+
+    /**
+     * 获取已经回答的题目数
+     * hasSpecail (是否包含简答和案例)
+     */
+    questionOverNum(hasSpecail) {
+      let count = 0;
+      this.questionList.forEach((item) => {
+        if (item.type == 1 || item.type == 2 || item.type == 3) {
+          if (item.ques) {
+            count++;
+          }
+        } else if (item.type == 4) {
+          //案例题
+          if (hasSpecail) {
+            let isOver = item.jsonStr.every((jsonItem, index) => {
+              if (
+                jsonItem.type == 1 ||
+                jsonItem.type == 2 ||
+                jsonItem.type == 3
+              ) {
+                if (item.ques[index]) {
+                  return true;
+                } else {
+                  return false;
+                }
+              } else if (jsonItem.type == 5) {
+                // if (
+                //   item.ques[index] &&
+                //   (item.ques[index].text || item.ques[index].imageList.length)
+                // ) {
+                //   return true;
+                // } else {
+                //   return false;
+                // }
+              }
+            });
+
+            if (isOver) {
+              count++;
+              console.log(item, 444);
+            }
+          }
+        } else if (item.type == 5) {
+          //简答题
+          if (hasSpecail) {
+            // if (item.ques && (item.ques.text || item.ques.imageList.length)) {
+            //   console.log(5, item);
+            //   count++;
+            // }
+          }
+        }
+      });
+
+      return count;
+    },
+
+    collect() {
+      this.$message({
+        message: "试做题目，不支持收藏~",
+        type: "warning",
+      });
+      return;
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.course-exam {
+  .section {
+    overflow: hidden;
+    &__header {
+      height: 20px;
+      margin-top: 20px;
+    }
+
+    &__body {
+      .explain-record {
+        &__header {
+        }
+
+        &__body {
+          margin-bottom: 20px;
+          border: 1px solid #eee;
+          .left-box {
+            float: left;
+            width: 970px;
+            min-height: 630px;
+            border: 1px solid #eee;
+
+            &__header {
+              height: 40px;
+              padding-left: 12px;
+              border-bottom: 1px solid #eeeeee;
+              display: flex;
+              align-items: center;
+
+              .progress {
+                width: 636px;
+              }
+
+              .text {
+                margin-left: 15px;
+                font-size: 16px;
+                span {
+                  font-family: Microsoft YaHei;
+                  font-weight: bold;
+                  color: #3f8dfd;
+                  line-height: 24px;
+                }
+              }
+            }
+
+            &__body {
+              .question {
+                padding: 12px 0 0 12px;
+
+                &__title {
+                  padding-left: 12px;
+                  font-size: 16px;
+                  font-family: Microsoft YaHei;
+                  font-weight: bold;
+                  color: #333333;
+                  line-height: 24px;
+                }
+
+                &__desc {
+                  padding-left: 12px;
+                  margin-top: 20px;
+                  font-size: 16px;
+                  font-family: Microsoft YaHei;
+                  font-weight: 400;
+                  color: #666666;
+                  line-height: 24px;
+
+                  /deep/ img {
+                    max-width: 100% !important;
+                  }
+                }
+
+                &__content {
+                  /deep/ .el-tabs__item {
+                    height: 40px;
+                    line-height: 40px;
+                  }
+
+                  .question__content {
+                    height: auto;
+                    overflow: auto;
+                  }
+
+                  .question-list {
+                    padding: 24px 0 0 24px;
+                    .checkbox,
+                    .radio {
+                      cursor: pointer;
+                      margin-right: 24px;
+                      padding: 0 24px;
+                      display: flex;
+                      align-items: center;
+                      margin-top: 2px;
+                      min-height: 40px;
+                      padding-top: 10px;
+                      padding-bottom: 10px;
+                      background: #f5f9ff;
+                      border-radius: 8px;
+                      box-sizing: border-box;
+
+                      &.right {
+                        background: #37c65b;
+                      }
+                      &.wrong {
+                        background: #ff3a30;
+                      }
+                    }
+                    &.textarea {
+                      margin-right: 12px;
+
+                      .upload {
+                        margin-top: 10px;
+
+                        &__imgs {
+                          margin-right: 10px;
+                          width: 80px;
+                          height: 80px;
+                          background: #ffffff;
+                          border: 1px solid #eeeeee;
+                          border-radius: 4px;
+                          position: relative;
+                          display: flex;
+                          float: left;
+                          align-items: center;
+                          justify-content: center;
+
+                          img {
+                            max-width: 100%;
+                            max-height: 100%;
+                          }
+                        }
+                        &__btn {
+                          margin-right: 10px;
+                          width: 80px;
+                          height: 80px;
+                          background: #ffffff;
+                          border: 1px solid #eeeeee;
+                          border-radius: 4px;
+                          position: relative;
+                          display: flex;
+                          float: left;
+                          align-items: center;
+                          justify-content: center;
+                          flex-direction: column;
+
+                          .icon {
+                            font-size: 20px;
+                            color: #3f8dfd;
+                          }
+
+                          p {
+                            font-size: 12px;
+                            font-family: Microsoft YaHei;
+                            font-weight: 400;
+                            color: #999999;
+                            line-height: 24px;
+                          }
+
+                          input {
+                            position: absolute;
+                            left: 0;
+                            top: 0;
+                            display: block;
+                            width: 100%;
+                            height: 100%;
+                            opacity: 0;
+                          }
+                        }
+                      }
+                    }
+
+                    /deep/ .el-checkbox {
+                      white-space: normal;
+                    }
+                  }
+
+                  .answer-list {
+                    height: 40px;
+                    border-top: 1px solid #eee;
+                    border-bottom: 1px solid #eee;
+                    margin-top: 24px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding: 0 24px;
+
+                    &__left {
+                      font-size: 16px;
+                      font-family: Microsoft YaHei;
+                      font-weight: 400;
+                      color: #333333;
+                      line-height: 24px;
+                    }
+
+                    &__right {
+                      font-size: 16px;
+                      font-family: Microsoft YaHei;
+                      font-weight: 400;
+                      color: #333333;
+                      line-height: 24px;
+                    }
+                  }
+
+                  .explain-list {
+                    padding: 12px 24px;
+
+                    &__header {
+                      font-size: 16px;
+                      font-family: Microsoft YaHei;
+                      font-weight: bold;
+                      color: #666666;
+                      line-height: 24px;
+                    }
+
+                    &__body {
+                      margin-top: 12px;
+                      font-size: 16px;
+                      font-family: Microsoft YaHei;
+                      font-weight: 400;
+                      color: #666666;
+                      line-height: 24px;
+                    }
+
+                    .upload {
+                      margin-top: 10px;
+
+                      &__imgs {
+                        margin-right: 10px;
+                        width: 80px;
+                        height: 80px;
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                        border-radius: 4px;
+                        position: relative;
+                        display: flex;
+                        float: left;
+                        align-items: center;
+                        justify-content: center;
+
+                        img {
+                          max-width: 100%;
+                          max-height: 100%;
+                        }
+                      }
+                    }
+                  }
+                }
+
+                &__btns {
+                  position: relative;
+                  height: 32px;
+                  .submit {
+                    cursor: pointer;
+                    margin: 0 auto;
+                    width: 140px;
+                    height: 32px;
+                    background: #3f8dfd;
+                    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
+                    border-radius: 16px;
+                    text-align: center;
+                    line-height: 32px;
+                    color: #fff;
+                    font-size: 16px;
+                  }
+
+                  .collect {
+                    cursor: pointer;
+                    position: absolute;
+                    right: 0;
+                    top: 5px;
+                    font-size: 12px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: #3f8dfd;
+                    line-height: 24px;
+                  }
+                }
+              }
+            }
+
+            &__footer {
+              height: 40px;
+              display: flex;
+              justify-content: space-around;
+              align-items: center;
+
+              .btn {
+                cursor: pointer;
+                width: 140px;
+                height: 32px;
+                background: #ffffff;
+                border: 1px solid #3f8dfd;
+                border-radius: 16px;
+                line-height: 32px;
+                text-align: center;
+                color: #3f8dfd;
+              }
+            }
+          }
+
+          .right-box {
+            float: right;
+            width: 299px;
+            border-right: 1px solid #eee;
+
+            &__header {
+              height: 40px;
+              line-height: 40px;
+              font-size: 16px;
+              font-family: Microsoft YaHei;
+              font-weight: bold;
+              color: #333333;
+              text-align: center;
+              border-bottom: 1px solid #eeeeee;
+
+              .back-btn {
+                display: block;
+                margin: 0 auto;
+                width: 160px;
+              }
+            }
+
+            &__body {
+              height: 510px;
+              border-bottom: 1px solid #eee;
+
+              .card {
+                &__note {
+                  display: flex;
+                  height: 64px;
+                  align-items: center;
+                  border-bottom: 1px solid #eee;
+                  flex-wrap: wrap;
+
+                  .item {
+                    display: flex;
+                    align-items: center;
+                    margin-left: 10px;
+                    width: 84px;
+                    font-size: 12px;
+
+                    .box {
+                      margin-right: 5px;
+                      width: 16px;
+                      height: 16px;
+                      border-radius: 4px;
+
+                      &.white {
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                      }
+
+                      &.green {
+                        background: #37c65b;
+                      }
+                      &.red {
+                        background: #ff3a30;
+                      }
+
+                      &.yellow {
+                        background: #ffc53d;
+                      }
+                      &.blue {
+                        background: #3f8dfd;
+                      }
+                    }
+                  }
+                }
+
+                &__content {
+                  height: 440px;
+                  overflow-y: scroll;
+
+                  &::-webkit-scrollbar {
+                    width: 6px;
+                  }
+                  &::-webkit-scrollbar-track {
+                    background-color: #fff;
+                    -webkit-border-radius: 2em;
+                    -moz-border-radius: 2em;
+                    border-radius: 2em;
+                  }
+                  &::-webkit-scrollbar-thumb {
+                    background-color: #eeeeee;
+                    -webkit-border-radius: 2em;
+                    -moz-border-radius: 2em;
+                    border-radius: 2em;
+                  }
+                  .list {
+                    display: flex;
+                    flex-wrap: wrap;
+
+                    .item {
+                      width: 40px;
+                      height: 40px;
+                      border-radius: 10px;
+                      text-align: center;
+                      line-height: 40px;
+                      margin-left: 16px;
+                      margin-top: 16px;
+                      cursor: pointer;
+
+                      &.white {
+                        line-height: 38px;
+                        color: #333333;
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                      }
+
+                      &.green {
+                        color: #fff;
+                        background: #37c65b;
+                      }
+
+                      &.red {
+                        color: #fff;
+                        background: #ff3a30;
+                      }
+
+                      &.blue {
+                        border: 1rpx solid #eeeeee;
+                        color: #fff;
+                        background: #3f8dfd;
+                      }
+                      &.yellow {
+                        background: #ffc53d;
+                      }
+
+                      &.disabled {
+                        cursor: not-allowed;
+                        line-height: 38px;
+                        color: #eeeeee;
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+
+            &__footer {
+              border-bottom: 1px solid #eee;
+              height: 40px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+
+              .submit {
+                cursor: pointer;
+                width: 140px;
+                height: 32px;
+                background: #3f8dfd;
+                box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
+                border-radius: 16px;
+                line-height: 32px;
+                text-align: center;
+                color: #fff;
+                font-size: 16px;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &__footer {
+      height: 20px;
+      margin-top: 20px;
+    }
+  }
+
+  .take-photo {
+    /deep/ .el-dialog__header {
+      display: none;
+    }
+    /deep/ .el-dialog__body {
+      padding: 0;
+      overflow: unset;
+    }
+
+    &__close {
+      cursor: pointer;
+      position: absolute;
+      right: 0;
+      top: -28px;
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      color: #eee;
+      border: 1px solid #eee;
+      border-radius: 50%;
+    }
+
+    &__header {
+      height: 40px;
+      border-bottom: 1px solid #eee;
+      line-height: 40px;
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #333333;
+      padding-left: 24px;
+    }
+
+    &__body {
+      height: 400px;
+      padding: 40px 24px;
+      .left-box {
+        width: 336px;
+        float: left;
+
+        .title {
+          font-size: 16px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          color: #ff3b30;
+          line-height: 24px;
+        }
+
+        .content {
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #333333;
+          line-height: 28px;
+          margin-top: 32px;
+        }
+      }
+
+      .right-box {
+        float: right;
+        width: 400px;
+        height: 300px;
+
+        video {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    &__footer {
+      height: 90px;
+      border-top: 1px solid #eee;
+      text-align: center;
+      .take {
+        display: inline-block;
+        width: 200px;
+        height: 40px;
+        padding: 0;
+        border-radius: 20px;
+        text-align: center;
+        line-height: 40px;
+        margin: 24px auto;
+      }
+    }
+  }
+}
+</style>

src/pages/mock-exam-wrong-explain/index.vue

@@ -0,0 +1,1693 @@
+<template>
+  <div class="course-exam">
+    <Header></Header>
+    <section class="section">
+      <div class="container">
+        <div class="section__header">
+          <!-- <el-breadcrumb separator="/">
+            <el-breadcrumb-item
+              v-for="(item, index) in $route.matched"
+              :key="index"
+              :to="{ path: item.path }"
+              >{{ item.name }}</el-breadcrumb-item
+            >
+          </el-breadcrumb> -->
+        </div>
+        <div class="section__body">
+          <div class="explain-record">
+            <div class="explain-record__body">
+              <div class="left-box">
+                <div class="left-box__header">
+                  <el-progress
+                    class="progress"
+                    :text-inside="true"
+                    :stroke-width="26"
+                    :percentage="
+                      toFixed(
+                        (questionOverNum(true) / questionList.length) * 100
+                      ) || 0
+                    "
+                  ></el-progress>
+                  <div class="text">
+                    已完成<span>{{ questionOverNum(true) }}</span
+                    >/{{ questionList.length }}道题
+                  </div>
+                </div>
+                <div class="left-box__footer">
+                  <div class="btn" @click="prevQuestion">上一题</div>
+                  <div class="btn" @click="nextQuestion">下一题</div>
+                </div>
+                <div class="left-box__body">
+                  <template v-for="(question, questionIndex) in questionList">
+                    <div
+                      class="question"
+                      v-if="question.type == 1 && current == questionIndex"
+                      :key="questionIndex"
+                    >
+                      <div class="question__title">
+                        {{ questionIndex + 1 }}、单选题
+                      </div>
+                      <div
+                        class="question__desc"
+                        v-html="question.content"
+                      ></div>
+                      <div class="question__content">
+                        <div class="question-list" v-if="!question.ques">
+                          <div
+                            class="radio"
+                            v-for="(item, index) in question.jsonStr"
+                            :key="index"
+                          >
+                            <div>
+                              {{ ast[index] }}. {{ item.content }}
+                              <div v-if="item.imgUrl">
+                                <img
+                                  style="max-width: 100%"
+                                  :src="$tools.splitImgHost(item.imgUrl)"
+                                  alt=""
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="question-list" v-if="question.ques">
+                          <div
+                            class="radio"
+                            :class="{
+                              right:
+                                item.optionsId == question.ques ||
+                                item.optionsId == question.ans,
+                              wrong:
+                                item.optionsId == question.ques &&
+                                question.ques != question.ans,
+                            }"
+                            v-for="(item, index) in question.jsonStr"
+                            :key="index"
+                          >
+                            <div>
+                              {{ ast[index] }}. {{ item.content }}
+                              <div v-if="item.imgUrl">
+                                <img
+                                  style="max-width: 100%"
+                                  :src="$tools.splitImgHost(item.imgUrl)"
+                                  alt=""
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="answer-list">
+                          <div class="answer-list__left">
+                            正确答案：{{ ast[question.ans - 1] }}
+                          </div>
+                          <div class="answer-list__left">
+                            我的答案：{{ ast[question.ques - 1] }}
+                          </div>
+                        </div>
+                        <div class="explain-list">
+                          <div class="explain-list__header">答案解析：</div>
+                          <div
+                            class="explain-list__body"
+                            v-html="question.analysisContent"
+                          ></div>
+                        </div>
+                      </div>
+                      <div class="question__btns">
+                        <!-- <div class="collect" @click="collect">收藏本题</div> -->
+                      </div>
+                    </div>
+                    <div
+                      class="question"
+                      v-if="question.type == 2 && current == questionIndex"
+                      :key="questionIndex"
+                    >
+                      <div class="question__title">
+                        {{ questionIndex + 1 }}、多选题
+                      </div>
+                      <div
+                        class="question__desc"
+                        v-html="question.content"
+                      ></div>
+                      <div class="question__content">
+                        <div class="question-list" v-if="!question.ques">
+                          <el-checkbox
+                            disabled
+                            class="checkbox"
+                            v-for="(item, index) in question.jsonStr"
+                            :key="index"
+                            :label="item.optionsId"
+                            v-model="item.checked"
+                          >
+                            <div>
+                              {{ ast[index] }}. {{ item.content }}
+                              <div v-if="item.imgUrl">
+                                <img
+                                  style="max-width: 100%"
+                                  :src="$tools.splitImgHost(item.imgUrl)"
+                                  alt=""
+                                />
+                              </div>
+                            </div>
+                          </el-checkbox>
+                        </div>
+                        <div class="question-list" v-if="question.ques">
+                          <el-checkbox
+                            disabled
+                            class="checkbox"
+                            :class="{
+                              right:
+                                question.ques.indexOf(item.optionsId) != -1 ||
+                                question.ans.indexOf(item.optionsId) != -1,
+                              wrong:
+                                question.ques.indexOf(item.optionsId) != -1 &&
+                                question.ans.indexOf(item.optionsId) == -1,
+                            }"
+                            v-for="(item, index) in question.jsonStr"
+                            :key="index"
+                            :label="item.optionsId"
+                            v-model="item.checked"
+                          >
+                            <div>
+                              {{ ast[index] }}. {{ item.content }}
+                              <div v-if="item.imgUrl">
+                                <img
+                                  style="max-width: 100%"
+                                  :src="$tools.splitImgHost(item.imgUrl)"
+                                  alt=""
+                                />
+                              </div>
+                            </div>
+                          </el-checkbox>
+                        </div>
+                        <div class="answer-list">
+                          <div class="answer-list__left">
+                            正确答案：
+                            <template v-for="ansItem in question.ans">{{
+                              ast[ansItem - 1]
+                            }}</template>
+                          </div>
+                          <div class="answer-list__left">
+                            我的答案：
+                            <template v-for="quesItem in question.ques">{{
+                              ast[quesItem - 1]
+                            }}</template>
+                          </div>
+                        </div>
+                        <div class="explain-list">
+                          <div class="explain-list__header">答案解析：</div>
+                          <div
+                            class="explain-list__body"
+                            v-html="question.analysisContent"
+                          ></div>
+                        </div>
+                      </div>
+                      <div class="question__btns">
+                        <!-- <div class="collect" @click="collect">收藏本题</div> -->
+                      </div>
+                    </div>
+                    <div
+                      class="question"
+                      v-if="question.type == 3 && current == questionIndex"
+                      :key="questionIndex"
+                    >
+                      <div class="question__title">
+                        {{ questionIndex + 1 }}、判断题
+                      </div>
+                      <div
+                        class="question__desc"
+                        v-html="question.content"
+                      ></div>
+                      <div class="question__content">
+                        <div class="question-list" v-if="!question.ques">
+                          <div
+                            class="radio"
+                            v-for="(item, index) in judge"
+                            :key="index"
+                          >
+                            <div>
+                              {{ ast[index] }}. {{ item }}
+                              <div v-if="item.imgUrl">
+                                <img
+                                  style="max-width: 100%"
+                                  :src="$tools.splitImgHost(item.imgUrl)"
+                                  alt=""
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="question-list" v-if="question.ques">
+                          <div
+                            class="radio"
+                            :class="{
+                              right:
+                                index == question.ques || index == question.ans,
+                              wrong:
+                                index == question.ques &&
+                                question.ques != question.ans,
+                            }"
+                            v-for="(item, index) in judge"
+                            :key="index"
+                          >
+                            <div>
+                              {{ ast[index] }}. {{ item }}
+                              <div v-if="item.imgUrl">
+                                <img
+                                  style="max-width: 100%"
+                                  :src="$tools.splitImgHost(item.imgUrl)"
+                                  alt=""
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="answer-list">
+                          <div class="answer-list__left">
+                            正确答案：{{ ast[question.ans] }}
+                          </div>
+                          <div class="answer-list__left">
+                            我的答案：{{ ast[question.ques] }}
+                          </div>
+                        </div>
+                        <div class="explain-list">
+                          <div class="explain-list__header">答案解析：</div>
+                          <div
+                            class="explain-list__body"
+                            v-html="question.analysisContent"
+                          ></div>
+                        </div>
+                      </div>
+                      <div class="question__btns">
+                        <!-- <div class="collect" @click="collect">收藏本题</div> -->
+                      </div>
+                    </div>
+                    <div
+                      class="question"
+                      v-if="question.type == 4 && current == questionIndex"
+                      :key="questionIndex"
+                    >
+                      <div class="question__title">
+                        {{ questionIndex + 1 }}、案例题
+                      </div>
+                      <div class="question__content">
+                        <el-tabs v-model="question.tabIndex">
+                          <el-tab-pane
+                            v-for="(json, jsonIndex) in question.jsonStr"
+                            :label="'问题' + (jsonIndex + 1)"
+                            :name="jsonIndex + ''"
+                            :key="jsonIndex"
+                          >
+                            <div
+                              class="question"
+                              v-if="json.type == 1"
+                              :key="questionIndex"
+                            >
+                              <div class="question__title">
+                                {{ jsonIndex + 1 }}、单选题
+                              </div>
+                              <div
+                                class="question__desc"
+                                v-html="json.content"
+                              ></div>
+                              <div class="question__content">
+                                <div
+                                  class="question-list"
+                                  v-if="!question.ques[jsonIndex]"
+                                >
+                                  <div
+                                    class="radio"
+                                    v-for="(item, index) in json.optionsList"
+                                    :key="index"
+                                  >
+                                    <div>
+                                      {{ ast[index] }}. {{ item.content }}
+                                      <div v-if="item.imgUrl">
+                                        <img
+                                          style="max-width: 100%"
+                                          :src="
+                                            $tools.splitImgHost(item.imgUrl)
+                                          "
+                                          alt=""
+                                        />
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  class="question-list"
+                                  v-if="question.ques[jsonIndex]"
+                                >
+                                  <div
+                                    class="radio"
+                                    :class="{
+                                      right:
+                                        item.optionsId ==
+                                          question.ques[jsonIndex] ||
+                                        item.optionsId ==
+                                          question.ans[jsonIndex],
+                                      wrong:
+                                        item.optionsId ==
+                                          question.ques[jsonIndex] &&
+                                        question.ques[jsonIndex] !=
+                                          question.ans[jsonIndex],
+                                    }"
+                                    v-for="(item, index) in json.optionsList"
+                                    :key="index"
+                                  >
+                                    <div>
+                                      {{ ast[index] }}. {{ item.content }}
+                                      <div v-if="item.imgUrl">
+                                        <img
+                                          style="max-width: 100%"
+                                          :src="
+                                            $tools.splitImgHost(item.imgUrl)
+                                          "
+                                          alt=""
+                                        />
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div class="answer-list">
+                                  <div class="answer-list__left">
+                                    正确答案：{{
+                                      ast[question.ans[jsonIndex] - 1]
+                                    }}
+                                  </div>
+                                  <div class="answer-list__left">
+                                    我的答案：{{
+                                      ast[question.ques[jsonIndex] - 1]
+                                    }}
+                                  </div>
+                                </div>
+                                <div class="explain-list">
+                                  <div class="explain-list__header">
+                                    答案解析：
+                                  </div>
+                                  <div
+                                    class="explain-list__body"
+                                    v-html="json.analysisContent"
+                                  ></div>
+                                </div>
+                              </div>
+                              <div class="question__btns"></div>
+                            </div>
+                            <div
+                              class="question"
+                              v-if="json.type == 2"
+                              :key="jsonIndex"
+                            >
+                              <div class="question__title">
+                                {{ jsonIndex + 1 }}、多选题
+                              </div>
+                              <div
+                                class="question__desc"
+                                v-html="json.content"
+                              ></div>
+                              <div class="question__content">
+                                <div
+                                  class="question-list"
+                                  v-if="!question.ques[jsonIndex]"
+                                >
+                                  <el-checkbox
+                                    disabled
+                                    class="checkbox"
+                                    v-for="(item, index) in json.optionsList"
+                                    :key="index"
+                                    :label="item.optionsId"
+                                    v-model="item.checked"
+                                  >
+                                    <div>
+                                      {{ ast[index] }}. {{ item.content }}
+                                      <div v-if="item.imgUrl">
+                                        <img
+                                          style="max-width: 100%"
+                                          :src="
+                                            $tools.splitImgHost(item.imgUrl)
+                                          "
+                                          alt=""
+                                        />
+                                      </div>
+                                    </div>
+                                  </el-checkbox>
+                                </div>
+                                <div
+                                  class="question-list"
+                                  v-if="question.ques[jsonIndex]"
+                                >
+                                  <el-checkbox
+                                    disabled
+                                    class="checkbox"
+                                    :class="{
+                                      right:
+                                        question.ques[jsonIndex].indexOf(
+                                          item.optionsId
+                                        ) != -1 ||
+                                        question.ans[jsonIndex].indexOf(
+                                          item.optionsId
+                                        ) != -1,
+                                      wrong:
+                                        question.ques[jsonIndex].indexOf(
+                                          item.optionsId
+                                        ) != -1 &&
+                                        question.ans[jsonIndex].indexOf(
+                                          item.optionsId
+                                        ) == -1,
+                                    }"
+                                    v-for="(item, index) in json.optionsList"
+                                    :key="index"
+                                    :label="item.optionsId"
+                                    v-model="item.checked"
+                                  >
+                                    <div>
+                                      {{ ast[index] }}. {{ item.content }}
+                                      <div v-if="item.imgUrl">
+                                        <img
+                                          style="max-width: 100%"
+                                          :src="
+                                            $tools.splitImgHost(item.imgUrl)
+                                          "
+                                          alt=""
+                                        />
+                                      </div>
+                                    </div>
+                                  </el-checkbox>
+                                </div>
+                                <div class="answer-list">
+                                  <div class="answer-list__left">
+                                    正确答案：
+                                    <template
+                                      v-for="ansItem in question.ans[jsonIndex]"
+                                      >{{ ast[ansItem - 1] }}</template
+                                    >
+                                  </div>
+                                  <div class="answer-list__left">
+                                    我的答案：
+                                    <template
+                                      v-for="quesItem in question.ques[
+                                        jsonIndex
+                                      ]"
+                                      >{{ ast[quesItem - 1] }}</template
+                                    >
+                                  </div>
+                                </div>
+                                <div class="explain-list">
+                                  <div class="explain-list__header">
+                                    答案解析：
+                                  </div>
+                                  <div
+                                    class="explain-list__body"
+                                    v-html="json.analysisContent"
+                                  ></div>
+                                </div>
+                              </div>
+                              <div class="question__btns"></div>
+                            </div>
+                            <div
+                              class="question"
+                              v-if="json.type == 3"
+                              :key="jsonIndex"
+                            >
+                              <div class="question__title">
+                                {{ jsonIndex + 1 }}、判断题
+                              </div>
+                              <div
+                                class="question__desc"
+                                v-html="json.content"
+                              ></div>
+                              <div class="question__content">
+                                <div
+                                  class="question-list"
+                                  v-if="!question.ques[jsonIndex]"
+                                >
+                                  <div
+                                    class="radio"
+                                    v-for="(item, index) in judge"
+                                    :key="index"
+                                  >
+                                    <div>
+                                      {{ ast[index] }}. {{ item }}
+                                      <div v-if="item.imgUrl">
+                                        <img
+                                          style="max-width: 100%"
+                                          :src="
+                                            $tools.splitImgHost(item.imgUrl)
+                                          "
+                                          alt=""
+                                        />
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  class="question-list"
+                                  v-if="question.ques[jsonIndex]"
+                                >
+                                  <div
+                                    class="radio"
+                                    :class="{
+                                      right:
+                                        index == question.ques[jsonIndex] ||
+                                        index == question.ans[jsonIndex],
+                                      wrong:
+                                        index == question.ques[jsonIndex] &&
+                                        question.ques[jsonIndex] !=
+                                          question.ans[jsonIndex],
+                                    }"
+                                    v-for="(item, index) in judge"
+                                    :key="index"
+                                  >
+                                    <div>
+                                      {{ ast[index] }}. {{ item }}
+                                      <div v-if="item.imgUrl">
+                                        <img
+                                          style="max-width: 100%"
+                                          :src="
+                                            $tools.splitImgHost(item.imgUrl)
+                                          "
+                                          alt=""
+                                        />
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div class="answer-list">
+                                  <div class="answer-list__left">
+                                    正确答案：{{ ast[question.ans[jsonIndex]] }}
+                                  </div>
+                                  <div class="answer-list__left">
+                                    我的答案：{{
+                                      ast[question.ques[jsonIndex]]
+                                    }}
+                                  </div>
+                                </div>
+                                <div class="explain-list">
+                                  <div class="explain-list__header">
+                                    答案解析：
+                                  </div>
+                                  <div
+                                    class="explain-list__body"
+                                    v-html="json.analysisContent"
+                                  ></div>
+                                </div>
+                              </div>
+                              <div class="question__btns"></div>
+                            </div>
+
+                            <div
+                              class="question"
+                              v-if="json.type == 5"
+                              :key="jsonIndex"
+                            >
+                              <div class="question__title">
+                                {{ jsonIndex + 1 }}、简答题
+                              </div>
+                              <div
+                                class="question__desc"
+                                v-html="json.content"
+                              ></div>
+                              <div class="question__content">
+                                <div class="explain-list">
+                                  <div class="explain-list__header">
+                                    我的答案:
+                                  </div>
+                                  <div class="explain-list__body">
+                                    <div>
+                                      {{
+                                        question.ques[jsonIndex] &&
+                                        question.ques[jsonIndex].text
+                                      }}
+                                    </div>
+                                    <div class="upload clearfix">
+                                      <div
+                                        class="upload__imgs"
+                                        v-for="(img, imgIndex) in question.ques[
+                                          jsonIndex
+                                        ] && question.ques[jsonIndex].imageList"
+                                        :key="imgIndex"
+                                      >
+                                        <img
+                                          :src="$tools.splitImgHost(img, true)"
+                                          alt=""
+                                        />
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div class="explain-list__header">
+                                    答案解析：
+                                  </div>
+                                  <div
+                                    class="explain-list__body"
+                                    v-html="question.analysisContent"
+                                  ></div>
+                                </div>
+                              </div>
+                              <div class="question__btns"></div>
+                            </div>
+                          </el-tab-pane>
+                        </el-tabs>
+                      </div>
+                      <div class="question__btns">
+                        <!-- <div class="collect" @click="collect">收藏本题</div> -->
+                      </div>
+                    </div>
+                    <div
+                      class="question"
+                      v-if="question.type == 5 && current == questionIndex"
+                      :key="questionIndex"
+                    >
+                      <div class="question__title">
+                        {{ questionIndex + 1 }}、简答题
+                      </div>
+                      <div
+                        class="question__desc"
+                        v-html="question.content"
+                      ></div>
+                      <div class="question__content">
+                        <div class="explain-list">
+                          <div class="explain-list__header">我的答案:</div>
+                          <div class="explain-list__body">
+                            <div>{{ question.ques.text }}</div>
+                            <div class="upload clearfix">
+                              <div
+                                class="upload__imgs"
+                                v-for="(img, imgIndex) in question.ques
+                                  .imageList"
+                                :key="imgIndex"
+                              >
+                                <img
+                                  :src="$tools.splitImgHost(img, true)"
+                                  alt=""
+                                />
+                              </div>
+                            </div>
+                          </div>
+                          <div class="explain-list__header">答案解析：</div>
+                          <div
+                            class="explain-list__body"
+                            v-html="question.analysisContent"
+                          ></div>
+                        </div>
+                      </div>
+                      <div class="question__btns">
+                        <!-- <div class="collect" @click="collect">收藏本题</div> -->
+                      </div>
+                    </div>
+                  </template>
+                </div>
+              </div>
+              <div class="right-box">
+                <div class="right-box__header">
+                  <el-button
+                    type="primary"
+                    round
+                    plain
+                    size="small"
+                    class="back-btn"
+                    @click="$router.back(-1)"
+                    >返回</el-button
+                  >
+                </div>
+                <div class="right-box__header">答题卡</div>
+                <div class="right-box__body">
+                  <div class="card">
+                    <div class="card__note">
+                      <div class="item">
+                        <div class="box green"></div>
+                        正确
+                      </div>
+                      <div class="item">
+                        <div class="box red"></div>
+                        错误
+                      </div>
+                      <div class="item">
+                        <div class="box blue"></div>
+                        已做未评改
+                      </div>
+
+                      <div class="item">
+                        <div class="box yellow"></div>
+                        少选
+                      </div>
+                      <div class="item">
+                        <div class="box white"></div>
+                        未做
+                      </div>
+                    </div>
+                    <div class="card__content">
+                      <ul class="list">
+                        <li
+                          class="item white"
+                          v-for="(item, index) in questionList"
+                          :key="index"
+                          :class="{
+                            green: isRight(item, index),
+                            red: isWrong(item, index),
+                            yellow: isPart(item, index),
+                            blue: isOver(item, index),
+                          }"
+                          @click="changeIndex(index)"
+                        >
+                          {{ index + 1 }}
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <ToolBar></ToolBar>
+    <Footer></Footer>
+  </div>
+</template>
+
+<script>
+import Footer from "@/components/footer/index";
+import Header from "@/components/header/index";
+import ToolBar from "@/components/toolbar/index";
+import { mapMutations } from "vuex";
+export default {
+  name: "BankExplain",
+  components: {
+    Footer,
+    Header,
+    ToolBar,
+  },
+  data() {
+    return {
+      recordId: 0,
+      questionIndex: 0,
+      checked: false,
+      questionList: [],
+      judge: ["错误", "正确"],
+      ast: [
+        "A",
+        "B",
+        "C",
+        "D",
+        "E",
+        "F",
+        "G",
+        "H",
+        "I",
+        "J",
+        "K",
+        "L",
+        "M",
+        "N",
+        "O",
+        "P",
+        "Q",
+        "R",
+        "S",
+        "T",
+        "U",
+        "V",
+        "W",
+        "X",
+        "Y",
+        "Z",
+      ],
+      lastCount: 0,
+      examId: 0,
+      goodsId: 0,
+      courseId: 0,
+      gradeId: 0,
+      moduleId: 0,
+      chapterId: 0,
+      current: 0,
+      orderGoodsId: 0,
+    };
+  },
+  async mounted() {
+    this.recordId = this.$route.params.recordId;
+    this.examId = this.$route.query.examId;
+    this.goodsQuestionList();
+  },
+  methods: {
+    ...mapMutations(["setExamResult"]),
+    toFixed(num) {
+      if (num) {
+        let str = String(num).indexOf(".");
+
+        if (str != -1) {
+          return +num.toFixed(2);
+        } else {
+          return num;
+        }
+      } else {
+        return 0;
+      }
+    },
+
+    changeIndex(index) {
+      this.current = index;
+    },
+
+    /**
+     * 请求题目列表
+     */
+    goodsQuestionList() {
+      this.$request.mockReport(this.recordId).then(async (res) => {
+        let questionList = JSON.parse(res.data.historyExamJson);
+
+        questionList.forEach((json) => {
+          //只获取类型1，2，3 单选，多选，判断 ，主观题灭有对错
+          if (json.type == 1 || json.type == 3) {
+            //单选判断
+            if (json.ans != json.ques) {
+              this.questionList.push(json);
+            }
+          } else if (json.type == 2) {
+            //判断是否全对
+            let isRight = json.ans.every((quesItem, quesIndex) => {
+              if (json.ques) {
+                console.log(json.ques[quesIndex], "json.ques[quesIndex]");
+                console.log(json.ans[quesIndex], "json.ans[quesIndex]");
+
+                return json.ques[quesIndex] == json.ans[quesIndex];
+              } else {
+                return false;
+              }
+            });
+
+            if (!isRight) {
+              this.questionList.push(json);
+            }
+          }
+        });
+
+        console.log(this.questionList);
+      });
+    },
+
+    nextQuestion() {
+      if (this.current >= this.questionList.length - 1) {
+        this.$message({
+          type: "warning",
+          message: "已经是最后一题了！",
+        });
+        return;
+      }
+      this.current++;
+    },
+    prevQuestion() {
+      if (this.current == 0) {
+        this.$message({
+          type: "warning",
+          message: "已经是第一题了！",
+        });
+        return;
+      } else {
+        this.current--;
+      }
+    },
+    isOver(item, index) {
+      if (this.questionList[index].ques) {
+        if (item.type == 4) {
+          //案例题
+          let isOver = item.jsonStr.every((jsonItem, indexs) => {
+            if (
+              jsonItem.type == 1 ||
+              jsonItem.type == 2 ||
+              jsonItem.type == 3
+            ) {
+              if (item.ques[indexs]) {
+                return true;
+              } else {
+                return false;
+              }
+            } else if (jsonItem.type == 5) {
+              if (
+                item.ques[indexs] &&
+                (item.ques[indexs].text || item.ques[indexs].imageList.length)
+              ) {
+                console.log("chil");
+                return true;
+              } else {
+                return false;
+              }
+            }
+          });
+
+          if (isOver) {
+            return true;
+          } else {
+            return false;
+          }
+        } else if (item.type == 5) {
+          //简答题
+          //每一项都相等
+          if (item.ques && (item.ques.imageList.length || item.ques.text)) {
+            return true;
+          }
+          //判断
+        } else {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+    isRight(item, index) {
+      //单选
+      if (this.questionList[index].ques) {
+        if (item.type == 1) {
+          console.log(
+            this.questionList[index].ques == this.questionList[index].ans
+          );
+          return this.questionList[index].ques == this.questionList[index].ans;
+          //多选
+        } else if (item.type == 2) {
+          //每一项都相等
+          return this.questionList[index].ans.every((item, i) => {
+            return item == this.questionList[index].ques[i];
+          });
+          //判断
+        } else if (item.type == 3) {
+          return this.questionList[index].ques == this.questionList[index].ans;
+        } else {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+
+    isWrong(item, index) {
+      if (this.questionList[index].ques) {
+        //单选
+        if (item.type == 1) {
+          return this.questionList[index].ques != this.questionList[index].ans;
+          //多选
+        } else if (item.type == 2) {
+          //每一项都相等
+          return this.questionList[index].ques.some((item, i) => {
+            return this.questionList[index].ans.indexOf(item) == -1;
+          });
+          //判断
+        } else if (item.type == 3) {
+          return this.questionList[index].ques != this.questionList[index].ans;
+        } else {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+    isPart(item, index) {
+      if (this.questionList[index].ques) {
+        if (item.type == 2) {
+          let isWrong = this.questionList[index].ques.some((item, i) => {
+            return this.questionList[index].ans.indexOf(item) == -1;
+          });
+
+          let isRight = this.questionList[index].ans.every((item, i) => {
+            return item == this.questionList[index].ques[i];
+          });
+
+          if (!isRight && !isWrong) {
+            return true;
+          }
+        }
+      } else {
+        return false;
+      }
+    },
+    right(bankIndex, ansIndex, option) {
+      if (
+        this.questionList[bankIndex].ques[ansIndex] &&
+        this.questionList[bankIndex].ans[ansIndex]
+      ) {
+        if (
+          this.questionList[bankIndex].ques[ansIndex].indexOf(
+            option.optionsId
+          ) != -1 ||
+          this.questionList[bankIndex].ans[ansIndex].indexOf(
+            option.optionsId
+          ) != -1
+        ) {
+          return true;
+        } else {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+
+    wrong(bankIndex, ansIndex, option) {
+      if (
+        this.questionList[bankIndex].ques[ansIndex] &&
+        this.questionList[bankIndex].ans[ansIndex]
+      ) {
+        if (
+          this.questionList[bankIndex].ques[ansIndex].indexOf(
+            option.optionsId
+          ) != -1 &&
+          this.questionList[bankIndex].ans[ansIndex].indexOf(
+            option.optionsId
+          ) == -1
+        ) {
+          return true;
+        } else {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+
+    /**
+     * 获取已经回答的题目数
+     * hasSpecail (是否包含简答和案例)
+     */
+    questionOverNum(hasSpecail) {
+      let count = 0;
+      this.questionList.forEach((item) => {
+        if (item.type == 1 || item.type == 2 || item.type == 3) {
+          if (item.ques) {
+            count++;
+          }
+        } else if (item.type == 4) {
+          //案例题
+          if (hasSpecail) {
+            let isOver = item.jsonStr.every((jsonItem, index) => {
+              if (
+                jsonItem.type == 1 ||
+                jsonItem.type == 2 ||
+                jsonItem.type == 3
+              ) {
+                if (item.ques[index]) {
+                  return true;
+                } else {
+                  return false;
+                }
+              } else if (jsonItem.type == 5) {
+                if (
+                  item.ques[index] &&
+                  (item.ques[index].text || item.ques[index].imageList.length)
+                ) {
+                  return true;
+                } else {
+                  return false;
+                }
+              }
+            });
+
+            if (isOver) {
+              count++;
+              console.log(item, 444);
+            }
+          }
+        } else if (item.type == 5) {
+          //简答题
+          if (hasSpecail) {
+            if (item.ques && (item.ques.text || item.ques.imageList.length)) {
+              console.log(5, item);
+              count++;
+            }
+          }
+        }
+      });
+
+      return count;
+    },
+
+    collect() {
+      this.$message({
+        message: "试做题目，不支持收藏~",
+        type: "warning",
+      });
+      return;
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.course-exam {
+  .section {
+    overflow: hidden;
+    &__header {
+      height: 20px;
+      margin-top: 20px;
+    }
+
+    &__body {
+      .explain-record {
+        &__header {
+        }
+
+        &__body {
+          border: 1px solid #eee;
+          .left-box {
+            float: left;
+            width: 970px;
+            min-height: 630px;
+            border: 1px solid #eee;
+
+            &__header {
+              height: 40px;
+              padding-left: 12px;
+              border-bottom: 1px solid #eeeeee;
+              display: flex;
+              align-items: center;
+
+              .progress {
+                width: 636px;
+              }
+
+              .text {
+                margin-left: 15px;
+                font-size: 16px;
+                span {
+                  font-family: Microsoft YaHei;
+                  font-weight: bold;
+                  color: #3f8dfd;
+                  line-height: 24px;
+                }
+              }
+            }
+
+            &__body {
+              border-bottom: 1px solid #eee;
+
+              .question {
+                padding: 12px 0 0 12px;
+                display: flex;
+                flex-direction: column;
+                height: 100%;
+
+                &__title {
+                  padding-left: 12px;
+                  font-size: 16px;
+                  font-family: Microsoft YaHei;
+                  font-weight: bold;
+                  color: #333333;
+                  line-height: 24px;
+                }
+
+                &__desc {
+                  padding-left: 12px;
+                  margin-top: 20px;
+                  font-size: 16px;
+                  font-family: Microsoft YaHei;
+                  font-weight: 400;
+                  color: #666666;
+                  line-height: 24px;
+
+                  /deep/ img {
+                    max-width: 100% !important;
+                  }
+                }
+
+                &__content {
+                  /deep/ .el-tabs__item {
+                    height: 40px;
+                    line-height: 40px;
+                  }
+
+                  .question__content {
+                    height: auto;
+                    overflow: auto;
+                  }
+
+                  .question-list {
+                    padding: 24px 0 0 24px;
+                    .checkbox,
+                    .radio {
+                      cursor: pointer;
+                      margin-right: 24px;
+                      padding: 0 24px;
+                      display: flex;
+                      align-items: center;
+                      margin-top: 2px;
+                      min-height: 40px;
+                      padding-top: 10px;
+                      padding-bottom: 10px;
+                      background: #f5f9ff;
+                      border-radius: 8px;
+                      box-sizing: border-box;
+
+                      &.right {
+                        background: #37c65b;
+                      }
+                      &.wrong {
+                        background: #ff3a30;
+                      }
+                    }
+                    &.textarea {
+                      margin-right: 12px;
+
+                      .upload {
+                        margin-top: 10px;
+
+                        &__imgs {
+                          margin-right: 10px;
+                          width: 80px;
+                          height: 80px;
+                          background: #ffffff;
+                          border: 1px solid #eeeeee;
+                          border-radius: 4px;
+                          position: relative;
+                          display: flex;
+                          float: left;
+                          align-items: center;
+                          justify-content: center;
+
+                          img {
+                            max-width: 100%;
+                            max-height: 100%;
+                          }
+                        }
+                        &__btn {
+                          margin-right: 10px;
+                          width: 80px;
+                          height: 80px;
+                          background: #ffffff;
+                          border: 1px solid #eeeeee;
+                          border-radius: 4px;
+                          position: relative;
+                          display: flex;
+                          float: left;
+                          align-items: center;
+                          justify-content: center;
+                          flex-direction: column;
+
+                          .icon {
+                            font-size: 20px;
+                            color: #3f8dfd;
+                          }
+
+                          p {
+                            font-size: 12px;
+                            font-family: Microsoft YaHei;
+                            font-weight: 400;
+                            color: #999999;
+                            line-height: 24px;
+                          }
+
+                          input {
+                            position: absolute;
+                            left: 0;
+                            top: 0;
+                            display: block;
+                            width: 100%;
+                            height: 100%;
+                            opacity: 0;
+                          }
+                        }
+                      }
+                    }
+
+                    /deep/ .el-checkbox {
+                      white-space: normal;
+                    }
+                  }
+
+                  .answer-list {
+                    height: 40px;
+                    border-top: 1px solid #eee;
+                    border-bottom: 1px solid #eee;
+                    margin-top: 24px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding: 0 24px;
+
+                    &__left {
+                      font-size: 16px;
+                      font-family: Microsoft YaHei;
+                      font-weight: 400;
+                      color: #333333;
+                      line-height: 24px;
+                    }
+
+                    &__right {
+                      font-size: 16px;
+                      font-family: Microsoft YaHei;
+                      font-weight: 400;
+                      color: #333333;
+                      line-height: 24px;
+                    }
+                  }
+
+                  .explain-list {
+                    padding: 12px 24px;
+
+                    &__header {
+                      font-size: 16px;
+                      font-family: Microsoft YaHei;
+                      font-weight: bold;
+                      color: #666666;
+                      line-height: 24px;
+                    }
+
+                    &__body {
+                      margin-top: 12px;
+                      font-size: 16px;
+                      font-family: Microsoft YaHei;
+                      font-weight: 400;
+                      color: #666666;
+                      line-height: 24px;
+                    }
+
+                    .upload {
+                      margin-top: 10px;
+
+                      &__imgs {
+                        margin-right: 10px;
+                        width: 80px;
+                        height: 80px;
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                        border-radius: 4px;
+                        position: relative;
+                        display: flex;
+                        float: left;
+                        align-items: center;
+                        justify-content: center;
+
+                        img {
+                          max-width: 100%;
+                          max-height: 100%;
+                        }
+                      }
+                    }
+                  }
+                }
+
+                &__btns {
+                  position: relative;
+                  height: 32px;
+                  .submit {
+                    cursor: pointer;
+                    margin: 0 auto;
+                    width: 140px;
+                    height: 32px;
+                    background: #3f8dfd;
+                    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
+                    border-radius: 16px;
+                    text-align: center;
+                    line-height: 32px;
+                    color: #fff;
+                    font-size: 16px;
+                  }
+
+                  .collect {
+                    cursor: pointer;
+                    position: absolute;
+                    right: 0;
+                    top: 5px;
+                    font-size: 12px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: #3f8dfd;
+                    line-height: 24px;
+                  }
+                }
+              }
+            }
+
+            &__footer {
+              height: 40px;
+              display: flex;
+              justify-content: space-around;
+              align-items: center;
+
+              .btn {
+                cursor: pointer;
+                width: 140px;
+                height: 32px;
+                background: #ffffff;
+                border: 1px solid #3f8dfd;
+                border-radius: 16px;
+                line-height: 32px;
+                text-align: center;
+                color: #3f8dfd;
+              }
+            }
+          }
+
+          .right-box {
+            float: right;
+            width: 299px;
+            border-right: 1px solid #eee;
+
+            &__header {
+              height: 40px;
+              line-height: 40px;
+              font-size: 16px;
+              font-family: Microsoft YaHei;
+              font-weight: bold;
+              color: #333333;
+              text-align: center;
+              border-bottom: 1px solid #eeeeee;
+
+              .back-btn {
+                display: block;
+                margin: 0 auto;
+                width: 160px;
+              }
+            }
+
+            &__body {
+              height: 510px;
+              border-bottom: 1px solid #eee;
+
+              .card {
+                &__note {
+                  display: flex;
+                  height: 64px;
+                  align-items: center;
+                  border-bottom: 1px solid #eee;
+                  flex-wrap: wrap;
+
+                  .item {
+                    display: flex;
+                    align-items: center;
+                    margin-left: 10px;
+                    width: 84px;
+                    font-size: 12px;
+
+                    .box {
+                      margin-right: 5px;
+                      width: 16px;
+                      height: 16px;
+                      border-radius: 4px;
+
+                      &.white {
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                      }
+
+                      &.green {
+                        background: #37c65b;
+                      }
+                      &.red {
+                        background: #ff3a30;
+                      }
+
+                      &.yellow {
+                        background: #ffc53d;
+                      }
+                      &.blue {
+                        background: #3f8dfd;
+                      }
+                    }
+                  }
+                }
+
+                &__content {
+                  height: 440px;
+                  overflow-y: scroll;
+
+                  &::-webkit-scrollbar {
+                    width: 6px;
+                  }
+                  &::-webkit-scrollbar-track {
+                    background-color: #fff;
+                    -webkit-border-radius: 2em;
+                    -moz-border-radius: 2em;
+                    border-radius: 2em;
+                  }
+                  &::-webkit-scrollbar-thumb {
+                    background-color: #eeeeee;
+                    -webkit-border-radius: 2em;
+                    -moz-border-radius: 2em;
+                    border-radius: 2em;
+                  }
+                  .list {
+                    display: flex;
+                    flex-wrap: wrap;
+
+                    .item {
+                      width: 40px;
+                      height: 40px;
+                      border-radius: 10px;
+                      text-align: center;
+                      line-height: 40px;
+                      margin-left: 16px;
+                      margin-top: 16px;
+                      cursor: pointer;
+
+                      &.white {
+                        line-height: 38px;
+                        color: #333333;
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                      }
+
+                      &.green {
+                        color: #fff;
+                        background: #37c65b;
+                      }
+
+                      &.red {
+                        color: #fff;
+                        background: #ff3a30;
+                      }
+
+                      &.blue {
+                        border: 1rpx solid #eeeeee;
+                        color: #fff;
+                        background: #3f8dfd;
+                      }
+                      &.yellow {
+                        background: #ffc53d;
+                      }
+
+                      &.disabled {
+                        cursor: not-allowed;
+                        line-height: 38px;
+                        color: #eeeeee;
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+
+            &__footer {
+              border-bottom: 1px solid #eee;
+              height: 40px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+
+              .submit {
+                cursor: pointer;
+                width: 140px;
+                height: 32px;
+                background: #3f8dfd;
+                box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
+                border-radius: 16px;
+                line-height: 32px;
+                text-align: center;
+                color: #fff;
+                font-size: 16px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .take-photo {
+    /deep/ .el-dialog__header {
+      display: none;
+    }
+    /deep/ .el-dialog__body {
+      padding: 0;
+      overflow: unset;
+    }
+
+    &__close {
+      cursor: pointer;
+      position: absolute;
+      right: 0;
+      top: -28px;
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      color: #eee;
+      border: 1px solid #eee;
+      border-radius: 50%;
+    }
+
+    &__header {
+      height: 40px;
+      border-bottom: 1px solid #eee;
+      line-height: 40px;
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #333333;
+      padding-left: 24px;
+    }
+
+    &__body {
+      height: 400px;
+      padding: 40px 24px;
+      .left-box {
+        width: 336px;
+        float: left;
+
+        .title {
+          font-size: 16px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          color: #ff3b30;
+          line-height: 24px;
+        }
+
+        .content {
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #333333;
+          line-height: 28px;
+          margin-top: 32px;
+        }
+      }
+
+      .right-box {
+        float: right;
+        width: 400px;
+        height: 300px;
+
+        video {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    &__footer {
+      height: 90px;
+      border-top: 1px solid #eee;
+      text-align: center;
+      .take {
+        display: inline-block;
+        width: 200px;
+        height: 40px;
+        padding: 0;
+        border-radius: 20px;
+        text-align: center;
+        line-height: 40px;
+        margin: 24px auto;
+      }
+    }
+  }
+}
+</style>

src/pages/mock-exam/index.vue

@@ -0,0 +1,3080 @@
+<template>
+  <div class="course-exam">
+    <Header></Header>
+    <section class="section">
+      <div class="container">
+        <div class="section__header">
+          <!-- <el-breadcrumb separator="/">
+            <el-breadcrumb-item
+              v-for="(item, index) in $route.matched"
+              :key="index"
+              :to="{ path: item.path }"
+              >{{ item.name }}</el-breadcrumb-item
+            >
+          </el-breadcrumb> -->
+        </div>
+        <div class="section__body">
+          <div class="explain-record">
+            <div class="explain-record__body clearfix">
+              <div class="left-box">
+                <div class="left-box__header">
+                  <el-progress
+                    class="progress"
+                    :text-inside="true"
+                    :stroke-width="26"
+                    :percentage="
+                      toFixed(
+                        (questionOverNum(true) / questionList.length) * 100
+                      ) || 0
+                    "
+                  ></el-progress>
+                  <div class="text">
+                    已完成<span>{{ questionOverNum(true) }}</span
+                    >/{{ questionList.length }}道题
+                  </div>
+                </div>
+
+                <div class="left-box__footer">
+                  <div class="btn" @click="prevQuestion">上一题</div>
+                  <div class="btn" @click="nextQuestion">下一题</div>
+                </div>
+                <div class="left-box__body">
+                  <template v-for="(question, questionIndex) in questionList">
+                    <div
+                      class="question"
+                      v-if="question.type == 1 && current == questionIndex"
+                      :key="questionIndex"
+                    >
+                      <div class="question__title">
+                        {{ questionIndex + 1 }}、单选题
+                      </div>
+                      <div
+                        class="question__desc"
+                        v-html="question.content"
+                      ></div>
+                      <div class="question__content">
+                        <div class="question-list" v-if="!question.ques">
+                          <div
+                            class="radio"
+                            v-for="(item, index) in question.jsonStr"
+                            :key="index"
+                            @click="
+                              radioSelect(
+                                question,
+                                questionIndex,
+                                item.optionsId
+                              )
+                            "
+                          >
+                            <div>
+                              {{ ast[index] }}. {{ item.content }}
+                              <div v-if="item.imgUrl">
+                                <img
+                                  style="max-width: 100%"
+                                  :src="$tools.splitImgHost(item.imgUrl)"
+                                  alt=""
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="question-list" v-if="question.ques">
+                          <div
+                            class="radio"
+                            :class="{
+                              right:
+                                item.optionsId == question.ques ||
+                                item.optionsId == question.ans,
+                              wrong:
+                                item.optionsId == question.ques &&
+                                question.ques != question.ans,
+                            }"
+                            v-for="(item, index) in question.jsonStr"
+                            :key="index"
+                          >
+                            <div>
+                              {{ ast[index] }}. {{ item.content }}
+                              <div v-if="item.imgUrl">
+                                <img
+                                  :src="$tools.splitImgHost(item.imgUrl)"
+                                  alt=""
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="answer-list" v-if="question.ques">
+                          <div class="answer-list__left">
+                            正确答案：{{ ast[question.ans - 1] }}
+                          </div>
+                          <div class="answer-list__left">
+                            我的答案：{{ ast[question.ques - 1] }}
+                          </div>
+                        </div>
+                        <div class="explain-list" v-if="question.ques">
+                          <div class="explain-list__header">答案解析：</div>
+                          <div
+                            class="explain-list__body"
+                            v-html="question.analysisContent"
+                          ></div>
+                        </div>
+                      </div>
+                      <div class="question__btns">
+                        <div
+                          class="collect"
+                          @click="
+                            collect(collectList[questionIndex], questionIndex)
+                          "
+                        >
+                          <template v-if="!collectList[questionIndex]"
+                            ><i class="el-icon-star-off"></i>收藏本题</template
+                          >
+                          <template v-if="collectList[questionIndex]"
+                            ><i class="el-icon-star-on"></i>已收藏</template
+                          >
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="question"
+                      v-if="question.type == 2 && current == questionIndex"
+                      :key="questionIndex"
+                    >
+                      <div class="question__title">
+                        {{ questionIndex + 1 }}、多选题
+                      </div>
+                      <div
+                        class="question__desc"
+                        v-html="question.content"
+                      ></div>
+                      <div class="question__content">
+                        <div class="question-list" v-if="!question.ques">
+                          <el-checkbox
+                            class="checkbox"
+                            v-for="(item, index) in question.jsonStr"
+                            :key="index"
+                            :label="item.optionsId"
+                            v-model="item.checked"
+                          >
+                            <div>
+                              {{ ast[index] }}. {{ item.content }}
+                              <div v-if="item.imgUrl">
+                                <img
+                                  :src="$tools.splitImgHost(item.imgUrl)"
+                                  alt=""
+                                />
+                              </div>
+                            </div>
+                          </el-checkbox>
+                        </div>
+                        <div class="question-list" v-if="question.ques">
+                          <el-checkbox
+                            disabled
+                            class="checkbox"
+                            :class="{
+                              right:
+                                question.ques.indexOf(item.optionsId) != -1 ||
+                                question.ans.indexOf(item.optionsId) != -1,
+                              wrong:
+                                question.ques.indexOf(item.optionsId) != -1 &&
+                                question.ans.indexOf(item.optionsId) == -1,
+                            }"
+                            v-for="(item, index) in question.jsonStr"
+                            :key="index"
+                            :label="item.optionsId"
+                            v-model="item.checked"
+                          >
+                            <div>
+                              {{ ast[index] }}. {{ item.content }}
+                              <div v-if="item.imgUrl">
+                                <img
+                                  :src="$tools.splitImgHost(item.imgUrl)"
+                                  alt=""
+                                />
+                              </div>
+                            </div>
+                          </el-checkbox>
+                        </div>
+                        <div class="answer-list" v-if="question.ques">
+                          <div class="answer-list__left">
+                            正确答案：
+                            <template v-for="ansItem in question.ans">{{
+                              ast[ansItem - 1]
+                            }}</template>
+                          </div>
+                          <div class="answer-list__left">
+                            我的答案：
+                            <template v-for="quesItem in question.ques">{{
+                              ast[quesItem - 1]
+                            }}</template>
+                          </div>
+                        </div>
+                        <div class="explain-list" v-if="question.ques">
+                          <div class="explain-list__header">答案解析：</div>
+                          <div
+                            class="explain-list__body"
+                            v-html="question.analysisContent"
+                          ></div>
+                        </div>
+                      </div>
+                      <div class="question__btns">
+                        <div
+                          v-if="!question.ques"
+                          class="submit"
+                          @click="checkboxSubmit(question, questionIndex)"
+                        >
+                          确认答案
+                        </div>
+                        <div
+                          class="collect"
+                          @click="
+                            collect(collectList[questionIndex], questionIndex)
+                          "
+                        >
+                          <template v-if="!collectList[questionIndex]"
+                            ><i class="el-icon-star-off"></i>收藏本题</template
+                          >
+                          <template v-if="collectList[questionIndex]"
+                            ><i class="el-icon-star-on"></i>已收藏</template
+                          >
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="question"
+                      v-if="question.type == 3 && current == questionIndex"
+                      :key="questionIndex"
+                    >
+                      <div class="question__title">
+                        {{ questionIndex + 1 }}、判断题
+                      </div>
+                      <div
+                        class="question__desc"
+                        v-html="question.content"
+                      ></div>
+                      <div class="question__content">
+                        <div class="question-list" v-if="!question.ques">
+                          <div
+                            class="radio"
+                            v-for="(item, index) in judge"
+                            :key="index"
+                            @click="judgeSelect(question, questionIndex, index)"
+                          >
+                            <div>
+                              {{ ast[index] }}. {{ item }}
+                              <div v-if="item.imgUrl">
+                                <img
+                                  style="max-width: 100%"
+                                  :src="$tools.splitImgHost(item.imgUrl)"
+                                  alt=""
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="question-list" v-if="question.ques">
+                          <div
+                            class="radio"
+                            :class="{
+                              right:
+                                index == question.ques || index == question.ans,
+                              wrong:
+                                index == question.ques &&
+                                question.ques != question.ans,
+                            }"
+                            v-for="(item, index) in judge"
+                            :key="index"
+                          >
+                            <div>
+                              {{ ast[index] }}. {{ item }}
+                              <div v-if="item.imgUrl">
+                                <img
+                                  style="max-width: 100%"
+                                  :src="$tools.splitImgHost(item.imgUrl)"
+                                  alt=""
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="answer-list" v-if="question.ques">
+                          <div class="answer-list__left">
+                            正确答案：{{ ast[question.ans] }}
+                          </div>
+                          <div class="answer-list__left">
+                            我的答案：{{ ast[question.ques] }}
+                          </div>
+                        </div>
+                        <div class="explain-list" v-if="question.ques">
+                          <div class="explain-list__header">答案解析：</div>
+                          <div
+                            class="explain-list__body"
+                            v-html="question.analysisContent"
+                          ></div>
+                        </div>
+                      </div>
+                      <div class="question__btns">
+                        <div
+                          class="collect"
+                          @click="
+                            collect(collectList[questionIndex], questionIndex)
+                          "
+                        >
+                          <template v-if="!collectList[questionIndex]"
+                            ><i class="el-icon-star-off"></i>收藏本题</template
+                          >
+                          <template v-if="collectList[questionIndex]"
+                            ><i class="el-icon-star-on"></i>已收藏</template
+                          >
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="question"
+                      v-if="question.type == 4 && current == questionIndex"
+                      :key="questionIndex"
+                    >
+                      <div class="question__title">
+                        {{ questionIndex + 1 }}、案例题
+                      </div>
+                      <div class="question__content">
+                        <el-tabs v-model="question.tabIndex">
+                          <el-tab-pane
+                            v-for="(json, jsonIndex) in question.jsonStr"
+                            :label="'问题' + (jsonIndex + 1)"
+                            :name="jsonIndex + ''"
+                            :key="jsonIndex"
+                          >
+                            <div
+                              class="question"
+                              v-if="json.type == 1"
+                              :key="questionIndex"
+                            >
+                              <div class="question__title">
+                                {{ jsonIndex + 1 }}、单选题
+                              </div>
+                              <div
+                                class="question__desc"
+                                v-html="json.content"
+                              ></div>
+                              <div class="question__content">
+                                <div
+                                  class="question-list"
+                                  v-if="!question.ques[jsonIndex]"
+                                >
+                                  <div
+                                    class="radio"
+                                    v-for="(item, index) in json.optionsList"
+                                    :key="index"
+                                    @click="
+                                      radioSelectChild(
+                                        questionIndex,
+                                        jsonIndex,
+                                        item.optionsId
+                                      )
+                                    "
+                                  >
+                                    <div>
+                                      {{ ast[index] }}. {{ item.content }}
+                                      <div v-if="item.imgUrl">
+                                        <img
+                                          style="max-width: 100%"
+                                          :src="
+                                            $tools.splitImgHost(item.imgUrl)
+                                          "
+                                          alt=""
+                                        />
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  class="question-list"
+                                  v-if="question.ques[jsonIndex]"
+                                >
+                                  <div
+                                    class="radio"
+                                    :class="{
+                                      right:
+                                        item.optionsId ==
+                                          question.ques[jsonIndex] ||
+                                        item.optionsId ==
+                                          question.ans[jsonIndex],
+                                      wrong:
+                                        item.optionsId ==
+                                          question.ques[jsonIndex] &&
+                                        question.ques[jsonIndex] !=
+                                          question.ans[jsonIndex],
+                                    }"
+                                    v-for="(item, index) in json.optionsList"
+                                    :key="index"
+                                  >
+                                    <div>
+                                      {{ ast[index] }}. {{ item.content }}
+                                      <div v-if="item.imgUrl">
+                                        <img
+                                          style="max-width: 100%"
+                                          :src="
+                                            $tools.splitImgHost(item.imgUrl)
+                                          "
+                                          alt=""
+                                        />
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  class="answer-list"
+                                  v-if="question.ques[jsonIndex]"
+                                >
+                                  <div class="answer-list__left">
+                                    正确答案：{{
+                                      ast[question.ans[jsonIndex] - 1]
+                                    }}
+                                  </div>
+                                  <div class="answer-list__left">
+                                    我的答案：{{
+                                      ast[question.ques[jsonIndex] - 1]
+                                    }}
+                                  </div>
+                                </div>
+                                <div
+                                  class="explain-list"
+                                  v-if="question.ques[jsonIndex]"
+                                >
+                                  <div class="explain-list__header">
+                                    答案解析：
+                                  </div>
+                                  <div
+                                    class="explain-list__body"
+                                    v-html="json.analysisContent"
+                                  ></div>
+                                </div>
+                              </div>
+                              <div class="question__btns"></div>
+                            </div>
+                            <div
+                              class="question"
+                              v-if="json.type == 2"
+                              :key="jsonIndex"
+                            >
+                              <div class="question__title">
+                                {{ jsonIndex + 1 }}、多选题
+                              </div>
+                              <div
+                                class="question__desc"
+                                v-html="json.content"
+                              ></div>
+                              <div class="question__content">
+                                <div
+                                  class="question-list"
+                                  v-if="!question.ques[jsonIndex]"
+                                >
+                                  <el-checkbox
+                                    class="checkbox"
+                                    v-for="(item, index) in json.optionsList"
+                                    :key="index"
+                                    :label="item.optionsId"
+                                    v-model="item.checked"
+                                  >
+                                    <div>
+                                      {{ ast[index] }}. {{ item.content }}
+                                      <div v-if="item.imgUrl">
+                                        <img
+                                          style="max-width: 100%"
+                                          :src="
+                                            $tools.splitImgHost(item.imgUrl)
+                                          "
+                                          alt=""
+                                        />
+                                      </div>
+                                    </div>
+                                  </el-checkbox>
+                                </div>
+                                <div
+                                  class="question-list"
+                                  v-if="question.ques[jsonIndex]"
+                                >
+                                  <el-checkbox
+                                    disabled
+                                    class="checkbox"
+                                    :class="{
+                                      right:
+                                        question.ques[jsonIndex].indexOf(
+                                          item.optionsId
+                                        ) != -1 ||
+                                        question.ans[jsonIndex].indexOf(
+                                          item.optionsId
+                                        ) != -1,
+                                      wrong:
+                                        question.ques[jsonIndex].indexOf(
+                                          item.optionsId
+                                        ) != -1 &&
+                                        question.ans[jsonIndex].indexOf(
+                                          item.optionsId
+                                        ) == -1,
+                                    }"
+                                    v-for="(item, index) in json.optionsList"
+                                    :key="index"
+                                    :label="item.optionsId"
+                                    v-model="item.checked"
+                                  >
+                                    <div>
+                                      {{ ast[index] }}. {{ item.content }}
+                                      <div v-if="item.imgUrl">
+                                        <img
+                                          style="max-width: 100%"
+                                          :src="
+                                            $tools.splitImgHost(item.imgUrl)
+                                          "
+                                          alt=""
+                                        />
+                                      </div>
+                                    </div>
+                                  </el-checkbox>
+                                </div>
+                                <div
+                                  class="answer-list"
+                                  v-if="question.ques[jsonIndex]"
+                                >
+                                  <div class="answer-list__left">
+                                    正确答案：
+                                    <template
+                                      v-for="ansItem in question.ans[jsonIndex]"
+                                      >{{ ast[ansItem - 1] }}</template
+                                    >
+                                  </div>
+                                  <div class="answer-list__left">
+                                    我的答案：
+                                    <template
+                                      v-for="quesItem in question.ques[
+                                        jsonIndex
+                                      ]"
+                                      >{{ ast[quesItem - 1] }}</template
+                                    >
+                                  </div>
+                                </div>
+                                <div
+                                  class="explain-list"
+                                  v-if="question.ques[jsonIndex]"
+                                >
+                                  <div class="explain-list__header">
+                                    答案解析：
+                                  </div>
+                                  <div
+                                    class="explain-list__body"
+                                    v-html="json.analysisContent"
+                                  ></div>
+                                </div>
+                              </div>
+                              <div class="question__btns">
+                                <div
+                                  v-if="!question.ques[jsonIndex]"
+                                  class="submit"
+                                  @click="
+                                    checkboxSubmitChild(
+                                      questionIndex,
+                                      jsonIndex
+                                    )
+                                  "
+                                >
+                                  确认答案
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              class="question"
+                              v-if="json.type == 3"
+                              :key="jsonIndex"
+                            >
+                              <div class="question__title">
+                                {{ jsonIndex + 1 }}、判断题
+                              </div>
+                              <div
+                                class="question__desc"
+                                v-html="json.content"
+                              ></div>
+                              <div class="question__content">
+                                <div
+                                  class="question-list"
+                                  v-if="!question.ques[jsonIndex]"
+                                >
+                                  <div
+                                    class="radio"
+                                    v-for="(item, index) in judge"
+                                    :key="index"
+                                    @click="
+                                      judgeSelectChild(
+                                        questionIndex,
+                                        jsonIndex,
+                                        index
+                                      )
+                                    "
+                                  >
+                                    <div>
+                                      {{ ast[index] }}. {{ item }}
+                                      <div v-if="item.imgUrl">
+                                        <img
+                                          style="max-width: 100%"
+                                          :src="
+                                            $tools.splitImgHost(item.imgUrl)
+                                          "
+                                          alt=""
+                                        />
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  class="question-list"
+                                  v-if="question.ques[jsonIndex]"
+                                >
+                                  <div
+                                    class="radio"
+                                    :class="{
+                                      right:
+                                        index == question.ques[jsonIndex] ||
+                                        index == question.ans[jsonIndex],
+                                      wrong:
+                                        index == question.ques[jsonIndex] &&
+                                        question.ques[jsonIndex] !=
+                                          question.ans[jsonIndex],
+                                    }"
+                                    v-for="(item, index) in judge"
+                                    :key="index"
+                                  >
+                                    <div>
+                                      {{ ast[index] }}. {{ item }}
+                                      <div v-if="item.imgUrl">
+                                        <img
+                                          style="max-width: 100%"
+                                          :src="
+                                            $tools.splitImgHost(item.imgUrl)
+                                          "
+                                          alt=""
+                                        />
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  class="answer-list"
+                                  v-if="question.ques[jsonIndex]"
+                                >
+                                  <div class="answer-list__left">
+                                    正确答案：{{ ast[question.ans[jsonIndex]] }}
+                                  </div>
+                                  <div class="answer-list__left">
+                                    我的答案：{{
+                                      ast[question.ques[jsonIndex]]
+                                    }}
+                                  </div>
+                                </div>
+                                <div
+                                  class="explain-list"
+                                  v-if="question.ques[jsonIndex]"
+                                >
+                                  <div class="explain-list__header">
+                                    答案解析：
+                                  </div>
+                                  <div
+                                    class="explain-list__body"
+                                    v-html="json.analysisContent"
+                                  ></div>
+                                </div>
+                              </div>
+                              <div class="question__btns"></div>
+                            </div>
+
+                            <div
+                              class="question"
+                              v-if="json.type == 5"
+                              :key="jsonIndex"
+                            >
+                              <div class="question__title">
+                                {{ jsonIndex + 1 }}、简答题
+                              </div>
+                              <div
+                                class="question__desc"
+                                v-html="json.content"
+                              ></div>
+                              <div class="question__content">
+                                <div
+                                  class="question-list textarea"
+                                  v-if="
+                                    !(
+                                      question.ques[jsonIndex] &&
+                                      (question.ques[jsonIndex].imageList
+                                        .length ||
+                                        question.ques[jsonIndex].text)
+                                    )
+                                  "
+                                >
+                                  <el-input
+                                    type="textarea"
+                                    rows="5"
+                                    v-model="json.ansText.text"
+                                    resize="none"
+                                  ></el-input>
+                                  <div class="upload clearfix">
+                                    <div
+                                      class="upload__imgs"
+                                      v-for="(img, imgIndex) in json.ansText
+                                        .imageList"
+                                      :key="imgIndex"
+                                    >
+                                      <img
+                                        :src="$tools.splitImgHost(img, true)"
+                                        alt=""
+                                      />
+                                    </div>
+                                    <div class="upload__btn">
+                                      <i class="el-icon-plus icon"></i>
+                                      <p>上传图片</p>
+                                      <input
+                                        @change="
+                                          uploadImgChild(
+                                            $event,
+                                            questionIndex,
+                                            jsonIndex
+                                          )
+                                        "
+                                        type="file"
+                                      />
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  class="explain-list"
+                                  v-if="
+                                    question.ques[jsonIndex] &&
+                                    (question.ques[jsonIndex].imageList
+                                      .length ||
+                                      question.ques[jsonIndex].text)
+                                  "
+                                >
+                                  <div class="explain-list__header">
+                                    我的答案:
+                                  </div>
+                                  <div class="explain-list__body">
+                                    <div>
+                                      {{ question.ques[jsonIndex].text }}
+                                    </div>
+                                    <div class="upload clearfix">
+                                      <div
+                                        class="upload__imgs"
+                                        v-for="(img, imgIndex) in question.ques[
+                                          jsonIndex
+                                        ].imageList"
+                                        :key="imgIndex"
+                                      >
+                                        <img
+                                          :src="$tools.splitImgHost(img, true)"
+                                          alt=""
+                                        />
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div class="explain-list__header">
+                                    答案解析：
+                                  </div>
+                                  <div
+                                    class="explain-list__body"
+                                    v-html="question.analysisContent"
+                                  ></div>
+                                </div>
+                              </div>
+                              <div class="question__btns">
+                                <div
+                                  v-if="
+                                    !(
+                                      question.ques[jsonIndex] &&
+                                      (question.ques[jsonIndex].imageList
+                                        .length ||
+                                        question.ques[jsonIndex].text)
+                                    )
+                                  "
+                                  class="submit"
+                                  @click="
+                                    ansSubmitChild(
+                                      question,
+                                      questionIndex,
+                                      jsonIndex
+                                    )
+                                  "
+                                >
+                                  确认答案
+                                </div>
+                              </div>
+                            </div>
+                          </el-tab-pane>
+                        </el-tabs>
+                      </div>
+                      <div class="question__btns">
+                        <div
+                          class="collect"
+                          @click="
+                            collect(collectList[questionIndex], questionIndex)
+                          "
+                        >
+                          <template v-if="!collectList[questionIndex]"
+                            ><i class="el-icon-star-off"></i>收藏本题</template
+                          >
+                          <template v-if="collectList[questionIndex]"
+                            ><i class="el-icon-star-on"></i>已收藏</template
+                          >
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="question"
+                      v-if="question.type == 5 && current == questionIndex"
+                      :key="questionIndex"
+                    >
+                      <div class="question__title">
+                        {{ questionIndex + 1 }}、简答题
+                      </div>
+                      <div
+                        class="question__desc"
+                        v-html="question.content"
+                      ></div>
+                      <div class="question__content">
+                        <div
+                          class="question-list textarea"
+                          v-if="
+                            !question.ques.imageList.length &&
+                            !question.ques.text
+                          "
+                        >
+                          <el-input
+                            type="textarea"
+                            rows="5"
+                            v-model="question.ansText.text"
+                            resize="none"
+                          ></el-input>
+                          <div class="upload clearfix">
+                            <div
+                              class="upload__imgs"
+                              v-for="(img, imgIndex) in question.ansText
+                                .imageList"
+                              :key="imgIndex"
+                            >
+                              <img
+                                :src="$tools.splitImgHost(img, true)"
+                                alt=""
+                              />
+                            </div>
+                            <div class="upload__btn">
+                              <i class="el-icon-plus icon"></i>
+                              <p>上传图片</p>
+                              <input
+                                @change="
+                                  uploadImg($event, question, questionIndex)
+                                "
+                                type="file"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="explain-list"
+                          v-if="
+                            question.ques.imageList.length || question.ques.text
+                          "
+                        >
+                          <div class="explain-list__header">我的答案:</div>
+                          <div class="explain-list__body">
+                            <div>{{ question.ques.text }}</div>
+                            <div class="upload clearfix">
+                              <div
+                                class="upload__imgs"
+                                v-for="(img, imgIndex) in question.ques
+                                  .imageList"
+                                :key="imgIndex"
+                              >
+                                <img
+                                  :src="$tools.splitImgHost(img, true)"
+                                  alt=""
+                                />
+                              </div>
+                            </div>
+                          </div>
+                          <div class="explain-list__header">答案解析：</div>
+                          <div
+                            class="explain-list__body"
+                            v-html="question.analysisContent"
+                          ></div>
+                        </div>
+                      </div>
+                      <div class="question__btns">
+                        <div
+                          v-if="
+                            !question.ques.imageList.length &&
+                            !question.ques.text
+                          "
+                          class="submit"
+                          @click="ansSubmit(question, questionIndex)"
+                        >
+                          确认答案
+                        </div>
+                        <div
+                          class="collect"
+                          @click="
+                            collect(collectList[questionIndex], questionIndex)
+                          "
+                        >
+                          <template v-if="!collectList[questionIndex]"
+                            ><i class="el-icon-star-off"></i>收藏本题</template
+                          >
+                          <template v-if="collectList[questionIndex]"
+                            ><i class="el-icon-star-on"></i>已收藏</template
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                </div>
+              </div>
+              <div class="right-box">
+                <div class="right-box__header">
+                  <el-button
+                    type="primary"
+                    round
+                    plain
+                    size="small"
+                    class="back-btn"
+                    @click="$router.back(-1)"
+                    >返回</el-button
+                  >
+                </div>
+
+                <div class="right-box__footer">
+                  <el-button
+                    type="primary"
+                    :loading="loading"
+                    class="submit"
+                    @click="submit"
+                    >交卷</el-button
+                  >
+                </div>
+                <div class="right-box__header">
+                  <div class="title">答题卡</div>
+                  <div class="time" v-if="allTimes">
+                    {{ countdown(lastTime) }}
+                  </div>
+                </div>
+                <div class="right-box__body">
+                  <div class="card">
+                    <div class="card__note">
+                      <div class="item">
+                        <div class="box green"></div>
+                        正确
+                      </div>
+                      <div class="item">
+                        <div class="box red"></div>
+                        错误
+                      </div>
+                      <div class="item">
+                        <div class="box blue"></div>
+                        已做未评改
+                      </div>
+
+                      <div class="item">
+                        <div class="box yellow"></div>
+                        少选
+                      </div>
+                      <div class="item">
+                        <div class="box white"></div>
+                        未做
+                      </div>
+                    </div>
+                    <div class="card__content">
+                      <ul class="list">
+                        <li
+                          class="item white"
+                          v-for="(item, index) in questionList"
+                          :key="index"
+                          :class="{
+                            green: isRight(item, index),
+                            red: isWrong(item, index),
+                            yellow: isPart(item, index),
+                            blue: isOver(item, index),
+                          }"
+                          @click="changeIndex(index)"
+                        >
+                          {{ index + 1 }}
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <ToolBar></ToolBar>
+    <Footer></Footer>
+  </div>
+</template>
+
+<script>
+import Footer from "@/components/footer/index";
+import Header from "@/components/header/index";
+import ToolBar from "@/components/toolbar/index";
+import { mapMutations } from "vuex";
+export default {
+  name: "BankExplain",
+  components: {
+    Footer,
+    Header,
+    ToolBar,
+  },
+  data() {
+    return {
+      recordId: 0,
+      tabIndex: "1",
+      textarea: "",
+      questionIndex: 0,
+      checked: false,
+      activeName: "1",
+      questionList: [],
+      goodsExamConfig: [],
+      goodsDetail: {},
+      bankList: [],
+      judge: ["错误", "正确"],
+      ast: [
+        "A",
+        "B",
+        "C",
+        "D",
+        "E",
+        "F",
+        "G",
+        "H",
+        "I",
+        "J",
+        "K",
+        "L",
+        "M",
+        "N",
+        "O",
+        "P",
+        "Q",
+        "R",
+        "S",
+        "T",
+        "U",
+        "V",
+        "W",
+        "X",
+        "Y",
+        "Z",
+      ],
+      loading: false,
+      needPhoto: false,
+      lastTime: 0, //剩余考试时长
+      allTimes: 0, //总考试时长
+      lastCount: 0,
+      examId: 0,
+      current: 0,
+      eachExamId: 0,
+      bankType: 0,
+      timer: null,
+      examData: {},
+      collectList: [],
+      isSubmit: false,
+      postTimer: null,
+    };
+  },
+  async mounted() {
+    this.examId = this.$route.query.examId;
+    this.eachExamId = this.$route.query.eachExamId;
+
+    await this.bankExam();
+    this.goodsQuestionList();
+  },
+
+  beforeDestroy() {
+    clearInterval(this.postTimer);
+    clearInterval(this.timer);
+    try {
+      this.$msgbox.close();
+    } catch (err) {}
+  },
+  beforeRouteLeave(to, from, next) {
+    if (this.isSubmit) {
+      //交卷
+      next();
+    } else {
+      //离开
+      if (this.bankType == 1) {
+        console.log(1);
+        let ansCount = this.questionOverNum(true); //已答题数
+        this.lastCount = this.questionList.length - ansCount; //统计未答完的题数
+
+        //所有题目答完
+        if (this.lastCount == 0) {
+          // this.testOver = true;
+          this.$nextTick(() => {
+            this.$confirm("您还未交卷,确定结束做题吗？", "温馨提示", {
+              confirmButtonText: "结束做题",
+              cancelButtonText: "下次继续",
+              type: "warning",
+            })
+              .then(() => {
+                this.examSubmit();
+              })
+              .catch(() => {
+                this.mockRecordEdit();
+                next();
+              });
+          });
+          //未答完
+        } else {
+          this.$nextTick(() => {
+            this.$confirm(
+              `您还有${this.lastCount}道题未作答， 现在继续作答，还是下次继续？`,
+              "温馨提示",
+              {
+                confirmButtonText: "继续作答",
+                cancelButtonText: "下次继续",
+                type: "warning",
+              }
+            )
+              .then(() => {
+                // confirmButton回调
+              })
+              .catch(() => {
+                this.mockRecordEdit();
+                next();
+              });
+          });
+          // this.isLastCount = true;
+        }
+      } else if (this.bankType == 2) {
+        console.log(2);
+        let ansCount = this.questionOverNum(true); //已答题数
+        this.lastCount = this.questionList.length - ansCount; //统计未答完的题数
+
+        //所有题目答完
+        if (this.lastCount == 0) {
+          this.$nextTick(() => {
+            this.$confirm(`您已完成所有题目，快去交卷吧！`, "温馨提示", {
+              confirmButtonText: "立即交卷",
+              cancelButtonText: "暂不交卷",
+              type: "warning",
+            })
+              .then(() => {
+                // confirmButton回调
+                this.examSubmit();
+                next();
+              })
+              .catch(() => {});
+          });
+          //未答完
+        } else {
+          this.$nextTick(() => {
+            this.$confirm(
+              `您当前正在测试，还剩${this.lastCount}道题未完成，离开视为交卷`,
+              "温馨提示",
+              {
+                confirmButtonText: "继续离开",
+                cancelButtonText: "暂不离开",
+                type: "warning",
+              }
+            )
+              .then(() => {
+                // confirmButton回调
+                console.log(12);
+                this.leaveNow();
+                next();
+              })
+              .catch(() => {});
+          });
+        }
+      }
+    }
+  },
+  methods: {
+    ...mapMutations(["setExamResult"]),
+    toFixed(num) {
+      if (num) {
+        let str = String(num).indexOf(".");
+
+        if (str != -1) {
+          return +num.toFixed(2);
+        } else {
+          return num;
+        }
+      } else {
+        return 0;
+      }
+    },
+
+    /**
+     * @param {Object} current
+     * 获取收藏信息
+     */
+    getCollectInfo(current) {
+      this.$request
+        .getCollectInfo({
+          examId: this.examId,
+          questionId: this.questionList[current].questionId,
+          goodsId: this.goodsId,
+          orderGoodsId: this.orderGoodsId,
+        })
+        .then((res) => {
+          this.$set(this.collectList, current, res.data);
+        })
+        .catch((err) => {
+          this.$set(this.collectList, current, false);
+        });
+    },
+
+    /**
+     * 是否做完所有题目
+     */
+    isDoOver() {
+      let questionOverNum = this.questionOverNum(true); //获取已经回答的题目数(包括简答和案例)
+      if (this.questionList.length == questionOverNum) {
+        //全部做完弹窗
+        this.$nextTick(() => {
+          this.$confirm(`您已完成所有题目，快去交卷吧！`, "温馨提示", {
+            confirmButtonText: "立即交卷",
+            cancelButtonText: "暂不交卷",
+            type: "warning",
+          })
+            .then(() => {
+              // confirmButton回调
+              this.examSubmit();
+            })
+            .catch(() => {});
+        });
+      }
+    },
+
+    /**
+     * 请求题目列表
+     */
+    goodsQuestionList() {
+      this.$request
+        .goodsQuestionList({
+          examId: this.examId,
+        })
+        .then(async (res) => {
+          if (!res.data.length) {
+            this.$message({
+              type: "warning",
+              message: "该试卷暂无题目",
+            });
+            return;
+          }
+          this.allTimes = res.data[0].answerTime * 60;
+          this.lastTime = res.data[0].answerTime && res.data[0].answerTime * 60;
+
+          //考试时间到了自动交卷
+          if (this.lastTime) {
+            this.timer = setInterval(() => {
+              if (this.lastTime <= 0) {
+                clearInterval(this.timer);
+                this.$confirm(`考试时间已到，系统将自动交卷`, "提示", {
+                  confirmButtonText: "立即交卷",
+                  closeOnClickModal: false,
+                  showCancelButton: false,
+                  closeOnPressEscape: false,
+                  distinguishCancelAndClose: false,
+                  showClose: false,
+                });
+
+                setTimeout(() => {
+                  try {
+                    this.$msgbox.close();
+                  } catch (err) {}
+                  this.examSubmit();
+                }, 3000);
+                return;
+              }
+              this.lastTime--;
+            }, 1000);
+          } else {
+          }
+
+          res.data.forEach((item, index) => {
+            item.jsonStr = JSON.parse(item.jsonStr);
+
+            console.log(item.type, "item");
+            if (item.type == 2) {
+              //多选
+              item.jsonStr.forEach((str) => {
+                str.optionsId = "" + str.optionsId;
+              });
+              let arr = item.answerQuestion.split(",");
+              arr.forEach((a, i) => {
+                arr[i] = "" + a;
+              });
+              item.ans = arr;
+              item.quesSelect = [];
+              item.analysisContent &&
+                (item.analysisContent = item.analysisContent.replace(
+                  /<img/gi,
+                  '<img style="max-width:100%;"'
+                ));
+              item.content &&
+                (item.content = item.content.replace(
+                  /<img/gi,
+                  '<img style="max-width:100%;"'
+                ));
+              return;
+            } else if (item.type == 5) {
+              //简答题
+              item.ansText = {
+                text: "",
+                imageList: [],
+              };
+              item.ques = {
+                text: "",
+                imageList: [],
+              };
+              item.analysisContent &&
+                (item.analysisContent = item.analysisContent.replace(
+                  /<img/gi,
+                  '<img style="max-width:100%;"'
+                ));
+              item.content &&
+                (item.content = item.content.replace(
+                  /<img/gi,
+                  '<img style="max-width:100%;"'
+                ));
+
+              return;
+            } else if (item.type == 4) {
+              //案例题
+              console.log(item.jsonStr);
+              item.ques = [];
+              item.tabIndex = "0";
+              let ansArr = [];
+              item.jsonStr.forEach((json, index) => {
+                if (json.type == 1) {
+                  ansArr[index] = json.answerQuestion;
+                  json.content &&
+                    (json.content = json.content.replace(
+                      /<img/gi,
+                      '<img style="max-width:100%;"'
+                    ));
+                } else if (json.type == 2) {
+                  json.optionsList.forEach((str) => {
+                    str.optionsId = "" + str.optionsId;
+                  });
+                  let arr = json.answerQuestion.split(",");
+                  arr.forEach((a, i) => {
+                    arr[i] = "" + a;
+                  });
+                  ansArr[index] = arr;
+                  json.content &&
+                    (json.content = json.content.replace(
+                      /<img/gi,
+                      '<img style="max-width:100%;"'
+                    ));
+                } else if (json.type == 3) {
+                  ansArr[index] = json.answerQuestion;
+                  json.content &&
+                    (json.content = json.content.replace(
+                      /<img/gi,
+                      '<img style="max-width:100%;"'
+                    ));
+                } else if (json.type == 5) {
+                  ansArr[index] = {
+                    text: "",
+                    imageList: [],
+                  };
+                  json.ansText = {
+                    text: "",
+                    imageList: [],
+                  };
+                  json.ques = {
+                    text: "",
+                    imageList: [],
+                  };
+                  json.content &&
+                    (json.content = json.content.replace(
+                      /<img/gi,
+                      '<img style="max-width:100%;"'
+                    ));
+                }
+              });
+
+              item.ans = ansArr;
+              return;
+            }
+            item.analysisContent &&
+              (item.analysisContent = item.analysisContent.replace(
+                /<img/gi,
+                '<img style="max-width:100%;"'
+              ));
+            item.content &&
+              (item.content = item.content.replace(
+                /<img/gi,
+                '<img style="max-width:100%;"'
+              ));
+            item.ques = "";
+            item.ans = item.answerQuestion;
+          });
+
+          this.questionList = res.data;
+          this.lastCount = this.questionList.length;
+
+          await this.mockRecord();
+        });
+    },
+
+    /**
+     * 记录总题数,获取recordId
+     * hasSpecial (是否包含简答和案例) true 包含  false 不包含
+     */
+    mockRecord(hasSpecial) {
+      return new Promise((resolve) => {
+        let self = this;
+        let questionList = 0;
+        // if(!hasSpecial) {
+        this.questionList.forEach((item, index) => {
+          if (item.type == 1 || item.type == 2 || item.type == 3) {
+            questionList++;
+          }
+        });
+        // } else {
+        // 	questionList = this.questionList.length;
+        // }
+
+        this.$request
+          .mockRecord({
+            eachExamId: this.eachExamId,
+            examId: this.examId,
+            totalQuestionNum: questionList,
+            allQuestionNum: this.questionList.length,
+          })
+          .then((res) => {
+            this.recordId = res.data;
+          });
+      });
+    },
+
+    /**
+     * 离开页面统计回答正确题数
+     */
+    mockRecordEdit() {
+      clearInterval(this.postTimer);
+      clearInterval(this.timer);
+      let number = 0;
+      let score = 0;
+      let doQuestionNum = 0;
+      let doQuestionIds = []; //做过的题目id
+      let lessQuestionNum = 0;
+      this.questionList.forEach((item, index) => {
+        if (item.type == 1) {
+          if (item.ques == item.ans) {
+            score += item.score;
+            number++;
+          }
+
+          if (item.ques) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item.type == 2) {
+          let isRight =
+            item.ans &&
+            item.ans.every((quesItem, quesIndex) => {
+              if (item.ques) {
+                return item.ques[quesIndex] == item.ans[quesIndex];
+              } else {
+                return false;
+              }
+            });
+
+          if (isRight) {
+            score += item.score;
+            number++;
+          } else {
+            let hasPart = false;
+            let checkboxScore = 1; //获取单题总分数
+            item.ques &&
+              item.ques.forEach((ques, quesIndex) => {
+                //选错一个全扣
+                if (item.ques) {
+                  if (item.ans.indexOf(item.ques[quesIndex]) == -1) {
+                    checkboxScore = 0;
+                  }
+                } else {
+                  checkboxScore = 0;
+                }
+              });
+            console.log(checkboxScore);
+
+            //没选错
+            if (checkboxScore) {
+              checkboxScore = 0;
+              item.ans.forEach((ans, quesIndex) => {
+                //漏选扣一部分，对n题给n X partScore 分
+                if (item.ques) {
+                  if (item.ques.indexOf(item.ans[quesIndex]) != -1) {
+                    checkboxScore += item.partScore;
+                    hasPart = true;
+                  }
+                } else {
+                  checkboxScore = 0;
+                }
+              });
+            }
+
+            if (!hasPart) {
+              //0分
+            } else {
+              //部分分
+              // number++;
+              lessQuestionNum++;
+              score += checkboxScore;
+            }
+          }
+          if (item.ques && item.ques.length) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item.type == 3) {
+          if (item.ques == item.ans) {
+            score += item.score;
+            number++;
+          }
+
+          if (item.ques) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item == 4) {
+          if (item.ques.length) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item.type == 5) {
+          if (item.ques && (item.ques.imageList.length || item.ques.text)) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        }
+      });
+
+      this.$request
+        .mockRecordEdit({
+          eachExamId: this.eachExamId,
+          examId: this.examId,
+          recordId: this.recordId,
+          doQuestionIds: doQuestionIds.join(","),
+          rightQuestionNum: number,
+          lessQuestionNum: lessQuestionNum,
+          status: 1,
+          doQuestionNum: doQuestionNum,
+          historyExamJson: JSON.stringify(this.questionList),
+        })
+        .then((res) => {});
+    },
+
+    /**
+     * 获取试卷类型2考试,1练习
+     */
+    bankExam() {
+      return new Promise((resolve) => {
+        this.$request.bankExam(this.examId).then((res) => {
+          this.bankType = res.data.doType;
+          this.examData = res.data;
+          if (this.bankType == 2) {
+            this.needBack = true;
+          }
+
+          resolve();
+        });
+      });
+    },
+    /**
+     * @param {Object}
+     * 单选点击确认
+     */
+    radioSelect(question, questionIndex, optionsId) {
+      if (this.questionList[questionIndex].ques) return;
+      this.$set(this.questionList[questionIndex], "ques", optionsId);
+      this.isDoOver();
+    },
+
+    /**
+     * @param {Object}
+     * 案例单选点击
+     */
+    radioSelectChild(questionIndex, jsonIndex, optionsId) {
+      if (this.questionList[questionIndex].ques[jsonIndex]) return;
+      this.$set(this.questionList[questionIndex].ques, jsonIndex, optionsId);
+      this.isDoOver();
+    },
+    /**
+     * 多选点击确认
+     */
+    checkboxSubmit(question, questionIndex) {
+      if (this.questionList[questionIndex].ques) return;
+      let arr = [];
+      this.questionList[questionIndex].jsonStr.forEach((item) => {
+        if (item.checked) {
+          arr.push(item.optionsId);
+        }
+      });
+      if (!arr.length) {
+        this.$message({
+          type: "warning",
+          message: "请选择答案",
+        });
+        return;
+      }
+      this.$set(this.questionList[questionIndex], "ques", arr);
+      this.isDoOver();
+    },
+    /**
+     * @param {Object}
+     * 案例多选确认
+     */
+    checkboxSubmitChild(questionIndex, ansIndex) {
+      if (this.questionList[questionIndex].ques[ansIndex]) return;
+      let arr = [];
+      this.questionList[questionIndex].jsonStr[ansIndex].optionsList.forEach(
+        (item) => {
+          if (item.checked) {
+            arr.push(item.optionsId);
+          }
+        }
+      );
+
+      if (!arr.length) {
+        this.$message({
+          type: "warning",
+          message: "请选择答案",
+        });
+        return;
+      }
+
+      this.$set(this.questionList[questionIndex].ques, ansIndex, arr);
+      this.isDoOver();
+    },
+    /**
+     * 判断点击确认
+     */
+    judgeSelect(question, questionIndex, index) {
+      if (question.ques) return;
+      this.$set(this.questionList[questionIndex], "ques", index + "");
+      this.isDoOver();
+    },
+    judgeSelectChild(questionIndex, jsonIndex, index) {
+      console.log(this.questionList[questionIndex].ques[jsonIndex]);
+      if (this.questionList[questionIndex].ques[jsonIndex]) return;
+      this.$set(this.questionList[questionIndex].ques, jsonIndex, index + "");
+      this.isDoOver();
+    },
+
+    /**
+     * 上传图片
+     */
+    uploadImg(e, question, questionIndex) {
+      var file = e.target.files[0];
+      if (file.size > 2 * 1024 * 1024) {
+        this.$message.warn("图片不得大于2000kb");
+        return;
+      }
+      var type = e.target.value.toLowerCase().split(".").splice(-1);
+      if (
+        type[0] != "jpg" &&
+        type[0] != "png" &&
+        type[0] != "jpeg" &&
+        type[0] != "gif"
+      ) {
+        this.$message.error("上传格式需为：.jpg/.png/.jpeg/gif");
+        e.target.value = "";
+        return;
+      }
+
+      this.$upload.upload(file, 0).then((res) => {
+        question.ansText.imageList.push(res);
+      });
+    },
+
+    /**
+     * 案例上传图片
+     */
+    uploadImgChild(e, questionIndex, jsonIndex) {
+      var file = e.target.files[0];
+      if (file.size > 2 * 1024 * 1024) {
+        this.$message.warn("图片不得大于2000kb");
+        return;
+      }
+      var type = e.target.value.toLowerCase().split(".").splice(-1);
+      if (
+        type[0] != "jpg" &&
+        type[0] != "png" &&
+        type[0] != "jpeg" &&
+        type[0] != "gif"
+      ) {
+        this.$message.error("上传格式需为：.jpg/.png/.jpeg/gif");
+        e.target.value = "";
+        return;
+      }
+
+      this.$upload.upload(file, 0).then((res) => {
+        this.questionList[questionIndex].jsonStr[
+          jsonIndex
+        ].ansText.imageList.push(res);
+      });
+    },
+    isOver(item, index) {
+      if (this.questionList[index].ques) {
+        if (item.type == 4) {
+          //案例题
+          let isOver = item.jsonStr.every((jsonItem, indexs) => {
+            if (
+              jsonItem.type == 1 ||
+              jsonItem.type == 2 ||
+              jsonItem.type == 3
+            ) {
+              if (item.ques[indexs]) {
+                return true;
+              } else {
+                return false;
+              }
+            } else if (jsonItem.type == 5) {
+              if (
+                item.ques[indexs] &&
+                (item.ques[indexs].text || item.ques[indexs].imageList.length)
+              ) {
+                console.log("chil");
+                return true;
+              } else {
+                return false;
+              }
+            }
+          });
+
+          if (isOver) {
+            return true;
+          } else {
+            return false;
+          }
+        } else if (item.type == 5) {
+          //简答题
+          //每一项都相等
+          if (item.ques && (item.ques.imageList.length || item.ques.text)) {
+            return true;
+          }
+          //判断
+        } else {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+    ansSubmit(question, questionIndex) {
+      if (!question.ansText.text && !question.ansText.imageList.length) {
+        this.$message({
+          type: "warning",
+          message: "请输入内容或上传图片",
+        });
+        return;
+      }
+
+      question.ques.imageList = question.ansText.imageList;
+      question.ques.text = question.ansText.text;
+
+      this.isDoOver();
+
+      console.log(question.ques);
+    },
+    ansSubmitChild(question, questionIndex, jsonIndex) {
+      if (
+        !this.questionList[questionIndex].jsonStr[jsonIndex].ansText.text &&
+        !this.questionList[questionIndex].jsonStr[jsonIndex].ansText.imageList
+          .length
+      ) {
+        this.$message({
+          type: "warning",
+          message: "请输入内容或上传图片",
+        });
+        return;
+      }
+
+      this.$set(this.questionList[questionIndex].ques, jsonIndex, {
+        imageList:
+          this.questionList[questionIndex].jsonStr[jsonIndex].ansText
+            .imageList || [],
+        text:
+          this.questionList[questionIndex].jsonStr[jsonIndex].ansText.text ||
+          "",
+      });
+
+      this.isDoOver();
+    },
+
+    changeIndex(index) {
+      this.current = index;
+      this.getCollectInfo(this.current);
+    },
+    nextQuestion() {
+      if (this.current >= this.questionList.length - 1) {
+        this.$message({
+          type: "warning",
+          message: "已经是最后一题了！",
+        });
+        return;
+      }
+      this.current++;
+      this.getCollectInfo(this.current);
+    },
+    prevQuestion() {
+      if (this.current == 0) {
+        this.$message({
+          type: "warning",
+          message: "已经是第一题了！",
+        });
+        return;
+      } else {
+        this.current--;
+        this.getCollectInfo(this.current);
+      }
+    },
+    isRight(item, index) {
+      //单选
+      if (this.questionList[index].ques) {
+        if (item.type == 1) {
+          console.log(
+            this.questionList[index].ques == this.questionList[index].ans
+          );
+          return this.questionList[index].ques == this.questionList[index].ans;
+          //多选
+        } else if (item.type == 2) {
+          //每一项都相等
+          return this.questionList[index].ans.every((item, i) => {
+            return item == this.questionList[index].ques[i];
+          });
+          //判断
+        } else if (item.type == 3) {
+          return this.questionList[index].ques == this.questionList[index].ans;
+        } else {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+
+    isWrong(item, index) {
+      if (this.questionList[index].ques) {
+        //单选
+        if (item.type == 1) {
+          return this.questionList[index].ques != this.questionList[index].ans;
+          //多选
+        } else if (item.type == 2) {
+          //每一项都相等
+          return this.questionList[index].ques.some((item, i) => {
+            return this.questionList[index].ans.indexOf(item) == -1;
+          });
+          //判断
+        } else if (item.type == 3) {
+          return this.questionList[index].ques != this.questionList[index].ans;
+        } else {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+    isPart(item, index) {
+      if (this.questionList[index].ques) {
+        if (item.type == 2) {
+          let isWrong = this.questionList[index].ques.some((item, i) => {
+            return this.questionList[index].ans.indexOf(item) == -1;
+          });
+
+          let isRight = this.questionList[index].ans.every((item, i) => {
+            return item == this.questionList[index].ques[i];
+          });
+
+          if (!isRight && !isWrong) {
+            return true;
+          }
+        }
+      } else {
+        return false;
+      }
+    },
+    right(bankIndex, ansIndex, option) {
+      if (
+        this.questionList[bankIndex].ques[ansIndex] &&
+        this.questionList[bankIndex].ans[ansIndex]
+      ) {
+        if (
+          this.questionList[bankIndex].ques[ansIndex].indexOf(
+            option.optionsId
+          ) != -1 ||
+          this.questionList[bankIndex].ans[ansIndex].indexOf(
+            option.optionsId
+          ) != -1
+        ) {
+          return true;
+        } else {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+
+    wrong(bankIndex, ansIndex, option) {
+      if (
+        this.questionList[bankIndex].ques[ansIndex] &&
+        this.questionList[bankIndex].ans[ansIndex]
+      ) {
+        if (
+          this.questionList[bankIndex].ques[ansIndex].indexOf(
+            option.optionsId
+          ) != -1 &&
+          this.questionList[bankIndex].ans[ansIndex].indexOf(
+            option.optionsId
+          ) == -1
+        ) {
+          return true;
+        } else {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+
+    /**
+     * 获取已经回答的题目数
+     * hasSpecail (是否包含简答和案例)
+     */
+    questionOverNum(hasSpecail) {
+      let count = 0;
+      this.questionList.forEach((item) => {
+        if (item.type == 1 || item.type == 2 || item.type == 3) {
+          if (item.ques) {
+            count++;
+          }
+        } else if (item.type == 4) {
+          //案例题
+          if (hasSpecail) {
+            let isOver = item.jsonStr.every((jsonItem, index) => {
+              if (
+                jsonItem.type == 1 ||
+                jsonItem.type == 2 ||
+                jsonItem.type == 3
+              ) {
+                if (item.ques[index]) {
+                  return true;
+                } else {
+                  return false;
+                }
+              } else if (jsonItem.type == 5) {
+                if (
+                  item.ques[index] &&
+                  (item.ques[index].text || item.ques[index].imageList.length)
+                ) {
+                  return true;
+                } else {
+                  return false;
+                }
+              }
+            });
+
+            if (isOver) {
+              count++;
+              console.log(item, 444);
+            }
+          }
+        } else if (item.type == 5) {
+          //简答题
+          if (hasSpecail) {
+            if (item.ques && (item.ques.text || item.ques.imageList.length)) {
+              console.log(5, item);
+              count++;
+            }
+          }
+        }
+      });
+
+      return count;
+    },
+
+    collect(state, index) {
+      if (!state) {
+        this.$request
+          .collectQuestion({
+            examId: this.examId,
+            questionId: this.questionList[index].questionId,
+            goodsId: this.goodsId || "",
+            orderGoodsId: this.orderGoodsId,
+          })
+          .then((res) => {
+            this.$set(this.collectList, index, true);
+            this.$message.success("收藏成功");
+            this.getCollectInfo(index);
+          });
+      } else {
+        this.$request
+          .deleteCollectQuestion(this.collectList[index].collectQuestionId)
+          .then((res) => {
+            this.$set(this.collectList, index, false);
+            this.$message.success("取消收藏成功");
+          });
+      }
+      return;
+    },
+    submit() {
+      let ansCount = this.questionOverNum(true); //已答题数
+      this.lastCount = this.questionList.length - ansCount; //统计未答完的题数
+      //没有答完
+      if (this.lastCount > 0) {
+        this.$confirm(
+          `您还有${this.lastCount}道题未作答， 现在继续作答，还是下次继续？`,
+          "提示",
+          {
+            confirmButtonText: "立即交卷",
+            cancelButtonText: "继续做题",
+            closeOnClickModal: false,
+            closeOnPressEscape: false,
+            distinguishCancelAndClose: false,
+            showClose: false,
+          }
+        )
+          .then((_) => {
+            this.examSubmit();
+          })
+          .catch((_) => {});
+        return;
+      }
+
+      if (this.bankType == 2) {
+        if (this.lastTime > 0) {
+          let lastTime = this.countdown(this.lastTime);
+          this.$confirm(`时间还剩余${lastTime},确定交卷吗?`, "提示", {
+            confirmButtonText: "交卷",
+            cancelButtonText: "继续答题",
+            closeOnClickModal: false,
+            closeOnPressEscape: false,
+            distinguishCancelAndClose: false,
+            showClose: false,
+          })
+            .then((_) => {
+              this.examSubmit();
+            })
+            .catch((_) => {});
+          return;
+        }
+      }
+
+      this.examSubmit();
+    },
+    /**
+     * @param {Object} second倒计时过滤器
+     */
+    countdown(second) {
+      if (second) {
+        let h = parseInt((second / 60 / 60) % 24); //   计算小时
+        let m = parseInt((second / 60) % 60); //   计算分数
+        let s = parseInt(second % 60); //   计算当前秒数
+
+        if (h < 10) h = "0" + h;
+        if (m < 10) m = "0" + m;
+        if (s < 10) s = "0" + s;
+
+        return h + ":" + m + ":" + s;
+      } else {
+        return "";
+      }
+    },
+    /**
+     * 交卷，跳转报告页
+     */
+    examSubmit() {
+      console.log(12313);
+      this.loading = true;
+      clearInterval(this.timer);
+      clearInterval(this.postTimer);
+      let score = 0; //计算总分
+      let reportStatus = 0;
+      let number = 0; //做对的题目数量
+      let doQuestionNum = 0; //做过的题目数量
+      let allScore = 0; //总分
+      let passScore = 0;
+      let doWrongQuestionIds = []; //错题和未做题id(客观题)
+      let doQuestionIds = []; //做过的题目id
+      let rightQuestionIds = []; //做对的题目id
+      let lessQuestionNum = 0;
+      this.questionList.forEach((item, index) => {
+        passScore = item.passScore;
+        if (item.type == 1) {
+          //正确
+          if (item.ques == item.ans) {
+            item.scoreResult = item.score;
+            score += item.score;
+            number++;
+            rightQuestionIds.push(item.questionId);
+          } else {
+            //错误
+            item.scoreResult = 0;
+            if (item.ques) {
+              doWrongQuestionIds.push(item.questionId);
+            }
+          }
+          allScore += item.score;
+          if (item.ques) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item.type == 2) {
+          let isRight =
+            item.ans &&
+            item.ans.every((quesItem, quesIndex) => {
+              if (item.ques) {
+                return item.ques[quesIndex] == item.ans[quesIndex];
+              } else {
+                return false;
+              }
+            });
+
+          if (isRight) {
+            score += item.score;
+            number++;
+            item.scoreResult = item.score;
+            rightQuestionIds.push(item.questionId);
+          } else {
+            let hasPart = false;
+            let checkboxScore = 1; //获取单题总分数
+            item.ques &&
+              item.ques.forEach((ques, quesIndex) => {
+                //选错一个全扣
+                if (item.ques) {
+                  if (item.ans.indexOf(item.ques[quesIndex]) == -1) {
+                    checkboxScore = 0;
+                  }
+                } else {
+                  checkboxScore = 0;
+                }
+              });
+            console.log(checkboxScore, "checkboxScore1");
+
+            //没选错
+            if (checkboxScore) {
+              checkboxScore = 0;
+              item.ans.forEach((ans, quesIndex) => {
+                //漏选扣一部分，对n题给n X partScore 分
+                if (item.ques) {
+                  if (item.ques.indexOf(item.ans[quesIndex]) != -1) {
+                    checkboxScore += item.partScore;
+                    hasPart = true;
+                  }
+                } else {
+                  checkboxScore = 0;
+                }
+              });
+            }
+            console.log(checkboxScore, "checkboxScore2");
+
+            if (!hasPart) {
+              //0分
+              item.scoreResult = 0;
+              if (item.ques) {
+                doWrongQuestionIds.push(item.questionId);
+              }
+            } else {
+              //部分分
+              // number++;
+              lessQuestionNum++;
+              // doWrongQuestionIds.push(item.questionId);
+              item.scoreResult = checkboxScore;
+              score += checkboxScore;
+              // rightQuestionIds.push(item.questionId)
+            }
+          }
+          allScore += item.score;
+          if (item.ques && item.ques.length) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item.type == 3) {
+          if (item.ques == item.ans) {
+            item.scoreResult = item.score;
+            score += item.score;
+            number++;
+            rightQuestionIds.push(item.questionId);
+          } else {
+            item.scoreResult = 0;
+            if (item.ques) {
+              doWrongQuestionIds.push(item.questionId);
+            }
+          }
+          allScore += item.score;
+          if (item.ques) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item.type == 4) {
+          allScore += item.score;
+          if (item.ques && item.ques.length) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item.type == 5) {
+          allScore += item.score;
+          if (item.ques && (item.ques.imageList.length || item.ques.text)) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        }
+      });
+
+      //大于及格
+      if (score >= passScore) {
+        reportStatus = 1;
+      } else {
+        reportStatus = 0;
+      }
+
+      // setTimeout(() => {
+      //   let result = {
+      //     chapterId: this.chapterId,
+      //     moduleId: this.moduleId,
+      //     examId: this.examId,
+      //     recordId: this.recordId,
+      //   };
+
+      //   this.setExamResult(result);
+      //   this.$router.push({
+      //     path: "/bank-report/" + this.goodsId,
+      //   });
+      // }, 1000);
+      // return;
+      //交卷
+      this.$request
+        .mockRecordEdit({
+          eachExamId: this.eachExamId,
+          examId: this.examId,
+          reportStatus: reportStatus,
+          recordId: this.recordId,
+          lessQuestionNum: lessQuestionNum,
+          rightQuestionNum: number,
+          status: 1,
+          doQuestionIds: doQuestionIds.join(","),
+          rightQuestionIds: rightQuestionIds.join(","),
+          doQuestionNum: doQuestionNum,
+          performance: score,
+          totalScore: allScore,
+          examTime: parseInt(this.allTimes),
+          doTime: parseInt(this.allTimes) - parseInt(this.lastTime),
+          historyExamJson: JSON.stringify(this.questionList),
+        })
+        .then((res) => {
+          this.isSubmit = true;
+          this.loading = false;
+          this.$message({
+            type: "success",
+            message: "交卷成功",
+          });
+
+          setTimeout(() => {
+            this.$router.replace({
+              path: "/mock-report",
+              query: {
+                eachExamId: this.eachExamId,
+                examId: this.examId,
+                recordId: this.recordId,
+              },
+            });
+          }, 1000);
+        })
+        .catch((err) => {
+          this.loading = false;
+        });
+
+      //错题集id提交（客观题）
+      this.$request
+        .mockWrongRecord({
+          eachExamId: this.eachExamId,
+          examId: this.examId,
+          questionIds: doWrongQuestionIds,
+          recordId: this.recordId,
+        })
+        .then((res) => {})
+        .catch((err) => {});
+    },
+
+    /**
+     * 交卷，不用跳转
+     */
+    leaveNow() {
+      clearInterval(this.timer);
+      clearInterval(this.postTimer);
+      let score = 0; //计算总分
+      let reportStatus = 0;
+      let number = 0; //做对的题目数量
+      let doQuestionNum = 0; //做过的题目数量
+      let allScore = 0; //总分
+      let passScore = 0;
+      let doWrongQuestionIds = []; //错题和未做题id(客观题)
+      let doQuestionIds = []; //做过的题目id
+      let rightQuestionIds = []; //做对的题目id
+      let lessQuestionNum = 0;
+      console.log(111);
+      this.questionList.forEach((item, index) => {
+        passScore = item.passScore;
+        if (item.type == 1) {
+          //正确
+          if (item.ques == item.ans) {
+            item.scoreResult = item.score;
+            score += item.score;
+            number++;
+            rightQuestionIds.push(item.questionId);
+          } else {
+            //错误
+            item.scoreResult = 0;
+            if (item.ques) {
+              doWrongQuestionIds.push(item.questionId);
+            }
+          }
+          allScore += item.score;
+          if (item.ques) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item.type == 2) {
+          let isRight =
+            item.ans &&
+            item.ans.every((quesItem, quesIndex) => {
+              if (item.ques) {
+                return item.ques[quesIndex] == item.ans[quesIndex];
+              } else {
+                return false;
+              }
+            });
+
+          if (isRight) {
+            score += item.score;
+            number++;
+            item.scoreResult = item.score;
+            rightQuestionIds.push(item.questionId);
+          } else {
+            let hasPart = false;
+            let checkboxScore = 1; //获取单题总分数
+            item.ques &&
+              item.ques.forEach((ques, quesIndex) => {
+                //选错一个全扣
+                if (item.ques) {
+                  if (item.ans.indexOf(item.ques[quesIndex]) == -1) {
+                    checkboxScore = 0;
+                  }
+                } else {
+                  checkboxScore = 0;
+                }
+              });
+            console.log(checkboxScore, "checkboxScore1");
+
+            //没选错
+            if (checkboxScore) {
+              checkboxScore = 0;
+              item.ans.forEach((ans, quesIndex) => {
+                //漏选扣一部分，对n题给n X partScore 分
+                if (item.ques) {
+                  if (item.ques.indexOf(item.ans[quesIndex]) != -1) {
+                    checkboxScore += item.partScore;
+                    hasPart = true;
+                  }
+                } else {
+                  checkboxScore = 0;
+                }
+              });
+            }
+            console.log(checkboxScore, "checkboxScore2");
+
+            if (!hasPart) {
+              //0分
+              item.scoreResult = 0;
+              if (item.ques) {
+                doWrongQuestionIds.push(item.questionId);
+              }
+            } else {
+              //部分分
+              // number++;
+              lessQuestionNum++;
+              // doWrongQuestionIds.push(item.questionId);
+              item.scoreResult = checkboxScore;
+              score += checkboxScore;
+              // rightQuestionIds.push(item.questionId)
+            }
+          }
+          allScore += item.score;
+          if (item.ques && item.ques.length) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item.type == 3) {
+          if (item.ques == item.ans) {
+            item.scoreResult = item.score;
+            score += item.score;
+            number++;
+            rightQuestionIds.push(item.questionId);
+          } else {
+            item.scoreResult = 0;
+            if (item.ques) {
+              doWrongQuestionIds.push(item.questionId);
+            }
+          }
+          allScore += item.score;
+          if (item.ques) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item.type == 4) {
+          allScore += item.score;
+          if (item.ques && item.ques.length) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item.type == 5) {
+          allScore += item.score;
+          if (item.ques && (item.ques.imageList.length || item.ques.text)) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        }
+      });
+
+      //大于及格
+      if (score >= passScore) {
+        reportStatus = 1;
+      } else {
+        reportStatus = 0;
+      }
+
+      console.log(333);
+      //交卷
+      this.$request
+        .mockRecordEdit({
+          eachExamId: this.eachExamId,
+          examId: this.examId,
+          reportStatus: reportStatus,
+          recordId: this.recordId,
+          rightQuestionNum: number,
+          lessQuestionNum: lessQuestionNum,
+          status: 1,
+          doQuestionIds: doQuestionIds.join(","),
+          rightQuestionIds: rightQuestionIds.join(","),
+          doQuestionNum: doQuestionNum,
+          performance: score,
+          totalScore: allScore,
+          examTime: parseInt(this.allTimes),
+          doTime: parseInt(this.allTimes) - parseInt(this.lastTime),
+          historyExamJson: JSON.stringify(this.questionList),
+        })
+        .then((res) => {});
+
+      console.log(222);
+      //错题集id提交（客观题）
+      this.$request
+        .examWrongRecord({
+          eachExamId: this.eachExamId,
+          examId: this.examId,
+          questionIds: doWrongQuestionIds,
+          recordId: this.recordId,
+        })
+        .then((res) => {
+          this.loading = false;
+        })
+        .catch((err) => {
+          this.loading = false;
+        });
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.course-exam {
+  .section {
+    overflow: hidden;
+    &__header {
+      height: 20px;
+      margin-top: 20px;
+    }
+
+    &__body {
+      .explain-record {
+        &__header {
+        }
+
+        &__body {
+          margin-bottom: 20px;
+          border: 1px solid #eee;
+          .left-box {
+            float: left;
+            width: 970px;
+            min-height: 630px;
+            border: 1px solid #eee;
+
+            &__header {
+              height: 40px;
+              padding-left: 12px;
+              border-bottom: 1px solid #eeeeee;
+              display: flex;
+              align-items: center;
+
+              .progress {
+                width: 636px;
+              }
+
+              .text {
+                margin-left: 15px;
+                font-size: 16px;
+                span {
+                  font-family: Microsoft YaHei;
+                  font-weight: bold;
+                  color: #3f8dfd;
+                  line-height: 24px;
+                }
+              }
+            }
+
+            &__body {
+              .question {
+                padding: 12px 0 0 12px;
+                display: flex;
+                flex-direction: column;
+                height: 100%;
+
+                &__title {
+                  padding-left: 12px;
+                  font-size: 16px;
+                  font-family: Microsoft YaHei;
+                  font-weight: bold;
+                  color: #333333;
+                  line-height: 24px;
+                }
+
+                &__desc {
+                  padding-left: 12px;
+                  margin-top: 20px;
+                  font-size: 16px;
+                  font-family: Microsoft YaHei;
+                  font-weight: 400;
+                  color: #666666;
+                  line-height: 24px;
+
+                  /deep/ img {
+                    max-width: 100% !important;
+                  }
+                }
+
+                &__content {
+                  /deep/ .el-tabs__item {
+                    height: 40px;
+                    line-height: 40px;
+                  }
+
+                  .question__content {
+                    height: auto;
+                    overflow: auto;
+                  }
+
+                  .question-list {
+                    padding: 24px 0 0 24px;
+                    .checkbox,
+                    .radio {
+                      cursor: pointer;
+                      margin-right: 24px;
+                      padding: 0 24px;
+                      display: flex;
+                      align-items: center;
+                      margin-top: 2px;
+                      min-height: 40px;
+                      padding-top: 10px;
+                      padding-bottom: 10px;
+                      background: #f5f9ff;
+                      border-radius: 8px;
+                      box-sizing: border-box;
+
+                      &.right {
+                        background: #37c65b;
+                      }
+                      &.wrong {
+                        background: #ff3a30;
+                      }
+                    }
+                    &.textarea {
+                      margin-right: 12px;
+
+                      .upload {
+                        margin-top: 10px;
+
+                        &__imgs {
+                          margin-right: 10px;
+                          width: 80px;
+                          height: 80px;
+                          background: #ffffff;
+                          border: 1px solid #eeeeee;
+                          border-radius: 4px;
+                          position: relative;
+                          display: flex;
+                          float: left;
+                          align-items: center;
+                          justify-content: center;
+
+                          img {
+                            max-width: 100%;
+                            max-height: 100%;
+                          }
+                        }
+                        &__btn {
+                          margin-right: 10px;
+                          width: 80px;
+                          height: 80px;
+                          background: #ffffff;
+                          border: 1px solid #eeeeee;
+                          border-radius: 4px;
+                          position: relative;
+                          display: flex;
+                          float: left;
+                          align-items: center;
+                          justify-content: center;
+                          flex-direction: column;
+
+                          .icon {
+                            font-size: 20px;
+                            color: #3f8dfd;
+                          }
+
+                          p {
+                            font-size: 12px;
+                            font-family: Microsoft YaHei;
+                            font-weight: 400;
+                            color: #999999;
+                            line-height: 24px;
+                          }
+
+                          input {
+                            position: absolute;
+                            left: 0;
+                            top: 0;
+                            display: block;
+                            width: 100%;
+                            height: 100%;
+                            opacity: 0;
+                          }
+                        }
+                      }
+                    }
+
+                    /deep/ .el-checkbox {
+                      white-space: normal;
+                    }
+                  }
+
+                  .answer-list {
+                    height: 40px;
+                    border-top: 1px solid #eee;
+                    border-bottom: 1px solid #eee;
+                    margin-top: 24px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding: 0 24px;
+
+                    &__left {
+                      font-size: 16px;
+                      font-family: Microsoft YaHei;
+                      font-weight: 400;
+                      color: #333333;
+                      line-height: 24px;
+                    }
+
+                    &__right {
+                      font-size: 16px;
+                      font-family: Microsoft YaHei;
+                      font-weight: 400;
+                      color: #333333;
+                      line-height: 24px;
+                    }
+                  }
+
+                  .explain-list {
+                    padding: 12px 24px;
+
+                    &__header {
+                      font-size: 16px;
+                      font-family: Microsoft YaHei;
+                      font-weight: bold;
+                      color: #666666;
+                      line-height: 24px;
+                    }
+
+                    &__body {
+                      margin-top: 12px;
+                      font-size: 16px;
+                      font-family: Microsoft YaHei;
+                      font-weight: 400;
+                      color: #666666;
+                      line-height: 24px;
+                    }
+
+                    .upload {
+                      margin-top: 10px;
+
+                      &__imgs {
+                        margin-right: 10px;
+                        width: 80px;
+                        height: 80px;
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                        border-radius: 4px;
+                        position: relative;
+                        display: flex;
+                        float: left;
+                        align-items: center;
+                        justify-content: center;
+
+                        img {
+                          max-width: 100%;
+                          max-height: 100%;
+                        }
+                      }
+                    }
+                  }
+                }
+
+                &__btns {
+                  position: relative;
+                  height: 32px;
+                  .submit {
+                    cursor: pointer;
+                    margin: 0 auto;
+                    width: 140px;
+                    height: 32px;
+                    padding: 0;
+                    color: #fff;
+                    background: #3f8dfd;
+                    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
+                    border-radius: 16px;
+                    text-align: center;
+                    line-height: 32px;
+                    font-size: 16px;
+                  }
+
+                  .collect {
+                    width: 100px;
+                    cursor: pointer;
+                    position: absolute;
+                    right: 0;
+                    top: 5px;
+                    font-size: 12px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: #3f8dfd;
+                    line-height: 24px;
+
+                    i {
+                      font-size: 20px;
+                    }
+                  }
+                }
+              }
+            }
+
+            &__footer {
+              height: 40px;
+              display: flex;
+              justify-content: space-around;
+              align-items: center;
+
+              .btn {
+                cursor: pointer;
+                width: 140px;
+                height: 32px;
+                background: #ffffff;
+                border: 1px solid #3f8dfd;
+                border-radius: 16px;
+                line-height: 32px;
+                text-align: center;
+                color: #3f8dfd;
+              }
+            }
+          }
+
+          .right-box {
+            float: right;
+            width: 299px;
+            border-right: 1px solid #eee;
+
+            &__header {
+              height: 40px;
+              line-height: 40px;
+              border-bottom: 1px solid #eeeeee;
+
+              .back-btn {
+                display: block;
+                margin: 0 auto;
+                width: 160px;
+              }
+
+              .title {
+                float: left;
+                font-size: 16px;
+                font-family: Microsoft YaHei;
+                font-weight: bold;
+                color: #333333;
+              }
+
+              .time {
+                font-size: 16px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #666666;
+                float: right;
+              }
+            }
+
+            &__body {
+              height: 510px;
+              border-bottom: 1px solid #eee;
+
+              .card {
+                &__note {
+                  display: flex;
+                  height: 64px;
+                  align-items: center;
+                  border-bottom: 1px solid #eee;
+                  flex-wrap: wrap;
+
+                  .item {
+                    display: flex;
+                    align-items: center;
+                    margin-left: 10px;
+                    width: 84px;
+                    font-size: 12px;
+
+                    .box {
+                      margin-right: 5px;
+                      width: 16px;
+                      height: 16px;
+                      border-radius: 4px;
+
+                      &.white {
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                      }
+
+                      &.green {
+                        background: #37c65b;
+                      }
+                      &.red {
+                        background: #ff3a30;
+                      }
+
+                      &.yellow {
+                        background: #ffc53d;
+                      }
+                      &.blue {
+                        background: #3f8dfd;
+                      }
+                    }
+                  }
+                }
+
+                &__content {
+                  height: 440px;
+                  overflow-y: scroll;
+
+                  &::-webkit-scrollbar {
+                    width: 6px;
+                  }
+                  &::-webkit-scrollbar-track {
+                    background-color: #fff;
+                    -webkit-border-radius: 2em;
+                    -moz-border-radius: 2em;
+                    border-radius: 2em;
+                  }
+                  &::-webkit-scrollbar-thumb {
+                    background-color: #eeeeee;
+                    -webkit-border-radius: 2em;
+                    -moz-border-radius: 2em;
+                    border-radius: 2em;
+                  }
+                  .list {
+                    display: flex;
+                    flex-wrap: wrap;
+
+                    .item {
+                      width: 40px;
+                      height: 40px;
+                      border-radius: 10px;
+                      text-align: center;
+                      line-height: 40px;
+                      margin-left: 16px;
+                      margin-top: 16px;
+                      cursor: pointer;
+
+                      &.white {
+                        line-height: 38px;
+                        color: #333333;
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                      }
+
+                      &.green {
+                        color: #fff;
+                        background: #37c65b;
+                      }
+
+                      &.red {
+                        color: #fff;
+                        background: #ff3a30;
+                      }
+
+                      &.blue {
+                        border: 1rpx solid #eeeeee;
+                        color: #fff;
+                        background: #3f8dfd;
+                      }
+                      &.yellow {
+                        background: #ffc53d;
+                      }
+
+                      &.disabled {
+                        cursor: not-allowed;
+                        line-height: 38px;
+                        color: #eeeeee;
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+
+            &__footer {
+              border-bottom: 1px solid #eee;
+              height: 40px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+
+              .submit {
+                cursor: pointer;
+                width: 140px;
+                height: 32px;
+                padding: 0;
+                box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
+                border-radius: 16px;
+                line-height: 32px;
+                text-align: center;
+                font-size: 16px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .take-photo {
+    /deep/ .el-dialog__header {
+      display: none;
+    }
+    /deep/ .el-dialog__body {
+      padding: 0;
+      overflow: unset;
+    }
+
+    &__close {
+      cursor: pointer;
+      position: absolute;
+      right: 0;
+      top: -28px;
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      color: #eee;
+      border: 1px solid #eee;
+      border-radius: 50%;
+    }
+
+    &__header {
+      height: 40px;
+      border-bottom: 1px solid #eee;
+      line-height: 40px;
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #333333;
+      padding-left: 24px;
+    }
+
+    &__body {
+      height: 400px;
+      padding: 40px 24px;
+      .left-box {
+        width: 336px;
+        float: left;
+
+        .title {
+          font-size: 16px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          color: #ff3b30;
+          line-height: 24px;
+        }
+
+        .content {
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #333333;
+          line-height: 28px;
+          margin-top: 32px;
+        }
+      }
+
+      .right-box {
+        float: right;
+        width: 400px;
+        height: 300px;
+
+        video {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    &__footer {
+      height: 90px;
+      border-top: 1px solid #eee;
+      text-align: center;
+      .take {
+        display: inline-block;
+        width: 200px;
+        height: 40px;
+        padding: 0;
+        border-radius: 20px;
+        text-align: center;
+        line-height: 40px;
+        margin: 24px auto;
+      }
+    }
+  }
+}
+</style>

src/pages/mock-report/index.vue

@@ -1,119 +1,152 @@
 <template>
-  <div class="mock-countdown">
+  <div class="bank-report">
     <Header></Header>
     <section class="section">
       <div class="container">
-        <div class="section__header">
-          <el-breadcrumb separator="/">
-            <el-breadcrumb-item :to="{ path: '/index' }"
-              >首页</el-breadcrumb-item
+        <div
+          class="section__header section__header--warm"
+          v-if="examData.doType == 2 && reportdata.reportStatus === null"
+        >
+          <div class="title">
+            <span class="icon">X</span>
+            测试未通过
+          </div>
+          <div class="desc" v-if="reportdata.doTime">
+            总时间：{{ $tools.secondToTime(reportdata.examTime) }}
+            <span class="note"
+              >答题时长：{{
+                $tools.secondToTime(reportdata.doTime, false)
+              }}</span
             >
-            <el-breadcrumb-item :to="{ path: '/person-center/my-mock' }"
-              >我的模考</el-breadcrumb-item
+          </div>
+        </div>
+        <div
+          class="section__header section__header--success"
+          v-if="examData.doType == 2 && reportdata.reportStatus === 1"
+        >
+          <div class="title">
+            <span class="icon">✔</span>
+            测试通过
+          </div>
+          <div class="desc" v-if="reportdata.doTime">
+            总时间：{{ $tools.secondToTime(reportdata.examTime) }}
+            <span class="note"
+              >答题时长：{{
+                $tools.secondToTime(reportdata.doTime, false)
+              }}</span
             >
-            <el-breadcrumb-item>模考</el-breadcrumb-item>
-          </el-breadcrumb>
+          </div>
         </div>
 
-        <div class="section__body">
-          <div class="notice">
-            <div class="text">
-              模考讲解直播将在2022年4月20日20:00开始，开启模考讲解直播提醒,不错过每一个考点
+        <template v-else>
+          <div class="section__header" v-if="reportdata.doTime">
+            <div class="desc">
+              总时间：{{ $tools.secondToTime(reportdata.examTime) }}
+              <span class="note"
+                >答题时长：{{
+                  $tools.secondToTime(reportdata.doTime, false)
+                }}</span
+              >
             </div>
-            <el-button type="primary" class="btn"
-              >开启模考讲解直播提醒</el-button
-            >
           </div>
+        </template>
 
-          <div class="box-list clearfix">
-            <div class="item">
-              <div class="title">
-                正确率统计
-                <span class="note">（不含简答/案例题）</span>
+        <div class="section__body">
+          <div class="section__body__content">
+            <div class="left-box" v-if="reportdata.totalScore">
+              <div class="left-box__in">
+                <div class="title">
+                  试卷得分
+                  <span class="note">（客观题）</span>
+                </div>
+                <div class="desc" style="margin-top: 70px">
+                  {{ reportdata.performance }}
+                </div>
+                <div class="other">满分{{ reportdata.totalScore }}</div>
               </div>
-
-              <div class="desc">100%</div>
-
-              <div class="footer">
-                <div class="footer__item">
-                  <div class="num">1</div>
-                  <div class="text">正确题数</div>
+              <!-- <div class="left-box__in left-box__in--bottom">
+                <div class="title">
+                  试卷得分
+                  <span class="note">（客观题+主观题）</span>
+                </div>
+                <div class="desc">
+                  {{ reportdata.performance + reportdata.score }}
                 </div>
-                <div class="footer__item">
-                  <div class="num num--yellow">1</div>
-                  <div class="text">少选题数</div>
+                <div class="other">满分{{ reportdata.totalScore }}</div>
+              </div> -->
+            </div>
+            <div class="right-box">
+              <div class="right-box__in">
+                <div class="title">
+                  正确率
+                  <span class="note">（客观题）</span>
                 </div>
-                <div class="footer__item">
-                  <div class="num num--red">1</div>
-                  <div class="text">错误题数</div>
+                <div class="desc">
+                  <!-- 练习 -->
+                  <template v-if="examData.doType == 1">
+                    {{
+                      ((reportdata.rightQuestionNum /
+                        reportdata.doQuestionNum || 0) *
+                        100)
+                        | toFixed(0)
+                    }}%
+                  </template>
+                  <!-- 考试 -->
+                  <template v-if="examData.doType == 2">
+                    {{
+                      ((reportdata.rightQuestionNum /
+                        reportdata.totalQuestionNum || 0) *
+                        100)
+                        | toFixed(0)
+                    }}%
+                  </template>
                 </div>
+                <!-- <div class="other">满分{{ reportdata.totalScore }}</div> -->
               </div>
-            </div>
-            <div class="item">
-              <div class="title">答题时长</div>
-              <div class="content">
-                <el-progress
-                  :stroke-width="10"
-                  color="#3F8DFD"
-                  type="circle"
-                  :width="160"
-                  :show-text="false"
-                  :percentage="25"
-                ></el-progress>
-                <div class="text">
-                  <div class="num">
-                    12<span class="small">分</span>50<span class="small"
-                      >秒</span
-                    >
+              <div class="right-box__in right-box__in--bottom">
+                <div class="child">
+                  <div class="child__title child__title--success">
+                    {{ reportdata.rightQuestionNum }}
                   </div>
-                  <div class="note">总时间：180分</div>
+                  <div class="child__desc">正确题数</div>
                 </div>
-              </div>
-            </div>
-            <div class="item">
-              <div class="title">
-                试卷得分
-                <span class="note">（不含简答/案例题）</span>
-              </div>
-              <div class="content">
-                <el-progress
-                  color="#32D74B"
-                  type="circle"
-                  :width="160"
-                  :show-text="false"
-                  :stroke-width="10"
-                  :percentage="25"
-                ></el-progress>
-                <div class="text">
-                  <div class="num num--green">50</div>
-                  <div class="note">得分</div>
+                <div class="child">
+                  <div class="child__title child__title--yellow">
+                    {{ reportdata.lessQuestionNum }}
+                  </div>
+                  <div class="child__desc">少选题数</div>
                 </div>
-              </div>
-            </div>
-            <div class="item">
-              <div class="title">
-                试卷得分
-                <span class="note">（含简答/案例题）</span>
-              </div>
-              <div class="content">
-                <el-progress
-                  color="#32D74B"
-                  type="circle"
-                  :width="160"
-                  :show-text="false"
-                  :stroke-width="10"
-                  :percentage="25"
-                ></el-progress>
-                <div class="text">
-                  <div class="num num--green">50</div>
-                  <div class="note">得分</div>
+                <div class="child child---right">
+                  <div class="child__title child__title--warm">
+                    {{ wrongRecordWrongNum }}
+                  </div>
+                  <div class="child__desc">错误题数</div>
                 </div>
               </div>
             </div>
           </div>
         </div>
+
+        <div class="section__footer">
+          <el-button type="primary" @click="back" class="btn"
+            >返回列表</el-button
+          >
+          <!-- <el-button type="primary" class="btn" @click="doRepeat(reportdata)"
+            >重新做题</el-button
+          > -->
+          <el-button
+            type="primary"
+            class="btn"
+            @click="wrongExplain(reportdata)"
+            >错题解析</el-button
+          >
+          <el-button type="primary" class="btn" @click="allExplain(reportdata)"
+            >全部解析</el-button
+          >
+        </div>
       </div>
     </section>
+    <ToolBar></ToolBar>
     <Footer></Footer>
   </div>
 </template>
@@ -124,159 +157,427 @@ import Header from "@/components/header/index";
 import ToolBar from "@/components/toolbar/index";
 import { mapGetters } from "vuex";
 export default {
+  name: "BankExplain",
   components: {
     Footer,
     Header,
     ToolBar,
   },
   data() {
-    return {};
+    return {
+      wrongRecordWrongNum: 0,
+      nextExamId: "",
+      examData: {},
+      reportdata: {},
+      examId: 0,
+      recordId: 0,
+      eachExamId: 0,
+    };
+  },
+  computed: {
+    ...mapGetters(["examResult"]),
+  },
+  async mounted() {
+    this.eachExamId = this.$route.query.eachExamId;
+    this.examId = this.$route.query.examId;
+    this.recordId = this.$route.query.recordId;
+
+    this.mockWrongRecordWrongNum();
+    await this.bankExam();
+    await this.mockReport();
+  },
+  methods: {
+    back() {
+      this.$router.back(-1);
+    },
+    /**
+     * 去做题
+     */
+    async doRepeat(reportdata) {
+      // await this.getDetail(reportdata.goodsId);
+      let count = await this.examRecordCount(
+        reportdata.examId,
+        reportdata.goodsId
+      );
+      let answerNum = await this.getExamDetail(reportdata.examId);
+      //超过答题次数
+      if (answerNum > 0 && count >= answerNum) {
+        this.$message({
+          type: "warning",
+          message: "该试卷只能答题" + answerNum + "次!",
+        });
+        return;
+      }
+
+      this.$router.replace({
+        path: "/bank-exam/" + reportdata.goodsId,
+        query: {
+          orderGoodsId: this.orderGoodsId,
+          examId: reportdata.examId,
+          moduleId: reportdata.moduleId || 0,
+          chapterId: reportdata.chapterId || 0,
+        },
+      });
+    },
+
+    /**
+     * @param {Object} exam_id
+     * 获取试卷可以做的次数
+     */
+    getExamDetail(exam_id) {
+      return new Promise((resolve) => {
+        this.$request.getExamDetail(exam_id).then((res) => {
+          resolve(res.data.answerNum);
+        });
+      });
+    },
+
+    /**
+     * 查询试卷历史做题次数
+     */
+    examRecordCount(examId, goodsId) {
+      return new Promise((resolve) => {
+        this.$request
+          .examRecordCount({
+            examId: examId,
+            goodsId: goodsId,
+          })
+          .then((res) => {
+            resolve(res.data);
+          });
+      });
+    },
+    getDetail(goodsId) {
+      return new Promise((resolve) => {
+        this.$request
+          .orderInfo({
+            orderGoodsId: this.orderGoodsId,
+          })
+          .then((res) => {
+            this.goodsData = res.data;
+            resolve();
+          });
+      });
+    },
+    mockWrongRecordWrongNum() {
+      return new Promise((resolve) => {
+        this.$request.mockWrongRecordWrongNum(this.recordId).then((res) => {
+          this.wrongRecordWrongNum = res.data || 0;
+          resolve();
+        });
+      });
+    },
+
+    backBank() {
+      this.$router.replace({
+        path: "/bank-exam/" + this.goodsId,
+        query: {
+          orderGoodsId: this.orderGoodsId,
+          examId: this.nextExamId,
+          moduleId: this.moduleId || 0,
+          chapterId: this.chapterId || 0,
+        },
+      });
+    },
+
+    bankExam() {
+      return new Promise((resolve) => {
+        this.$request.bankExam(this.examId).then((res) => {
+          this.examData = res.data;
+          resolve();
+        });
+      });
+    },
+
+    mockReport() {
+      return new Promise((resolve) => {
+        this.$request.mockReport(this.recordId).then((res) => {
+          this.reportdata = res.data;
+          resolve();
+        });
+      });
+    },
+
+    wrongExplain(reportdata) {
+      this.$router.push({
+        path: "/mock-exam-wrong-explain/" + reportdata.recordId,
+        query: {
+          examId: reportdata.examId,
+        },
+      });
+    },
+
+    allExplain(reportdata) {
+      this.$router.push({
+        path: "/mock-exam-all-explain/" + reportdata.recordId,
+        query: {
+          examId: reportdata.examId,
+        },
+      });
+    },
   },
-  computed: {},
-  mounted() {},
-  methods: {},
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-.mock-countdown {
+.bank-report {
   .section {
     &__header {
-      height: 40px;
-      display: flex;
-      align-items: center;
-      padding: 0 20px;
-    }
+      height: 120px;
+      border-radius: 0px;
+      padding-top: 10px;
 
-    &__body {
-      .notice {
-        display: flex;
-        align-items: center;
-        padding: 0 20px;
-        height: 72px;
-        background: #f7f9fc;
+      &--warm {
+        background: #fff3f5;
+        .title {
+          text-align: center;
+          font-size: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          color: #ff3b30;
 
-        .text {
-          flex: 1;
+          .icon {
+            vertical-align: middle;
+            display: inline-block;
+            width: 48px;
+            height: 58px;
+            text-align: center;
+            line-height: 58px;
+            background: #ff3b30;
+            color: #fff;
+            font-size: 30px;
+          }
         }
+      }
 
-        .btn {
-          width: 200px;
-          height: 32px;
-          padding: 0;
+      &--success {
+        background: #f8fef9;
+        .title {
           text-align: center;
-          line-height: 32px;
-          border-radius: 16px;
+          font-size: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          color: #34c759;
+
+          .icon {
+            vertical-align: middle;
+            display: inline-block;
+            width: 48px;
+            height: 58px;
+            text-align: center;
+            line-height: 58px;
+            background: #34c759;
+            color: #fff;
+            font-size: 30px;
+          }
         }
       }
 
-      .box-list {
-        width: 640px;
-        margin: 20px auto 100px;
-        .item {
-          margin: 8px 10px;
-          float: left;
+      .desc {
+        margin-top: 20px;
+        text-align: center;
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #333333;
+
+        .note {
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #999999;
+        }
+      }
+    }
+
+    &__body {
+      width: 100%;
+      height: 305px;
+      border-bottom: 1px solid #eee;
+
+      &__content {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .left-box {
           width: 300px;
           height: 240px;
           background: #ffffff;
-          border: 1px solid #d9d9d9;
+          border: 1px solid #eeeeee;
           border-radius: 8px;
           display: flex;
           flex-direction: column;
+          margin: 0 10px;
+
+          &__in {
+            flex: 1;
+            border-bottom: 1px solid #eee;
+            padding: 5px 18px;
 
-          .title {
-            padding: 16px;
-            font-size: 14px;
-            color: #333333;
+            .title {
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #333333;
+              line-height: 24px;
 
-            .note {
-              color: #999;
+              .note {
+                color: #999;
+              }
             }
-          }
 
-          .desc {
-            text-align: center;
-            font-size: 48px;
-            color: #333333;
-          }
+            .desc {
+              margin-top: 20px;
+              font-size: 48px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #333333;
+              line-height: 24px;
+              text-align: center;
+            }
 
-          .content {
-            position: relative;
-            margin: 10px auto 0;
-            width: 160px;
-            height: 160px;
-
-            .text {
-              position: absolute;
-              left: 50%;
-              top: 50%;
-              transform: translate3d(-50%, -50%, 0);
+            .other {
+              margin-top: 14px;
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #999999;
+              line-height: 24px;
               text-align: center;
-              .num {
-                width: 120px;
-                font-size: 32px;
-                color: #3f8dfd;
-                line-height: 24px;
-
-                &--green {
-                  color: rgb(50, 215, 75);
-                }
-              }
+            }
 
-              .note {
-                margin-top: 10px;
-                font-size: 14px;
-                color: #999999;
-              }
+            &--bottom {
+              border: 0;
             }
           }
+        }
 
-          .footer {
-            margin-top: 16px;
+        .right-box {
+          margin: 0 10px;
+          display: flex;
+          width: 300px;
+          height: 240px;
+          background: #ffffff;
+          border: 1px solid #eeeeee;
+          border-radius: 8px;
+          flex-direction: column;
+
+          &__in {
             flex: 1;
-            border-top: 1px solid #d9d9d9;
-            display: flex;
+            border-bottom: 1px solid #eee;
+            padding: 5px 18px;
 
-            &__item {
-              text-align: center;
-              flex: 1;
-              border-right: 1px solid #d9d9d9;
+            .title {
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #333333;
+              line-height: 24px;
 
-              &:nth-last-of-type(1) {
-                border: 0;
+              .note {
+                color: #999;
               }
+            }
+
+            .desc {
+              margin-top: 20px;
+              font-size: 48px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #333333;
+              line-height: 24px;
+              text-align: center;
+            }
 
-              .num {
-                margin-top: 20px;
-                font-size: 36px;
-                font-weight: 400;
-                color: #32d74b;
-                text-align: center;
+            .other {
+              margin-top: 14px;
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #999999;
+              line-height: 24px;
+              text-align: center;
+            }
 
-                .small {
-                  font-size: 16px;
+            &--bottom {
+              padding: 0;
+              border: 0;
+              height: 100%;
+              display: flex;
+              .child {
+                flex: 1;
+                height: 100%;
+                border-right: 1px solid #eee;
+                padding: 5px 18px;
+
+                &:nth-last-of-type(1) {
+                  border-right: 0;
                 }
 
-                &--yellow {
-                  color: #ffc53d;
+                &--right {
+                  border: 0;
                 }
 
-                &--red {
-                  color: #f5222d;
+                &__title {
+                  margin-top: 20px;
+                  font-size: 36px;
+                  font-family: Microsoft YaHei;
+                  font-weight: 400;
+                  color: #34c759;
+                  line-height: 24px;
+                  text-align: center;
+
+                  &--success {
+                    color: #34c759;
+                  }
+
+                  &--warm {
+                    color: #ff3b30;
+                  }
+
+                  &--yellow {
+                    color: #ffc53d;
+                  }
                 }
-              }
 
-              .text {
-                margin-top: 10px;
-                font-size: 14px;
-                color: #666666;
+                &__desc {
+                  margin-top: 10px;
+                  font-size: 14px;
+                  font-family: Microsoft YaHei;
+                  font-weight: 400;
+                  color: #999999;
+                  line-height: 24px;
+                  text-align: center;
+                }
               }
             }
           }
         }
       }
     }
+
+    &__footer {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 40px 0;
+
+      .btn {
+        cursor: pointer;
+        width: 140px;
+        height: 32px;
+        padding: 0;
+        border-radius: 16px;
+        text-align: center;
+        line-height: 30px;
+        font-size: 12px;
+        margin: 0 4px;
+      }
+    }
   }
 }
 </style>

src/pages/person-center/my-classhour/appointment/index.vue

@@ -71,9 +71,11 @@ export default {
       orderGoodsId: 0,
       listData: [],
       goodsIdBK: null,
+      applyId: "",
     };
   },
   mounted() {
+    this.applyId = this.$route.query.applyId;
     this.goodsId = this.$route.query.goodsId;
     this.gradeId = this.$route.query.gradeId;
     this.orderGoodsId = this.$route.query.orderGoodsId;
@@ -85,6 +87,7 @@ export default {
         goodsId: this.goodsId,
         gradeId: this.gradeId,
         orderGoodsId: this.orderGoodsId,
+        applyId: this.applyId,
       };
       this.$request.getApplysubscribe(data).then((res) => {
         if (res.data.applyStatus) {

src/pages/person-center/my-course/index.vue

@@ -243,7 +243,6 @@
                   class="btn btn--normal"
                   :class="{
                     disabled:
-                      (item.interfacePushId > 0 && item.officialStatus != 1) ||
                       sysTime <= item.serviceStartTime ||
                       sysTime >= item.serviceEndTime ||
                       (item.classStartTime && sysTime <= item.classStartTime) ||
@@ -452,6 +451,29 @@
       </span>
     </el-dialog>
 
+    <el-dialog
+      title="预约考试"
+      :visible.sync="appointModal"
+      width="600px"
+      class="appoint-modal"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <div class="appoint-modal__content">
+        <el-radio
+          v-for="(appointChild, appointIndex) in appointItem.examApplyGoodsList"
+          v-model="applyId"
+          :key="appointIndex"
+          :label="appointChild.applyId"
+          >{{ appointChild.applyName }}</el-radio
+        >
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="appointModal = false">取 消</el-button>
+        <el-button type="primary" @click="confirmAppoint">立即预约</el-button>
+      </span>
+    </el-dialog>
+
     <SelectClassModal
       ref="selectClassModal"
       @selectClassOk="selectClassOk"
@@ -481,6 +503,9 @@ export default {
   },
   data() {
     return {
+      appointItem: {},
+      applyId: "",
+      appointModal: false,
       activeItem: {},
       confirmChecked: false,
       confirmTimer: null,
@@ -628,6 +653,21 @@ export default {
         }
       }
 
+      var confirmDetail = true;
+      if (item.educationName == "继续教育") {
+        if (
+          item.officialName &&
+          item.businessName == "二级" &&
+          item.projectName == "建造师"
+        ) {
+          confirmDetail = await this.userConfirmInfoDetail();
+        }
+      }
+
+      if (!confirmDetail) {
+        return;
+      }
+
       //内部系统
       if (item.interfacePushId > 0 && item.officialStatus != 1) {
         this.$message({
@@ -715,31 +755,31 @@ export default {
               })
               .then((res) => {
                 if (res.rows.length) {
-                  if (
-                    item.officialName &&
-                    item.businessName == "二级" &&
-                    item.projectName == "建造师"
-                  ) {
-                    this.userConfirmInfoDetail().then((res) => {
-                      this.$router.push({
-                        path: `/my-course-detail/${item.goodsId}`,
-                        query: {
-                          gradeId: item.gradeId,
-                          orderGoodsId: item.orderGoodsId,
-                          courseId: res.rows[0].courseId || "",
-                        },
-                      });
-                    });
-                  } else {
-                    this.$router.push({
-                      path: `/my-course-detail/${item.goodsId}`,
-                      query: {
-                        gradeId: item.gradeId,
-                        orderGoodsId: item.orderGoodsId,
-                        courseId: res.rows[0].courseId || "",
-                      },
-                    });
-                  }
+                  // if (
+                  //   item.officialName &&
+                  //   item.businessName == "二级" &&
+                  //   item.projectName == "建造师"
+                  // ) {
+                  //   this.userConfirmInfoDetail().then((res) => {
+                  //     this.$router.push({
+                  //       path: `/my-course-detail/${item.goodsId}`,
+                  //       query: {
+                  //         gradeId: item.gradeId,
+                  //         orderGoodsId: item.orderGoodsId,
+                  //         courseId: res.rows[0].courseId || "",
+                  //       },
+                  //     });
+                  //   });
+                  // } else {
+                  this.$router.push({
+                    path: `/my-course-detail/${item.goodsId}`,
+                    query: {
+                      gradeId: item.gradeId,
+                      orderGoodsId: item.orderGoodsId,
+                      courseId: res.rows[0].courseId || "",
+                    },
+                  });
+                  // }
                 } else {
                   this.$message({
                     type: "warning",
@@ -796,7 +836,7 @@ export default {
               }, 1000);
             } else {
               if (res.data.pushInfo) {
-                resolve();
+                resolve(true);
               } else {
                 this.$confirm(
                   "开通信息推送不成功，无法进入学习，请联系020-87085982！",
@@ -812,6 +852,7 @@ export default {
                 )
                   .then((_) => {})
                   .catch((_) => {});
+                resolve(false);
               }
             }
           });
@@ -881,9 +922,21 @@ export default {
     },
 
     appointment(item) {
+      this.applyId = "";
+      this.appointItem = item;
+      this.appointModal = true;
+    },
+
+    confirmAppoint() {
+      if (!this.applyId) {
+        this.$message.warning("请选择要预约的考试");
+        return;
+      }
       var data = {
-        goodsId: item.goodsId,
-        gradeId: item.gradeId,
+        goodsId: this.appointItem.goodsId,
+        gradeId: this.appointItem.gradeId,
+        applyId: this.applyId,
+        orderGoodsId: this.appointItem.orderGoodsId,
       };
       this.$request
         .getApplysubscribe(data)
@@ -891,9 +944,10 @@ export default {
           this.$router.push({
             path: "/person-center/my-classhour/appointment",
             query: {
-              goodsId: item.goodsId,
-              gradeId: item.gradeId,
-              orderGoodsId: item.orderGoodsId,
+              goodsId: this.appointItem.goodsId,
+              gradeId: this.appointItem.gradeId,
+              orderGoodsId: this.appointItem.orderGoodsId,
+              applyId: this.applyId,
             },
           });
         })
@@ -1118,5 +1172,10 @@ export default {
       }
     }
   }
+
+  .appoint-modal {
+    &__content {
+    }
+  }
 }
 </style>

src/pages/person-center/my-live/index.vue

@@ -158,6 +158,7 @@ export default {
 <style scoped lang="scss">
 .my-course {
   &__header {
+    cursor: pointer;
     margin-top: 16px;
     height: 40px;
     background: linear-gradient(-90deg, #9254de, #d3adf7);

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

@@ -155,60 +155,57 @@
                       </div>
                     </div>
                     <div class="btn-wrap btn-wrap--over">
-                      <template v-if="item % 2 == 0">
-                        <div class="btn-item">
-                          <el-button class="btn" plain type="primary"
-                            >错题解析</el-button
-                          >
-                        </div>
-                        <div class="btn-item">
-                          <el-button class="btn" plain type="primary"
-                            >全部解析</el-button
+                      <template>
+                        <div class="btn-item" v-if="item.reSubcribe == 1">
+                          <el-button
+                            class="btn"
+                            plain
+                            type="primary"
+                            @click="reApply(item)"
+                            >重新预约</el-button
                           >
                         </div>
                         <div class="btn-item">
-                          <el-button class="btn" plain type="primary"
-                            >重新刷题</el-button
+                          <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">
-                          <el-button class="btn" plain type="primary"
+                        <div class="btn-item" v-if="item.handStatus">
+                          <el-button
+                            class="btn"
+                            plain
+                            type="primary"
+                            @click="report(item)"
                             >查看报告</el-button
                           >
 
-                          <div class="text">人工阅卷后显示完整报告</div>
-                        </div>
-                      </template>
-
-                      <template v-else>
-                        <div class="btn-item">
-                          <el-button class="btn" disabled plain type="primary"
-                            >错题解析</el-button
-                          >
-                        </div>
-                        <div class="btn-item">
-                          <el-button class="btn" disabled plain type="primary"
-                            >全部解析</el-button
-                          >
-                        </div>
-                        <div class="btn-item">
-                          <el-button class="btn" disabled plain type="primary"
-                            >重新刷题</el-button
-                          >
-                        </div>
-                        <div class="btn-item">
-                          <el-button class="btn" disabled plain type="primary"
-                            >查看报告</el-button
-                          >
+                          <div class="text red">
+                            当前报告含主观题需人工阅卷，阅卷完成后显示完整报告
+                          </div>
                         </div>
                       </template>
                     </div>
                   </div>
                   <div class="mock-item__footer">
                     <div class="text">
-                      模考讲解直播时间：2022年4月28日 20:00-21:00
+                      模考讲解直播时间：{{
+                        $tools.timestampToTime(item.liveStartTime, false)
+                      }}
+                      - {{ $tools.timestampToTime(item.liveEndTime, false) }}
                     </div>
-                    <el-button class="btn" type="primary" plain
+                    <el-button
+                      class="btn"
+                      type="primary"
+                      plain
+                      @click="goLive(item)"
                       >去查看</el-button
                     >
                   </div>
@@ -218,7 +215,7 @@
 
             <div class="pagination">
               <el-pagination
-                @current-change="currentChange"
+                @current-change="examCurrentChange"
                 background
                 layout="prev, pager, next"
                 :total="examParam.total"
@@ -346,7 +343,7 @@
 
             <div class="pagination">
               <el-pagination
-                @current-change="currentChange"
+                @current-change="appointParamCurrentChange"
                 background
                 layout="prev, pager, next"
                 :total="appointParam.total"
@@ -368,8 +365,9 @@
                 <div class="select">
                   <el-date-picker
                     value-format="yyyy-MM-dd"
-                    v-model="date"
+                    v-model="liveParam.dateRange"
                     type="daterange"
+                    @change="mockApplyListMockLive"
                     placeholder="选择日期"
                   >
                   </el-date-picker>
@@ -391,39 +389,65 @@
               </div>
             </div>
 
-            <div class="live-list">
-              <div class="live-item" v-for="item in 5" :key="item">
+            <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 == 1,
-                      'note--green': item == 2,
-                      'note--gray': item == 3,
+                      'note--blue': item.liveStatus == 1,
+                      'note--green': item.liveStatus == 2,
+                      'note--gray': item.liveStatus == 3,
                     }"
                   >
-                    <img v-if="item == 1" src="@/assets/play.png" alt="" />
-                    <img v-if="item == 2" src="@/assets/living.png" alt="" />
-                    <img v-if="item == 3" src="@/assets/wait.png" alt="" />
-                    直播中
+                    <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">二建模考-法律讲解直播</div>
-                  <div class="desc">直播时间：2022/4/15 20:00-21:00</div>
+                  <div class="title">{{ item.applyName }}</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="currentChange"
+                @current-change="liveParamCurrentChange"
                 background
                 layout="prev, pager, next"
-                :total="total"
+                :total="liveParam.total"
                 :pager-count="5"
-                :page-size="formData.pageSize"
+                :page-size="liveParam.pageSize"
               >
               </el-pagination>
             </div>
@@ -469,6 +493,16 @@
         </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>
 
@@ -478,7 +512,13 @@ 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,
@@ -494,8 +534,15 @@ export default {
         mockStatus: 0,
         total: 0,
       },
+      liveParam: {
+        dateRange: "",
+        pageNum: 1,
+        pageSize: 10,
+        total: 0,
+      },
       total: 1,
       title: 0,
+      liveList: [],
       orderList: [],
       mockList: [],
       examList: [],
@@ -508,6 +555,7 @@ export default {
         pageNum: 1,
         pageSize: 10,
       },
+      player: null,
       date: "",
       state: 0,
       nowTime: 0,
@@ -534,7 +582,112 @@ export default {
     this.nowTime = +this.$tools.timest();
     this.mockSubscribeListSubscribe();
   },
+  async destroyed() {
+    await this.clears();
+  },
   methods: {
+    async closePlayBackModal() {
+      await this.clears();
+    },
+    goLivingRoom(item) {
+      if (item.liveStatus == 0) {
+        //直播中
+        this.$router.push({
+          path: "/living-room/" + item.liveUrl,
+        });
+      } else if (item.liveStatus == 1) {
+        //未开播
+        this.$message.warning("暂未开播，请在开播后查看");
+      } else if (item.liveStatus == 2) {
+        //回放中
+        this.playBackModal = true;
+        this.vid = item.liveUrl;
+        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,
+        },
+      });
+    },
+    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,
+      });
+    },
     goTest(item) {
       let nowTime = +this.$tools.timest();
       let startTime = this.$tools.TimeTotimestamp(
@@ -549,20 +702,24 @@ export default {
       return !canGo;
     },
     goExamCount(item) {
-      if (this.goTest(item)) {
-        this.$message.warning("不在考试时间");
-        return;
-      }
-
-      this.go("/mock-countdown", {
-        start: this.$tools.TimeTotimestamp(
-          this.$tools.timestampToTime(item.applySiteExamTime) +
-            " " +
-            item.applySiteStartTime
-        ),
-        limit: item.timeLimit,
-        examId: item.examId,
-        eachExamId: item.eachExamId,
+      // 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
+          ),
+          limit: item.timeLimit,
+          examId: item.examId,
+          eachExamId: item.eachExamId,
+          subscribeId: item.subscribeId,
+        },
       });
     },
     appoint(item) {
@@ -578,7 +735,7 @@ export default {
         return;
       }
 
-      this.$api
+      this.$request
         .mockSubscribe({
           applySiteExamTime: item.examTime,
           applySiteEndTime: item.endTime,
@@ -593,21 +750,17 @@ export default {
           // mockMajorSubjectId:49
         })
         .then((res) => {
-          console.log(res);
           this.showItem = item;
           this.appointModal = true;
+          this.mockApplyListApply();
         })
         .catch((err) => {
           this.$message.warning(err.msg);
         });
     },
     canApply(item) {
-      let startTime = this.$tools.TimeTotimestamp(
-        this.$tools.timestampToTime(item.examTime) + " " + item.startTime
-      );
-      let endTime = this.$tools.TimeTotimestamp(
-        this.$tools.timestampToTime(item.examTime) + " " + item.endTime
-      );
+      let startTime = item.applyStartTime;
+      let endTime = item.applyEndTime;
       if (this.nowTime >= startTime && this.nowTime <= endTime) {
         return true;
       } else {
@@ -615,9 +768,14 @@ export default {
       }
     },
     async businessChange(e) {
-      let projectId = this.businesslist.find(
-        (item) => item.businessId == e
-      ).projectId;
+      let projectObj = this.businesslist.find((item) => item.businessId == e);
+
+      let projectId = "";
+
+      if (projectObj) {
+        projectId.projectId;
+      }
+
       await this.subjectList({
         businessId: this.appointParam.businessId,
         projectId: projectId,
@@ -670,8 +828,16 @@ export default {
         });
       });
     },
-    currentChange(e) {
-      this.formData.pageNum = e;
+    examCurrentChange(e) {
+      this.examParam.pageNum = e;
+      this.mockSubscribeListSubscribe();
+    },
+    appointParamCurrentChange(e) {
+      this.appointParam.pageNum = e;
+      this.mockApplyListApply();
+    },
+    liveParamCurrentChange(e) {
+      this.liveParam.pageNum = e;
     },
     async tabChange(e) {
       if (this.activeName == e.name) {
@@ -683,12 +849,19 @@ export default {
 
       if (this.activeName == "1") {
         this.mockSubscribeListSubscribe();
+        return;
       }
 
       if (this.activeName == "2") {
         await this.mockApplyListApplyBusiness();
 
         this.mockApplyListApply();
+        return;
+      }
+
+      if (this.activeName == "3") {
+        this.mockApplyListMockLive();
+        return;
       }
     },
 
@@ -723,12 +896,27 @@ export default {
         );
       }
 
-      console.log(appointParam);
       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.endTime = this.$tools.TimeTotimestamp(liveParam.dateRange[0]);
+      }
+
+      if (liveParam.dateRange && liveParam.dateRange[1]) {
+        liveParam.startTime = this.$tools.TimeTotimestamp(
+          liveParam.dateRange[1]
+        );
+      }
+      this.$request.mockApplyListMockLive(liveParam).then((res) => {
+        this.liveList = res.rows;
+        this.liveParam.total = res.total;
+      });
+    },
     stateChange(state) {
       this.examParam.mockStatus = state;
       this.mockSubscribeListSubscribe();
@@ -869,6 +1057,8 @@ export default {
                 }
 
                 .btn-item {
+                  width: 200px;
+                  margin: 0 5px;
                   text-align: center;
                 }
 
@@ -990,7 +1180,7 @@ export default {
           }
 
           .desc {
-            margin-top: 14px;
+            margin-top: 10px;
             font-size: 14px;
             font-family: Microsoft YaHei;
             font-weight: 400;

src/pages/person-center/play-record/index.vue

@@ -27,7 +27,12 @@
                     {{ sectionItem.sectionName }}
                     <!-- <div class="note">60学时</div> -->
                   </div>
-                  <div class="progress" v-if="sectionItem.sectionType != 2">
+                  <div
+                    class="progress"
+                    v-if="
+                      sectionItem.sectionType != 2 && sectionItem.goodsType != 6
+                    "
+                  >
                     学习进度
                     <el-progress
                       class="progress-line"

src/router/index.js

@@ -270,6 +270,18 @@ const router =  new Router({
         }
       }
     },
+    {
+      path: '/mock-exam',
+      name: '模考',
+      component: resolve => require(['@/pages/mock-exam/index'],resolve),
+      meta: {
+        title: '祥粤云学堂-题库-一建二建试题下载_考试科目题库_考题答案_历年试题_在线真题_水平测试_历年真题_在线题库',
+        content: {
+          keywords: '祥粤云学堂-模拟试题练习,试题答案,一级建造师试题查找,二级建造师试题练习,题目类型,考试书籍,考试图书,考试教材',
+          description: '祥粤云学堂-提供一二级建造师学习资料、教材教辅，一二级建造师考试专业培训辅导课程，免费试听，建造师内部习题资料、工程师教学辅导视频、建筑考试课件视频等资料'
+        }
+      }
+    },
     
     {
       path: '/bank-exam-continue/:goodsId',
@@ -307,6 +319,30 @@ const router =  new Router({
         }
       }
     },
+    {
+      path: '/mock-exam-all-explain/:recordId',
+      name: '全部解析',
+      component: resolve => require(['@/pages/mock-exam-all-explain/index'],resolve),
+      meta: {
+        title: '祥粤云学堂-题库-一建二建试题下载_考试科目题库_考题答案_历年试题_在线真题_水平测试_历年真题_在线题库',
+        content: {
+          keywords: '祥粤云学堂-模拟试题练习,试题答案,一级建造师试题查找,二级建造师试题练习,题目类型,考试书籍,考试图书,考试教材',
+          description: '祥粤云学堂-提供一二级建造师学习资料、教材教辅，一二级建造师考试专业培训辅导课程，免费试听，建造师内部习题资料、工程师教学辅导视频、建筑考试课件视频等资料'
+        }
+      }
+    },
+    {
+      path: '/mock-exam-wrong-explain/:recordId',
+      name: '错题解析',
+      component: resolve => require(['@/pages/mock-exam-wrong-explain/index'],resolve),
+      meta: {
+        title: '祥粤云学堂-题库-一建二建试题下载_考试科目题库_考题答案_历年试题_在线真题_水平测试_历年真题_在线题库',
+        content: {
+          keywords: '祥粤云学堂-模拟试题练习,试题答案,一级建造师试题查找,二级建造师试题练习,题目类型,考试书籍,考试图书,考试教材',
+          description: '祥粤云学堂-提供一二级建造师学习资料、教材教辅，一二级建造师考试专业培训辅导课程，免费试听，建造师内部习题资料、工程师教学辅导视频、建筑考试课件视频等资料'
+        }
+      }
+    },
     {
       path: '/bank-exam-explain/:goodsId',
       name: '题目解析',