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

<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-num">已做/总数</span>
                  <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>
                                <el-button
                                  type="text"
                                  class="btn"
                                  style="width: auto"
                                  >{{ section.questionNum || 0 }}/{{
                                    section.totalQuestionNum || 0
                                  }}</el-button
                                >
                                <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>
                                <el-button
                                  type="text"
                                  class="btn"
                                  style="width: auto"
                                  >{{ section.questionNum || 0 }}/{{
                                    section.totalQuestionNum || 0
                                  }}</el-button
                                >
                                <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>
                            <el-button
                              type="text"
                              class="btn"
                              style="width: auto"
                              >{{ section.questionNum || 0 }}/{{
                                section.totalQuestionNum || 0
                              }}</el-button
                            >
                            <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="#FADB14"
                        :format="() => collectTotal || '0'"
                        :percentage="25"
                      ></el-progress>
                    </div>
                  </div>
                  <div class="list" v-if="collectName == '1'">
                    <div
                      class="list__item"
                      v-for="(item, index) in collectExamList"
                      :key="index"
                    >
                      <div class="title">
                        {{ item.examName }}
                      </div>
                      <div class="content clearfix">
                        <div class="left">
                          收藏题<span class="red">{{ item.questionNum }}</span>
                        </div>
                        <div class="right">
                          <el-button
                            type="primary"
                            @click="
                              go('/subject/collect-bank/' + item.examId, {
                                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"
                @click="toGoodsDetail(itemy)"
              >
                <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>
export default {
  name: "BankDetail",
  components: {},
  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 >= 4) {
              break;
            } else {
              ary.push(array[i]);
            }
          }
        }
        return ary;
      };
    },
  },
  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: 1,
        })
        .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,
          orderGoodsId: this.orderGoodsId,
        })
        .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,
          orderGoodsId: this.orderGoodsId,
        })
        .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,
          orderGoodsId: this.orderGoodsId,
        })
        .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,
          orderGoodsId: this.orderGoodsId,
        })
        .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">
.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;
                }
              }
            }

            .tabs {
            }
          }

          &__body {
            .box {
              width: 300px;
              height: 240px;
              background: #ffffff;
              border: 1px solid #d9d9d9;
              border-radius: 8px;
              padding: 16px;

              .title {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
              }

              .circle {
                width: 160px;
                height: 160px;
                margin: 10px auto 0;
              }
            }

            .list {
              overflow: hidden;
              &__item {
                margin-top: 16px;
                height: 98px;
                background: #f7f9fc;
                box-shadow: 0px 3px 6px 0px #e1e6ed;
                border-radius: 8px;

                .title {
                  padding: 10px 16px;
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: bold;
                  color: #333333;
                }

                .content {
                  border-top: 1px solid #eee;
                  .left {
                    float: left;
                    margin-left: 16px;
                    margin-top: 10px;
                    padding: 4px 12px;
                    border: 1px solid #666666;
                    border-radius: 4px;
                    font-size: 14px;

                    .red {
                      margin-left: 12px;
                      color: #f5222d;
                      font-size: 14px;
                    }
                  }

                  .right {
                    float: right;
                    margin-right: 16px;
                    margin-top: 10px;
                    .btn {
                      width: 88px;
                      height: 32px;
                      border-radius: 16px;
                      text-align: center;
                      padding: 0;
                      line-height: 32px;
                    }
                  }
                }
              }
            }
          }
        }
      }

      .right-box {
        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>