saas_miniprogram/pages2/wd/class.vue

<template>
	<view style="padding: 30rpx;">
		<navigator :url="'/pages2/wd/course?id=' + item.goodsId" v-for="(item, index) in goodsList" :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.goodsName }}</view>
				<view class=".content_box">
					<image src="/static/icon/wk_icon1.png" class="wk_icon"></image>
					共
					<text class="content">{{ item.courseNum }}</text>
					科
					<text class="content">{{ item.secAllNum }}</text>
					节
					<text class="content">{{ item.classHours }}</text>
					学时
				</view>
				<view class=".content_box">
					<image src="/static/icon/wk_icon2.png" class="wk_icon"></image>
					学习有效期：
					<text class="content">{{ $method.timestampToTime(item.validityStartTime) }} - {{ $method.timestampToTime(item.validityEndTime) }}</text>
				</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 :showText="false" active-color="#ff9900" :show-percent="false" :percent="(item.stuAllNum / item.secAllNum) * 100"></u-line-progress></view>
					<view><u-button type="warning" size="mini" @click.stop="studyIn(item.goodsId)">进入学习</u-button></view>
				</view>
				<view class="box_progress" v-if="item.applyStatus === 1">
					<view style="width: 60%;">
						<text style="color: #333333;white-space: nowrap;text-overflow: ellipsis;">{{ item.applyName }}</text>
					</view>
					<view><u-button :plain="true" type="primary" size="mini" @click.stop="appointment(item)">预约考试</u-button></view>
				</view>
				<view class="box_progress" v-if="item.beforeStatus === 1">
					<view style="width: 60%;">
						<text style="color: #2979ff;white-space: nowrap;text-overflow: ellipsis;">{{ item.beforeName }}</text>
					</view>
					<view><u-button type="primary" size="mini">进入刷题</u-button></view>
				</view>
			</view>
		</navigator>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [1, 2, 3],
			goodsList: [],
			param:{
				pageNum: 1,
				pageSize: 10
			},
			total: 0
		};
	},
	onLoad(option) {
		this.courseGoodsList();
	},
	onShow() {},
	onReachBottom() {
		if (this.goodsList.length < this.total) {
			this.param.pageNum++;
			this.courseGoodsList();
		}
	},
	methods: {
		courseGoodsList() {
			let self = this;
			this.$api.courseGoodsList(this.param).then(res => {
				if (res.data.code == 200) {
					self.goodsList.push.apply(self.goodsList, res.data.rows);
					self.total = res.data.total;
				}
			});
		},
		studyIn(v) {
			this.$navTo.togo('/pages2/wd/course?id=' + v);
		},
		appointment(item) {
			var data = {
				goodsId: item.goodsId,
				gradeId: item.gradeId
			};
			this.$api.getApplysubscribe(data).then(res => {
				if (res.data.code === 500) {
					uni.showModal({
						showCancel: false,
						content: res.data.msg
					});
				}
				if (res.data.code === 200) {
					this.$navTo.togo('/pages2/appointment/index', {
						goodsId: item.goodsId,
						gradeId: item.gradeId
					});
				}
			});
		}
	}
};
</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>