From a5225a958e90e0d5cd30242591c38e5fd44acadf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Mon, 15 Sep 2025 17:30:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A6=96=E9=A1=B5=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/plugins/video/components/search.vue |  80 ++++++
 pages/plugins/video/index/index.vue       | 328 +++++++++++++---------
 2 files changed, 272 insertions(+), 136 deletions(-)
 create mode 100644 pages/plugins/video/components/search.vue

diff --git a/pages/plugins/video/components/search.vue b/pages/plugins/video/components/search.vue
new file mode 100644
index 00000000..a606fe8b
--- /dev/null
+++ b/pages/plugins/video/components/search.vue
@@ -0,0 +1,80 @@
+<template> 
+    <view class="search-bar">
+        <iconfont name="icon-search-fine"></iconfont>
+        <input type="text" v-model="search_query" placeholder="请输入您的搜索内容" @input="handle_search" />
+        <view class="search-line"></view>
+        <view class="search-button" @tap="perform_search">搜索</view>
+    </view>
+</template>
+
+<script>
+export default {
+    props: {
+        propsSearchQuery: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            search_query: ''
+        }
+    },
+    created() {
+        this.init();
+    },
+    methods: {
+        init() {
+            this.setData({
+                search_query: this.search_query
+            })
+        },
+        handle_search(event) {
+            this.setData({
+                search_query: event.target.value,
+            });
+        },
+        perform_search() {
+            // 这里可以添加搜索逻辑
+            this.$emit('search', this.search_query);
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+/* 搜索框 */
+.search-bar {
+	display: flex;
+	align-items: center;
+	background: rgba(255,255,255,0.5);
+	border-radius: 38rpx;
+	border: 2rpx solid #313131;
+    height: 100%;
+	margin: 0 24rpx;
+	.iconfont-container {
+		padding: 16rpx 30rpx;
+		padding-right: 20rpx;
+	}
+	input {
+		flex: 1;
+		height: 100%;
+		padding: 16rpx 0;
+		box-sizing: border-box;
+	}
+	.search-line {
+		width: 2rpx;
+		height: 100%;
+		padding: 16rpx 0;
+		margin-left: 20rpx;
+		background-color: #eee;
+	}
+	.search-button { 
+		font-weight: 500;
+		font-size: 28rpx;
+		color: #333333;
+		line-height: 20px;
+		padding: 16rpx 30rpx 16rpx 20rpx;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/pages/plugins/video/index/index.vue b/pages/plugins/video/index/index.vue
index b8343fc9..30d5e016 100644
--- a/pages/plugins/video/index/index.vue
+++ b/pages/plugins/video/index/index.vue
@@ -1,222 +1,278 @@
-
 <template>
-	<view>
-		<!-- 搜索框 -->
-		<view class="search-bar">
-			<input type="text" v-model="searchQuery" placeholder="系统软件" @input="handleSearch" />
-			<button @click="performSearch">搜索</button>
-		</view>
-
-		<!-- 导航栏 -->
-		<view class="nav-tabs">
-			<scroll-view scroll-x class="tabs-scroll">
-				<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: currentTab === index }" @click="switchTab(index)">{{ tab }}</view>
-			</scroll-view>
-		</view>
-
-		<!-- 推荐视频卡片区域 -->
-		<view class="recommend-videos">
-			<view class="video-grid">
-				<view 
-					v-for="(video, index) in recommendVideos" 
-					:key="index" 
-					class="video-card" 
-					@click="navigateToDetail(video)"
-				>
-					<image 
-						class="video-thumbnail" 
-						:src="video.thumbnailUrl" 
-						mode="aspectFill"
-					></image>
-					<text class="video-title">{{ video.title }}</text>
-					<text class="video-date">{{ video.date }}</text>
-					<text class="video-likes">👍 {{ video.likes }}</text>
+	<view class="wh-auto ht-auto pr video-container">
+		<scroll-view  scroll-y :show-scrollbar="false" class="ht" @scrolltolower="on_scroll_lower_event" @scrolltoupper="on_scroll_upper_event" lower-threshold="60" scroll-with-animation="true">
+			<view class="wh-auto ht-auto pr">
+				<!-- 搜索框 -->
+				<view class="header-top">
+					<view class="wh-auto ht-auto" :style="top_content_style">
+						<search-component :propsSearchQuery="search_query" @search="handle_search" />
+					</view>
+					<!-- 导航栏 -->
+					<view class="nav-tabs">
+						<scroll-view scroll-x :show-scrollbar="false" class="tabs-scroll" style="white-space: nowrap;">
+							<view class="tabs-scroll-content">
+								<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: currentTab === index }" :data-index="index" @click="switch_tab">{{ tab }}</view>
+							</view>
+						</scroll-view>
+					</view>
+				</view>
+				<!-- 推荐视频卡片区域 -->
+				<view class="recommend-videos">
+					<view class="video-grid">
+						<view v-for="(item, index) in recommend_videos" :key="index" class="video-card" :data-value="item" @click="navigate_to_detail">
+							<image class="video-thumbnail" :src="item.thumbnail_url" mode="widthFix"></image>
+							<view class="video-info flex-col jc-c"> 
+								<view class="video-title text-line-2">{{ item.title }}</view>
+								<view class="flex-row align-c jc-sb">
+									<view class="video-date">{{ item.date }}</view>
+									<view class="video-likes flex-row align-c gap-4">
+										<iconfont name="icon-givealike-o-fine" size="24rpx"></iconfont>
+										<text>{{ item.likes }}</text>
+									</view>
+								</view>
+							</view>
+						</view>
+					</view>
 				</view>
 			</view>
-		</view>
+		</scroll-view>
 	</view>
 </template>
 
 <script>
+import SearchComponent from '@/pages/plugins/video/components/search.vue';
+const app = getApp();
+var system = app.globalData.get_system_info(null, null, true);
+// 状态栏高度
+var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
+// #ifdef MP-TOUTIAO
+bar_height = 0;
+// #endif
 export default {
+	components: {
+		SearchComponent
+	},
 	data() {
 		return {
-			searchQuery: '',
-			tabs: ['推荐', 'DIV装修', '商城管理', '多商户', '多门店', '客服'],
+			// 5,7,0 是误差，10 是下边距,bar_height是不同小程序下的导航栏距离顶部的高度
+			// #ifdef MP
+			top_content_style: 'padding-top:' + (bar_height + 5) + 'px;padding-bottom:10px;',
+			// #endif
+			// #ifdef H5 || MP-TOUTIAO
+			top_content_style: 'padding-top:' + (bar_height + 7) + 'px;padding-bottom:10px;',
+			// #endif
+			// #ifdef APP
+			top_content_style: 'padding-top:' + bar_height + 'px;padding-bottom:10px;',
+			// #endif
+			search_query: '',
+			tabs: ['推荐', 'DIV装修', '商城管理', '多商户', '多门店', '客服','多门店', '客服'],
 			currentTab: 0,
-			recommendVideos: [
+			recommend_videos: [
 				{
-					thumbnailUrl: 'http://shopxo.com/static/upload/images/common/2019/05/17/1558073623641199.jpg',
+					thumbnail_url: 'http://shopxo.com/static/upload/images/plugins_homemiddleadv/2019/04/22/1555929400479636.jpg',
 					title: '进销存软件究竟要怎么选？',
 					date: '2025-06-12',
 					likes: 2189,
 					detailId: '1'
 				},
 				{
-					thumbnailUrl: 'http://shopxo.com/static/upload/images/common/2019/05/17/1558073623641199.jpg',
+					thumbnail_url: 'http://shopxo.com/static/upload/images/plugins_expressforkdn/2019/03/11/1552286675575734.png',
 					title: '一分钟告诉你，进销存是什么，进销存对企业有什么用...',
 					date: '2025-06-12',
 					likes: 2189,
 					detailId: '2'
 				},
 				{
-					thumbnailUrl: 'http://shopxo.com/static/upload/images/common/2019/05/17/1558073623641199.jpg',
+					thumbnail_url: 'http://shopxo.com/static/upload/images/goods_category/2023/08/12/1691819651259940.png',
 					title: '全自动Excel进销存管理系统',
 					date: '2025-06-12',
 					likes: 2189,
 					detailId: '3'
 				},
 				{
-					thumbnailUrl: 'https://placehold.co/600x400',
+					thumbnail_url: 'http://shopxo.com/static/upload/images/common/2019/05/17/1558073623641199.jpg',
 					title: '管家婆进销存到底有多简单',
 					date: '2025-06-12',
 					likes: 2189,
 					detailId: '4'
 				},
-				// 其他推荐视频...
 			],
 			isLoadingMore: false
 		};
 	},
+	created() {
+		this.init();
+	},
 	methods: {
-		// ... existing methods ...
-		handleSearch(event) {
-			this.searchQuery = event.target.value;
+		init() {
+			// 小程序下，获取小程序胶囊的宽度
+			let menu_button_info = 'max-width:100%';
+			// #ifndef MP-TOUTIAO
+				// #ifdef MP
+				// 判断是否有胶囊
+				const is_current_single_page = app.globalData.is_current_single_page();
+				// 如果有胶囊的时候，做处理
+				if (is_current_single_page == 0) {
+					const custom = uni.getMenuButtonBoundingClientRect();
+					menu_button_info = `max-width:calc(100% - ${custom.width + 10}px);`;
+				}
+				// #endif
+			// #endif
 		},
-		performSearch() {
-			// 这里可以添加搜索逻辑
-			console.log('搜索关键词:', this.searchQuery);
+		handle_search(event) {
+			this.search_query = event.target.value;
 		},
-		switchTab(index) {
+		switch_tab(e) {
+			const index = e.currentTarget.dataset.index;
 			this.currentTab = index;
 			// 根据当前标签加载对应的数据
-			this.loadRecommendVideos();
+			this.load_recommend_videos();
 		},
-		loadRecommendVideos() {
+		load_recommend_videos() {
 			// 加载推荐视频数据的逻辑
 			// 根据当前标签加载对应的数据
 			console.log('加载推荐视频数据');
 		},
-		navigateToDetail(video) {
+		navigate_to_detail(e) {
+			const item = e.currentTarget.dataset.value;
 			uni.navigateTo({
-				url: `/pages/plugins/video/detail/detail?videoId=${video.detailId}`
+				url: `/pages/plugins/video/detail/detail?videoId=${item.detailId}`
 			});
 		},
+		on_scroll_lower_event() {
+			this.loadMore();
+		},
+		on_scroll_upper_event() {
+			this.loadMore();
+		},
 		loadMore() {
-			if (this.isLoadingMore) return;
-			this.isLoadingMore = true;
 			// 加载更多数据的逻辑
 			setTimeout(() => {
 				// 假设这里加载了更多的视频数据
+				const data = this.recommend_videos;
 				const newVideos = [
 					{
-						thumbnailUrl: 'https://placehold.co/600x400',
+						thumbnail_url: 'http://shopxo.com/static/upload/images/plugins_homemiddleadv/2019/04/22/1555929400479636.jpg',
 						title: '新视频标题',
 						date: '2025-06-13',
 						likes: 1500,
 						detailId: '5'
 					}
 				];
-				this.recommendVideos.push(...newVideos);
-				this.isLoadingMore = false;
-			}, 2000);
+				data.push(...newVideos);
+				this.setData({
+					recommend_videos: data
+				});
+			}, 200);
 		}
 	}
 };
 </script>
 
 <style>
-/* ... existing styles ... */
-
-.search-bar {
-	display: flex;
-	align-items: center;
-	padding: 10px;
-	background-color: #f8f8f8;
-	border-bottom: 1px solid #ddd;
+.header-top {
+	position: sticky;
+	top: 0;
+	background: #fff;
+	z-index: 9;
 }
-
-.search-bar input {
-	flex: 1;
-	padding: 8px;
-	border: 1px solid #ccc;
-	border-radius: 4px;
-	margin-right: 10px;
-}
-
-.search-bar button {
-	padding: 8px 16px;
-	background-color: #007bff;
-	color: #fff;
-	border: none;
-	border-radius: 4px;
-	cursor: pointer;
-}
-
+/* 导航栏 */
 .nav-tabs {
 	position: relative;
 	width: 100%;
-	background-color: #fff;
-	border-bottom: 1px solid #ddd;
+	padding: 0 16rpx 20rpx 16rpx;
+	.tabs-scroll-content {
+		display: flex;
+		align-items: center;
+		gap: 48rpx;
+	}
+	.tab-item {
+		position: relative;
+		white-space: nowrap;
+		padding-bottom: 8rpx;
+		font-weight: 500;
+		font-size: 28rpx;
+		color: #666666;
+		line-height: 40rpx;
+	}
+
+	.tab-item.active {
+		color: #333333;
+	}
+	
+	.tab-item::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 0;
+		height: 4px;
+		background-color: #333;
+		transition: width 0.6s ease;
+	}
+
+	.tab-item.active::after {
+		width: 100%;
+	}
+
+	.tab-item.active {
+		color: #333;
+	}
 }
 
+/* #ifdef MP-WEIXIN | APP-PLUS */
 .tabs-scroll {
-	white-space: nowrap;
+	::v-deep ::-webkit-scrollbar
+	{
+		width: 0rpx!important;
+		height: 0rpx!important;
+		background-color: transparent;
+	}
 }
-
-.tab-item {
-	display: inline-block;
-	padding: 10px 20px;
-	font-size: 16px;
-	cursor: pointer;
-}
-
-.tab-item.active {
-	color: #007bff;
-	border-bottom: 2px solid #007bff;
-}
-
+/* #endif */
+/* 推荐视频列表 */
 .recommend-videos {
-	padding: 10px;
-}
+	padding: 0 16rpx 20rpx 16rpx;
+	.video-grid {
+		column-count: 2;
+		column-gap: 10px;
+	}
 
-.video-grid {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 10px;
-}
+	.video-card {
+		background-color: #fff;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+		border-radius: 4px;
+		overflow: hidden;
+		break-inside: avoid;
+		margin-bottom: 10px;
+		width: 100%;
+	}
 
-.video-card {
-	width: calc(50% - 5px); /* Adjust for gap */
-	background-color: #fff;
-	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-	border-radius: 4px;
-	overflow: hidden;
-}
+	.video-thumbnail {
+		width: 100%;
+		object-fit: contain;
+	}
 
-.video-thumbnail {
-	width: 100%;
-	height: 200px;
-	object-fit: cover;
-}
+	.video-info {
+		padding: 20rpx;
+		padding-top: 10rpx;
+		gap: 20rpx;
+	}
 
-.video-title {
-	padding: 10px;
-	font-size: 16px;
-	color: #333;
-}
+	.video-title {
+		font-weight: 500;
+		font-size: 28rpx;
+		color: #333333;
+		line-height: 40rpx;
+	}
 
-.video-date,
-.video-likes {
-	padding: 0 10px 10px;
-	font-size: 14px;
-	color: #666;
-}
-
-.load-more {
-	text-align: center;
-	padding: 10px;
-	color: #666;
-	cursor: pointer;
+	.video-date,
+	.video-likes {
+		font-weight: 400;
+		font-size: 24rpx;
+		color: #999999;
+		line-height: 34rpx;
+	}
 }
 </style>
\ No newline at end of file