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

<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;
      });
    },

    pay() {
      this.$router.push({
        path: "payment-success",
      });
    },
    goStudy(item) {
      this.$router.push({
        path: "/person-center/free-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>