saas_miniprogram/pages2/wd/course.vue

<template>
	<view style="padding: 30rpx;">
		<nav-bar title="所有课程"></nav-bar>
		<view v-if="!courseList.length">
			<u-empty text="暂无课程" mode="list"></u-empty>
		</view>
		<view v-else @click="jump(item,index)" v-for="(item, index) in courseList" :key="index" style="margin-bottom: 30rpx;">
			<view class="class_item">
				<image :src="$method.splitImgHost(item.coverUrl, true)" style="height: 316rpx;width: 100%;border-radius: 24rpx;"></image>
				<view style="color: #333333;font-weight: bold;font-size: 32rpx;">{{ item.courseName }}</view>
			</view>
			<view class="bottomBox">
				<view class=".content_box">
					<image src="/static/icon/wk_icon3.png" class="wk_icon"></image>
					学习进度：{{ item.stuAllNum+item.recordNum }}/{{ item.secAllNum+item.examNum }}
				</view>
				<view class="box_progress">
					<view style="width: 60%;"><u-line-progress height="22" :show-percent="false" active-color="#ff9900" :percent="(item.stuAllNum / item.secAllNum) * 100"></u-line-progress></view>
					<view><u-button type="warning" size="mini">进入学习</u-button></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			goodsId: 0,
			gradeId:0,
			courseList: [],
			orderGoodsId:0,
			param:{
				pageNum: 1,
				pageSize: 10,
				total: 0
			},
			businessData:{},
			itemIndex:''
		};
	},
	onLoad(option) {
		this.goodsId = Number(option.id);
		this.gradeId = Number(option.gid)
		this.orderGoodsId = Number(option.orderGoodsId)
		// uni.setStorageSync('courseGoodsId', this.goodsId);
		this.courseCourseList();
		this.$store.getters.dictObj
	},
	onShow(){
		if(this.itemIndex !== '') {
			this.refreshByIndex();
		}
	},
	onReachBottom() {
		if (this.courseList.length < this.param.total) {
			this.param.pageNum++;
			this.courseCourseList();
		}
	},
	methods: {
		/**
		 * 返回刷新之前进入的课程数据
		 */
		refreshByIndex() {
			this.$api.courseCourseList({
				pageNum: this.itemIndex+1,
				pageSize: 1,
				goodsId:this.goodsId,
				gradeId:this.gradeId
			}).then(res => {
				if (res.data.code == 200) {
					this.$set(this.courseList,this.itemIndex,res.data.rows[0])
				}
			});
		},
		/**
		 * 获取业务层次详情
		 */
		courseBusiness(businessId){
			this.$api.courseBusiness(businessId).then(res => {
				this.businessData = res.data.data;
			})
		},
		jump(item,index) {
			this.itemIndex = index;
			
			if(index == 0) {
				if(item.rebuild === 0) {  //未重修
					this.$navTo.togo('/pages2/learn/details', {
						id: item.courseId,
						gradeId:item.gradeId,
						goodsId: this.goodsId
					});
					return;
				}
				 this.$navTo.togo('/pages3/polyv/detail', {
					id: item.courseId,
					goodsId: this.goodsId,
					orderGoodsId:this.orderGoodsId
				}); 
			} else {
				if(this.businessData.goodsLearningOrder == 2) { //学习顺序是从头到尾学习，没学完上一课不能学习下一课
					let prevItem = this.courseList[index-1];  //上一课
					if( (prevItem.stuAllNum+prevItem.recordNum) == (prevItem.secAllNum+prevItem.examNum) ) {
						if(item.rebuild === 0) {  //未重修
							this.$navTo.togo('/pages2/learn/details', {
								id: item.courseId,
								gradeId:item.gradeId,
								goodsId: this.goodsId
							});
							return;
						}
						 this.$navTo.togo('/pages3/polyv/detail', {
							id: item.courseId,
							goodsId: this.goodsId,
							orderGoodsId:this.orderGoodsId
						}); 
					} else {
						uni.showToast({
							icon:'none',
							title:'请按顺序学完上一课再学习这一课'
						})
					}
				} else {
					if(item.rebuild === 0) {  //未重修
						this.$navTo.togo('/pages2/learn/details', {
							id: item.courseId,
							gradeId:item.gradeId,
							goodsId: this.goodsId
						});
						return;
					}
					 this.$navTo.togo('/pages3/polyv/detail', {
						id: item.courseId,
						goodsId: this.goodsId,
						orderGoodsId:this.orderGoodsId
					}); 
				}
			}
			
		},
		courseCourseList() {
			let self = this;
			this.param.goodsId =this.goodsId
			this.param.gradeId = this.gradeId
			this.$api.courseCourseList(this.param).then(res => {
				if (res.data.code == 200) {
					self.courseList.push.apply(self.courseList, res.data.rows);
					self.param.total = res.data.total;
					
					if(res.data.rows.length) {
						this.courseBusiness(res.data.rows[0].businessId)
					}
				}
			});
		},
		appointment() {
			this.$navTo.togo('/pages2/appointment/index');
		}
	}
};
</script>
<style>
page {
	background: #eaeef1;
}
</style>
<style scope>
.box_progress {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20rpx;
}
.bottomBox {
	background: #ffffff;
	width: 94%;
	border-bottom-left-radius: 24rpx;
	border-bottom-right-radius: 24rpx;
	margin: 0 auto;
	padding: 20rpx;
}
.content_box {
	display: flex;
	align-items: center;
	color: #999999;
	margin-top: 8rpx;
}
.content {
	color: #000000;
	margin: 0 8rpx;
}
.wk_icon {
	width: 24rpx;
	height: 24rpx;
	margin-right: 8rpx;
}

.class_item {
	width: 100%;
	background: #ffffff;
	box-shadow: 0rpx 10rpx 9rpx 1rpx rgba(165, 196, 239, 0.1);
	border-radius: 24rpx;
	padding: 20rpx;
	z-index: 999;
	position: relative;
}
</style>