wenxingxing 5 дней назад
Родитель
Сommit
4828e7b1ed
2 измененных файлов с 115 добавлено и 80 удалено
  1. 1 1
      pages/index/index.vue
  2. 114 79
      pages/index/video.vue

+ 1 - 1
pages/index/index.vue

@@ -478,7 +478,7 @@
 	/* 横向标签 */
 	.tag-scroll {
 		white-space: nowrap;
-		margin-bottom: 20rpx;
+		margin-bottom: 22rpx;
 	}
 
 	.tag-item {

+ 114 - 79
pages/index/video.vue

@@ -1,40 +1,27 @@
 <template>
 	<view class="container">
 		<!-- 顶部导航 Tab -->
-		<view class="top-nav" :style="{marginTop: statusBarHeight}">
+		<view class="top-nav" :style="{ marginTop: statusBarHeight }">
 			<view class="nav-tabs">
-				<view
-					class="nav-item"
-					:class="{ active: tabIndex === 0 }"
-					@click="tabIndex = 0"
-				>
+				<view class="nav-item" :class="{ active: tabIndex === 0 }" @click="handleChangeTopTab(0)">
 					<text>央广原乡行</text>
 					<view v-if="tabIndex === 0" class="nav-indicator"></view>
 				</view>
-				<view
-					class="nav-item"
-					:class="{ active: tabIndex === 1 }"
-					@click="tabIndex = 1"
-				>
+				<view class="nav-item" :class="{ active: tabIndex === 1 }" @click="handleChangeTopTab(1)">
 					<text>最近观看</text>
 					<view v-if="tabIndex === 1" class="nav-indicator"></view>
 				</view>
 			</view>
 			<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"
-					>
+					<view v-for="(cat, idx) in categories" :key="idx" class="tag-item"
+						:class="{ active: categoryIndex === idx }" @click="categoryIndex = idx">
 						<text>{{ cat }}</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>
+					<image :class="{ 'rotate-arrow': !categoryExpand }" src="@/static/images/new/expand.png"></image>
 					<!-- <text class="arrow">{{ categoryExpand ? '▲' : '▼' }}</text> -->
 				</view>
 			</view>
@@ -43,16 +30,9 @@
 		<!-- 精品课程 内容 -->
 		<scroll-view v-show="tabIndex === 0" scroll-y class="scroll-wrap" :show-scrollbar="false">
 			<!-- 分类标签区 -->
-			
-
 			<!-- 课程网格 -->
 			<view class="course-grid">
-				<view
-					v-for="(course, idx) in courseList"
-					:key="idx"
-					class="course-card"
-					@click="onCourseClick(course)"
-				>
+				<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>
 					</view>
@@ -60,14 +40,14 @@
 						<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>
 						</view>
 					</view>
-					
+
 				</view>
 			</view>
 			<view class="bottom-placeholder"></view>
@@ -82,12 +62,7 @@
 						<image class="date-icon" src="@/static/images/new/time.png"></image>
 						<text class="date-text">{{ group.date }}</text>
 					</view>
-					<view
-						v-for="(item, i) in group.list"
-						:key="i"
-						class="recent-card"
-						@click="onCourseClick(item)"
-					>
+					<view v-for="(item, i) in group.list" :key="i" class="recent-card" @click="onCourseClick(item)">
 						<view class="recent-thumb">
 							<image :src="item.cover || '/static/logo.jpg'" mode="aspectFill" class="thumb-img"></image>
 						</view>
@@ -112,21 +87,18 @@
 				<view class="recommend-section">
 					<text class="recommend-title">为您精选</text>
 					<view class="course-grid" style="padding: 0;">
-						<view
-							v-for="(course, idx) in recommendList"
-							:key="idx"
-							class="course-card"
-							@click="onCourseClick(course)"
-						>
+						<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>
+								<image :src="course.cover || '/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>
@@ -150,7 +122,7 @@ export default {
 			tabIndex: 0,
 			categoryExpand: true,
 			categoryIndex: 0,
-			categories: ['全部', '歌唱艺术', '太极养生', '防骗指南', '手机摄影', '棋牌益智', '用药指导', '膳食营养', '慢病管理'],
+			categories: [],
 			courseList: [
 				{ title: '刘金的《0基础金曲演唱速练课》', views: '9239', cover: '' },
 				{ title: '邹方斌讲《毛笔书法修心课》', views: '10.8w', cover: '' },
@@ -185,21 +157,42 @@ export default {
 	onLoad() {
 		// 若无最近学习,可置空 recentList 显示空态
 		// this.recentList = [];
+		this.getOneCourseTypeData();
 	},
 	methods: {
 		onCourseClick(course) {
 			uni.showToast({ title: course.title || '立即观看', icon: 'none' })
 			// uni.navigateTo({ url: '/pages_course/videovip?id=' + (course.id || '') })
-		}
+		},
+		// 切换顶部 Tab
+		handleChangeTopTab(index) {
+			this.tabIndex = index;
+		},
+		// 获取央广原乡行-类型
+		async getOneCourseTypeData() {
+			const params = {
+				pageNum: 1,
+				pageSize: 20,
+				isShow: 1,
+				cateType: 1,
+				yxxTag: 1
+			};
+			const res = await courseTypeDataApi(params);
+			if (res.code === 200) {
+				console.log(res.data.list);
+				this.categories = res.data.list;
+			}
+		},
 	}
 }
 </script>
 
 <style scoped>
-	/* 图片箭头旋转类(展开时向上) */
-	.rotate-arrow {
-	  transform: rotate(180deg);
-	}
+/* 图片箭头旋转类(展开时向上) */
+.rotate-arrow {
+	transform: rotate(180deg);
+}
+
 .container {
 	min-height: 100vh;
 	background: #F5F5F5;
@@ -214,29 +207,34 @@ export default {
 	background: #fff;
 	/* border-bottom: 1rpx solid #f0f0f0; */
 }
+
 .nav-tabs {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
+
 .nav-item {
-	flex:1;
+	flex: 1;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	position: relative;
 	padding: 24rpx 0;
 }
+
 .nav-item text {
 	font-family: PingFangSC, PingFang SC;
 	font-weight: 400;
 	font-size: 36rpx;
 	color: #030303;
 }
+
 .nav-item.active text {
 	font-weight: 600;
 	font-size: 40rpx;
 }
+
 .nav-indicator {
 	position: absolute;
 	left: 50%;
@@ -244,14 +242,16 @@ export default {
 	transform: translateX(-50%);
 	width: 100rpx;
 	height: 10rpx;
-	background: linear-gradient( 135deg, #FF5267 0%, #FF233C 100%);
+	background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
 	border-radius: 6rpx;
 }
+
 .nav-actions {
 	display: flex;
 	align-items: center;
 	gap: 24rpx;
 }
+
 .action-icon {
 	font-size: 36rpx;
 	color: #666;
@@ -265,24 +265,27 @@ export default {
 
 /* 分类标签 */
 .category-wrap {
-	padding:24rpx 0;
+	padding: 24rpx 0;
 	border-radius: 0rpx 0rpx 20rpx 20rpx;
 	background: #fff;
 	display: flex;
 	align-items: center;
 	flex-direction: column;
 }
+
 .category-tags {
 	display: flex;
 	flex-wrap: wrap;
-	gap:24rpx;
+	gap: 24rpx;
 	flex-direction: row;
 	justify-content: center;
 }
+
 .category-tags.collapsed {
 	max-height: 88rpx;
 	overflow: hidden;
 }
+
 .tag-item {
 	width: 30%;
 	padding: 20rpx 0;
@@ -290,18 +293,22 @@ export default {
 	border-radius: 20rpx;
 	background: #f0f0f0;
 }
+
 .tag-item text {
 	font-family: PingFangSC, PingFang SC;
 	font-weight: 400;
 	font-size: 40rpx;
-	color: rgba(0,0,0,0.85);
+	color: rgba(0, 0, 0, 0.85);
 }
+
 .tag-item.active {
-	background: linear-gradient( 135deg, #FF5267 0%, #FF233C 100%);
+	background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
 }
+
 .tag-item.active text {
 	color: #fff;
 }
+
 .expand-btn {
 	display: flex;
 	align-items: center;
@@ -312,29 +319,34 @@ export default {
 	border-radius: 32rpx;
 	border: 2rpx solid #FF233C;
 }
+
 .expand-btn text {
 	font-family: PingFangSC, PingFang SC;
 	font-weight: 400;
 	font-size: 32rpx;
 	color: #FF233C;
 }
+
 .expand-btn .arrow {
 	margin-left: 6rpx;
 	font-size: 22rpx;
 }
-.expand-btn image{
-	margin-left:10rpx ;
+
+.expand-btn image {
+	margin-left: 10rpx;
 	width: 32rpx;
 	height: 32rpx;
 }
+
 /* 课程网格 */
 .course-grid {
 	display: flex;
 	flex-wrap: wrap;
-	padding:24rpx;
+	padding: 24rpx;
 	gap: 24rpx 20rpx;
 	flex-direction: column;
 }
+
 .course-card {
 	display: flex;
 	background: #fff;
@@ -342,20 +354,22 @@ export default {
 	overflow: hidden;
 	padding: 20rpx;
 }
+
 .course-tag {
 	position: absolute;
 	left: 0;
 	bottom: 0;
 	right: 0;
 	padding: 8rpx 12rpx;
-	background: linear-gradient(transparent, rgba(0,0,0,0.6));
+	background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
 	font-size: 22rpx;
 	color: #fff;
 }
+
 .course-info {
 	flex: 1;
 	padding-left: 24rpx;
-/* padding: 20rpx 24rpx; */
+	/* padding: 20rpx 24rpx; */
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
@@ -366,7 +380,7 @@ export default {
 	font-family: PingFangSC, PingFang SC;
 	font-weight: 400;
 	font-size: 32rpx;
-	color: rgba(0,0,0,0.65);
+	color: rgba(0, 0, 0, 0.65);
 	line-height: 44rpx;
 	text-align: justify;
 	overflow: hidden;
@@ -375,11 +389,13 @@ export default {
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;
 }
+
 .meta-icon {
 	font-size: 24rpx;
 	margin-right: 6rpx;
 	color: #999;
 }
+
 .meta-count {
 	margin-left: 10rpx;
 	font-family: PingFangSC, PingFang SC;
@@ -387,6 +403,7 @@ export default {
 	font-size: 32rpx;
 	color: #666666;
 }
+
 .card-cover {
 	position: relative;
 	width: 296rpx;
@@ -395,11 +412,13 @@ export default {
 	overflow: hidden;
 	flex-shrink: 0;
 }
+
 .cover-img {
 	width: 100%;
 	height: 100%;
 	background: #BB6D6D;
 }
+
 .card-title {
 	font-family: PingFangSC, PingFang SC;
 	font-weight: 600;
@@ -413,15 +432,17 @@ export default {
 	-webkit-line-clamp: 1;
 	-webkit-box-orient: vertical;
 }
+
 .card-footer {
 	flex: 1;
-		padding-left: 24rpx;
+	padding-left: 24rpx;
 	/* padding: 20rpx 24rpx; */
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-		min-width: 0;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	min-width: 0;
 }
+
 .card-views {
 	font-family: PingFangSC, PingFang SC;
 	font-weight: 400;
@@ -429,16 +450,17 @@ export default {
 	color: #666666;
 	line-height: 44rpx;
 }
+
 .btn-watch {
-		width: 168rpx;
-		height: 64rpx;
-		line-height: 64rpx;
-		text-align: center;
-		background: linear-gradient( 135deg, #FF5267 0%, #FF233C 100%);
-		border-radius: 32rpx;
-		font-family: PingFangSC, PingFang SC;
-		font-weight: 600;
-		font-size: 32rpx;
+	width: 168rpx;
+	height: 64rpx;
+	line-height: 64rpx;
+	text-align: center;
+	background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
+	border-radius: 32rpx;
+	font-family: PingFangSC, PingFang SC;
+	font-weight: 600;
+	font-size: 32rpx;
 	color: #FFFFFF;
 }
 
@@ -446,16 +468,19 @@ export default {
 .recent-group {
 	padding: 24rpx 24rpx 0;
 }
+
 .group-date {
 	display: flex;
 	align-items: center;
 	margin-bottom: 24rpx;
 }
+
 .date-icon {
 	width: 32rpx;
 	height: 32rpx;
 	margin-right: 8rpx;
 }
+
 .date-text {
 	font-family: PingFangSC, PingFang SC;
 	font-weight: 600;
@@ -463,6 +488,7 @@ export default {
 	line-height: 56rpx;
 	color: #222222;
 }
+
 .recent-card {
 	display: flex;
 	background: #fff;
@@ -471,9 +497,11 @@ export default {
 	padding: 20rpx;
 	margin-bottom: 24rpx;
 }
-.recent-card:last-child{
+
+.recent-card:last-child {
 	margin-bottom: 0;
 }
+
 .recent-thumb {
 	position: relative;
 	width: 296rpx;
@@ -482,11 +510,13 @@ export default {
 	overflow: hidden;
 	flex-shrink: 0;
 }
+
 .thumb-img {
 	width: 100%;
 	height: 100%;
 	background: #BB6D6D;
 }
+
 .recent-info {
 	flex: 1;
 	padding-left: 24rpx;
@@ -496,6 +526,7 @@ export default {
 	justify-content: space-between;
 	min-width: 0;
 }
+
 .recent-title {
 	font-family: PingFangSC, PingFang SC;
 	font-weight: 600;
@@ -509,11 +540,12 @@ export default {
 	-webkit-line-clamp: 1;
 	-webkit-box-orient: vertical;
 }
+
 .recent-progress {
 	font-family: PingFangSC, PingFang SC;
 	font-weight: 400;
 	font-size: 32rpx;
-	color: rgba(0,0,0,0.65);
+	color: rgba(0, 0, 0, 0.65);
 	line-height: 44rpx;
 }
 
@@ -526,16 +558,18 @@ export default {
 	padding: 80rpx 0 48rpx;
 	/* background: linear-gradient(180deg, #fff5f5 0%, #fff 100%); */
 }
+
 .empty-icon {
 	width: 310rpx;
 	height: 260rpx;
 	margin-bottom: 30rpx;
 }
+
 .empty-text {
 	font-family: PingFangSC, PingFang SC;
 	font-weight: 400;
 	font-size: 36rpx;
-	color: rgba(0,0,0,0.25);
+	color: rgba(0, 0, 0, 0.25);
 	line-height: 50rpx;
 }
 
@@ -543,6 +577,7 @@ export default {
 .recommend-section {
 	padding: 0 24rpx 32rpx;
 }
+
 .recommend-title {
 	display: block;
 	font-family: PingFangSC, PingFang SC;