对接做题

src/apis/bank.js

@@ -88,4 +88,74 @@ export default {
 			data: data
 		})
 	},
+
+  bankExamExamList(data) {
+		return request({
+			url: '/bank/exam/exam/list',
+			method: 'get',
+			params: data,
+		})
+	},
+
+  examRecordCount(data) {
+		return request({
+			url: '/exam/record/count',
+			data:data,
+			params: 'GET',
+		})
+	},
+
+  getExamDetail(data) {
+		return request({
+			url: '/bank/exam/'+data,
+			method: 'get',
+			params: data
+		})
+	},
+
+  examRecord(data) {
+		return request({
+			url: '/exam/record',
+			data:data,
+			method: 'POST',
+		})
+	},
+
+  examRecordEdit(data) {
+		return request({
+			url: '/exam/record/edit',
+			data:data,
+			method: 'POST',
+		})
+	},
+
+  examWrongRecord(data) {
+		return request({
+			url: '/exam/wwrong/record',
+			data:data,
+			method: 'POST',
+		})
+	},
+
+  examWrongRecordWrongNum(data) {
+		return request({
+			url:`/exam/wwrong/record/wrongNum/${data}`,
+			method: 'get'
+		})
+	},
+
+  bankExamNextExam(data) {
+		return request({
+			url: '/bank/exam/nextExam',
+			params:data,
+			method: 'get',
+		})
+	},
+
+  examReport(data) {
+		return request({
+			url: '/exam/record/'+data,
+			method: 'get',
+		})
+	},
 }

src/pages/bank-exam-continue/index.vue

@@ -0,0 +1,2660 @@
+<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">
+                            我的答案：{{ 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">
+                            我的答案：
+                            <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">
+                            我的答案：{{ 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">
+                                    我的答案：{{
+                                      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">
+                                    我的答案：
+                                    <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">
+                                    我的答案：{{
+                                      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)
+                                  "
+                                >
+                                  <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
+                          "
+                        >
+                          <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">交卷</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </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>
+
+<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 {
+      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,
+    };
+  },
+  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.goodsQuestionList();
+    this.bankExam();
+  },
+  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;
+      }
+    },
+    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();
+      });
+    },
+    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}
+     * 单选点击确认
+     */
+    radioSelect(question, questionIndex, optionsId) {
+      if (this.questionList[questionIndex].ques) return;
+      this.$set(this.questionList[questionIndex], "ques", optionsId);
+    },
+
+    /**
+     * @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);
+    },
+    /**
+     * @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 + "");
+    },
+    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) {
+      //单选
+      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;
+    },
+    submit() {
+      let ansCount = this.questionOverNum(true); //已答题数
+      this.lastCount = this.questionList.length - ansCount; //统计未答完的题数
+      //没有答完
+      if (this.lastCount !== 0) {
+        this.$confirm(
+          `您还有${this.lastCount}道题未作答， 现在继续作答，还是下次继续？`,
+          "提示",
+          {
+            confirmButtonText: "立即交卷",
+            cancelButtonText: "继续做题",
+            closeOnClickModal: false,
+            closeOnPressEscape: false,
+            distinguishCancelAndClose: false,
+            showClose: false,
+          }
+        )
+          .then((_) => {
+            this.examSubmit();
+          })
+          .catch((_) => {});
+        return;
+      }
+
+      if (this.bankType == 2) {
+        if (this.lastTime > 0) {
+          let lastTime = this.countdown(this.lastTime);
+          this.$confirm(`时间还剩余${lastTime},确定交卷吗?`, "提示", {
+            confirmButtonText: "交卷",
+            cancelButtonText: "继续答题",
+            closeOnClickModal: false,
+            closeOnPressEscape: false,
+            distinguishCancelAndClose: false,
+            showClose: false,
+          })
+            .then((_) => {
+              this.examSubmit();
+            })
+            .catch((_) => {});
+          return;
+        }
+      }
+
+      this.examSubmit();
+    },
+    /**
+     * @param {Object} second倒计时过滤器
+     */
+    countdown(second) {
+      if (second) {
+        let h = parseInt((second / 60 / 60) % 24); //   计算小时
+        let m = parseInt((second / 60) % 60); //   计算分数
+        let s = parseInt(second % 60); //   计算当前秒数
+
+        if (h < 10) h = "0" + h;
+        if (m < 10) m = "0" + m;
+        if (s < 10) s = "0" + s;
+
+        return h + ":" + m + ":" + s;
+      } else {
+        return "";
+      }
+    },
+    examSubmit() {
+      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; //做对的题目数量
+      let doQuestionNum = 0; //做过的题目数量
+      let allScore = 0; //总分
+      let passScore = 0;
+      let doWrongQuestionIds = []; //错题和未做题id(客观题)
+      let doQuestionIds = []; //做过的题目id
+      let rightQuestionIds = []; //做对的题目id
+      this.questionList.forEach((item, index) => {
+        passScore = item.passScore;
+        if (item.type == 1) {
+          //正确
+          if (item.ques == item.ans) {
+            item.scoreResult = item.score;
+            score += item.score;
+            number++;
+            rightQuestionIds.push(item.questionId);
+          } else {
+            //错误
+            item.scoreResult = 0;
+            doWrongQuestionIds.push(item.questionId);
+          }
+          allScore += item.score;
+          if (item.ques) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item.type == 2) {
+          let isRight =
+            item.ans &&
+            item.ans.every((quesItem, quesIndex) => {
+              if (item.ques) {
+                return item.ques[quesIndex] == item.ans[quesIndex];
+              } else {
+                return false;
+              }
+            });
+
+          if (isRight) {
+            score += item.score;
+            number++;
+            item.scoreResult = item.score;
+            rightQuestionIds.push(item.questionId);
+          } else {
+            let checkboxScore = item.score; //获取单题总分数
+            item.ques &&
+              item.ques.forEach((ques, quesIndex) => {
+                //选错一个全扣
+                if (item.ques) {
+                  if (item.ans.indexOf(item.ques[quesIndex]) == -1) {
+                    checkboxScore = 0;
+                  }
+                } else {
+                  checkboxScore = 0;
+                }
+              });
+            console.log(checkboxScore);
+
+            //没选错
+            if (checkboxScore) {
+              item.ans.forEach((ans, quesIndex) => {
+                //漏选扣一部分
+                if (item.ques) {
+                  if (item.ques.indexOf(item.ans[quesIndex]) == -1) {
+                    checkboxScore = item.partScore;
+                  }
+                } else {
+                  checkboxScore = 0;
+                }
+              });
+            }
+
+            if (checkboxScore <= 0) {
+              //0分
+              item.scoreResult = 0;
+              doWrongQuestionIds.push(item.questionId);
+            } else {
+              //部分分
+              // number++;
+              doWrongQuestionIds.push(item.questionId);
+              item.scoreResult = checkboxScore;
+              score += checkboxScore;
+              // rightQuestionIds.push(item.questionId)
+            }
+          }
+          allScore += item.score;
+          if (item.ques && item.ques.length) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item.type == 3) {
+          if (item.ques == item.ans) {
+            item.scoreResult = item.score;
+            score += item.score;
+            number++;
+            rightQuestionIds.push(item.questionId);
+          } else {
+            item.scoreResult = 0;
+            doWrongQuestionIds.push(item.questionId);
+          }
+          allScore += item.score;
+          if (item.ques) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item.type == 4) {
+          allScore += item.score;
+          if (item.ques && item.ques.length) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item.type == 5) {
+          allScore += item.score;
+          if (item.ques && (item.ques.imageList || item.ques.text)) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        }
+      });
+
+      //大于分及格
+      if (score >= passScore) {
+        reportStatus = 1;
+      } else {
+        reportStatus = 0;
+      }
+
+      clearInterval(this.timer);
+      //交卷
+      this.$request
+        .bankRecordEdit({
+          moduleId: this.moduleId || 0,
+          chapterId: this.chapterId || 0,
+          gradeId: this.gradeId,
+          examId: this.examId,
+          goodsId: this.goodsId,
+          reportStatus: reportStatus,
+          recordId: this.recordId,
+          courseId: this.courseId,
+          rightQuestionNum: number,
+          status: 1,
+          doQuestionIds: doQuestionIds.join(","),
+          // rightQuestionIds:rightQuestionIds.join(','),
+          // doQuestionNum: doQuestionNum,
+          performance: score,
+          totalScore: allScore,
+          // examTime: parseInt(this.allTimes),
+          // doTime: parseInt(this.allTimes) - parseInt(this.lastTime),
+          // historyExamJson: JSON.stringify(this.questionList)
+        })
+        .then((res) => {
+          this.isSubmit = true;
+          this.$message({
+            type: "success",
+            message: "交卷成功",
+          });
+
+          setTimeout(() => {
+            let result = {
+              rightQuestionNum: number,
+              doWrongQuestionNum: doWrongQuestionIds.length,
+              score: score,
+              totalScore: allScore,
+              reportStatus: reportStatus,
+            };
+
+            this.setExamResult(result);
+            this.$router.replace({
+              path: "/bank-report",
+            });
+          }, 1000);
+        })
+        .catch((err) => {
+          console.log(err, "err");
+        });
+    },
+  },
+};
+</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-explain/index.vue

@@ -0,0 +1,2660 @@
+<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">
+                            我的答案：{{ 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">
+                            我的答案：
+                            <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">
+                            我的答案：{{ 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">
+                                    我的答案：{{
+                                      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">
+                                    我的答案：
+                                    <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">
+                                    我的答案：{{
+                                      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)
+                                  "
+                                >
+                                  <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
+                          "
+                        >
+                          <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">交卷</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </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>
+
+<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 {
+      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,
+    };
+  },
+  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.goodsQuestionList();
+    this.bankExam();
+  },
+  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;
+      }
+    },
+    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();
+      });
+    },
+    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}
+     * 单选点击确认
+     */
+    radioSelect(question, questionIndex, optionsId) {
+      if (this.questionList[questionIndex].ques) return;
+      this.$set(this.questionList[questionIndex], "ques", optionsId);
+    },
+
+    /**
+     * @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);
+    },
+    /**
+     * @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 + "");
+    },
+    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) {
+      //单选
+      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;
+    },
+    submit() {
+      let ansCount = this.questionOverNum(true); //已答题数
+      this.lastCount = this.questionList.length - ansCount; //统计未答完的题数
+      //没有答完
+      if (this.lastCount !== 0) {
+        this.$confirm(
+          `您还有${this.lastCount}道题未作答， 现在继续作答，还是下次继续？`,
+          "提示",
+          {
+            confirmButtonText: "立即交卷",
+            cancelButtonText: "继续做题",
+            closeOnClickModal: false,
+            closeOnPressEscape: false,
+            distinguishCancelAndClose: false,
+            showClose: false,
+          }
+        )
+          .then((_) => {
+            this.examSubmit();
+          })
+          .catch((_) => {});
+        return;
+      }
+
+      if (this.bankType == 2) {
+        if (this.lastTime > 0) {
+          let lastTime = this.countdown(this.lastTime);
+          this.$confirm(`时间还剩余${lastTime},确定交卷吗?`, "提示", {
+            confirmButtonText: "交卷",
+            cancelButtonText: "继续答题",
+            closeOnClickModal: false,
+            closeOnPressEscape: false,
+            distinguishCancelAndClose: false,
+            showClose: false,
+          })
+            .then((_) => {
+              this.examSubmit();
+            })
+            .catch((_) => {});
+          return;
+        }
+      }
+
+      this.examSubmit();
+    },
+    /**
+     * @param {Object} second倒计时过滤器
+     */
+    countdown(second) {
+      if (second) {
+        let h = parseInt((second / 60 / 60) % 24); //   计算小时
+        let m = parseInt((second / 60) % 60); //   计算分数
+        let s = parseInt(second % 60); //   计算当前秒数
+
+        if (h < 10) h = "0" + h;
+        if (m < 10) m = "0" + m;
+        if (s < 10) s = "0" + s;
+
+        return h + ":" + m + ":" + s;
+      } else {
+        return "";
+      }
+    },
+    examSubmit() {
+      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; //做对的题目数量
+      let doQuestionNum = 0; //做过的题目数量
+      let allScore = 0; //总分
+      let passScore = 0;
+      let doWrongQuestionIds = []; //错题和未做题id(客观题)
+      let doQuestionIds = []; //做过的题目id
+      let rightQuestionIds = []; //做对的题目id
+      this.questionList.forEach((item, index) => {
+        passScore = item.passScore;
+        if (item.type == 1) {
+          //正确
+          if (item.ques == item.ans) {
+            item.scoreResult = item.score;
+            score += item.score;
+            number++;
+            rightQuestionIds.push(item.questionId);
+          } else {
+            //错误
+            item.scoreResult = 0;
+            doWrongQuestionIds.push(item.questionId);
+          }
+          allScore += item.score;
+          if (item.ques) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item.type == 2) {
+          let isRight =
+            item.ans &&
+            item.ans.every((quesItem, quesIndex) => {
+              if (item.ques) {
+                return item.ques[quesIndex] == item.ans[quesIndex];
+              } else {
+                return false;
+              }
+            });
+
+          if (isRight) {
+            score += item.score;
+            number++;
+            item.scoreResult = item.score;
+            rightQuestionIds.push(item.questionId);
+          } else {
+            let checkboxScore = item.score; //获取单题总分数
+            item.ques &&
+              item.ques.forEach((ques, quesIndex) => {
+                //选错一个全扣
+                if (item.ques) {
+                  if (item.ans.indexOf(item.ques[quesIndex]) == -1) {
+                    checkboxScore = 0;
+                  }
+                } else {
+                  checkboxScore = 0;
+                }
+              });
+            console.log(checkboxScore);
+
+            //没选错
+            if (checkboxScore) {
+              item.ans.forEach((ans, quesIndex) => {
+                //漏选扣一部分
+                if (item.ques) {
+                  if (item.ques.indexOf(item.ans[quesIndex]) == -1) {
+                    checkboxScore = item.partScore;
+                  }
+                } else {
+                  checkboxScore = 0;
+                }
+              });
+            }
+
+            if (checkboxScore <= 0) {
+              //0分
+              item.scoreResult = 0;
+              doWrongQuestionIds.push(item.questionId);
+            } else {
+              //部分分
+              // number++;
+              doWrongQuestionIds.push(item.questionId);
+              item.scoreResult = checkboxScore;
+              score += checkboxScore;
+              // rightQuestionIds.push(item.questionId)
+            }
+          }
+          allScore += item.score;
+          if (item.ques && item.ques.length) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item.type == 3) {
+          if (item.ques == item.ans) {
+            item.scoreResult = item.score;
+            score += item.score;
+            number++;
+            rightQuestionIds.push(item.questionId);
+          } else {
+            item.scoreResult = 0;
+            doWrongQuestionIds.push(item.questionId);
+          }
+          allScore += item.score;
+          if (item.ques) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item.type == 4) {
+          allScore += item.score;
+          if (item.ques && item.ques.length) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item.type == 5) {
+          allScore += item.score;
+          if (item.ques && (item.ques.imageList || item.ques.text)) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        }
+      });
+
+      //大于分及格
+      if (score >= passScore) {
+        reportStatus = 1;
+      } else {
+        reportStatus = 0;
+      }
+
+      clearInterval(this.timer);
+      //交卷
+      this.$request
+        .bankRecordEdit({
+          moduleId: this.moduleId || 0,
+          chapterId: this.chapterId || 0,
+          gradeId: this.gradeId,
+          examId: this.examId,
+          goodsId: this.goodsId,
+          reportStatus: reportStatus,
+          recordId: this.recordId,
+          courseId: this.courseId,
+          rightQuestionNum: number,
+          status: 1,
+          doQuestionIds: doQuestionIds.join(","),
+          // rightQuestionIds:rightQuestionIds.join(','),
+          // doQuestionNum: doQuestionNum,
+          performance: score,
+          totalScore: allScore,
+          // examTime: parseInt(this.allTimes),
+          // doTime: parseInt(this.allTimes) - parseInt(this.lastTime),
+          // historyExamJson: JSON.stringify(this.questionList)
+        })
+        .then((res) => {
+          this.isSubmit = true;
+          this.$message({
+            type: "success",
+            message: "交卷成功",
+          });
+
+          setTimeout(() => {
+            let result = {
+              rightQuestionNum: number,
+              doWrongQuestionNum: doWrongQuestionIds.length,
+              score: score,
+              totalScore: allScore,
+              reportStatus: reportStatus,
+            };
+
+            this.setExamResult(result);
+            this.$router.replace({
+              path: "/bank-report",
+            });
+          }, 1000);
+        })
+        .catch((err) => {
+          console.log(err, "err");
+        });
+    },
+  },
+};
+</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

@@ -0,0 +1,2468 @@
+<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">
+                            我的答案：{{ 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">
+                            我的答案：
+                            <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">
+                            我的答案：{{ 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">
+                                    我的答案：{{
+                                      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">
+                                    我的答案：
+                                    <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">
+                                    我的答案：{{
+                                      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)
+                                  "
+                                >
+                                  <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
+                          "
+                        >
+                          <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">交卷</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <ToolBar></ToolBar>
+    <Footer></Footer>
+  </div>
+</template>
+
+<script>
+import Footer from "@/components/footer/index";
+import Header from "@/components/header/index";
+import ToolBar from "@/components/toolbar/index";
+import { mapMutations } from "vuex";
+export default {
+  name: "BankExplain",
+  components: {
+    Footer,
+    Header,
+    ToolBar,
+  },
+  data() {
+    return {
+      recordId: 0,
+      tabIndex: "1",
+      textarea: "",
+      questionIndex: 0,
+      checked: false,
+      activeName: "1",
+      questionList: [],
+      goodsExamConfig: [],
+      goodsDetail: {},
+      bankList: [],
+      judge: ["错误", "正确"],
+      ast: ["A", "B", "C", "D", "E", "F", "G"],
+      needPhoto: false,
+      lastTime: 0, //剩余考试时长
+      allTimes: 0, //总考试时长
+      lastCount: 0,
+      examId: 0,
+      goodsId: 0,
+      moduleId: 0,
+      chapterId: 0,
+      current: 0,
+      bankType: 0,
+      timer: null,
+      examData: {},
+    };
+  },
+  async mounted() {
+    this.goodsId = this.$route.params.goodsId;
+    this.examId = this.$route.query.examId;
+    this.moduleId = this.$route.query.moduleId;
+    this.chapterId = this.$route.query.chapterId;
+
+    await this.bankExam();
+    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;
+      }
+    },
+
+    /**
+     * 请求题目列表
+     */
+    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();
+        });
+    },
+
+    /**
+     * 记录总题数,获取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
+          .examRecord({
+            chapterExamId: this.chapterId || 0,
+            moduleExamId: this.moduleId || 0,
+            examId: this.examId,
+            goodsId: this.goodsId,
+            totalQuestionNum: questionList,
+            allQuestionNum: this.questionList.length,
+          })
+          .then((res) => {
+            this.recordId = res.data;
+
+            if (this.bankType == 1) {
+              this.examRecordEdit();
+            }
+          });
+      });
+    },
+
+    examRecordEdit() {
+      let number = 0;
+      let score = 0;
+      let doQuestionNum = 0;
+      let doQuestionIds = []; //做过的题目id
+      this.questionList.forEach((item, index) => {
+        if (item.type == 1) {
+          if (item.ques == item.ans) {
+            score += item.score;
+            number++;
+          }
+
+          if (item.ques) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item.type == 2) {
+          let isRight =
+            item.ans &&
+            item.ans.every((quesItem, quesIndex) => {
+              if (item.ques) {
+                return item.ques[quesIndex] == item.ans[quesIndex];
+              } else {
+                return false;
+              }
+            });
+
+          if (isRight) {
+            score += item.score;
+            number++;
+          } else {
+            let checkboxScore = item.score; //获取单题总分数
+            item.ques &&
+              item.ques.forEach((ques, quesIndex) => {
+                //选错一个全扣
+                if (item.ques) {
+                  if (item.ans.indexOf(item.ques[quesIndex]) == -1) {
+                    checkboxScore = 0;
+                  }
+                } else {
+                  checkboxScore = 0;
+                }
+              });
+            console.log(checkboxScore);
+
+            //没选错
+            if (checkboxScore) {
+              item.ans.forEach((ans, quesIndex) => {
+                //漏选扣一部分
+                if (item.ques) {
+                  if (item.ques.indexOf(item.ans[quesIndex]) == -1) {
+                    checkboxScore = item.partScore;
+                  }
+                } else {
+                  checkboxScore = 0;
+                }
+              });
+            }
+
+            if (checkboxScore <= 0) {
+              //0分
+            } else {
+              //部分分
+              // number++;
+              score += checkboxScore;
+            }
+          }
+          if (item.ques && item.ques.length) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item.type == 3) {
+          if (item.ques == item.ans) {
+            score += item.score;
+            number++;
+          }
+
+          if (item.ques) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item == 4) {
+          if (item.ques.length) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item.type == 5) {
+          if (item.ques && (item.ques.imageList.length || item.ques.text)) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        }
+      });
+
+      this.$request
+        .examRecordEdit({
+          examId: this.examId,
+          goodsId: this.goodsId,
+          recordId: this.recordId,
+          doQuestionIds: doQuestionIds.join(","),
+          rightQuestionNum: number,
+          moduleExamId: this.moduleId || 0,
+          chapterExamId: this.chapterId || 0,
+          status: 0,
+          doQuestionNum: doQuestionNum,
+          historyExamJson: JSON.stringify(this.questionList),
+        })
+        .then((res) => {});
+    },
+
+    /**
+     * 获取试卷类型2考试,1练习
+     */
+    bankExam() {
+      return new Promise((resolve) => {
+        this.$request.bankExam(this.examId).then((res) => {
+          this.bankType = res.data.doType;
+          this.examData = res.data;
+          if (this.bankType == 2) {
+            this.needBack = true;
+          }
+
+          resolve();
+        });
+      });
+    },
+    /**
+     * @param {Object}
+     * 单选点击确认
+     */
+    radioSelect(question, questionIndex, optionsId) {
+      if (this.questionList[questionIndex].ques) return;
+      this.$set(this.questionList[questionIndex], "ques", optionsId);
+
+      if (
+        this.questionList[questionIndex].ques !=
+        this.questionList[questionIndex].ans
+      ) {
+        this.$request
+          .examWrongRecord({
+            examId: this.examId,
+            goodsId: this.goodsId,
+            moduleExamId: this.moduleId || 0,
+            chapterExamId: this.chapterId || 0,
+            questionIds: [this.questionList[questionIndex].questionId],
+            recordId: this.recordId,
+          })
+          .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) {
+        this.$request
+          .examWrongRecord({
+            examId: this.examId,
+            goodsId: this.goodsId,
+            moduleExamId: this.moduleId || 0,
+            chapterExamId: this.chapterId || 0,
+            questionIds: [this.questionList[questionIndex].questionId],
+            recordId: this.recordId,
+          })
+          .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
+      ) {
+        this.$request
+          .examWrongRecord({
+            examId: this.examId,
+            goodsId: this.goodsId,
+            moduleExamId: this.moduleId || 0,
+            chapterExamId: this.chapterId || 0,
+            questionIds: [this.questionList[questionIndex].questionId],
+            recordId: this.recordId,
+          })
+          .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++;
+              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;
+    },
+    submit() {
+      let ansCount = this.questionOverNum(true); //已答题数
+      this.lastCount = this.questionList.length - ansCount; //统计未答完的题数
+      //没有答完
+      if (this.lastCount !== 0) {
+        this.$confirm(
+          `您还有${this.lastCount}道题未作答， 现在继续作答，还是下次继续？`,
+          "提示",
+          {
+            confirmButtonText: "立即交卷",
+            cancelButtonText: "继续做题",
+            closeOnClickModal: false,
+            closeOnPressEscape: false,
+            distinguishCancelAndClose: false,
+            showClose: false,
+          }
+        )
+          .then((_) => {
+            this.examSubmit();
+          })
+          .catch((_) => {});
+        return;
+      }
+
+      if (this.bankType == 2) {
+        if (this.lastTime > 0) {
+          let lastTime = this.countdown(this.lastTime);
+          this.$confirm(`时间还剩余${lastTime},确定交卷吗?`, "提示", {
+            confirmButtonText: "交卷",
+            cancelButtonText: "继续答题",
+            closeOnClickModal: false,
+            closeOnPressEscape: false,
+            distinguishCancelAndClose: false,
+            showClose: false,
+          })
+            .then((_) => {
+              this.examSubmit();
+            })
+            .catch((_) => {});
+          return;
+        }
+      }
+
+      this.examSubmit();
+    },
+    /**
+     * @param {Object} second倒计时过滤器
+     */
+    countdown(second) {
+      if (second) {
+        let h = parseInt((second / 60 / 60) % 24); //   计算小时
+        let m = parseInt((second / 60) % 60); //   计算分数
+        let s = parseInt(second % 60); //   计算当前秒数
+
+        if (h < 10) h = "0" + h;
+        if (m < 10) m = "0" + m;
+        if (s < 10) s = "0" + s;
+
+        return h + ":" + m + ":" + s;
+      } else {
+        return "";
+      }
+    },
+    examSubmit() {
+      let score = 0; //计算总分
+      let reportStatus = 0;
+      let number = 0; //做对的题目数量
+      let doQuestionNum = 0; //做过的题目数量
+      let allScore = 0; //总分
+      let passScore = 0;
+      let doWrongQuestionIds = []; //错题和未做题id(客观题)
+      let doQuestionIds = []; //做过的题目id
+      let rightQuestionIds = []; //做对的题目id
+      this.questionList.forEach((item, index) => {
+        passScore = item.passScore;
+        if (item.type == 1) {
+          //正确
+          if (item.ques == item.ans) {
+            item.scoreResult = item.score;
+            score += item.score;
+            number++;
+            rightQuestionIds.push(item.questionId);
+          } else {
+            //错误
+            item.scoreResult = 0;
+            doWrongQuestionIds.push(item.questionId);
+          }
+          allScore += item.score;
+          if (item.ques) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item.type == 2) {
+          let isRight =
+            item.ans &&
+            item.ans.every((quesItem, quesIndex) => {
+              if (item.ques) {
+                return item.ques[quesIndex] == item.ans[quesIndex];
+              } else {
+                return false;
+              }
+            });
+
+          if (isRight) {
+            score += item.score;
+            number++;
+            item.scoreResult = item.score;
+            rightQuestionIds.push(item.questionId);
+          } else {
+            let checkboxScore = item.score; //获取单题总分数
+            item.ques &&
+              item.ques.forEach((ques, quesIndex) => {
+                //选错一个全扣
+                if (item.ques) {
+                  if (item.ans.indexOf(item.ques[quesIndex]) == -1) {
+                    checkboxScore = 0;
+                  }
+                } else {
+                  checkboxScore = 0;
+                }
+              });
+            console.log(checkboxScore);
+
+            //没选错
+            if (checkboxScore) {
+              item.ans.forEach((ans, quesIndex) => {
+                //漏选扣一部分
+                if (item.ques) {
+                  if (item.ques.indexOf(item.ans[quesIndex]) == -1) {
+                    checkboxScore = item.partScore;
+                  }
+                } else {
+                  checkboxScore = 0;
+                }
+              });
+            }
+
+            if (checkboxScore <= 0) {
+              //0分
+              item.scoreResult = 0;
+              doWrongQuestionIds.push(item.questionId);
+            } else {
+              //部分分
+              // number++;
+              doWrongQuestionIds.push(item.questionId);
+              item.scoreResult = checkboxScore;
+              score += checkboxScore;
+              // rightQuestionIds.push(item.questionId)
+            }
+          }
+          allScore += item.score;
+          if (item.ques && item.ques.length) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item.type == 3) {
+          if (item.ques == item.ans) {
+            item.scoreResult = item.score;
+            score += item.score;
+            number++;
+            rightQuestionIds.push(item.questionId);
+          } else {
+            item.scoreResult = 0;
+            doWrongQuestionIds.push(item.questionId);
+          }
+          allScore += item.score;
+          if (item.ques) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item.type == 4) {
+          allScore += item.score;
+          if (item.ques && item.ques.length) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        } else if (item.type == 5) {
+          allScore += item.score;
+          if (item.ques && (item.ques.imageList.length || item.ques.text)) {
+            doQuestionNum++;
+            doQuestionIds.push(item.questionId);
+          }
+        }
+      });
+
+      //大于及格
+      if (score >= passScore) {
+        reportStatus = 1;
+      } else {
+        reportStatus = 0;
+      }
+
+      setTimeout(() => {
+        let result = {
+          chapterId: this.chapterId,
+          moduleId: this.moduleId,
+          examId: this.examId,
+          recordId: this.recordId,
+        };
+
+        this.setExamResult(result);
+        this.$router.push({
+          path: "/bank-report/" + this.goodsId,
+        });
+      }, 1000);
+      return;
+      //交卷
+      this.$request
+        .examRecordEdit({
+          examId: this.examId,
+          goodsId: this.goodsId,
+          reportStatus: reportStatus,
+          recordId: this.recordId,
+          rightQuestionNum: number,
+          status: 1,
+          moduleExamId: this.moduleId || 0,
+          chapterExamId: this.chapterId || 0,
+          doQuestionIds: doQuestionIds.join(","),
+          rightQuestionIds: rightQuestionIds.join(","),
+          doQuestionNum: doQuestionNum,
+          performance: score,
+          totalScore: allScore,
+          examTime: parseInt(this.allTimes),
+          doTime: parseInt(this.allTimes) - parseInt(this.lastTime),
+          historyExamJson: JSON.stringify(this.questionList),
+        })
+        .then((res) => {
+          this.isSubmit = true;
+          this.$message({
+            type: "success",
+            message: "交卷成功",
+          });
+
+          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);
+        });
+
+      //错题集id提交（客观题）
+      this.$request
+        .examWrongRecord({
+          examId: this.examId,
+          goodsId: this.goodsId,
+          questionIds: doWrongQuestionIds,
+          recordId: this.recordId,
+        })
+        .then((res) => {});
+    },
+  },
+};
+</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-report/index.vue

@@ -0,0 +1,524 @@
+<template>
+  <div class="bank-report">
+    <Header></Header>
+    <section class="section">
+      <div class="container">
+        <div
+          class="section__header section__header--warm"
+          v-if="!reportdata.reportStatus"
+        >
+          <div class="title">
+            <span class="icon">X</span>
+            测试未通过
+          </div>
+          <div class="desc" v-if="reportdata.doTime">
+            答题时长：{{ reportdata.doTime }}分钟
+            <span class="note">(限时{{ reportdata.examTime }}分钟)</span>
+          </div>
+        </div>
+        <div
+          class="section__header section__header--success"
+          v-if="reportdata.reportStatus"
+        >
+          <div class="title">
+            <span class="icon">✔</span>
+            测试通过
+          </div>
+          <div class="desc" v-if="reportdata.doTime">
+            答题时长：{{ reportdata.doTime }}分钟
+            <span class="note">(限时{{ reportdata.examTime }}分钟)</span>
+          </div>
+        </div>
+
+        <div class="section__body">
+          <div class="section__body__content">
+            <div class="left-box">
+              <div class="left-box__in">
+                <div class="title">
+                  试卷得分
+                  <span class="note">（客观题）</span>
+                </div>
+                <div class="desc">{{ reportdata.performance }}</div>
+                <div class="other">满分{{ reportdata.totalScore }}</div>
+              </div>
+              <div class="left-box__in left-box__in--bottom">
+                <div class="title">
+                  试卷得分
+                  <span class="note">（客观题+主观题）</span>
+                </div>
+                <div class="desc">
+                  {{ reportdata.performance + reportdata.score }}
+                </div>
+                <div class="other">满分{{ reportdata.totalScore }}</div>
+              </div>
+            </div>
+            <div class="right-box">
+              <div class="right-box__in">
+                <div class="title">
+                  试卷得分
+                  <span class="note">（客观题）</span>
+                </div>
+                <div class="desc">{{ reportdata.performance }}</div>
+                <div class="other">满分{{ reportdata.totalScore }}</div>
+              </div>
+              <div class="right-box__in right-box__in--bottom">
+                <div class="child">
+                  <div class="child__title child__title--success">
+                    {{ reportdata.rightQuestionNum }}
+                  </div>
+                  <div class="child__desc">正确题数</div>
+                </div>
+                <div class="child child---right">
+                  <div class="child__title child__title--warm">
+                    {{ wrongRecordWrongNum }}
+                  </div>
+                  <div class="child__desc">错误题数</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="section__footer">
+          <el-button type="primary" @click="back" class="btn"
+            >返回列表</el-button
+          >
+          <el-button
+            type="primary"
+            class="btn"
+            v-if="nextExamId"
+            @click="backBank"
+            >练习下一节</el-button
+          >
+          <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>
+        </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 { mapGetters } from "vuex";
+export default {
+  name: "BankExplain",
+  components: {
+    Footer,
+    Header,
+    ToolBar,
+  },
+  data() {
+    return {
+      wrongRecordWrongNum: 0,
+      nextExamId: "",
+      examData: {},
+      reportdata: {},
+      goodsId: 0,
+    };
+  },
+  computed: {
+    ...mapGetters(["examResult"]),
+  },
+  async mounted() {
+    if (JSON.stringify(this.examResult) == "{}") {
+      this.$router.back(-1);
+    }
+
+    this.goodsId = this.$route.params.goodsId;
+
+    this.examWrongRecordWrongNum();
+    this.bankExamNextExam();
+    await this.bankExam();
+    await this.examReport();
+  },
+  methods: {
+    back() {
+      this.$router.replace({
+        path: "/person-center/my-bank/bank-detail/" + this.goodsId,
+      });
+    },
+    /**
+     * 去做题
+     */
+    async doRepeat(reportdata) {
+      // await this.getDetail(reportdata.goodsId);
+      let count = await this.examRecordCount(
+        reportdata.examId,
+        reportdata.goodsId
+      );
+      let answerNum = await this.getExamDetail(reportdata.examId);
+      //超过答题次数
+      if (answerNum > 0 && count >= answerNum) {
+        this.$message({
+          type: "warning",
+          message: "该试卷只能答题" + answerNum + "次!",
+        });
+        return;
+      }
+
+      this.$router.replace({
+        path: "/bank-exam/" + reportdata.goodsId,
+        query: {
+          examId: reportdata.examId,
+          moduleId: reportdata.moduleId || 0,
+          chapterId: reportdata.chapterId || 0,
+        },
+      });
+    },
+
+    /**
+     * @param {Object} exam_id
+     * 获取试卷可以做的次数
+     */
+    getExamDetail(exam_id) {
+      return new Promise((resolve) => {
+        this.$request.getExamDetail(exam_id).then((res) => {
+          resolve(res.data.answerNum);
+        });
+      });
+    },
+
+    /**
+     * 查询试卷历史做题次数
+     */
+    examRecordCount(examId, goodsId) {
+      return new Promise((resolve) => {
+        this.$request
+          .examRecordCount({
+            examId: examId,
+            goodsId: goodsId,
+          })
+          .then((res) => {
+            resolve(res.data);
+          });
+      });
+    },
+    getDetail(goodsId) {
+      return new Promise((resolve) => {
+        this.$request.goodsDetail(goodsId).then((res) => {
+          this.goodsData = res.data;
+          resolve();
+        });
+      });
+    },
+    examWrongRecordWrongNum() {
+      return new Promise((resolve) => {
+        this.$request
+          .examWrongRecordWrongNum(this.examResult.recordId)
+          .then((res) => {
+            this.wrongRecordWrongNum = res.data || 0;
+            resolve();
+          });
+      });
+    },
+
+    backBank() {
+      this.$router.replace({
+        path: "/bank-exam/" + this.nextExamId,
+        query: {
+          examId: this.examResult.examId,
+          moduleId: this.examResult.moduleId || 0,
+          chapterId: this.examResult.chapterId || 0,
+        },
+      });
+    },
+
+    bankExamNextExam() {
+      this.$request
+        .bankExamNextExam({
+          chapterExamId: this.examResult.chapterId,
+          examId: this.examResult.examId,
+          goodsId: this.goodsId,
+          moduleExamId: this.examResult.moduleId,
+        })
+        .then((res) => {
+          this.nextExamId = res.data.examId;
+        })
+        .catch((err) => {
+          this.nextExamId = "";
+        });
+    },
+
+    bankExam() {
+      return new Promise((resolve) => {
+        this.$request.bankExam(this.examResult.examId).then((res) => {
+          this.examData = res.data;
+          resolve();
+        });
+      });
+    },
+
+    examReport() {
+      return new Promise((resolve) => {
+        this.$request.examReport(this.examResult.recordId).then((res) => {
+          this.reportdata = res.data;
+          resolve();
+        });
+      });
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.bank-report {
+  .section {
+    &__header {
+      height: 120px;
+      border-radius: 0px;
+      padding-top: 10px;
+
+      &--warm {
+        background: #fff3f5;
+        .title {
+          text-align: center;
+          font-size: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          color: #ff3b30;
+
+          .icon {
+            vertical-align: middle;
+            display: inline-block;
+            width: 48px;
+            height: 58px;
+            text-align: center;
+            line-height: 58px;
+            background: #ff3b30;
+            color: #fff;
+            font-size: 30px;
+          }
+        }
+      }
+
+      &--success {
+        background: #f8fef9;
+        .title {
+          text-align: center;
+          font-size: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          color: #34c759;
+
+          .icon {
+            vertical-align: middle;
+            display: inline-block;
+            width: 48px;
+            height: 58px;
+            text-align: center;
+            line-height: 58px;
+            background: #34c759;
+            color: #fff;
+            font-size: 30px;
+          }
+        }
+      }
+
+      .desc {
+        margin-top: 20px;
+        text-align: center;
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #333333;
+
+        .note {
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #999999;
+        }
+      }
+    }
+
+    &__body {
+      width: 100%;
+      height: 305px;
+      border-bottom: 1px solid #eee;
+
+      &__content {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .left-box {
+          width: 300px;
+          height: 240px;
+          background: #ffffff;
+          border: 1px solid #eeeeee;
+          border-radius: 8px;
+          display: flex;
+          flex-direction: column;
+          margin: 0 10px;
+
+          &__in {
+            flex: 1;
+            border-bottom: 1px solid #eee;
+            padding: 5px 18px;
+
+            .title {
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #333333;
+              line-height: 24px;
+
+              .note {
+                color: #999;
+              }
+            }
+
+            .desc {
+              margin-top: 20px;
+              font-size: 48px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #333333;
+              line-height: 24px;
+              text-align: center;
+            }
+
+            .other {
+              margin-top: 14px;
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #999999;
+              line-height: 24px;
+              text-align: center;
+            }
+
+            &--bottom {
+              border: 0;
+            }
+          }
+        }
+
+        .right-box {
+          margin: 0 10px;
+          display: flex;
+          width: 300px;
+          height: 240px;
+          background: #ffffff;
+          border: 1px solid #eeeeee;
+          border-radius: 8px;
+          flex-direction: column;
+
+          &__in {
+            flex: 1;
+            border-bottom: 1px solid #eee;
+            padding: 5px 18px;
+
+            .title {
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #333333;
+              line-height: 24px;
+
+              .note {
+                color: #999;
+              }
+            }
+
+            .desc {
+              margin-top: 20px;
+              font-size: 48px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #333333;
+              line-height: 24px;
+              text-align: center;
+            }
+
+            .other {
+              margin-top: 14px;
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #999999;
+              line-height: 24px;
+              text-align: center;
+            }
+
+            &--bottom {
+              padding: 0;
+              border: 0;
+              height: 100%;
+              display: flex;
+              .child {
+                flex: 1;
+                height: 100%;
+                border-right: 1px solid #eee;
+                padding: 5px 18px;
+
+                &--right {
+                  border: 0;
+                }
+
+                &__title {
+                  margin-top: 20px;
+                  font-size: 36px;
+                  font-family: Microsoft YaHei;
+                  font-weight: 400;
+                  color: #34c759;
+                  line-height: 24px;
+                  text-align: center;
+
+                  &--success {
+                    color: #34c759;
+                  }
+
+                  &--warm {
+                    color: #ff3b30;
+                  }
+                }
+
+                &__desc {
+                  margin-top: 10px;
+                  font-size: 14px;
+                  font-family: Microsoft YaHei;
+                  font-weight: 400;
+                  color: #999999;
+                  line-height: 24px;
+                  text-align: center;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &__footer {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 40px 0;
+
+      .btn {
+        cursor: pointer;
+        width: 140px;
+        height: 32px;
+        padding: 0;
+        border-radius: 16px;
+        text-align: center;
+        line-height: 30px;
+        font-size: 12px;
+        margin: 0 4px;
+      }
+    }
+  }
+}
+</style>

src/pages/goods-detail/course-detail copy.vue

@@ -1,1300 +0,0 @@
-<template>
-  <div class="goods-detail">
-    <Header></Header>
-    <section class="section">
-      <div class="container">
-        <div class="section__header">
-          <div class="container">
-            <el-breadcrumb separator="/">
-              <el-breadcrumb-item :to="{ path: '/index' }"
-                >首页</el-breadcrumb-item
-              >
-              <el-breadcrumb-item>商品详情</el-breadcrumb-item>
-            </el-breadcrumb>
-          </div>
-        </div>
-        <div class="section__body">
-          <div class="container">
-            <div class="goods-info">
-              <div class="goods-info__header">
-                <div class="img"></div>
-                <div class="text">
-                  <div class="title">
-                    {{ goodsDetail.goodsName }}
-                  </div>
-                  <div class="notes">
-                    <div class="note">
-                      共
-                      {{ courseList.length }}科
-                    </div>
-                    <div class="note">{{ goodsDetail.classHours }} 学时</div>
-                  </div>
-                  <div class="price" v-if="goodsDetail.standPrice">
-                    ${{ goodsDetail.standPrice | toFixed }}
-                  </div>
-                  <div class="btns">
-                    <div class="buynow">立即购买</div>
-                    <div class="add" @click="addCart()">加入购物车</div>
-                  </div>
-                </div>
-              </div>
-              <div class="goods-info__body">
-                <el-tabs v-model="activeName">
-                  <el-tab-pane label="课程详情" name="1">
-                    <div v-html="goodsDetail.pcDetailHtml"></div>
-                  </el-tab-pane>
-                  <el-tab-pane label="章节目录" name="2">
-                    <div class="goods-menu clearfix">
-                      <div class="left-box">
-                        <div class="left-box__header">
-                          <swiper
-                            ref="mySwiper"
-                            @slideChangeTransitionStart="
-                              slideChangeTransitionStart($event)
-                            "
-                            class=""
-                            v-bind:options="swiperOptions"
-                          >
-                            <swiper-slide class="item canlearn">
-                              可试看课程名称
-                            </swiper-slide>
-                            <swiper-slide
-                              class="item"
-                              v-for="(item, index) in 5"
-                              v-bind:key="index"
-                            >
-                              不可试看课程名称
-                            </swiper-slide>
-                          </swiper>
-                          <!-- <div
-                            class="swiper-button-prev"
-                            slot="button-prev"
-                          ></div> -->
-                          <div
-                            class="swiper-button-next"
-                            slot="button-next"
-                          ></div>
-                        </div>
-                        <div class="left-box__body">
-                          <div
-                            class="item"
-                            v-for="(item, index) in 4"
-                            :key="index"
-                          >
-                            <div class="item__title">
-                              这是课程的第一个模块标题
-
-                              <a class="note" @click="videoModalShow = true"
-                                >试看</a
-                              >
-                            </div>
-                            <div class="item__content">
-                              <el-tree
-                                class="tree"
-                                :highlight-current="false"
-                                :data="data"
-                                :props="defaultProps"
-                                @node-click="handleNodeClick"
-                              ></el-tree>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div class="right-box">
-                        <div class="title">
-                          推荐题库
-                          <span class="more">更多></span>
-                        </div>
-                        <ul class="list">
-                          <li
-                            class="course-item"
-                            v-for="(item, index) in 5"
-                            :key="index"
-                            @click="goodsDetail()"
-                          >
-                            <div class="course-item__img">
-                              <div class="note">2022</div>
-                            </div>
-                            <div class="course-item__title">
-                              2022年二建建设工程法规及相关知识（黄金基础班）
-                            </div>
-                            <div class="course-item__desc">
-                              <div class="price">￥100</div>
-                              <a class="add">加购物车</a>
-                            </div>
-                          </li>
-                        </ul>
-                      </div>
-                    </div>
-                  </el-tab-pane>
-                  <el-tab-pane label="学员须知" name="3">学员须知</el-tab-pane>
-                </el-tabs>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="section__footer">
-          <div class="recommend">
-            <div class="recommend__header">
-              <div class="title">相关推荐</div>
-            </div>
-            <div class="recommend__body">
-              <ul class="list clearfix">
-                <li
-                  class="recommend-item"
-                  v-for="(item, index) in 4"
-                  :key="index"
-                >
-                  <div class="recommend-item__img">
-                    <div class="note">2022</div>
-                  </div>
-                  <div class="recommend-item__title">
-                    2022年二建建设工程法规及相关知识（黄金基础班）
-                  </div>
-                  <div class="recommend-item__desc">
-                    <div class="price">￥100</div>
-                    <a class="add">加购物车</a>
-                  </div>
-                </li>
-              </ul>
-            </div>
-
-            <div class="recommend__footer">
-              <div class="btn">查看更多</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <el-dialog
-      width="800px"
-      class="question-modal"
-      :visible.sync="questionModalShow"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :show-close="false"
-    >
-      <div class="question-modal__content">
-        <a class="question-modal__close" @click="questionModalShow = false"
-          >X</a
-        >
-        <div class="left-box">
-          <div class="left-box__header">
-            <el-progress
-              class="progress"
-              :text-inside="true"
-              :stroke-width="26"
-              :percentage="70"
-            ></el-progress>
-            <div class="text">已完成<span>30</span>/60道题</div>
-          </div>
-          <div class="left-box__body">
-            <div class="question">
-              <div class="question__title">4、多选题</div>
-              <div class="question__desc">
-                建造师职业资格注册的有效期一般为（ ）年。
-              </div>
-              <div class="question__content">
-                <el-checkbox
-                  class="checkbox"
-                  v-for="(item, index) in 20"
-                  :key="index"
-                  v-model="checked"
-                >
-                  <div>备选项</div>
-                </el-checkbox>
-              </div>
-              <div class="question__btns">
-                <div class="submit">确认答案</div>
-                <div class="collect">收藏本题</div>
-              </div>
-            </div>
-
-            <div class="question" v-if="false">
-              <div class="question__title">4、单选题</div>
-              <div class="question__desc">
-                建造师职业资格注册的有效期一般为（ ）年。
-              </div>
-              <div class="question__content">
-                <el-radio
-                  class="radio"
-                  v-for="(item, index) in 4"
-                  :key="index"
-                  v-model="checked"
-                >
-                  <div>备选项</div>
-                </el-radio>
-              </div>
-              <div class="question__btns">
-                <div class="submit">确认答案</div>
-                <div class="collect">收藏本题</div>
-              </div>
-            </div>
-
-            <div class="question" v-if="false">
-              <div class="question__title">4、判断题</div>
-              <div class="question__desc">
-                建造师职业资格注册的有效期一般为（ ）年。
-              </div>
-              <div class="question__content">
-                <el-radio
-                  class="radio"
-                  v-for="(item, index) in 4"
-                  :key="index"
-                  v-model="checked"
-                >
-                  <div>备选项</div>
-                </el-radio>
-              </div>
-              <div class="question__btns">
-                <div class="submit">确认答案</div>
-                <div class="collect">收藏本题</div>
-              </div>
-            </div>
-
-            <div class="question" v-if="false">
-              <div class="question__title">4、简答题</div>
-              <div class="question__desc">
-                建造师职业资格注册的有效期一般为（ ）年。
-              </div>
-              <div class="question__content">
-                <el-input
-                  type="textarea"
-                  rows="10"
-                  v-model="textarea"
-                ></el-input>
-              </div>
-              <div class="question__btns">
-                <div class="submit">确认答案</div>
-                <div class="collect">收藏本题</div>
-              </div>
-            </div>
-          </div>
-
-          <div class="left-box__footer">
-            <div class="btn">上一题</div>
-            <div class="btn">下一题</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 blue">1</li>
-                  <li class="item green">2</li>
-                  <li class="item red">3</li>
-                  <li class="item white">4</li>
-                  <li
-                    class="item disabled"
-                    v-for="(item, index) in 40"
-                    :key="index"
-                  >
-                    {{ item }}
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-          <div class="right-box__footer">
-            <div class="submit" @click="examSubmit">交卷</div>
-          </div>
-        </div>
-      </div>
-    </el-dialog>
-
-    <el-dialog
-      width="800px"
-      class="video-modal"
-      :visible.sync="videoModalShow"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :show-close="false"
-    >
-      <div class="video-modal__content">
-        <a class="video-modal__close" @click="videoModalShow = false">X</a>
-
-        <div class="video-modal__header">课程试看</div>
-        <div class="video-modal__body">
-          <div class="video">
-            <div class="video__title">1、这是课程的第一节试看标题</div>
-            <div class="video__wrap">
-              <video
-                src="https://www.w3school.com.cn/i/movie.mp4"
-                controls
-              ></video>
-            </div>
-          </div>
-        </div>
-      </div>
-    </el-dialog>
-    <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 { swiper, swiperSlide } from "vue-awesome-swiper";
-import "swiper/swiper-bundle.css";
-export default {
-  name: "GoodsDetail",
-  components: {
-    swiper,
-    swiperSlide,
-    Footer,
-    Header,
-    ToolBar,
-  },
-  data() {
-    return {
-      goodsDetail: {},
-      courseList: [],
-      goodsId: "",
-      checked: false,
-      textarea: "",
-      questionModalShow: false,
-      videoModalShow: false,
-      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",
-      },
-      swiperOptions: {
-        slidesPerView: "auto",
-        speed: 300,
-        freeMode: {
-          freeMode: true,
-        },
-        // 设置点击箭头
-        navigation: {
-          nextEl: ".swiper-button-next",
-        },
-      },
-    };
-  },
-  mounted() {
-    this.goodsId = this.$route.params.goodsId;
-    this.getGoodsDetail();
-    this.getGoodsCourseList();
-  },
-  methods: {
-    addCart() {},
-    /**
-     * 获取商品详情
-     */
-    getGoodsDetail() {
-      this.$request.commonGoodsDetail(this.goodsId).then((res) => {
-        this.goodsDetail = res.data;
-      });
-    },
-    /**
-     * 获取课程列表
-     */
-    getGoodsCourseList() {
-      this.$request.goodsCourseList(this.goodsId).then((res) => {
-        this.courseList = res.rows;
-        console.log(res);
-      });
-    },
-    handleNodeClick(data) {
-      console.log(data);
-    },
-    examSubmit() {
-      this.$confirm("当前为试用做题不可交卷，购买题卷后方可交卷", "提示", {
-        confirmButtonText: "继续作答",
-        cancelButtonText: "返回详情",
-      })
-        .then((_) => {})
-        .catch((_) => {
-          this.questionModalShow = false;
-        });
-    },
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-.goods-detail {
-  .section {
-    &__header {
-      height: 40px;
-      display: flex;
-      align-items: center;
-      padding: 0 20px;
-    }
-
-    &__body {
-      .goods-info {
-        &__header {
-          width: 100%;
-          height: 288px;
-          background: #f5f7fa;
-          border-radius: 10px;
-          padding: 20px;
-          display: flex;
-
-          .img {
-            width: 442px;
-            height: 248px;
-            background: #ff9500;
-            border-radius: 10px;
-          }
-
-          .text {
-            flex: 1;
-            margin-left: 24px;
-            .title {
-              font-size: 18px;
-              font-family: Microsoft YaHei;
-              font-weight: bold;
-              color: #333333;
-              line-height: 24px;
-            }
-
-            .notes {
-              margin-top: 10px;
-              .note {
-                display: inline-block;
-                padding: 2px 5px;
-                border: 1px solid #333333;
-                border-radius: 4px;
-                font-size: 16px;
-                font-family: Microsoft YaHei;
-                font-weight: 400;
-                color: #333333;
-                margin-right: 15px;
-              }
-            }
-
-            .price {
-              margin-top: 10px;
-              font-size: 24px;
-              font-family: Microsoft YaHei;
-              font-weight: bold;
-              color: #ff2d55;
-              line-height: 24px;
-            }
-
-            .btns {
-              margin-top: 100px;
-              display: flex;
-
-              .buynow {
-                cursor: pointer;
-                margin-right: 16px;
-                width: 160px;
-                height: 40px;
-                background: #3f8dfd;
-                border-radius: 20px;
-                text-align: center;
-                line-height: 40px;
-                color: #fff;
-              }
-
-              .add {
-                cursor: pointer;
-                width: 128px;
-                height: 40px;
-                background: #ffffff;
-                border: 1px solid #3f8dfd;
-                border-radius: 20px;
-                text-align: center;
-                line-height: 40px;
-                color: #3f8dfd;
-              }
-            }
-          }
-        }
-
-        &__body {
-          /deep/ .el-tabs__item {
-            padding: 0 20px !important;
-            height: 80px;
-            line-height: 80px;
-          }
-
-          .goods-img {
-            width: 100%;
-          }
-
-          .goods-menu {
-            margin-top: 25px;
-            .left-box {
-              width: 948px;
-              float: left;
-
-              &__header {
-                padding-right: 50px;
-                position: relative;
-                .item {
-                  width: auto;
-                  margin-right: 24px;
-                  font-size: 16px;
-                  font-family: Microsoft YaHei;
-                  font-weight: 400;
-                  color: #333333;
-                  background: #eeeeee;
-                  border-radius: 8px;
-                  padding: 12px;
-                  position: relative;
-
-                  &.canlearn {
-                    background: #3f8dfd;
-                    color: #fff;
-                  }
-                }
-              }
-
-              &__body {
-                .item {
-                  margin-top: 24px;
-                  padding: 16px;
-                  background: #eee;
-                  border-radius: 10px;
-
-                  &__title {
-                    font-size: 16px;
-                    font-family: Microsoft YaHei;
-                    font-weight: bold;
-                    color: #333333;
-
-                    .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;
-                    }
-                  }
-
-                  &__content {
-                    margin-top: 12px;
-                    background: #f5f7fa;
-
-                    /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;
-                    }
-
-                    /deep/ .el-tree-node__content:focus {
-                      background: none;
-                    }
-
-                    /deep/ .el-tree-node__content {
-                      padding-top: 20px;
-                      padding-bottom: 20px;
-                      border-bottom: 1px solid #eeeeee;
-                      height: auto;
-                    }
-                  }
-                }
-              }
-            }
-
-            .right-box {
-              width: 323px;
-              float: right;
-              .title {
-                font-size: 16px;
-                font-family: Microsoft YaHei;
-                font-weight: 400;
-                color: #333333;
-                text-shadow: 0px 6px 6px rgba(85, 158, 255, 0.08);
-                position: relative;
-
-                .more {
-                  font-size: 16px;
-                  font-family: Microsoft YaHei;
-                  font-weight: 400;
-                  color: #999999;
-                  position: absolute;
-                  right: 0;
-                  top: 10px;
-                }
-              }
-
-              .list {
-                .course-item {
-                  margin: 110px 9px 0;
-                  width: 300px;
-                  height: 178px;
-                  background: #ffffff;
-                  box-shadow: 0px 10px 13px 3px rgba(63, 141, 253, 0.1);
-                  border-radius: 10px;
-                  position: relative;
-                  background: #fff;
-                  padding-top: 100px;
-
-                  &__img {
-                    width: 280px;
-                    height: 178px;
-                    background: #ffffff;
-                    box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.08);
-                    border-radius: 10px;
-                    position: absolute;
-                    left: 10px;
-                    top: -78px;
-                    background: rgba(122, 136, 246, 1);
-                    overflow: hidden;
-
-                    .note {
-                      width: 80px;
-                      height: 24px;
-                      background: #d94404;
-                      box-shadow: 0px 1px 1px 0px rgba(248, 78, 5, 0.4);
-                      border-radius: 10px 0px 20px 0px;
-                      text-align: center;
-                      line-height: 24px;
-                      color: #fff;
-                    }
-                  }
-
-                  &__title {
-                    margin: 0 8px;
-                    font-size: 14px;
-                    font-family: Microsoft YaHei;
-                    font-weight: 400;
-                    color: #333333;
-                    line-height: 24px;
-                  }
-
-                  &__desc {
-                    height: 32px;
-                    position: absolute;
-                    left: 0;
-                    right: 0;
-                    bottom: 0;
-                    margin-left: 8px;
-                    display: flex;
-                    justify-content: space-between;
-
-                    .price {
-                      font-size: 18px;
-                      font-family: Microsoft YaHei;
-                      font-weight: bold;
-                      color: #ff2d55;
-                      line-height: 32px;
-                    }
-
-                    .add {
-                      display: block;
-                      width: 118px;
-                      height: 32px;
-                      line-height: 30px;
-                      background: #f2f4f7;
-                      border-radius: 10px 0px 10px 0px;
-                      font-size: 16px;
-                      color: #3f8dfd;
-                      text-align: center;
-
-                      &:hover {
-                        background: #3f8dfd;
-                        color: #f2f4f7;
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    &__footer {
-      .recommend {
-        padding-top: 40px;
-
-        &__header {
-          display: flex;
-          align-items: center;
-
-          .title {
-            font-size: 24px;
-            font-family: YouSheBiaoTiHei;
-            font-weight: 400;
-            color: #333333;
-            text-shadow: 0px 6px 6px rgba(249, 113, 13, 0.08);
-          }
-        }
-
-        &__body {
-          .list {
-            width: 100%;
-
-            .recommend-item {
-              float: left;
-              margin: 100px 9px 0;
-              width: 300px;
-              height: 178px;
-              background: #ffffff;
-              box-shadow: 0px 10px 13px 3px rgba(63, 141, 253, 0.1);
-              border-radius: 10px;
-              position: relative;
-              background: #fff;
-              padding-top: 100px;
-
-              &__img {
-                width: 280px;
-                height: 178px;
-                background: #ffffff;
-                box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.08);
-                border-radius: 10px;
-                position: absolute;
-                left: 10px;
-                top: -78px;
-                background: rgba(122, 136, 246, 1);
-                overflow: hidden;
-
-                .note {
-                  width: 80px;
-                  height: 24px;
-                  background: #d94404;
-                  box-shadow: 0px 1px 1px 0px rgba(248, 78, 5, 0.4);
-                  border-radius: 10px 0px 20px 0px;
-                  text-align: center;
-                  line-height: 24px;
-                  color: #fff;
-                }
-              }
-
-              &__title {
-                margin: 0 8px;
-                font-size: 14px;
-                font-family: Microsoft YaHei;
-                font-weight: 400;
-                color: #333333;
-                line-height: 24px;
-              }
-
-              &__desc {
-                height: 32px;
-                position: absolute;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                margin-left: 8px;
-                display: flex;
-                justify-content: space-between;
-
-                .price {
-                  font-size: 18px;
-                  font-family: Microsoft YaHei;
-                  font-weight: bold;
-                  color: #ff2d55;
-                  line-height: 32px;
-                }
-
-                .add {
-                  display: block;
-                  width: 118px;
-                  height: 32px;
-                  line-height: 30px;
-                  background: #f2f4f7;
-                  border-radius: 10px 0px 10px 0px;
-                  font-size: 16px;
-                  color: #3f8dfd;
-                  text-align: center;
-
-                  &:hover {
-                    background: #3f8dfd;
-                    color: #f2f4f7;
-                  }
-                }
-              }
-            }
-          }
-        }
-
-        &__footer {
-          overflow: hidden;
-          .btn {
-            cursor: pointer;
-            width: 146px;
-            height: 40px;
-            background: #e3eaf7;
-            border-radius: 8px;
-            margin: 20px auto 40px;
-            color: #3f8dfd;
-            text-align: center;
-            line-height: 40px;
-
-            &:hover {
-              color: #fff;
-              box-shadow: 0px 8px 4px 0px rgba(7, 82, 208, 0.08);
-              background: #3f8dfd;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .question-modal {
-    /deep/ .el-dialog__header {
-      display: none;
-    }
-    /deep/ .el-dialog__body {
-      padding: 0;
-      overflow: unset;
-    }
-
-    &__close {
-      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%;
-    }
-
-    &__content {
-      width: 800px;
-      height: 530px;
-      position: relative;
-      box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.04);
-      border-radius: 8px;
-
-      .left-box {
-        float: left;
-        width: 500px;
-        border-right: 1px solid #eee;
-
-        &__header {
-          height: 40px;
-          padding-left: 12px;
-          border-bottom: 1px solid #eeeeee;
-          display: flex;
-          align-items: center;
-
-          .progress {
-            width: 200px;
-          }
-
-          .text {
-            margin-left: 15px;
-            font-size: 16px;
-            span {
-              font-family: Microsoft YaHei;
-              font-weight: bold;
-              color: #3f8dfd;
-              line-height: 24px;
-            }
-          }
-        }
-
-        &__body {
-          height: 450px;
-          border-bottom: 1px solid #eee;
-
-          .question {
-            padding: 12px 0 0 12px;
-
-            &__title {
-              padding-left: 12px;
-              font-size: 16px;
-              font-family: Microsoft YaHei;
-              font-weight: bold;
-              color: #333333;
-              line-height: 24px;
-            }
-
-            &__desc {
-              padding-left: 12px;
-              margin-top: 20px;
-              font-size: 16px;
-              font-family: Microsoft YaHei;
-              font-weight: 400;
-              color: #666666;
-              line-height: 24px;
-            }
-
-            &__content {
-              height: 340px;
-              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;
-              }
-
-              .checkbox,
-              .radio {
-                margin-right: 12px;
-                padding: 0 12px;
-                display: flex;
-                align-items: center;
-                margin-top: 2px;
-                height: 40px;
-                background: #f5f9ff;
-                border-radius: 8px;
-              }
-
-              .textarea {
-                margin-right: 12px;
-                height: 100%;
-              }
-            }
-
-            &__btns {
-              position: relative;
-              .submit {
-                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 {
-                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 {
-            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: 450px;
-          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;
-
-                  &.green {
-                    background: #37c65b;
-                  }
-
-                  &.red {
-                    background: #ff3a30;
-                  }
-
-                  &.blue {
-                    background: #3f8dfd;
-                  }
-
-                  &.white {
-                    background: #ffffff;
-                    border: 1px solid #eeeeee;
-                  }
-                }
-              }
-            }
-
-            &__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;
-
-                  &.green {
-                    color: #fff;
-                    background: #37c65b;
-                  }
-
-                  &.red {
-                    color: #fff;
-                    background: #ff3a30;
-                  }
-
-                  &.blue {
-                    color: #fff;
-                    background: #3f8dfd;
-                  }
-
-                  &.white {
-                    line-height: 38px;
-                    color: #333333;
-                    background: #ffffff;
-                    border: 1px solid #eeeeee;
-                  }
-
-                  &.disabled {
-                    line-height: 38px;
-                    color: #eeeeee;
-                    background: #ffffff;
-                    border: 1px solid #eeeeee;
-                  }
-                }
-              }
-            }
-          }
-        }
-
-        &__footer {
-          height: 40px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-
-          .submit {
-            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;
-          }
-        }
-      }
-    }
-  }
-
-  .video-modal {
-    /deep/ .el-dialog__header {
-      display: none;
-    }
-    /deep/ .el-dialog__body {
-      padding: 0;
-      overflow: unset;
-    }
-
-    &__close {
-      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;
-      color: #ff3b30;
-      padding-left: 24px;
-    }
-
-    &__body {
-      width: 100%;
-      position: relative;
-      box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.04);
-      border-radius: 8px;
-      .video {
-        &__title {
-          padding-left: 24px;
-          height: 40px;
-          line-height: 40px;
-          font-size: 14px;
-          font-family: Microsoft YaHei;
-          font-weight: 400;
-          color: #333333;
-        }
-
-        &__wrap {
-          height: 450px;
-          video {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
-  }
-}
-</style>

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

@@ -12,23 +12,209 @@
                   <span class="question-do"></span>
                 </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="doQuestion()"
-                          >继续做题</span
-                        >
-                      </span>
-                    </span></el-tree
+                  <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)"
+                            >
+                              <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">
+                                  {{ section.examName }}
+                                </div>
+                                <el-button
+                                  v-if="section.recordStatus == -1"
+                                  type="primary"
+                                  @click="toDo(section)"
+                                  class="btn"
+                                  >开始做题</el-button
+                                >
+                                <el-button
+                                  v-if="
+                                    section.recordStatus == 0 &&
+                                    section.doType == 1
+                                  "
+                                  type="primary"
+                                  @click="
+                                    continueDo(
+                                      section,
+                                      chapter.chapterExamId,
+                                      item.majorId
+                                    )
+                                  "
+                                  class="btn"
+                                  >继续做题</el-button
+                                >
+
+                                <el-button
+                                  v-if="
+                                    section.recordStatus == 1 ||
+                                    (section.recordStatus == 0 &&
+                                      section.doType == 2)
+                                  "
+                                  :disabled="
+                                    section.answerNum > 0 &&
+                                    section.doNum >= section.answerNum
+                                  "
+                                  type="primary"
+                                  @click="
+                                    doRepeat(
+                                      section,
+                                      chapter.chapterExamId,
+                                      item.majorId
+                                    )
+                                  "
+                                  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)"
+                            >
+                              <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">
+                                  {{ section.examName }}
+                                </div>
+                                <el-button
+                                  v-if="section.recordStatus == -1"
+                                  type="primary"
+                                  @click="toDo(section)"
+                                  class="btn"
+                                  >开始做题</el-button
+                                >
+                                <el-button
+                                  v-if="
+                                    section.recordStatus == 0 &&
+                                    section.doType == 1
+                                  "
+                                  type="primary"
+                                  @click="continueDo(section, item.majorId, 0)"
+                                  class="btn"
+                                  >继续做题</el-button
+                                >
+
+                                <el-button
+                                  v-if="
+                                    section.recordStatus == 1 ||
+                                    (section.recordStatus == 0 &&
+                                      section.doType == 2)
+                                  "
+                                  :disabled="
+                                    section.answerNum > 0 &&
+                                    section.doNum >= section.answerNum
+                                  "
+                                  type="primary"
+                                  @click="doRepeat(section, item.majorId, 0)"
+                                  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">
+                              {{ item.name }}
+                            </div>
+                            <el-button
+                              v-if="item.recordStatus == -1"
+                              type="primary"
+                              @click="toDo(item)"
+                              class="btn"
+                              >开始做题</el-button
+                            >
+                            <el-button
+                              v-if="item.recordStatus == 0 && item.doType == 1"
+                              type="primary"
+                              @click="continueDo(item, 0, 0)"
+                              class="btn"
+                              >继续做题</el-button
+                            >
+
+                            <el-button
+                              v-if="
+                                item.recordStatus == 1 ||
+                                (item.recordStatus == 0 && item.doType == 2)
+                              "
+                              :disabled="
+                                item.answerNum > 0 &&
+                                item.doNum >= item.answerNum
+                              "
+                              type="primary"
+                              @click="doRepeat(item, 0, 0)"
+                              class="btn"
+                              >重新做题</el-button
+                            >
+                          </div>
+                        </div>
+                      </div>
+                    </template>
+                  </div>
                 </div>
               </div>
             </el-tab-pane>
@@ -109,67 +295,6 @@ export default {
   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",
-      },
       goodsId: "",
       goodsDetail: {},
       goodsCount: {},
@@ -212,13 +337,176 @@ export default {
           goodsId: this.goodsId,
         })
         .then((res) => {
+          res.data.forEach((item) => {
+            if (item.type == 2 || item.type == 1) {
+              item.showList = false;
+              item.list = [];
+            }
+          });
           this.bankList = res.data;
-          if (this.firstEnter) {
-            // this.showAllCharpter();
-            // this.firstEnter = false;
-          }
         });
     },
+
+    /**
+     * 展开模块卷
+     */
+    moduleExam(Module) {
+      if (Module.list.length) {
+        Module.showList = !Module.showList;
+        return;
+      }
+      this.$request
+        .goodsChapterList({
+          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;
+        });
+    },
+    /**
+     * 展开章卷
+     */
+    chapterExam(chapter) {
+      if (chapter.list.length) {
+        chapter.showList = !chapter.showList;
+        return;
+      }
+      this.$request
+        .bankExamExamList({
+          chapterExamId: chapter.chapterExamId || chapter.majorId,
+          goodsId: this.goodsId,
+        })
+        .then((res) => {
+          chapter.showList = !chapter.showList;
+          chapter.list = res.data;
+        });
+    },
+
+    /**
+     * 去做题
+     */
+    async toDo(section) {
+      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({
+          type: "warning",
+          message: "该试卷只能答题" + answerNum + "次!",
+        });
+        return;
+      }
+
+      this.$router.push({
+        path: "/bank-exam/" + this.goodsId,
+        query: {
+          examId: section.examId || section.majorId,
+          moduleId: section.moduleId || 0,
+          chapterId: section.chapterId || 0,
+        },
+      });
+    },
+
+    /**
+     * 继续做题
+     */
+    continueDo(section, chapterId, moduleId) {
+      this.$router.push({
+        path: "/bank-exam-continue" + this.goodsId,
+        params: {
+          recordId: section.recordId,
+          examId: section.examId,
+          chapterId: chapterId,
+          moduleId: moduleId,
+        },
+      });
+    },
+
+    /**
+     * 重做
+     * @param {Object} recordId
+     * @param {Object} examId
+     * @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);
+      //超过答题次数
+      if (answerNum > 0 && count >= answerNum) {
+        this.$message({
+          type: "warning",
+          message: "该试卷只能答题" + answerNum + "次!",
+        });
+        return;
+      }
+
+      this.$confirm(`是否清空答案重做？`, "提示", {
+        confirmButtonText: "重做",
+        cancelButtonText: "查看上次",
+        closeOnClickModal: false,
+        closeOnPressEscape: false,
+        distinguishCancelAndClose: false,
+        showClose: false,
+      })
+        .then((_) => {
+          this.$router.push({
+            path: "/bank-exam/" + this.goodsId,
+            query: {
+              examId: section.examId || section.majorId,
+              moduleId: section.moduleId || 0,
+              chapterId: section.chapterId || 0,
+            },
+          });
+        })
+        .catch((_) => {
+          this.$router.push({
+            path: "/bank-exam-explain" + this.goodsId,
+            params: {
+              recordId: section.recordId,
+              examId: section.examId,
+              chapterId: chapterId,
+              moduleId: moduleId,
+            },
+          });
+        });
+    },
+
+    /**
+     * 查询试卷历史做题次数
+     */
+    examRecordCount(examId) {
+      return new Promise((resolve) => {
+        this.$request
+          .examRecordCount({
+            examId: examId,
+            goodsId: this.id,
+          })
+          .then((res) => {
+            resolve(res.data);
+          });
+      });
+    },
+    /**
+     * @param {Object} exam_id
+     * 获取试卷可以做的次数
+     */
+    getExamDetail(exam_id) {
+      return new Promise((resolve) => {
+        this.$request.getExamDetail(exam_id).then((res) => {
+          resolve(res.data.answerNum);
+        });
+      });
+    },
   },
 };
 </script>
@@ -277,56 +565,78 @@ export default {
           }
 
           &__body {
-            .tree {
-              /deep/.el-tree-node:focus > .el-tree-node__content {
-                background: none;
-              }
+            .item {
+              overflow: hidden;
+              background: #fff;
+              padding: 0 10px;
 
-              /deep/ .el-tree-node:focus {
-                background: none;
-              }
-              /deep/ .el-tree-node:hover {
-                background: none;
-              }
+              &__title {
+                padding: 20px 0;
+                cursor: pointer;
+                font-size: 16px;
+                font-family: Microsoft YaHei;
+                font-weight: bold;
+                color: #333333;
+                border-bottom: 1px solid #eeeeee;
 
-              /deep/ .el-tree-node__content:hover {
-                background: none;
+                .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;
+                }
               }
 
-              /deep/ .el-tree-node__content:focus {
-                background: none;
-              }
+              &__content {
+                margin-top: 12px;
+                background: #fff;
 
-              /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;
+                .bank-chapter {
+                  margin-left: 4px;
 
-                .question-num {
-                  font-size: 16px;
-                  text-align: center;
-                  display: inline-block;
-                  width: 80px;
+                  &__item {
+                    font-size: 16px;
+
+                    &__text {
+                      padding-top: 20px;
+                      padding-bottom: 20px;
+                      border-bottom: 1px solid #eeeeee;
+                      cursor: pointer;
+                      flex: 1;
+                    }
+                  }
                 }
 
-                .question-do {
-                  display: inline-block;
-                  width: 88px;
-                  height: 32px;
-                  background: #3f8dfd;
-                  border-radius: 16px;
-                  text-align: center;
-                  line-height: 32px;
-                  color: #fff;
+                .bank-section {
+                  margin-left: 40px;
+
+                  &__item {
+                    padding-top: 20px;
+                    padding-bottom: 20px;
+                    border-bottom: 1px solid #eeeeee;
+                    font-size: 16px;
+                    display: flex;
+
+                    &__text {
+                      flex: 1;
+                    }
+
+                    .btn {
+                      margin-right: 20px;
+                      width: 88px;
+                      height: 32px;
+                      padding: 0;
+                      border-radius: 16px;
+                      line-height: 32px;
+                      text-align: center;
+                      cursor: pointer;
+                    }
+                  }
                 }
               }
             }

src/router/index.js

@@ -66,11 +66,34 @@ const router =  new Router({
       name: '试卷报告',
       component: resolve => require(['@/pages/course-report/index'],resolve)
     },
+    
+    {
+      path: '/bank-report/:goodsId',
+      name: '试卷报告',
+      component: resolve => require(['@/pages/bank-report/index'],resolve)
+    },
     {
       path: '/course-exam/:goodsId',
       name: '做题',
       component: resolve => require(['@/pages/course-exam/index'],resolve)
     },
+    {
+      path: '/bank-exam/:goodsId',
+      name: '做题',
+      component: resolve => require(['@/pages/bank-exam/index'],resolve)
+    },
+    
+    {
+      path: '/bank-exam-continue/:goodsId',
+      name: '继续做题',
+      component: resolve => require(['@/pages/bank-exam-continue/index'],resolve)
+    },
+    
+    {
+      path: '/bank-exam-explain/:goodsId',
+      name: '上次做题记录',
+      component: resolve => require(['@/pages/bank-exam-explain/index'],resolve)
+    },
     {
       path: '/person-center',
       name: '个人中心',