完善培训课程-首页列表加载

pages/goOnEdu/course/courseHome/courseHome.vue

@@ -41,59 +41,75 @@
 				<u-line />
 			</view>
 		</view>
-		<view>
-			<uni-load-more :status="loadMoreStatus"></uni-load-more>
+		<view style="margin: 20rpx 0;">
+			<u-loadmore :status="loadMoreStatus" @loadmore="loadmore" :load-text="loadText" />
+			<!-- <uni-load-more :status="loadMoreStatus" :load-text="loadText" @loadmore="loadmore"></uni-load-more> -->
 		</view>
 	</view>
 </template>
 
 <script setup>
 	import {
-		ref, onMounted, watch, 
+		ref,
+		onMounted,
+		watch,
 	} from 'vue';
 	import {
 		onReachBottom
 	} from '@dcloudio/uni-app'
-	import { loadCourseCate, loadCourseList, courseFavi, courseCancelFavi } from "@/api/edu.js"
-	import { useCourseStore } from "@/store/courseStore.js"
-	import { useAuthStore } from '@/store/authStore.js';
+	import {
+		loadCourseCate,
+		loadCourseList,
+		courseFavi,
+		courseCancelFavi
+	} from "@/api/edu.js"
+	import {
+		useCourseStore
+	} from "@/store/courseStore.js"
+	import {
+		useAuthStore
+	} from '@/store/authStore.js';
 	import configService from '@/utils/baseurl.js'
 	const FILE_URL = configService.FILE_URL;
 	const courseStore = useCourseStore();
 	const authStore = useAuthStore();
 	const isMember = ref(false);
 	const tabsList = ref([]);
-	const currentTab = ref(courseStore.currentTab); 
+	const currentTab = ref(courseStore.currentTab);
 	const searchForm = ref({
 		keyword: "",
 		pageNumber: 1,
 		pageSize: 10,
 	})
 	const pageNumber = ref(1)
-	const pageSize = ref(10)
+	const pageSize = ref(20)
 	const total = ref(0)
-	const loadMoreStatus = ref('more')
-	
+	const loadMoreStatus = ref('loadmore')
+
 	const courseMember = {
 		1: "免费",
 		2: "会员免费",
 		3: "付费",
 	}
+	const loadText = {
+		loadmore: '点击或上拉加载更多',
+		loading: '努力加载中',
+		nomore: '实在没有了'
+	}
 	// 展示的课程
 	const filterCourses = ref([]);
 	const courses = ref([{
-			id: 1,
-			courseName: "前端开发基础前端开发基础前端开发基础",
-			courseType: "精英训练营",
-			name: "张老师",
-			courseDate: "2023-10-01",
-			imgUrl: "https://tse3-mm.cn.bing.net/th/id/OIP-C.YKoZzgmubNBxQ8j-mmoTKAHaEK?rs=1&pid=ImgDetMain",
-			price: 99.00,
-			hasBuy: false,
-			hasFavi: true,
-			payType: "免费" // 新增字段，标识课程的付费类型
-		},
-	]);
+		id: 1,
+		courseName: "前端开发基础前端开发基础前端开发基础",
+		courseType: "精英训练营",
+		name: "张老师",
+		courseDate: "2023-10-01",
+		imgUrl: "https://tse3-mm.cn.bing.net/th/id/OIP-C.YKoZzgmubNBxQ8j-mmoTKAHaEK?rs=1&pid=ImgDetMain",
+		price: 99.00,
+		hasBuy: false,
+		hasFavi: true,
+		payType: "免费" // 新增字段，标识课程的付费类型
+	}, ]);
 
 	// 按钮的文字
 	function getButtonText(course) {
@@ -157,7 +173,8 @@
 		}
 		filterCourses.value = courses.value.filter(item => item.courseType == tabsList.value[index].name)
 	}
-	function toSearch(e){
+
+	function toSearch(e) {
 		pageNumber.value = 1
 		search(e)
 	}
@@ -166,46 +183,51 @@
 		searchForm.value.keyword = e
 		searchForm.value.pageNumber = pageNumber.value
 		searchForm.value.pageSize = pageSize.value
-		courses.value = pageNumber.value == 1? [] : courses.value
+		courses.value = pageNumber.value == 1 ? [] : courses.value
 		loadMoreStatus.value = 'loading'
-		loadCourseList(searchForm.value).then(res=>{
-			if(res?.data){
+		loadCourseList(searchForm.value).then(res => {
+			if (res?.data) {
 				total.value = res.count;
-				courses.value = [...courses.value,...res.data];
+				courses.value = [...courses.value, ...res.data];
 				const i = currentTab.value
-				if( i == 0){
+				if (i == 0) {
 					filterCourses.value = [...courses.value];
-				}else{
+				} else {
 					filterCourses.value = courses.value.filter(item => item.courseType == tabsList.value[i].name)
 				}
-				loadMoreStatus.value = total.value === courses.value.length ? 'nomore': 'more';
+				loadMoreStatus.value = total.value === courses.value.length ? 'nomore' : 'loadmore';
 				pageNumber.value++;
 			}
 		})
 	}
 	// 收藏
-	async function collectCourse(id,index,hasFavi) {
-		try{
+	async function collectCourse(id, index, hasFavi) {
+		try {
 			let res;
-			if(hasFavi){
+			if (hasFavi) {
 				res = await courseCancelFavi({
 					id
 				})
-			}else{
-				res = await courseFavi({id})
+			} else {
+				res = await courseFavi({
+					id
+				})
 			}
-			if(res.code == 0){
+			if (res.code == 0) {
 				courses.value[index].hasFavi = !courses.value[index].hasFavi
 			}
-		}catch(err){
+		} catch (err) {
 			courses.value[index].hasFavi = courses.value[index].hasFavi
 		}
 	}
 	// 初始化
 	function init() {
-		loadCourseCate().then(res=>{
-			if(res?.data){
-				tabsList.value = [{ code: '', name: '全部'}, ...res.data]
+		loadCourseCate().then(res => {
+			if (res?.data) {
+				tabsList.value = [{
+					code: '',
+					name: '全部'
+				}, ...res.data]
 			}
 		})
 		pageNumber.value = 1;
@@ -219,19 +241,23 @@
 			url: `/pages/goOnEdu/course/courseDetail/courseDetail?id=${course.id}&name=${course.courseName}`
 		});
 	}
+
+	function loadmore() {
+		if (courses.value.length === total.value) {
+			return;
+		}
+		search(searchForm.value.keyword);
+	}
 	onMounted(() => {
 		isMember.value = authStore.userInfo.isMember === 1 ? true : false
 		// console.log(authStore.userInfo.isMember)
-	    init();
-	    watch(currentTab, (newValue) => {
-	        courseStore.setCurrentTab(newValue); // 如果需要在切换时更新 Pinia 状态
-	    });
+		init();
+		watch(currentTab, (newValue) => {
+			courseStore.setCurrentTab(newValue); // 如果需要在切换时更新 Pinia 状态
+		});
 	});
-	onReachBottom(()=>{
-		if(courses.value.length === total.value){
-			return;
-		}
-		search(searchForm.value.keyword);
+	onReachBottom(() => {
+		loadmore()
 	})
 </script>