uptada

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

@@ -79,12 +79,20 @@
         </div>
       </div>
 
-      <div class="announcements card">
+      <!-- 待办事项 -->
-        <div class="title">系统公告</div>
+      <div class="todo 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 v-for="item in todoList" :key="item.type" @click="handleTodoClick(item)">
-            <span>这是第{{ i }}条系统公告内容...</span>
+            <div class="todo-item">
+              <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>
@@ -110,7 +118,13 @@ export default Vue.extend({
       },
       viewList: [],
       navList: [],
-      localBalance: '0.00' // 本地余额存储
+      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' }
+      ]
     }
   },
 
@@ -205,20 +219,9 @@ export default Vue.extend({
     },
 
     async fetchUserBalance() {
-      // 这里需要根据您的实际 API 来获取用户余额
-      // 假设有一个获取用户余额的 API
-      // const balanceRes = await reqUserBalance(this.userInfo.id);
-      // if (balanceRes.status) {
-      //   this.localBalance = balanceRes.data.balance;
-      //   sessionStorage.setItem('mybalance', this.localBalance);
-      //   // 如果需要，也可以更新到 Vuex
-      //   this.$store.commit('user/SET_MYBALANCE', this.localBalance);
-      // }
 
-      // 临时方案：模拟获取余额
-      // 在实际项目中，您需要调用真实的 API
       setTimeout(() => {
-        const mockBalance = '100.00'; // 模拟余额数据
+        const mockBalance = '100.00';
         this.localBalance = mockBalance;
         sessionStorage.setItem('mybalance', mockBalance);
         this.$store.commit('user/SET_MYBALANCE', mockBalance);
@@ -236,6 +239,24 @@ export default Vue.extend({
           url: item.url
         }
       })
+    },
+
+    handleTodoClick(item) {
+      // 处理待办事项点击事件
+      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;
+      }
     }
   },
 
@@ -465,33 +486,72 @@ export default Vue.extend({
   }
 }
 
-.announcements {
+/* 待办事项样式 */
-  .announcement-list {
+.todo {
+  .todo-list {
     list-style: none;
     padding: 0;
     margin: 0;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 15px;
 
     li {
-      padding: 10px 0;
+      cursor: pointer;
-      border-bottom: 1px solid #eee;
+      transition: all 0.3s ease;
+
+      &: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;
 
-      &:last-child {
+      .todo-icon {
-        border-bottom: none;
+        width: 40px;
-      }
+        height: 40px;
-
+        border-radius: 50%;
-      i {
+        background: linear-gradient(135deg, #409eff, #64b5f6);
-        color: #e6a23c;
+        display: flex;
-        margin-right: 10px;
+        align-items: center;
+        justify-content: center;
         flex-shrink: 0;
+
+        i {
+          font-size: 18px;
+          color: white;
+        }
       }
 
-      span {
+      .todo-content {
-        color: #606266;
+        flex: 1;
-        overflow: hidden;
+        min-width: 0;
-        text-overflow: ellipsis;
+
-        white-space: nowrap;
+        .todo-title {
+          font-size: 14px;
+          color: #606266;
+          margin-bottom: 4px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .todo-count {
+          font-size: 20px;
+          font-weight: bold;
+          color: #303133;
+        }
       }
     }
   }
@@ -535,5 +595,9 @@ export default Vue.extend({
   .overView {
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   }
+
+  .todo-list {
+    grid-template-columns: 1fr !important;
+  }
 }
 </style>