From b372cc3423d11a48fd907d2a271d88aadb70471a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Tue, 16 Sep 2025 14:54:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=90=9C=E7=B4=A2=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                |   7 +
 pages/plugins/video/components/search.vue |   8 +
 pages/plugins/video/index/index.vue       |  14 +-
 pages/plugins/video/search/search.vue     | 280 ++++++++++++++++++++++
 4 files changed, 303 insertions(+), 6 deletions(-)

diff --git a/pages.json b/pages.json
index 06464a98..ece7a834 100644
--- a/pages.json
+++ b/pages.json
@@ -2018,6 +2018,13 @@
                         "navigationBarTitleText": ""
                     }
                 },
+                {
+                    "path": "search/search-record",
+                    "style": {
+                        "enablePullDownRefresh": true,
+                        "navigationBarTitleText": ""
+                    }
+                },
                 {
                     "path": "search/search",
                     "style": {
diff --git a/pages/plugins/video/components/search.vue b/pages/plugins/video/components/search.vue
index a606fe8b..9aff5ade 100644
--- a/pages/plugins/video/components/search.vue
+++ b/pages/plugins/video/components/search.vue
@@ -20,6 +20,14 @@ export default {
             search_query: ''
         }
     },
+    watch: {
+        propsSearchQuery: {
+            handler(newVal, oldVal) {
+                this.search_query = newVal;
+            },
+            immediate: true
+        }
+    },
     created() {
         this.init();
     },
diff --git a/pages/plugins/video/index/index.vue b/pages/plugins/video/index/index.vue
index 30d5e016..a22dbbed 100644
--- a/pages/plugins/video/index/index.vue
+++ b/pages/plugins/video/index/index.vue
@@ -42,7 +42,6 @@
 <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
@@ -119,8 +118,13 @@ export default {
 				// #endif
 			// #endif
 		},
-		handle_search(event) {
-			this.search_query = event.target.value;
+		handle_search(e) {
+			this.search_query = e;
+			if (this.search_query.trim() == '') {
+				app.globalData.url_open(`/pages/plugins/video/search/search-record`, false);
+			} else {
+				app.globalData.url_open(`/pages/plugins/video/search/search?search_query=${this.search_query}`, false);
+			}
 		},
 		switch_tab(e) {
 			const index = e.currentTarget.dataset.index;
@@ -135,9 +139,7 @@ export default {
 		},
 		navigate_to_detail(e) {
 			const item = e.currentTarget.dataset.value;
-			uni.navigateTo({
-				url: `/pages/plugins/video/detail/detail?videoId=${item.detailId}`
-			});
+			app.globalData.url_open(`/pages/plugins/video/detail/detail?videoId=${item.detailId}`, false);
 		},
 		on_scroll_lower_event() {
 			this.loadMore();
diff --git a/pages/plugins/video/search/search.vue b/pages/plugins/video/search/search.vue
index e69de29b..a22dbbed 100644
--- a/pages/plugins/video/search/search.vue
+++ b/pages/plugins/video/search/search.vue
@@ -0,0 +1,280 @@
+<template>
+	<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>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+import SearchComponent from '@/pages/plugins/video/components/search.vue';
+const app = getApp();
+// 状态栏高度
+var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
+// #ifdef MP-TOUTIAO
+bar_height = 0;
+// #endif
+export default {
+	components: {
+		SearchComponent
+	},
+	data() {
+		return {
+			// 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,
+			recommend_videos: [
+				{
+					thumbnail_url: 'http://shopxo.com/static/upload/images/plugins_homemiddleadv/2019/04/22/1555929400479636.jpg',
+					title: '进销存软件究竟要怎么选？',
+					date: '2025-06-12',
+					likes: 2189,
+					detailId: '1'
+				},
+				{
+					thumbnail_url: 'http://shopxo.com/static/upload/images/plugins_expressforkdn/2019/03/11/1552286675575734.png',
+					title: '一分钟告诉你，进销存是什么，进销存对企业有什么用...',
+					date: '2025-06-12',
+					likes: 2189,
+					detailId: '2'
+				},
+				{
+					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'
+				},
+				{
+					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: {
+		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
+		},
+		handle_search(e) {
+			this.search_query = e;
+			if (this.search_query.trim() == '') {
+				app.globalData.url_open(`/pages/plugins/video/search/search-record`, false);
+			} else {
+				app.globalData.url_open(`/pages/plugins/video/search/search?search_query=${this.search_query}`, false);
+			}
+		},
+		switch_tab(e) {
+			const index = e.currentTarget.dataset.index;
+			this.currentTab = index;
+			// 根据当前标签加载对应的数据
+			this.load_recommend_videos();
+		},
+		load_recommend_videos() {
+			// 加载推荐视频数据的逻辑
+			// 根据当前标签加载对应的数据
+			console.log('加载推荐视频数据');
+		},
+		navigate_to_detail(e) {
+			const item = e.currentTarget.dataset.value;
+			app.globalData.url_open(`/pages/plugins/video/detail/detail?videoId=${item.detailId}`, false);
+		},
+		on_scroll_lower_event() {
+			this.loadMore();
+		},
+		on_scroll_upper_event() {
+			this.loadMore();
+		},
+		loadMore() {
+			// 加载更多数据的逻辑
+			setTimeout(() => {
+				// 假设这里加载了更多的视频数据
+				const data = this.recommend_videos;
+				const newVideos = [
+					{
+						thumbnail_url: 'http://shopxo.com/static/upload/images/plugins_homemiddleadv/2019/04/22/1555929400479636.jpg',
+						title: '新视频标题',
+						date: '2025-06-13',
+						likes: 1500,
+						detailId: '5'
+					}
+				];
+				data.push(...newVideos);
+				this.setData({
+					recommend_videos: data
+				});
+			}, 200);
+		}
+	}
+};
+</script>
+
+<style>
+.header-top {
+	position: sticky;
+	top: 0;
+	background: #fff;
+	z-index: 9;
+}
+/* 导航栏 */
+.nav-tabs {
+	position: relative;
+	width: 100%;
+	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 {
+	::v-deep ::-webkit-scrollbar
+	{
+		width: 0rpx!important;
+		height: 0rpx!important;
+		background-color: transparent;
+	}
+}
+/* #endif */
+/* 推荐视频列表 */
+.recommend-videos {
+	padding: 0 16rpx 20rpx 16rpx;
+	.video-grid {
+		column-count: 2;
+		column-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-thumbnail {
+		width: 100%;
+		object-fit: contain;
+	}
+
+	.video-info {
+		padding: 20rpx;
+		padding-top: 10rpx;
+		gap: 20rpx;
+	}
+
+	.video-title {
+		font-weight: 500;
+		font-size: 28rpx;
+		color: #333333;
+		line-height: 40rpx;
+	}
+
+	.video-date,
+	.video-likes {
+		font-weight: 400;
+		font-size: 24rpx;
+		color: #999999;
+		line-height: 34rpx;
+	}
+}
+</style>
\ No newline at end of file