menber-center/pages/goOnEdu/course/courseMine/mineRecord/mineRecord.vue

<template>
	<view class="container">
		<u-empty
			mode="data"
			v-if="courses.length === 0"
			iconSize="120"
			textSize="58"
			text="暂无数据"
		>
		</u-empty>
		<view class="course-list">
			<view v-for="(course,index) in courses" :key="course.id" @click="toCourse(course)">
				<view class="course-item">
					<view class="course-item-image">
						<image class="course-image" :src="course.cover" mode="aspectFill"></image>
					</view>
					<view class="course-item-content">
						<view class="course-title">
							<text>{{ course.courseName }}</text>

						</view>
						<view class="course-type">{{ course.courseType }}</view>
						<view class="course-date">
							<u-icon name="clock" size="28"></u-icon>
							{{ getDateWeek(course.viewDate) }}
						</view>
					</view>
				</view>
				<u-line />
			</view>
		</view>
		<u-loadmore :status="status" v-if="courses.length !== 0 && status!=='nomore'"/>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad, onReachBottom
	} from '@dcloudio/uni-app'
	import {
		loadCourseHistory
	} from '@/api/edu.js'

	function getDateWeek(val) {
		const date = new Date(val);
		const daysOfWeek = ['日', '一', '二', '三', '四', '五', '六'];
		const year = date.getFullYear();
		const month = date.getMonth() + 1; // 注意：月份从0开始
		const day = date.getDate();
		const dayOfWeek = daysOfWeek[date.getUTCDay()];
		// const result = `${year}年${month}月${day}日（星期${dayOfWeek}）`
		return `${year}年${month}月${day}日（星期${dayOfWeek}）`
	}
	const form = ref({
		pageNumber: 1,
		pageSize: 20
	})
	const status = ref('loadmore')
	
	const total = ref(0)
	const courses = ref([]);
	const initCourse = () => {
		if(status.value==='nomore'){
			return
		}
		status.value === 'loading'
		loadCourseHistory(form.value).then(res=>{
			if(res && res?.code===0){
				total.value = res.count;
				if(form.value.pageNumber===1){
					courses.value = res.data
				}else{
					courses.value = [...courses.value, ...res.data]
				}
				if(courses.value.length === res.count){
					status.value = 'nomore'
				}else{
					status.value = 'loadmore'
				}
				
			}else{
				status.value = 'loadmore'
			}
		})
	}
	const toCourse = (course) =>{
		uni.navigateTo({
			url: `/pages/goOnEdu/course/courseDetail/courseDetail?id=${course.courseId}&title=${course.courseName}`
		});
	}
	onLoad(() => {
		form.value.pageNumber = 1
		initCourse();
		// console.log('onLoad')
	})
	
	onReachBottom(()=>{
		// 加载
		initCourse()
	})
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		width: 100vw;
		background-color: #fff;
		padding: 0 20rpx env(safe-area-inset-bottom, 0);
	}

	.course-item {
		margin: 20rpx 0;
		display: flex;
		overflow: hidden;

		.course-item-image {
			width: 200rpx;
			height: 260rpx;
			flex: 0 0 auto;
			margin-right: 20rpx;

			.course-image {
				width: 100%;
			}

		}

		.course-item-content {
			flex: 1;
			position: relative;

			view {
				margin-bottom: 15rpx;
			}

			.course-title {
				font-weight: bold;
				margin-right: 10px;
				font-size: 28rpx;
				color: #000;
			}

			.course-type,
			.course-teacher,
			.course-date,
			.course-price {
				font-size: 30rpx;
				color: #000;
			}

			.course-price {
				color: #fe0000;
				letter-spacing: 2rpx;
			}

			.button::after {
				content: none;
				/* 移除内容 */
			}

			.button {
				position: absolute;
				right: 0;
				bottom: 0;
				min-width: 80px;
				padding: 0 40rpx;
				white-space: nowrap;
				height: 45rpx;
				line-height: 45rpx;
				font-size: 22rpx;
				/* padding: 0; */
				border-radius: 50rpx;
				color: white;
				border: none;
			}

			.free {
				background-color: #006af4;
			}

			.purchase {
				background-color: #fe0000;
			}

			.member-free {
				background-color: transparent;
				background-image: url('http://www.gzrea.org.cn:8543/icon/wxmp/bg-label.png');
				background-size: cover;
				background-repeat: no-repeat;
				color: #000;
				height: initial;
				padding: 6rpx 0 3rpx;
				border-radius: 0;
			}

			.replay {
				background-color: #006af4;
			}

			.purchased {
				background-color: #006af4;
			}
		}
	}
</style>