f/web-kboss/src/components/MessageCenter/MessageCenter.vue

@@ -271,7 +271,8 @@ export default {
   props: {
     userId: {
       type: [String, Number],
-      required: true
+      required: false,
+      default: null
     },
     visible: {
       type: Boolean,
@@ -375,6 +376,13 @@ export default {
     },
 
     getUnreadmsg() {
+      // 检查用户是否登录
+      const userId = sessionStorage.getItem('userId');
+      if (!userId) {
+        console.log('用户未登录，跳过获取未读消息');
+        return;
+      }
+
       getUnreadmsgAPI().then(res => {
         if (res.status) {
           this.count = res.count;
@@ -389,14 +397,24 @@ export default {
         }
       }).catch(error => {
         console.error('获取未读消息失败:', error);
+        // 401错误不显示错误消息，因为用户未登录是正常情况
+        if (error.response && error.response.status !== 401) {
           this.$message({
             message: "获取未读消息失败",
             type: "error",
           });
+        }
       });
     },
 
     getReadmsg() {
+      // 检查用户是否登录
+      const userId = sessionStorage.getItem('userId');
+      if (!userId) {
+        console.log('用户未登录，跳过获取已读消息');
+        return;
+      }
+
       getReadmsgAPI().then(res => {
         if (res.status) {
           this.readInformationList = res.msg;
@@ -435,7 +453,14 @@ export default {
     },
 
     getMsg() {
-      getMsgAPI({ userid: this.userId }).then(res => {
+      // 检查用户是否登录
+      const userId = sessionStorage.getItem('userId');
+      if (!userId) {
+        console.log('用户未登录，跳过获取消息');
+        return;
+      }
+
+      getMsgAPI({ userid: userId }).then(res => {
         if (res.status && res.msg) {
           this.alliInformationList = res.msg;
         } else {

f/web-kboss/src/layout/components/Navbar.vue

@@ -11,7 +11,7 @@
       id="breadcrumb-container" class="breadcrumb-container" />
 
     <div class="right-menu"
-      style="display:flex;justify-content: center!important;align-items: center!important;margin-right: 10px;">
+      style="display:flex;justify-content: flex-end!important;align-items: center!important;margin-right: 10px;">
       <template style="justify-content: center;align-items: center;transform: translate(0,-30px)!important;">
         <span v-if="isShowKbossCharge" @click="$router.push('/product/productHome')"
           class="right-menu-item hover-effect "
@@ -34,7 +34,7 @@
             style="font-size: 26px;display: flex;justify-content: center;align-items: center">
             <el-badge :value="messageCount == 0 ? '' : messageCount" :max="9" class="badge"
               style="height: 35px;display: flex;justify-content: center;align-items: center">
-              <i style="color: #262626;font-weight: bold;font-size: 16px" class="el-icon-message" @click="openMessageCenter" />
+              <i style="color: #262626;font-weight: bold;font-size: 16px" class="el-icon-message" @click="handleMessageClick" />
             </el-badge>
           </span>
         </el-tooltip>
@@ -67,7 +67,7 @@
               <svg @click="copyBtn" class="copy-btn" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
                 width="12" height="12" style="fill: #1019ab;">
                 <path
-                  d="M394.666667 106.666667h448a74.666667 74.666667 0 0 1 74.666666 74.666666v448a74.666667 74.666667 0 0 1-74.666666 74.666667H394.666667a74.666667 74.666667 0 0 1-74.666667-74.666666V181.333333a74.666667 74.666667 0 0 1 74.666667-74.666666z m0 64a10.666667 10.666667 0 0 0-10.666667 10.666666v448a10.666667 10.666667 0 0 0 10.666667 10.666667h448a10.666667 10.666667 0 0 0 10.666666-10.666667V181.333333a10.666667 10.666667 0 0 0-10.666666-10.666666H394.666667z m245.333333 597.333333a32 32 0 0 1 64 0v74.666667a74.666667 74.666667 0 0 1-74.666667 74.666666H181.333333a74.666667 74.666667 0 0 1-74.666666-74.666666V394.666667a74.666667 74.666667 0 0 1 74.666666-74.666667h74.666667a32 32 0 0 1 0 64h-74.666667a10.666667 10.666667 0 0 0-10.666666 10.666667v448a10.666667 10.666667 0 0 0 10.666666 10.666666h448a10.666667 10.666667 0 0 0 10.666667-10.666666v-74.666667z"
+                  d="M394.666667 106.666667h448a74.666667 74.666667 0 0 1 74.666666 74.666666v448a74.666667 74.666667 0 0 1-74.666666 74.666667H394.666667a74.666667 74.666667 0 0 1-74.666667-74.666667V181.333333a74.666667 74.666667 0 0 1 74.666667-74.666666z m0 64a10.666667 10.666667 0 0 0-10.666667 10.666666v448a10.666667 10.666667 0 0 0 10.666667 10.666667h448a10.666667 10.666667 0 0 0 10.666666-10.666667V181.333333a10.666667 10.666667 0 0 0-10.666666-10.666666H394.666667z m245.333333 597.333333a32 32 0 0 1 64 0v74.666667a74.666667 74.666667 0 0 1-74.666667 74.666666H181.333333a74.666667 74.666667 0 0 1-74.666666-74.666666V394.666667a74.666667 74.666667 0 0 1 74.666666-74.666667h74.666667a32 32 0 0 1 0 64h-74.666667a10.666667 10.666667 0 0 0-10.666666 10.666667v448a10.666667 10.666667 0 0 0 10.666666 10.666666h448a10.666667 10.666667 0 0 0 10.666667-10.666666v-74.666667z"
                   p-id="1521"></path>
               </svg>
             </span>
@@ -101,6 +101,7 @@
     <message-center
       ref="messageCenter"
       :userId="userId"
+      :visible.sync="messageCenterVisible"
       @unread-count-update="handleUnreadCountUpdate"
     />
 
@@ -275,6 +276,7 @@ import MessageCenter from '@/components/MessageCenter/MessageCenter.vue'
 export default {
   data() {
     return {
+      messageCenterVisible: false, // 控制消息中心显示
       drawerPro: false,
       searchLoading: false,
       searchResultList: [],
@@ -325,8 +327,8 @@ export default {
         "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
       passwordDialog: false,
       editUserInfoDialog: false,
-      nick_name: JSON.parse(localStorage.getItem('user_info')).username,
+      nick_name: JSON.parse(localStorage.getItem('user_info'))?.username || '用户',
-      userId: sessionStorage.getItem("userId"),
+      userId: sessionStorage.getItem("userId") || '',
       org_type: sessionStorage.getItem("org_type"),
       role: sessionStorage.getItem("jueseNew") == "admin" ? [] : sessionStorage.getItem("jueseNew"),
       dialogTableVisible: false,
@@ -384,9 +386,18 @@ export default {
     this.handleResize()
   },
   methods: {
-    // 打开消息中心
+    // 处理消息点击
-    openMessageCenter() {
+    handleMessageClick() {
+      const userId = sessionStorage.getItem('userId');
+      if (!userId) {
+        this.$message.warning('请先登录');
+        this.$router.push('/login');
+        return;
+      }
+      this.messageCenterVisible = true;
+      if (this.$refs.messageCenter) {
         this.$refs.messageCenter.open();
+      }
     },
 
     // 处理未读消息数量更新
@@ -567,6 +578,8 @@ export default {
       this.$router.push('/customer/customerInformation')
     },
     async getUserInfo() {
+      if (!this.userId) return;
+
       getUserInfoAPI({ id: this.userId }).then((res) => {
         if (res.status == true) {
           this.userInfoList = res.data;
@@ -636,6 +649,8 @@ export default {
       this.editUserInfoForm.mobile = this.userInfoList[0].mobile;
     },
     getPicture() {
+      if (!this.userId) return;
+
       let params = {
         userid: this.userId
       }
@@ -644,6 +659,8 @@ export default {
       })
     },
     getOpicture() {
+      if (!this.userId) return;
+
       let params = {
         userid: this.userId
       }
@@ -942,9 +959,11 @@ export default {
   }
 
   .right-menu {
-    float: right;
+    // float: right;
+    display: flex;
+    align-items: center;
     height: 100%;
-    line-height: 50px;
+    padding: 10px;
 
     //.shopCar {
       //   padding-top: 19px;

f/web-kboss/src/store/modules/user.js

@@ -83,6 +83,7 @@ const actions = {
   //客户获取余额
   async getCustmoersMoney({commit}) {
     let result = await myBalanceAPI()
+    
     if (result.status) {
       commit('SETMYBANLANCE', result.data)
     }
@@ -249,4 +250,5 @@ export default {
   state,
   mutations,
   actions,
+
 };

f/web-kboss/src/views/homePage/components/topBox/index.vue

@@ -34,11 +34,6 @@
 
       <!-- 用户区域：登录/注册按钮和用户下拉菜单 -->
       <div class="user-area">
-        <!-- 搜索框 -->
-        <!-- <div class="search-box">
-          <i class="el-icon-search"></i>
-          <input type="text" :placeholder="translations[language].searchPlaceholder">
-        </div> -->
         <!-- 中英互译 -->
         <div class="language-toggle" @click="toggleLanguage">
           <span class="iconfont icon-ditu_diqiu_o"></span>
@@ -183,9 +178,12 @@
     </div>
 
     <!-- 消息中心组件 -->
-
+    <message-center
-    <message-center ref="messageCenter" :visible.sync="messageCenterVisible" :userId="userId"
+      ref="messageCenter"
-      @unread-count-update="handleUnreadCountUpdate" />
+      :visible.sync="messageCenterVisible"
+      :userId="userId"
+      @unread-count-update="handleUnreadCountUpdate"
+    />
   </div>
 </template>
 
@@ -742,6 +740,8 @@ export default Vue.extend({
 
     // 获取用户信息
     async getUserInfo() {
+      if (!this.userId) return;
+
       getUserInfoAPI({ id: this.userId }).then((res) => {
         if (res.status) {
           // this.nick_name = res.data[0].nick_name;

f/web-kboss/src/views/product/mainPage/index.vue

@@ -57,7 +57,7 @@
       <!-- 用户信息 -->
       <div class="user card">
         <div class="userImg">
-          <div class="imgUser">{{ userInfo.username ? userInfo.username.charAt(0) : '' }}</div>
+          <div class="imgUser">{{ userInfo.username.charAt(0) }}</div>
         </div>
         <div class="userBox">
           <h3>{{ userInfo.username }}</h3>
@@ -72,27 +72,19 @@
       <div class="price card">
         <div class="title">账户余额</div>
         <div class="content">
-          <span class="balance">￥{{ displayBalance }}</span>
+          <span class="balance">￥{{ initMybalance() }}</span>
           <el-button size="mini" type="primary" @click="$router.push('/kbossCharge')">
             立即充值
           </el-button>
         </div>
       </div>
 
-      <!-- 待办事项 -->
+      <div class="announcements card">
-      <div class="todo card">
+        <div class="title">系统公告</div>
-        <div class="title">待办事项</div>
+        <ul class="announcement-list">
-        <ul class="todo-list">
+          <li v-for="i in 3" :key="i">
-          <li v-for="item in todoList" :key="item.type" @click="handleTodoClick(item)">
+            <i class="el-icon-bell"></i>
-            <div class="todo-item">
+            <span>这是第{{ i }}条系统公告内容...</span>
-              <div class="todo-icon">
-                <i :class="item.icon"></i>
-              </div>
-              <div class="todo-content">
-                <div class="todo-title">{{ item.title }}</div>
-                <div class="todo-count">{{ item.count }}</div>
-              </div>
-            </div>
           </li>
         </ul>
       </div>
@@ -102,7 +94,7 @@
 
 <script>
 import Vue from 'vue'
-import { mapState, mapActions } from "vuex";
+import { mapState } from "vuex";
 import { reqNewHomeResource, reqNewHomeResourceWarning, reqQuickNav } from "@/api/newHome";
 
 export default Vue.extend({
@@ -117,117 +109,31 @@ export default Vue.extend({
         email: ""
       },
       viewList: [],
-      navList: [],
+      navList: []
-      localBalance: '0.00', // 本地余额存储
-      todoList: [
-        { type: 'pending_payment', title: '待支付', count: 1, icon: 'el-icon-money' },
-        { type: 'pending_renewal', title: '待续费', count: 2, icon: 'el-icon-refresh' },
-        { type: 'processing', title: '处理中', count: 2, icon: 'el-icon-loading' },
-        { type: 'message', title: '站内信', count: 2, icon: 'el-icon-message' }
-      ]
-    }
-  },
-
-  computed: {
-    ...mapState({
-      mybalance: state => state.user.mybalance,
-    }),
-    // 计算属性显示余额，优先使用 Vuex 中的值
-    displayBalance() {
-      if (this.mybalance && this.mybalance !== '0.00') {
-        return this.mybalance;
-      }
-      return this.localBalance;
     }
   },
 
   mounted() {
-    this.initPage();
+    reqQuickNav().then(res => {
+      this.navList = res.data
+    })
+    this.userInfo = JSON.parse(localStorage.getItem("user_info") || "{}");
+    reqNewHomeResource().then(res => {
+      if (res.status) {
+        this.viewList = res.data || [];
+      } else {
+        this.$message.error(res.msg);
+      }
+    })
+    reqNewHomeResourceWarning().then(res => {
+      if (res.status) {
+        this.tableData = res.data || [];
+      } else {
+        this.$message.error(res.msg);
+      }
+    })
   },
-
   methods: {
-    async initPage() {
-      try {
-        // 并行发起所有请求
-        const [navRes, resourceRes, warningRes] = await Promise.all([
-          reqQuickNav(),
-          reqNewHomeResource(),
-          reqNewHomeResourceWarning()
-        ]);
-
-        this.navList = navRes.data;
-
-        if (resourceRes.status) {
-          this.viewList = resourceRes.data || [];
-        } else {
-          this.$message.error(resourceRes.msg);
-        }
-
-        if (warningRes.status) {
-          this.tableData = warningRes.data || [];
-        } else {
-          this.$message.error(warningRes.msg);
-        }
-
-        // 初始化用户信息
-        this.initUserInfo();
-
-        // 初始化余额信息
-        await this.initBalance();
-
-      } catch (error) {
-        console.error('初始化页面失败:', error);
-        this.$message.error('页面初始化失败');
-      }
-    },
-
-    initUserInfo() {
-      const userInfoStr = localStorage.getItem("user_info");
-      if (userInfoStr) {
-        try {
-          this.userInfo = JSON.parse(userInfoStr);
-        } catch (e) {
-          console.error('解析用户信息失败:', e);
-          this.userInfo = {};
-        }
-      }
-    },
-
-    async initBalance() {
-      try {
-        // 首先尝试从 sessionStorage 获取
-        const sessionBalance = sessionStorage.getItem('mybalance');
-        if (sessionBalance) {
-          this.localBalance = sessionBalance;
-        }
-
-        // 如果有用户信息，尝试从服务器获取余额
-        if (this.userInfo.id) {
-          await this.fetchUserBalance();
-        }
-
-        // 如果 Vuex 中有余额数据，更新本地存储
-        if (this.mybalance && this.mybalance !== '0.00') {
-          this.localBalance = this.mybalance;
-          sessionStorage.setItem('mybalance', this.mybalance);
-        }
-      } catch (error) {
-        console.error('初始化余额失败:', error);
-        // 失败时使用默认值
-        this.localBalance = '0.00';
-      }
-    },
-
-    async fetchUserBalance() {
-
-      setTimeout(() => {
-        const mockBalance = '100.00';
-        this.localBalance = mockBalance;
-        sessionStorage.setItem('mybalance', mockBalance);
-        this.$store.commit('user/SET_MYBALANCE', mockBalance);
-      }, 100);
-    },
-
     goBaidu(item) {
       this.$store.commit('setRedirectUrl', item.url)
       localStorage.setItem('redirectUrl', item.url)
@@ -240,37 +146,15 @@ export default Vue.extend({
         }
       })
     },
-
+    initMybalance() {
-    handleTodoClick(item) {
+      return sessionStorage.getItem('mybalance') || '0.00'
-      // 处理待办事项点击事件
-      switch (item.type) {
-        case 'pending_payment':
-          // this.$router.push('/pending-payment');
-          break;
-        case 'pending_renewal':
-          // this.$router.push('/pending-renewal');
-          break;
-        case 'processing':
-          // this.$router.push('/processing');
-          break;
-        case 'message':
-          // this.$router.push('/messages');
-          break;
-      }
-    }
     },
-
-  // 监听用户信息变化，如果用户信息更新则重新获取余额
-  watch: {
-    'userInfo.id': {
-      handler(newVal) {
-        if (newVal) {
-          this.fetchUserBalance();
-        }
   },
-      immediate: true
+  computed: {
-    }
+    ...mapState({
-  }
+      mybalance: state => state.user.mybalance,
+    })
+  },
 })
 </script>
 
@@ -486,72 +370,33 @@ export default Vue.extend({
   }
 }
 
-/* 待办事项样式 */
+.announcements {
-.todo {
+  .announcement-list {
-  .todo-list {
     list-style: none;
     padding: 0;
     margin: 0;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 15px;
 
     li {
-      cursor: pointer;
+      padding: 10px 0;
-      transition: all 0.3s ease;
+      border-bottom: 1px solid #eee;
-
-      &:hover {
-        transform: translateY(-2px);
-        .todo-item {
-          box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
-        }
-      }
-    }
-
-    .todo-item {
-      background: #f8f9fa;
-      border-radius: 8px;
-      padding: 15px;
       display: flex;
       align-items: center;
-      gap: 12px;
-      transition: all 0.3s ease;
-      border: 1px solid #ebeef5;
 
-      .todo-icon {
+      &:last-child {
-        width: 40px;
+        border-bottom: none;
-        height: 40px;
+      }
-        border-radius: 50%;
-        background: linear-gradient(135deg, #409eff, #64b5f6);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
 
       i {
-          font-size: 18px;
+        color: #e6a23c;
-          color: white;
+        margin-right: 10px;
-        }
+        flex-shrink: 0;
       }
 
-      .todo-content {
+      span {
-        flex: 1;
-        min-width: 0;
-
-        .todo-title {
-          font-size: 14px;
         color: #606266;
-          margin-bottom: 4px;
-          white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        }
+        white-space: nowrap;
-
-        .todo-count {
-          font-size: 20px;
-          font-weight: bold;
-          color: #303133;
-        }
       }
     }
   }
@@ -595,9 +440,5 @@ export default Vue.extend({
   .overView {
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   }
-
-  .todo-list {
-    grid-template-columns: 1fr !important;
-  }
 }
 </style>