zc_saas_h5/pages/questionBank/index.vue

<template>
  <view class="questionBank">
    <u-navbar
      :is-back="false"
      title="题库中心"
      :border-bottom="false"
      title-color="#333333"
      back-icon-color="#ffffff"
    >
      <view class="slot-wrap">
        <image
          :src="$method.splitImgHost(config.h5Logo)"
          style="width: 178rpx; height: 31rpx; margin-left: 30rpx"
        ></image>
      </view>
    </u-navbar>
    <!-- 有学习的课程 -->
    <view v-if="questionLists.length" class="had_courses">
      <!-- 我的题库 -->
      <view class="my_courses">
        <text class="titles">我的题库</text>
        <view class="bottoms">
          <navigator hover-class="none" url="/pages2/subject/collect">
            <view class="item collect">
              <view class="text"
                >收藏集<u-icon name="arrow-right"></u-icon
              ></view>
              <image class="img" src="/static/questionBank_collect.png"></image>
            </view>
          </navigator>
          <view class="item list">
            <navigator hover-class="none" url="/pages2/bank/question_record">
              <view class="list-in">
                <image
                  class="img"
                  src="/static/questionBank_record.png"
                ></image>
                <view class="text">
                  做题记录 <u-icon name="arrow-right"></u-icon>
                </view>
              </view>
            </navigator>

            <navigator hover-class="none" url="/pages2/subject/wrong">
              <view class="list-in">
                <image class="img" src="/static/questionBank_wrong.png"></image>
                <view class="text">
                  错题集 <u-icon name="arrow-right"></u-icon>
                </view>
              </view>
            </navigator>
          </view>
        </view>

        <template v-if="questionLists.length">
          <!-- @click="studyques(item)" -->
          <view
            v-for="(item, index) in questionLists"
            :key="index"
            class="course_item"
          >
            <view>
              <view class="cou_titles">{{ item.goodsName }}</view>
              <view
                v-if="
                  item.serviceStartTime &&
                  item.serviceEndTime &&
                  !item.externalLinkStatus
                "
                class="learn_ranges"
              >
                <image
                  class="l_range"
                  src="/static/learn/learn_range.png"
                ></image>
                学习周期：
                <text class="l_time"
                  >{{ item.serviceStartTime | formate("yyyy.mm.dd") }} -
                  {{ item.serviceEndTime | formate("yyyy.mm.dd") }}</text
                >
              </view>
            </view>
            <view class="c_downs">
              <view class="lefts">
                <image
                  class="lefet_img"
                  :src="$method.splitImgHost(item.coverUrl, true)"
                  mode=""
                ></image>
              </view>
              <view class="rights" v-if="!item.externalLinkStatus">
                <view class="learn_progress">
                  <view class="progress_up">
                    <view>
                      学习进度：{{ item.doNum }}/{{ item.totalNum }}
                    </view>
                    <view class="progress_bar" style="width: 100%">
                      <u-line-progress
                        :show-percent="false"
                        height="22"
                        active-color="#ff9900"
                        :percent="(item.doNum / item.totalNum) * 100"
                      ></u-line-progress>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <!-- 按钮 -->
            <view class="study_btns" v-if="!item.externalLinkStatus">
              <view
                v-for="(child, c_index) in item.paperVos"
                :key="c_index"
                class="exam_word intos"
                @click.stop="toDailyPractice(item, child)"
                >{{ child.paperName }}</view
              >
            </view>
            <view class="study_btns" v-else>
              <view
                class="exam_word intos"
                @click.stop="$method.toLink(item.externalLink)"
                >进入学习</view
              >
            </view>
          </view>
        </template>
      </view>
    </view>
    <!-- 没有学习的课程 -->
    <view v-if="!allLoading && !questionLists.length" class="no_datas">
      <!-- <image class="courses" src="/static/learn/no_course.png" mode=""></image>
			<view class="no_learns">您目前没有可学习的题库</view> -->
      <image src="/static/learn/empty_status.png" class="empty_status"></image>
      <text class="word_tip">暂无题库</text>
      <view class="choose" @click="toChoose()">立即去选购</view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      allLoading: false, // 加载样式
      questionLists: [], // 题库列表
      param: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      options: {},
    };
  },
  computed: {
    ...mapGetters(["userInfo", "config"]),
  },
  onLoad(options) {
    this.options = options;
    if (this.options.isAct) {
      this.$method.isGoLogin();
    }
  },
  async onShow() {
    if (this.options.skipPort) {
      await this.$method.skipLogin(this.options.skipPort);
    }
    this.param.pageNum = 1;
    this.questionLists = [];
    this.getBankList();
  },
  onPullDownRefresh() {
    this.param.pageNum = 1;
    this.questionLists = [];
    this.getBankList();
  },
  onReachBottom() {
    if (this.questionLists.length < this.total) {
      this.param.pageNum++;
      this.getBankList();
    }
  },
  methods: {
    // 查询用户拥有免费+自购题库商品 /bank/question/listUserFreeUnionBuyGoodsList
    getBankList() {
      if (!this.$method.isLogin()) {
        return;
      }
      this.allLoading = true;
      this.$api
        .listUserFreeUnionBuyGoodsList(this.param)
        .then((res) => {
          if (res.data.code == 200) {
            this.questionLists.push(...(res.data.rows || []));
            console.log("this.courseList", this.questionLists);
            this.total = res.data.total;
          }
          this.allLoading = false;
        })
        .catch((err) => {
          this.allLoading = false;
        });
    },
    toChoose() {
      uni.switchTab({
        url: "/pages/course/index",
      });
    },
    toDailyPractice(item, child) {
      this.$api
        .lockLockStatus({
          action: "bank",
          uuid: this.$method.getUuid(),
        })
        .then((res) => {
          if (res.data.code == 200) {
            //有其他端在操作，不能学习
            uni.showToast({
              icon: "none",
              title: res.data.msg,
              duration: 3000,
            });
          } else if (res.data.code == 500) {
            //可以学习

            if (child.paperName == "每日一练") {
              uni.navigateTo({
                url:
                  "/pages2/dailyPractice/index?goodsId=" +
                  item.goodsId +
                  "&orderGoodsId=" +
                  item.orderGoodsId,
              });
            } else if (child.paperName == "随机练习") {
              uni.navigateTo({
                url:
                  "/pages2/randomPractice/index?goodsId=" +
                  item.goodsId +
                  "&orderGoodsId=" +
                  item.orderGoodsId,
              });
            } else {
              this.studyques(item, child);
            }
          }
        });
    },
    // 进入练习
    studyques(item, child) {
      let sysTime = this.$method.timest();
      if (
        item.serviceStartTime &&
        item.serviceEndTime &&
        (sysTime <= item.serviceStartTime || sysTime >= item.serviceEndTime)
      ) {
        uni.showToast({
          icon: "none",
          title: "不在学习服务期，不能进入学习",
        });
        return;
      }
      let paperId = (child && child.paperId) || "";
      uni.navigateTo({
        url:
          "/pages2/bank/question_detail?id=" +
          item.goodsId +
          "&orderGoodsId=" +
          item.orderGoodsId +
          "&paperId=" +
          paperId,
      });
    },
  },
};
</script>

<style>
page {
  background: #eaeef1;
}
</style>
<style lang="scss" scoped>
@import "./index.scss";
</style>