saas_pc/src/pages/person-center/my-wrong/index.vue

<template>
  <div class="bank-detail">
    <section class="section">
      <div class="section__body">
        <div class="left-box">
          <div class="goods-collect">
            <div class="goods-collect__header">
              <div class="selects">
                <div class="selects__item">
                  <el-row :gutter="20">
                    <el-col :span="6">
                      <el-select
                        placeholder="请选择题库记录"
                        v-model="goodsSelect"
                        @change="getWrongData"
                        clearable
                        @clear="getWrongData"
                      >
                        <el-option
                          v-for="(item, index) in goodsList"
                          :key="index"
                          :label="item.goodsName"
                          :value="item.goodsId"
                        ></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="6">
                      <el-select
                        placeholder="请选择试卷类型"
                        v-model="paperSelect"
                        @change="getWrongData"
                        clearable
                        @clear="getWrongData"
                      >
                        <el-option
                          v-for="(item, index) in paperList"
                          :key="index"
                          :label="item.paperName"
                          :value="item.paperId"
                        ></el-option>
                      </el-select>
                    </el-col>
                  </el-row>
                </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"
                        @click="
                          go('/subject/wrong-bank/' + item.examId, {
                            orderGoodsId: orderGoodsId,
                          })
                        "
                        round
                        plain
                        class="btn"
                        >重做</el-button
                      >
                      <el-button
                        type="primary"
                        @click="
                          go('/subject/wrong-bank/' + item.examId, {
                            explain: 1,
                            orderGoodsId: orderGoodsId,
                          })
                        "
                        round
                        plain
                        class="btn"
                        >解析</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"
                        @click="
                          go('/subject/wrong-type-bank/' + item.type, {
                            orderGoodsId: orderGoodsId,
                          })
                        "
                        round
                        plain
                        class="btn"
                        >重做</el-button
                      >
                      <el-button
                        type="primary"
                        @click="
                          go('/subject/wrong-type-bank/' + item.type, {
                            explain: 1,
                            orderGoodsId: orderGoodsId,
                          })
                        "
                        round
                        plain
                        class="btn"
                        >解析</el-button
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: "BankDetail",
  components: {},
  data() {
    return {
      orderGoodsId: "",
      activeName: "1",
      wrongName: "1",
      wrongName: "1",
      goodsId: "",
      goodsDetail: {},
      goodsCount: {},
      paperList: [],
      paperSelect: "",
      goodsList: "",
      goodsSelect: "",
      wrongTypeList: [],
      wrongExamList: [],
      wrongTotal: 0,
    };
  },
  mounted() {
    this.listGoodsUserQuestion();
    this.examaperList();
    this.getWrongData();
  },
  computed: {},
  methods: {
    go(path, query = {}) {
      this.$router.push({
        path,
        query,
      });
    },
    examaperList() {
      this.$request.examaperList().then((res) => {
        this.paperList = res.rows;
      });
    },

    listGoodsUserQuestion() {
      this.$request.listGoodsUserQuestion().then((res) => {
        this.goodsList = res.rows;
      });
    },
    getWrongData() {
      if (this.wrongName == "1") {
        //试卷归类
        this.wrongRecordList();
      } else if (this.wrongName == "2") {
        //题型归类
        this.wrongRecordTypeList();
      }
    },

    /**
     * 错题按试卷分类
     */
    wrongRecordList() {
      this.$request
        .wrongRecordList({
          paperId: this.paperSelect,
          goodsId: this.goodsSelect,
        })
        .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.paperSelect,
          goodsId: this.goodsSelect,
        })
        .then((res) => {
          this.wrongTypeList = res.rows;
          let total = 0;
          res.rows.forEach((item) => {
            total += item.num;
          });

          this.wrongTotal = total;
        });
    },
  },
};
</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 {
              margin: 20px;
            }
          }

          &__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>