jp-education-student/pages/youth/mine/myCourses.vue

<template>
	<view>
		<u-navbar title="我的课程">

		</u-navbar>
		<view class="courses-box" v-for="(item,index) in courseList" :key="index"
			@click="gotoUrl('pages/youth/mine/classRecord?id='+item.buyId)">
			<view class="photo" v-if="item.posterUrl != null">
				<img :src="item.posterUrl" alt="">
			</view>
			<view class="photo" v-else>
				<img src="../../../assets/img/classschedule.png" alt="">
			</view>
			<view class="infos">
				<view class="title">
					<view class="text">
						{{item.className}}
					</view>
					<view class="state" v-if="item.status=='1' || item.status=='5'">
						进行中
					</view>
					<view class="stateClose" v-if="item.status=='2'">
						已结课
					</view>
				</view>
				<view class="tags">
					<view class="item">
						{{item.classroomName}}
					</view>
					<view class="item" v-if="item.courseEnd != null">
						{{item.courseEnd.replaceAll('-','/')}}截止
					</view>
				</view>
				<view class="teacher">
					<view class="teacher-photo">
						<u-avatar class="avatar"
							:src="item.teacherPhoto != null ? item.teacherPhoto : '../../assets/img/head.png'" size="64">
						</u-avatar>
					</view>
					<view class="teacher-name">
						{{item.teacherName}}
					</view>
					<view class="progress">
						<u-line-progress :percent="item.rollcallCount/(item.courseAmount+item.freeAmount)*100" :show-percent="false" active-color="#43C9D3">
						</u-line-progress>
						<view class="percent">
							{{item.rollcallCount!= null ? item.rollcallCount : '0'}}/{{item.courseAmount+item.freeAmount}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-divider v-if="courseList.length == recordsTotal && recordsTotal != 0" style="margin-top: 10px">没有更多了</u-divider>
	</view>
</template>

<script>
	import * as mineApi from '@/apis/youth/mine.js'
	
	export default {
		data() {
			return {
				pageNum: 1,
				pageSize: 5,
				recordsTotal: 0,
				courseList: [],
				studentId: ''
			}
		},
		onReady() {
			if (this.carhelp.getStudentId()) {
				this.studentId = this.carhelp.getStudentId().studentId;
				this.getLoadMyCourses();
			}
		},
		onReachBottom() {
			if (this.courseList.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			myLoadmore() {
				this.pageNum += 1;
				this.getLoadMyCourses();
			},
			getLoadMyCourses(bl) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.courseList = [];
					this.pageNum = 1;
				}
				mineApi.loadMyCourses({
					studentId: this.studentId,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then((res) => {
					uni.hideLoading();
					this.courseList = [
						...this.courseList,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.courses-box {
		display: flex;
		padding: 24rpx;
		background-color: #fff;
		margin: 24rpx 32rpx 0 32rpx;
		border-radius: 24rpx;

		.photo {
			width: 100px;
			height: 100px;
			border-radius: 4px;
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.infos {
			margin-left: 24rpx;

			.title {
				display: flex;
				justify-content: space-between;

				.text {
					width: 70%;
					color: rgba(51, 51, 51, 1);
					font-size: 16px;
					font-weight: bold;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}

				.state {
					width: 96rpx;
					line-height: 40rpx;
					border-radius: 8rpx;
					background-color: rgba(13, 186, 199, 1);
					color: rgba(255, 255, 255, 1);
					font-size: 22rpx;
					text-align: center;
					margin-left: 24rpx;
				}
				
				.stateClose {
					width: 96rpx;
					line-height: 40rpx;
					border-radius: 8rpx;
					background-color: rgba(165, 168, 184, 1);
					color: rgba(255, 255, 255, 1);
					font-size: 22rpx;
					text-align: center;
					margin-left: 24rpx;
				}
			}

			.tags {
				display: flex;
				margin-top: 12rpx;

				.item {
					line-height: 40rpx;
					border-radius: 4px;
					background-color: rgba(241, 243, 244, 1);
					color: rgba(136, 133, 133, 1);
					font-size: 24rpx;
					text-align: center;
					padding: 0 8rpx;
					margin-right: 16rpx;
				}
			}

			.teacher {
				margin-top: 48rpx;
				display: flex;
				align-items: center;

				.teacher-photo {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50px;
					overflow: hidden;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.teacher-name {
					color: rgba(16, 16, 16, 1);
					margin-left: 24rpx;
					font-size: 28rpx;
					font-weight: bold;

				}
			}

			.progress {
				display: flex;
				align-items: center;
				margin-left: 16rpx;

				/deep/.u-progress {
					width: 128rpx;
					height: 4px !important;
				}

				.percent {
					margin-left: 8rpx;
					color: rgba(119, 119, 119, 1);
					font-size: 24rpx;
				}
			}
		}

		@media screen and(max-width:320px) {
			.infos {
				margin-left: 8rpx;

				.teacher {
					margin-top: 24rpx;
				}

				.tags {
					.item {
						padding: 0;
						margin-right: 8rpx;
					}
				}
			}
		}
	}

	@media screen and(max-width:320px) {
		.courses-box {
			padding-right: 8rpx;
		}
	}
</style>