对接题库

src/apis/bank.js

@@ -100,8 +100,8 @@ export default {
   examRecordCount(data) {
 		return request({
 			url: '/exam/record/count',
-			data:data,
-			params: 'GET',
+			params:data,
+			method: 'GET',
 		})
 	},
 
@@ -109,7 +109,6 @@ export default {
 		return request({
 			url: '/bank/exam/'+data,
 			method: 'get',
-			params: data
 		})
 	},
 
@@ -158,4 +157,116 @@ export default {
 			method: 'get',
 		})
 	},
+
+  examaperList(data) {
+		return request({
+			url: '/exam/paper/list',
+			params:data,
+			method: 'GET',
+		})
+	},
+
+  goodsCollectExamList(data) {
+		return request({
+			url: '/collect/question/exam_list',
+			method: 'get',
+			params:data
+		})
+	},
+
+  collectQuestionTypeList(data) {
+		return request({
+			url: '/collect/question/type_list',
+			params:data,
+			method: 'GET',
+		})
+	},
+
+  wrongRecordTypeList(data) {
+		return request({
+			url: '/exam/wwrong/record/type_list',
+			params:data,
+			method: 'GET',
+		})
+	},
+
+  wrongRecordList(data) {
+		return request({
+			url: '/exam/wwrong/record/list',
+			method: 'get',
+			params:data
+		})
+	},
+
+  wrongRecordTypeQuestionList(data) {
+		return request({
+			url: '/exam/wwrong/record/type_question_list',
+			params:data,
+			method: 'GET',
+		})
+	},
+
+  wrongRecordDelete(data) {
+		return request({
+			url: '/exam/wwrong/record/delete/question',
+			method: 'post',
+			data:data
+		})
+	},
+
+  wrongRecordExamQuestionList(data) {
+		return request({
+			url: '/exam/wwrong/record/exam_question_list',
+			method: 'get',
+			params:data,
+		})
+	},
+
+  goodsCollectList(data) {
+		return request({
+			url: '/collect/question/list',
+			method: 'get',
+			params:data
+		})
+	},
+
+  collectQuestionExamQuestionList(data) {
+		return request({
+			url:`/collect/question/exam_question_list`,
+			method: 'get',
+			params:data
+		})
+	},
+
+  goodsChapterDolist(data) {
+		return request({
+			url: '/goods/chapter/dolist',
+			method: 'get',
+			params:data
+		})
+	},
+
+  goodsExamDolist(data) {
+		return request({
+			url: '/goods/exam/dolist',
+			method: 'get',
+			params:data
+		})
+	},
+
+  examRecordRightList(data) {
+		return request({
+			url: '/exam/record/right_list',
+			params:data,
+			method: 'GET',
+		})
+	},
+	
+	examRecordWrongList(data) {
+		return request({
+			url: '/exam/record/wrong_list',
+			params:data,
+			method: 'GET',
+		})
+	},
 }

src/apis/order.js

@@ -52,6 +52,38 @@ export default {
       data
 		})
 	},
+
+  orderInvoiceList(data) {
+		return request({
+			url: '/order/invoice/list',
+			method: 'get',
+			params: data
+		})
+	},
+
+  orderInvoiceCancel(data) {
+		return request({
+			url: '/order/invoice/cancel',
+			method: 'post',
+			data: data
+		})
+	},
+
+  orderInvoiceCanInvoiceList(data) {
+		return request({
+			url: '/order/invoice/canInvoiceList',
+			method: 'get',
+			params: data
+		})
+	},
+
+  orderInvoice(data) {
+		return request({
+			url: '/order/invoice',
+			method: 'post',
+			data: data
+		})
+	},
   
   
 }

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

@@ -0,0 +1,1493 @@
+<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__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>
+                          </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>
+                          </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
+                            class="checkbox"
+                            v-for="(item, index) in question.jsonStr"
+                            :key="index"
+                            :label="item.optionsId"
+                            v-model="item.checked"
+                          >
+                            <div>{{ ast[index] }}. {{ item.content }}</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>
+                          </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-if="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>
+                          </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>
+                          </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>
+                                  </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>
+                                  </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
+                                    class="checkbox"
+                                    v-for="(item, index) in json.optionsList"
+                                    :key="index"
+                                    :label="item.optionsId"
+                                    v-model="item.checked"
+                                  >
+                                    <div>
+                                      {{ ast[index] }}. {{ item.content }}
+                                    </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>
+                                  </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>
+                                  </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>
+                                  </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 }}、简答题
+                              </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 }}、简答题
+                      </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 class="left-box__footer">
+                  <div class="btn" @click="prevQuestion">上一题</div>
+                  <div class="btn" @click="nextQuestion">下一题</div>
+                </div>
+              </div>
+              <div class="right-box">
+                <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 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),
+                            blue: isOver(item, index),
+                          }"
+                          @click="changeIndex(index)"
+                        >
+                          {{ index + 1 }}
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+                <div class="right-box__footer"></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"],
+      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.moduleId = this.$route.query.moduleId;
+    this.chapterId = this.$route.query.chapterId;
+    this.goodsId = this.$route.query.goodsId;
+    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.examReport(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].ans.some((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;
+      }
+    },
+    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 {
+          height: 800px;
+          border: 1px solid #eee;
+          .left-box {
+            float: left;
+            width: 970px;
+            border-right: 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 {
+              height: 720px;
+              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;
+                }
+
+                &__content {
+                  flex: 1;
+                  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;
+                  }
+
+                  /deep/ .el-tabs__item {
+                    padding: 0 20px !important;
+                    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: pre-wrap;
+                    }
+                  }
+
+                  .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: 300px;
+
+            &__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;
+            }
+
+            &__body {
+              height: 720px;
+              border-bottom: 1px solid #eee;
+
+              .card {
+                &__note {
+                  display: flex;
+                  height: 40px;
+                  align-items: center;
+                  border-bottom: 1px solid #eee;
+
+                  .item {
+                    display: flex;
+                    align-items: center;
+                    margin-left: 10px;
+
+                    .box {
+                      margin-right: 5px;
+                      width: 16px;
+                      height: 16px;
+                      border-radius: 4px;
+
+                      &.white {
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                      }
+
+                      &.green {
+                        background: #37c65b;
+                      }
+
+                      &.red {
+                        background: #ff3a30;
+                      }
+
+                      &.blue {
+                        background: #3f8dfd;
+                      }
+                    }
+                  }
+                }
+
+                &__content {
+                  height: 410px;
+                  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;
+                      }
+
+                      &.disabled {
+                        cursor: not-allowed;
+                        line-height: 38px;
+                        color: #eeeeee;
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+
+            &__footer {
+              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/bank-exam-continue/index.vue

@@ -818,64 +818,6 @@
     </section>
     <ToolBar></ToolBar>
     <Footer></Footer>
-
-    <el-dialog
-      width="800px"
-      class="take-photo"
-      :visible.sync="takePhotoModal"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :show-close="false"
-    >
-      <div class="take-photo__content">
-        <!-- <div class="take-photo__close" @click="takePhotoModal = false">X</div> -->
-        <div class="take-photo__header">人脸验证</div>
-        <div class="take-photo__body clearfix">
-          <div class="left-box">
-            <div class="title">重要提示：</div>
-            <div class="content">
-              <p>1、请保证摄像头正对自己，避免头像偏左或者偏右。</p>
-              <p>
-                2、请保证拍照环境光线充足（照片太暗或曝光会降低验证通过率）。
-              </p>
-              <p>
-                3、请保证整个头像在人脸识别区域内，脸部无遮挡装饰物（佩戴眼镜会降低通过率）。
-              </p>
-              <p>
-                4、如果下面视频中出现黑屏，摄像头可能被其他进程占用，请关闭其他调用摄像头的程序，重新刷新当前页面重新拍照识别。
-              </p>
-            </div>
-          </div>
-          <div class="right-box">
-            <img v-show="!isTaking" :src="faceUrl" alt="" />
-            <video v-show="isTaking" id="video" :src="stream"></video>
-          </div>
-        </div>
-        <div class="take-photo__footer">
-          <el-button
-            type="primary"
-            v-if="isTaking"
-            class="take"
-            @click="onPhoto"
-            >拍照</el-button
-          >
-          <el-button
-            type="primary"
-            v-if="!isTaking"
-            class="take"
-            @click="reTake"
-            >重拍</el-button
-          >
-          <el-button
-            type="primary"
-            v-if="!isTaking"
-            class="take"
-            @click="takeOk"
-            >确认</el-button
-          >
-        </div>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
@@ -893,51 +835,32 @@ export default {
   },
   data() {
     return {
-      hasTake: false,
       recordId: 0,
-      tabIndex: "1",
-      textarea: "",
       questionIndex: 0,
       checked: false,
       activeName: "1",
       questionList: [],
-      goodsExamConfig: [],
-      goodsDetail: {},
       bankList: [],
       judge: ["错误", "正确"],
       ast: ["A", "B", "C", "D", "E", "F", "G"],
-      needPhoto: false,
       lastTime: 0, //剩余考试时长
       allTimes: 0, //总考试时长
       lastCount: 0,
       examId: 0,
       goodsId: 0,
-      courseId: 0,
-      gradeId: 0,
       moduleId: 0,
       chapterId: 0,
-      faceUrl: "",
-      stream: null,
-      ossAvatarUrl: "",
-      orderGoodsId: 0,
       current: 0,
-      timer: null,
-      takePhotoModal: false,
-      isTaking: true, //是否正在拍照
-      stream: null,
+      examData: {},
     };
   },
   async mounted() {
     this.goodsId = this.$route.params.goodsId;
     this.examId = this.$route.query.examId;
-    this.courseId = this.$route.query.courseId;
-    this.gradeId = this.$route.query.gradeId;
     this.moduleId = this.$route.query.moduleId;
     this.chapterId = this.$route.query.chapterId;
-    this.orderGoodsId = this.$route.query.orderGoodsId;
-    await this.getGoodsDetail();
+    this.recordId = this.$route.query.recordId;
     this.goodsQuestionList();
-    this.bankExam();
   },
   methods: {
     ...mapMutations(["setExamResult"]),
@@ -954,503 +877,19 @@ export default {
         return 0;
       }
     },
-    getGoodsDetail() {
-      return new Promise((resolve) => {
-        let self = this;
-        this.$request.goodsDetail(this.goodsId).then((res) => {
-          self.goodsDetail = res.data;
-          if (self.goodsDetail.goodsPhotoExamConfig) {
-            let goodsPhotoExamConfig = JSON.parse(
-              self.goodsDetail.goodsPhotoExamConfig
-            );
-            if (goodsPhotoExamConfig.photograph > 0) {
-              self.needPhoto = true;
-            }
-          }
-
-          resolve();
-        });
-      });
-    },
 
     /**
      * 请求题目列表
      */
     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;
-
-          res.data.forEach((item, index) => {
-            if (typeof item.jsonStr == "string") {
-              item.jsonStr = JSON.parse(item.jsonStr);
-
-              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.examRecord();
-        });
-    },
-
-    //拍照
-    openPhoto() {
-      this.$nextTick(() => {
-        if (
-          window.navigator.mediaDevices.getUserMedia ||
-          window.navigator.getUserMedia ||
-          window.navigator.webkitGetUserMedia ||
-          window.navigator.mozGetUserMedia
-        ) {
-          console.log(this.getUserMedia, "getUserMedia");
-          // 调用用户媒体设备, 访问摄像头
-          this.getUserMedia(
-            {
-              video: {
-                width: 400,
-                height: 300,
-              },
-            },
-            this.photographSuccess,
-            this.photographError
-          );
-        } else {
-          alert("不支持访问用户媒体");
-        }
-      });
-    },
-
-    async takeOk() {
-      let compareFaceData = await this.faceRecognition();
-
-      if (compareFaceData == 0) {
-        this.$message({
-          type: "warning",
-          message: "人脸匹配不通过，请重新拍照上传",
-        });
-
-        setTimeout(() => {
-          this.reTake();
-        }, 2000);
-        return;
-      }
-
-      if (compareFaceData >= 80) {
-        const waitYS = await this.imageInfos();
-        this.postCoursePhotoRecord()
-          .then((res) => {
-            this.postStudyRecord(); //提交记录
-            //恢复播放
-          })
-          .catch((err) => {
-            console.log(err, "err");
-            this.$message({
-              type: "warning",
-              message: "上传接口报错，请重新拍照上传",
-            });
-            this.reTake();
-          });
-      }
-
-      this.$message({
-        type: "success",
-        message: "拍照成功",
-      });
-      this.takePhotoModal = false;
-      this.isTaking = true;
-    },
-
-    postStudyRecord() {
-      let self = this;
-      let data = {
-        photo: self.ossAvatarUrl,
-        recordId: self.recordId,
-      };
-      console.log(data, "拍照提交");
-      this.$request
-        .studyExamPhotoRecord(data)
-        .then((res) => {
-          this.hasTake = true;
-          console.log(res, "拍照提交结果");
-          self.ossAvatarUrl = "";
-          //拍照
-          if (this.lastTime) {
-            this.timer = setInterval(() => {
-              if (this.lastTime <= 0) {
-                clearInterval(this.timer);
-                this.$confirm("考试时间已到，系统将自动交卷", "提示", {
-                  showConfirmButton: false,
-                  closeOnClickModal: false,
-                  showCancelButton: false,
-                  closeOnPressEscape: false,
-                  distinguishCancelAndClose: false,
-                  showClose: false,
-                });
-
-                setTimeout(() => {
-                  this.examSubmit();
-                }, 5000);
-                return;
-              }
-              this.lastTime--;
-            }, 1000);
-          }
-        })
-        .catch((err) => {
-          this.$message({
-            type: "warning",
-            message: err.msg,
-          });
-        });
-    },
-
-    imageInfos() {
-      var self = this;
-      return new Promise(async (resolve, reject) => {
-        const waitUpload = await self.uploadFile(self.faceUrl, 0);
-        resolve(waitUpload);
-      });
-    },
-
-    uploadFile(options, int) {
-      var self = this;
-      return new Promise((resolve, reject) => {
-        var data = {
-          imageStatus: int,
-          gradeId: this.gradeId,
-        };
-        self.$request
-          .getPolicy(data)
-          .then((res) => {
-            var ossToken = res.data.resultContent;
-            if (ossToken.host == null || ossToken.host == undefined) {
-              this.$message({
-                type: "warning",
-                message: "上传路径报错" + JSON.stringify(res.data),
-              });
-              return;
-            }
-
-            let data = this.$tools.convertBase64UrlToBlob(this.faceUrl);
-
-            this.$upload
-              .upload(data, 0)
-              .then((res) => {
-                this.ossAvatarUrl = res;
-                resolve(res);
-              })
-              .catch((err) => {
-                this.$message({
-                  type: "warning",
-                  message: "上传接口报错，请重新拍照上传",
-                });
-                this.reTake();
-              });
-          })
-          .catch((err) => {
-            this.$message({
-              type: "warning",
-              message: "签名错误" + JSON.stringify(err.data),
-            });
-            return;
-          });
-      });
-    },
-
-    faceRecognition() {
-      return new Promise((resolve) => {
-        this.$request
-          .faceCertificationCompareFace({
-            imageA: this.faceUrl,
-            orderGoodsId: this.orderGoodsId,
-            gradeId: this.gradeId,
-          })
-          .then((res) => {
-            console.log(res, "res");
-            resolve(res.data);
-          });
-      });
-    },
-    /**
-     * 点击重拍
-     */
-    reTake() {
-      this.faceUrl = "";
-      this.isTaking = true;
-      this.getUserMedia({
-        video: {
-          width: 400,
-          height: 300,
-        },
-      });
-    },
-    // 点击拍照按钮
-    onPhoto() {
-      // if (this.isIE) {
-      //   window.webcam.capture();
-      // } else {
-      const canvas = document.createElement("canvas");
-      canvas.width = 400;
-      canvas.height = 300;
-      const context = canvas.getContext("2d");
-      const video = document.getElementById("video");
-      context.drawImage(video, 0, 0, 400, 300);
-      this.faceUrl = canvas.toDataURL("image/png");
-      this.isTaking = false;
-      // }
-    },
-    getUserMedia(constraints, success, error) {
-      if (window.navigator.mediaDevices.getUserMedia) {
-        // 最新的标准API
-        window.navigator.mediaDevices
-          .getUserMedia(constraints)
-          .then(success)
-          .catch(error);
-      } else if (window.navigator.webkitGetUserMedia) {
-        // webkit核心浏览器
-        window.navigator.webkitGetUserMedia(constraints, success, error);
-      } else if (window.navigator.mozGetUserMedia) {
-        // firfox浏览器
-        window.navigator.mozGetUserMedia(constraints, success, error);
-      } else if (window.navigator.getUserMedia) {
-        // 旧版API
-        window.navigator.getUserMedia(constraints, success, error);
-      }
-    },
-
-    photographSuccess(stream) {
-      // 兼容webkit核心浏览器
-
-      this.isTaking = true;
-      this.takePhotoModal = true;
-
-      this.$nextTick(() => {
-        const video = document.getElementById("video");
-        // 将视频流设置为video元素的源
-        console.dir(video);
-        video.srcObject = stream;
-        this.mediaStreamTrack =
-          typeof stream.stop === "function" ? stream : stream.getTracks()[0];
-        video.play();
+      console.log("继续做题");
+      this.$request.examReport(this.recordId).then((res) => {
+        let json = JSON.parse(res.data.historyExamJson);
+        this.examData = res.data;
+        this.questionList = json;
       });
     },
-    photographError(err) {
-      this.$confirm(
-        "课程学习需要开启摄像头进行拍照，经检测您的设备无摄像头可使用，请检测环境是否支持。",
-        "提示",
-        {
-          showConfirmButton: false,
-          closeOnClickModal: false,
-          showCancelButton: false,
-          closeOnPressEscape: false,
-          distinguishCancelAndClose: false,
-          showClose: false,
-        }
-      );
-    },
 
-    /**
-     * 记录总题数,获取recordId
-     * hasSpecial (是否包含简答和案例) true 包含  false 不包含
-     */
-    examRecord(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
-          .bankRecord({
-            chapterExamId: this.chapterId || 0,
-            moduleExamId: this.moduleId || 0,
-            examId: this.examId,
-            goodsId: this.goodsId,
-            gradeId: this.gradeId,
-            totalQuestionNum: questionList,
-            allQuestionNum: this.questionList.length,
-          })
-          .then((res) => {
-            this.recordId = res.data;
-
-            if (self.needPhoto) {
-              this.openPhoto();
-            } else {
-              if (this.lastTime) {
-                this.timer = setInterval(() => {
-                  if (this.lastTime <= 0) {
-                    clearInterval(this.timer);
-                    this.$confirm("考试时间已到，系统将自动交卷", "提示", {
-                      showConfirmButton: false,
-                      closeOnClickModal: false,
-                      showCancelButton: false,
-                      closeOnPressEscape: false,
-                      distinguishCancelAndClose: false,
-                      showClose: false,
-                    });
-
-                    setTimeout(() => {
-                      this.examSubmit();
-                    }, 2000);
-
-                    return;
-                  }
-                  this.lastTime--;
-                }, 1000);
-              }
-
-              resolve();
-            }
-          });
-      });
-    },
-
-    /**
-     * 获取试卷类型2考试,1练习
-     */
-    bankExam() {
-      this.$request.bankExam(this.examId).then((res) => {
-        this.bankType = res.data.doType;
-        if (this.bankType == 2) {
-          this.needBack = true;
-        }
-      });
-    },
     /**
      * @param {Object}
      * 单选点击确认
@@ -1864,56 +1303,10 @@ export default {
         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() {
-      if (this.needPhoto && !this.hasTake) {
-        this.$confirm("未拍照成功不能交卷", "提示", {
-          closeOnClickModal: false,
-          showCancelButton: false,
-          closeOnPressEscape: false,
-          distinguishCancelAndClose: false,
-          showClose: false,
-        });
-        return;
-      }
       let score = 0; //计算总分
       let reportStatus = 0;
       let number = 0; //做对的题目数量
@@ -2042,28 +1435,23 @@ export default {
         reportStatus = 0;
       }
 
-      clearInterval(this.timer);
       //交卷
       this.$request
-        .bankRecordEdit({
-          moduleId: this.moduleId || 0,
-          chapterId: this.chapterId || 0,
-          gradeId: this.gradeId,
+        .examRecordEdit({
           examId: this.examId,
           goodsId: this.goodsId,
           reportStatus: reportStatus,
+          totalScore: allScore,
           recordId: this.recordId,
-          courseId: this.courseId,
           rightQuestionNum: number,
           status: 1,
+          moduleExamId: this.moduleId || 0,
+          chapterExamId: this.chapterId || 0,
           doQuestionIds: doQuestionIds.join(","),
-          // rightQuestionIds:rightQuestionIds.join(','),
-          // doQuestionNum: doQuestionNum,
+          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)
+          historyExamJson: JSON.stringify(this.questionList),
         })
         .then((res) => {
           this.isSubmit = true;
@@ -2074,16 +1462,15 @@ export default {
 
           setTimeout(() => {
             let result = {
-              rightQuestionNum: number,
-              doWrongQuestionNum: doWrongQuestionIds.length,
-              score: score,
-              totalScore: allScore,
-              reportStatus: reportStatus,
+              chapterId: this.chapterId,
+              moduleId: this.moduleId,
+              examId: this.examId,
+              recordId: this.recordId,
             };
-
+            console.log(result);
             this.setExamResult(result);
             this.$router.replace({
-              path: "/bank-report",
+              path: "/bank-report/" + this.goodsId,
             });
           }, 1000);
         })

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

@@ -0,0 +1,1516 @@
+<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__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>
+                          </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>
+                          </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
+                            class="checkbox"
+                            v-for="(item, index) in question.jsonStr"
+                            :key="index"
+                            :label="item.optionsId"
+                            v-model="item.checked"
+                          >
+                            <div>{{ ast[index] }}. {{ item.content }}</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>
+                          </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-if="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>
+                          </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>
+                          </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>
+                                  </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>
+                                  </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
+                                    class="checkbox"
+                                    v-for="(item, index) in json.optionsList"
+                                    :key="index"
+                                    :label="item.optionsId"
+                                    v-model="item.checked"
+                                  >
+                                    <div>
+                                      {{ ast[index] }}. {{ item.content }}
+                                    </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>
+                                  </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>
+                                  </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>
+                                  </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 }}、简答题
+                              </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 }}、简答题
+                      </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 class="left-box__footer">
+                  <div class="btn" @click="prevQuestion">上一题</div>
+                  <div class="btn" @click="nextQuestion">下一题</div>
+                </div>
+              </div>
+              <div class="right-box">
+                <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 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),
+                            blue: isOver(item, index),
+                          }"
+                          @click="changeIndex(index)"
+                        >
+                          {{ index + 1 }}
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+                <div class="right-box__footer"></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"],
+      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.moduleId = this.$route.query.moduleId;
+    this.chapterId = this.$route.query.chapterId;
+    this.goodsId = this.$route.query.goodsId;
+    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.examReport(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) {
+                return json.ques[quesIndex] == json.ans[quesIndex];
+              } else {
+                return false;
+              }
+            });
+
+            if (!isRight) {
+              this.questionList.push(json);
+            }
+          }
+        });
+      });
+    },
+
+    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].ans.some((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;
+      }
+    },
+    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 {
+          height: 800px;
+          border: 1px solid #eee;
+          .left-box {
+            float: left;
+            width: 970px;
+            border-right: 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 {
+              height: 720px;
+              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;
+                }
+
+                &__content {
+                  flex: 1;
+                  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;
+                  }
+
+                  /deep/ .el-tabs__item {
+                    padding: 0 20px !important;
+                    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: pre-wrap;
+                    }
+                  }
+
+                  .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: 300px;
+
+            &__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;
+            }
+
+            &__body {
+              height: 720px;
+              border-bottom: 1px solid #eee;
+
+              .card {
+                &__note {
+                  display: flex;
+                  height: 40px;
+                  align-items: center;
+                  border-bottom: 1px solid #eee;
+
+                  .item {
+                    display: flex;
+                    align-items: center;
+                    margin-left: 10px;
+
+                    .box {
+                      margin-right: 5px;
+                      width: 16px;
+                      height: 16px;
+                      border-radius: 4px;
+
+                      &.white {
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                      }
+
+                      &.green {
+                        background: #37c65b;
+                      }
+
+                      &.red {
+                        background: #ff3a30;
+                      }
+
+                      &.blue {
+                        background: #3f8dfd;
+                      }
+                    }
+                  }
+                }
+
+                &__content {
+                  height: 410px;
+                  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;
+                      }
+
+                      &.disabled {
+                        cursor: not-allowed;
+                        line-height: 38px;
+                        color: #eeeeee;
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+
+            &__footer {
+              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/bank-exam/index.vue

@@ -1833,20 +1833,20 @@ export default {
         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;
+      // 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
         .examRecordEdit({
@@ -1897,7 +1897,8 @@ export default {
           questionIds: doWrongQuestionIds,
           recordId: this.recordId,
         })
-        .then((res) => {});
+        .then((res) => {})
+        .catch((err) => {});
     },
   },
 };

src/pages/bank-report/index.vue

@@ -93,8 +93,15 @@
           <el-button type="primary" class="btn" @click="doRepeat(reportdata)"
             >重新做题</el-button
           >
-          <el-button type="primary" class="btn">错题解析</el-button>
-          <el-button type="primary" class="btn">全部解析</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>
@@ -264,6 +271,30 @@ export default {
         });
       });
     },
+
+    wrongExplain(reportdata) {
+      this.$router.push({
+        path: "/bank-exam-wrong-explain/" + reportdata.recordId,
+        query: {
+          examId: reportdata.examId,
+          moduleId: reportdata.moduleId || 0,
+          chapterId: reportdata.chapterId || 0,
+          goodsId: this.goodsId,
+        },
+      });
+    },
+
+    allExplain(reportdata) {
+      this.$router.push({
+        path: "/bank-exam-all-explain/" + reportdata.recordId,
+        query: {
+          examId: reportdata.examId,
+          moduleId: reportdata.moduleId || 0,
+          chapterId: reportdata.chapterId || 0,
+          goodsId: this.goodsId,
+        },
+      });
+    },
   },
 };
 </script>

src/pages/person-center/my-bank/bank-detail/index.vue

@@ -3,7 +3,7 @@
     <section class="section">
       <div class="section__body">
         <div class="left-box">
-          <el-tabs v-model="activeName">
+          <el-tabs v-model="activeName" @tab-click="tabChange">
             <el-tab-pane label="章节练习" name="1">
               <div class="goods-menu">
                 <div class="goods-menu__header">
@@ -36,7 +36,7 @@
                           >
                             <div
                               class="bank-chapter__item__text"
-                              @click="chapterExam(chapter)"
+                              @click="chapterExam(chapter, item.majorId)"
                             >
                               <i
                                 :class="{
@@ -114,7 +114,7 @@
                           <div class="bank-chapter__item">
                             <div
                               class="bank-chapter__item__text"
-                              @click="chapterExam(item)"
+                              @click="chapterExam(item, 0)"
                             >
                               <i
                                 :class="{
@@ -218,8 +218,266 @@
                 </div>
               </div>
             </el-tab-pane>
-            <el-tab-pane label="收藏题集" name="2"> </el-tab-pane>
-            <el-tab-pane label="错题集" name="3"></el-tab-pane>
+            <el-tab-pane label="收藏题集" name="2">
+              <div class="goods-collect">
+                <div class="goods-collect__header">
+                  <div class="selects">
+                    <div class="selects__item">
+                      <el-select
+                        placeholder="请选择"
+                        v-model="collectSelect"
+                        @change="getCollectData"
+                        clearable
+                        @clear="getWrongData"
+                      >
+                        <el-option
+                          v-for="(item, index) in selectList"
+                          :key="index"
+                          :label="item.paperName"
+                          :value="item.paperId"
+                        ></el-option>
+                      </el-select>
+                    </div>
+                  </div>
+
+                  <div class="tabs">
+                    <el-tabs v-model="collectName" @tab-click="getCollectData">
+                      <el-tab-pane label="试卷归类" name="1"></el-tab-pane>
+                      <el-tab-pane label="题型归类" name="2"></el-tab-pane>
+                    </el-tabs>
+                  </div>
+                </div>
+
+                <div class="goods-collect__body">
+                  <div class="box">
+                    <div class="title">收藏统计</div>
+                    <div class="circle">
+                      <el-progress
+                        type="circle"
+                        :width="160"
+                        :stroke-width="12"
+                        color="#FADB14"
+                        :format="() => collectTotal || '0'"
+                        :percentage="25"
+                      ></el-progress>
+                    </div>
+                  </div>
+                  <div class="list" v-if="collectName == '1'">
+                    <div
+                      class="list__item"
+                      v-for="(item, index) in collectExamList"
+                      :key="index"
+                    >
+                      <div class="title">
+                        {{ item.examName }}
+                      </div>
+                      <div class="content clearfix">
+                        <div class="left">
+                          收藏题<span class="red">{{ item.questionNum }}</span>
+                        </div>
+                        <div class="right">
+                          <el-button
+                            type="primary"
+                            @click="go('/subject/collect-bank/' + item.examId)"
+                            round
+                            plain
+                            class="btn"
+                            >重做</el-button
+                          >
+                          <el-button
+                            type="primary"
+                            @click="
+                              go('/subject/collect-bank/' + item.examId, {
+                                explain: 1,
+                              })
+                            "
+                            round
+                            plain
+                            class="btn"
+                            >解析</el-button
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="list" v-if="collectName == '2'">
+                    <div
+                      class="list__item"
+                      v-for="(item, index) in collectTypeList"
+                      :key="index"
+                    >
+                      <div class="title">
+                        <template v-if="item.type == 1">单选题</template>
+                        <template v-if="item.type == 2">多选题</template>
+                        <template v-if="item.type == 3">判断题</template>
+                        <template v-if="item.type == 4">案例题</template>
+                        <template v-if="item.type == 5">简答题</template>
+                      </div>
+                      <div class="content clearfix">
+                        <div class="left">
+                          收藏题<span class="red">{{ item.num }}</span>
+                        </div>
+                        <div class="right">
+                          <el-button
+                            type="primary"
+                            @click="
+                              go('/subject/collect-type-bank/' + item.type)
+                            "
+                            round
+                            plain
+                            class="btn"
+                            >重做</el-button
+                          >
+                          <el-button
+                            type="primary"
+                            @click="
+                              go('/subject/collect-type-bank/' + item.type, {
+                                explain: 1,
+                              })
+                            "
+                            round
+                            plain
+                            class="btn"
+                            >解析</el-button
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="错题集" name="3">
+              <div class="goods-collect">
+                <div class="goods-collect__header">
+                  <div class="selects">
+                    <div class="selects__item">
+                      <el-select
+                        placeholder="请选择"
+                        v-model="wrongSelect"
+                        clearable
+                        @clear="getWrongData"
+                        @change="getWrongData"
+                      >
+                        <el-option
+                          v-for="(item, index) in selectList"
+                          :key="index"
+                          :label="item.paperName"
+                          :value="item.paperId"
+                        ></el-option>
+                      </el-select>
+                    </div>
+                  </div>
+
+                  <div class="tabs">
+                    <el-tabs v-model="wrongName" @tab-click="getWrongData">
+                      <el-tab-pane label="试卷归类" name="1"></el-tab-pane>
+                      <el-tab-pane label="题型归类" name="2"></el-tab-pane>
+                    </el-tabs>
+                  </div>
+                </div>
+
+                <div class="goods-collect__body">
+                  <div class="box">
+                    <div class="title">错题统计</div>
+                    <div class="circle">
+                      <el-progress
+                        type="circle"
+                        :width="160"
+                        :stroke-width="12"
+                        color="#F5222D"
+                        :format="() => wrongTotal || '0'"
+                        :percentage="25"
+                      ></el-progress>
+                    </div>
+                  </div>
+                  <div class="list" v-if="wrongName == '1'">
+                    <div
+                      class="list__item"
+                      v-for="(item, index) in wrongExamList"
+                      :key="index"
+                    >
+                      <div class="title">
+                        {{ item.examName }}
+                      </div>
+                      <div class="content clearfix">
+                        <div class="left">
+                          错题数<span class="red">{{
+                            item.wrongQuestionNum
+                          }}</span>
+                        </div>
+                        <div class="right">
+                          <el-button
+                            type="primary"
+                            round
+                            plain
+                            class="btn"
+                            @click="go('/subject/wrong-bank/' + item.examId)"
+                            >重做</el-button
+                          >
+                          <el-button
+                            type="primary"
+                            round
+                            plain
+                            class="btn"
+                            @click="
+                              go('/subject/wrong-bank/' + item.examId, {
+                                explain: 1,
+                              })
+                            "
+                            >解析</el-button
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="list" v-if="wrongName == '2'">
+                    <div
+                      class="list__item"
+                      v-for="(item, index) in wrongTypeList"
+                      :key="index"
+                    >
+                      <div class="title">
+                        <template v-if="item.type == 1">单选题</template>
+                        <template v-if="item.type == 2">多选题</template>
+                        <template v-if="item.type == 3">判断题</template>
+                        <template v-if="item.type == 4">案例题</template>
+                        <template v-if="item.type == 5">简答题</template>
+                      </div>
+                      <div class="content clearfix">
+                        <div class="left">
+                          错题数<span class="red">{{ item.num }}</span>
+                        </div>
+                        <div class="right">
+                          <el-button
+                            type="primary"
+                            round
+                            plain
+                            class="btn"
+                            @click="go('/subject/wrong-type-bank/' + item.type)"
+                            >重做</el-button
+                          >
+                          <el-button
+                            type="primary"
+                            round
+                            plain
+                            class="btn"
+                            @click="
+                              go('/subject/wrong-type-bank/' + item.type, {
+                                explain: 1,
+                              })
+                            "
+                            >解析</el-button
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
           </el-tabs>
         </div>
         <div class="right-box">
@@ -260,7 +518,7 @@
           <div class="right-box__body">
             <div class="title">
               推荐题库
-              <span class="more">更多></span>
+              <span class="more" @click="go('/bank-list')">更多></span>
             </div>
             <ul class="list">
               <li
@@ -295,10 +553,22 @@ export default {
   data() {
     return {
       activeName: "1",
+      collectName: "1",
+      wrongName: "1",
       goodsId: "",
       goodsDetail: {},
       goodsCount: {},
       bankList: [],
+      selectList: [],
+      collectSelect: "",
+      wrongSelect: "",
+      hasClickList: [],
+      collectTypeList: [],
+      collectExamList: [],
+      wrongTypeList: [],
+      wrongExamList: [],
+      collectTotal: 0,
+      wrongTotal: 0,
     };
   },
   mounted() {
@@ -306,10 +576,20 @@ export default {
     this.goodsBankQuestionNum();
     this.goodsBank();
     this.getDetail();
+    this.examaperList();
   },
   methods: {
-    handleNodeClick(data) {
-      console.log(data);
+    go(path, query = {}) {
+      console.log(path, query);
+      this.$router.push({
+        path,
+        query,
+      });
+    },
+    examaperList() {
+      this.$request.examaperList().then((res) => {
+        this.selectList = res.rows;
+      });
     },
 
     /**
@@ -372,13 +652,14 @@ export default {
     /**
      * 展开章卷
      */
-    chapterExam(chapter) {
+    chapterExam(chapter, moduleId = 0) {
       if (chapter.list.length) {
         chapter.showList = !chapter.showList;
         return;
       }
       this.$request
         .bankExamExamList({
+          moduleExamId: moduleId,
           chapterExamId: chapter.chapterExamId || chapter.majorId,
           goodsId: this.goodsId,
         })
@@ -420,11 +701,12 @@ export default {
      * 继续做题
      */
     continueDo(section, chapterId, moduleId) {
+      console.log(section);
       this.$router.push({
-        path: "/bank-exam-continue" + this.goodsId,
-        params: {
+        path: "/bank-exam-continue/" + this.goodsId,
+        query: {
           recordId: section.recordId,
-          examId: section.examId,
+          examId: section.examId || section.majorId,
           chapterId: chapterId,
           moduleId: moduleId,
         },
@@ -438,9 +720,11 @@ export default {
      * @param {Object} goodsId
      * @param {Object} chapterExamId
      */
-    async doRepeat(section, chapterExamId = 0, moduleId = 0) {
-      let count = await this.examRecordCount(examId);
-      let answerNum = await this.getExamDetail(examId);
+    async doRepeat(section, chapterId = 0, moduleId = 0) {
+      let count = await this.examRecordCount(section.examId || section.majorId);
+      let answerNum = await this.getExamDetail(
+        section.examId || section.majorId
+      );
       //超过答题次数
       if (answerNum > 0 && count >= answerNum) {
         this.$message({
@@ -463,19 +747,19 @@ export default {
             path: "/bank-exam/" + this.goodsId,
             query: {
               examId: section.examId || section.majorId,
-              moduleId: section.moduleId || 0,
-              chapterId: section.chapterId || 0,
+              moduleId: moduleId || 0,
+              chapterId: chapterId || 0,
             },
           });
         })
         .catch((_) => {
           this.$router.push({
-            path: "/bank-exam-explain" + this.goodsId,
-            params: {
-              recordId: section.recordId,
-              examId: section.examId,
-              chapterId: chapterId,
-              moduleId: moduleId,
+            path: "/bank-exam-all-explain/" + section.recordId,
+            query: {
+              examId: section.examId || section.majorId,
+              moduleId: moduleId || 0,
+              chapterId: chapterId || 0,
+              goodsId: this.goodsId,
             },
           });
         });
@@ -507,6 +791,116 @@ export default {
         });
       });
     },
+
+    getWrongData() {
+      if (this.wrongName == "1") {
+        //试卷归类
+        this.wrongRecordList();
+      } else if (this.wrongName == "2") {
+        //题型归类
+        this.wrongRecordTypeList();
+      }
+    },
+
+    wrongRecordList() {
+      this.$request
+        .wrongRecordList({
+          paperId: this.wrongSelect,
+          goodsId: this.goodsId,
+        })
+        .then((res) => {
+          this.wrongExamList = res.rows;
+          let total = 0;
+          res.rows.forEach((item) => {
+            total += item.wrongQuestionNum;
+          });
+
+          this.wrongTotal = total;
+        });
+    },
+    wrongRecordTypeList() {
+      this.$request
+        .wrongRecordTypeList({
+          paperId: this.wrongSelect,
+          goodsId: this.goodsId,
+        })
+        .then((res) => {
+          this.wrongTypeList = res.rows;
+
+          let total = 0;
+          res.rows.forEach((item) => {
+            total += item.num;
+          });
+
+          this.wrongTotal = total;
+        });
+    },
+
+    getCollectData() {
+      if (this.collectName == "1") {
+        //试卷归类
+        this.goodsCollectExamList();
+      } else if (this.collectName == "2") {
+        //题型归类
+        this.collectQuestionTypeList();
+      }
+    },
+
+    /**
+     * 收藏按试卷分类
+     */
+    goodsCollectExamList() {
+      this.$request
+        .goodsCollectExamList({
+          paperId: this.collectSelect,
+          goodsId: this.goodsId,
+        })
+        .then((res) => {
+          this.collectExamList = res.rows;
+          let total = 0;
+          res.rows.forEach((item) => {
+            total += item.questionNum;
+          });
+
+          this.collectTotal = total;
+        });
+    },
+
+    /**
+     * 收藏按题型分类
+     */
+    collectQuestionTypeList() {
+      this.$request
+        .collectQuestionTypeList({
+          paperId: this.wrongSelect,
+          goodsId: this.goodsId,
+        })
+        .then((res) => {
+          this.collectTypeList = res.rows;
+          let total = 0;
+          res.rows.forEach((item) => {
+            total += item.num;
+          });
+
+          this.collectTotal = total;
+        });
+    },
+
+    tabChange(e) {
+      if (this.hasClickList.indexOf(e.name) != -1) {
+        return;
+      }
+
+      this.hasClickList.push(e.name);
+
+      if (e.name == "2") {
+        //收藏集
+        this.getCollectData();
+      } else if (e.name == "3") {
+        //错题集
+        this.getWrongData();
+      }
+    },
   },
 };
 </script>
@@ -642,6 +1036,108 @@ export default {
             }
           }
         }
+
+        .goods-collect {
+          &__header {
+            .selects {
+              display: flex;
+              justify-content: space-between;
+              &__item {
+                width: 360px;
+                height: 40px;
+                border-radius: 8px;
+
+                .el-select {
+                  width: 100%;
+                }
+
+                /deep/ .el-input__inner {
+                  background: #fafafa;
+                  border: 1px solid #d9d9d9;
+                }
+              }
+            }
+
+            .tabs {
+            }
+          }
+
+          &__body {
+            .box {
+              width: 300px;
+              height: 240px;
+              background: #ffffff;
+              border: 1px solid #d9d9d9;
+              border-radius: 8px;
+              padding: 16px;
+
+              .title {
+                font-size: 14px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #333333;
+              }
+
+              .circle {
+                width: 160px;
+                height: 160px;
+                margin: 10px auto 0;
+              }
+            }
+
+            .list {
+              overflow: hidden;
+              &__item {
+                margin-top: 16px;
+                height: 98px;
+                background: #f7f9fc;
+                box-shadow: 0px 3px 6px 0px #e1e6ed;
+                border-radius: 8px;
+
+                .title {
+                  padding: 10px 16px;
+                  font-size: 16px;
+                  font-family: Microsoft YaHei;
+                  font-weight: bold;
+                  color: #333333;
+                }
+
+                .content {
+                  border-top: 1px solid #eee;
+                  .left {
+                    float: left;
+                    margin-left: 16px;
+                    margin-top: 10px;
+                    padding: 4px 12px;
+                    border: 1px solid #666666;
+                    border-radius: 4px;
+                    font-size: 14px;
+
+                    .red {
+                      margin-left: 12px;
+                      color: #f5222d;
+                      font-size: 14px;
+                    }
+                  }
+
+                  .right {
+                    float: right;
+                    margin-right: 16px;
+                    margin-top: 10px;
+                    .btn {
+                      width: 88px;
+                      height: 32px;
+                      border-radius: 16px;
+                      text-align: center;
+                      padding: 0;
+                      line-height: 32px;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
       }
 
       .right-box {
@@ -722,6 +1218,7 @@ export default {
             position: relative;
 
             .more {
+              cursor: pointer;
               font-size: 16px;
               font-family: Microsoft YaHei;
               font-weight: 400;

src/pages/person-center/my-bank/bank-statistics/index.vue

@@ -63,21 +63,172 @@
             </div>
           </div>
           <div class="goods-menu__body">
-            <el-tree
-              class="tree"
-              :highlight-current="false"
-              :data="data"
-              :props="defaultProps"
-              @node-click="handleNodeClick"
-            >
-              <span class="custom-tree-node" slot-scope="{ node, data }">
-                <span>{{ node.label }}</span>
-                <span v-if="!data.children">
-                  <span class="question-num">0/14</span>
-                  <span class="question-do" @click.stop="goDetail()">详情</span>
-                </span>
-              </span></el-tree
-            >
+            <div class="menu-title">
+              <div class="percent-title">正确率</div>
+              <div class="num-title">已做/总数</div>
+            </div>
+            <div class="menu-list">
+              <div class="item" v-for="(item, index) in bankList" :key="index">
+                <template v-if="item.type == 1">
+                  <div class="item__title" @click="moduleExam(item)">
+                    <i
+                      :class="{
+                        'el-icon-caret-right': !item.showList,
+                        'el-icon-caret-bottom': item.showList,
+                      }"
+                    ></i>
+                    {{ item.name }}
+                  </div>
+                  <div class="item__content" v-if="item.showList">
+                    <div class="bank-chapter">
+                      <div
+                        class="bank-chapter__item"
+                        v-for="(chapter, chapterIndex) in item.list"
+                        :key="chapterIndex"
+                      >
+                        <div
+                          class="bank-chapter__item__text"
+                          @click="chapterExam(chapter, item.majorId)"
+                        >
+                          <i
+                            :class="{
+                              'el-icon-caret-right': !chapter.showList,
+                              'el-icon-caret-bottom': chapter.showList,
+                            }"
+                          ></i
+                          >{{ chapter.name }}
+                        </div>
+
+                        <div class="bank-section" v-if="chapter.showList">
+                          <div
+                            class="bank-section__item"
+                            v-for="(section, sectionIndex) in chapter.list"
+                            :key="sectionIndex"
+                          >
+                            <div class="bank-section__item__text">
+                              <div class="title">{{ section.examName }}</div>
+                            </div>
+                            <div class="num">
+                              {{
+                                section.totalQuestionNum != 0
+                                  ? (
+                                      (section.rightQuestionNum /
+                                        section.totalQuestionNum) *
+                                      100
+                                    ).toFixed(0) + "%"
+                                  : 0 + "%"
+                              }}
+                            </div>
+                            <div class="num">
+                              {{
+                                section.doQuestionNum +
+                                "/" +
+                                section.totalQuestionNum
+                              }}
+                            </div>
+                            <el-button
+                              type="primary"
+                              @click="goDetail(section)"
+                              class="btn"
+                              >详情</el-button
+                            >
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+
+                <template v-if="item.type == 2">
+                  <div class="item__content">
+                    <div class="bank-chapter">
+                      <div class="bank-chapter__item">
+                        <div
+                          class="bank-chapter__item__text"
+                          @click="chapterExam(item, 0)"
+                        >
+                          <i
+                            :class="{
+                              'el-icon-caret-right': !item.showList,
+                              'el-icon-caret-bottom': item.showList,
+                            }"
+                          ></i
+                          >{{ item.name }}
+                        </div>
+
+                        <div class="bank-section" v-if="item.showList">
+                          <div
+                            class="bank-section__item"
+                            v-for="(section, sectionIndex) in item.list"
+                            :key="sectionIndex"
+                          >
+                            <div class="bank-section__item__text">
+                              <div class="title">{{ section.examName }}</div>
+                            </div>
+                            <div class="num">
+                              {{
+                                section.totalQuestionNum != 0
+                                  ? (
+                                      (section.rightQuestionNum /
+                                        section.totalQuestionNum) *
+                                      100
+                                    ).toFixed(0) + "%"
+                                  : 0 + "%"
+                              }}
+                            </div>
+                            <div class="num">
+                              {{
+                                section.doQuestionNum +
+                                "/" +
+                                section.totalQuestionNum
+                              }}
+                            </div>
+                            <el-button
+                              type="primary"
+                              @click="goDetail(section)"
+                              class="btn"
+                              >详情</el-button
+                            >
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+
+                <template v-if="item.type == 3">
+                  <div class="item__content">
+                    <div class="bank-section">
+                      <div class="bank-section__item">
+                        <div class="bank-section__item__text">
+                          <div class="title">{{ item.name }}</div>
+                        </div>
+                        <div class="num">
+                          {{
+                            item.totalQuestionNum != 0
+                              ? (
+                                  (item.rightQuestionNum /
+                                    item.totalQuestionNum) *
+                                  100
+                                ).toFixed(0) + "%"
+                              : 0 + "%"
+                          }}
+                        </div>
+                        <div class="num">
+                          {{ item.doQuestionNum + "/" + item.totalQuestionNum }}
+                        </div>
+                        <el-button
+                          type="primary"
+                          @click="goDetail(item)"
+                          class="btn"
+                          >详情</el-button
+                        >
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -91,68 +242,6 @@ export default {
   components: {},
   data() {
     return {
-      activeName: "1",
-      data: [
-        {
-          label: "一级 1",
-          children: [
-            {
-              label: "二级 1-1",
-              children: [
-                {
-                  label: "三级 1-1-1",
-                },
-              ],
-            },
-          ],
-        },
-        {
-          label: "一级 2",
-          children: [
-            {
-              label: "二级 2-1",
-              children: [
-                {
-                  label: "三级 2-1-1",
-                },
-              ],
-            },
-            {
-              label: "二级 2-2",
-              children: [
-                {
-                  label: "三级 2-2-1",
-                },
-              ],
-            },
-          ],
-        },
-        {
-          label: "一级 3",
-          children: [
-            {
-              label: "二级 3-1",
-              children: [
-                {
-                  label: "三级 3-1-1",
-                },
-              ],
-            },
-            {
-              label: "二级 3-2",
-              children: [
-                {
-                  label: "三级 3-2-1",
-                },
-              ],
-            },
-          ],
-        },
-      ],
-      defaultProps: {
-        children: "children",
-        label: "label",
-      },
       goodsCount: {},
       bankList: [],
       goodsId: 0,
@@ -180,12 +269,52 @@ export default {
     handleNodeClick(data) {
       console.log(data);
     },
-    goDetail() {
+    goDetail(section) {
       this.$router.push({
-        path: "/person-center/my-bank/bank-explain-detail/123",
+        path: "/person-center/my-bank/bank-explain-detail/" + this.goodsId,
+        query: {
+          examId: section.examId || section.majorId,
+        },
       });
     },
 
+    chapterExam(chapter, moduleId) {
+      if (chapter.list.length) {
+        chapter.showList = !chapter.showList;
+        return;
+      }
+      this.$request
+        .goodsExamDolist({
+          moduleExamId: moduleId,
+          chapterExamId: chapter.chapterExamId || chapter.majorId,
+          goodsId: this.goodsId,
+        })
+        .then((res) => {
+          chapter.showList = !chapter.showList;
+          chapter.list = res.data;
+        });
+    },
+
+    moduleExam(module) {
+      if (module.list.length) {
+        module.showList = !module.showList;
+        return;
+      }
+      this.$request
+        .goodsChapterDolist({
+          moduleExamId: module.majorId,
+          goodsId: this.goodsId,
+        })
+        .then((res) => {
+          res.data.forEach((item) => {
+            item.showList = false;
+            item.list = [];
+          });
+          module.showList = !module.showList;
+          module.list = res.data;
+        });
+    },
+
     goodsBankDolist() {
       this.$request
         .goodsBankDolist({
@@ -193,6 +322,10 @@ export default {
         })
         .then((res) => {
           console.log(res);
+          res.data.forEach((item) => {
+            item.showList = false;
+            item.list = [];
+          });
           this.bankList = res.data;
         });
     },
@@ -237,7 +370,6 @@ export default {
             }
 
             &__content {
-              margin-top: 20px;
               display: flex;
               align-items: center;
 
@@ -292,56 +424,117 @@ export default {
           padding: 16px;
           border-radius: 10px;
           background: #f5f7fa;
-          .tree {
-            /deep/.el-tree-node:focus > .el-tree-node__content {
-              background: none;
-            }
-
-            /deep/ .el-tree-node:focus {
-              background: none;
-            }
-            /deep/ .el-tree-node:hover {
-              background: none;
-            }
 
-            /deep/ .el-tree-node__content:hover {
-              background: none;
+          .menu-title {
+            padding: 10px;
+            text-align: right;
+            .percent-title {
+              width: 80px;
+              display: inline-block;
+              text-align: center;
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #999999;
+              margin-right: 20px;
             }
-
-            /deep/ .el-tree-node__content:focus {
-              background: none;
+            .num-title {
+              width: 80px;
+              display: inline-block;
+              text-align: center;
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #999999;
+              margin-right: 128px;
             }
+          }
 
-            /deep/ .el-tree-node__content {
-              padding-top: 20px;
-              padding-bottom: 20px;
-              border-bottom: 1px solid #eeeeee;
-              height: auto;
-            }
-            .custom-tree-node {
-              flex: 1;
-              display: flex;
-              align-items: center;
-              justify-content: space-between;
-              font-size: 14px;
-              padding-right: 8px;
+          .menu-list {
+            .item {
+              overflow: hidden;
+              background: #fff;
+              padding: 0 10px;
 
-              .question-num {
+              &__title {
+                padding: 20px 0;
+                cursor: pointer;
                 font-size: 16px;
-                text-align: center;
-                display: inline-block;
-                width: 80px;
+                font-family: Microsoft YaHei;
+                font-weight: bold;
+                color: #333333;
+                border-bottom: 1px solid #eeeeee;
+
+                .note {
+                  display: inline-block;
+                  margin-left: 20px;
+                  width: 40px;
+                  height: 24px;
+                  border: 1px solid #ff3b30;
+                  border-radius: 8px;
+                  line-height: 22px;
+                  color: #ff3b30;
+                  text-align: center;
+                }
               }
 
-              .question-do {
-                display: inline-block;
-                width: 88px;
-                height: 32px;
-                background: #3f8dfd;
-                border-radius: 16px;
-                text-align: center;
-                line-height: 32px;
-                color: #fff;
+              &__content {
+                background: #fff;
+
+                .bank-chapter {
+                  margin-left: 4px;
+
+                  &__item {
+                    font-size: 16px;
+                    align-items: center;
+
+                    &__text {
+                      padding-top: 20px;
+                      padding-bottom: 20px;
+                      border-bottom: 1px solid #eeeeee;
+                      cursor: pointer;
+                      flex: 1;
+                    }
+                  }
+                }
+
+                .bank-section {
+                  margin-left: 14px;
+
+                  &__item {
+                    padding-top: 20px;
+                    padding-bottom: 20px;
+                    border-bottom: 1px solid #eeeeee;
+                    font-size: 16px;
+                    display: flex;
+                    align-items: center;
+
+                    &__text {
+                      flex: 1;
+                    }
+
+                    .num {
+                      width: 80px;
+                      text-align: center;
+                      font-size: 14px;
+                      font-family: Microsoft YaHei;
+                      font-weight: 400;
+                      color: #999999;
+                      margin-right: 20px;
+                    }
+
+                    .btn {
+                      margin-right: 20px;
+                      width: 88px;
+                      height: 32px;
+                      padding: 0;
+                      border-radius: 16px;
+                      line-height: 32px;
+                      text-align: center;
+                      cursor: pointer;
+                    }
+                  }
+                }
               }
             }
           }

src/pages/person-center/my-invoice/add/index.vue

@@ -12,86 +12,116 @@
     </div>
     <div class="invoice-add__body">
       <el-form
+        :rules="rules"
         class="invoice-content"
         ref="form"
         :model="form"
-        label-width="100px"
+        label-width="120px"
       >
         <div class="invoice-content__header">
-          <el-form-item label="选择订单："
+          <el-form-item label="选择订单：" prop="orderGoodsIds"
             ><el-select
+              required
+              @change="changeSelect"
               class="select"
-              v-model="value1"
+              v-model="form.orderGoodsIds"
+              clearable
               multiple
               placeholder="请选择"
             >
               <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
+                v-for="item in orderList"
+                :key="item.orderGoodsId"
+                :label="
+                  '商品名称：' +
+                  item.goodsName +
+                  ',订单编号:' +
+                  item.orderSn +
+                  ',价格:￥' +
+                  item.goodsPrice
+                "
+                :value="item.orderGoodsId"
               >
               </el-option>
             </el-select>
           </el-form-item>
 
-          <div class="total">
-            合计金额：
-            <span class="note">￥999</span>
-          </div>
+          <el-form-item label="合计金额：">
+            <div class="total">
+              <span class="note">￥{{ total }}</span>
+            </div>
+          </el-form-item>
         </div>
 
         <div class="invoice-content__header">
-          <el-form-item label="发票类型：">
-            <el-radio v-model="radio1" label="1">普通发票</el-radio>
-            <el-radio v-model="radio1" label="2">增值税发票</el-radio>
+          <el-form-item label="发票类型：" required prop="type">
+            <el-radio-group v-model="form.type" @change="changeType">
+              <el-radio label="1">普通发票</el-radio>
+              <el-radio label="2">增值税发票</el-radio>
+            </el-radio-group>
           </el-form-item>
-          <el-form-item label="申请主体：">
-            <el-radio v-model="radio2" label="1">个人</el-radio>
-            <el-radio v-model="radio2" label="2">企业</el-radio>
+          <el-form-item label="申请主体：" required prop="type">
+            <template v-if="form.type == 2">
+              <el-radio v-model="form.subject" label="2">企业</el-radio>
+            </template>
+            <template v-else>
+              <el-radio v-model="form.subject" label="1">个人</el-radio>
+              <el-radio v-model="form.subject" label="2">企业</el-radio>
+            </template>
           </el-form-item>
         </div>
 
         <div class="invoice-content__body">
-          <el-form-item label="发票抬头：">
-            <el-input v-model="form.name"></el-input>
-          </el-form-item>
-          <el-form-item label="单位税号：">
-            <el-input v-model="form.name"></el-input>
-          </el-form-item>
-          <el-form-item label="单位地址：">
-            <el-input v-model="form.name"></el-input>
-          </el-form-item>
-          <el-form-item label="电话号码：">
-            <el-input v-model="form.name"></el-input>
-          </el-form-item>
-          <el-form-item label="开户银行：">
-            <el-input v-model="form.name"></el-input>
-          </el-form-item>
-          <el-form-item label="银行账号：">
-            <el-input v-model="form.name"></el-input>
+          <el-form-item label="发票抬头：" required prop="invoiceTitle">
+            <el-input v-model="form.invoiceTitle"></el-input>
           </el-form-item>
-          <el-form-item label="收件地址：">
-            <el-input v-model="form.name"></el-input>
+          <el-form-item label="纳税登记号：" required prop="taxRegistryNumber">
+            <el-input v-model="form.taxRegistryNumber"></el-input>
           </el-form-item>
 
-          <el-form-item label="收件人：">
-            <el-input v-model="form.name"></el-input>
-          </el-form-item>
+          <template v-if="form.type == 2">
+            <el-form-item label="单位地址：" required prop="companyAddress">
+              <el-input v-model="form.companyAddress"></el-input>
+            </el-form-item>
+            <el-form-item label="电话号码：" required prop="phone">
+              <el-input v-model="form.phone"></el-input>
+            </el-form-item>
+            <el-form-item label="开户银行：" required prop="bankName">
+              <el-input v-model="form.bankName"></el-input>
+            </el-form-item>
+            <el-form-item label="银行账号：" required prop="bankAccount">
+              <el-input v-model="form.bankAccount"></el-input>
+            </el-form-item>
+            <el-form-item label="收件地址：" required prop="receivingAddress">
+              <el-input v-model="form.receivingAddress"></el-input>
+            </el-form-item>
 
-          <el-form-item label="收件手机：">
-            <el-input v-model="form.name"></el-input>
-          </el-form-item>
+            <el-form-item label="收件人：" required prop="receivingName">
+              <el-input v-model="form.receivingName"></el-input>
+            </el-form-item>
+
+            <el-form-item label="收件手机：" required prop="receivingTel">
+              <el-input v-model="form.receivingTel"></el-input>
+            </el-form-item>
+          </template>
         </div>
 
         <div class="invoice-content__footer">
           <div class="invoice-price">
             本次申请开票金额（元）：
-            <span class="note">1998.00</span>
+            <span class="note">{{ total }}</span>
           </div>
           <div class="btns">
-            <div class="cancel" @click="cancel">取消</div>
-            <div class="ok">提交申请</div>
+            <el-button type="primary" plain round class="cancel" @click="cancel"
+              >取消</el-button
+            >
+            <el-button
+              type="primary"
+              class="ok"
+              :loading="loading"
+              @click="submit"
+              >提交申请</el-button
+            >
           </div>
         </div>
       </el-form>
@@ -104,39 +134,245 @@ export default {
   name: "MyInvoice",
   data() {
     return {
-      form: {},
-      options: [
-        {
-          value: "1",
-          label: "黄金糕",
-        },
-        {
-          value: "2",
-          label: "双皮奶",
-        },
-        {
-          value: "3",
-          label: "蚵仔煎",
-        },
-        {
-          value: "4",
-          label: "龙须面",
-        },
-        {
-          value: "5",
-          label: "北京烤鸭",
-        },
-      ],
-      value1: [],
+      form: {
+        type: "1",
+        subject: "1",
+        invoiceTitle: "",
+        taxRegistryNumber: "",
+        companyAddress: "",
+        phone: "",
+        bankName: "",
+        bankAccount: "",
+        receivingAddress: "",
+        receivingName: "",
+        receivingTel: "",
+        orderGoodsIds: [],
+      },
       radio1: "",
       radio2: "",
+      orderList: [],
+      total: 0,
+      rules: {
+        receivingTel: [
+          {
+            required: true,
+            message: "请输入收件手机",
+            // 可以单个或者同时写两个触发验证方式
+            trigger: ["change"],
+          },
+          {
+            validator: (rule, value, callback) => {
+              // 上面有说，返回true表示校验通过，返回false表示不通过
+              // this.$u.test.mobile()就是返回true或者false的
+              return this.$u.test.mobile(value);
+            },
+            message: "手机号码格式不正确",
+            // 触发器可以同时用blur和change
+            trigger: ["change"],
+          },
+        ],
+        type: [
+          {
+            required: true,
+            message: "请选择发票类型",
+            // 可以单个或者同时写两个触发验证方式
+            trigger: ["change"],
+          },
+        ],
+        subject: [
+          {
+            required: true,
+            message: "请选择申请主体",
+            // 可以单个或者同时写两个触发验证方式
+            trigger: ["change"],
+          },
+        ],
+        invoiceTitle: [
+          {
+            required: true,
+            message: "请输入发票抬头",
+            // 可以单个或者同时写两个触发验证方式
+            trigger: ["change"],
+          },
+        ],
+        taxRegistryNumber: [
+          {
+            required: true,
+            message: "请输入纳税登记号",
+            // 可以单个或者同时写两个触发验证方式
+            trigger: ["change"],
+          },
+        ],
+        companyAddress: [
+          {
+            required: true,
+            message: "请输入单位地址",
+            // 可以单个或者同时写两个触发验证方式
+            trigger: ["change"],
+          },
+        ],
+        phone: [
+          {
+            required: true,
+            message: "请输入电话号码",
+            // 可以单个或者同时写两个触发验证方式
+            trigger: ["change"],
+          },
+        ],
+        bankName: [
+          {
+            required: true,
+            message: "请输入开户银行",
+            // 可以单个或者同时写两个触发验证方式
+            trigger: ["change"],
+          },
+        ],
+        bankAccount: [
+          {
+            required: true,
+            message: "请输入银行账号",
+            // 可以单个或者同时写两个触发验证方式
+            trigger: ["change"],
+          },
+        ],
+        receivingAddress: [
+          {
+            required: true,
+            message: "请输入收件地址",
+            // 可以单个或者同时写两个触发验证方式
+            trigger: ["change"],
+          },
+        ],
+        receivingName: [
+          {
+            required: true,
+            message: "请输入收件人",
+            // 可以单个或者同时写两个触发验证方式
+            trigger: ["change"],
+          },
+        ],
+        orderGoodsIds: [
+          {
+            required: true,
+            message: "请选择订单",
+            // 可以单个或者同时写两个触发验证方式
+            trigger: ["change"],
+          },
+        ],
+      },
+
+      loading: false,
     };
   },
-  mounted() {},
+  mounted() {
+    this.orderInvoiceCanInvoiceList();
+  },
   methods: {
+    changeType(e) {
+      if (this.form.type == "2") {
+        this.form.subject = "2";
+      }
+    },
+    changeSelect(e) {
+      let total = 0;
+      this.form.orderGoodsIds.forEach((id) => {
+        let orderItem = this.orderList.find((item) => item.orderGoodsId == id);
+        if (orderItem) {
+          total += orderItem.goodsPrice;
+        }
+      });
+
+      this.total = total;
+    },
     cancel() {
       this.$router.go(-1);
     },
+
+    submit() {
+      this.$refs.form.validate((valid) => {
+        if (this.total > 10000) {
+          this.$message({
+            type: "warning",
+            message:
+              "您所选的订单总开票金额，大于10000元，超出单张发票的开票额度，请修改开票订单",
+          });
+          return;
+        }
+
+        this.loading = true;
+        let data = JSON.parse(JSON.stringify(this.form));
+        data.amount = this.total;
+        if (data.subject == "1") {
+          data.taxRegistryNumber = "";
+          data.companyAddress = "";
+          data.phone = "";
+          data.bankName = "";
+          data.bankAccount = "";
+          data.receivingAddress = "";
+          data.receivingName = "";
+          data.receivingTel = "";
+        }
+        this.$request
+          .orderInvoice(data)
+          .then((res) => {
+            this.loading = false;
+            this.orderInvoiceCanInvoiceList();
+            this.form = {
+              type: "1",
+              subject: "1",
+              invoiceTitle: "",
+              orderGoodsIds: [],
+              taxRegistryNumber: "",
+              companyAddress: "",
+              phone: "",
+              bankName: "",
+              bankAccount: "",
+              receivingAddress: "",
+              receivingName: "",
+              receivingTel: "",
+            };
+            this.total = 0;
+
+            const confirmText = [
+              "您本次的发票申请已经提交成功！",
+              "机构将在3-7个工作日内进行处理，处理结果会在【发票记录】显示，请留意进度。",
+            ];
+            const newDatas = [];
+            const h = this.$createElement;
+            for (const i in confirmText) {
+              newDatas.push(h("p", null, confirmText[i]));
+            }
+            this.$confirm(h("div", null, newDatas), "操作提示", {
+              confirmButtonText: "知道了",
+              closeOnClickModal: false,
+              showCancelButton: false,
+              closeOnPressEscape: false,
+              distinguishCancelAndClose: false,
+              showClose: false,
+            })
+              .then((_) => {})
+              .catch((_) => {
+                console.log(_);
+              });
+          })
+          .catch((err) => {
+            this.loading = false;
+            this.$message({
+              type: "error",
+              message: err.msg,
+            });
+          });
+      });
+    },
+
+    /**
+     * 获取可开发票的订单
+     */
+    orderInvoiceCanInvoiceList() {
+      this.$request.orderInvoiceCanInvoiceList().then((res) => {
+        this.orderList = res.rows;
+      });
+    },
   },
 };
 </script>
@@ -162,12 +398,10 @@ export default {
         border-radius: 8px;
 
         .select {
-          width: 1000px;
+          width: 100%;
         }
 
         .total {
-          margin-top: 10px;
-          margin-left: 80px;
           font-size: 14px;
 
           .note {
@@ -209,29 +443,26 @@ export default {
         .btns {
           margin-top: 20px;
           .cancel {
+            padding: 0;
             display: inline-block;
             margin: 0 10px;
             cursor: pointer;
             width: 122px;
             height: 32px;
-            background: #ffffff;
-            border: 1px solid #3f8dfd;
             border-radius: 16px;
             text-align: center;
             font-size: 16px;
             line-height: 30px;
-            color: #3f8dfd;
           }
 
           .ok {
+            padding: 0;
             display: inline-block;
             margin: 0 10px;
             cursor: pointer;
             width: 122px;
             height: 32px;
-            background: #3f8dfd;
             border-radius: 16px;
-            color: #fff;
             text-align: center;
             line-height: 32px;
             font-size: 16px;

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

@@ -11,52 +11,258 @@
           type="index"
           label="序号"
         />
-        <el-table-column align="center" header-align="center" label="发票抬头"
-          >中正教育
+        <el-table-column
+          align="center"
+          header-align="center"
+          prop="invoiceTitle"
+          label="发票抬头"
+        >
         </el-table-column>
-        <el-table-column align="center" header-align="center" label="开票金额"
+        <el-table-column
+          align="center"
+          header-align="center"
+          prop="amount"
+          label="开票金额"
           >1000
         </el-table-column>
         <el-table-column align="center" header-align="center" label="发票类型">
-          普通发票</el-table-column
-        >
+          <template slot-scope="scope">
+            {{
+              scope.row.type == 1
+                ? "普通发票"
+                : scope.row.type == 2
+                ? "增值税专用发票"
+                : ""
+            }}
+          </template>
+        </el-table-column>
         <el-table-column align="center" header-align="center" label="开票状态"
-          >已开票
+          ><template slot-scope="scope">
+            {{
+              scope.row.invoiceStatus == 1
+                ? "未开票"
+                : scope.row.invoiceStatus == 2
+                ? "已开票"
+                : scope.row.invoiceStatus == -1
+                ? "已退票"
+                : ""
+            }}
+          </template>
         </el-table-column>
-        <el-table-column
-          align="center"
-          header-align="center"
-          prop="date"
-          label="申请时间"
-        >
+        <el-table-column align="center" header-align="center" label="申请时间">
+          <template slot-scope="scope">
+            {{ $tools.timestampToTime(scope.row.applyTime, false, false) }}
+          </template>
         </el-table-column>
         <el-table-column align="center" header-align="center" label="开票订单">
-          999</el-table-column
-        >
+          <template slot-scope="scope">
+            <div v-for="(item, index) in scope.row.orderList" :key="index">
+              {{ item.orderSn }}
+            </div>
+          </template>
+        </el-table-column>
         <el-table-column align="center" header-align="center" label="审核状态">
-          审核状态</el-table-column
-        >
-        <el-table-column align="center" header-align="center" label="发票状态"
-          >通过
+          <template slot-scope="scope">
+            {{
+              scope.row.periodStatus == 1
+                ? "待审核"
+                : scope.row.periodStatus == 3
+                ? "通过"
+                : scope.row.periodStatus == 2
+                ? "驳回"
+                : ""
+            }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" header-align="center" label="发票状态">
+          <template slot-scope="scope">
+            {{
+              scope.row.invoiceStatus == 1
+                ? "未开票"
+                : scope.row.invoiceStatus == 2
+                ? "已开票"
+                : scope.row.invoiceStatus == -1
+                ? "已退票"
+                : ""
+            }}
+          </template>
         </el-table-column>
         <el-table-column align="center" header-align="center" label="操作">
-          <el-button
-            @click.native.prevent="deleteRow(scope.$index, tableData)"
-            type="text"
-            size="small"
-          >
-            查看
-          </el-button>
-          <el-button
-            @click.native.prevent="deleteRow(scope.$index, tableData)"
-            type="text"
-            size="small"
-          >
-            下载
-          </el-button>
+          <template slot-scope="scope">
+            <el-button
+              @click.native.prevent="showDetail(scope.row)"
+              type="text"
+              size="small"
+            >
+              查看
+            </el-button>
+            <el-button
+              v-if="
+                scope.row.periodStatus == 3 &&
+                (scope.row.invoiceStatus == 2 ||
+                  scope.row.invoiceStatus == -1) &&
+                scope.row.invoiceImg
+              "
+              @click.native.prevent="download(scope.row)"
+              type="text"
+              size="small"
+            >
+              下载
+            </el-button>
+          </template>
         </el-table-column>
       </el-table>
+
+      <div class="pagination">
+        <el-pagination
+          @current-change="currentChange"
+          background
+          layout="prev, pager, next"
+          :total="total"
+          :pager-count="5"
+        >
+        </el-pagination>
+      </div>
     </div>
+
+    <el-dialog
+      :title="$tools.timestampToTime(invoiceDetail.applyTime, false, false)"
+      :visible.sync="invoiceDetailModal"
+      custom-class="invoice-modal"
+    >
+      <el-descriptions title="发票申请信息" :column="2">
+        <el-descriptions-item label="发票类型"
+          ><span v-if="invoiceDetail.type == 1">普通发票</span>
+          <span v-if="invoiceDetail.type == 2"
+            >增值税专用发票</span
+          ></el-descriptions-item
+        >
+        <el-descriptions-item label="申请主体"
+          ><span v-if="invoiceDetail.subject == 1">个人</span>
+          <span v-if="invoiceDetail.subject == 2"
+            >企业</span
+          ></el-descriptions-item
+        >
+        <el-descriptions-item label="发票抬头">{{
+          invoiceDetail.invoiceTitle
+        }}</el-descriptions-item>
+
+        <template v-if="invoiceDetail.type == 2">
+          <el-descriptions-item label="纳税登记号">
+            {{ invoiceDetail.taxRegistryNumber || "" }}
+          </el-descriptions-item>
+          <el-descriptions-item label="单位地址">{{
+            invoiceDetail.companyAddress || ""
+          }}</el-descriptions-item
+          ><el-descriptions-item label="电话号码">{{
+            invoiceDetail.phone || ""
+          }}</el-descriptions-item
+          ><el-descriptions-item label="开户银行">{{
+            invoiceDetail.bankName || ""
+          }}</el-descriptions-item
+          ><el-descriptions-item label="银行账号">{{
+            invoiceDetail.bankAccount || ""
+          }}</el-descriptions-item
+          ><el-descriptions-item label="收件地址">{{
+            invoiceDetail.receivingAddress || ""
+          }}</el-descriptions-item
+          ><el-descriptions-item label="收件人">{{
+            invoiceDetail.receivingName || ""
+          }}</el-descriptions-item
+          ><el-descriptions-item label="收件手机">{{
+            invoiceDetail.receivingTel || ""
+          }}</el-descriptions-item
+          ><el-descriptions-item label="开票订单" :span="2">
+          </el-descriptions-item>
+        </template>
+      </el-descriptions>
+
+      <el-descriptions title="发票申请结果" :column="1">
+        <el-descriptions-item label="审核结果">
+          <span class="text wait" v-if="invoiceDetail.periodStatus == 1"
+            >待审核</span
+          >
+          <span class="text agree" v-if="invoiceDetail.periodStatus == 3"
+            >通过</span
+          >
+          <span class="text refuse" v-if="invoiceDetail.periodStatus == 2"
+            >驳回</span
+          >
+        </el-descriptions-item>
+        <el-descriptions-item label="审核反馈">{{
+          invoiceDetail.periodReason || ""
+        }}</el-descriptions-item>
+        <el-descriptions-item label="发票状态">
+          <span class="text refuse" v-if="invoiceDetail.invoiceStatus == 1"
+            >未开票</span
+          >
+          <span class="text agree" v-if="invoiceDetail.invoiceStatus == 2"
+            >已开票</span
+          >
+          <span class="text refuse" v-if="invoiceDetail.invoiceStatus == -1"
+            >已退票</span
+          >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="发票预览"
+          v-if="
+            invoiceDetail.periodStatus == 3 &&
+            (invoiceDetail.invoiceStatus == 2 ||
+              invoiceDetail.invoiceStatus == -1) &&
+            invoiceDetail.invoiceImg
+          "
+        >
+          <div class="preview-wrap">
+            <img
+              class="preview"
+              :src="$tools.splitImgHost(invoiceDetail.invoiceImg)"
+            />
+          </div>
+
+          <el-button type="primary" @click="download(invoiceDetail)"
+            >下载电子发票</el-button
+          >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="机构发票邮寄状态"
+          v-if="
+            invoiceDetail.periodStatus == 3 &&
+            (invoiceDetail.invoiceStatus == 2 ||
+              invoiceDetail.invoiceStatus == -1) &&
+            invoiceDetail.type == 2 &&
+            invoiceDetail.subject == 2
+          "
+        >
+          <span class="text" v-if="invoiceDetail.sendInvoice == 1">是</span>
+          <span class="text" v-else>否</span>
+        </el-descriptions-item>
+
+        <el-descriptions-item
+          label="发票邮寄快递单号：(点击可复制)"
+          v-if="
+            invoiceDetail.periodStatus == 3 &&
+            (invoiceDetail.invoiceStatus == 2 ||
+              invoiceDetail.invoiceStatus == -1) &&
+            invoiceDetail.sendInvoice == 1 &&
+            invoiceDetail.type == 2 &&
+            invoiceDetail.subject == 2
+          "
+        >
+          {{ invoiceDetail.trackingNum }}
+        </el-descriptions-item>
+      </el-descriptions>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button
+          @click="cancelApply(invoiceDetail)"
+          v-if="invoiceDetail.periodStatus == 1"
+          >撤销申请</el-button
+        >
+        <el-button type="primary" @click="invoiceDetailModal = false"
+          >知道了</el-button
+        >
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -65,37 +271,124 @@ export default {
   name: "MyInvoice",
   data() {
     return {
-      tableData: [
-        {
-          date: "2016-05-02",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄",
-        },
-        {
-          date: "2016-05-04",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1517 弄",
-        },
-        {
-          date: "2016-05-01",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1519 弄",
-        },
-        {
-          date: "2016-05-03",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1516 弄",
-        },
-      ],
+      invoiceDetail: {},
+      invoiceDetailModal: false,
+      tableData: [],
+      params: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      total: 0,
     };
   },
-  mounted() {},
+  mounted() {
+    this.orderInvoiceList();
+  },
   methods: {
+    cancelApply(row) {
+      const confirmText = [
+        "撤销申请后，",
+        "本次的发票申请内容将不存在。",
+        "请慎重考虑。",
+        "您确定要取消本次发票申请吗？",
+      ];
+      const newDatas = [];
+      const h = this.$createElement;
+      for (const i in confirmText) {
+        newDatas.push(h("p", null, confirmText[i]));
+      }
+      this.$confirm(h("div", null, newDatas), "温馨提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        closeOnClickModal: false,
+        closeOnPressEscape: false,
+        distinguishCancelAndClose: false,
+        showClose: false,
+      })
+        .then((_) => {
+          let invoiceDetail = JSON.parse(JSON.stringify(this.invoiceDetail));
+          invoiceDetail.status = -1;
+          this.$request.orderInvoiceCancel(invoiceDetail).then((res) => {
+            this.orderInvoiceList();
+            this.invoiceDetailModal = false;
+            this.$message({
+              type: "success",
+              message: "撤销成功",
+            });
+          });
+        })
+        .catch((_) => {
+          console.log(_);
+        });
+    },
     apply() {
       this.$router.push({
         path: "/person-center/my-invoice/add",
       });
     },
+
+    currentChange(e) {
+      this.params.pageNum = e;
+      this.orderInvoiceList();
+    },
+
+    orderInvoiceList() {
+      this.$request
+        .orderInvoiceList()
+        .then((res) => {
+          this.tableData = res.rows;
+          this.total = res.total;
+        })
+        .catch((err) => {
+          this.$message({
+            type: "error",
+            message: err.msg,
+          });
+        });
+    },
+
+    showDetail(row) {
+      this.invoiceDetail = row;
+      this.invoiceDetailModal = true;
+    },
+
+    download(row) {
+      let fileName =
+        row.invoiceImg.substring(row.invoiceImg.lastIndexOf("/")) +
+        new Date().valueOf();
+      let url = this.$tools.splitImgHost(row.invoiceImg);
+      let xhr = new XMLHttpRequest();
+      xhr.open("get", url, true);
+      xhr.setRequestHeader("Content-Type", `application/pdf`);
+      xhr.responseType = "blob";
+      let that = this;
+      xhr.onload = function () {
+        if (this.status == 200) {
+          //接受二进制文件流
+          var blob = this.response;
+          that.downloadExportFile(blob, fileName);
+        }
+      };
+      xhr.send();
+    },
+    downloadExportFile(blob, tagFileName) {
+      let downloadElement = document.createElement("a");
+      let href = blob;
+      if (typeof blob == "string") {
+        downloadElement.target = "_blank";
+      } else {
+        href = window.URL.createObjectURL(blob); //创建下载的链接
+      }
+      downloadElement.href = href;
+      downloadElement.download = tagFileName;
+      //下载后文件名
+      document.body.appendChild(downloadElement);
+      downloadElement.click(); //点击下载
+      document.body.removeChild(downloadElement); //下载完成移除元素
+      if (typeof blob != "string") {
+        window.URL.revokeObjectURL(href); //释放掉blob对象
+      }
+    },
   },
 };
 </script>
@@ -115,6 +408,31 @@ export default {
       box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.04);
       border-radius: 8px;
     }
+
+    .pagination {
+      padding: 30px 0;
+      text-align: center;
+    }
+  }
+
+  .invoice-modal {
+    .preview-wrap {
+      img {
+        max-width: 200px;
+      }
+    }
+
+    .text {
+      &.wait {
+        color: #007aff;
+      }
+      &.refuse {
+        color: #ff3b30;
+      }
+      &.agree {
+        color: #34c759;
+      }
+    }
   }
 }
 </style>

src/pages/subject/collect-bank.vue

@@ -0,0 +1,2063 @@
+<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__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>
+                          </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>
+                          </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" v-if="!explain">
+                            我的答案：{{ 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">收藏本题</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>
+                          </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>
+                          </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" v-if="!explain">
+                            我的答案：
+                            <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-if="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">收藏本题</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>
+                          </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>
+                          </div>
+                        </div>
+                        <div class="answer-list" v-if="question.ques">
+                          <div class="answer-list__left">
+                            正确答案：{{ ast[question.ans] }}
+                          </div>
+                          <div class="answer-list__left" v-if="!explain">
+                            我的答案：{{ 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">收藏本题</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>
+                                  </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>
+                                  </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"
+                                    v-if="!explain"
+                                  >
+                                    我的答案：{{
+                                      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>
+                                  </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>
+                                  </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"
+                                    v-if="!explain"
+                                  >
+                                    我的答案：
+                                    <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>
+                                  </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>
+                                  </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"
+                                    v-if="!explain"
+                                  >
+                                    我的答案：{{
+                                      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 }}、简答题
+                              </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) &&
+                                    !explain
+                                  "
+                                >
+                                  <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">收藏本题</div>
+                      </div>
+                    </div>
+                    <div
+                      class="question"
+                      v-if="question.type == 5 && current == questionIndex"
+                      :key="questionIndex"
+                    >
+                      <div class="question__title">
+                        {{ questionIndex }}、简答题
+                      </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) &&
+                            !explain
+                          "
+                        >
+                          <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">收藏本题</div>
+                      </div>
+                    </div>
+                  </template>
+                </div>
+
+                <div class="left-box__footer">
+                  <div class="btn" @click="prevQuestion">上一题</div>
+                  <div class="btn" @click="nextQuestion">下一题</div>
+                </div>
+              </div>
+              <div class="right-box">
+                <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 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),
+                            blue: isOver(item, index),
+                          }"
+                          @click="changeIndex(index)"
+                        >
+                          {{ index + 1 }}
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+                <div class="right-box__footer">
+                  <div class="submit" v-if="!explain" @click="submit">交卷</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 {
+      questionIndex: 0,
+      questionList: [],
+      bankList: [],
+      judge: ["错误", "正确"],
+      ast: ["A", "B", "C", "D", "E", "F", "G"],
+      current: 0,
+      examId: "",
+      explain: "",
+    };
+  },
+  async mounted() {
+    this.examId = this.$route.params.examId;
+    this.explain = this.$route.query.explain || "";
+    this.collectQuestionExamQuestionList();
+  },
+  methods: {
+    toFixed(num) {
+      if (num) {
+        let str = String(num).indexOf(".");
+
+        if (str != -1) {
+          return +num.toFixed(2);
+        } else {
+          return num;
+        }
+      } else {
+        return 0;
+      }
+    },
+
+    /**
+     * 请求题目列表
+     */
+    collectQuestionExamQuestionList() {
+      this.$request
+        .collectQuestionExamQuestionList({
+          examId: this.examId,
+        })
+        .then(async (res) => {
+          res.rows.forEach((item, index) => {
+            if (typeof item.jsonStr == "string") {
+              item.jsonStr = JSON.parse(item.jsonStr);
+
+              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;
+                if (this.explain) {
+                  item.ques = item.ans;
+                }
+                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%;"'
+                  ));
+                if (this.explain) {
+                  item.ques = {
+                    text: item.analysisContent,
+                    imageList: [],
+                  };
+
+                  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.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.ans = ansArr;
+                if (this.explain) {
+                  item.ques = item.ans;
+                }
+                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;
+              if (this.explain) {
+                item.ques = item.ans;
+              }
+            } else {
+              if (this.explain) {
+                item.ques = item.ans;
+              }
+            }
+          });
+
+          this.questionList = res.rows;
+        });
+    },
+
+    /**
+     * @param {Object}
+     * 单选点击确认
+     */
+    radioSelect(question, questionIndex, optionsId) {
+      if (this.questionList[questionIndex].ques) return;
+      this.$set(this.questionList[questionIndex], "ques", optionsId);
+
+      // 回答错误
+      if (
+        this.questionList[questionIndex].ques !=
+        this.questionList[questionIndex].ans
+      ) {
+      } else {
+        this.$request
+          .wrongRecordDelete({
+            examId: this.questionList[questionIndex].examId,
+            goodsId: this.questionList[questionIndex].goodsId,
+            questionId: this.questionList[questionIndex].questionId,
+          })
+          .then((res) => {});
+      }
+    },
+
+    /**
+     * @param {Object}
+     * 案例单选点击
+     */
+    radioSelectChild(questionIndex, jsonIndex, optionsId) {
+      if (this.questionList[questionIndex].ques[jsonIndex]) return;
+      this.$set(this.questionList[questionIndex].ques, jsonIndex, optionsId);
+    },
+    /**
+     * 多选点击确认
+     */
+    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);
+
+      let isWrong = this.questionList[questionIndex].ques.some(
+        (quesItem, quesIndex) => {
+          return (
+            this.questionList[questionIndex].ques[quesIndex] !=
+            this.questionList[questionIndex].ans[quesIndex]
+          );
+        }
+      );
+      // 回答错误
+      if (isWrong) {
+      } else {
+        let question = this.questionList.find(
+          (item) => item.questionId == this.questionList[bindex].questionId
+        );
+        if (question) {
+          this.$request
+            .wrongRecordDelete({
+              examId: question.examId,
+              goodsId: question.goodsId,
+              questionId: question.questionId,
+            })
+            .then((res) => {});
+        }
+      }
+    },
+    /**
+     * @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);
+    },
+    /**
+     * 判断点击确认
+     */
+    judgeSelect(question, questionIndex, index) {
+      if (question.ques) return;
+      this.$set(this.questionList[questionIndex], "ques", index + "");
+
+      // 回答错误
+      if (
+        this.questionList[questionIndex].ques !=
+        this.questionList[questionIndex].ans
+      ) {
+      } else {
+        this.$request
+          .wrongRecordDelete({
+            examId: this.questionList[questionIndex].examId,
+            goodsId: this.questionList[questionIndex].goodsId,
+            questionId: this.questionList[questionIndex].questionId,
+          })
+          .then((res) => {});
+      }
+    },
+    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 + "");
+    },
+
+    /**
+     * 上传图片
+     */
+    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;
+
+      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 ||
+          "",
+      });
+    },
+
+    changeIndex(index) {
+      this.current = index;
+    },
+    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--;
+      }
+    },
+    isRight(item, index) {
+      console.log(item);
+      //单选
+      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].ans.some((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;
+      }
+    },
+    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++;
+            }
+          }
+        } 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;
+    },
+    submit() {
+      this.$message({
+        type: "success",
+        message: "交卷成功",
+      });
+
+      setTimeout(() => {
+        this.$router.back(-1);
+      }, 2000);
+    },
+  },
+};
+</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 {
+          height: 800px;
+          border: 1px solid #eee;
+          .left-box {
+            float: left;
+            width: 970px;
+            border-right: 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 {
+              height: 720px;
+              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;
+                }
+
+                &__content {
+                  flex: 1;
+                  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;
+                  }
+
+                  /deep/ .el-tabs__item {
+                    padding: 0 20px !important;
+                    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: pre-wrap;
+                    }
+                  }
+
+                  .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: 300px;
+
+            &__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;
+            }
+
+            &__body {
+              height: 720px;
+              border-bottom: 1px solid #eee;
+
+              .card {
+                &__note {
+                  display: flex;
+                  height: 40px;
+                  align-items: center;
+                  border-bottom: 1px solid #eee;
+
+                  .item {
+                    display: flex;
+                    align-items: center;
+                    margin-left: 10px;
+
+                    .box {
+                      margin-right: 5px;
+                      width: 16px;
+                      height: 16px;
+                      border-radius: 4px;
+
+                      &.white {
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                      }
+
+                      &.green {
+                        background: #37c65b;
+                      }
+
+                      &.red {
+                        background: #ff3a30;
+                      }
+
+                      &.blue {
+                        background: #3f8dfd;
+                      }
+                    }
+                  }
+                }
+
+                &__content {
+                  height: 410px;
+                  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;
+                      }
+
+                      &.disabled {
+                        cursor: not-allowed;
+                        line-height: 38px;
+                        color: #eeeeee;
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+
+            &__footer {
+              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/subject/collect-type-bank.vue

@@ -0,0 +1,2063 @@
+<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__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>
+                          </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>
+                          </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" v-if="!explain">
+                            我的答案：{{ 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">收藏本题</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>
+                          </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>
+                          </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" v-if="!explain">
+                            我的答案：
+                            <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-if="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">收藏本题</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>
+                          </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>
+                          </div>
+                        </div>
+                        <div class="answer-list" v-if="question.ques">
+                          <div class="answer-list__left">
+                            正确答案：{{ ast[question.ans] }}
+                          </div>
+                          <div class="answer-list__left" v-if="!explain">
+                            我的答案：{{ 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">收藏本题</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>
+                                  </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>
+                                  </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"
+                                    v-if="!explain"
+                                  >
+                                    我的答案：{{
+                                      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>
+                                  </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>
+                                  </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"
+                                    v-if="!explain"
+                                  >
+                                    我的答案：
+                                    <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>
+                                  </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>
+                                  </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"
+                                    v-if="!explain"
+                                  >
+                                    我的答案：{{
+                                      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 }}、简答题
+                              </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) &&
+                                    !explain
+                                  "
+                                >
+                                  <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">收藏本题</div>
+                      </div>
+                    </div>
+                    <div
+                      class="question"
+                      v-if="question.type == 5 && current == questionIndex"
+                      :key="questionIndex"
+                    >
+                      <div class="question__title">
+                        {{ questionIndex }}、简答题
+                      </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) &&
+                            !explain
+                          "
+                        >
+                          <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">收藏本题</div>
+                      </div>
+                    </div>
+                  </template>
+                </div>
+
+                <div class="left-box__footer">
+                  <div class="btn" @click="prevQuestion">上一题</div>
+                  <div class="btn" @click="nextQuestion">下一题</div>
+                </div>
+              </div>
+              <div class="right-box">
+                <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 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),
+                            blue: isOver(item, index),
+                          }"
+                          @click="changeIndex(index)"
+                        >
+                          {{ index + 1 }}
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+                <div class="right-box__footer">
+                  <div class="submit" @click="submit" v-if="!explain">交卷</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 {
+      questionIndex: 0,
+      questionList: [],
+      bankList: [],
+      judge: ["错误", "正确"],
+      ast: ["A", "B", "C", "D", "E", "F", "G"],
+      current: 0,
+      type: "",
+      explain: "",
+    };
+  },
+  async mounted() {
+    this.type = this.$route.params.type;
+    this.explain = this.$route.query.explain || "";
+    this.goodsCollectList();
+  },
+  methods: {
+    toFixed(num) {
+      if (num) {
+        let str = String(num).indexOf(".");
+
+        if (str != -1) {
+          return +num.toFixed(2);
+        } else {
+          return num;
+        }
+      } else {
+        return 0;
+      }
+    },
+
+    /**
+     * 请求题目列表
+     */
+    goodsCollectList() {
+      this.$request
+        .goodsCollectList({
+          type: this.type,
+        })
+        .then(async (res) => {
+          res.rows.forEach((item, index) => {
+            if (typeof item.jsonStr == "string") {
+              item.jsonStr = JSON.parse(item.jsonStr);
+
+              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;
+                if (this.explain) {
+                  item.ques = item.ans;
+                }
+                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%;"'
+                  ));
+                if (this.explain) {
+                  item.ques = {
+                    text: item.analysisContent,
+                    imageList: [],
+                  };
+
+                  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.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.ans = ansArr;
+                if (this.explain) {
+                  item.ques = item.ans;
+                }
+                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;
+              if (this.explain) {
+                item.ques = item.ans;
+              }
+            } else {
+              if (this.explain) {
+                item.ques = item.ans;
+              }
+            }
+          });
+
+          this.questionList = res.rows;
+        });
+    },
+
+    /**
+     * @param {Object}
+     * 单选点击确认
+     */
+    radioSelect(question, questionIndex, optionsId) {
+      if (this.questionList[questionIndex].ques) return;
+      this.$set(this.questionList[questionIndex], "ques", optionsId);
+
+      // 回答错误
+      if (
+        this.questionList[questionIndex].ques !=
+        this.questionList[questionIndex].ans
+      ) {
+      } else {
+        this.$request
+          .wrongRecordDelete({
+            examId: this.questionList[questionIndex].examId,
+            goodsId: this.questionList[questionIndex].goodsId,
+            questionId: this.questionList[questionIndex].questionId,
+          })
+          .then((res) => {});
+      }
+    },
+
+    /**
+     * @param {Object}
+     * 案例单选点击
+     */
+    radioSelectChild(questionIndex, jsonIndex, optionsId) {
+      if (this.questionList[questionIndex].ques[jsonIndex]) return;
+      this.$set(this.questionList[questionIndex].ques, jsonIndex, optionsId);
+    },
+    /**
+     * 多选点击确认
+     */
+    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);
+
+      let isWrong = this.questionList[questionIndex].ques.some(
+        (quesItem, quesIndex) => {
+          return (
+            this.questionList[questionIndex].ques[quesIndex] !=
+            this.questionList[questionIndex].ans[quesIndex]
+          );
+        }
+      );
+      // 回答错误
+      if (isWrong) {
+      } else {
+        let question = this.questionList.find(
+          (item) => item.questionId == this.questionList[bindex].questionId
+        );
+        if (question) {
+          this.$request
+            .wrongRecordDelete({
+              examId: question.examId,
+              goodsId: question.goodsId,
+              questionId: question.questionId,
+            })
+            .then((res) => {});
+        }
+      }
+    },
+    /**
+     * @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);
+    },
+    /**
+     * 判断点击确认
+     */
+    judgeSelect(question, questionIndex, index) {
+      if (question.ques) return;
+      this.$set(this.questionList[questionIndex], "ques", index + "");
+
+      // 回答错误
+      if (
+        this.questionList[questionIndex].ques !=
+        this.questionList[questionIndex].ans
+      ) {
+      } else {
+        this.$request
+          .wrongRecordDelete({
+            examId: this.questionList[questionIndex].examId,
+            goodsId: this.questionList[questionIndex].goodsId,
+            questionId: this.questionList[questionIndex].questionId,
+          })
+          .then((res) => {});
+      }
+    },
+    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 + "");
+    },
+
+    /**
+     * 上传图片
+     */
+    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;
+
+      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 ||
+          "",
+      });
+    },
+
+    changeIndex(index) {
+      this.current = index;
+    },
+    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--;
+      }
+    },
+    isRight(item, index) {
+      console.log(item);
+      //单选
+      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].ans.some((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;
+      }
+    },
+    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++;
+            }
+          }
+        } 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;
+    },
+    submit() {
+      this.$message({
+        type: "success",
+        message: "交卷成功",
+      });
+
+      setTimeout(() => {
+        this.$router.back(-1);
+      }, 2000);
+    },
+  },
+};
+</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 {
+          height: 800px;
+          border: 1px solid #eee;
+          .left-box {
+            float: left;
+            width: 970px;
+            border-right: 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 {
+              height: 720px;
+              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;
+                }
+
+                &__content {
+                  flex: 1;
+                  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;
+                  }
+
+                  /deep/ .el-tabs__item {
+                    padding: 0 20px !important;
+                    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: pre-wrap;
+                    }
+                  }
+
+                  .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: 300px;
+
+            &__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;
+            }
+
+            &__body {
+              height: 720px;
+              border-bottom: 1px solid #eee;
+
+              .card {
+                &__note {
+                  display: flex;
+                  height: 40px;
+                  align-items: center;
+                  border-bottom: 1px solid #eee;
+
+                  .item {
+                    display: flex;
+                    align-items: center;
+                    margin-left: 10px;
+
+                    .box {
+                      margin-right: 5px;
+                      width: 16px;
+                      height: 16px;
+                      border-radius: 4px;
+
+                      &.white {
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                      }
+
+                      &.green {
+                        background: #37c65b;
+                      }
+
+                      &.red {
+                        background: #ff3a30;
+                      }
+
+                      &.blue {
+                        background: #3f8dfd;
+                      }
+                    }
+                  }
+                }
+
+                &__content {
+                  height: 410px;
+                  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;
+                      }
+
+                      &.disabled {
+                        cursor: not-allowed;
+                        line-height: 38px;
+                        color: #eeeeee;
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+
+            &__footer {
+              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/subject/wrong-bank.vue

@@ -0,0 +1,2063 @@
+<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__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>
+                          </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>
+                          </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" v-if="!explain">
+                            我的答案：{{ 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">收藏本题</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>
+                          </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>
+                          </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" v-if="!explain">
+                            我的答案：
+                            <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-if="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">收藏本题</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>
+                          </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>
+                          </div>
+                        </div>
+                        <div class="answer-list" v-if="question.ques">
+                          <div class="answer-list__left">
+                            正确答案：{{ ast[question.ans] }}
+                          </div>
+                          <div class="answer-list__left" v-if="!explain">
+                            我的答案：{{ 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">收藏本题</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>
+                                  </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>
+                                  </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"
+                                    v-if="!explain"
+                                  >
+                                    我的答案：{{
+                                      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>
+                                  </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>
+                                  </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"
+                                    v-if="!explain"
+                                  >
+                                    我的答案：
+                                    <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>
+                                  </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>
+                                  </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"
+                                    v-if="!explain"
+                                  >
+                                    我的答案：{{
+                                      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 }}、简答题
+                              </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) &&
+                                    !explain
+                                  "
+                                >
+                                  <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">收藏本题</div>
+                      </div>
+                    </div>
+                    <div
+                      class="question"
+                      v-if="question.type == 5 && current == questionIndex"
+                      :key="questionIndex"
+                    >
+                      <div class="question__title">
+                        {{ questionIndex }}、简答题
+                      </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) &&
+                            !explain
+                          "
+                        >
+                          <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">收藏本题</div>
+                      </div>
+                    </div>
+                  </template>
+                </div>
+
+                <div class="left-box__footer">
+                  <div class="btn" @click="prevQuestion">上一题</div>
+                  <div class="btn" @click="nextQuestion">下一题</div>
+                </div>
+              </div>
+              <div class="right-box">
+                <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 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),
+                            blue: isOver(item, index),
+                          }"
+                          @click="changeIndex(index)"
+                        >
+                          {{ index + 1 }}
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+                <div class="right-box__footer">
+                  <div class="submit" v-if="!explain" @click="submit">交卷</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 {
+      questionIndex: 0,
+      questionList: [],
+      bankList: [],
+      judge: ["错误", "正确"],
+      ast: ["A", "B", "C", "D", "E", "F", "G"],
+      current: 0,
+      examId: "",
+      explain: "",
+    };
+  },
+  async mounted() {
+    this.examId = this.$route.params.examId;
+    this.explain = this.$route.query.explain || "";
+    this.wrongRecordExamQuestionList();
+  },
+  methods: {
+    toFixed(num) {
+      if (num) {
+        let str = String(num).indexOf(".");
+
+        if (str != -1) {
+          return +num.toFixed(2);
+        } else {
+          return num;
+        }
+      } else {
+        return 0;
+      }
+    },
+
+    /**
+     * 请求题目列表
+     */
+    wrongRecordExamQuestionList() {
+      this.$request
+        .wrongRecordExamQuestionList({
+          examId: this.examId,
+        })
+        .then(async (res) => {
+          res.rows.forEach((item, index) => {
+            if (typeof item.jsonStr == "string") {
+              item.jsonStr = JSON.parse(item.jsonStr);
+
+              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;
+                if (this.explain) {
+                  item.ques = item.ans;
+                }
+                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%;"'
+                  ));
+                if (this.explain) {
+                  item.ques = {
+                    text: item.analysisContent,
+                    imageList: [],
+                  };
+
+                  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.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.ans = ansArr;
+                if (this.explain) {
+                  item.ques = item.ans;
+                }
+                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;
+              if (this.explain) {
+                item.ques = item.ans;
+              }
+            } else {
+              if (this.explain) {
+                item.ques = item.ans;
+              }
+            }
+          });
+
+          this.questionList = res.rows;
+        });
+    },
+
+    /**
+     * @param {Object}
+     * 单选点击确认
+     */
+    radioSelect(question, questionIndex, optionsId) {
+      if (this.questionList[questionIndex].ques) return;
+      this.$set(this.questionList[questionIndex], "ques", optionsId);
+
+      // 回答错误
+      if (
+        this.questionList[questionIndex].ques !=
+        this.questionList[questionIndex].ans
+      ) {
+      } else {
+        this.$request
+          .wrongRecordDelete({
+            examId: this.questionList[questionIndex].examId,
+            goodsId: this.questionList[questionIndex].goodsId,
+            questionId: this.questionList[questionIndex].questionId,
+          })
+          .then((res) => {});
+      }
+    },
+
+    /**
+     * @param {Object}
+     * 案例单选点击
+     */
+    radioSelectChild(questionIndex, jsonIndex, optionsId) {
+      if (this.questionList[questionIndex].ques[jsonIndex]) return;
+      this.$set(this.questionList[questionIndex].ques, jsonIndex, optionsId);
+    },
+    /**
+     * 多选点击确认
+     */
+    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);
+
+      let isWrong = this.questionList[questionIndex].ques.some(
+        (quesItem, quesIndex) => {
+          return (
+            this.questionList[questionIndex].ques[quesIndex] !=
+            this.questionList[questionIndex].ans[quesIndex]
+          );
+        }
+      );
+      // 回答错误
+      if (isWrong) {
+      } else {
+        let question = this.questionList.find(
+          (item) => item.questionId == this.questionList[bindex].questionId
+        );
+        if (question) {
+          this.$request
+            .wrongRecordDelete({
+              examId: question.examId,
+              goodsId: question.goodsId,
+              questionId: question.questionId,
+            })
+            .then((res) => {});
+        }
+      }
+    },
+    /**
+     * @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);
+    },
+    /**
+     * 判断点击确认
+     */
+    judgeSelect(question, questionIndex, index) {
+      if (question.ques) return;
+      this.$set(this.questionList[questionIndex], "ques", index + "");
+
+      // 回答错误
+      if (
+        this.questionList[questionIndex].ques !=
+        this.questionList[questionIndex].ans
+      ) {
+      } else {
+        this.$request
+          .wrongRecordDelete({
+            examId: this.questionList[questionIndex].examId,
+            goodsId: this.questionList[questionIndex].goodsId,
+            questionId: this.questionList[questionIndex].questionId,
+          })
+          .then((res) => {});
+      }
+    },
+    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 + "");
+    },
+
+    /**
+     * 上传图片
+     */
+    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;
+
+      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 ||
+          "",
+      });
+    },
+
+    changeIndex(index) {
+      this.current = index;
+    },
+    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--;
+      }
+    },
+    isRight(item, index) {
+      console.log(item);
+      //单选
+      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].ans.some((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;
+      }
+    },
+    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++;
+            }
+          }
+        } 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;
+    },
+    submit() {
+      this.$message({
+        type: "success",
+        message: "交卷成功",
+      });
+
+      setTimeout(() => {
+        this.$router.back(-1);
+      }, 2000);
+    },
+  },
+};
+</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 {
+          height: 800px;
+          border: 1px solid #eee;
+          .left-box {
+            float: left;
+            width: 970px;
+            border-right: 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 {
+              height: 720px;
+              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;
+                }
+
+                &__content {
+                  flex: 1;
+                  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;
+                  }
+
+                  /deep/ .el-tabs__item {
+                    padding: 0 20px !important;
+                    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: pre-wrap;
+                    }
+                  }
+
+                  .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: 300px;
+
+            &__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;
+            }
+
+            &__body {
+              height: 720px;
+              border-bottom: 1px solid #eee;
+
+              .card {
+                &__note {
+                  display: flex;
+                  height: 40px;
+                  align-items: center;
+                  border-bottom: 1px solid #eee;
+
+                  .item {
+                    display: flex;
+                    align-items: center;
+                    margin-left: 10px;
+
+                    .box {
+                      margin-right: 5px;
+                      width: 16px;
+                      height: 16px;
+                      border-radius: 4px;
+
+                      &.white {
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                      }
+
+                      &.green {
+                        background: #37c65b;
+                      }
+
+                      &.red {
+                        background: #ff3a30;
+                      }
+
+                      &.blue {
+                        background: #3f8dfd;
+                      }
+                    }
+                  }
+                }
+
+                &__content {
+                  height: 410px;
+                  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;
+                      }
+
+                      &.disabled {
+                        cursor: not-allowed;
+                        line-height: 38px;
+                        color: #eeeeee;
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+
+            &__footer {
+              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/subject/wrong-type-bank.vue

@@ -0,0 +1,2054 @@
+<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__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>
+                          </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>
+                          </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" v-if="!explain">
+                            我的答案：{{ 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">收藏本题</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>
+                          </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>
+                          </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" v-if="!explain">
+                            我的答案：
+                            <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-if="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">收藏本题</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>
+                          </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>
+                          </div>
+                        </div>
+                        <div class="answer-list" v-if="question.ques">
+                          <div class="answer-list__left">
+                            正确答案：{{ ast[question.ans] }}
+                          </div>
+                          <div class="answer-list__left" v-if="!explain">
+                            我的答案：{{ 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">收藏本题</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>
+                                  </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>
+                                  </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"
+                                    v-if="!explain"
+                                  >
+                                    我的答案：{{
+                                      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>
+                                  </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>
+                                  </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"
+                                    v-if="!explain"
+                                  >
+                                    我的答案：
+                                    <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>
+                                  </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>
+                                  </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"
+                                    v-if="!explain"
+                                  >
+                                    我的答案：{{
+                                      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 }}、简答题
+                              </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) &&
+                                    !explain
+                                  "
+                                >
+                                  <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">收藏本题</div>
+                      </div>
+                    </div>
+                    <div
+                      class="question"
+                      v-if="question.type == 5 && current == questionIndex"
+                      :key="questionIndex"
+                    >
+                      <div class="question__title">
+                        {{ questionIndex }}、简答题
+                      </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) &&
+                            !explain
+                          "
+                        >
+                          <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">收藏本题</div>
+                      </div>
+                    </div>
+                  </template>
+                </div>
+
+                <div class="left-box__footer">
+                  <div class="btn" @click="prevQuestion">上一题</div>
+                  <div class="btn" @click="nextQuestion">下一题</div>
+                </div>
+              </div>
+              <div class="right-box">
+                <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 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),
+                            blue: isOver(item, index),
+                          }"
+                          @click="changeIndex(index)"
+                        >
+                          {{ index + 1 }}
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+                <div class="right-box__footer">
+                  <div class="submit" @click="submit" v-if="!explain">交卷</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 {
+      questionIndex: 0,
+      questionList: [],
+      bankList: [],
+      judge: ["错误", "正确"],
+      ast: ["A", "B", "C", "D", "E", "F", "G"],
+      current: 0,
+      type: "",
+      explain: "",
+    };
+  },
+  async mounted() {
+    this.type = this.$route.params.type;
+    this.explain = this.$route.query.explain || "";
+    this.wrongRecordTypeQuestionList();
+  },
+  methods: {
+    toFixed(num) {
+      if (num) {
+        let str = String(num).indexOf(".");
+
+        if (str != -1) {
+          return +num.toFixed(2);
+        } else {
+          return num;
+        }
+      } else {
+        return 0;
+      }
+    },
+
+    /**
+     * 请求题目列表
+     */
+    wrongRecordTypeQuestionList() {
+      this.$request
+        .wrongRecordTypeQuestionList({
+          type: this.type,
+        })
+        .then(async (res) => {
+          res.rows.forEach((item, index) => {
+            if (typeof item.jsonStr == "string") {
+              item.jsonStr = JSON.parse(item.jsonStr);
+
+              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;
+                if (this.explain) {
+                  item.ques = item.ans;
+                }
+                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%;"'
+                  ));
+                if (this.explain) {
+                  item.ques = {
+                    text: item.analysisContent,
+                    imageList: [],
+                  };
+
+                  return;
+                }
+              } else if (item.type == 4) {
+                //案例题
+                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.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.ans = ansArr;
+                if (this.explain) {
+                  item.ques = item.ans;
+                }
+                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;
+              if (this.explain) {
+                item.ques = item.ans;
+              }
+            } else {
+              if (this.explain) {
+                item.ques = item.ans;
+              }
+            }
+          });
+
+          this.questionList = res.rows;
+        });
+    },
+
+    /**
+     * @param {Object}
+     * 单选点击确认
+     */
+    radioSelect(question, questionIndex, optionsId) {
+      if (this.questionList[questionIndex].ques) return;
+      this.$set(this.questionList[questionIndex], "ques", optionsId);
+
+      // 回答错误
+      if (
+        this.questionList[questionIndex].ques !=
+        this.questionList[questionIndex].ans
+      ) {
+      } else {
+        this.$request
+          .wrongRecordDelete({
+            examId: this.questionList[questionIndex].examId,
+            goodsId: this.questionList[questionIndex].goodsId,
+            questionId: this.questionList[questionIndex].questionId,
+          })
+          .then((res) => {});
+      }
+    },
+
+    /**
+     * @param {Object}
+     * 案例单选点击
+     */
+    radioSelectChild(questionIndex, jsonIndex, optionsId) {
+      if (this.questionList[questionIndex].ques[jsonIndex]) return;
+      this.$set(this.questionList[questionIndex].ques, jsonIndex, optionsId);
+    },
+    /**
+     * 多选点击确认
+     */
+    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);
+
+      let isWrong = this.questionList[questionIndex].ques.some(
+        (quesItem, quesIndex) => {
+          return (
+            this.questionList[questionIndex].ques[quesIndex] !=
+            this.questionList[questionIndex].ans[quesIndex]
+          );
+        }
+      );
+      // 回答错误
+      if (isWrong) {
+      } else {
+        let question = this.questionList.find(
+          (item) => item.questionId == this.questionList[bindex].questionId
+        );
+        if (question) {
+          this.$request
+            .wrongRecordDelete({
+              examId: question.examId,
+              goodsId: question.goodsId,
+              questionId: question.questionId,
+            })
+            .then((res) => {});
+        }
+      }
+    },
+    /**
+     * @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);
+    },
+    /**
+     * 判断点击确认
+     */
+    judgeSelect(question, questionIndex, index) {
+      if (question.ques) return;
+      this.$set(this.questionList[questionIndex], "ques", index + "");
+
+      // 回答错误
+      if (
+        this.questionList[questionIndex].ques !=
+        this.questionList[questionIndex].ans
+      ) {
+      } else {
+        this.$request
+          .wrongRecordDelete({
+            examId: this.questionList[questionIndex].examId,
+            goodsId: this.questionList[questionIndex].goodsId,
+            questionId: this.questionList[questionIndex].questionId,
+          })
+          .then((res) => {});
+      }
+    },
+    judgeSelectChild(questionIndex, jsonIndex, index) {
+      if (this.questionList[questionIndex].ques[jsonIndex]) return;
+      this.$set(this.questionList[questionIndex].ques, jsonIndex, index + "");
+    },
+
+    /**
+     * 上传图片
+     */
+    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)
+              ) {
+                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;
+    },
+    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 ||
+          "",
+      });
+    },
+
+    changeIndex(index) {
+      this.current = index;
+    },
+    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--;
+      }
+    },
+    isRight(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].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].ans.some((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;
+      }
+    },
+    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++;
+            }
+          }
+        } 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;
+    },
+    submit() {
+      this.$message({
+        type: "success",
+        message: "交卷成功",
+      });
+
+      setTimeout(() => {
+        this.$router.back(-1);
+      }, 2000);
+    },
+  },
+};
+</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 {
+          height: 800px;
+          border: 1px solid #eee;
+          .left-box {
+            float: left;
+            width: 970px;
+            border-right: 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 {
+              height: 720px;
+              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;
+                }
+
+                &__content {
+                  flex: 1;
+                  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;
+                  }
+
+                  /deep/ .el-tabs__item {
+                    padding: 0 20px !important;
+                    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: pre-wrap;
+                    }
+                  }
+
+                  .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: 300px;
+
+            &__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;
+            }
+
+            &__body {
+              height: 720px;
+              border-bottom: 1px solid #eee;
+
+              .card {
+                &__note {
+                  display: flex;
+                  height: 40px;
+                  align-items: center;
+                  border-bottom: 1px solid #eee;
+
+                  .item {
+                    display: flex;
+                    align-items: center;
+                    margin-left: 10px;
+
+                    .box {
+                      margin-right: 5px;
+                      width: 16px;
+                      height: 16px;
+                      border-radius: 4px;
+
+                      &.white {
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                      }
+
+                      &.green {
+                        background: #37c65b;
+                      }
+
+                      &.red {
+                        background: #ff3a30;
+                      }
+
+                      &.blue {
+                        background: #3f8dfd;
+                      }
+                    }
+                  }
+                }
+
+                &__content {
+                  height: 410px;
+                  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;
+                      }
+
+                      &.disabled {
+                        cursor: not-allowed;
+                        line-height: 38px;
+                        color: #eeeeee;
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+
+            &__footer {
+              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/router/index.js

@@ -88,12 +88,42 @@ const router =  new Router({
       name: '继续做题',
       component: resolve => require(['@/pages/bank-exam-continue/index'],resolve)
     },
-    
+    {
+      path: '/bank-exam-all-explain/:recordId',
+      name: '全部解析',
+      component: resolve => require(['@/pages/bank-exam-all-explain/index'],resolve)
+    },
+    {
+      path: '/bank-exam-wrong-explain/:recordId',
+      name: '错题解析',
+      component: resolve => require(['@/pages/bank-exam-wrong-explain/index'],resolve)
+    },
     {
       path: '/bank-exam-explain/:goodsId',
-      name: '上次做题记录',
+      name: '题目解析',
       component: resolve => require(['@/pages/bank-exam-explain/index'],resolve)
     },
+    
+    {
+      path: '/subject/wrong-type-bank/:type',
+      name: '错题',
+      component: resolve => require(['@/pages/subject/wrong-type-bank'],resolve)
+    },
+    {
+      path: '/subject/wrong-bank/:examId',
+      name: '错题',
+      component: resolve => require(['@/pages/subject/wrong-bank'],resolve)
+    },
+    {
+      path: '/subject/collect-type-bank/:type',
+      name: '收藏',
+      component: resolve => require(['@/pages/subject/collect-type-bank'],resolve)
+    },
+    {
+      path: '/subject/collect-bank/:examId',
+      name: '收藏',
+      component: resolve => require(['@/pages/subject/collect-bank'],resolve)
+    },
     {
       path: '/person-center',
       name: '个人中心',
@@ -114,7 +144,7 @@ const router =  new Router({
       children:[
         {
           path: '/',
-          redirect: 'my-course',
+          // redirect: 'my-course',
         },
         {
           path: 'my-course',