修改首页显示处理
于肖磊
parent
0267ec66d4
commit
a5225a958e
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue