调整微信小程序菜单

feasure
lld 2026-02-11 12:01:02 +08:00
parent 114f47d126
commit 4a1a5ef2fc
20 changed files with 367 additions and 15 deletions

View File

@ -60,7 +60,7 @@ export default {
console.log('小程序切前台/首次显示') console.log('小程序切前台/首次显示')
const token = getToken() || this.globalData.mqtt.token const token = getToken() || this.globalData.mqtt.token
if (token) { if (token) {
this.$tab.reLaunch('/pages/control/index') this.$tab.reLaunch('/pages/index')
// globalData // globalData
if (this.globalData.mqtt.subscribeList.length === 0) { if (this.globalData.mqtt.subscribeList.length === 0) {
const savedSubscribeList = uni.getStorageSync('mqtt_subscribe_list') const savedSubscribeList = uni.getStorageSync('mqtt_subscribe_list')

View File

@ -12,8 +12,17 @@
}, { }, {
"path": "pages/index", "path": "pages/index",
"style": { "style": {
"navigationBarTitleText": "智能农业移动端框架", "navigationBarTitleText": "首页"
"navigationStyle": "custom" }
},{
"path": "pages/data/index",
"style": {
"navigationBarTitleText": "数据中心"
}
}, {
"path": "pages/news/index",
"style": {
"navigationBarTitleText": "消息中心"
} }
}, { }, {
"path": "pages/work/index", "path": "pages/work/index",
@ -88,21 +97,27 @@
}], }],
"tabBar": { "tabBar": {
"color": "#000000", "color": "#000000",
"selectedColor": "#000000", "selectedColor": "#406ee9",
"borderStyle": "white", "borderStyle": "white",
"backgroundColor": "#ffffff", "backgroundColor": "#ffffff",
"list": [ "list": [
{ {
"pagePath": "pages/control/index", "pagePath": "pages/index",
"iconPath": "static/images/tabbar/work.png", "iconPath": "static/images/tabbar/home.png",
"selectedIconPath": "static/images/tabbar/work_.png", "selectedIconPath": "static/images/tabbar/home_.png",
"text": "控制中心" "text": "首页"
}, },
{ {
"pagePath": "pages/work/index", "pagePath": "pages/data/index",
"iconPath": "static/images/tabbar/work.png", "iconPath": "static/images/tabbar/data.png",
"selectedIconPath": "static/images/tabbar/work_.png", "selectedIconPath": "static/images/tabbar/data_.png",
"text": "工作台" "text": "历史数据"
},
{
"pagePath": "pages/news/index",
"iconPath": "static/images/tabbar/news.png",
"selectedIconPath": "static/images/tabbar/news_.png",
"text": "消息中心"
}, },
{ {
"pagePath": "pages/mine/index", "pagePath": "pages/mine/index",

38
pages/data/index.vue Normal file
View File

@ -0,0 +1,38 @@
<script setup>
</script>
<template>
<view class="content">
<image class="logo" src="@/static/logo200.png"></image>
<view class="text-area">
<text class="title">页面建设中~</text>
</view>
</view>
</template>
<style scoped>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>

View File

@ -113,7 +113,7 @@
onLoad() { onLoad() {
//#ifdef H5 //#ifdef H5
if (getToken()) { if (getToken()) {
this.$tab.reLaunch('/pages/control/index') this.$tab.reLaunch('/pages/index')
} }
//#endif //#endif
// ========== ========== // ========== ==========
@ -282,7 +282,7 @@
app.loginSuccess(token) app.loginSuccess(token)
// ========== ========== // ========== ==========
this.$tab.reLaunch('/pages/control/index') this.$tab.reLaunch('/pages/index')
}) })
} }
} }

View File

@ -56,7 +56,7 @@
// 2. App.vuelogoutMQTT+ // 2. App.vuelogoutMQTT+
app.logout() app.logout()
}).finally(()=>{ }).finally(()=>{
this.$tab.reLaunch('/pages/control/index') this.$tab.reLaunch('/pages/index')
}) })
}) })
} }

299
pages/news/index.vue Normal file
View File

@ -0,0 +1,299 @@
<template>
<view >
<!-- <view class="nav-list">
<view class="nav-item" v-for="(item, index) in navItems" :key="index" @tap="switchTab(index)">
<image :src="item.icon" mode="aspectFit" class="nav-icon"></image>
<text :class="['nav-text', { 'active': currentTab === index }]">{{ item.title }}</text>
<view v-if="item.count > 0" class="nav-badge">{{ item.count }}</view>
</view>
</view>-->
<scroll-view scroll-y class="message-list" @scrolltolower="loadMore">
<view v-for="(msg, index) in filteredMessages" :key="index" class="message-item" @tap="onMessageTap(msg)">
<image :src="msg.avatar" class="avatar" mode="aspectFill"></image>
<view class="message-content">
<view class="message-header">
<text class="sender">{{ msg.sender }}</text>
<text class="time">{{ msg.time }}</text>
</view>
<text class="preview" :class="{ 'unread': msg.unread }">{{ msg.preview }}</text>
</view>
<view v-if="msg.unread" class="unread-badge">
<text>{{ msg.unreadCount }}</text>
</view>
</view>
<view v-if="isLoading" class="loading">
<uni-icons type="spinner-cycle" size="24" color="#007AFF"></uni-icons>
<text>加载中...</text>
</view>
</scroll-view>
<view v-if="filteredMessages.length === 0" class="empty-state">
<uni-icons type="inbox" size="64" color="#999"></uni-icons>
<text>暂无消息</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
currentTab: 0,
navItems: [{
title: '评论',
icon: 'https://www.zenkuai.com/attachment/demo/1.png',
count: 5
},
{
title: '粉丝',
icon: 'https://www.zenkuai.com/attachment/demo/2.png',
count: 2
},
{
title: '点赞',
icon: 'https://www.zenkuai.com/attachment/demo/2.png',
count: 10
}
],
searchText: '',
messages: [
{
id: 1,
sender: '系统通知',
avatar: '/static/news.png',
preview: '您有一条新的系统通知,请查看',
time: '10:30',
unread: true,
unreadCount: 1
},
{
id: 2,
sender: '告警中心',
avatar: '/static/alarm.png',
preview: '您有一条新告警->',
time: '昨天',
unread: false,
unreadCount: 0
},
{
id: 3,
sender: '客服小美',
avatar: '/static/cs.png',
preview: '您好,请问有什么可以帮到您的吗?',
time: '昨天',
unread: false,
unreadCount: 0
},
//
],
isLoading: false
}
},
computed: {
filteredMessages() {
return this.messages.filter(msg =>
msg.sender.toLowerCase().includes(this.searchText.toLowerCase()) ||
msg.preview.toLowerCase().includes(this.searchText.toLowerCase())
)
}
},
methods: {
switchTab(index) {
this.currentTab = index;
//
console.log('Switched to tab:', this.navItems[index].title);
},
onMessageTap(msg) {
console.log('Message tapped:', msg)
uni.navigateTo({
url: `/pages/message-detail/message-detail?id=${msg.id}`
})
},
loadMore() {
if (this.isLoading) return
this.isLoading = true
//
setTimeout(() => {
//
this.messages.push(...[{
id: this.messages.length + 1,
sender: '新消息',
avatar: 'https://www.zenkuai.com/attachment/demo/1.png',
preview: '这是一条新加载的消息',
time: '刚刚',
unread: true,
unreadCount: 1
}])
this.isLoading = false
}, 1000)
}
}
}
</script>
<style scoped>
.msg-center {
display: flex;
flex-direction: column;
height: 100vh;
background-color: #f5f5f5;
}
.header {
background-color: #ffffff;
padding: 40rpx 20rpx 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}
.title {
font-size: 36rpx;
font-weight: bold;
margin-bottom: 20rpx;
}
.nav-list {
display: flex;
justify-content: space-around;
margin: 20rpx;
background-color: #fff;
padding: 20rpx;
border-radius: 20rpx;
}
.nav-item {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.nav-icon {
width: 60rpx;
height: 60rpx;
margin-bottom: 10rpx;
}
.nav-text {
font-size: 24rpx;
color: #666;
}
.nav-text.active {
color: #007AFF;
font-weight: bold;
}
.nav-badge {
position: absolute;
top: -10rpx;
right: -10rpx;
background-color: #FF3B30;
color: #ffffff;
border-radius: 20rpx;
padding: 2rpx 10rpx;
font-size: 20rpx;
}
.message-list {
flex: 1;
margin: 30rpx 20rpx;
}
.message-item {
display: flex;
align-items: center;
padding: 20rpx;
background-color: #ffffff;
border-radius: 10rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
width: 94%;
height: 150rpx;
}
.message-item:active {
transform: scale(0.98);
}
.avatar {
width: 90rpx;
height: 90rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.message-content {
flex: 1;
margin-right: 20rpx;
}
.message-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10rpx;
}
.sender {
font-size: 30rpx;
font-weight: bold;
color: #333;
}
.time {
font-size: 24rpx;
color: #999;
}
.preview {
font-size: 26rpx;
color: #666;
}
.preview.unread {
font-weight: bold;
color: #333;
}
.unread-badge {
background-color: #007AFF;
color: #ffffff;
border-radius: 20rpx;
padding: 4rpx 12rpx;
font-size: 24rpx;
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: #999;
}
.empty-state text {
margin-top: 20rpx;
font-size: 28rpx;
}
.loading {
display: flex;
align-items: center;
justify-content: center;
padding: 20rpx;
}
.loading text {
margin-left: 10rpx;
font-size: 28rpx;
color: #007AFF;
}
</style>

BIN
static/alarm.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
static/cs.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
static/news.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
static/消息中心 (2).png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
static/消息中心 (3).png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
static/消息中心 (4).png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB