menber-center/pages/goOnEdu/course/courseMine/mineFavi/mineFavi.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" style="margin-bottom: 20rpx;">
			<view class="list-box">
				<view class="list-item-box" v-for="item in courses" :key="item.id" @click="toCourse(item)">
					<view class="info-box">
						<view class="title">
							{{item.title}}
						</view>
						<view class="text">
							【{{item.typeName}}】
						</view>
					</view>
					<view class="suffix-box">
						<view class="button">
							查看
						</view>
					</view>
				</view>
			</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 {
		query
	} from '@/api/collect.js'
	// 日期格式：xxxx年xx月xx日（星期x）
	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({
		"keyword": "",
		"type": "2",
		"pageNumber": 1,
		"pageSize": 30
	})
	const status = ref('loadmore')
	const count = ref(0)
	const courses = ref([]);
	const initCourse = () => {
		if(status.value === 'nomore'){
			return;
		}
		status.value = 'loading'
		query(form.value).then(res=>{
			if(res && res?.code ===0){
				count.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'
				}
				
				form.value.pageNumber = form.value.pageNumber + 1
			}else{
				status.value = 'loadmore'
			}
		})
	}
	const toCourse = (item)=>{
		uni.navigateTo({
			url: `/pages/goOnEdu/course/courseDetail/courseDetail?id=${item.id}&name=${item.title}`
		});
	}
	onLoad(() => {
		form.value.pageNumber = 1;
		initCourse();
	})
	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;
			}
		}
	}
	
	.list-box {
		.list-item-box {
			padding: 20rpx 10rpx;
			border-bottom: 5rpx solid #E6E6E6;
			display: flex;
			&:active {
				background-color: $uni-bg-color-hover;
			}
			.icon-box {
				width: 3%;
				padding-top: 10rpx;
				.icon {
					width: 10rpx;
					height: 10rpx;
					background-color: $uni-color-primary;
					border-radius: 50%;
				}
			}
			.info-box {
				width: 82%;
				.title {
					font-size: $uni-title-font-size-2;
					font-weight: bold;
					margin-bottom: 5rpx;
					@include text-overflow()
				}
				.text {
					line-height: 40rpx;
					font-size: $uni-font-size-2;
					font-weight: bold;
				}
			}
			.suffix-box {
				width: 15%;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.button {
					color: $uni-text-color-inverse;
					padding: 5rpx 18rpx;
					border-radius: $uni-card-border-radius;
					background-color: $uni-color-primary;
					font-size: $uni-font-size-3;
					letter-spacing: 3rpx;
				}
			}
		}
	}
</style>