zc_saas_h5/pages2/wd/class.vue

<template>
	<view style="padding: 30rpx;">
		<view class="class" v-for="(item, index) in goodsList" :key="index">
			
				<view class="class_item">
					<navigator  hover-class="none" :url="`/pages2/wd/course?id=${item.goodsId}&gid=${item.gradeId}`">
						<image :src="$method.splitImgHost(item.coverUrl, true)" class="class_img"></image>
						<view class="class_text">
							<view class="class_title">{{ 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>
					</navigator>
					<view class="class-warm">
						<u-icon class="class-warm__icon" size="30" color="#FF3B30" name="error-circle-fill"></u-icon>
						<view class="class-warm__text">
							<view class="date">班级有效期：2021/11/30 - 2021/11/30</view>
							<view class="state">班级状态：已过期，有疑问请联系 <text @click="call">020-87085982</text></view>
						</view>
					</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" height="22" 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,item.gradeId)">进入学习</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" @click="appBeforeAddress(item.goodsId)">进入刷题</u-button></view>
				</view>
				<view class="restart" @click="selectClass(item)">
					选班重学
				</view>
			</view>
		</view>
			
		<view v-if="goodsList.length==0">
			<u-empty text="暂无网课" margin-top="500" mode="list"></u-empty>
			
		</view>
		<u-popup v-model="selectClassModal" @close="gradeValue = -1" mode="bottom" border-radius="40">
			<view class="popup_box">
				<view style="margin-bottom: 20rpx;">
					<view class="line1"></view>
					<view class="grade">选择班级</view>
				</view>
				<u-line color="#D6D6DB" />
				<view>
					<scroll-view scroll-y="true" style="height: 500rpx;">
						<view>
							<u-radio-group v-model="gradeValue" @change="radioGroupChange">
								<view v-for="(item, index) in gradeList" :key="index" >
									<view style="display: flex;align-items: center;padding: 20rpx;">
										<view>
											<u-radio
												shape="circle"
												:name="index"
											>
												<view :class="item.checked?'white-box blue-box':'white-box'" >
													<view>
														<view class="blackTxt">{{item.className}}</view>
														<view class="redTxt" v-if="item.classEndTime">有效期至：{{$method.timestampToTime(item.classEndTime)}}</view>
														<view class="redTxt" v-if="item.classEndTime">本班还剩{{$method.GetRTime(item.classEndTime)}}天将结束学习</view>
													</view>
												</view>
											</u-radio>
										</view>
										
									</view>
								</view>
							</u-radio-group>
						</view>
					</scroll-view>
				</view>
				<view class="confrim-btn">
					<view class="okBtn" @click="okPopup()">确定</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [1, 2, 3],
			goodsList: [],
			selectClassModal:false,
			gradeList:[],
			gradeValue:-1,
			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: {
		selectClass(item) {
			console.log(item)
			this.selectClassModal = true;
			this.goodsGradeList(item.goodsId);
		},
		radioGroupChange(e){
			console.log(e)
		},
		goodsGradeList(id) {
			let self = this
			this.$api.goodsGradeList({goodsId:id}).then(res => {
				if(res.data.code==200){
					self.gradeList = res.data.rows
					if(self.gradeList.length==0){
						let item = {
							className:'系统分班',
							gradeId:0
						}
						self.gradeList.push(item)
					}
				}
			});
		},
		appBeforeAddress(goodsId) {
			this.$api.appBeforeAddress({
				goodsId
			}).then(res => {
				if(res.data.code == 200) {
					uni.navigateToMiniProgram({
					  appId: res.data.data.url,
					  success(res) {
					    // 打开成功
					  }
					})
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none',
					})
				}
			})
		},
		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,i) {
			this.$navTo.togo(`/pages2/wd/course?id=${v}&gid=${i}`);
		},
		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
					});
				}
			});
		},
		okPopup() {
			this.selectClassModal = false;
			uni.showToast({
				title:'选班成功'
			})
		},
		call() {
			uni.makePhoneCall({
				 phoneNumber: '020-87085982' //仅为示例
			})
		}
	}
};
</script>
<style>
page {
	background: #eaeef1;
}
</style>
<style scope lang="scss">
.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;
	
	.restart {
		margin:0 auto;
		text-align: center;
		line-height: 80rpx;
		color:#fff;
		font-size: 30rpx;
		width: 440rpx;
		height: 80rpx;
		background: #FF0000;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}
}
.content_box {
	font-size: 24rpx;
	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 {
	margin-bottom: 30rpx;
	
	.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;
		
		.class_img {
			height: 316rpx;
			width: 100%;
			border-radius: 24rpx;
		}
		
		.class_text {
			padding:0 20rpx;
			
			.class_title {
				color: #333333;
				font-weight: bold;
				font-size: 32rpx;
			}
		}
		
		.class-warm {
			padding:10rpx 20rpx;
			display: flex;
			align-items: flex-start;
			
			&__icon {
				margin-right:10rpx;
			}
			
			&__text {
				
				.date {
					font-size: 24rpx;
					font-weight: bold;
					color: #FF3B30;
				}
				
				.state {
					margin-top:15rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #FF3B30;
				}
			}
		}
	}
}




.popup_box {
	height: 700rpx;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	
	.line1{
		width: 80rpx;
		height: 8rpx;
		background: #999999;
		border-radius: 4rpx;
		margin: 0 auto;
		margin-top: 15rpx;
	}
	
	
	.grade{
		height: 23rpx;
		font-size: 24rpx;
		color: #999999;
		margin: 0 auto;
		margin-top: 15rpx;
		text-align: center;
	}
	
	.confrim-btn{
		height: 98rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content:center;
		
		.okBtn{
			width: 200rpx;
			height: 64rpx;
			background: linear-gradient(0deg, #015EEA, #00C0FA);
			border-radius: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 64rpx;
		}
	}
}
</style>