fix: 对接首页原乡行、精品课程模块

.hbuilderx/launch.json

@@ -18,6 +18,10 @@
             "customPlaygroundType" : "local",
             "playground" : "custom",
             "type" : "uni-app:app-android"
+        },
+        {
+            "playground" : "standard",
+            "type" : "uni-app:app-ios"
         }
     ]
 }

api/home.js

@@ -30,3 +30,13 @@ export function getHomeGoods(data) {
 export function getHomeGoodsRecommend(data) {
 	return request('/store/app/index/home/goods/recommend', data || {}, 'GET');
 }
+
+/* 课程分类分页 */
+export function courseTypeDataApi(data) {
+	return request('/app/course/publicCourseCategory/list', data || {}, 'GET');
+}
+
+// 课程列表分页
+export function courseListDataApi(data) {
+	return request('/app/course/publicCourse/list', data || {}, 'GET');
+}

common/request.js

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

pages.json

@@ -4593,12 +4593,12 @@
 				"text": "首页"
 			},
 
-			{
-				"pagePath": "pages/course/index",
-				"iconPath": "/static/image/tabbar/tab_hall_icon.png",
-				"selectedIconPath": "/static/image/tabbar/tab_hall_on_icon.png",
-				"text": "讲堂"
-			},
+			// {
+			// 	"pagePath": "pages/course/index",
+			// 	"iconPath": "/static/image/tabbar/tab_hall_icon.png",
+			// 	"selectedIconPath": "/static/image/tabbar/tab_hall_on_icon.png",
+			// 	"text": "讲堂"
+			// },
 			{
 				"pagePath": "pages_mall/index",
 				"iconPath": "/static/image/tabbar/mall.png",

pages/index/index.vue

@@ -21,7 +21,7 @@
 		</view>
 
 		<!-- 主题横幅 Banner -->
-		<scroll-view scroll-y class="scroll-content" :show-scrollbar="false">
+		<scroll-view scroll-y class="scroll-content" :show-scrollbar="false" @scrolltolower="getPageFreeCoursesData">
 			<view class="banner" @click="onBannerClick">
 				<!-- <image class="banner-bg" src="/static/images/new/banner.png" mode="aspectFill"></image> -->
 				<view class="inner">
@@ -52,25 +52,28 @@
 				<view class="feature-video-card">
 					<scroll-view scroll-x class="tag-scroll" :show-scrollbar="false">
 						<view v-for="(tag, idx) in videoTags" :key="idx" class="tag-item"
-							:class="{ active: videoTagIndex === idx }" @click="videoTagIndex = idx">
-							<text>{{ tag }}</text>
+							:class="{ active: videoTagId === tag.cateId }" @click="handleSelectOneType(tag)">
+							<text>{{ tag.cateName }}</text>
 						</view>
 					</scroll-view>
-					<view class="x-bc" @click="onWatchLive">
-						<view class="fv-thumb">
-							<image class="fv-img" src="/static/images/new/banner.png" mode="aspectFill"></image>
-							<view class="live-tag">
-								<text class="live-dot"></text>
-								<text>直播中</text>
+					<template v-if="oneCourseListData.length >0">
+						<view v-for="(item,index) in oneCourseListData" :key="index" class="x-bc"
+							@click="onWatchLive(item)">
+							<view class="fv-thumb">
+								<image class="fv-img" :src="item.imgUrl || '/static/images/new/banner.png'" mode="aspectFill"></image>
+								<view v-if="false" class="live-tag">
+									<text class="live-dot"></text>
+									<text>直播中</text>
+								</view>
+							</view>
+							<view class="fv-info">
+								<text class="fv-title">{{ item.courseName }}</text>
+								<text class="fv-desc">{{ item.courseTitle }}</text>
+								<view class="btn-watch" @click.stop="onWatchLive(item)">立即观看</view>
 							</view>
 						</view>
-						<view class="fv-info">
-							<text class="fv-title">《长寿恩施》</text>
-							<text class="fv-desc">邀你一起看恩施美景，寻长寿秘密</text>
-							<view class="btn-watch" @click.stop="onWatchLive">立即观看</view>
-						</view>
-					</view>
-
+					</template>
+					<view class="emptyCourse" v-else>暂无课程~</view>
 				</view>
 			</view>
 
@@ -86,31 +89,32 @@
 					</view>
 				</view>
 				<view class="courseTabViewClass">
-					<u-tabs :list="courseTabList" lineWidth="0" lineHeight="0" lineColor="#FF233CFF"
-						:activeStyle="courseTabActiveStyle" :inactiveStyle="courseTabInactiveStyle">
+					<u-tabs :list="courseTabList" :current="courseCurrentIndex" lineWidth="0" lineHeight="0" lineColor="#FF233CFF"
+						:activeStyle="courseTabActiveStyle" :inactiveStyle="courseTabInactiveStyle" @click="handleSelectCourseTab">
 					</u-tabs>
 				</view>
-				<view class="course-list">
+				<view v-if="courses.length>0" class="course-list">
 					<view v-for="(course, idx) in courses" :key="idx" class="course-card"
-						@click="onCourseClick(course)">
+						@click="onWatchLive(course)">
 						<view class="course-thumb">
-							<image class="course-img" :src="course.cover || '/static/logo.jpg'" mode="aspectFill">
+							<image class="course-img" :src="course.imgUrl || '/static/logo.jpg'" mode="aspectFill">
 							</image>
 							<!-- <text class="course-tag">{{ course.tag }}</text> -->
 						</view>
 						<view class="course-info">
-							<text class="course-name">{{ course.name }}</text>
+							<text class="course-name">{{ course.courseName }}</text>
 							<view class="x-end" style="justify-content: space-between;">
 								<view class="course-meta">
 									<image src="@/static/images/new/renshu.png"></image>
-									<text class="meta-count">{{ course.views }}</text>
+									<text class="meta-count">{{ course.watchUserCount }}</text>
 								</view>
-								<view class="btn-watch2" @click.stop="onCourseClick(course)">立即观看</view>
+								<view class="btn-watch2" @click.stop="onWatchLive(course)">立即观看</view>
 							</view>
 
 						</view>
 					</view>
 				</view>
+				<view class="emptyCourse" v-else>暂无课程~</view>
 			</view>
 
 			<view class="bottom-placeholder"></view>
@@ -119,62 +123,25 @@
 </template>
 
 <script>
+	import {
+		courseTypeDataApi,courseListDataApi
+	} from '@/api/home'
 	export default {
 		data() {
 			return {
 				statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
-				videoTagIndex: 0,
-				videoTags: ['恩施', '长白山', '吉林', '武当山', '张家界', '更多'],
-				courses: [{
-						name: '歌唱家刘金的《0基础金曲演唱速练课》',
-						views: '9239',
-						tag: '0基础 金曲演唱速练',
-						cover: ''
-					},
-					{
-						name: '资深编辑邹方斌讲《毛笔书法修心课》',
-						views: '7.2w',
-						tag: '毛笔书法修心课',
-						cover: ''
-					},
-					{
-						name: '张斌《元气八段锦》系列课',
-						views: '5.9w',
-						tag: '元气八段锦',
-						cover: ''
-					},
-					{
-						name: '翔哥精讲摄影课-手机微距拍摄技巧分享',
-						views: '100w+',
-						tag: '手机微距 拍摄技巧分享',
-						cover: ''
-					}
-				],
-				courseTabList: [{
-						id: 1,
-						name: '精选'
-					},
-					{
-						id: 2,
-						name: '美食烹饪'
-					},
-					{
-						id: 3,
-						name: '居家安全'
-					},
-					{
-						id: 4,
-						name: '膳食营养'
-					},
-					{
-						id: 5,
-						name: '养生食谱'
-					},
-					{
-						id: 6,
-						name: '健康饮食'
-					}
-				],
+				videoTagId: null,
+				videoTags: [],
+				oneCourseListData: [],
+				courseTabId: null,
+				courseCurrentIndex: 0,
+				courses: [],
+				courseTabList: [],
+				freePage:{
+					pageNum: 1,
+					pageSize: 10,
+					total: 0,
+				},
 				courseTabActiveStyle: {
 					color: '#FFFFFFFF',
 					fontSize: '32rpx',
@@ -191,7 +158,10 @@
 				}
 			}
 		},
-		onLoad() {},
+		onLoad() {
+			this.getOneCourseTypeData()
+			this.getFreeCourseTypeData()
+		},
 		methods: {
 			onSearch() {
 				uni.navigateTo({
@@ -208,25 +178,111 @@
 					url: '/pages/index/video'
 				})
 			},
-			onWatchLive() {
-				uni.showToast({
-					title: '立即观看',
-					icon: 'none'
+			// 获取央广原乡行-类型
+			async getOneCourseTypeData() {
+				const params = {
+					pageNum: 1,
+					pageSize: 10,
+					isShow: 1,
+					cateType: 1,
+					yxxTag: 1
+				};
+				const res = await courseTypeDataApi(params);
+				if (res.code === 200) {
+					this.videoTags = res.data.list;
+					if(this.videoTags.length>0){
+						this.videoTagId = this.videoTags[0].cateId;
+						this.oneCourseListData = [];
+						// 获取原乡行课程列表
+						this.getYxxCourseList(this.videoTags[0].cateId)
+					}
+				}
+			},
+			// 获取免费精品课-类型
+			async getFreeCourseTypeData() {
+				const params = {
+					pageNum: 1,
+					pageSize: 10,
+					isShow: 1,
+					cateType: 1,
+					yxxTag: 0
+				};
+				const res = await courseTypeDataApi(params);
+				if (res.code === 200) {
+					this.courseTabList = res.data.list.map(item => ({
+						id: item.cateId,
+						name: item.cateName
+					}));
+					if(this.courseTabList.length>0){
+						this.courseTabId = this.courseTabList[0].id;
+						this.courses = [];
+						// 获取免费精品课课程列表
+						this.getFreeCourseList(this.courseTabId)
+					}
+				}
+			},
+			// 点击切换央广原乡行-类型
+			handleSelectOneType(e) {
+				this.videoTagId = e.cateId;
+				this.oneCourseListData = [];
+				// 获取原乡行课程列表
+				this.getYxxCourseList(this.videoTagId)
+			},
+			// 点击切换免费精品课-类型
+			handleSelectCourseTab(item) {
+				this.courseCurrentIndex = item.index;
+				this.courseTabId = item.id;
+				this.courses = [];
+				this.freePage.pageNum = 1;
+				this.freePage.total = 0;
+				// 获取免费精品课课程列表
+				this.getFreeCourseList(this.courseTabId)
+			},
+			// 获取原乡行课程列表
+			async getYxxCourseList(cateId) {
+				const params = {
+					pageNum: 1,
+					pageSize: 10,
+					cateId,
+					yxxTag: 1,
+				};
+				const res = await courseListDataApi(params);
+				if (res.code === 200 && res.data.list.length > 0) {
+					this.oneCourseListData = [res.data.list[0]];
+				}
+			},
+			// 获取免费精品课课程列表
+			async getFreeCourseList(cateId) {
+				const params = {
+					pageNum: this.freePage.pageNum,
+					pageSize: this.freePage.pageSize,
+					cateId,
+					yxxTag: 0,
+				};
+				const res = await courseListDataApi(params);
+				if (res.code === 200 && res.data.list.length > 0) {
+					this.freePage.total = res.data.total;
+					this.courses = [...this.courses, ...res.data.list];
+				}
+			},	
+			onWatchLive(e) {
+				uni.navigateTo({
+					url: `/pages/course/info?courseId=${e.courseId}`
 				})
-				// 可跳转: 
 			},
 			onMoreCourses() {
 				uni.navigateTo({
 					url: '/pages/index/course'
 				})
 			},
-			onCourseClick(course) {
-				uni.showToast({
-					title: course.name,
-					icon: 'none'
-				})
-				// 可跳转课程详情: uni.navigateTo({ url: '/pages_course/videovip?id=' + course.id })
-			}
+			// 分页获取免费精品课课程列表
+			getPageFreeCoursesData() {
+				if(this.freePage.total>= this.courses.length){
+					return;
+				}
+				this.freePage.pageNum++;
+				this.getFreeCourseList(this.courseTabId)
+			},
 		}
 	}
 </script>
@@ -559,7 +615,7 @@
 	.btn-watch2 {
 		width: 168rpx;
 		height: 64rpx;
-		line-height: 64rpx;
+		line-height: 60rpx;
 		text-align: center;
 		background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
 		border-radius: 32rpx;
@@ -675,4 +731,13 @@
 	::v-deep .u-tabs__wrapper__nav__item {
 		padding: 0 10rpx !important;
 	}
+
+	.emptyCourse {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 200rpx;
+		padding: 24rpx 50rpx;
+		color: #999999;
+	}
 </style>