调整微信小程序菜单
2
App.vue
|
|
@ -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')
|
||||||
|
|
|
||||||
37
pages.json
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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')
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -56,7 +56,7 @@
|
||||||
// 2. 调用App.vue的logout方法(断开MQTT+清空订阅列表)
|
// 2. 调用App.vue的logout方法(断开MQTT+清空订阅列表)
|
||||||
app.logout()
|
app.logout()
|
||||||
}).finally(()=>{
|
}).finally(()=>{
|
||||||
this.$tab.reLaunch('/pages/control/index')
|
this.$tab.reLaunch('/pages/index')
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 3.2 KiB |