From 34ea207639539bdb29bde3df078a7efe0d0cf192 Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Tue, 13 Jan 2026 18:25:59 +0800
Subject: [PATCH] 1
---
src/App.vue | 242 +++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 225 insertions(+), 17 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index ab6cfa1..5a9b2a5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,12 +3,22 @@
<div :class="`header-box`" v-if="hasHeader && title !== $t('hj248')">
<mt-header :title="title">
<mt-button icon="back" slot="left" @click="$router.go(-1)"></mt-button>
- <div v-if="!is_Show">
- <template v-if="iconRight == 'search'">
- <img slot="right" class="search-right" src="./assets/ico/fangdajing.png" alt />
- </template>
- <template v-else>
- <mt-button icon="more" slot="right"></mt-button>
+ <div slot="right" class="header-right">
+ <!-- 消息图标 - 始终显示（如果已登录） -->
+ <div class="message-icon-wrapper" @click="goToMessage" v-if="isLoggedIn">
+ <!-- <svg class="message-icon" viewBox="0 0 24 24" fill="currentColor">
+ <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
+ </svg> -->
+ <span v-if="unreadCount > 0" class="message-badge">{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
+ </div>
+ <!-- 其他图标 -->
+ <template v-if="!is_Show">
+ <template v-if="iconRight == 'search'">
+ <img class="search-right" src="./assets/ico/fangdajing.png" alt />
+ </template>
+ <template v-else-if="iconRight != 'message'">
+ <mt-button icon="more"></mt-button>
+ </template>
</template>
</div>
</mt-header>
@@ -28,6 +38,7 @@
import elalert from "@/components/elalert.vue";
import foot from "@/components/foot.vue";
import loginPopup from "@/components/loginDialog.vue";
+import * as api from "@/axios/api";
//引入css
import "@/assets/iconfont/iconfont.css";
import "@/assets/iconfont/iconfont.ttf";
@@ -61,6 +72,49 @@
}
// this.$store.state.className = window.localStorage.getItem('styleName')?window.localStorage.getItem('styleName'):'red'
},
+ data() {
+ return {
+ title: this.$t('hj224'),
+ hasHeader: false,
+ iconRight: "default",
+ transitionName: '',
+ is_Show: true,
+ is_foot: true,
+ unreadCount: 0,
+ messageTimer: null,
+ loginCheckTimer: null,
+ lastToken: null,
+ };
+ },
+ computed: {
+ isLoggedIn() {
+ // 实时检查登录状态
+ return !!window.localStorage.getItem("USERTOKEN");
+ }
+ },
+ mounted() {
+ // 初始化时检查登录状态并获取消息数
+ this.checkLoginAndLoadMessages();
+
+ // 监听localStorage变化（用于跨标签页同步）
+ window.addEventListener('storage', this.handleStorageChange);
+
+ // 定期检查登录状态（处理同标签页内的登录/登出）
+ this.loginCheckTimer = setInterval(() => {
+ this.checkLoginAndLoadMessages();
+ }, 1000);
+ },
+ beforeDestroy() {
+ // 清除定时器
+ if (this.messageTimer) {
+ clearInterval(this.messageTimer);
+ }
+ if (this.loginCheckTimer) {
+ clearInterval(this.loginCheckTimer);
+ }
+ // 移除事件监听
+ window.removeEventListener('storage', this.handleStorageChange);
+ },
watch: {
$route(to, from) {
let title = to.meta.title || this.$t('hj224');
@@ -84,17 +138,10 @@
console.log("slide-right");
this.transitionName = "slide-right";
}
+
+ // 路由变化时，如果已登录则刷新未读消息数
+ this.checkLoginAndLoadMessages();
}
- },
- data() {
- return {
- title: this.$t('hj224'),
- hasHeader: false,
- iconRight: "default",
- transitionName: '',
- is_Show: true,
- is_foot: true,
- };
},
methods: {
footColse() {
@@ -102,12 +149,91 @@
},
dialogClose() {
this.$store.commit('dialogVisible', false);
+ },
+ // 跳转到消息页面
+ goToMessage() {
+ this.$router.push('/notify');
+ },
+ // 获取未读消息数
+ async getUnreadCount() {
+ try {
+ console.log('开始获取未读消息数...');
+ const data = await api.getUnreadCount();
+ console.log('未读消息数API响应:', data);
+ if (data && data.status === 0) {
+ this.unreadCount = data.data || 0;
+ console.log('未读消息数:', this.unreadCount);
+ } else {
+ console.warn('获取未读消息数失败:', data ? data.msg : '响应为空');
+ this.unreadCount = 0;
+ }
+ } catch (error) {
+ console.error('获取未读消息数异常:', error);
+ this.unreadCount = 0;
+ }
+ },
+ // 开始轮询未读消息数（每30秒）
+ startMessagePolling() {
+ // 如果已有定时器，先清除
+ if (this.messageTimer) {
+ clearInterval(this.messageTimer);
+ }
+ this.messageTimer = setInterval(() => {
+ if (this.isLoggedIn) {
+ this.getUnreadCount();
+ }
+ }, 30000);
+ },
+ // 检查登录状态并加载消息
+ checkLoginAndLoadMessages() {
+ const token = window.localStorage.getItem("USERTOKEN");
+ const isLoggedIn = !!token;
+
+ // 如果登录状态发生变化
+ if (this.lastToken !== token) {
+ this.lastToken = token;
+
+ if (isLoggedIn) {
+ console.log('检测到登录，开始加载消息');
+ this.getUnreadCount();
+ this.startMessagePolling();
+ } else {
+ console.log('检测到登出，清除消息');
+ this.unreadCount = 0;
+ if (this.messageTimer) {
+ clearInterval(this.messageTimer);
+ this.messageTimer = null;
+ }
+ }
+ } else if (isLoggedIn && !this.messageTimer) {
+ // 如果已登录但没有启动轮询，启动它
+ this.getUnreadCount();
+ this.startMessagePolling();
+ }
+ },
+ // 处理localStorage变化事件
+ handleStorageChange(e) {
+ if (e.key === 'USERTOKEN') {
+ this.checkLoginAndLoadMessages();
+ }
}
}
};
</script>
<style lang="less" scoped>
+// 全局隐藏滚动条
+/deep/ html,
+/deep/ body {
+ scrollbar-width: none; /* Firefox */
+ -ms-overflow-style: none; /* IE and Edge */
+ &::-webkit-scrollbar {
+ display: none; /* Chrome, Safari, Opera */
+ width: 0;
+ height: 0;
+ }
+}
+
/deep/ .van-list__finished-text {
line-height: 1.925926rem !important;
}
@@ -154,6 +280,14 @@
// height: calc(100% - 1rem);
box-sizing: border-box;
overflow-y: auto;
+ // 隐藏滚动条
+ scrollbar-width: none; /* Firefox */
+ -ms-overflow-style: none; /* IE and Edge */
+ &::-webkit-scrollbar {
+ display: none; /* Chrome, Safari, Opera */
+ width: 0;
+ height: 0;
+ }
}
&.red-theme {
@@ -257,7 +391,6 @@
color: #000;
}
- /deep/.mint-tab-container {}
/deep/.mint-tab-item {
background: #272733;
@@ -311,4 +444,79 @@
/deep/.icon-icon_A::before {
font-size: 0.6rem !important;
}
+
+.header-right {
+ display: flex;
+ align-items: center;
+ gap: 0.2rem;
+}
+
+.message-icon-wrapper {
+ position: relative;
+ display: inline-block;
+ margin-right: 0.2rem;
+ cursor: pointer;
+}
+
+.message-icon {
+ width: 0.48rem;
+ height: 0.48rem;
+ color: rgba(255, 255, 255, 0.8);
+ cursor: pointer;
+}
+
+.message-badge {
+ position: absolute;
+ top: -0.1rem;
+ right: -0.1rem;
+ min-width: 0.32rem;
+ height: 0.32rem;
+ line-height: 0.32rem;
+ padding: 0 0.08rem;
+ background-color: #ff4444;
+ color: #fff;
+ border-radius: 0.16rem;
+ font-size: 0.2rem;
+ text-align: center;
+ font-weight: bold;
+ border: 0.02rem solid #fff;
+}
+
+#app.red-theme {
+ .message-icon {
+ color: #212121;
+ }
+
+ .message-badge {
+ border-color: #fff;
+ }
+}
+</style>
+
+<style lang="less">
+/* 全局隐藏滚动条 - 确保整个项目都不显示滚动条 */
+html,
+body {
+ scrollbar-width: none; /* Firefox */
+ -ms-overflow-style: none; /* IE and Edge */
+}
+
+html::-webkit-scrollbar,
+body::-webkit-scrollbar {
+ display: none; /* Chrome, Safari, Opera */
+ width: 0;
+ height: 0;
+}
+
+/* 隐藏所有元素的滚动条 */
+* {
+ scrollbar-width: none; /* Firefox */
+ -ms-overflow-style: none; /* IE and Edge */
+}
+
+*::-webkit-scrollbar {
+ display: none; /* Chrome, Safari, Opera */
+ width: 0;
+ height: 0;
+}
</style>
--
Gitblit v1.9.3