Merge branch 'main' of https://git.opencomputing.cn/yumoqing/kboss

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

@@ -7,6 +7,12 @@ import store from "@/store";
 import {myBalanceAPI} from "@/api/finance/customerRechargeManagement";
 import {testData} from "@/views/homePage/components/topBox/testData";
 
+// 安全转换为字符串的辅助函数
+const safeToString = (value, defaultValue = '') => {
+  if (value == null) return defaultValue;
+  return value.toString();
+};
+
 // 从sessionStorage恢复状态
 const getStoredState = () => {
   return {
@@ -75,9 +81,18 @@ const mutations = {
     state.userType = userType;
     sessionStorage.setItem("userType", userType);
   },
-  // 新增：设置组织类型
+  // 修复：设置组织类型 - 添加防御性检查
   SET_ORG_TYPE: (state, orgType) => {
     state.orgType = orgType;
+
+    // 防御性检查，确保 orgType 不为 null 或 undefined
+    if (orgType == null) {
+      console.warn('SET_ORG_TYPE: orgType is null or undefined, setting to empty string');
+      sessionStorage.setItem("orgType", '');
+      return;
+    }
+
+    // 安全地调用 toString()
     sessionStorage.setItem("orgType", orgType.toString());
   },
   // 新增：设置用户角色
@@ -120,7 +135,8 @@ const actions = {
               const userRoles = org_type == 2 ? ['客户'] : ['管理员'];
 
               commit("SET_USER_TYPE", userType);
-              commit("SET_ORG_TYPE", org_type);
+              // 确保 org_type 不为 undefined
+              commit("SET_ORG_TYPE", org_type || '');
               commit("SET_ROLES", userRoles); // 新增：设置用户角色
 
               console.log("登录用户类型:", userType, "org_type:", org_type, "用户角色:", userRoles);
@@ -171,7 +187,9 @@ const actions = {
         commit("SET_USER_TYPE", userType);
       }
       if (orgType) {
-        commit("SET_ORG_TYPE", parseInt(orgType));
+        // 确保 orgType 不为 null 或 undefined
+        const safeOrgType = orgType ? parseInt(orgType) : '';
+        commit("SET_ORG_TYPE", safeOrgType);
       }
       if (roles) {
         commit("SET_ROLES", JSON.parse(roles));
@@ -190,8 +208,6 @@ const actions = {
   // user logout
   logout({commit, state, dispatch}) {
     return new Promise((resolve, reject) => {
-      // logout(state.token)
-      //   .then(() => {
       commit("SET_TOKEN", "");
       commit("SET_ROLES", []);
       commit("SET_USER_TYPE", ""); // 新增：清除用户类型
@@ -214,10 +230,6 @@ const actions = {
       dispatch("tagsView/delAllViews", null, {root: true});
 
       resolve();
-        // })
-        // .catch((error) => {
-        //   reject(error);
-        // });
     });
 
   },
@@ -272,3 +284,4 @@ export default {
   mutations,
   actions,
 };
+      

f/web-kboss/src/views/sales/customerManagement/customerInformationList/index.vue

@@ -1,110 +1,181 @@
 <template>
-  <div id="box">
+  <div class="customer-management-container">
-    <div>
+    <div class="table-container">
-      <el-table :data="userList" style="width: 100%; box-sizing: border-box;" height="calc(100vh - 98px)"
+      <el-table
-                :row-key="getRowKeys" :expand-row-keys="expands" @expand-change="expandChangeHandler"
+        :data="userList"
-                v-loading="loading">
+        style="width: 100%;"
+        height="calc(100vh - 120px)"
+        :row-key="getRowKeys"
+        :expand-row-keys="expands"
+        @expand-change="expandChangeHandler"
+        v-loading="loading"
+        class="customer-table"
+        :default-sort="{prop: 'transfer_time', order: 'descending'}">
+
+        <!-- 展开行 - 客户详细信息 -->
         <el-table-column type="expand" align="center" header-align="center">
-          <template>
+          <template slot-scope="scope">
-            <el-form label-position="left" inline class="demo-table-expand">
+            <div class="customer-detail-panel">
-              <el-form-item label="客户名称:">
+              <h3 class="detail-title">客户详细信息</h3>
-                <span>{{ tableData.name }}</span>
+              <el-row :gutter="20" class="detail-grid">
-              </el-form-item>
+                <el-col :xs="24" :sm="12" :md="8" class="detail-item">
-              <el-form-item label="客户地址:">
+                  <div class="detail-label">客户名称</div>
-                <span>{{ tableData.address }}</span>
+                  <div class="detail-value">{{ (scope.row.detailData && scope.row.detailData.name) || '--' }}</div>
-              </el-form-item>
+                </el-col>
-              <el-form-item label="统一社会信用代码:">
+                <el-col :xs="24" :sm="12" :md="8" class="detail-item">
-                <span>{{ tableData.identityCode }}</span>
+                  <div class="detail-label">客户地址</div>
-              </el-form-item>
+                  <div class="detail-value">{{ (scope.row.detailData && scope.row.detailData.address) || '--' }}</div>
-              <el-form-item label="联系人:">
+                </el-col>
-                <span>{{ tableData.contact }}</span>
+                <el-col :xs="24" :sm="12" :md="8" class="detail-item">
-              </el-form-item>
+                  <div class="detail-label">统一社会信用代码</div>
-              <el-form-item label="电话:">
+                  <div class="detail-value">{{ (scope.row.detailData && scope.row.detailData.identityCode) || '--' }}</div>
-                <span>{{ tableData.tel }}</span>
+                </el-col>
-              </el-form-item>
+                <el-col :xs="24" :sm="12" :md="8" class="detail-item">
-              <el-form-item label="邮箱:">
+                  <div class="detail-label">联系人</div>
-                <span>{{ tableData.email }}</span>
+                  <div class="detail-value">{{ (scope.row.detailData && scope.row.detailData.contact) || '--' }}</div>
-              </el-form-item>
+                </el-col>
-              <el-form-item label="开户行:">
+                <el-col :xs="24" :sm="12" :md="8" class="detail-item">
-                <span>{{ tableData.bankName }}</span>
+                  <div class="detail-label">电话</div>
-              </el-form-item>
+                  <div class="detail-value">{{ (scope.row.detailData && scope.row.detailData.tel) || '--' }}</div>
-              <el-form-item label="银行账号:">
+                </el-col>
-                <span>{{ tableData.bankAcc }}</span>
+                <el-col :xs="24" :sm="12" :md="8" class="detail-item">
-              </el-form-item>
+                  <div class="detail-label">邮箱</div>
-              <el-form-item label="发票抬头:">
+                  <div class="detail-value">{{ (scope.row.detailData && scope.row.detailData.email) || '--' }}</div>
-                <span>{{ tableData.identityName }}</span>
+                </el-col>
-              </el-form-item>
+                <el-col :xs="24" :sm="12" :md="8" class="detail-item">
-              <el-form-item label="发票联系电话:">
+                  <div class="detail-label">开户行</div>
-                <span>{{ tableData.taxTel }}</span>
+                  <div class="detail-value">{{ (scope.row.detailData && scope.row.detailData.bankName) || '--' }}</div>
-              </el-form-item>
+                </el-col>
-              <el-form-item label="发票地址:">
+                <el-col :xs="24" :sm="12" :md="8" class="detail-item">
-                <span>{{ tableData.taxAddress }}</span>
+                  <div class="detail-label">银行账号</div>
-              </el-form-item>
+                  <div class="detail-value">{{ (scope.row.detailData && scope.row.detailData.bankAcc) || '--' }}</div>
-              <el-form-item label="纳税人识别号:">
+                </el-col>
-                <span>{{ tableData.taxpayerIdentity }}</span>
+                <el-col :xs="24" :sm="12" :md="8" class="detail-item">
-              </el-form-item>
+                  <div class="detail-label">发票抬头</div>
-            </el-form>
+                  <div class="detail-value">{{ (scope.row.detailData && scope.row.detailData.identityName) || '--' }}</div>
+                </el-col>
+                <el-col :xs="24" :sm="12" :md="8" class="detail-item">
+                  <div class="detail-label">发票联系电话</div>
+                  <div class="detail-value">{{ (scope.row.detailData && scope.row.detailData.taxTel) || '--' }}</div>
+                </el-col>
+                <el-col :xs="24" :sm="12" :md="8" class="detail-item">
+                  <div class="detail-label">发票地址</div>
+                  <div class="detail-value">{{ (scope.row.detailData && scope.row.detailData.taxAddress) || '--' }}</div>
+                </el-col>
+                <el-col :xs="24" :sm="12" :md="8" class="detail-item">
+                  <div class="detail-label">纳税人识别号</div>
+                  <div class="detail-value">{{ (scope.row.detailData && scope.row.detailData.taxpayerIdentity) || '--' }}</div>
+                </el-col>
+              </el-row>
+            </div>
           </template>
         </el-table-column>
-        <el-table-column label="客户名称" prop="orgname" align="center" header-align="center"></el-table-column>
+
-        <el-table-column label="联系电话" prop="contactor_phone" align="center" header-align="center">
+        <!-- 客户列表列 -->
-        </el-table-column>
+        <el-table-column label="客户名称" prop="orgname" align="center" header-align="center" min-width="160" show-overflow-tooltip></el-table-column>
-        <el-table-column label="邮箱" prop="emailaddress" align="center" header-align="center"></el-table-column>
+        <el-table-column label="联系电话" prop="contactor_phone" align="center" header-align="center" min-width="130"></el-table-column>
-        <el-table-column label="客户地址" prop="address" align="center" header-align="center"></el-table-column>
+        <el-table-column label="邮箱" prop="emailaddress" align="center" header-align="center" min-width="180" show-overflow-tooltip></el-table-column>
-        <el-table-column label="客户类型" prop="type" align="center" header-align="center"></el-table-column>
+        <el-table-column label="客户地址" prop="address" align="center" header-align="center" min-width="180" show-overflow-tooltip></el-table-column>
-        <el-table-column label="交接人" prop="previous_sales" align="center" header-align="center"></el-table-column>
+        <el-table-column label="客户类型" prop="type" align="center" header-align="center" min-width="100"></el-table-column>
-        <el-table-column label="交接时间" prop="transfer_time" align="center" header-align="center"></el-table-column>
+        <el-table-column label="交接人" prop="previous_sales" align="center" header-align="center" min-width="100"></el-table-column>
-        <el-table-column label="操作" prop="" align="center" header-align="center">
+        <el-table-column label="交接时间" prop="transfer_time" align="center" header-align="center" min-width="120" sortable></el-table-column>
+        <el-table-column label="操作" align="center" header-align="center" min-width="120" fixed="right">
           <template slot-scope="scope">
-            <el-button size="small" type="primary" @click="lookBill(scope.row)">查看账单</el-button>
+            <el-button size="small" type="primary" @click="lookBill(scope.row)" class="action-btn">查看账单</el-button>
           </template>
         </el-table-column>
       </el-table>
+    </div>
 
     <!-- 查看账单弹窗 -->
-      <el-dialog title="查看账单" :visible.sync="lookBillVisible" width="70%"
+    <el-dialog
-                 style="height: calc(100vh - 0px);" fullscreen center
+      title="查看账单"
-                 class="dialog">
+      :visible.sync="lookBillVisible"
-        <div class="pagination">
+      width="85%"
-          <div class="two">
+      top="10px"
-            <div class="data">
+      class="bill-dialog"
-              <el-date-picker :picker-options="endPickerOpts" v-model="dataOne" type="date" placeholder="选择日期">
+      :close-on-click-modal="false">
+
+      <div class="bill-content">
+        <div class="filter-section">
+          <div class="date-filter">
+            <div class="filter-label">账单日期</div>
+            <el-date-picker
+              v-model="dataOne"
+              type="date"
+              placeholder="开始日期"
+              :picker-options="startPickerOpts"
+              class="date-input">
             </el-date-picker>
-              <span class="line">至</span>
+            <span class="date-separator">至</span>
-              <el-date-picker :picker-options="endPickerOpts" type="date" placeholder="选择日期"
+            <el-date-picker
-                              v-model="dataTwo"></el-date-picker>
+              v-model="dataTwo"
-            </div>
+              type="date"
-            <div class="button">
+              placeholder="结束日期"
-              <el-button size="small" type="primary" @click="onsubmit()">查询</el-button>
+              :picker-options="endPickerOpts"
+              class="date-input">
+            </el-date-picker>
+            <el-button
+              type="primary"
+              size="small"
+              @click="onsubmit()"
+              class="query-btn"
+              icon="el-icon-search">
+              查询
+            </el-button>
           </div>
         </div>
-          <el-table :data="billList" height="calc(100vh - 230px)">
+
-            <el-table-column label="产品名称" prop="productname" align="center" header-align="center">
+        <div class="bill-table-container">
+          <el-table
+            :data="billList"
+            height="calc(100vh - 280px)"
+            class="bill-table"
+            empty-text="暂无账单数据">
+            <el-table-column label="产品名称" prop="productname" align="center" header-align="center" min-width="150" show-overflow-tooltip></el-table-column>
+            <el-table-column label="账单号" prop="id" align="center" header-align="center" min-width="120"></el-table-column>
+            <el-table-column label="账单金额" prop="amount" align="center" header-align="center" min-width="120">
+              <template slot-scope="scope">
+                <span class="amount">¥{{ scope.row.amount || 0 }}</span>
+              </template>
             </el-table-column>
-            <el-table-column label="账单号" prop="id" align="center" header-align="center"></el-table-column>
+            <el-table-column label="账单日期" prop="bill_date" align="center" header-align="center" min-width="120"></el-table-column>
-            <el-table-column label="账单金额" prop="amount" align="center" header-align="center"></el-table-column>
+            <el-table-column label="账单状态" align="center" header-align="center" min-width="120">
-            <el-table-column label="账单日期" prop="bill_date" align="center" header-align="center"></el-table-column>
-            <el-table-column label="账单状态" prop="contactor_phone" align="center" header-align="center">
               <template slot-scope="scope">
                 <el-tag
                   :type="getBillstate(scope.row.bill_state * 1).type"
-                  effect="dark">
+                  :effect="getBillstate(scope.row.bill_state * 1).effect || 'light'"
+                  class="status-tag">
                   {{ getBillstate(scope.row.bill_state * 1).message }}
                 </el-tag>
               </template>
             </el-table-column>
-            <el-table-column label="购买状态" prop="productname" align="center" header-align="center">
+            <el-table-column label="购买状态" align="center" header-align="center" min-width="120">
-              <!--              <template slot-scope="scope">-->
+              <template slot-scope="scope">
-              <!--                {{ getBusinessOp(scope.row.business_op) }}-->
+                <el-tag
-              <!--              </template>-->
+                  :type="getBusinessOpType(scope.row.business_op)"
+                  effect="light"
+                  class="business-op-tag">
+                  {{ getBusinessOpText(scope.row.business_op) }}
+                </el-tag>
+              </template>
             </el-table-column>
           </el-table>
-          <el-pagination style="margin-top:20px;margin-left:30%" background @current-change="handleCurrentChange"
+        </div>
-                         :page-size="10" :pager-count="11" layout="prev, pager, next" :total='total'>
+
+        <div class="pagination-section">
+          <el-pagination
+            background
+            @current-change="handleCurrentChange"
+            :page-size="10"
+            :pager-count="7"
+            layout="total, prev, pager, next, jumper"
+            :total="total"
+            class="bill-pagination">
           </el-pagination>
         </div>
-      </el-dialog>
       </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -124,232 +195,390 @@ export default {
       currentRow: {},
       expands: [],
       lookBillVisible: false,
-      getRowKeys(row) {
-        return row.id;
-      },
-      tableData: {
-        address: "",
-        ak: "",
-        appId: "",
-        bankAcc: "",
-        bankName: "",
-        contact: "",
-        email: "",
-        fullName: "",
-        identityCode: "",
-        identityName: "",
-        name: "",
-        remark: "",
-        saleMgrEmail: "",
-        saleMgrName: "",
-        saleMgrTel: "",
-        saleorgname: "",
-        sk: "",
-        supId: 1,
-        taxAddress: "",
-        taxTel: "",
-        taxpayerIdentity: "",
-        tel: "",
-        thirdId: "",
-        userAc: "",
-        userPhone: "",
-        userid: "",
-      },
       current_page: 1,
       total: null,
       dataOne: null,
       dataTwo: null,
+      startPickerOpts: {
+        disabledDate: (time) => {
+          if (this.dataTwo) {
+            return time.getTime() > new Date(this.dataTwo).getTime();
+          }
+          return time.getTime() > Date.now();
+        }
+      },
       endPickerOpts: {
-        disabledDate(time) {
+        disabledDate: (time) => {
+          if (this.dataOne) {
+            return time.getTime() < new Date(this.dataOne).getTime() || time.getTime() > Date.now();
+          }
           return time.getTime() > Date.now();
         }
       },
     };
   },
   mounted() {
-    this.loading = true
+    this.loading = true;
     this.getuserList();
+
+    // 设置默认查询日期为最近一个月
+    const end = new Date();
+    const start = new Date();
+    start.setMonth(start.getMonth() - 1);
+    this.dataOne = start;
+    this.dataTwo = end;
   },
   methods: {
+    getRowKeys(row) {
+      return row.id;
+    },
     handleCurrentChange(index) {
-      this.current_page = index
+      this.current_page = index;
-      this.lookUp()
+      this.lookUp();
     },
     lookBill(row) {
-      this.currentRow = row
+      this.currentRow = row;
-      this.lookBillVisible = true
+      this.lookBillVisible = true;
-      this.lookUp()
+      this.lookUp();
     },
     lookUp(dataOne, dataTwo) {
       let params = {
         user_orgid: this.currentRow.id,
-        start_time: dataOne,
+        start_time: dataOne || this.dataOne,
-        end_time: dataTwo,
+        end_time: dataTwo || this.dataTwo,
         page_size: 10,
         current_page: this.current_page
-      }
+      };
+
       userGetbillAPI(params).then(res => {
-        console.log(res);
         if (res.status) {
           if (res.data.total_page != 0) {
-
+            this.billList = res.data.bill_list;
-            this.billList = res.data.bill_list
+            this.total = res.data.total_num;
-            this.total = res.data.total_num
           } else {
-            this.billList = []
+            this.billList = [];
-            this.total = 0
+            this.total = 0;
             this.$message({
               message: "暂无数据",
               type: 'warning'
-            })
+            });
           }
-
         } else {
           this.$message({
             message: res.msg,
             type: 'error'
-          })
+          });
         }
-      })
+      }).catch(error => {
+        this.$message({
+          message: "请求失败，请稍后重试",
+          type: 'error'
+        });
+        console.error(error);
+      });
     },
     onsubmit() {
       if (!this.dataOne || !this.dataTwo) {
         this.$message({
-          message: "请选择时间",
+          message: "请选择完整的时间范围",
           type: 'warning'
-        })
-      } else {
-        this.lookUp(this.dataOne, this.dataTwo)
-      }
-    },
-    expandChangeHandler(row, expandedRows) {// 点击展开的时候就会触发这个方法
-      var orgid = {
-        orgid: row.id,
-      };
-      getZJUserInfoAPI(orgid).then((res) => {
-        this.tableData = res.data;
         });
+        return;
+      }
+
+      if (this.dataOne > this.dataTwo) {
+        this.$message({
+          message: "开始日期不能大于结束日期",
+          type: 'warning'
+        });
+        return;
+      }
+
+      this.current_page = 1;
+      this.lookUp();
+    },
+    expandChangeHandler(row, expandedRows) {
       if (expandedRows.length) {
         this.expands = [];
         if (row) {
           this.expands.push(row.id);
+
+          // 如果该行还没有详情数据，则请求数据
+          if (!row.detailData) {
+            var orgid = {
+              orgid: row.id,
+            };
+            getZJUserInfoAPI(orgid).then((res) => {
+              // 使用 $set 确保响应式更新
+              this.$set(row, 'detailData', res.data);
+            }).catch(error => {
+              console.error("获取客户详情失败:", error);
+              // 即使请求失败，也设置一个空对象避免重复请求
+              this.$set(row, 'detailData', {});
+            });
+          }
         }
       } else {
         this.expands = [];
       }
     },
-
+    getuserList() {
-    getuserList() {//获取所有客户
       var userid = {
         userid: sessionStorage.getItem("userId"),
-        // kv: "zj",
       };
       getZJsaleGetUsersAPI(userid).then((res) => {
-        this.loading = false
+        this.loading = false;
         this.userList = res.data;
+      }).catch(error => {
+        this.loading = false;
+        console.error("获取客户列表失败:", error);
+        this.$message({
+          message: "获取客户列表失败",
+          type: 'error'
+        });
       });
-    },
-
-    open4(str) {  //错误提示
-      this.$message.error(str);
-    },
-    getBusinessOp(data) {
-      switch (data) {
-        case 'BUY':
-          return "购买";
-        case 'RECHARGE':
-          return "充值";
-        case 'RECHARGE_ALIPAY':
-          return "支付宝充值";
-        case 'REFUND':
-          return "退款";
-      }
     },
     getBillstate(data) {
       switch (data) {
         case 0:
           return {
             message: '未支付',
-            type: 'info'
+            type: 'warning'
           };
         case 1:
           return {
             message: '已支付',
             type: 'success'
-          }
+          };
         case 2:
           return {
             message: '已取消',
             type: 'info'
-          }
+          };
         case null:
           return {
             message: '已取消',
             type: 'info'
-          }
+          };
         default:
           return {
             message: '未知',
             type: 'info'
-          }
+          };
       }
     },
-
+    // 获取购买状态文本
+    getBusinessOpText(businessOp) {
+      switch (businessOp) {
+        case 'BUY':
+          return '购买';
+        case 'BUY_REVERSE':
+          return '退费';
+        case 'RECHARGE ':
+          return '续费';
+        default:
+          return businessOp || '--';
+      }
+    },
+    // 获取购买状态标签类型
+    getBusinessOpType(businessOp) {
+      switch (businessOp) {
+        case 'BUY':
+          return 'success';
+        case 'BUY_REVERSE':
+          return 'danger';
+        case 'RENEW':
+          return 'primary';
+        default:
+          return 'info';
+      }
+    }
   },
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
-#box {
+.customer-management-container {
-  min-width: 800px;
+  padding: 20px;
+  background-color: #f5f7fa;
+  min-height: calc(100vh - 40px);
   box-sizing: border-box;
-  /* overflow: scroll; */
+
-  .dialog {
+  .table-container {
-    height: 100%;
+    background: #fff;
-    // position: relative;
+    border-radius: 8px;
-    .pagination {
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-      .two {
+    overflow: hidden;
+
+    .customer-table {
+      ::v-deep .el-table__expanded-cell {
+        padding: 0;
+      }
+
+      .action-btn {
+        border-radius: 4px;
+      }
+    }
+  }
+
+  .customer-detail-panel {
+    padding: 20px;
+    background: #f9fafc;
+
+    .detail-title {
+      margin: 0 0 16px 0;
+      font-size: 16px;
+      color: #303133;
+      font-weight: 600;
+      border-bottom: 1px solid #e6e8eb;
+      padding-bottom: 10px;
+    }
+
+    .detail-grid {
+      .detail-item {
+        margin-bottom: 16px;
         display: flex;
-        flex-direction: row;
+        flex-direction: column;
 
-        .data {
+        .detail-label {
-          line-height: 50px;
+          font-size: 13px;
-          height: 50px;
+          color: #909399;
+          margin-bottom: 4px;
+          font-weight: 500;
+        }
+
+        .detail-value {
+          font-size: 14px;
+          color: #606266;
+          word-break: break-all;
+        }
+      }
+    }
+  }
+
+  .bill-dialog {
+    ::v-deep .el-dialog {
+      border-radius: 8px;
+      overflow: hidden;
+
+      .el-dialog__header {
+        background: #f5f7fa;
+        padding: 15px 20px;
+        border-bottom: 1px solid #e6e8eb;
+
+        .el-dialog__title {
+          font-weight: 600;
+          color: #303133;
+        }
+      }
+
+      .el-dialog__body {
+        padding: 0;
+      }
+    }
+
+    .bill-content {
+      padding: 20px;
+
+      .filter-section {
+        margin-bottom: 20px;
+        padding-bottom: 15px;
+        border-bottom: 1px solid #e6e8eb;
+
+        .date-filter {
           display: flex;
-          flex-direction: row;
+          align-items: center;
 
-          .line {
+          .filter-label {
-            margin-left: 5px;
+            margin-right: 10px;
-            margin-right: 5px;
+            font-weight: 500;
-          }
+            color: #606266;
           }
 
-        .button {
+          .date-input {
-          margin-top: 10px;
+            width: 160px;
-          margin-left: 15px
-        }
           }
 
+          .date-separator {
+            margin: 0 10px;
+            color: #909399;
+          }
+
+          .query-btn {
+            margin-left: 15px;
+            border-radius: 4px;
           }
         }
       }
 
-.demo-table-expand {
+      .bill-table-container {
-  font-size: 0;
+        .bill-table {
+          .amount {
+            font-weight: 600;
+            color: #f56c6c;
           }
 
-.demo-table-expand label {
+          .status-tag {
-  width: 90px;
+            border-radius: 12px;
-  color: #99a9bf;
+            padding: 0 10px;
+            height: 24px;
+            line-height: 24px;
           }
 
-.demo-table-expand .el-form-item {
+          .business-op-tag {
-  margin-right: 0;
+            border-radius: 12px;
-  margin-bottom: 0;
+            padding: 0 10px;
-  width: 40%;
+            height: 24px;
+            line-height: 24px;
+          }
+        }
       }
 
-.el-form-item__label {
+      .pagination-section {
-  width: 140px !important;
+        margin-top: 20px;
+        display: flex;
+        justify-content: center;
+
+        .bill-pagination {
+          ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
+            background-color: #409eff;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 响应式调整
+@media (max-width: 768px) {
+  .customer-management-container {
+    padding: 10px;
+
+    .bill-dialog {
+      width: 95% !important;
+
+      .bill-content {
+        .filter-section {
+          .date-filter {
+            flex-wrap: wrap;
+
+            .filter-label {
+              width: 100%;
+              margin-bottom: 10px;
+            }
+
+            .date-input {
+              width: calc(50% - 25px);
+            }
+
+            .query-btn {
+              width: 100%;
+              margin: 15px 0 0 0;
+            }
+          }
+        }
+      }
+    }
+  }
 }
 </style>