uptada

f/web-kboss/src/router/index.js

@@ -345,7 +345,7 @@ export const asyncRoutes = [
         name: 'BaiduOrder',
         meta: {
           title: "百度订单",
-          fullPath: "/orderManagement/baidu",
+          fullPath: "/product/overview",
           noCache: true
         }
       }

f/web-kboss/src/views/customer/orderManagement/index.vue

@@ -2,6 +2,8 @@
   <div class="orderManagement">
     <!-- 移动端搜索框 -->
     <el-card class="mobileCaed" v-if="isMobile">
+      <!-- 已移除路由参数提示 -->
+
       <el-row :span="24">
         <el-col :span="24" class="search">
           <el-select v-model="select" filterable @change="selectSearch" class="searchSelect" placeholder="请选择"
@@ -81,6 +83,8 @@
 
     <!-- PC端头部 -->
     <el-card class="pcCard" v-else>
+      <!-- 已移除路由参数提示 -->
+
       <!-- 头 -->
       <div class="top">
         <div class="header-container">
@@ -295,6 +299,9 @@ export default {
       userId: sessionStorage.getItem("userId"),
       dialogVisible: false,
 
+      // 当前激活的筛选类型（来自路由参数）
+      activeFilterType: null,
+
       // 订单类型筛选
       businessOpFilter: null,
       // 订单状态筛选
@@ -331,25 +338,69 @@ export default {
   computed: {
     // 检查是否有活跃的筛选条件
     hasActiveFilters() {
-      return this.businessOpFilter || this.orderStatusFilter;
+      return this.businessOpFilter || this.orderStatusFilter || this.activeFilterType;
     }
   },
   created() {
-    this.getOrder();
     this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(this.userAgent);
+    this.initFromRouteQuery();
+  },
+  watch: {
+    // 监听路由变化，当从首页跳转过来时重新处理参数
+    '$route'(to, from) {
+      this.initFromRouteQuery();
+    }
   },
   methods: {
+    // 从路由参数初始化筛选条件
+    initFromRouteQuery() {
+      const query = this.$route.query;
+      console.log('路由参数:', query);
+
+      if (query.filterType) {
+        this.activeFilterType = query.filterType;
+
+        // 根据不同的筛选类型设置对应的筛选条件
+        switch(query.filterType) {
+          case 'pendingPayment':
+            // 待支付：显示未支付和续费的数据
+            this.orderStatusFilter = '0';
+            this.businessOpFilter = 'RENEW';
+            break;
+          case 'pendingRenewal':
+            // 待续费：只显示续费的数据
+            this.businessOpFilter = 'RENEW';
+            this.orderStatusFilter = null;
+            break;
+          case 'processing':
+            // 处理中：显示未支付的数据
+            this.orderStatusFilter = '0';
+            this.businessOpFilter = null;
+            break;
+        }
+
+        // 重置其他筛选条件
+        this.value1 = null;
+        this.searchValue = null;
+        this.select = null;
+
+        this.pagination.page = 1;
+        this.getOrder();
+      } else {
+        // 如果没有路由参数，使用当前的筛选条件
+        this.pagination.page = 1;
+        this.getOrder();
+      }
+    },
+
     // 格式化订单日期为 XXXX-XX-XX 格式
     formatOrderDate(dateString) {
       if (!dateString) return '-';
 
       try {
-        // 处理各种可能的日期格式
         const date = new Date(dateString);
         if (isNaN(date.getTime())) {
-          // 如果 Date 解析失败，尝试直接处理字符串
           if (typeof dateString === 'string') {
-            // 移除可能的时间部分
             const datePart = dateString.split(' ')[0];
             const parts = datePart.split('-');
             if (parts.length === 3) {
@@ -359,17 +410,16 @@ export default {
               return `${year}-${month}-${day}`;
             }
           }
-          return dateString; // 如果无法处理，返回原字符串
+          return dateString;
         }
 
-        // 标准日期格式化
         const year = date.getFullYear().toString();
         const month = (date.getMonth() + 1).toString().padStart(2, '0');
         const day = date.getDate().toString().padStart(2, '0');
         return `${year}-${month}-${day}`;
       } catch (error) {
         console.error('日期格式化错误:', error, dateString);
-        return dateString; // 出错时返回原字符串
+        return dateString;
       }
     },
 
@@ -405,8 +455,8 @@ export default {
     // 处理订单类型筛选
     handleBusinessOpFilter(type) {
       console.log("订单类型筛选:", type, this.getOrderTypeConfig(type).text);
+      this.activeFilterType = null;
 
-      // 如果点击已经选中的按钮，则取消筛选
       if (this.businessOpFilter === type) {
         this.businessOpFilter = null;
       } else {
@@ -419,6 +469,7 @@ export default {
     // 清除订单类型筛选
     clearBusinessOpFilter() {
       this.businessOpFilter = null;
+      this.activeFilterType = null;
       this.pagination.page = 1;
       this.getOrder();
     },
@@ -426,8 +477,8 @@ export default {
     // 处理订单状态筛选
     handleOrderStatusFilter(status) {
       console.log("订单状态筛选:", status, this.getOrderStatusText(status));
+      this.activeFilterType = null;
 
-      // 如果点击已经选中的按钮，则取消筛选
       if (this.orderStatusFilter === status) {
         this.orderStatusFilter = null;
       } else {
@@ -440,6 +491,7 @@ export default {
     // 清除订单状态筛选
     clearOrderStatusFilter() {
       this.orderStatusFilter = null;
+      this.activeFilterType = null;
       this.pagination.page = 1;
       this.getOrder();
     },
@@ -451,8 +503,12 @@ export default {
       this.select = null;
       this.businessOpFilter = null;
       this.orderStatusFilter = null;
+      this.activeFilterType = null;
       this.pagination.page = 1;
       this.getOrder();
+
+      // 清除路由参数
+      this.$router.replace({ path: '/product/overview', query: {} });
     },
 
     // 获取订单数据
@@ -460,7 +516,7 @@ export default {
       let params = {
         page: this.pagination.page,
         size: this.pagination.size,
-        type: '200' // 确保始终传递type参数
+        type: '200'
       };
 
       // 订单号搜索
@@ -544,6 +600,7 @@ export default {
 
     selectSearch(e) {
       this.select = e;
+      this.activeFilterType = null;
       // 当选择状态选项时，直接触发搜索
       if (['0', '1', '3'].includes(e)) {
         this.getOrder();
@@ -560,6 +617,7 @@ export default {
 
     input(e) {
       this.searchValue = e;
+      this.activeFilterType = null;
       this.pagination.page = 1;
       this.getOrder();
     },
@@ -663,6 +721,7 @@ export default {
   // PC端优化样式
   .pcCard {
     margin-bottom: 10px;
+
     .btm{
       display: flex;
       margin-top: 10px;
@@ -708,7 +767,6 @@ export default {
       display: flex;
       align-items: center;
       justify-content: flex-start;
-      // height: 60px;
       flex-wrap: wrap;
 
       .search-group {
@@ -804,11 +862,11 @@ export default {
 ::v-deep .el-table {
   .el-table__row {
     width: 100%;
-    height: 56px; // 增加行高
+    height: 56px;
   }
 
   .el-table__cell {
-    padding: 12px 0; // 增加单元格内边距
+    padding: 12px 0;
   }
 
   .cell-content {
@@ -821,7 +879,6 @@ export default {
 
   .el-button {
     height: 32px;
-    // line-height: 32px;
   }
 }
 

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

@@ -25,7 +25,6 @@
 
       <div class="section">
         <div class="bigTitle">到期预警</div>
-        <!-- 表格容器用于控制宽度和溢出 -->
         <div class="table-container">
           <el-table
             height="250px"
@@ -54,7 +53,6 @@
     </div>
 
     <div class="rightBox">
-      <!-- 用户信息 -->
       <div class="user card">
         <div class="userImg">
           <div class="imgUser">{{ userInfo.username.charAt(0) }}</div>
@@ -79,7 +77,6 @@
         </div>
       </div>
 
-      <!-- 待办事项组件 -->
       <div class="todos card">
         <div class="title">待办事项</div>
         <ul class="todo-list">
@@ -96,7 +93,6 @@
       </div>
     </div>
 
-    <!-- 消息中心弹窗 -->
     <MessageCenter
       ref="messageCenter"
       :visible.sync="messageCenterVisible"
@@ -110,8 +106,8 @@ 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 { getUnreadmsgAPI } from "@/api/login";
-import MessageCenter from '@/components/MessageCenter/MessageCenter.vue'; // 导入消息中心组件
+import MessageCenter from '@/components/MessageCenter/MessageCenter.vue';
 
 export default Vue.extend({
   name: "mainPage",
@@ -129,19 +125,19 @@ export default Vue.extend({
       },
       viewList: [],
       navList: [],
-      mybalance: 0, // 余额
+      mybalance: 0,
       todoList: [
-        { name: '待支付', count: 1 },
+        { name: '待支付', count: 7 },
-        { name: '待续费', count: 2 },
+        { name: '待续费', count: 3 },
-        { name: '处理中', count: 2 },
+        { name: '处理中', count: 7 },
-        { name: '站内信', count: 0 } // 初始值为0，将从API获取
+        { name: '站内信', count: 0 }
       ],
-      messageCenterVisible: false // 控制消息中心弹窗显示
+      messageCenterVisible: false
     }
   },
   created() {
     this.initMybalance();
-    this.getUnreadMsgCount(); // 获取未读消息数量
+    this.getUnreadMsgCount();
   },
   mounted() {
     reqQuickNav().then(res => {
@@ -182,12 +178,10 @@ export default Vue.extend({
         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;
@@ -200,24 +194,45 @@ export default Vue.extend({
         this.$message.error('获取未读消息失败');
       }
     },
-    // 处理待办事项点击
     handleTodoClick(todoName) {
-      // 根据不同的待办事项类型进行跳转
       if (todoName === '站内信') {
-        // 打开消息中心弹窗
         this.openMessageCenter();
       } else {
-        // 待支付、待续费、处理中都跳转到产品概览页面
+        let query = {};
-        this.$router.push('/product/overview');
+
+        switch(todoName) {
+          case '待支付':
+            // 待支付：显示未支付和续费的数据
+            query = {
+              filterType: 'processing'  // 使用明确的标识
+            };
+            break;
+          case '待续费':
+            // 待续费：只显示续费的数据
+            query = {
+              filterType: 'pendingPayment'
+            };
+            break;
+          case '处理中':
+            // 处理中：显示未支付的数据
+            query = {
+              filterType: 'processing'
+            };
+            break;
+        }
+
+        console.log(`跳转到资源概览，筛选类型: ${todoName}`, query);
+
+        this.$router.push({
+          path: '/product/overview',
+          query: query
+        });
       }
     },
-    // 打开消息中心
     openMessageCenter() {
       this.messageCenterVisible = true;
     },
-    // 处理未读消息数量更新
     handleUnreadCountUpdate(count) {
-      // 更新站内信的未读数量
       const messageItem = this.todoList.find(item => item.name === '站内信');
       if (messageItem) {
         messageItem.count = count || 0;
@@ -233,71 +248,63 @@ export default Vue.extend({
 </script>
 
 <style lang="less" scoped>
+/* 样式保持不变，与之前相同 */
 .mainBox {
   background: #f5f7fa;
   width: 100%;
-  /* 使用视口高度减去一个固定值来适应不同屏幕 */
+  height: calc(100vh - 100px);
-  height: calc(100vh - 100px); /* 假设顶部导航栏等占 100px */
   display: flex;
   padding: 10px;
   padding-bottom: 20px;
   box-sizing: border-box;
   gap: 20px;
-  /* 移除 overflow-x: auto; 防止出现横向滚动条 */
   overflow-y: auto;
-  /* 确保主容器不产生横向溢出 */
   overflow-x: hidden;
 }
 
 .leftBox {
-  /* 使用百分比宽度，更适应容器 */
   width: 65%;
   display: flex;
   flex-direction: column;
   gap: 20px;
-  min-width: 0; /* 防止 flex 项目溢出 */
+  min-width: 0;
 
   .section {
     background: white;
     border-radius: 10px;
     padding: 20px;
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-    /* 移除 flex-shrink: 0; 允许在必要时轻微收缩 */
   }
 }
 
 .rightBox {
-  /* 使用百分比宽度 */
   width: 35%;
   display: flex;
   flex-direction: column;
   gap: 20px;
-  min-width: 0; /* 防止 flex 项目溢出 */
+  min-width: 0;
 
   .card {
     background: white;
     border-radius: 10px;
     padding: 20px;
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-    /* 移除 flex-shrink: 0; 允许在必要时轻微收缩 */
   }
 }
 
-/* 表格容器样式，用于处理内部可能的溢出 */
 .table-container {
   width: 100%;
-  overflow-x: auto; /* 表格内部可能出现滚动条 */
+  overflow-x: auto;
-  border-radius: 4px; /* 与表格圆角匹配 */
+  border-radius: 4px;
 }
 
-/* 表格样式微调，确保宽度100% */
 .table-container ::v-deep .el-table {
   width: 100% !important;
 }
 
 .recUl {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* 使用 auto-fit 和 minmax 实现更好的自适应 */
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
   gap: 15px;
   list-style: none;
   padding: 0;
@@ -314,7 +321,7 @@ export default Vue.extend({
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    min-width: 0; /* 防止内部内容撑开 */
+    min-width: 0;
 
     i {
       font-size: 24px;
@@ -331,8 +338,7 @@ export default Vue.extend({
 }
 
 .overView {
-  /* 覆盖默认的 grid-template-columns */
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 资源概览项更宽 */
 
   li {
     cursor: default;
@@ -347,7 +353,7 @@ export default Vue.extend({
     display: flex;
     justify-content: space-between;
     width: 100%;
-    min-width: 0; /* 防止内部内容撑开 */
+    min-width: 0;
 
     .title {
       font-size: 16px;
@@ -382,7 +388,7 @@ export default Vue.extend({
 
   .userImg {
     margin-right: 20px;
-    flex-shrink: 0; /* 防止头像被压缩 */
+    flex-shrink: 0;
 
     .imgUser {
       width: 80px;
@@ -399,8 +405,8 @@ export default Vue.extend({
   }
 
   .userBox {
-    flex: 1; /* 占据剩余空间 */
+    flex: 1;
-    min-width: 0; /* 防止内容溢出 */
+    min-width: 0;
 
     h3 {
       margin-top: 0;
@@ -434,7 +440,7 @@ export default Vue.extend({
     display: flex;
     justify-content: space-between;
     align-items: center;
-    flex-wrap: wrap; /* 在小屏幕上换行 */
+    flex-wrap: wrap;
 
     .balance {
       font-size: 28px;
@@ -444,8 +450,10 @@ export default Vue.extend({
   }
 }
 
-/* 待办事项样式 */
 .todos {
+  .title {
+    margin-bottom: 15px;
+  }
   .todo-list {
     list-style: none;
     padding: 0;
@@ -505,12 +513,11 @@ export default Vue.extend({
   text-overflow: ellipsis;
 }
 
-/* 响应式调整 */
 @media (max-width: 768px) {
   .mainBox {
     flex-direction: column;
     height: auto;
-    overflow-x: hidden; /* 小屏幕也隐藏横向滚动 */
+    overflow-x: hidden;
   }
 
   .leftBox, .rightBox {