第六期开发

src/pages/course-detail/index.vue

@@ -2221,48 +2221,6 @@
       </span>
     </el-dialog>
 
-    <el-dialog
-      title="实名验证确认"
-      :visible.sync="showConfirm"
-      width="600px"
-      class="showconfirm"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :show-close="false"
-    >
-      <div class="showconfirm__content">
-        <div class="text">
-          为避免个人信息不正确导致您的学习时长无效，请认真核对以下信息是否正确，如信息有误请取消当前操作，立刻联系020-38946666
-        </div>
-        <el-descriptions :column="1">
-          <el-descriptions-item label="姓名">{{
-            userInfo.realname
-          }}</el-descriptions-item>
-          <el-descriptions-item label="手机号">{{
-            userInfo.telphone
-          }}</el-descriptions-item>
-          <el-descriptions-item label="身份证号">{{
-            userInfo.idCard
-          }}</el-descriptions-item>
-        </el-descriptions>
-
-        <div class="">
-          <el-checkbox v-model="confirmChecked">确认个人信息无误</el-checkbox>
-        </div>
-      </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="$router.back(-1)">取 消</el-button>
-        <el-button
-          type="primary"
-          @click="confirmUser"
-          :disabled="confirmCount > 0"
-          :loading="confirmLoading"
-          >{{
-            confirmCount > 0 ? "确 定(" + confirmCount + ")" : "确 定"
-          }}</el-button
-        >
-      </span>
-    </el-dialog>
     <div id="printTable"></div>
     <!-- <ToolBar></ToolBar> -->
     <Footer></Footer>
@@ -2290,10 +2248,6 @@ export default {
   },
   data() {
     return {
-      confirmChecked: false,
-      confirmLoading: false,
-      confirmCount: 10,
-      showConfirm: false,
       liveDuration: 0,
       numPages: 0,
       showPdf: false,
@@ -3614,53 +3568,6 @@ export default {
       });
     },
 
-    userConfirmInfoDetail() {
-      return new Promise((resolve) => {
-        this.$request
-          .userConfirmInfoDetail({
-            orderGoodsId: this.orderGoodsId,
-          })
-          .then((res) => {
-            if (!res.data) {
-              this.showConfirm = true;
-              let timer = setInterval(() => {
-                if (this.confirmCount > 0) {
-                  this.confirmCount--;
-                } else {
-                  clearInterval(timer);
-                  return;
-                }
-              }, 1000);
-            } else {
-              resolve();
-            }
-          });
-      });
-    },
-
-    confirmUser() {
-      if (!this.confirmChecked) {
-        this.$message.warning("请勾选确认个人信息无误");
-        return;
-      }
-      this.confirmLoading = true;
-      let infoJson = {
-        realname: this.userInfo.realname,
-        idCard: this.userInfo.idCard,
-        telphone: this.userInfo.telphone,
-      };
-      this.$request
-        .userConfirminfo({
-          infoJson: JSON.stringify(infoJson),
-          orderGoodsId: this.orderGoodsId,
-        })
-        .then((res) => {
-          this.showConfirm = false;
-          this.confirmLoading = false;
-          this.getbaseprofiletplists();
-        });
-    },
-
     getbaseprofiletplists() {
       return new Promise((resolve) => {
         let self = this;

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

@@ -0,0 +1,1521 @@
+<template>
+  <div class="bank-detail">
+    <section class="section">
+      <div class="section__body">
+        <div class="left-box">
+          <el-tabs v-model="activeName" @tab-click="tabChange">
+            <el-tab-pane label="章节练习" name="1">
+              <div class="goods-menu">
+                <div class="goods-menu__header">
+                  <div class="title">{{ goodsDetail.goodsName }}</div>
+                  <span class="question-do"></span>
+                </div>
+                <div class="goods-menu__body">
+                  <div
+                    class="item"
+                    v-for="(item, index) in bankList"
+                    :key="index"
+                  >
+                    <template v-if="item.type == 1">
+                      <div class="item__title" @click="moduleExam(item)">
+                        <i
+                          :class="{
+                            'el-icon-caret-right': !item.showList,
+                            'el-icon-caret-bottom': item.showList,
+                          }"
+                        ></i>
+                        {{ item.name }}
+                      </div>
+                      <div class="item__content" v-if="item.showList">
+                        <div class="bank-chapter">
+                          <div
+                            class="bank-chapter__item"
+                            v-for="(chapter, chapterIndex) in item.list"
+                            :key="chapterIndex"
+                          >
+                            <div
+                              class="bank-chapter__item__text"
+                              @click="chapterExam(chapter, item.majorId)"
+                            >
+                              <i
+                                :class="{
+                                  'el-icon-caret-right': !chapter.showList,
+                                  'el-icon-caret-bottom': chapter.showList,
+                                }"
+                              ></i
+                              >{{ chapter.name }}
+                            </div>
+
+                            <div class="bank-section" v-if="chapter.showList">
+                              <div
+                                class="bank-section__item"
+                                v-for="(section, sectionIndex) in chapter.list"
+                                :key="sectionIndex"
+                              >
+                                <div class="bank-section__item__text">
+                                  {{ section.examName }}
+                                </div>
+                                <div class="btn_div">
+                                  <!-- 正确率
+                                  <span style="color: rgb(52, 216, 71)"
+                                    >{{
+                                      computedNums(
+                                        section.doQuestionNum,
+                                        section.questionNum
+                                      )
+                                    }}%</span
+                                  > -->
+                                  <span style="margin-left: 6px">已完成 </span
+                                  ><span style="color: blue">{{
+                                    section.doQuestionNum || 0
+                                  }}</span>
+                                  /
+                                  {{ section.questionNum || 0 }}
+                                </div>
+                                <el-button
+                                  v-if="section.recordStatus == -1"
+                                  type="primary"
+                                  @click="
+                                    toDo(
+                                      section,
+                                      chapter.chapterExamId,
+                                      item.majorId
+                                    )
+                                  "
+                                  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, 0)"
+                            >
+                              <i
+                                :class="{
+                                  'el-icon-caret-right': !item.showList,
+                                  'el-icon-caret-bottom': item.showList,
+                                }"
+                              ></i
+                              >{{ item.name }}
+                            </div>
+
+                            <div class="bank-section" v-if="item.showList">
+                              <div
+                                class="bank-section__item"
+                                v-for="(section, sectionIndex) in item.list"
+                                :key="sectionIndex"
+                              >
+                                <div class="bank-section__item__text">
+                                  {{ section.examName }}
+                                </div>
+                                <div
+                                  style="width: auto; padding: 0px 14px"
+                                  class="btn_div"
+                                >
+                                  <!-- 正确率
+                                  <span style="color: rgb(52, 216, 71)"
+                                    >{{
+                                      computedNums(
+                                        section.doQuestionNum,
+                                        section.questionNum
+                                      )
+                                    }}%</span
+                                  > -->
+                                  <span style="margin-left: 6px">已完成 </span
+                                  ><span style="color: blue">{{
+                                    section.doQuestionNum || 0
+                                  }}</span>
+                                  /
+                                  {{ section.questionNum || 0 }}
+                                </div>
+                                <el-button
+                                  v-if="section.recordStatus == -1"
+                                  type="primary"
+                                  @click="toDo(section, item.majorId, 0)"
+                                  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>
+                            <div
+                              style="width: auto; padding: 0px 14px"
+                              class="btn_div"
+                            >
+                              <!-- 正确率
+                              <span style="color: rgb(52, 216, 71)"
+                                >{{
+                                  computedNums(
+                                    item.doQuestionNum,
+                                    item.questionNum
+                                  )
+                                }}%</span
+                              > -->
+                              <span style="margin-left: 6px">已完成 </span
+                              ><span style="color: blue">{{
+                                item.doQuestionNum || 0
+                              }}</span>
+                              / {{ item.questionNum || 0 }}
+                            </div>
+                            <el-button
+                              v-if="item.recordStatus == -1"
+                              type="primary"
+                              @click="toDo(item, 0, 0)"
+                              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>
+            <el-tab-pane label="收藏题集" name="2">
+              <div class="goods-collect">
+                <div class="goods-collect__header">
+                  <div class="selects">
+                    <div class="selects__item">
+                      <el-select
+                        placeholder="请选择"
+                        v-model="collectSelect"
+                        @change="getCollectData"
+                        clearable
+                        @clear="getWrongData"
+                      >
+                        <el-option
+                          v-for="(item, index) in selectList"
+                          :key="index"
+                          :label="item.paperName"
+                          :value="item.paperId"
+                        ></el-option>
+                      </el-select>
+                    </div>
+                  </div>
+
+                  <div class="tabs">
+                    <el-tabs v-model="collectName" @tab-click="getCollectData">
+                      <el-tab-pane label="试卷归类" name="1"></el-tab-pane>
+                      <el-tab-pane label="题型归类" name="2"></el-tab-pane>
+                    </el-tabs>
+                  </div>
+                </div>
+
+                <div class="goods-collect__body">
+                  <div class="box">
+                    <div class="title">收藏统计</div>
+                    <div class="circle">
+                      <el-progress
+                        type="circle"
+                        :width="160"
+                        :stroke-width="12"
+                        color="#FFC53D"
+                        :format="() => collectTotal || '0'"
+                        :percentage="25"
+                      ></el-progress>
+                    </div>
+                  </div>
+                  <div class="list" v-if="collectName == '1'">
+                    <div
+                      class="list__item"
+                      v-for="(item, index) in collectExamList"
+                      :key="index"
+                    >
+                      <div class="title">
+                        {{ item.examName }}
+                      </div>
+                      <div class="content clearfix">
+                        <div class="left">
+                          收藏题<span class="red">{{ item.questionNum }}</span>
+                        </div>
+                        <div class="right">
+                          <el-button
+                            type="primary"
+                            @click="
+                              go('/subject/collect-bank/' + item.examId, {
+                                orderGoodsId: orderGoodsId,
+                              })
+                            "
+                            round
+                            plain
+                            class="btn"
+                            >重做</el-button
+                          >
+                          <el-button
+                            type="primary"
+                            @click="
+                              go('/subject/collect-bank/' + item.examId, {
+                                explain: 1,
+                                orderGoodsId: orderGoodsId,
+                              })
+                            "
+                            round
+                            plain
+                            class="btn"
+                            >解析</el-button
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="list" v-if="collectName == '2'">
+                    <div
+                      class="list__item"
+                      v-for="(item, index) in collectTypeList"
+                      :key="index"
+                    >
+                      <div class="title">
+                        <template v-if="item.type == 1">单选题</template>
+                        <template v-if="item.type == 2">多选题</template>
+                        <template v-if="item.type == 3">判断题</template>
+                        <template v-if="item.type == 4">案例题</template>
+                        <template v-if="item.type == 5">简答题</template>
+                      </div>
+                      <div class="content clearfix">
+                        <div class="left">
+                          收藏题<span class="red">{{ item.num }}</span>
+                        </div>
+                        <div class="right">
+                          <el-button
+                            type="primary"
+                            @click="
+                              go('/subject/collect-type-bank/' + item.type, {
+                                orderGoodsId: orderGoodsId,
+                              })
+                            "
+                            round
+                            plain
+                            class="btn"
+                            >重做</el-button
+                          >
+                          <el-button
+                            type="primary"
+                            @click="
+                              go('/subject/collect-type-bank/' + item.type, {
+                                explain: 1,
+                                orderGoodsId: orderGoodsId,
+                              })
+                            "
+                            round
+                            plain
+                            class="btn"
+                            >解析</el-button
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="错题集" name="3">
+              <div class="goods-collect">
+                <div class="goods-collect__header">
+                  <div class="selects">
+                    <div class="selects__item">
+                      <el-select
+                        placeholder="请选择试卷类型"
+                        v-model="wrongSelect"
+                        clearable
+                        @clear="getWrongData"
+                        @change="getWrongData"
+                      >
+                        <el-option
+                          v-for="(item, index) in selectList"
+                          :key="index"
+                          :label="item.paperName"
+                          :value="item.paperId"
+                        ></el-option>
+                      </el-select>
+                    </div>
+                  </div>
+
+                  <div class="tabs">
+                    <el-tabs v-model="wrongName" @tab-click="getWrongData">
+                      <el-tab-pane label="试卷归类" name="1"></el-tab-pane>
+                      <el-tab-pane label="题型归类" name="2"></el-tab-pane>
+                    </el-tabs>
+                  </div>
+                </div>
+
+                <div class="goods-collect__body">
+                  <div class="box">
+                    <div class="title">错题统计</div>
+                    <div class="circle">
+                      <el-progress
+                        type="circle"
+                        :width="160"
+                        :stroke-width="12"
+                        color="#F5222D"
+                        :format="() => wrongTotal || '0'"
+                        :percentage="25"
+                      ></el-progress>
+                    </div>
+                  </div>
+                  <div class="list" v-if="wrongName == '1'">
+                    <div
+                      class="list__item"
+                      v-for="(item, index) in wrongExamList"
+                      :key="index"
+                    >
+                      <div class="title">
+                        {{ item.examName }}
+                      </div>
+                      <div class="content clearfix">
+                        <div class="left">
+                          错题数<span class="red">{{
+                            item.wrongQuestionNum
+                          }}</span>
+                        </div>
+                        <div class="right">
+                          <el-button
+                            type="primary"
+                            round
+                            plain
+                            class="btn"
+                            @click="
+                              go('/subject/wrong-bank/' + item.examId, {
+                                orderGoodsId: orderGoodsId,
+                              })
+                            "
+                            >重做</el-button
+                          >
+                          <el-button
+                            type="primary"
+                            round
+                            plain
+                            class="btn"
+                            @click="
+                              go('/subject/wrong-bank/' + item.examId, {
+                                explain: 1,
+                                orderGoodsId: orderGoodsId,
+                              })
+                            "
+                            >解析</el-button
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="list" v-if="wrongName == '2'">
+                    <div
+                      class="list__item"
+                      v-for="(item, index) in wrongTypeList"
+                      :key="index"
+                    >
+                      <div class="title">
+                        <template v-if="item.type == 1">单选题</template>
+                        <template v-if="item.type == 2">多选题</template>
+                        <template v-if="item.type == 3">判断题</template>
+                        <template v-if="item.type == 4">案例题</template>
+                        <template v-if="item.type == 5">简答题</template>
+                      </div>
+                      <div class="content clearfix">
+                        <div class="left">
+                          错题数<span class="red">{{ item.num }}</span>
+                        </div>
+                        <div class="right">
+                          <el-button
+                            type="primary"
+                            round
+                            plain
+                            class="btn"
+                            @click="
+                              go('/subject/wrong-type-bank/' + item.type, {
+                                orderGoodsId: orderGoodsId,
+                              })
+                            "
+                            >重做</el-button
+                          >
+                          <el-button
+                            type="primary"
+                            round
+                            plain
+                            class="btn"
+                            @click="
+                              go('/subject/wrong-type-bank/' + item.type, {
+                                explain: 1,
+                                orderGoodsId: orderGoodsId,
+                              })
+                            "
+                            >解析</el-button
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        <div class="right-box">
+          <div class="right-box__header">
+            <div class="title">
+              <div
+                @click="
+                  go('/person-center/my-bank/bank-statistics/' + goodsId, {
+                    orderGoodsId: orderGoodsId,
+                  })
+                "
+              >
+                做题统计>
+              </div>
+            </div>
+            <div class="content">
+              <div class="left">
+                <div class="title">总进度</div>
+                <div class="note">
+                  {{
+                    goodsCount.totalNum > 0
+                      ? (
+                          (goodsCount.doNum / goodsCount.totalNum) *
+                          100
+                        ).toFixed(
+                          (goodsCount.doNum / goodsCount.totalNum) * 100 == 100
+                            ? 0
+                            : 1
+                        )
+                      : 0
+                  }}%
+                </div>
+              </div>
+              <div class="right">
+                <div class="title"><span class="blue">已答题</span>/未答题</div>
+                <div class="note">
+                  <span class="blue">{{ goodsCount.doNum }}</span
+                  >/{{ goodsCount.totalNum - goodsCount.doNum }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="right-box__body"
+            v-if="recommendList.goodsList && recommendList.goodsList.length"
+          >
+            <div class="title">
+              推荐题库
+              <span class="more" @click="go('/bank-list')">更多></span>
+            </div>
+            <ul class="list">
+              <li
+                class="course-item"
+                v-for="(itemy, index) in compyRecommend(
+                  recommendList.goodsList
+                )"
+                :key="index"
+              >
+                <GoodsItem :item="itemy"></GoodsItem>
+                <!-- <div
+                  class="course-item__img"
+                  :style="`background-image:url(${$tools.splitImgHost(
+                    itemy.coverUrl,
+                    true
+                  )})`"
+                >
+                  <div class="note" v-if="itemy.year">{{ itemy.year }}</div>
+                </div>
+                <div class="course-item__title">
+                  {{ itemy.goodsName }}
+                </div>
+                <div class="course-item__desc">
+                  <div class="price">￥{{ itemy.standPrice }}</div>
+                  <a class="add" @click.stop="addCart(true, itemy.goodsId)"
+                    >加购物车</a
+                  >
+                </div> -->
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import GoodsItem from "@/components/goodsItem/index";
+export default {
+  name: "BankDetail",
+  components: {
+    GoodsItem,
+  },
+  data() {
+    return {
+      orderGoodsId: "",
+      activeName: "1",
+      collectName: "1",
+      wrongName: "1",
+      goodsId: "",
+      goodsDetail: {},
+      goodsCount: {},
+      bankList: [],
+      selectList: [],
+      collectSelect: "",
+      wrongSelect: "",
+      hasClickList: [],
+      collectTypeList: [],
+      collectExamList: [],
+      wrongTypeList: [],
+      wrongExamList: [],
+      collectTotal: 0,
+      wrongTotal: 0,
+      recommendList: [],
+      needOpen: true, //是否需要打开第一章节
+    };
+  },
+  mounted() {
+    this.orderGoodsId = this.$route.query.orderGoodsId;
+    this.goodsId = this.$route.params.goodsId;
+    this.goodsBankQuestionNum();
+    this.goodsBank();
+    this.getDetail();
+    this.examaperList();
+  },
+  computed: {
+    compyRecommend: function () {
+      return function (array) {
+        let ary = [];
+        if (array) {
+          for (let i = 0; i < array.length; i++) {
+            if (i >= 5) {
+              break;
+            } else {
+              ary.push(array[i]);
+            }
+          }
+        }
+        return ary;
+      };
+    },
+    computedNums: function () {
+      return function (doNum, totalNum) {
+        let ary = 0;
+        ary = parseInt(doNum ? doNum : 0) / parseInt(totalNum ? totalNum : 0);
+        return (ary * 100).toFixed(0);
+      };
+    },
+  },
+  methods: {
+    /**
+     * 跳转
+     */
+    toGoodsDetail(item) {
+      this.$router.push({
+        path: "/bank-detail/" + item.goodsId,
+        query: {
+          orderGoodsId: item.orderGoodsId,
+        },
+      });
+    },
+    addCart(status, goodsId) {
+      this.$request
+        .addCart({ goodsId: status ? goodsId : this.goodsId })
+        .then((res) => {
+          this.$message({
+            message: "加入购物车成功",
+            type: "success",
+          });
+        })
+        .catch((err) => {
+          if (err.code == 500) {
+            this.$message({
+              message: err.msg,
+              type: "warning",
+            });
+          }
+        });
+    },
+    /**
+     * 
+     获取推荐列表
+     */
+    getRecommend() {
+      this.$request
+        .appCommonActivityRecommendList({
+          businessId: this.goodsDetail.businessId,
+          type: 2,
+        })
+        .then((res) => {
+          if (res.rows.length) {
+            this.recommendList = res.rows[0];
+          }
+        });
+    },
+    go(path, query = {}) {
+      console.log(path, query);
+      this.$router.push({
+        path,
+        query,
+      });
+    },
+    examaperList() {
+      this.$request.examaperList().then((res) => {
+        this.selectList = res.rows;
+      });
+    },
+
+    /**
+     * 获取用户商品统计数据
+     */
+    goodsBankQuestionNum() {
+      this.$request.goodsBankQuestionNum(this.orderGoodsId).then((res) => {
+        this.goodsCount = res.data;
+      });
+    },
+
+    getDetail() {
+      this.$request.commonGoodsDetail(this.goodsId).then((res) => {
+        this.goodsDetail = res.data;
+        this.getRecommend();
+      });
+    },
+
+    /**
+     * 获取课程目录
+     */
+    goodsBank() {
+      this.$request
+        .goodsBank({
+          orderGoodsId: this.orderGoodsId,
+          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;
+
+          for (let i = 0; i < this.bankList.length; i++) {
+            if (this.bankList[i].type == 1) {
+              this.moduleExam(this.bankList[i]);
+              break;
+            } else if (this.bankList[i].type == 2) {
+              this.needOpen = false;
+              this.chapterExam(this.bankList[i], 0);
+              break;
+            }
+          }
+        });
+    },
+
+    /**
+     * 展开模块卷
+     */
+    moduleExam(Module) {
+      if (Module.list.length) {
+        Module.showList = !Module.showList;
+        return;
+      }
+      this.$request
+        .goodsChapterList({
+          orderGoodsId: this.orderGoodsId,
+          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;
+
+          if (this.needOpen) {
+            this.needOpen = false;
+            this.chapterExam(Module.list[0], Module.majorId);
+          }
+        });
+    },
+    /**
+     * 展开章卷
+     */
+    chapterExam(chapter, moduleId = 0) {
+      if (chapter.list.length) {
+        chapter.showList = !chapter.showList;
+        return;
+      }
+      this.$request
+        .bankExamExamList({
+          orderGoodsId: this.orderGoodsId,
+          moduleExamId: moduleId,
+          chapterExamId: chapter.chapterExamId || chapter.majorId,
+          goodsId: this.goodsId,
+        })
+        .then((res) => {
+          chapter.showList = !chapter.showList;
+          chapter.list = res.data;
+        });
+    },
+
+    /**
+     * 去做题
+     */
+    async toDo(section, chapterId, moduleId) {
+      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: moduleId || 0,
+          chapterId: chapterId || 0,
+          orderGoodsId: this.orderGoodsId,
+        },
+      });
+    },
+
+    /**
+     * 继续做题
+     */
+    continueDo(section, chapterId, moduleId) {
+      console.log(section);
+      this.$router.push({
+        path: "/bank-exam-continue/" + this.goodsId,
+        query: {
+          recordId: section.recordId,
+          examId: section.examId || section.majorId,
+          chapterId: chapterId,
+          moduleId: moduleId,
+          orderGoodsId: this.orderGoodsId,
+        },
+      });
+    },
+
+    /**
+     * 重做
+     * @param {Object} recordId
+     * @param {Object} examId
+     * @param {Object} goodsId
+     * @param {Object} chapterExamId
+     */
+    async doRepeat(section, chapterId = 0, moduleId = 0) {
+      let count = await this.examRecordCount(section.examId || section.majorId);
+      let answerNum = await this.getExamDetail(
+        section.examId || section.majorId
+      );
+      //超过答题次数
+      if (answerNum > 0 && count >= answerNum) {
+        this.$message({
+          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: moduleId || 0,
+              chapterId: chapterId || 0,
+              orderGoodsId: this.orderGoodsId,
+            },
+          });
+        })
+        .catch((_) => {
+          this.$router.push({
+            path: "/bank-exam-all-explain/" + section.recordId,
+            query: {
+              examId: section.examId || section.majorId,
+              moduleId: moduleId || 0,
+              chapterId: chapterId || 0,
+              goodsId: this.goodsId,
+              orderGoodsId: this.orderGoodsId,
+            },
+          });
+        });
+    },
+
+    /**
+     * 查询试卷历史做题次数
+     */
+    examRecordCount(examId) {
+      return new Promise((resolve) => {
+        this.$request
+          .examRecordCount({
+            examId: examId,
+            orderGoodsId: this.orderGoodsId,
+          })
+          .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);
+        });
+      });
+    },
+
+    getWrongData() {
+      if (this.wrongName == "1") {
+        //试卷归类
+        this.wrongRecordList();
+      } else if (this.wrongName == "2") {
+        //题型归类
+        this.wrongRecordTypeList();
+      }
+    },
+
+    wrongRecordList() {
+      this.$request
+        .wrongRecordList({
+          paperId: this.wrongSelect,
+          goodsId: this.goodsId,
+        })
+        .then((res) => {
+          this.wrongExamList = res.rows;
+          let total = 0;
+          res.rows.forEach((item) => {
+            total += item.wrongQuestionNum;
+          });
+
+          this.wrongTotal = total;
+        });
+    },
+    wrongRecordTypeList() {
+      this.$request
+        .wrongRecordTypeList({
+          paperId: this.wrongSelect,
+          goodsId: this.goodsId,
+        })
+        .then((res) => {
+          this.wrongTypeList = res.rows;
+
+          let total = 0;
+          res.rows.forEach((item) => {
+            total += item.num;
+          });
+
+          this.wrongTotal = total;
+        });
+    },
+
+    getCollectData() {
+      if (this.collectName == "1") {
+        //试卷归类
+        this.goodsCollectExamList();
+      } else if (this.collectName == "2") {
+        //题型归类
+        this.collectQuestionTypeList();
+      }
+    },
+
+    /**
+     * 收藏按试卷分类
+     */
+    goodsCollectExamList() {
+      this.$request
+        .goodsCollectExamList({
+          paperId: this.collectSelect,
+          goodsId: this.goodsId,
+        })
+        .then((res) => {
+          this.collectExamList = res.rows;
+          let total = 0;
+          res.rows.forEach((item) => {
+            total += item.questionNum;
+          });
+
+          this.collectTotal = total;
+        });
+    },
+
+    /**
+     * 收藏按题型分类
+     */
+    collectQuestionTypeList() {
+      this.$request
+        .collectQuestionTypeList({
+          paperId: this.wrongSelect,
+          goodsId: this.goodsId,
+        })
+        .then((res) => {
+          this.collectTypeList = res.rows;
+          let total = 0;
+          res.rows.forEach((item) => {
+            total += item.num;
+          });
+
+          this.collectTotal = total;
+        });
+    },
+
+    tabChange(e) {
+      if (this.hasClickList.indexOf(e.name) != -1) {
+        return;
+      }
+
+      this.hasClickList.push(e.name);
+
+      if (e.name == "2") {
+        //收藏集
+        this.getCollectData();
+      } else if (e.name == "3") {
+        //错题集
+        this.getWrongData();
+      }
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.btn_div {
+  user-select: none;
+  color: #666666;
+  margin-right: 10px;
+  padding: 0px 14px;
+  height: 32px;
+  line-height: 32px;
+}
+.bank-detail {
+  .section {
+    &__header {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+    }
+
+    &__body {
+      .left-box {
+        float: left;
+        width: 768px;
+
+        /deep/.el-tabs__item {
+          height: 98px;
+          line-height: 98px;
+        }
+        .goods-menu {
+          padding: 0 16px 16px;
+          border-radius: 10px;
+          background: #f5f7fa;
+
+          &__header {
+            display: flex;
+            padding-right: 8px;
+            align-items: center;
+            .title {
+              padding: 10px 0;
+              font-size: 16px;
+              font-family: Microsoft YaHei;
+              font-weight: bold;
+              color: #333333;
+              flex: 1;
+            }
+
+            .question-num {
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #999999;
+              text-align: center;
+              display: inline-block;
+              width: 80px;
+            }
+
+            .question-do {
+              width: 88px;
+            }
+          }
+
+          &__body {
+            .item {
+              overflow: hidden;
+              background: #fff;
+              padding: 0 10px;
+
+              &__title {
+                padding: 20px 0;
+                cursor: pointer;
+                font-size: 16px;
+                font-family: Microsoft YaHei;
+                font-weight: bold;
+                color: #333333;
+                border-bottom: 1px solid #eeeeee;
+
+                .note {
+                  display: inline-block;
+                  margin-left: 20px;
+                  width: 40px;
+                  height: 24px;
+                  border: 1px solid #ff3b30;
+                  border-radius: 8px;
+                  line-height: 22px;
+                  color: #ff3b30;
+                  text-align: center;
+                }
+              }
+
+              &__content {
+                margin-top: 12px;
+                background: #fff;
+
+                .bank-chapter {
+                  margin-left: 4px;
+
+                  &__item {
+                    font-size: 16px;
+
+                    &__text {
+                      padding-top: 20px;
+                      padding-bottom: 20px;
+                      border-bottom: 1px solid #eeeeee;
+                      cursor: pointer;
+                      flex: 1;
+                    }
+                  }
+                }
+
+                .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;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        .goods-collect {
+          &__header {
+            .selects {
+              display: flex;
+              justify-content: space-between;
+              &__item {
+                width: 360px;
+                height: 40px;
+                border-radius: 8px;
+
+                .el-select {
+                  width: 100%;
+                }
+
+                /deep/ .el-input__inner {
+                  background: #fafafa;
+                  border: 1px solid #d9d9d9;
+                }
+              }
+            }
+          }
+
+          &__body {
+            .box {
+              width: 300px;
+              height: 240px;
+              background: #ffffff;
+              border: 1px solid #d9d9d9;
+              border-radius: 8px;
+              padding: 16px;
+
+              .title {
+                font-size: 14px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #333333;
+              }
+
+              .circle {
+                width: 160px;
+                height: 160px;
+                margin: 10px auto 0;
+              }
+            }
+
+            .list {
+              overflow: hidden;
+              &__item {
+                margin-top: 16px;
+                height: 98px;
+                background: #f7f9fc;
+                box-shadow: 0px 3px 6px 0px #e1e6ed;
+                border-radius: 8px;
+
+                .title {
+                  padding: 10px 16px;
+                  font-size: 16px;
+                  font-family: Microsoft YaHei;
+                  font-weight: bold;
+                  color: #333333;
+                }
+
+                .content {
+                  border-top: 1px solid #eee;
+                  .left {
+                    float: left;
+                    margin-left: 16px;
+                    margin-top: 10px;
+                    padding: 4px 12px;
+                    border: 1px solid #666666;
+                    border-radius: 4px;
+                    font-size: 14px;
+
+                    .red {
+                      margin-left: 12px;
+                      color: #f5222d;
+                      font-size: 14px;
+                    }
+                  }
+
+                  .right {
+                    float: right;
+                    margin-right: 16px;
+                    margin-top: 10px;
+                    .btn {
+                      width: 88px;
+                      height: 32px;
+                      border-radius: 16px;
+                      text-align: center;
+                      padding: 0;
+                      line-height: 32px;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .right-box {
+        width: 300px;
+        float: right;
+
+        &__header {
+          height: 98px;
+          border-bottom: 2px solid #e4e7ed;
+
+          .title {
+            cursor: pointer;
+            height: 32px;
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #333333;
+            line-height: 32px;
+          }
+
+          .content {
+            height: 64px;
+            font-size: 0;
+            .left {
+              width: 50%;
+              display: inline-block;
+              border-right: 1px solid #e4e7ed;
+              .title {
+                font-size: 14px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #999999;
+              }
+
+              .note {
+                font-size: 24px;
+                font-family: Microsoft YaHei;
+                font-weight: bold;
+                color: #3f8dfd;
+              }
+            }
+
+            .right {
+              text-align: center;
+              display: inline-block;
+              width: 50%;
+              .title {
+                font-size: 14px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #999999;
+                .blue {
+                  color: #3f8dfd;
+                }
+              }
+
+              .note {
+                font-size: 24px;
+                font-family: Microsoft YaHei;
+                color: #999999;
+                .blue {
+                  font-size: 24px;
+                  color: #3f8dfd;
+                }
+              }
+            }
+          }
+        }
+
+        &__body {
+          .title {
+            margin-top: 15px;
+            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 {
+              cursor: pointer;
+              font-size: 16px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #999999;
+              position: absolute;
+              right: 0;
+            }
+          }
+
+          .list {
+            .course-item {
+              // margin: 110px 0 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;
+              //   background: no-repeat center center;
+              //   background-size: 280px 178px;
+
+              //   .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;
+              //     }
+              //   }
+              // }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/person-center/free-bank/bank-explain-detail/index.vue

@@ -0,0 +1,1579 @@
+<template>
+  <div class="bank-explain">
+    <section class="section">
+      <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__header">
+            <el-tabs :value="activeName" @tab-click="tabChange">
+              <el-tab-pane label="对题记录" name="1"></el-tab-pane>
+              <el-tab-pane label="错题记录" name="2"></el-tab-pane>
+            </el-tabs>
+          </div>
+          <div class="explain-record__body">
+            <div class="left-box">
+              <div class="left-box__footer">
+                <div class="btn" @click="prevQuestion">上一题</div>
+                <div class="btn" @click="nextQuestion">下一题</div>
+              </div>
+              <div class="left-box__body">
+                <template v-for="(question, questionIndex) in questionList">
+                  <div
+                    class="question"
+                    v-if="question.type == 1 && current == questionIndex"
+                    :key="questionIndex"
+                  >
+                    <div class="question__title">
+                      {{ questionIndex + 1 }}、单选题
+                    </div>
+                    <div class="question__desc" v-html="question.content"></div>
+                    <div class="question__content">
+                      <div class="question-list" v-if="!question.ques">
+                        <div
+                          class="radio"
+                          v-for="(item, index) in question.jsonStr"
+                          :key="index"
+                        >
+                          <div>{{ ast[index] }}. {{ item.content }}</div>
+                        </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>
+                  </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-html="question.analysisContent"
+                        ></div>
+                      </div>
+                    </div>
+                    <div class="question__btns"></div>
+                  </div>
+                  <div
+                    class="question"
+                    v-if="question.type == 3 && current == questionIndex"
+                    :key="questionIndex"
+                  >
+                    <div class="question__title">
+                      {{ questionIndex + 1 }}、判断题
+                    </div>
+                    <div class="question__desc" v-html="question.content"></div>
+                    <div class="question__content">
+                      <div class="question-list" v-if="!question.ques">
+                        <div
+                          class="radio"
+                          v-for="(item, index) in judge"
+                          :key="index"
+                        >
+                          <div>{{ ast[index] }}. {{ item }}</div>
+                        </div>
+                      </div>
+                      <div class="question-list" v-if="question.ques">
+                        <div
+                          class="radio"
+                          :class="{
+                            right:
+                              index == question.ques || index == question.ans,
+                            wrong:
+                              index == question.ques &&
+                              question.ques != question.ans,
+                          }"
+                          v-for="(item, index) in judge"
+                          :key="index"
+                        >
+                          <div>{{ ast[index] }}. {{ item }}</div>
+                        </div>
+                      </div>
+                      <div class="answer-list" 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>
+                  </div>
+                  <div
+                    class="question"
+                    v-if="question.type == 4 && current == questionIndex"
+                    :key="questionIndex"
+                  >
+                    <div class="question__title">
+                      {{ questionIndex + 1 }}、案例题
+                    </div>
+                    <div class="question__content">
+                      <el-tabs v-model="question.tabIndex">
+                        <el-tab-pane
+                          v-for="(json, jsonIndex) in question.jsonStr"
+                          :label="'问题' + (jsonIndex + 1)"
+                          :name="jsonIndex + ''"
+                          :key="jsonIndex"
+                        >
+                          <div
+                            class="question"
+                            v-if="json.type == 1"
+                            :key="questionIndex"
+                          >
+                            <div class="question__title">
+                              {{ jsonIndex + 1 }}、单选题
+                            </div>
+                            <div
+                              class="question__desc"
+                              v-html="json.content"
+                            ></div>
+                            <div class="question__content">
+                              <div
+                                class="question-list"
+                                v-if="!question.ques[jsonIndex]"
+                              >
+                                <div
+                                  class="radio"
+                                  v-for="(item, index) in json.optionsList"
+                                  :key="index"
+                                >
+                                  <div>
+                                    {{ ast[index] }}. {{ item.content }}
+                                  </div>
+                                </div>
+                              </div>
+                              <div
+                                class="question-list"
+                                v-if="question.ques[jsonIndex]"
+                              >
+                                <div
+                                  class="radio"
+                                  :class="{
+                                    right:
+                                      item.optionsId ==
+                                        question.ques[jsonIndex] ||
+                                      item.optionsId == question.ans[jsonIndex],
+                                    wrong:
+                                      item.optionsId ==
+                                        question.ques[jsonIndex] &&
+                                      question.ques[jsonIndex] !=
+                                        question.ans[jsonIndex],
+                                  }"
+                                  v-for="(item, index) in json.optionsList"
+                                  :key="index"
+                                >
+                                  <div>
+                                    {{ ast[index] }}. {{ item.content }}
+                                  </div>
+                                </div>
+                              </div>
+                              <div
+                                class="answer-list"
+                                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"
+                              >
+                                确认答案
+                              </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"
+                                >
+                                  <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 + 1 }}、简答题
+                            </div>
+                            <div
+                              class="question__desc"
+                              v-html="json.content"
+                            ></div>
+                            <div class="question__content">
+                              <div
+                                class="question-list textarea"
+                                v-if="
+                                  !(
+                                    question.ques[jsonIndex] &&
+                                    (question.ques[jsonIndex].imageList
+                                      .length ||
+                                      question.ques[jsonIndex].text)
+                                  )
+                                "
+                              >
+                                <el-input
+                                  type="textarea"
+                                  rows="5"
+                                  v-model="json.ansText.text"
+                                  resize="none"
+                                ></el-input>
+                                <div class="upload clearfix">
+                                  <div
+                                    class="upload__imgs"
+                                    v-for="(img, imgIndex) in json.ansText
+                                      .imageList"
+                                    :key="imgIndex"
+                                  >
+                                    <img
+                                      :src="$tools.splitImgHost(img, true)"
+                                      alt=""
+                                    />
+                                  </div>
+                                  <div class="upload__btn">
+                                    <i class="el-icon-plus icon"></i>
+                                    <p>上传图片</p>
+                                  </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>
+                          </div>
+                        </el-tab-pane>
+                      </el-tabs>
+                    </div>
+                    <div class="question__btns"></div>
+                  </div>
+                  <div
+                    class="question"
+                    v-if="question.type == 5 && current == questionIndex"
+                    :key="questionIndex"
+                  >
+                    <div class="question__title">
+                      {{ questionIndex + 1 }}、简答题
+                    </div>
+                    <div class="question__desc" v-html="question.content"></div>
+                    <div class="question__content">
+                      <div
+                        class="question-list textarea"
+                        v-if="
+                          !question.ques.imageList.length && !question.ques.text
+                        "
+                      >
+                        <el-input
+                          type="textarea"
+                          rows="5"
+                          v-model="question.ansText.text"
+                          resize="none"
+                        ></el-input>
+                        <div class="upload clearfix">
+                          <div
+                            class="upload__imgs"
+                            v-for="(img, imgIndex) in question.ansText
+                              .imageList"
+                            :key="imgIndex"
+                          >
+                            <img :src="$tools.splitImgHost(img, true)" alt="" />
+                          </div>
+                          <div class="upload__btn">
+                            <i class="el-icon-plus icon"></i>
+                            <p>上传图片</p>
+                          </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>
+                  </div>
+                </template>
+              </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 yellow"></div>
+                      少选
+                    </div>
+                    <div class="item">
+                      <div class="box white"></div>
+                      未做
+                    </div>
+                  </div>
+                  <div class="card__content">
+                    <ul class="list">
+                      <li
+                        class="item white"
+                        v-for="(item, index) in questionList"
+                        :key="index"
+                        :class="{
+                          green: isRight(item, index),
+                          red: isWrong(item, index),
+                          yellow: isPart(item, index),
+                          blue: isOver(item, index),
+                        }"
+                        @click="changeIndex(index)"
+                      >
+                        {{ index + 1 }}
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BankExplain",
+  components: {},
+  data() {
+    return {
+      current: 0,
+      questionList: [],
+      activeName: "1",
+      goodsId: "",
+      orderGoodsId: "",
+      examId: "",
+      judge: ["错误", "正确"],
+      ast: [
+        "A",
+        "B",
+        "C",
+        "D",
+        "E",
+        "F",
+        "G",
+        "H",
+        "I",
+        "J",
+        "K",
+        "L",
+        "M",
+        "N",
+        "O",
+        "P",
+        "Q",
+        "R",
+        "S",
+        "T",
+        "U",
+        "V",
+        "W",
+        "X",
+        "Y",
+        "Z",
+      ],
+    };
+  },
+  mounted() {
+    this.orderGoodsId = this.$route.query.orderGoodsId;
+    this.examId = this.$route.query.examId;
+    this.goodsId = this.$route.params.goodsId;
+
+    if (this.activeName == "1") {
+      this.examRecordRightList();
+    } else {
+      this.examRecordWrongList();
+    }
+  },
+  methods: {
+    changeIndex(index) {
+      this.current = index;
+    },
+    tabChange(e) {
+      if (this.activeName == e.name) return;
+      this.activeName = e.name;
+      if (this.activeName == "1") {
+        this.examRecordRightList();
+      } else {
+        this.examRecordWrongList();
+      }
+    },
+    /**
+     * 获取错题列表
+     */
+    examRecordWrongList() {
+      this.$request
+        .examRecordWrongList({
+          examId: this.examId,
+          orderGoodsId: this.orderGoodsId,
+        })
+        .then((res) => {
+          res.rows.forEach((item, index) => {
+            if (typeof item.jsonStr == "string") {
+              item.jsonStr = JSON.parse(item.jsonStr);
+
+              if (item.type == 2) {
+                //多选
+                item.jsonStr.forEach((str) => {
+                  str.optionsId = "" + str.optionsId;
+                });
+                let arr = item.answerQuestion.split(",");
+                arr.forEach((a, i) => {
+                  arr[i] = "" + a;
+                });
+                item.ans = arr;
+                item.ques = item.ans;
+                return;
+              } else if (item.type == 5) {
+                item.ansText = {
+                  text: "",
+                  imageList: [],
+                };
+
+                item.ques = {
+                  text: item.analysisContent,
+                  imageList: [],
+                };
+
+                return;
+              } else if (item.type == 4) {
+                console.log(item.jsonStr);
+                item.ques = [];
+                item.current = 0;
+                let ansArr = [];
+                item.jsonStr.forEach((json, index) => {
+                  if (json.type == 1) {
+                    ansArr[index] = json.answerQuestion;
+                  } 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;
+                  } else if (json.type == 3) {
+                    ansArr[index] = json.answerQuestion;
+                  } else if (json.type == 5) {
+                    ansArr[index] = {
+                      text: "",
+                      imageList: [],
+                    };
+                    json.ansText = {
+                      text: "",
+                      imageList: [],
+                    };
+                  }
+                });
+
+                item.ans = ansArr;
+                item.ques = item.ans;
+                return;
+              }
+
+              item.ans = item.answerQuestion;
+              item.ques = item.ans;
+            } else {
+              item.ques = item.ans;
+            }
+          });
+          this.current = 0;
+          this.questionList = res.rows;
+        });
+    },
+    /**
+     * 获取对题列表
+     */
+    examRecordRightList() {
+      this.$request
+        .examRecordRightList({
+          examId: this.examId,
+          orderGoodsId: this.orderGoodsId,
+        })
+        .then((res) => {
+          res.rows.forEach((item, index) => {
+            if (typeof item.jsonStr == "string") {
+              item.jsonStr = JSON.parse(item.jsonStr);
+
+              if (item.type == 2) {
+                //多选
+                item.jsonStr.forEach((str) => {
+                  str.optionsId = "" + str.optionsId;
+                });
+                let arr = item.answerQuestion.split(",");
+                arr.forEach((a, i) => {
+                  arr[i] = "" + a;
+                });
+                item.ans = arr;
+                item.ques = item.ans;
+                return;
+              } else if (item.type == 5) {
+                item.ansText = {
+                  text: "",
+                  imageList: [],
+                };
+
+                item.ques = {
+                  text: item.analysisContent,
+                  imageList: [],
+                };
+
+                return;
+              } else if (item.type == 4) {
+                console.log(item.jsonStr);
+                item.ques = [];
+                item.current = 0;
+                let ansArr = [];
+                item.jsonStr.forEach((json, index) => {
+                  if (json.type == 1) {
+                    ansArr[index] = json.answerQuestion;
+                  } 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;
+                  } else if (json.type == 3) {
+                    ansArr[index] = json.answerQuestion;
+                  } else if (json.type == 5) {
+                    ansArr[index] = {
+                      text: "",
+                      imageList: [],
+                    };
+                    json.ansText = {
+                      text: "",
+                      imageList: [],
+                    };
+                  }
+                });
+
+                item.ans = ansArr;
+                item.ques = item.ans;
+                return;
+              }
+
+              item.ans = item.answerQuestion;
+              item.ques = item.ans;
+            } else {
+              item.ques = item.ans;
+            }
+          });
+
+          this.current = 0;
+          this.questionList = res.rows;
+        });
+    },
+    changeQuestion(index) {
+      this.questionIndex = 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].ques.some((item, i) => {
+            return this.questionList[index].ans.indexOf(item) == -1;
+          });
+          //判断
+        } else if (item.type == 3) {
+          return this.questionList[index].ques != this.questionList[index].ans;
+        } else {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+    isPart(item, index) {
+      if (this.questionList[index].ques) {
+        if (item.type == 2) {
+          let isWrong = this.questionList[index].ques.some((item, i) => {
+            return this.questionList[index].ans.indexOf(item) == -1;
+          });
+
+          let isRight = this.questionList[index].ans.every((item, i) => {
+            return item == this.questionList[index].ques[i];
+          });
+
+          if (!isRight && !isWrong) {
+            return true;
+          }
+        }
+      } else {
+        return false;
+      }
+    },
+    right(bankIndex, ansIndex, option) {
+      if (
+        this.questionList[bankIndex].ques[ansIndex] &&
+        this.questionList[bankIndex].ans[ansIndex]
+      ) {
+        if (
+          this.questionList[bankIndex].ques[ansIndex].indexOf(
+            option.optionsId
+          ) != -1 ||
+          this.questionList[bankIndex].ans[ansIndex].indexOf(
+            option.optionsId
+          ) != -1
+        ) {
+          return true;
+        } else {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+
+    wrong(bankIndex, ansIndex, option) {
+      if (
+        this.questionList[bankIndex].ques[ansIndex] &&
+        this.questionList[bankIndex].ans[ansIndex]
+      ) {
+        if (
+          this.questionList[bankIndex].ques[ansIndex].indexOf(
+            option.optionsId
+          ) != -1 &&
+          this.questionList[bankIndex].ans[ansIndex].indexOf(
+            option.optionsId
+          ) == -1
+        ) {
+          return true;
+        } else {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+    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;
+      }
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.bank-explain {
+  .section {
+    overflow: hidden;
+    &__header {
+      height: 20px;
+      margin-top: 20px;
+    }
+
+    &__body {
+      .explain-record {
+        &__header {
+        }
+
+        &__body {
+          .left-box {
+            float: left;
+            width: 810px;
+            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 {
+              min-height: 490px;
+              border-bottom: 1px solid #eee;
+
+              .question {
+                padding: 12px 0 0 12px;
+                display: flex;
+                flex-direction: column;
+                height: 100%;
+
+                &__title {
+                  padding-left: 12px;
+                  font-size: 16px;
+                  font-family: Microsoft YaHei;
+                  font-weight: bold;
+                  color: #333333;
+                  line-height: 24px;
+                }
+
+                &__desc {
+                  padding-left: 12px;
+                  margin-top: 20px;
+                  font-size: 16px;
+                  font-family: Microsoft YaHei;
+                  font-weight: 400;
+                  color: #666666;
+                  line-height: 24px;
+
+                  /deep/ img {
+                    max-width: 100% !important;
+                  }
+                }
+
+                &__content {
+                  /deep/ .el-tabs__item {
+                    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: normal;
+                    }
+                  }
+
+                  .answer-list {
+                    height: 40px;
+                    border-top: 1px solid #eee;
+                    border-bottom: 1px solid #eee;
+                    margin-top: 24px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding: 0 24px;
+
+                    &__left {
+                      font-size: 16px;
+                      font-family: Microsoft YaHei;
+                      font-weight: 400;
+                      color: #333333;
+                      line-height: 24px;
+                    }
+
+                    &__right {
+                      font-size: 16px;
+                      font-family: Microsoft YaHei;
+                      font-weight: 400;
+                      color: #333333;
+                      line-height: 24px;
+                    }
+                  }
+
+                  .explain-list {
+                    padding: 12px 24px;
+
+                    &__header {
+                      font-size: 16px;
+                      font-family: Microsoft YaHei;
+                      font-weight: bold;
+                      color: #666666;
+                      line-height: 24px;
+                    }
+
+                    &__body {
+                      margin-top: 12px;
+                      font-size: 16px;
+                      font-family: Microsoft YaHei;
+                      font-weight: 400;
+                      color: #666666;
+                      line-height: 24px;
+                    }
+
+                    .upload {
+                      margin-top: 10px;
+
+                      &__imgs {
+                        margin-right: 10px;
+                        width: 80px;
+                        height: 80px;
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                        border-radius: 4px;
+                        position: relative;
+                        display: flex;
+                        float: left;
+                        align-items: center;
+                        justify-content: center;
+
+                        img {
+                          max-width: 100%;
+                          max-height: 100%;
+                        }
+                      }
+                    }
+                  }
+                }
+
+                &__btns {
+                  position: relative;
+                  height: 32px;
+                  .submit {
+                    cursor: pointer;
+                    margin: 0 auto;
+                    width: 140px;
+                    height: 32px;
+                    background: #3f8dfd;
+                    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
+                    border-radius: 16px;
+                    text-align: center;
+                    line-height: 32px;
+                    color: #fff;
+                    font-size: 16px;
+                  }
+
+                  .collect {
+                    cursor: pointer;
+                    position: absolute;
+                    right: 0;
+                    top: 5px;
+                    font-size: 12px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: #3f8dfd;
+                    line-height: 24px;
+                  }
+                }
+              }
+            }
+
+            &__footer {
+              height: 40px;
+              display: flex;
+              justify-content: space-around;
+              align-items: center;
+
+              .btn {
+                cursor: pointer;
+                width: 140px;
+                height: 32px;
+                background: #ffffff;
+                border: 1px solid #3f8dfd;
+                border-radius: 16px;
+                line-height: 32px;
+                text-align: center;
+                color: #3f8dfd;
+              }
+            }
+          }
+
+          .right-box {
+            float: right;
+            width: 299px;
+
+            &__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: 490px;
+              border-bottom: 1px solid #eee;
+
+              .card {
+                &__note {
+                  display: flex;
+                  height: 64px;
+                  align-items: center;
+                  border-bottom: 1px solid #eee;
+                  flex-wrap: wrap;
+
+                  .item {
+                    display: flex;
+                    align-items: center;
+                    margin-left: 10px;
+                    width: 84px;
+                    font-size: 12px;
+
+                    .box {
+                      margin-right: 5px;
+                      width: 16px;
+                      height: 16px;
+                      border-radius: 4px;
+
+                      &.white {
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                      }
+
+                      &.green {
+                        background: #37c65b;
+                      }
+                      &.red {
+                        background: #ff3a30;
+                      }
+
+                      &.yellow {
+                        background: #ffc53d;
+                      }
+                      &.blue {
+                        background: #3f8dfd;
+                      }
+                    }
+                  }
+                }
+
+                &__content {
+                  height: 386px;
+                  overflow-y: scroll;
+
+                  &::-webkit-scrollbar {
+                    width: 6px;
+                  }
+                  &::-webkit-scrollbar-track {
+                    background-color: #fff;
+                    -webkit-border-radius: 2em;
+                    -moz-border-radius: 2em;
+                    border-radius: 2em;
+                  }
+                  &::-webkit-scrollbar-thumb {
+                    background-color: #eeeeee;
+                    -webkit-border-radius: 2em;
+                    -moz-border-radius: 2em;
+                    border-radius: 2em;
+                  }
+                  .list {
+                    display: flex;
+                    flex-wrap: wrap;
+
+                    .item {
+                      width: 40px;
+                      height: 40px;
+                      border-radius: 10px;
+                      text-align: center;
+                      line-height: 40px;
+                      margin-left: 16px;
+                      margin-top: 16px;
+                      cursor: pointer;
+
+                      &.white {
+                        line-height: 38px;
+                        color: #333333;
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                      }
+
+                      &.green {
+                        color: #fff;
+                        background: #37c65b;
+                      }
+
+                      &.red {
+                        color: #fff;
+                        background: #ff3a30;
+                      }
+
+                      &.blue {
+                        border: 1rpx solid #eeeeee;
+                        color: #fff;
+                        background: #3f8dfd;
+                      }
+                      &.yellow {
+                        background: #ffc53d;
+                      }
+
+                      &.disabled {
+                        cursor: not-allowed;
+                        line-height: 38px;
+                        color: #eeeeee;
+                        background: #ffffff;
+                        border: 1px solid #eeeeee;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+
+            &__footer {
+              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;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,597 @@
+<template>
+  <div class="bank-statistics">
+    <section class="section">
+      <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="goods-menu">
+          <div class="goods-menu__header clearfix">
+            <div class="chart">
+              <div class="chart__title">正确率统计（不含简答和案例题）</div>
+              <div class="chart__content">
+                <div class="circle-wrap">
+                  <div class="circle">
+                    <el-progress
+                      type="circle"
+                      :percentage="
+                        toFixed(
+                          (goodsCount.rightNum / goodsCount.doNum) * 100
+                        ) || 0
+                      "
+                      color="#34C759"
+                      :stroke-width="10"
+                    ></el-progress>
+                  </div>
+                </div>
+                <div class="text">
+                  <div class="green">正确：{{ goodsCount.rightNum }}</div>
+                  <div class="normal">已做：{{ goodsCount.doNum }}</div>
+                </div>
+              </div>
+            </div>
+            <div class="chart">
+              <div class="chart__title">做题进度（不含简答和案例题）</div>
+              <div class="chart__content">
+                <div class="circle-wrap">
+                  <div class="circle">
+                    <el-progress
+                      type="circle"
+                      :percentage="
+                        toFixed(
+                          (goodsCount.doNum / goodsCount.totalNum) * 100
+                        ) || 0
+                      "
+                      color="#3F8DFD"
+                      :stroke-width="10"
+                    ></el-progress>
+                  </div>
+                </div>
+
+                <div class="text">
+                  <div class="blue">已做：{{ goodsCount.doNum }}</div>
+                  <div class="normal">总数：{{ goodsCount.totalNum }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="goods-menu__body">
+            <div class="menu-title">
+              <div class="percent-title">正确率</div>
+              <div class="num-title">已做/总数</div>
+            </div>
+            <div class="menu-list">
+              <div class="item" v-for="(item, index) in bankList" :key="index">
+                <template v-if="item.type == 1">
+                  <div class="item__title" @click="moduleExam(item)">
+                    <i
+                      :class="{
+                        'el-icon-caret-right': !item.showList,
+                        'el-icon-caret-bottom': item.showList,
+                      }"
+                    ></i>
+                    {{ item.name }}
+                  </div>
+                  <div class="item__content" v-if="item.showList">
+                    <div class="bank-chapter">
+                      <div
+                        class="bank-chapter__item"
+                        v-for="(chapter, chapterIndex) in item.list"
+                        :key="chapterIndex"
+                      >
+                        <div
+                          class="bank-chapter__item__text"
+                          @click="chapterExam(chapter, item.majorId)"
+                        >
+                          <i
+                            :class="{
+                              'el-icon-caret-right': !chapter.showList,
+                              'el-icon-caret-bottom': chapter.showList,
+                            }"
+                          ></i
+                          >{{ chapter.name }}
+                        </div>
+
+                        <div class="bank-section" v-if="chapter.showList">
+                          <div
+                            class="bank-section__item"
+                            v-for="(section, sectionIndex) in chapter.list"
+                            :key="sectionIndex"
+                          >
+                            <div class="bank-section__item__text">
+                              <div class="title">{{ section.examName }}</div>
+                            </div>
+                            <div class="num">
+                              <!-- 练习 -->
+                              <template v-if="section.doType == 1">
+                                {{
+                                  section.doQuestionNum != 0
+                                    ? (
+                                        (section.rightQuestionNum /
+                                          section.doQuestionNum) *
+                                        100
+                                      ).toFixed(0) + "%"
+                                    : 0 + "%"
+                                }}
+                              </template>
+                              <!-- 考试 -->
+                              <template v-if="section.doType == 2">
+                                {{
+                                  section.totalQuestionNum != 0
+                                    ? (
+                                        (section.rightQuestionNum /
+                                          section.totalQuestionNum) *
+                                        100
+                                      ).toFixed(0) + "%"
+                                    : 0 + "%"
+                                }}
+                              </template>
+                            </div>
+                            <div class="num">
+                              {{
+                                section.doQuestionNum +
+                                "/" +
+                                section.totalQuestionNum
+                              }}
+                            </div>
+                            <el-button
+                              type="primary"
+                              @click="goDetail(section)"
+                              class="btn"
+                              >详情</el-button
+                            >
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+
+                <template v-if="item.type == 2">
+                  <div class="item__content">
+                    <div class="bank-chapter">
+                      <div class="bank-chapter__item">
+                        <div
+                          class="bank-chapter__item__text"
+                          @click="chapterExam(item, 0)"
+                        >
+                          <i
+                            :class="{
+                              'el-icon-caret-right': !item.showList,
+                              'el-icon-caret-bottom': item.showList,
+                            }"
+                          ></i
+                          >{{ item.name }}
+                        </div>
+
+                        <div class="bank-section" v-if="item.showList">
+                          <div
+                            class="bank-section__item"
+                            v-for="(section, sectionIndex) in item.list"
+                            :key="sectionIndex"
+                          >
+                            <div class="bank-section__item__text">
+                              <div class="title">{{ section.examName }}</div>
+                            </div>
+                            <div class="num">
+                              <!-- 练习 -->
+                              <template v-if="section.doType == 1">
+                                {{
+                                  section.doQuestionNum != 0
+                                    ? (
+                                        (section.rightQuestionNum /
+                                          section.doQuestionNum) *
+                                        100
+                                      ).toFixed(0) + "%"
+                                    : 0 + "%"
+                                }}
+                              </template>
+                              <!-- 考试 -->
+                              <template v-if="section.doType == 2">
+                                {{
+                                  section.totalQuestionNum != 0
+                                    ? (
+                                        (section.rightQuestionNum /
+                                          section.totalQuestionNum) *
+                                        100
+                                      ).toFixed(0) + "%"
+                                    : 0 + "%"
+                                }}
+                              </template>
+                            </div>
+                            <div class="num">
+                              {{
+                                section.doQuestionNum +
+                                "/" +
+                                section.totalQuestionNum
+                              }}
+                            </div>
+                            <el-button
+                              type="primary"
+                              @click="goDetail(section)"
+                              class="btn"
+                              >详情</el-button
+                            >
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+
+                <template v-if="item.type == 3">
+                  <div class="item__content">
+                    <div class="bank-section">
+                      <div class="bank-section__item">
+                        <div class="bank-section__item__text">
+                          <div class="title">{{ item.name }}</div>
+                        </div>
+                        <div class="num">
+                          <!-- 练习 -->
+                          <template v-if="item.doType == 1">
+                            {{
+                              item.doQuestionNum != 0
+                                ? (
+                                    (item.rightQuestionNum /
+                                      item.doQuestionNum) *
+                                    100
+                                  ).toFixed(0) + "%"
+                                : 0 + "%"
+                            }}
+                          </template>
+                          <!-- 考试 -->
+                          <template v-if="item.doType == 2">
+                            {{
+                              item.totalQuestionNum != 0
+                                ? (
+                                    (item.rightQuestionNum /
+                                      item.totalQuestionNum) *
+                                    100
+                                  ).toFixed(0) + "%"
+                                : 0 + "%"
+                            }}
+                          </template>
+                        </div>
+                        <div class="num">
+                          {{ item.doQuestionNum + "/" + item.totalQuestionNum }}
+                        </div>
+                        <el-button
+                          type="primary"
+                          @click="goDetail(item)"
+                          class="btn"
+                          >详情</el-button
+                        >
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BankDetail",
+  components: {},
+  data() {
+    return {
+      orderGoodsId: "",
+      goodsCount: {},
+      bankList: [],
+      goodsId: 0,
+    };
+  },
+  mounted() {
+    this.orderGoodsId = this.$route.query.orderGoodsId || "";
+    this.goodsId = this.$route.params.goodsId;
+    this.goodsBankQuestionNum();
+    this.goodsBankDolist();
+  },
+  methods: {
+    toFixed(num) {
+      if (num) {
+        let str = String(num).indexOf(".");
+
+        if (str != -1) {
+          return +num.toFixed(2);
+        } else {
+          return num;
+        }
+      } else {
+        return 0;
+      }
+    },
+    handleNodeClick(data) {
+      console.log(data);
+    },
+    goDetail(section) {
+      this.$router.push({
+        path: "/person-center/my-bank/bank-explain-detail/" + this.goodsId,
+        query: {
+          examId: section.examId || section.majorId,
+          orderGoodsId: this.orderGoodsId,
+        },
+      });
+    },
+
+    chapterExam(chapter, moduleId) {
+      if (chapter.list.length) {
+        chapter.showList = !chapter.showList;
+        return;
+      }
+      this.$request
+        .goodsExamDolist({
+          moduleExamId: moduleId,
+          chapterExamId: chapter.chapterExamId || chapter.majorId,
+          orderGoodsId: this.orderGoodsId,
+          goodsId: this.goodsId,
+        })
+        .then((res) => {
+          chapter.showList = !chapter.showList;
+          chapter.list = res.data;
+        });
+    },
+
+    moduleExam(module) {
+      if (module.list.length) {
+        module.showList = !module.showList;
+        return;
+      }
+      this.$request
+        .goodsChapterDolist({
+          moduleExamId: module.majorId,
+          orderGoodsId: this.orderGoodsId,
+          goodsId: this.goodsId,
+        })
+        .then((res) => {
+          res.data.forEach((item) => {
+            item.showList = false;
+            item.list = [];
+          });
+          module.showList = !module.showList;
+          module.list = res.data;
+        });
+    },
+
+    goodsBankDolist() {
+      this.$request
+        .goodsBankDolist({
+          orderGoodsId: this.orderGoodsId,
+          goodsId: this.goodsId,
+        })
+        .then((res) => {
+          console.log(res);
+          res.data.forEach((item) => {
+            item.showList = false;
+            item.list = [];
+          });
+          this.bankList = res.data;
+        });
+    },
+    goodsBankQuestionNum() {
+      this.$request.goodsBankQuestionNum(this.orderGoodsId).then((res) => {
+        this.goodsCount = res.data;
+      });
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.bank-statistics {
+  .section {
+    overflow: hidden;
+    &__header {
+      height: 20px;
+      margin-top: 20px;
+    }
+
+    &__body {
+      .goods-menu {
+        &__header {
+          .chart {
+            margin-right: 24px;
+            padding: 16px;
+            float: left;
+            width: 300px;
+            height: 240px;
+            background: #ffffff;
+            border: 1px solid #eeeeee;
+            border-radius: 8px;
+
+            &__title {
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #333333;
+              line-height: 24px;
+            }
+
+            &__content {
+              display: flex;
+              align-items: center;
+
+              .circle-wrap {
+                display: table;
+
+                .circle {
+                  display: table-cell;
+                  text-align: center;
+                  vertical-align: middle;
+                  width: 158px;
+                  height: 162px;
+                }
+              }
+
+              .text {
+                margin-left: 24px;
+                flex: 1;
+                .green {
+                  font-size: 14px;
+                  font-family: Microsoft YaHei;
+                  font-weight: 400;
+                  color: #34c759;
+                  line-height: 24px;
+                  margin: 20px 0;
+                }
+
+                .blue {
+                  font-size: 14px;
+                  font-family: Microsoft YaHei;
+                  font-weight: 400;
+                  color: #3f8dfd;
+                  line-height: 24px;
+                  margin: 20px 0;
+                }
+
+                .normal {
+                  font-size: 14px;
+                  font-family: Microsoft YaHei;
+                  font-weight: 400;
+                  color: #999999;
+                  line-height: 24px;
+                  margin: 20px 0;
+                }
+              }
+            }
+          }
+        }
+
+        &__body {
+          margin-top: 32px;
+          padding: 16px;
+          border-radius: 10px;
+          background: #f5f7fa;
+
+          .menu-title {
+            padding: 10px;
+            text-align: right;
+            .percent-title {
+              width: 80px;
+              display: inline-block;
+              text-align: center;
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #999999;
+              margin-right: 20px;
+            }
+            .num-title {
+              width: 80px;
+              display: inline-block;
+              text-align: center;
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #999999;
+              margin-right: 128px;
+            }
+          }
+
+          .menu-list {
+            .item {
+              overflow: hidden;
+              background: #fff;
+              padding: 0 10px;
+
+              &__title {
+                padding: 20px 0;
+                cursor: pointer;
+                font-size: 16px;
+                font-family: Microsoft YaHei;
+                font-weight: bold;
+                color: #333333;
+                border-bottom: 1px solid #eeeeee;
+
+                .note {
+                  display: inline-block;
+                  margin-left: 20px;
+                  width: 40px;
+                  height: 24px;
+                  border: 1px solid #ff3b30;
+                  border-radius: 8px;
+                  line-height: 22px;
+                  color: #ff3b30;
+                  text-align: center;
+                }
+              }
+
+              &__content {
+                background: #fff;
+
+                .bank-chapter {
+                  margin-left: 4px;
+
+                  &__item {
+                    font-size: 16px;
+                    align-items: center;
+
+                    &__text {
+                      padding-top: 20px;
+                      padding-bottom: 20px;
+                      border-bottom: 1px solid #eeeeee;
+                      cursor: pointer;
+                      flex: 1;
+                    }
+                  }
+                }
+
+                .bank-section {
+                  margin-left: 14px;
+
+                  &__item {
+                    padding-top: 20px;
+                    padding-bottom: 20px;
+                    border-bottom: 1px solid #eeeeee;
+                    font-size: 16px;
+                    display: flex;
+                    align-items: center;
+
+                    &__text {
+                      flex: 1;
+                    }
+
+                    .num {
+                      width: 80px;
+                      text-align: center;
+                      font-size: 14px;
+                      font-family: Microsoft YaHei;
+                      font-weight: 400;
+                      color: #999999;
+                      margin-right: 20px;
+                    }
+
+                    .btn {
+                      margin-right: 20px;
+                      width: 88px;
+                      height: 32px;
+                      padding: 0;
+                      border-radius: 16px;
+                      line-height: 32px;
+                      text-align: center;
+                      cursor: pointer;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/person-center/free-bank/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+</style>

src/pages/person-center/free-bank/index/index.vue

@@ -0,0 +1,313 @@
+<template>
+  <div class="my-bank">
+    <div class="my-bank__header">
+      <el-tabs :value="activeName" @tab-click="tabChange">
+        <el-tab-pane
+          v-for="(tab, tabIndex) in tabList"
+          :key="tabIndex"
+          :label="tab.educationName"
+          :name="tab.id"
+        ></el-tab-pane>
+      </el-tabs>
+    </div>
+
+    <div class="my-bank__body">
+      <div class="no-data" v-if="list.length == 0">暂无可以学习的题库哦~</div>
+      <div class="list" v-else>
+        <div class="bank-item" v-for="(item, index) in list" :key="index">
+          <div class="bank-item__header">
+            {{ item.goodsName }}
+            <div
+              class="time"
+              v-if="item.serviceStartTime && item.serviceEndTime"
+            >
+              学习服务期：{{
+                $tools.timestampToTime(item.serviceStartTime, true, true)
+              }}-{{ $tools.timestampToTime(item.serviceEndTime, true, true) }}
+            </div>
+          </div>
+          <div class="bank-item__body clearfix">
+            <div class="img">
+              <img :src="$tools.splitImgHost(item.coverUrl, true)" alt="" />
+            </div>
+            <div class="text">
+              <!-- <div class="title">
+                <div class="note">60学时</div>
+              </div> -->
+              <div class="progress">
+                学习进度
+                <el-progress
+                  class="progress-line"
+                  :stroke-width="16"
+                  :format="progressText(item)"
+                  :percentage="
+                    item.totalNum != 0 ? (item.doNum / item.totalNum) * 100 : 0
+                  "
+                ></el-progress>
+              </div>
+            </div>
+            <div class="btns-wrap">
+              <div class="btns">
+                <el-button type="primary" class="btn" @click="goStudy(item)"
+                  >进入学习</el-button
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="pagination">
+        <el-pagination
+          @current-change="currentChange"
+          background
+          layout="prev, pager, next"
+          :total="total"
+          :pager-count="5"
+          :page-size="param.pageSize"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Mybank",
+  data() {
+    return {
+      param: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      tabList: [],
+      list: [],
+      activeName: "-1",
+      total: 0,
+    };
+  },
+  async mounted() {
+    // await this.orderUserEduList();
+    this.bankQuestionListFreeGoodsList();
+  },
+  methods: {
+    tabChange(e) {
+      if (this.activeName == e.name) {
+        return;
+      }
+
+      console.log(e.name);
+      this.activeName = e.name;
+      this.bankQuestionListFreeGoodsList();
+    },
+    orderUserEduList() {
+      return new Promise((resolve) => {
+        this.$request
+          .orderUserEduList({
+            goodsType: 2,
+          })
+          .then((res) => {
+            res.rows.forEach((row) => {
+              row.id = row.id + "";
+            });
+            this.tabList.push(
+              {
+                educationName: "全部题库",
+                id: "-1",
+              },
+              ...res.rows
+            );
+
+            resolve();
+          });
+      });
+    },
+    progressText(item) {
+      return () => {
+        return item.doNum + "/" + item.totalNum;
+      };
+    },
+    currentChange(e) {
+      this.param.pageNum = e;
+      this.bankQuestionListFreeGoodsList();
+    },
+    bankQuestionListFreeGoodsList() {
+      let param = JSON.parse(JSON.stringify(this.param));
+
+      if (this.activeName == "-1") {
+        param.educationTypeId = "";
+      } else {
+        param.educationTypeId = this.activeName;
+      }
+      this.$request.bankQuestionListFreeGoodsList(param).then((res) => {
+        res.rows.forEach((item) => {
+          console.log(`${item.goodsName}：${item.doNum}/${item.totalNum}`);
+        });
+        this.list = res.rows;
+        this.total = res.total;
+      });
+    },
+    studyIn(item, index) {
+      this.itemIndex = index;
+      uni.navigateTo({
+        url: "/pages2/bank/question_detail?id=" + item.goodsId,
+        query: {
+          orderGoodsId: item.orderGoodsId,
+        },
+      });
+    },
+
+    pay() {
+      this.$router.push({
+        path: "payment-success",
+      });
+    },
+    goStudy(item) {
+      this.$router.push({
+        path: "/person-center/my-bank/bank-detail/" + item.goodsId,
+        query: {
+          orderGoodsId: item.orderGoodsId,
+        },
+      });
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.my-bank {
+  &__header {
+    /deep/ .el-tabs__header {
+      margin-bottom: 0;
+    }
+  }
+  &__body {
+    .list {
+      .bank-item {
+        margin-top: 24px;
+        background: #fafbfc;
+        border-radius: 8px;
+        overflow: hidden;
+
+        &__header {
+          height: 40px;
+          line-height: 40px;
+          border-bottom: 1px solid #eee;
+          padding: 0 18px;
+          font-size: 16px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          color: #333333;
+
+          .time {
+            float: right;
+            line-height: 40px;
+            text-align: right;
+            font-size: 12px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #666666;
+          }
+        }
+
+        &__body {
+          .img {
+            float: left;
+            width: 160px;
+            height: 90px;
+            display: table-cell;
+
+            img {
+              max-width: 100%;
+              max-height: 100%;
+              display: inline-block;
+              vertical-align: middle;
+            }
+          }
+
+          .text {
+            float: left;
+            margin-left: 12px;
+            .title {
+              margin-top: 10px;
+              font-size: 16px;
+              font-family: Microsoft YaHei;
+              font-weight: bold;
+              color: #333333;
+              .note {
+                display: inline-block;
+                vertical-align: middle;
+                border: 1px solid #333333;
+                border-radius: 4px;
+                font-size: 12px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #333333;
+                padding: 2px 5px;
+              }
+            }
+
+            .progress {
+              margin-top: 30px;
+
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #333333;
+
+              &-line {
+                width: 250px;
+                display: inline-block;
+              }
+
+              /deep/ .el-progress-bar {
+                padding-right: 100px;
+                margin-right: -100px;
+              }
+            }
+          }
+
+          .btns-wrap {
+            display: table;
+            float: right;
+            height: 90px;
+            width: 130px;
+
+            .btns {
+              display: table-cell;
+              vertical-align: middle;
+              text-align: center;
+
+              .btn {
+                cursor: pointer;
+                margin: 2px 0;
+                width: 122px;
+                height: 32px;
+                border-radius: 16px;
+                display: inline-block;
+                text-align: center;
+                line-height: 32px;
+                padding: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .no-data {
+      text-align: center;
+      padding: 50px 0;
+      color: #666;
+      font-size: 16px;
+    }
+
+    .pagination {
+      padding: 30px 0;
+      text-align: center;
+    }
+  }
+}
+</style>

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

@@ -409,6 +409,49 @@
       </div>
     </div>
 
+    <el-dialog
+      title="实名验证确认"
+      :visible.sync="showConfirm"
+      width="600px"
+      class="showconfirm"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+    >
+      <div class="showconfirm__content">
+        <div class="text">
+          为避免个人信息不正确导致您的学习时长无效，请认真核对以下信息是否正确，如信息有误请取消当前操作，立刻联系020-38946666
+        </div>
+        <el-descriptions :column="1">
+          <el-descriptions-item label="姓名">{{
+            userInfo && userInfo.realname
+          }}</el-descriptions-item>
+          <el-descriptions-item label="手机号">{{
+            userInfo && userInfo.telphone
+          }}</el-descriptions-item>
+          <el-descriptions-item label="身份证号">{{
+            userInfo && userInfo.idCard
+          }}</el-descriptions-item>
+        </el-descriptions>
+
+        <div class="">
+          <el-checkbox v-model="confirmChecked">确认个人信息无误</el-checkbox>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showConfirm = false">取 消</el-button>
+        <el-button
+          type="primary"
+          @click="confirmUser"
+          :disabled="confirmCount > 0"
+          :loading="confirmLoading"
+          >{{
+            confirmCount > 0 ? "确 定(" + confirmCount + ")" : "确 定"
+          }}</el-button
+        >
+      </span>
+    </el-dialog>
+
     <SelectClassModal
       ref="selectClassModal"
       @selectClassOk="selectClassOk"
@@ -438,6 +481,12 @@ export default {
   },
   data() {
     return {
+      activeItem: {},
+      confirmChecked: false,
+      confirmTimer: null,
+      confirmLoading: false,
+      confirmCount: 10,
+      showConfirm: false,
       tabList: [],
       sysTime: 0,
       activeName: "-1",
@@ -469,6 +518,45 @@ export default {
       this.activeName = e.name;
       this.courseGoodsList();
     },
+    confirmUser() {
+      if (!this.confirmChecked) {
+        this.$message.warning("请勾选确认个人信息无误");
+        return;
+      }
+      this.confirmLoading = true;
+      let infoJson = {
+        realname: this.userInfo.realname,
+        idCard: this.userInfo.idCard,
+        telphone: this.userInfo.telphone,
+      };
+      this.$request
+        .userConfirminfo({
+          infoJson: JSON.stringify(infoJson),
+          orderGoodsId: this.activeItem.orderGoodsId,
+        })
+        .then((res) => {
+          if (res.data.pushInfo) {
+            this.$message.success("提交成功");
+          } else {
+            this.$confirm(
+              "开通信息推送不成功，无法进入学习，请联系020-87085982！",
+              "提示",
+              {
+                confirmButtonText: "确定",
+                closeOnClickModal: false,
+                closeOnPressEscape: false,
+                distinguishCancelAndClose: false,
+                showClose: false,
+                showCancelButton: false,
+              }
+            )
+              .then((_) => {})
+              .catch((_) => {});
+          }
+          this.showConfirm = false;
+          this.confirmLoading = false;
+        });
+    },
     orderUserEduList() {
       return new Promise((resolve) => {
         this.$request
@@ -497,6 +585,7 @@ export default {
       this.courseGoodsList();
     },
     async goCourseDetail(item) {
+      this.activeItem = item;
       if (item.interfaceAccountId > 0) {
         //学习账号已开通
 
@@ -626,14 +715,32 @@ export default {
               })
               .then((res) => {
                 if (res.rows.length) {
-                  this.$router.push({
-                    path: `/my-course-detail/${item.goodsId}`,
-                    query: {
-                      gradeId: item.gradeId,
-                      orderGoodsId: item.orderGoodsId,
-                      courseId: res.rows[0].courseId || "",
-                    },
-                  });
+                  if (
+                    item.officialName &&
+                    item.businessName == "二级" &&
+                    item.projectName == "建造师"
+                  ) {
+                    this.userConfirmInfoDetail().then((res) => {
+                      this.$router.push({
+                        path: `/my-course-detail/${item.goodsId}`,
+                        query: {
+                          gradeId: item.gradeId,
+                          orderGoodsId: item.orderGoodsId,
+                          courseId: res.rows[0].courseId || "",
+                        },
+                      });
+                    });
+                  } else {
+                    console.log(item, "item");
+                    this.$router.push({
+                      path: `/my-course-detail/${item.goodsId}`,
+                      query: {
+                        gradeId: item.gradeId,
+                        orderGoodsId: item.orderGoodsId,
+                        courseId: res.rows[0].courseId || "",
+                      },
+                    });
+                  }
                 } else {
                   this.$message({
                     type: "warning",
@@ -670,6 +777,48 @@ export default {
       }
     },
 
+    userConfirmInfoDetail() {
+      return new Promise((resolve) => {
+        this.$request
+          .userConfirmInfoDetail({
+            orderGoodsId: this.activeItem.orderGoodsId,
+          })
+          .then((res) => {
+            if (!res.data) {
+              clearInterval(this.confirmTimer);
+              this.confirmCount = 10;
+              this.showConfirm = true;
+              this.confirmTimer = setInterval(() => {
+                if (this.confirmCount > 0) {
+                  this.confirmCount--;
+                } else {
+                  clearInterval(this.confirmTimer);
+                }
+              }, 1000);
+            } else {
+              if (res.data.pushInfo) {
+                resolve();
+              } else {
+                this.$confirm(
+                  "开通信息推送不成功，无法进入学习，请联系020-87085982！",
+                  "提示",
+                  {
+                    confirmButtonText: "确定",
+                    closeOnClickModal: false,
+                    closeOnPressEscape: false,
+                    distinguishCancelAndClose: false,
+                    showClose: false,
+                    showCancelButton: false,
+                  }
+                )
+                  .then((_) => {})
+                  .catch((_) => {});
+              }
+            }
+          });
+      });
+    },
+
     appBeforeAddress(item) {
       this.$refs.exercisesModal.showModal(item);
     },