sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改搜索详情页显示逻辑

master
于肖磊 2025-09-16 14:54:46 +08:00
parent a5225a958e
commit b372cc3423
4 changed files with 303 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
pages.json
View File

@ -2018,6 +2018,13 @@
"navigationBarTitleText": ""
}
},
{
"path": "search/search-record",
"style": {
"enablePullDownRefresh": true,
"navigationBarTitleText": ""
}
},
{
"path": "search/search",
"style": {

8
pages/plugins/video/components/search.vue
View File

@ -20,6 +20,14 @@ export default {
search_query: ''
}
},
watch: {
propsSearchQuery: {
handler(newVal, oldVal) {
this.search_query = newVal;
},
immediate: true
}
},
created() {
this.init();
},

14
pages/plugins/video/index/index.vue
View File

@ -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();

280
pages/plugins/video/search/search.vue
View File

@ -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>