fix: 对接联调央广原乡行页面

common/request.js

@@ -4,7 +4,7 @@ export default class Request {
 		let that = this;
 		// let path2 = 'https://userapp.klbycp.com'; //百域承品
 	    // let path = 'https://userapp.klbycp.com'; //百域承品
-	    let path = 'http://z6c89589.natappfree.cc'; //百域承品
+	    let path = 'http://vab6e976.natappfree.cc'; //百域承品
 		// let path2 = 'https://userapp.zkhj6.com';
 		// let path = 'https://userapp.zkhj6.com';
 		let token = uni.getStorageSync('AppToken');

pages/index/index.vue

@@ -68,7 +68,7 @@
 							</view>
 							<view class="fv-info">
 								<text class="fv-title">{{ item.courseName }}</text>
-								<text class="fv-desc">{{ item.courseTitle }}</text>
+								<text class="fv-desc">{{ item.courseDesc }}</text>
 								<view class="btn-watch" @click.stop="onWatchLive(item)">立即观看</view>
 							</view>
 						</view>

pages/index/video.vue

@@ -15,46 +15,48 @@
 			<view v-if="tabIndex === 0" class="category-wrap">
 				<view class="category-tags" :class="{ collapsed: !categoryExpand }">
 					<view v-for="(cat, idx) in categories" :key="idx" class="tag-item"
-						:class="{ active: categoryIndex === idx }" @click="categoryIndex = idx">
-						<text>{{ cat }}</text>
+						:class="{ active: categoryIndex === cat.cateId }" @click="handleCategoryIdClick(cat.cateId)">
+						<text class="ellipsis">{{ cat.cateName }}</text>
 					</view>
 				</view>
 				<view class="expand-btn" @click="categoryExpand = !categoryExpand">
 					<text>{{ categoryExpand ? '收起' : '展开' }}</text>
 					<image :class="{ 'rotate-arrow': !categoryExpand }" src="@/static/images/new/expand.png"></image>
-					<!-- <text class="arrow">{{ categoryExpand ? '▲' : '▼' }}</text> -->
 				</view>
 			</view>
 		</view>
 
 		<!-- 精品课程 内容 -->
-		<scroll-view v-show="tabIndex === 0" scroll-y class="scroll-wrap" :show-scrollbar="false">
+		<scroll-view v-show="tabIndex === 0" scroll-y class="scroll-wrap" :show-scrollbar="false"
+			@scrolltolower="getPageYxxeCoursesData">
 			<!-- 分类标签区 -->
 			<!-- 课程网格 -->
-			<view class="course-grid">
+			<view v-if="courseList.length > 0" class="course-grid">
 				<view v-for="(course, idx) in courseList" :key="idx" class="course-card" @click="onCourseClick(course)">
 					<view class="card-cover">
-						<image :src="course.cover || '/static/logo.jpg'" mode="aspectFill" class="cover-img"></image>
+						<image :src="course.imgUrl || '/static/logo.jpg'" mode="aspectFill" class="cover-img"></image>
 					</view>
 					<view class="course-info">
-						<text class="card-title">{{ course.title }}</text>
-						<view class="y-bc">
-							<view class="course-meta">
-								邀你一起看恩施美景，寻长寿秘密
-							</view>
-							<view class="y-end">
-								<view class="btn-watch" @click.stop="onCourseClick(item)">立即观看</view>
-							</view>
+						<text class="card-title">{{ course.courseName }}</text>
+						<view class="course-meta">
+							{{ course.courseDesc }}
+						</view>
+						<view class="y-end">
+							<view class="btn-watch" @click.stop="onCourseClick(course)">立即观看</view>
 						</view>
 					</view>
-
 				</view>
 			</view>
+			<view v-else class="empty-state">
+				<image class="empty-icon" src="@/static/images/new/nodata.png"></image>
+				<text class="empty-text">暂无课程</text>
+			</view>
 			<view class="bottom-placeholder"></view>
 		</scroll-view>
 
 		<!-- 最近学习 内容 -->
-		<scroll-view v-show="tabIndex === 1" scroll-y class="scroll-wrap" :show-scrollbar="false">
+		<scroll-view v-show="tabIndex === 1" scroll-y class="scroll-wrap" :show-scrollbar="false"
+			@scrolltolower="recentList.length > 0 ? getPageCourseStudyData() : getPageRecommendCoursesData()">
 			<!-- 有学习记录：按日期分组列表 -->
 			<template v-if="recentList.length > 0">
 				<view v-for="(group, gIdx) in recentList" :key="gIdx" class="recent-group">
@@ -67,8 +69,8 @@
 							<image :src="item.cover || '/static/logo.jpg'" mode="aspectFill" class="thumb-img"></image>
 						</view>
 						<view class="recent-info">
-							<text class="recent-title">{{ item.title }}</text>
-							<text class="recent-meta">邀你一起看恩施美景，寻长寿秘密</text>
+							<text class="recent-title">{{ item.courseName }}</text>
+							<text class="recent-meta">{{ item.courseDesc }}</text>
 							<view class="y-end">
 								<view class="btn-watch" @click.stop="onCourseClick(item)">回看</view>
 							</view>
@@ -80,33 +82,34 @@
 			<!-- 无学习记录：空态 + 为您精选 -->
 			<template v-else>
 				<view class="empty-state">
-					<!-- <view class="empty-icon"></view> -->
 					<image class="empty-icon" src="@/static/images/new/nodata.png"></image>
 					<text class="empty-text">暂无学习内容</text>
 				</view>
 				<view class="recommend-section">
-					<text class="recommend-title">为您精选</text>
-					<view class="course-grid" style="padding: 0;">
+					<text class="recommend-title">精彩推荐</text>
+					<view v-if="recommendList.length > 0" class="course-grid" style="padding: 0;">
 						<view v-for="(course, idx) in recommendList" :key="idx" class="course-card"
 							@click="onCourseClick(course)">
 							<view class="card-cover">
-								<image :src="course.cover || '/static/logo.jpg'" mode="aspectFill" class="cover-img">
+								<image :src="course.imgUrl || '/static/logo.jpg'" mode="aspectFill" class="cover-img">
 								</image>
 							</view>
 
 							<view class="card-footer">
-								<text class="card-title">{{ course.title }}</text>
-								<view class="y-b">
-									<view class="course-meta">
-										邀你一起看恩施美景，寻长寿秘密
-									</view>
-									<view class="y-end">
-										<view class="btn-watch" @click.stop="onCourseClick(item)">回看</view>
-									</view>
+								<text class="card-title">{{ course.courseName }}</text>
+								<view class="course-meta">
+									{{ course.courseDesc }}
+								</view>
+								<view class="y-end">
+									<view class="btn-watch" @click.stop="onCourseClick(course)">回看</view>
 								</view>
 							</view>
 						</view>
 					</view>
+					<view v-else class="empty-state">
+						<image class="empty-icon" src="@/static/images/new/nodata.png"></image>
+						<text class="empty-text">暂无课程</text>
+					</view>
 				</view>
 			</template>
 			<view class="bottom-placeholder"></view>
@@ -115,6 +118,10 @@
 </template>
 
 <script>
+import {
+	courseTypeDataApi, courseListDataApi
+} from '@/api/home'
+import { getCourseStudyList } from '@/api/course'
 export default {
 	data() {
 		return {
@@ -122,15 +129,13 @@ export default {
 			tabIndex: 0,
 			categoryExpand: true,
 			categoryIndex: 0,
-			categories: [],
-			courseList: [
-				{ title: '刘金的《0基础金曲演唱速练课》', views: '9239', cover: '' },
-				{ title: '邹方斌讲《毛笔书法修心课》', views: '10.8w', cover: '' },
-				{ title: '张斌《元气八段锦》系列课', views: '2.5w', cover: '' },
-				{ title: '翔哥精讲摄影课—手机微距拍摄技巧...', views: '100w+', cover: '' },
-				{ title: '道家智慧 入门21讲', views: '1.2w', cover: '' },
-				{ title: '入门进阶必修 瑜伽呼吸全精讲', views: '3.6w', cover: '' }
-			],
+			categories: [{ cateId: 0, cateName: '全部' }],
+			courseList: [],
+			yxxPage: {
+				pageNum: 1,
+				pageSize: 10,
+				total: 0,
+			},
 			recentList: [
 				// {
 				// 	date: '2026-02-08',
@@ -146,28 +151,102 @@ export default {
 				// 	]
 				// }
 			],
-			recommendList: [
-				{ title: '刘金的《0基础金曲演唱速练课》', views: '9239', cover: '' },
-				{ title: '邹方斌讲《毛笔书法修心课》', views: '10.8w', cover: '' },
-				{ title: '张斌《元气八段锦》系列课', views: '2.5w', cover: '' },
-				{ title: '翔哥精讲摄影课-手机微距拍摄技巧...', views: '100w+', cover: '' }
-			]
+			recentPage: {
+				pageNum: 1,
+				pageSize: 10,
+				total: 0,
+			},
+			recommendList: [],
+			recommendPage: {
+				pageNum: 1,
+				pageSize: 10,
+				total: 0,
+			},
 		}
 	},
 	onLoad() {
-		// 若无最近学习，可置空 recentList 显示空态
-		// this.recentList = [];
 		this.getOneCourseTypeData();
+		this.getYxxCourseList();
 	},
 	methods: {
-		onCourseClick(course) {
-			uni.showToast({ title: course.title || '立即观看', icon: 'none' })
-			// uni.navigateTo({ url: '/pages_course/videovip?id=' + (course.id || '') })
+		onCourseClick(e) {
+			uni.navigateTo({
+				url: `/pages/course/info?courseId=${e.courseId}`
+			})
 		},
 		// 切换顶部 Tab
 		handleChangeTopTab(index) {
 			this.tabIndex = index;
+			if (index == 1) {
+				this.resetCourseStudyDataList()
+			}
+		},
+
+		// 获取学习记录课程列表
+		async getCourseStudyListMethos() {
+			const res = await getCourseStudyList({});
+			if (res.code === 200 && res.data.list.length > 0) {
+				this.recentPage.total = res.data.total;
+				this.recentList = [...this.recentList, ...res.data.list];
+			} else {
+				this.recentList = [];
+				this.resetRecommendDataList();
+			}
+		},
+
+		// 分页获取学习记录课程列表
+		getPageCourseStudyData() {
+			if (this.recentPage.total <= this.recentList.length) {
+				return;
+			}
+			this.recentPage.pageNum++;
+			this.getCourseStudyListMethos();
+		},
+
+		// 学习记录课程列表重置方法
+		resetCourseStudyDataList() {
+			this.recentPage.pageNum = 1;
+			this.recentPage.total = 0;
+			this.recentList = [];
+			this.getCourseStudyListMethos();
+		},
+
+		// 获取精彩推荐课程列表
+		async getRecommendData() {
+			let params = {
+				pageNum: this.recommendPage.pageNum,
+				pageSize: this.recommendPage.pageSize,
+			};
+			const res = await courseListDataApi(params);
+			if (res.code === 200 && res.data.list.length > 0) {
+				this.recommendPage.total = res.data.total;
+				this.recommendList = [...this.recommendList, ...res.data.list];
+			}
+		},
+
+		// 分页获取精彩推荐课程列表
+		getPageRecommendCoursesData() {
+			if (this.recommendPage.total <= this.recommendList.length) {
+				return;
+			}
+			this.recommendPage.pageNum++;
+			this.getRecommendData();
+		},
+
+		// 精彩推荐课程列表重置方法
+		resetRecommendDataList() {
+			this.recommendPage.pageNum = 1;
+			this.recommendPage.total = 0;
+			this.recommendList = [];
+			this.getRecommendData();
 		},
+
+		// 点击分类标签
+		handleCategoryIdClick(id) {
+			this.categoryIndex = id;
+			this.resetYxxDataList();
+		},
+
 		// 获取央广原乡行-类型
 		async getOneCourseTypeData() {
 			const params = {
@@ -180,8 +259,43 @@ export default {
 			const res = await courseTypeDataApi(params);
 			if (res.code === 200) {
 				console.log(res.data.list);
-				this.categories = res.data.list;
+				this.categories = [...this.categories, ...res.data.list];
+			}
+		},
+
+		// 获取原乡行课程列表
+		async getYxxCourseList() {
+			let params = {
+				pageNum: this.yxxPage.pageNum,
+				pageSize: this.yxxPage.pageSize,
+				cateId: this.categoryIndex,
+				yxxTag: 1,
+			};
+			if (params.cateId === 0) {
+				delete params.cateId;
+			}
+			const res = await courseListDataApi(params);
+			if (res.code === 200 && res.data.list.length > 0) {
+				this.yxxPage.total = res.data.total;
+				this.courseList = [...this.courseList, ...res.data.list];
+			}
+		},
+
+		// 分页获取原乡行课程列表
+		getPageYxxeCoursesData() {
+			if (this.yxxPage.total <= this.courseList.length) {
+				return;
 			}
+			this.yxxPage.pageNum++;
+			this.getYxxCourseList();
+		},
+
+		// 原乡行课程列表重置方法
+		resetYxxDataList() {
+			this.yxxPage.pageNum = 1;
+			this.yxxPage.total = 0;
+			this.courseList = [];
+			this.getYxxCourseList();
 		},
 	}
 }
@@ -274,24 +388,37 @@ export default {
 }
 
 .category-tags {
+	width: 100%;
+	box-sizing: border-box;
+	padding: 0 24rpx;
 	display: flex;
 	flex-wrap: wrap;
-	gap: 24rpx;
 	flex-direction: row;
-	justify-content: center;
 }
 
 .category-tags.collapsed {
-	max-height: 88rpx;
+	max-height: 100rpx;
 	overflow: hidden;
 }
 
 .tag-item {
-	width: 30%;
+	width: 31%;
+	height: 96rpx;
+	box-sizing: border-box;
 	padding: 20rpx 0;
 	text-align: center;
 	border-radius: 20rpx;
 	background: #f0f0f0;
+	margin-right: 3%;
+	margin-bottom: 24rpx;
+}
+
+.tag-item:nth-last-child(-n+3) {
+	margin-bottom: 0;
+}
+
+.tag-item:nth-child(3n) {
+	margin-right: 0;
 }
 
 .tag-item text {
@@ -454,7 +581,7 @@ export default {
 .btn-watch {
 	width: 168rpx;
 	height: 64rpx;
-	line-height: 64rpx;
+	line-height: 60rpx;
 	text-align: center;
 	background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
 	border-radius: 32rpx;