zc_saas_h5/pages/questionBank/index.vue

<template>
	<view class="questionBank">
		<nav-logo title="题库中心"></nav-logo>
		<!-- 有学习的课程 -->
		<view class="had_courses" v-if="$method.isLogin()">
			<!-- 我的题库 -->
			<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 :backTopBtn="backTopBtn"></myTabbar>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				backTopBtn:false,
				allLoading: false, // 加载样式
				questionLists: [], // 题库列表
				param: {
					pageNum: 1,
					pageSize: 5,
					querySign: 1,
				},
				total: 0,
				options: {},
				isGetOtherQuetion: false,
			};
		},
		computed: {
			...mapGetters(["userInfo", "config"]),
		},
		async 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() {
			let {
				skipPort,
				sign
			} = this.options;
			if (skipPort) {
				this.options.skipPort = undefined;
				this.options.sign = undefined;
				await this.$method.skipLogin(skipPort);
			}
			if (this.$method.isLogin()) {
				this.param.pageNum = 1;
				this.questionLists = [];
				this.isGetOtherQuetion = sign || (await this.getIsHaveOtherQuetion());
				this.getBankList();
			}
		},
		onPullDownRefresh() {
			this.param.pageNum = 1;
			this.questionLists = [];
			this.getBankList();
		},
		onPageScroll(e) {
			if (e.scrollTop > 100) {
				this.backTopBtn = true
			} else {
				this.backTopBtn = false
			}
		},
		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 || []));
							this.total = res.data.total;
						}
						this.allLoading = false;
					})
					.catch((err) => {
						this.allLoading = false;
					});
			},
			toChoose() {
				this.$store.state.current = 2
				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() {
				return new Promise((resolve, reject) => {
					this.$api.getIsHaveOtherQuetion().then((res) => {
						if (res.data.data == 1) {
							uni.showModal({
								title: "提示",
								content: "是否学习山东题库？",
								success: (res) => {
									resolve(res.confirm);
								},
							});
						} else {
							resolve(false);
						}
					});
				});
			},
			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>