zc_saas_h5/pages/questionBank/index.vue

<template>
  <view class="questionBank">
    <nav-logo title="题库中心"></nav-logo>
    <!-- 有学习的课程 -->
    <view v-if="questionLists.length" class="had_courses">
      <!-- 我的题库 -->
      <view class="my_courses">
        <text class="titles">我的题库</text>
        <view class="bottoms">
          <view class="item collect" @click="toRecord(0)">
            <view class="text">收藏集<u-icon name="arrow-right"></u-icon></view>
            <image class="img" src="/static/questionBank_collect.png"></image>
          </view>
          <view class="item list">
            <view class="list-in" @click="toRecord(1)">
              <image class="img" src="/static/questionBank_record.png"></image>
              <view class="text">
                做题记录 <u-icon name="arrow-right"></u-icon>
              </view>
            </view>
            <view class="list-in" @click="toRecord(2)">
              <image class="img" src="/static/questionBank_wrong.png"></image>
              <view class="text">
                错题集 <u-icon name="arrow-right"></u-icon>
              </view>
            </view>
          </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>
                {{ isGetOtherQuetion ? "有效期" : "学习周期" }}：
                <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 v-if="isGetOtherQuetion">
                      总题数：{{ item.questionNum || 300 }}题
                    </view>
                    <template v-else>
                      <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>
                    </template>
                  </view>
                </view>
              </view>
            </view>
            <!-- 按钮 -->
            <view class="study_btns" v-if="isGetOtherQuetion">
              <view class="exam_word intos" @click="toSdLearn(item)"
                >开始刷题</view
              >
            </view>
            <view class="study_btns" v-else-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>
    <!-- tabbar -->
    <myTabbar></myTabbar>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      allLoading: false, // 加载样式
      questionLists: [], // 题库列表
      param: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      options: {},
      isGetOtherQuetion: true,
    };
  },
  computed: {
    ...mapGetters(["userInfo", "config"]),
  },
  onLoad(options) {
    uni.hideTabBar();
    this.options = options;
    if (this.options.isAct && !this.$method.isLogin()) {
      uni.navigateTo({
        url: "/pages4/login/login?isBack=" + true + "&isAct=1",
      });
      return;
    }
  },
  async onShow() {
    if (this.options.skipPort) {
      await this.$method.skipLogin(this.options.skipPort);
    }
    // this.getIsHaveOtherQuetion();
    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;
      const fn = this.isGetOtherQuetion
        ? "sdQuestionList"
        : "listUserFreeUnionBuyGoodsList";
      this.$api[fn](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.$method.checkLock("bank").then((res) => {
        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,
      });
    },
    // 是否含有山东题库
    async getIsHaveOtherQuetion() {
      let res = await this.$api.getIsHaveOtherQuetion();
      if (res.data.data == 1) {
        uni.showModal({
          title: "提示",
          content: "是否学习山东题库？",
          success: (res) => {
            this.isGetOtherQuetion = res.confirm;
            if (res.confirm) {
              this.getBankList();
            }
          },
        });
      }
    },
    toSdLearn(item) {
      this.$api.getOtherExamId({ relId: item.qsId }).then((res) => {
        if (res.data.code == 200) {
          uni.navigateTo({
            url:
              "/pages2/bank/questionBank?id=" +
              res.data.data.examId +
              "&goodsid=" +
              item.goodsId +
              "&orderGoodsId=" +
              item.orderGoodsId +
              "&entryType=sd",
          });
        } else {
          uni.showToast({
            icon: "none",
            title: res.data.msg,
          });
        }
      });
    },
    toRecord(type) {
      let url = [
        "/pages2/subject/collect",
        "/pages2/bank/question_record",
        "/pages2/subject/wrong",
        "",
      ][type];
      if (this.isGetOtherQuetion) {
        url += "?isOther=1";
      }
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

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