saas_miniprogram/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="/static/logo2.png" 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">
					<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" 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">
								<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 class="progress_down">
										<view class="enter_into" @click="studyques(item,index)">进入练习</view>
									</view> -->
								</view>
							</view>
						</view>
						<!-- 按钮 -->
						<view class="study_btns">
							<view class="exam_word intos" @click.stop="toDailyPractice(item)">每日一练</view>
							<view class="exam_word intos" @click.stop="toRandomPractice(item)">随机联系</view>
							<view class="exam_word intos" @click="studyques(item,index)">章节练习</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>
			<view class="choose" @click="toChoose()">立即去选购</view>
		</view>
    </view>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
export default {
	data() {
		return {
			allLoading: false, // 加载样式
			questionLists: [], // 题库列表
			param: {
				pageNum: 1,
				pageSize: 10
			},
			total: 0,
		}
	},
	computed: {
		...mapGetters(['userInfo']),
	},
	onLoad() {},
	onShow() {
		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() {
			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) {
			console.log('item', item);
			uni.navigateTo({
				url: '/pages2/dailyPractice/index?goodsId=' + item.goodsId + '&orderGoodsId=' + item.orderGoodsId
			})
		},
		toRandomPractice(item) {
			uni.navigateTo({
				url: '/pages2/randomPractice/index?goodsId=' + item.goodsId + '&orderGoodsId=' + item.orderGoodsId
			})
		},
		// 进入练习
		studyques(item,index){
			let sysTime = this.$method.timest()
			if (item.serviceStartTime && item.serviceEndTime && (sysTime <= item.serviceStartTime || sysTime >= item.serviceEndTime)) {
				uni.showToast({
					icon: 'none',
					title: '不在学习服务期，不能进入学习'
				})
				return;
			}
			uni.navigateTo({
				url:'/pages2/bank/question_detail?id='+item.goodsId+'&orderGoodsId='+item.orderGoodsId
			})
		},
	},
}
</script>

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