From c8361f1a9080a9e52d0ac772bd59697ad318cfe9 Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Mon, 05 Jan 2026 10:44:24 +0800
Subject: [PATCH] 1
---
src/page/home/newHome.vue | 146 +++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 135 insertions(+), 11 deletions(-)
diff --git a/src/page/home/newHome.vue b/src/page/home/newHome.vue
index 14ea366..0ee1ee3 100644
--- a/src/page/home/newHome.vue
+++ b/src/page/home/newHome.vue
@@ -14,12 +14,22 @@
/>
</div>
<div class="home-search-ctl">
- <img
- class="lingdang"
- src="../../assets/ico/lingdang.png"
- alt=""
- @click="$router.push('/notify')"
- />
+ <!-- 站内信图标 -->
+ <div class="message-icon-wrapper" @click="$router.push('/notify')" 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>
+ <!-- 小铃铛图标，带红点提示 -->
+ <div class="lingdang-wrapper" @click="$router.push('/notify')" v-if="isLoggedIn">
+ <img
+ class="lingdang"
+ src="../../assets/ico/lingdang.png"
+ alt=""
+ />
+ <span v-if="unreadCount > 0" class="lingdang-badge"></span>
+ </div>
<img
class="pifu"
src="../../assets/ico/pifu.png"
@@ -330,8 +340,15 @@
newsContent4: [], // 7*24全球
newsContent5: [], // 商品资讯,
b_bg: require("../../../static/img/bg-zhisu.png"),
- r_bg: require("../../../static/img/bg-zhisu-red.png")
+ r_bg: require("../../../static/img/bg-zhisu-red.png"),
+ unreadCount: 0,
+ messageTimer: null
};
+ },
+ computed: {
+ isLoggedIn() {
+ return !!window.localStorage.getItem("USERTOKEN");
+ }
},
created() {
this.getProductSetting();
@@ -341,8 +358,10 @@
beforeDestroy() {
clearInterval(this.timer);
clearInterval(this.timer2);
+ if (this.messageTimer) {
+ clearInterval(this.messageTimer);
+ }
},
- computed: {},
// 更新的时候运动
updated() {
if (!this.moveStats) {
@@ -503,6 +522,31 @@
id: this.artList.id
}
});
+ },
+ // 获取未读消息数
+ async getUnreadCount() {
+ try {
+ const data = await api.getUnreadCount();
+ if (data && data.status === 0) {
+ this.unreadCount = data.data || 0;
+ } else {
+ 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);
}
},
mounted() {
@@ -514,6 +558,11 @@
this.getMarket(); // 获取大盘指数
this.getBanner(); //获取banner
this.getArtList(); // 获取公告
+ // 如果已登录，获取未读消息数
+ if (this.isLoggedIn) {
+ this.getUnreadCount();
+ this.startMessagePolling();
+ }
// let header = document.querySelector('.header-box')
let body = document.querySelector(".wrapper");
// header.style.display = 'none'
@@ -922,15 +971,73 @@
align-items: center;
justify-content: flex-end;
- .lingdang {
- width: 0.25rem;
- height: 0.32rem;
+ // 小铃铛图标容器
+ .lingdang-wrapper {
+ position: relative;
+ margin-right: 0.18rem;
+ cursor: pointer;
+ display: inline-block;
+
+ .lingdang {
+ width: 0.25rem;
+ height: 0.32rem;
+ display: block;
+ }
+
+ // 小铃铛红点提示
+ .lingdang-badge {
+ position: absolute;
+ top: -0.05rem;
+ right: -0.05rem;
+ width: 0.16rem;
+ height: 0.16rem;
+ background-color: #ff4d4f;
+ border-radius: 50%;
+ border: 0.02rem solid #fff;
+ display: block;
+ animation: pulse 2s infinite;
+ }
}
.pifu {
width: 0.34rem;
height: 0.28rem;
margin-left: 0.18rem;
+ }
+
+ // 站内信图标样式
+ .message-icon-wrapper {
+ position: relative;
+ width: 0.5rem;
+ height: 0.5rem;
+ margin-right: 0.18rem;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .message-icon {
+ width: 100%;
+ height: 100%;
+ color: #fff;
+ }
+
+ .message-badge {
+ position: absolute;
+ top: -0.1rem;
+ right: -0.1rem;
+ min-width: 0.3rem;
+ height: 0.3rem;
+ line-height: 0.3rem;
+ padding: 0 0.08rem;
+ background-color: #ff4d4f;
+ color: #fff;
+ border-radius: 0.15rem;
+ font-size: 0.2rem;
+ text-align: center;
+ font-weight: bold;
+ border: 0.02rem solid #fff;
+ }
}
}
}
@@ -1135,6 +1242,23 @@
background-color: #565656;
opacity: 0.3;
}
+}
+
+// 红点脉冲动画
+@keyframes pulse {
+ 0% {
+ transform: scale(1);
+ opacity: 1;
+ }
+ 50% {
+ transform: scale(1.1);
+ opacity: 0.8;
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
.account-box .content {
position: relative;
--
Gitblit v1.9.3