f/web-kboss/src/api/finance/customerRechargeManagement.js

@@ -28,7 +28,7 @@ export function getReachargelogAPI(params) {
 //客户充值冲账
 export function editReachargelogAPI(params) {
   return request({
-    url: `examine/upledger_examine${suffix}`,
+    url: `customer/mybalance.dspy`,
     method: 'get',
     params: params
   })

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

@@ -72,23 +72,36 @@
       <div class="price card">
         <div class="title">账户余额</div>
         <div class="content">
-          <span class="balance">￥{{ initMybalance() }}</span>
+          <span class="balance">￥{{ this.mybalance }}</span>
           <el-button size="mini" type="primary" @click="$router.push('/kbossCharge')">
             立即充值
           </el-button>
         </div>
       </div>
 
-      <div class="announcements card">
+      <!-- 待办事项组件 -->
-        <div class="title">系统公告</div>
+      <div class="todos card">
-        <ul class="announcement-list">
+        <div class="title">待办事项</div>
-          <li v-for="i in 3" :key="i">
+        <ul class="todo-list">
-            <i class="el-icon-bell"></i>
+          <li
-            <span>这是第{{ i }}条系统公告内容...</span>
+            v-for="(item, index) in todoList"
+            :key="index"
+            class="todo-item"
+            @click="handleTodoClick(item.name)"
+          >
+            <span class="todo-name">{{ item.name }}</span>
+            <span class="todo-count">{{ item.count }}</span>
           </li>
         </ul>
       </div>
     </div>
+
+    <!-- 消息中心弹窗 -->
+    <MessageCenter
+      ref="messageCenter"
+      :visible.sync="messageCenterVisible"
+      @unread-count-update="handleUnreadCountUpdate"
+    />
   </div>
 </template>
 
@@ -96,9 +109,15 @@
 import Vue from 'vue'
 import { mapState } from "vuex";
 import { reqNewHomeResource, reqNewHomeResourceWarning, reqQuickNav } from "@/api/newHome";
+import { editReachargelogAPI } from "@/api/finance/customerRechargeManagement";
+import { getUnreadmsgAPI } from "@/api/login"; // 导入站内信API
+import MessageCenter from '@/components/MessageCenter/MessageCenter.vue'; // 导入消息中心组件
 
 export default Vue.extend({
   name: "mainPage",
+  components: {
+    MessageCenter
+  },
   data() {
     return {
       tableData: [],
@@ -109,10 +128,21 @@ export default Vue.extend({
         email: ""
       },
       viewList: [],
-      navList: []
+      navList: [],
+      mybalance: 0, // 余额
+      todoList: [
+        { name: '待支付', count: 1 },
+        { name: '待续费', count: 2 },
+        { name: '处理中', count: 2 },
+        { name: '站内信', count: 0 } // 初始值为0，将从API获取
+      ],
+      messageCenterVisible: false // 控制消息中心弹窗显示
     }
   },
-
+  created() {
+    this.initMybalance();
+    this.getUnreadMsgCount(); // 获取未读消息数量
+  },
   mounted() {
     reqQuickNav().then(res => {
       this.navList = res.data
@@ -146,9 +176,53 @@ export default Vue.extend({
         }
       })
     },
-    initMybalance() {
+    async initMybalance() {
-      return sessionStorage.getItem('mybalance') || '0.00'
+      const res = await editReachargelogAPI()
+      if (res.status) {
+        this.mybalance = res.data
+      }
     },
+    // 获取未读消息数量
+    async getUnreadMsgCount() {
+      try {
+        const res = await getUnreadmsgAPI();
+        if (res.status) {
+          // 更新站内信的未读数量
+          const messageItem = this.todoList.find(item => item.name === '站内信');
+          if (messageItem) {
+            messageItem.count = res.data || 0;
+          }
+        } else {
+          this.$message.error(res.msg || '获取未读消息失败');
+        }
+      } catch (error) {
+        console.error('获取未读消息失败:', error);
+        this.$message.error('获取未读消息失败');
+      }
+    },
+    // 处理待办事项点击
+    handleTodoClick(todoName) {
+      // 根据不同的待办事项类型进行跳转
+      if (todoName === '站内信') {
+        // 打开消息中心弹窗
+        this.openMessageCenter();
+      } else {
+        // 待支付、待续费、处理中都跳转到产品概览页面
+        this.$router.push('/product/overview');
+      }
+    },
+    // 打开消息中心
+    openMessageCenter() {
+      this.messageCenterVisible = true;
+    },
+    // 处理未读消息数量更新
+    handleUnreadCountUpdate(count) {
+      // 更新站内信的未读数量
+      const messageItem = this.todoList.find(item => item.name === '站内信');
+      if (messageItem) {
+        messageItem.count = count || 0;
+      }
+    }
   },
   computed: {
     ...mapState({
@@ -370,33 +444,44 @@ export default Vue.extend({
   }
 }
 
-.announcements {
+/* 待办事项样式 */
-  .announcement-list {
+.todos {
+  .todo-list {
     list-style: none;
     padding: 0;
     margin: 0;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 15px;
 
-    li {
+    .todo-item {
-      padding: 10px 0;
-      border-bottom: 1px solid #eee;
       display: flex;
+      flex-direction: column;
       align-items: center;
+      justify-content: center;
+      padding: 15px;
+      border: 1px solid #ebeef5;
+      border-radius: 8px;
+      text-align: center;
+      transition: all 0.3s ease;
+      cursor: pointer;
 
-      &:last-child {
+      &:hover {
-        border-bottom: none;
+        transform: translateY(-3px);
+        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
+        border-color: #409eff;
       }
 
-      i {
+      .todo-name {
-        color: #e6a23c;
+        font-size: 14px;
-        margin-right: 10px;
-        flex-shrink: 0;
-      }
-
-      span {
         color: #606266;
-        overflow: hidden;
+        margin-bottom: 8px;
-        text-overflow: ellipsis;
+      }
-        white-space: nowrap;
+
+      .todo-count {
+        font-size: 24px;
+        font-weight: bold;
+        color: #409eff;
       }
     }
   }
@@ -440,5 +525,9 @@ export default Vue.extend({
   .overView {
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   }
+
+  .todo-list {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 </style>