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

<template>
  <div id="Mybank">
    <div class="no-data" v-if="!bankData.goodsName">暂无可以学习的题库哦~</div>
    <div v-else>
      <h4 class="headerTitle">
        <span v-if="bankData.subjectNames" style="font-size: 20px"
          >【{{ bankData.subjectNames }}】</span
        >{{ bankData.goodsName
        }}<el-button
          size="mini"
          type="primary"
          plain
          icon="el-icon-sort"
          style="margin-left: 14px"
          @click="changeBank"
          >切换题库</el-button
        >
      </h4>
      <bank-detail-copy ref="bankDetailCopy" />
    </div>
    <el-dialog title="切换题库" :visible.sync="dialogVisible" width="900px">
      <div class="topstyle">
        <p>当前试题</p>
        <div class="list_styleHeader">
          <span
            class="btn_style"
            :style="
              bankData.goodsType == 5
                ? 'background-color:#00D6B9;'
                : 'background-color:#3F8DFD;'
            "
            >{{ bankData.goodsType == 5 ? "赠送" : "自购" }}</span
          >
          <span style="font-weight: bold; font-size: 18px">{{
            bankData.goodsName
          }}</span>
        </div>
      </div>
      <div class="height_style">
        <div
          v-for="(item, index) in list"
          :key="index"
          class="list_style"
          :style="
            index % 2 != 1
              ? 'background-color:#F8F8F9;'
              : 'background-color:#fff;'
          "
          @click="activeFunc(item)"
        >
          <span
            class="btn_style"
            :style="
              item.goodsType == 5
                ? 'background-color:#00D6B9;'
                : 'background-color:#3F8DFD;'
            "
            >{{ item.goodsType == 5 ? "赠送" : "自购" }}</span
          >
          <span style="font-weight: bold; font-size: 18px">{{
            item.goodsName
          }}</span>
          <span
            v-if="
              item.validityStartTime &&
              item.validityEndTime &&
              item.goodsType != 5
            "
            style="float: right; color: #999; font-size: 14px"
            >{{ $tools.timestampToTime(item.validityStartTime) }} -
            {{ $tools.timestampToTime(item.validityEndTime) }}
            <span
              style="color: #3f8dfd; font-size: 14px"
              v-if="getNewTime() < item.validityStartTime ? true : false"
              >/未开始</span
            >
            <span
              style="color: #999; font-size: 14px"
              v-if="getNewTime() > item.validityEndTime ? true : false"
              >/已过期</span
            ></span
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import bankDetailCopy from "../bank-detailCopy/index.vue";
export default {
  name: "Mybank",
  components: { bankDetailCopy },
  data() {
    return {
      bankData: {},
      dialogVisible: false,
      list: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getNewTime() {
      console.log(parseInt(new Date().getTime() / 1000));
      return parseInt(new Date().getTime() / 1000);
    },
    getInfoData(data) {
      return new Promise((resolve, reject) => {
        this.$request.goodsDetail(data.goodsId).then((res) => {
          res.data.orderGoodsId = data.orderGoodsId;
          resolve(res.data);
        });
      });
    },
    getList() {
      this.$request.examrecordgetUserDoLast().then(async (res) => {
        let { goodsId } = this.$route.query;
        if (res.data && res.data.goodsId && !goodsId) {
          const result = await this.getInfoData(res.data);
          this.bankData = result;
          this.$nextTick(() => {
            this.$refs.bankDetailCopy.initData(this.bankData, res.data);
          });
        } else {
          this.$request
            .bankquestionlistUserFreeUnionBuyGoodsList()
            .then((res) => {
              if (res.rows.length > 0) {
                this.bankData = !goodsId
                  ? res.rows[0]
                  : res.rows.find((e) => e.goodsId == goodsId);
                this.$nextTick(() => {
                  this.$refs.bankDetailCopy.initData(this.bankData);
                });
              }
            });
        }
      });
    },
    /**
     * 切换题库
     */
    changeBank() {
      this.$request.bankquestionlistUserFreeUnionBuyGoodsList().then((res) => {
        this.list = res.rows;
        this.dialogVisible = true;
      });
    },
    /**
     * 确定选中
     */
    activeFunc(item) {
      const Times = parseInt(new Date().getTime() / 1000);
      if (item.goodsType != 5) {
        if (Times < item.validityStartTime || Times > item.validityEndTime) {
          if (Times < item.validityStartTime) {
            this.$message.warning("题卷学习时间未开始");
            return;
          } else if (Times > item.validityEndTime) {
            this.$message.warning("题卷学习时间已过期");
            return;
          }
        }
      }
      this.$refs.bankDetailCopy.initData(item);
      this.bankData = item;
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.headerTitle {
  padding: 30px 0px;
  font-size: 24px;
  font-weight: bold;
  color: #222;
}
/deep/ .el-dialog__wrapper .el-dialog {
  margin-top: 5vh !important;
}
.topstyle {
  border-bottom: 2px solid #eee;
  margin-bottom: 16px;
  p {
    background-color: #f8f8f9;
    font-size: 14px;
    color: #3f8dfd;
    padding: 5px 12px;
  }
}
.height_style {
  max-height: 600px;
  overflow-y: auto;
}
.list_style {
  height: 60px;
  color: #222;
  line-height: 58px;
  padding: 0px 16px;
  cursor: pointer;
  transition: all 0.2s;
  &:hover {
    background-color: rgba(63, 141, 253, 0.3) !important;
  }
}
.list_styleHeader {
  height: 60px;
  color: #3f8dfd;
  line-height: 58px;
  padding: 0px 16px;
}
.btn_style {
  padding: 0px 3px;
  color: #fff;
  margin-right: 8px;
  border-radius: 2px;
}
</style>