zc_saas_h5/pages2/wd/course.vue

<template>
	<view style="padding: 30rpx;">
		<view v-if="!courseList.length">
			<u-empty text="暂无课程" mode="list"></u-empty>
		</view>
		<view v-else @click="jump(item)" 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.secAllNum }}
				</view>
				<view class="box_progress">
					<view style="width: 60%;"><u-line-progress active-color="#ff9900" :percent="(item.stuAllNum / item.secAllNum) * 100"></u-line-progress></view>
					<view><u-button type="warning" size="mini" @click.stop="studyIn(item)">进入学习</u-button></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			goodsId: 0,
			courseList: [],
			param:{
				pageNum: 1,
				pageSize: 10,
				total: 0
			},
			
		};
	},
	onLoad(option) {
		this.goodsId = Number(option.id);
		// uni.setStorageSync('courseGoodsId', this.goodsId);
		this.courseCourseList();
		this.$store.getters.dictObj
	},
	onReachBottom() {
		if (this.courseList.length < this.param.total) {
			this.param.pageNum++;
			this.courseCourseList();
		}
	},
	methods: {
		jump(item) {
			this.$navTo.togo('/pages2/class/detail', {
				id: item.courseId,
				goodsId: this.goodsId
			});
		},
		studyIn(item) {
			this.$navTo.togo('/pages2/class/detail', {
				id: item.courseId,
				goodsId: this.goodsId
			});
			// this.$navTo.togo('/pages2/verify/input');
		},
		courseCourseList() {
			let self = this;
			this.param.goodsId =this.goodsId
			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;
				}
			});
		},
		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>