1、优化绑定页面

src/views/company/companyUser/profile/index.vue

@@ -1,89 +1,134 @@
 <template>
   <div class="app-container">
     <el-row :gutter="20">
+      <!-- 左侧个人信息卡片 - 优化样式 -->
       <el-col :span="6" :xs="24">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>个人信息</span>
+        <el-card class="profile-card" shadow="hover">
+          <div slot="header" class="card-header">
+            <span><i class="el-icon-user"></i> 个人信息</span>
           </div>
-          <div>
-            <div class="text-center">
-              <userAvatar :user="user" />
-            </div>
-            <ul class="list-group list-group-striped">
-              <li class="list-group-item">
-                <svg-icon icon-class="user" />用户名称
-                <div class="pull-right">{{ user.userName }}</div>
-              </li>
-              <li class="list-group-item">
-                <svg-icon icon-class="phone" />手机号码
-                <div class="pull-right">{{ user.phonenumber }}</div>
-              </li>
-              <li class="list-group-item">
-                <svg-icon icon-class="email" />用户邮箱
-                <div class="pull-right">{{ user.email }}</div>
-              </li>
-              <li class="list-group-item">
-                <svg-icon icon-class="tree" />所属部门
-                <div class="pull-right" v-if="user.dept">{{ user.dept.deptName }} / {{ postGroup }}</div>
-              </li>
-              <li class="list-group-item">
-                <svg-icon icon-class="peoples" />所属角色
-                <div class="pull-right">{{ roleGroup }}</div>
-              </li>
-              <li class="list-group-item">
-                <svg-icon icon-class="date" />创建日期
-                <div class="pull-right">{{ user.createTime }}</div>
-              </li>
-            </ul>
-            <div class="text-center" style="margin-top: 20px;">
-              <el-button
-                size="mini"
-                type="primary"
-                icon="el-icon-user"
-                @click="handleBindMember"
-                v-if="!user.fsUserId"
-              >绑定会员</el-button>
-
-              <div v-if="user.fsUserIdArray && user.fsUserIdArray.length > 0" style="margin-top: 10px;">
-                <el-tag type="success">已绑定会员</el-tag>
-                <div style="margin-top: 10px;">
-                  <div
-                    v-for="(fsUserId, index) in user.fsUserIdArray"
-                    :key="index"      style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;"
-                  >
-                    <span style="font-size: 12px; color: #666;">会员ID: {{ fsUserId }}</span>
-                    <el-button
-                      size="mini"
-                      type="danger"
-                      icon="el-icon-delete"
-                      @click="handleUnbindSpecificMember(fsUserId)"
-                    >
-                      解绑
-                    </el-button>
-                  </div>
+
+          <!-- 头像区域 -->
+          <div class="avatar-section">
+            <userAvatar :user="user" />
+            <h3 class="user-name">{{ user.userName || '--' }}</h3>
+          </div>
+
+          <!-- 信息列表 - 优化样式 -->
+          <ul class="info-list">
+            <li class="info-item">
+              <span class="info-label">
+                <svg-icon icon-class="user" />
+                用户名称
+              </span>
+              <span class="info-value">{{ user.userName || '--' }}</span>
+            </li>
+            <li class="info-item">
+              <span class="info-label">
+                <svg-icon icon-class="phone" />
+                手机号码
+              </span>
+              <span class="info-value">{{ user.phonenumber || '--' }}</span>
+            </li>
+            <li class="info-item">
+              <span class="info-label">
+                <svg-icon icon-class="email" />
+                用户邮箱
+              </span>
+              <span class="info-value">{{ user.email || '--' }}</span>
+            </li>
+            <li class="info-item">
+              <span class="info-label">
+                <svg-icon icon-class="tree" />
+                所属部门
+              </span>
+              <span class="info-value" v-if="user.dept">
+                {{ user.dept.deptName }} / {{ postGroup }}
+              </span>
+              <span class="info-value" v-else>--</span>
+            </li>
+            <li class="info-item">
+              <span class="info-label">
+                <svg-icon icon-class="peoples" />
+                所属角色
+              </span>
+              <span class="info-value">{{ roleGroup || '--' }}</span>
+            </li>
+            <li class="info-item">
+              <span class="info-label">
+                <svg-icon icon-class="date" />
+                创建日期
+              </span>
+              <span class="info-value">{{ user.createTime || '--' }}</span>
+            </li>
+          </ul>
+
+          <!-- 操作区域 - 优化布局 -->
+          <div class="action-section">
+            <!-- 绑定会员按钮 -->
+            <el-button
+              v-if="!user.fsUserId"
+              type="primary"
+              icon="el-icon-user"
+              @click="handleBindMember"
+              class="action-btn"
+              :loading="bindLoading"
+            >绑定会员</el-button>
+
+            <!-- 已绑定会员列表 -->
+            <div v-if="user.fsUserIdArray && user.fsUserIdArray.length > 0" class="bound-members">
+              <div class="bound-header">
+                <el-tag type="success" effect="dark" size="small">已绑定会员</el-tag>
+                <span class="bound-count">{{ user.fsUserIdArray.length }}个</span>
+              </div>
+              <div class="member-list">
+                <div
+                  v-for="(fsUserId, index) in user.fsUserIdArray"
+                  :key="index"
+                  class="member-item"
+                >
+                  <span class="member-id">
+                    <i class="el-icon-user-solid"></i>
+                    {{ fsUserId }}
+                  </span>
+                  <el-button
+                    size="mini"
+                    type="danger"
+                    icon="el-icon-delete"
+                    @click="handleUnbindSpecificMember(fsUserId)"
+                    circle
+                    title="解绑"
+                  ></el-button>
                 </div>
               </div>
             </div>
-            <div class="text-center" style="margin-top: 20px;" v-if="needWxTemplateMsg">
-              <div v-if="user.wechatBindStatus">
-                <el-tag type="success">已绑定服务号通知</el-tag>
-              </div>
-              <div v-else>
-                <el-button type="primary" @click="openWechatBindDialog">
-                  订阅服务号通知
-                </el-button>
+
+            <!-- 微信服务号绑定 -->
+            <div v-if="needWxTemplateMsg" class="wechat-section">
+              <div v-if="user.wechatBindStatus" class="wechat-bound">
+                <el-tag type="success" effect="dark" size="small">
+                  <i class="el-icon-wechat"></i> 已绑定服务号通知
+                </el-tag>
               </div>
+              <el-button
+                v-else
+                type="primary"
+                @click="openWechatBindDialog"
+                icon="el-icon-wechat"
+                class="wechat-btn"
+              >订阅服务号通知</el-button>
             </div>
           </div>
         </el-card>
       </el-col>
+
+      <!-- 右侧内容 - 优化样式 -->
       <el-col :span="18" :xs="24">
-        <el-card>
-          <div slot="header" class="clearfix">
-            <span>基本资料</span>
+        <el-card class="content-card" shadow="hover">
+          <div slot="header" class="card-header">
+            <span><i class="el-icon-edit-outline"></i> 基本资料</span>
           </div>
-          <el-tabs v-model="activeTab">
+          <el-tabs v-model="activeTab" class="profile-tabs">
             <el-tab-pane label="基本资料" name="userinfo">
               <userInfo :user="user" />
             </el-tab-pane>
@@ -95,87 +140,196 @@
       </el-col>
     </el-row>
 
-    <!-- 绑定会员对话框 -->
-    <el-dialog  v-if="member && member.hasOwnProperty('title')" :title="member.title" :visible.sync="member.open" width="600px" append-to-body>
-      <!-- 添加筛选表单 -->
-      <el-form :model="memberQueryParams" :inline="true" @submit.native.prevent>
-        <el-form-item label="会员ID">
-          <el-input
-            v-model="memberQueryParams.userId"
-            placeholder="请输入会员ID"
-            clearable      style="width: 160px;"
-            @keyup.enter.native="handleMemberQuery"
-          />
-        </el-form-item>
-        <el-form-item label="昵称">
-          <el-input
-            v-model="memberQueryParams.nickName"
-            placeholder="请输入昵称"
-            clearable            style="width: 160px;"
-            @keyup.enter.native="handleMemberQuery"
-          />
-        </el-form-item>
-        <el-form-item label="手机号">
-          <el-input
-            v-model="memberQueryParams.phone"
-            placeholder="请输入手机号"
-            clearable            style="width: 160px;"
-            @keyup.enter.native="handleMemberQuery"
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button icon="el-icon-search" size="mini" @click="handleMemberQuery">搜索</el-button>
-          <el-button icon="el-icon-refresh" size="mini" @click="resetMemberQuery">重置</el-button>
-        </el-form-item>
-      </el-form>
-
-      <div style="height: 300px; margin-top: 10px;">
+    <!-- 绑定会员对话框 - 优化样式，无背景色 -->
+    <el-dialog
+      v-if="member && member.hasOwnProperty('title')"
+      :title="member.title"
+      :visible.sync="member.open"
+      width="800px"
+      append-to-body
+      class="bind-member-dialog"
+      :close-on-click-modal="false"
+      @open="handleDialogOpen"
+    >
+      <!-- 筛选表单 - 无背景色，优化排版 -->
+      <div class="filter-container">
+        <el-row :gutter="16" class="filter-row" type="flex" align="middle">
+          <el-col :span="6">
+            <el-input
+              v-model="memberQueryParams.userId"
+              placeholder="会员ID"
+              clearable
+              @keyup.enter="handleMemberQuery"
+              size="small"
+              prefix-icon="el-icon-user"
+            />
+          </el-col>
+          <el-col :span="6">
+            <el-input
+              v-model="memberQueryParams.nickName"
+              placeholder="昵称"
+              clearable
+              @keyup.enter="handleMemberQuery"
+              size="small"
+              prefix-icon="el-icon-user"
+            />
+          </el-col>
+          <el-col :span="6">
+            <el-input
+              v-model="memberQueryParams.phone"
+              placeholder="手机号"
+              clearable
+              @keyup.enter="handleMemberQuery"
+              size="small"
+              prefix-icon="el-icon-phone"
+            />
+          </el-col>
+          <el-col :span="6" class="filter-buttons">
+            <el-button
+              type="primary"
+              icon="el-icon-search"
+              @click="handleMemberQuery"
+              size="small"
+              :loading="loading"
+            >搜索</el-button>
+            <el-button
+              icon="el-icon-refresh"
+              @click="resetMemberQuery"
+              size="small"
+            >重置</el-button>
+          </el-col>
+        </el-row>
+      </div>
+
+      <!-- 表格区域 -->
+      <div class="table-section">
         <el-table
           :data="memberList"
-          height="220"
+          height="300"
           highlight-current-row
           @current-change="selectMember"
           v-loading="loading"
+          border
+          stripe
+          size="small"
+          class="member-table"
         >
-          <el-table-column property="userId" label="ID" width="80"></el-table-column>
-          <el-table-column property="nickName" label="昵称" width="120"></el-table-column>
-          <el-table-column property="phone" label="手机号" width="120"></el-table-column>
-          <el-table-column property="status" label="绑定状态" width="100">
+          <el-table-column
+            property="userId"
+            label="ID"
+            width="70"
+            align="center"
+          ></el-table-column>
+
+          <el-table-column
+            property="nickName"
+            label="昵称"
+            min-width="130"
+            show-overflow-tooltip
+          >
+            <template slot-scope="scope">
+              <span class="nickname-cell">
+                <i class="el-icon-user"></i>
+                {{ scope.row.nickName || '--' }}
+              </span>
+            </template>
+          </el-table-column>
+
+          <el-table-column
+            property="phone"
+            label="手机号"
+            width="130"
+            align="center"
+          >
+            <template slot-scope="scope">
+              <span v-if="scope.row.phone" class="phone-cell">
+                <i class="el-icon-phone"></i>
+                {{ scope.row.phone }}
+              </span>
+              <span v-else class="no-data">--</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column
+            property="status"
+            label="绑定状态"
+            width="100"
+            align="center"
+          >
             <template slot-scope="scope">
               <el-tag
                 :type="scope.row.status === 1 ? 'success' : 'info'"
-                size="mini">
+                size="small"
+                effect="light"
+                class="status-tag"
+              >
+                <i :class="scope.row.status === 1 ? 'el-icon-check' : 'el-icon-close'"></i>
                 {{ scope.row.status === 1 ? '已绑定' : '未绑定' }}
               </el-tag>
             </template>
           </el-table-column>
         </el-table>
-        <!-- 分页组件 -->
-        <pagination
-          v-show="memberTotal > 0"
-          :total="memberTotal"
-          :page.sync="memberQueryParams.pageNum"
-          :limit.sync="memberQueryParams.pageSize"
-          @pagination="getMemberList"          style="margin-top: 10px; text-align: center;"
-        />
+
+        <!-- 分页组件 - 支持每页条数选择 -->
+        <div class="pagination-wrapper" v-if="memberTotal > 0">
+          <pagination
+            :total="memberTotal"
+            :page.sync="memberQueryParams.pageNum"
+            :limit.sync="memberQueryParams.pageSize"
+            @pagination="getMemberList"
+            :page-sizes="[10, 20, 50,100,500]"
+            :layout="'total, sizes, prev, pager, next, jumper'"
+            class="custom-pagination"
+          />
+        </div>
+
+        <!-- 空数据提示 -->
+        <div v-if="!loading && memberList.length === 0" class="empty-data">
+          <i class="el-icon-info"></i>
+          <span>暂无会员数据</span>
+        </div>
       </div>
+
+      <!-- 底部按钮 -->
       <div slot="footer" class="dialog-footer">
-        <el-button @click="cancelBindMember">取 消</el-button>
-        <el-button type="primary" @click="confirmBindMember">确 定</el-button>
+        <div class="selected-info" v-if="selectedMember">
+          <i class="el-icon-success" style="color: #67C23A;"></i>
+          已选中：{{ selectedMember.nickName || selectedMember.userId }}
+        </div>
+        <div class="action-buttons">
+          <el-button @click="cancelBindMember" size="medium">取 消</el-button>
+          <el-button
+            type="primary"
+            @click="confirmBindMember"
+            size="medium"
+            :disabled="!selectedMember"
+            :loading="confirmLoading"
+          >确 定</el-button>
+        </div>
       </div>
     </el-dialog>
+
+    <!-- 微信绑定对话框 - 优化样式 -->
     <el-dialog
       title="订阅服务号通知"
       :visible.sync="bindDialogVisible"
-      width="360px"
+      width="400px"
       :close-on-click-modal="false"
+      class="wechat-dialog"
     >
-      <div class="text-center">
-        <img v-if="wechatQrcode" :src="wechatQrcode" style="width: 260px; height: 260px;" />
-        <p style="margin-top: 10px;">请使用微信扫码绑定服务号通知</p>
+      <div class="qrcode-container">
+        <img v-if="wechatQrcode" :src="wechatQrcode" class="qrcode-img" />
+        <div class="qrcode-loading" v-else>
+          <i class="el-icon-loading"></i>
+          <span>二维码加载中...</span>
+        </div>
+        <p class="qrcode-tip">
+          <i class="el-icon-wechat"></i>
+          请使用微信扫码绑定服务号通知
+        </p>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="bindDialogVisible = false">关闭</el-button>
+        <el-button @click="bindDialogVisible = false" size="medium">关 闭</el-button>
       </span>
     </el-dialog>
   </div>
@@ -187,6 +341,7 @@ import userInfo from "./userInfo";
 import resetPwd from "./resetPwd";
 import { getUserProfile,getSaleBindUserList, bindSaleAndFsUser, unbindSaleAndFsUser } from "@/api/company/companyUser";
 import { getWechatBindQrcode, checkWechatBindStatus } from "@/api/wechat";
+
 export default {
   name: "Profile",
   components: { userAvatar, userInfo, resetPwd },
@@ -200,6 +355,8 @@ export default {
       wechatQrcode: "",
       wechatBindTimer: null,
       needWxTemplateMsg: false,
+      bindLoading: false,
+      confirmLoading: false,
       // 绑定会员相关数据
       member: {
         open: false,
@@ -240,48 +397,35 @@ export default {
         }
       });
     },
-    /**
-     * 绑定会员按钮操作
-     */
+
+    handleDialogOpen() {
+      this.selectedMember = null;
+      this.getMemberList();
+    },
+
     handleBindMember() {
-      // 设置当前用户的ID
       this.currentCompanyId = this.user.userId;
-      // 重置筛选参数
-      this.memberQueryParams = {
-        nickName: null,
-        phone: null,
-        pageNum: 1,    // 重置为第一页
-        pageSize: 10   // 保持每页数量
-      };
+      this.resetMemberQuery();
       this.selectedMember = null;
       this.member.open = true;
-      this.getMemberList();
     },
 
-    /**
-     * 解绑指定会员
-     * @param {string} fsUserId - 要解绑的会员ID
-     */
     handleUnbindSpecificMember(fsUserId) {
-      // 弹出确认框
       this.$confirm(`确定要解除与会员 ${fsUserId} 的绑定吗？`, "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning"
       })
         .then(() => {
-          // 构造解绑参数
           const unbindData = {
-            companyUserId: this.user.userId, // 销售ID
-            userId: fsUserId                 // 会员ID
+            companyUserId: this.user.userId,
+            userId: fsUserId
           };
 
-          // 调用解绑接口
           unbindSaleAndFsUser(unbindData)
             .then(response => {
               if (response.code === 200) {
                 this.$message.success("解绑成功");
-                // 刷新用户信息
                 this.getUser();
               } else {
                 this.$message.error(response.msg || "解绑失败");
@@ -296,12 +440,9 @@ export default {
           this.$message.info("已取消解绑");
         });
     },
-    /**
-     * 获取会员列表
-     */
+
     getMemberList() {
       this.loading = true;
-      // 调用指定的接口获取会员列表
       getSaleBindUserList({
         pageNum: this.memberQueryParams.pageNum,
         pageSize: this.memberQueryParams.pageSize,
@@ -322,17 +463,11 @@ export default {
         });
     },
 
-    /**
-     * 会员搜索按钮操作
-     // */
     handleMemberQuery() {
       this.memberQueryParams.pageNum = 1;
       this.getMemberList();
     },
 
-    /**
-     * 会员重置按钮操作
-     */
     resetMemberQuery() {
       this.memberQueryParams = {
         nickName: null,
@@ -344,50 +479,41 @@ export default {
       this.getMemberList();
     },
 
-    /**
-     * 选择会员
-     */
     selectMember(member) {
-      if (member) {
-        this.selectedMember = member;
-      }
+      this.selectedMember = member;
     },
 
-    /**
-     * 确认绑定会员
-     */
     confirmBindMember() {
       if (!this.selectedMember) {
         this.$message.warning('请选择要绑定的会员');
         return;
       }
 
-      // 这里需要根据实际接口调整参数
+      this.confirmLoading = true;
       const bindData = {
         companyUserId: this.currentCompanyId,
-        userId: this.selectedMember.userId // 使用实际的用户ID字段
+        userId: this.selectedMember.userId
       };
 
-      // 发起绑定请求
-      bindSaleAndFsUser(bindData).then(response => {
-        if (response.code === 200) {
-          this.$message.success('绑定会员成功');
-          this.cancelBindMember();
-          // 刷新用户信息
-          this.getUser();
-        } else {
-          this.$message.error(response.msg || '绑定失败');
-        }
-      })
+      bindSaleAndFsUser(bindData)
+        .then(response => {
+          if (response.code === 200) {
+            this.$message.success('绑定会员成功');
+            this.cancelBindMember();
+            this.getUser();
+          } else {
+            this.$message.error(response.msg || '绑定失败');
+          }
+        })
         .catch(error => {
           console.error('绑定会员失败:', error);
           this.$message.error('绑定会员失败');
+        })
+        .finally(() => {
+          this.confirmLoading = false;
         });
     },
 
-    /**
-     * 取消绑定会员
-     */
     cancelBindMember() {
       this.member.open = false;
       this.memberList = [];
@@ -395,19 +521,22 @@ export default {
       this.currentCompanyId = null;
       this.memberQueryParams = {
         nickName: null,
-        phone: null
+        phone: null,
+        userId: null,
+        pageNum: 1,
+        pageSize: 10
       };
     },
+
     openWechatBindDialog() {
       getWechatBindQrcode().then(res => {
-        console.log(res)
         this.wechatQrcode = res.data.qrcodeUrl;
         this.bindDialogVisible = true;
         this.startCheckWechatBind(res.data.sceneId);
       });
     },
+
     startCheckWechatBind(sceneId) {
-      // 清除旧定时器
       if (this.wechatBindTimer) clearInterval(this.wechatBindTimer);
 
       this.wechatBindTimer = setInterval(() => {
@@ -416,7 +545,7 @@ export default {
             this.$message.success("绑定成功！");
             clearInterval(this.wechatBindTimer);
             this.bindDialogVisible = false;
-            this.getUser(); // 刷新绑定状态
+            this.getUser();
           }
         });
       }, 2000);
@@ -427,3 +556,371 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+/* 个人信息卡片样式 */
+.profile-card {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.profile-card :deep(.el-card__header) {
+  padding: 15px 20px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-bottom: none;
+}
+
+.card-header {
+  color: white;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+}
+
+.card-header i {
+  margin-right: 8px;
+  font-size: 16px;
+}
+
+/* 头像区域 */
+.avatar-section {
+  text-align: center;
+  padding: 24px 20px 16px;
+  background: linear-gradient(135deg, #667eea10 0%, #764ba210 100%);
+}
+
+.user-name {
+  margin: 12px 0 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+}
+
+/* 信息列表 */
+.info-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 20px;
+  border-bottom: 1px solid #f0f0f0;
+  transition: background-color 0.3s;
+}
+
+.info-item:hover {
+  background-color: #f5f7fa;
+}
+
+.info-item:last-child {
+  border-bottom: none;
+}
+
+.info-label {
+  color: #606266;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+}
+
+.info-label svg {
+  margin-right: 8px;
+  width: 16px;
+  height: 16px;
+  color: #909399;
+}
+
+.info-value {
+  color: #303133;
+  font-weight: 500;
+  font-size: 14px;
+}
+
+/* 操作区域 */
+.action-section {
+  padding: 20px;
+  background-color: #fafbfc;
+  border-top: 1px solid #e4e7ed;
+}
+
+.action-btn {
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+/* 已绑定会员列表 */
+.bound-members {
+  margin-top: 16px;
+}
+
+.bound-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.bound-count {
+  font-size: 12px;
+  color: #909399;
+  background-color: #f0f2f5;
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+
+.member-list {
+  max-height: 200px;
+  overflow-y: auto;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  background-color: white;
+}
+
+.member-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  border-bottom: 1px solid #f0f0f0;
+  transition: background-color 0.3s;
+}
+
+.member-item:hover {
+  background-color: #f5f7fa;
+}
+
+.member-item:last-child {
+  border-bottom: none;
+}
+
+.member-id {
+  font-size: 13px;
+  color: #606266;
+  display: flex;
+  align-items: center;
+}
+
+.member-id i {
+  margin-right: 6px;
+  color: #409EFF;
+}
+
+/* 微信服务号区域 */
+.wechat-section {
+  margin-top: 16px;
+}
+
+.wechat-bound {
+  text-align: center;
+}
+
+.wechat-btn {
+  width: 100%;
+}
+
+/* 右侧卡片样式 */
+.content-card {
+  border-radius: 8px;
+}
+
+.content-card :deep(.el-card__header) {
+  padding: 15px 20px;
+  background-color: #fafbfc;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+/* 绑定会员对话框样式 - 无背景色 */
+.bind-member-dialog :deep(.el-dialog__body) {
+  padding: 20px 24px;
+}
+
+/* 筛选表单 - 无背景色，优化排版 */
+.filter-container {
+  margin-bottom: 16px;
+  padding: 0 4px;
+}
+
+.filter-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.filter-buttons {
+  text-align: right;
+  white-space: nowrap;
+}
+
+.filter-buttons .el-button {
+  margin-left: 8px;
+}
+
+.filter-buttons .el-button:first-child {
+  margin-left: 0;
+}
+
+/* 表格区域 */
+.table-section {
+  border: 1px solid #e4e7ed;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.member-table :deep(th) {
+  background-color: #f2f6fc;
+  color: #303133;
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.status-tag {
+  min-width: 70px;
+}
+
+.status-tag i {
+  margin-right: 4px;
+}
+
+.nickname-cell, .phone-cell {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.nickname-cell i, .phone-cell i {
+  color: #909399;
+  font-size: 12px;
+}
+
+.no-data {
+  color: #c0c4cc;
+}
+
+/* 分页样式 - 支持每页条数选择 */
+.pagination-wrapper {
+  padding: 16px;
+  background-color: #ffffff;
+  border-top: 1px solid #e4e7ed;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.custom-pagination :deep(.el-pagination) {
+  padding: 0;
+}
+
+.custom-pagination :deep(.el-pagination__sizes) {
+  margin-right: 16px;
+}
+
+.empty-data {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 0;
+  color: #909399;
+  background-color: #ffffff;
+}
+
+.empty-data i {
+  font-size: 40px;
+  margin-bottom: 8px;
+  color: #dcdfe6;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 10px;
+}
+
+.selected-info {
+  font-size: 13px;
+  color: #606266;
+  background-color: #f0f9eb;
+  padding: 6px 12px;
+  border-radius: 4px;
+  border: 1px solid #e1f3d8;
+}
+
+/* 微信对话框样式 */
+.wechat-dialog :deep(.el-dialog__body) {
+  padding: 30px 20px;
+}
+
+.qrcode-container {
+  text-align: center;
+}
+
+.qrcode-img {
+  width: 260px;
+  height: 260px;
+  border: 1px solid #e4e7ed;
+  padding: 10px;
+  border-radius: 8px;
+  background-color: white;
+}
+
+.qrcode-loading {
+  width: 260px;
+  height: 260px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f7fa;
+  border-radius: 8px;
+  color: #909399;
+}
+
+.qrcode-loading i {
+  font-size: 32px;
+  margin-bottom: 10px;
+}
+
+.qrcode-tip {
+  margin-top: 16px;
+  color: #606266;
+  font-size: 14px;
+}
+
+.qrcode-tip i {
+  color: #07C160;
+  margin-right: 6px;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .filter-container .el-col {
+    width: 100%;
+    margin-bottom: 8px;
+  }
+
+  .filter-buttons {
+    text-align: left;
+    margin-top: 8px;
+  }
+
+  .filter-buttons .el-button {
+    margin-left: 0;
+    margin-right: 8px;
+  }
+
+  .dialog-footer {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .selected-info {
+    width: 100%;
+    text-align: center;
+  }
+}
+</style>