<template>
<view class="pages">
<!-- #ifndef H5 -->
<statusBar></statusBar>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<uni-nav-bar :statusBar="true" :border="false"></uni-nav-bar>
<!-- #endif -->
<!-- 顶部导航 -->
<view class="nav">
<scroll-view class="nav-scroll" scroll-x="true" :show-scrollbar="false"
style="width: 100%; height: 90rpx; white-space: nowrap;">
<view class="tab-item" v-for="(item, index) in navItems" :key="index"
:style="{ minWidth: navItemWidth + 'rpx' }" :class="{ active: currentNav === index }"
@tap="switchNav(index)">
{{ item.name }}
</view>
</scroll-view>
</view>
<template v-if="!isHotCategory">
<!-- 搜索框-->
<view class="uni-search-box">
<!-- #ifdef MP-WEIXIN -->
<uni-search-bar style="width: 100%" v-model="keyword" ref="searchBar" radius="100" cancelButton="none"
disabled :placeholder="inputPlaceholder" />
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<uni-search-bar v-model="keyword" ref="searchBar" radius="100" cancelButton="none" disabled
:placeholder="inputPlaceholder" />
<!-- #endif -->
<view class="cover-search-bar" @click="searchClick"></view>
</view>
</template>
<uni-grid class="grid" :column="4" :showBorder="false" :square="true" v-if="currentNav === 3">
<uni-grid-item class="item" v-for="(item,index) in gridList" @click.native="tapGrid(index)" :key="index">
<image class="grid-image" :src="item.image" mode="aspectFit"></image>
<text class="text">{{item.text}}</text>
</uni-grid-item>
</uni-grid>
<!-- banner区域 -->
<template v-if="currentNav === 0">
<unicloud-db ref="bannerdb" v-slot:default="{data, loading, error, options}" collection="opendb-banner"
field="_id,bannerfile,open_url,title" @load="onqueryload">
<image v-if="!(loading || data.length)" class="banner-image" src="/static/uni-center/headers.png"
mode="aspectFill" :draggable="false" />
<view v-else>
<swiper class="swiper-box" :style="{ height: '300rpx' }"
:autoplay="true"
:interval="3000"
:circular="true">
<swiper-item v-for="(item, index) in data" :key="item._id">
<image class="banner-image" :src="item.bannerfile.url" mode="scaleToFill"
style="width: 100%; height: 100%;" />
</swiper-item>
</swiper>
<!-- 自定义指示点 -->
<view class="custom-indicator">
<view v-for="(item, index) in data" :key="index" class="indicator-dot"
:class="{ active: current === index }" @click="switchBanner(index)"></view>
</view>
</view>
</unicloud-db>
</template>
<!-- 萌宠明星区域 -->
<template v-if="currentNav === 0">
<view class="star-section">
<view class="section-header">
<uni-icons type="vip" size="24" color="#ffcc00" style="margin-top: 2rpx;">
<text class="title">萌宠明星</text>
</uni-icons>
<text class="more" @click="navigateToMore">全部 ></text>
</view>
<view class="star-wrapper">
<view class="star-item" v-for="(star, index) in starList.slice(0,3)" :key="index">
<view class="avatar-wrap">
<image :src="star.avatar" mode="aspectFill" class="star-avatar" />
<view :class="['star-tag', getTagClass(index)]">{{ getTagText(index) }}</view>
</view>
<text class="star-name">{{ star.pet_name }}</text>
<view class="popularity">
<uni-icons type="fire" size="14" color="#FF6B6B" />
<text>{{ star.popularity }}</text>
</view>
</view>
</view>
</view>
</template>
<!-- 文章列表 -->
<template v-if="!isHotCategory">
<unicloud-db ref="udb" v-slot:default="{ data, pagination, hasMore, loading, error, options }"
@error="onqueryerror" :collection="colList" :page-size="10">
<template v-if="currentNav === 0">
<view class="section-header">
<uni-icons type="wallet" size="24" color="#ffcc00" style="margin-left: 20rpx;">
<text class="title">萌宠日记</text>
</uni-icons>
<text class="more" @click="navigateToMore">全部 ></text>
</view>
</template>
<uni-list class="uni-list" :border="false" :style="{ height: listHight }">
<uni-list-item :to="'/pages/list/detail?id=' + item._id + '&title=' + item.title"
v-for="(item, index) in data" :key="index">
<template v-slot:header>
<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
</template>
<template v-slot:body>
<view class="main">
<text class="title">{{ item.title }}</text>
<view class="info">
<text class="author">{{ item.user_id[0] ? item.user_id[0].nickname : '' }}</text>
<uni-dateformat class="last_modify_date" :date="item.last_modify_date"
format="yyyy-MM-dd" :threshold="[60000, 2592000000]" />
</view>
</view>
</template>
</uni-list-item>
<uni-load-state :state="{ data, pagination, hasMore, loading, error }">
<template v-slot:loading>
<view class="loading-text">正在加载{{ navItems[currentNav]?.name }}的内容...</view>
</template>
</uni-load-state>
</uni-list>
</unicloud-db>
</template>
<!-- 视频列表 -->
<template v-else>
<!-- 添加视频搜索框 -->
<view class="uni-search-box video-search">
<uni-search-bar v-model="videoKeyword" radius="100" cancelButton="none" :placeholder="videoPlaceholder"
@confirm="handleVideoSearch" @clear="clearVideoSearch" />
</view>
<unicloud-db ref="videoUdb" v-slot:default="{data}" :collection="videoColList">
<uni-list class="uni-list">
<uni-list-item v-for="item in data" :key="item._id">
<template v-slot:header>
<view class="video-cover-wrapper" @click="navigateToDetail(item._id)">
<image class="video-cover" :src="item.cover_url" mode="aspectFill"
style="width: 240rpx; height: 160rpx; border-radius: 8rpx;" />
<view class="play-icon">
<uni-icons type="videocam" size="24" color="#fff"></uni-icons>
</view>
</view>
</template>
<template v-slot:body>
<view class="video-info">
<!-- 第一行：标题 + 播放次数 -->
<view class="flex-row justify-between align-center mb-8">
<text class="title line-clamp-1">{{ item.title }}</text>
<text class="play-count">{{ item.play_count }}次播放</text>
</view>
<!-- 第二行：作者 + 创建时间 -->
<view class="flex-row justify-between align-center">
<text class="author">{{ item.user_id[0]?.nickname || '未知用户' }}</text>
<text class="create-time">{{ formatDate(item.create_date) }}</text>
</view>
</view>
</template>
</uni-list-item>
</uni-list>
</unicloud-db>
</template>
</view>
</template>
<script>
let cdbRef;
import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar";
import Gps from '@/uni_modules/json-gps/js_sdk/gps.js';
const gps = new Gps();
const db = uniCloud.database();
export default {
components: {
statusBar
},
computed: {
inputPlaceholder() {
return uni.getStorageSync('CURRENT_LANG') == "en" ? 'Please enter the search content' : '请输入搜索内容';
},
colList() {
return [
db.collection('opendb-news-articles').where(this.where).field(
'avatar,title,last_modify_date,user_id,comments,collections,shares,category_id').getTemp(),
db.collection('uni-id-users').field('_id,nickname').getTemp()
];
},
// 视频查询列表
videoColList() {
const db = uniCloud.database()
let query = {}
if (this.videoKeyword) {
query.title = new RegExp(this.videoKeyword, 'i')
}
return [
db.collection('pet-videos')
.where(query)
.field('title,cover_url,play_count,create_date,user_id')
.getTemp(),
db.collection('uni-id-users')
.field('_id,nickname')
.getTemp()
]
},
videoPlaceholder() {
return uni.getStorageSync('CURRENT_LANG') == "en" ?
'Search videos...' :
'搜索视频...'
}
},
data() {
return {
navItemWidth: 160, // 导航项基准宽度
coverWidth: 340, // 封面基准宽度
navItems: [],
currentNav: 0,
currentCategoryId: '',
where: '',
videoKeyword: '',
starList: [],
current: 0, // 新增当前banner索引
hotCategoryId: '6828846d6e5d2d42e61ece39', // 替换为你的热门分类ID
isHotCategory: false,
gridList: [{
"text": "精选",
"image": "/static/pet-icons/羊.png" // Update with your actual image path
},
{
"text": "好物",
"image": "/static/pet-icons/边牧.png" // Update with your actual image path
},
{
"text": "话题",
"image": "/static/pet-icons/奶牛猫.png" // Update with your actual image path
},
{
"text": "问答",
"image": "/static/pet-icons/黑猫.png" // Update with your actual image path
}
],
};
},
watch: {
keyword(keyword, oldValue) {
let where = '"article_status" == 1 ';
if (keyword) {
this.where = where + `&& /${keyword}/.test(title)`;
} else {
this.where = where;
}
}
},
async onReady() {
// #ifdef APP-NVUE
this.listHight = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50 +
'px';
// #endif
// #ifndef APP-NVUE
this.listHight = 'auto';
// #endif
cdbRef = this.$refs.udb;
},
async onShow() {
this.keyword = getApp().globalData.searchText;
getApp().globalData.searchText = '';
this.fetchStarPets();
},
async onLoad() {
await this.fetchNavItems();
if (this.navItems.length > 0) {
this.currentCategoryId = this.navItems[0]._id;
this.updateArticleList(this.currentCategoryId);
}
},
methods: {
// 视频搜索处理方法
handleVideoSearch() {
this.$refs.videoUdb.loadData({
clear: true
})
},
clearVideoSearch() {
this.videoKeyword = ''
this.handleVideoSearch()
},
// 点击跳转方法
navigateToDetail(videoId) {
uni.navigateTo({
url: `/pages/list/video-detail?id=${videoId}`
})
},
// 切换banner
changeSwiper(e) {
this.current = e.detail.current;
},
// 点击指示点
switchBanner(index) {
this.current = index;
},
async fetchNavItems() {
try {
const res = await db.collection('opendb-news-categories').get();
this.navItems = res.result.data;
} catch (error) {
console.error('获取导航栏数据失败', error);
uni.showToast({
title: '分类加载失败',
icon: 'none'
});
}
},
updateArticleList(categoryId) {
this.where = `article_status == 1 && category_id == "${categoryId}"`;
this.$nextTick(() => {
this.$refs.udb.loadData({
clear: true
});
});
},
switchNav(index) {
this.currentNav = index;
const category = this.navItems[index];
this.currentCategoryId = category._id;
this.isHotCategory = category._id === this.hotCategoryId;
if (this.isHotCategory) {
this.$nextTick(() => {
this.$refs.videoUdb.loadData({
clear: true
});
});
} else {
this.updateArticleList(this.currentCategoryId);
}
},
async updatePlayCount(videoId) {
const db = uniCloud.database()
await db.collection('pet-videos')
.doc(videoId)
.update({
play_count: db.command.inc(1)
})
},
// 时间格式化
formatDate(timestamp) {
return new Date(timestamp).toISOString().split('T')[0]
},
async fetchStarPets() {
try {
const res = await db.collection('pets-star')
.field('avatar, pet_name, popularity')
.orderBy('popularity', 'desc')
.limit(3)
.get();
this.starList = res.result.data;
} catch (error) {
console.error('获取萌宠明星数据失败', error);
}
},
getTagClass(index) {
const tagClasses = ['tag-popular', 'tag-charm', 'tag-active'];
return tagClasses[index] || '';
},
getTagText(index) {
const tagTexts = ['人气之星', '魅力之星', '活跃之星'];
return tagTexts[index] || '';
},
navigateToMore() {
uni.navigateTo({
url: '/pages/list/pets-stardetail'
});
},
searchClick() {
uni.hideKeyboard();
uni.navigateTo({
url: '/pages/list/search/search',
animationType: 'fade-in'
});
},
loadMore() {
cdbRef.loadMore();
},
onPullDownRefresh() {
this.refresh();
},
onReachBottom() {
this.loadMore();
}
}
};
</script>
<style scoped>
/* #ifndef APP-NVUE */
view {
display: flex;
box-sizing: border-box;
flex-direction: column;
}
/* #endif */
/* #ifdef APP-PLUS */
page {
width: 100%;
min-height: 100%;
display: flex;
}
/* #endif */
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
/* 通用样式 */
.flex-row {
display: flex;
flex-direction: row;
align-items: center;
}
.justify-between {
justify-content: space-between;
}
/* 视频信息容器 */
.video-info {
padding: 0 20px;
/* 左右边距 */
flex: 1;
}
/* 标题行 */
.title-row {
margin-bottom: 8px;
}
.title {
flex: 1;
font-size: 16px;
color: #333;
margin-right: 16px;
max-width: 70%;
/* 防止播放次数换行 */
}
.play-count {
font-size: 12px;
color: #666;
white-space: nowrap;
}
/* 作者行 */
.author {
font-size: 12px;
color: #666;
}
.create-time {
margin-top: 50px;
font-size: 12px;
color: #999;
white-space: nowrap;
}
/* 文字截断 */
.line-clamp-1 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.meta {
display: flex;
justify-content: space-between;
align-items: center;
}
.title {
font-size: 14px;
font-weight: 500;
flex: 1;
}
.stat,
.date {
font-size: 12px;
color: #999;
}
.author {
font-size: 12px;
color: #333;
}
.play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
padding: 8rpx;
}
.pages {
background-color: #FFFFFF;
}
.avatar {
width: 200rpx;
height: 200rpx;
margin-right: 10rpx;
}
.main {
justify-content: space-between;
flex: 1;
}
.title {
font-size: 16px;
}
.info {
flex-direction: row;
justify-content: space-between;
}
.author,
.last_modify_date {
font-size: 14px;
color: #999999;
}
.cover-search-bar {
height: 50px;
position: relative;
top: -50px;
margin-bottom: -50px;
/* #ifndef APP-NVUE */
z-index: 999;
/* #endif */
}
.load-state {
justify-content: center;
width: 750rpx;
}
/* banner指示点样式 */
.banner-image {
width: 100%;
height: 100%;
}
.custom-indicator {
position: absolute;
bottom: 30rpx;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: row;
z-index: 999;
}
.indicator-dot {
width: 14rpx;
height: 14rpx;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
margin: 0 8rpx;
transition: all 0.3s;
}
.indicator-dot.active {
width: 14rpx;
background: orange;
border-radius: 8rpx;
}
/* 导航栏容器 */
.nav {
height: 90rpx;
background: #fff;
border-bottom: 1rpx solid #f5f5f5;
}
/* 滚动容器 */
.nav-scroll {
height: 100%;
height: 100%;
}
/* 每个导航项 */
.tab-item {
flex: 1;
min-width: 200rpx;
height: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
color: #666;
position: relative;
flex-shrink: 0;
padding: 0 30rpx;
}
/* 激活状态 */
.tab-item.active {
color: #FF9A3C;
font-weight: bold;
}
.tab-item.active::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60rpx;
height: 4rpx;
background: #FF9A3C;
border-radius: 2rpx;
}
/* 萌宠明星区域 */
.section-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
}
.title {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.more {
font-size: 28rpx;
color: #999;
flex-shrink: 0;
padding-left: 30rpx;
cursor: pointer;
}
.star-section {
width: 100%;
padding: 20rpx;
background-color: #fff;
margin: 20rpx 0;
border-radius: 16rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}
.star-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 20rpx;
}
.star-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 10rpx;
min-width: 0;
}
.avatar-wrap {
position: relative;
margin-bottom: 15rpx
}
.star-avatar {
width: 180rpx;
height: 180rpx;
border-radius: 50%;
border: 4rpx solid #fff;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12)
}
.star-tag {
position: absolute;
bottom: -10rpx;
left: 50%;
transform: translateX(-50%);
font-size: 24rpx;
padding: 8rpx 20rpx;
border-radius: 40rpx;
color: #fff;
white-space: nowrap
}
.star-name {
font-size: 28rpx;
font-weight: 500;
color: #333;
margin: 15rpx 0 10rpx;
}
.popularity {
display: flex;
align-items: center;
font-size: 24rpx;
color: #FF6B6B;
background: #FFF2F2;
padding: 6rpx 20rpx;
border-radius: 40rpx;
}
.tag-popular {
background: linear-gradient(135deg, #FF9A3C, #FF6F61);
}
.tag-charm {
background: linear-gradient(135deg, #4ECDC4, #45B7AF);
}
.tag-active {
background: linear-gradient(135deg, #FF6B6B, #FF4757);
}
.grid {
border-radius: 20rpx;
margin-top: -50rpx;
}
.grid-image {
width: 50rpx;
height: 50rpx;
}
.uni-grid .text {
font-size: 26rpx;
color: #333;
margin-top: 10rpx;
}
.uni-grid .item ::v-deep .uni-grid-item__box {
justify-content: center;
align-items: center;
padding: 0rpx 0;
}
/* 视频搜索框样式 */
.video-search {
padding: 0rpx 10rpx;
background-color: #fff;
border-bottom: 1px solid #f5f5f5;
}
/* #ifdef APP-NVUE */
/* 新增/修改的样式 */
.nav-scroll {
height: 100%;
/* 修复安卓滚动条问题 */
/* #ifdef APP-NVUE */
scrollbar-width: none;
/* #endif */
}
.swiper-box {
height: 300rpx !important; /* 保持固定高度 */
border-radius: 16rpx; /* 添加圆角 */
overflow: hidden; /* 防止内容溢出 */
margin: 0 20rpx; /* 增加左右边距 */
}
.star-item {
flex: 1;
min-width: 220rpx; /* 防止内容挤压 */
padding: 0 15rpx; /* 增加内边距 */
}
.star-avatar {
width: 180rpx !important; /* 固定尺寸 */
height: 180rpx !important; /* 固定尺寸 */
}
.video-cover {
width: 240rpx !important; /* 固定视频封面尺寸 */
height: 160rpx !important; /* 固定视频封面尺寸 */
flex-shrink: 0; /* 防止图片压缩 */
}
.title {
font-size: 30rpx; /* 统一标题字号 */
max-width: 450rpx; /* 增加标题最大宽度 */
/* #ifndef APP-NVUE */
white-space: nowrap; /* 防止文字换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 显示省略号 */
/* #endif */
}
/* 新增安卓专属样式 */
/* #ifdef H5 || MP-WEIXIN || APP-ANDROID */
.tab-item {
padding: 0 40rpx; /* 增加导航项内边距 */
font-size: 32rpx; /* 加大导航文字 */
}
.grid-image {
width: 64rpx !important; /* 加大网格图标 */
height: 64rpx !important; /* 加大网格图标 */
}
/* #endif */
/* #endif */
</style>
为什么在模拟器导航栏还是竖排，字体大，萌宠区域的图片文字看不见。修改
本文介绍了解决optimize-css-assets-webpack-plugin插件在webpack配置文件中遇到的问题，通过注释掉特定代码段来避免错误发生。
扫一扫
2996
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
