diff --git a/src/pages.json b/src/pages.json
index e4c280b..051ec05 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -108,6 +108,96 @@
         "navigationStyle": "custom"
       }
     },
+    {
+      "path": "pages/distribution/data",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/distribution/profit-rule",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/distribution/qrcode",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/account/manage",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/account/quota",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/account/log",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/account/personal",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/student/list",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/student/analysis",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/student/remind",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/member/order",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/member/gift",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/member/general-code",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/member/personal-order",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/member/personal-gift",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
     {
       "path": "pages/mine/school-info",
       "style": {
@@ -167,6 +257,30 @@
       "style": {
         "navigationStyle": "custom"
       }
+    },
+    {
+      "path": "pages/stats/distribution",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/stats/member",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/stats/student",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/student/detail",
+      "style": {
+        "navigationStyle": "custom"
+      }
     }
   ],
   "tabBar": {
diff --git a/src/pages/account/log.vue b/src/pages/account/log.vue
new file mode 100644
index 0000000..77c7590
--- /dev/null
+++ b/src/pages/account/log.vue
@@ -0,0 +1,490 @@
+<template>
+  <view class="log-manage-container">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <view class="header-left" @click="goBack">
+        <view class="back-icon">←</view>
+      </view>
+      <view class="header-title">操作日志查看</view>
+      <view class="header-right" @click="exportLog">
+        <view class="export-btn">导出</view>
+      </view>
+    </view>
+    
+    <!-- 筛选条件 -->
+    <view class="filter-section">
+      <view class="filter-row">
+        <view class="filter-item">
+          <view class="filter-label">操作类型</view>
+          <view class="filter-control">
+            <picker 
+              :range="operationOptions" 
+              :value="operationIndex"
+              @change="onOperationChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ operationOptions[operationIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="filter-item">
+          <view class="filter-label">时间范围</view>
+          <view class="filter-control">
+            <picker 
+              mode="date"
+              start="2026-01-01"
+              end="2026-12-31"
+              :value="dateRange"
+              @change="onDateChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ dateRangeDisplay }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="filter-item">
+          <view class="filter-label">搜索</view>
+          <view class="filter-control">
+            <input 
+              v-model="searchKeyword" 
+              class="search-input"
+              placeholder="请输入操作人或账号"
+              @input="onSearch"
+            />
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 日志列表 -->
+    <view class="log-list">
+      <view 
+        v-for="(log, index) in logList" 
+        :key="index"
+        class="log-item"
+      >
+        <view class="log-header">
+          <view class="log-time">{{ log.time }}</view>
+          <view class="log-status" :class="log.statusClass">{{ log.status }}</view>
+        </view>
+        <view class="log-content">
+          <view class="log-operation">{{ log.operation }}</view>
+          <view class="log-detail">{{ log.detail }}</view>
+        </view>
+        <view class="log-meta">
+          <view class="log-operator">{{ log.operator }}</view>
+          <view class="log-ip">{{ log.ip }}</view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 空状态 -->
+    <view v-if="logList.length === 0" class="empty-state">
+      <view class="empty-icon">📋</view>
+      <view class="empty-text">暂无操作日志</view>
+    </view>
+    
+    <!-- 分页 -->
+    <view v-if="logList.length > 0" class="pagination">
+      <view class="page-info">
+        共 {{ totalLogs }} 条，当前第 {{ currentPage }} 页
+      </view>
+      <view class="page-controls">
+        <view 
+          class="page-btn" 
+          :class="{ disabled: currentPage === 1 }"
+          @click="goToPage(currentPage - 1)"
+        >
+          上一页
+        </view>
+        <view 
+          class="page-btn" 
+          :class="{ disabled: currentPage === totalPages }"
+          @click="goToPage(currentPage + 1)"
+        >
+          下一页
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { ref, computed, onMounted } from "vue"
+
+  // 操作类型选项
+  const operationOptions = ['全部', '账号创建', '账号冻结', '账号启用', '密码修改', '权限变更']
+  const operationIndex = ref(0)
+  
+  // 日期范围
+  const dateRange = ref('2026-01-29')
+  const dateRangeDisplay = ref('2026-01-29')
+  
+  // 搜索关键词
+  const searchKeyword = ref('')
+  
+  // 日志列表
+  const logList = ref([
+    {
+      id: 1,
+      time: '2026-01-29 15:30:45',
+      operation: '账号创建',
+      detail: '创建了新的分销员账号：张教练',
+      operator: '系统管理员',
+      ip: '192.168.1.100',
+      status: '成功',
+      statusClass: 'status-success'
+    },
+    {
+      id: 2,
+      time: '2026-01-29 14:20:30',
+      operation: '账号冻结',
+      detail: '冻结了分销员账号：王教练',
+      operator: '系统管理员',
+      ip: '192.168.1.100',
+      status: '成功',
+      statusClass: 'status-success'
+    },
+    {
+      id: 3,
+      time: '2026-01-29 10:15:20',
+      operation: '密码修改',
+      detail: '修改了账号密码：李教练',
+      operator: '李教练',
+      ip: '192.168.1.101',
+      status: '成功',
+      statusClass: 'status-success'
+    },
+    {
+      id: 4,
+      time: '2026-01-28 16:45:10',
+      operation: '权限变更',
+      detail: '修改了分销员权限：张教练',
+      operator: '系统管理员',
+      ip: '192.168.1.100',
+      status: '成功',
+      statusClass: 'status-success'
+    },
+    {
+      id: 5,
+      time: '2026-01-28 09:30:00',
+      operation: '账号创建',
+      detail: '创建了新的分销员账号：刘教练',
+      operator: '系统管理员',
+      ip: '192.168.1.100',
+      status: '成功',
+      statusClass: 'status-success'
+    }
+  ])
+  
+  // 分页信息
+  const currentPage = ref(1)
+  const totalLogs = ref(100)
+  const pageSize = ref(10)
+  
+  // 计算总页数
+  const totalPages = computed(() => {
+    return Math.ceil(totalLogs.value / pageSize.value)
+  })
+  
+  onMounted(() => {
+    // 实际项目中应从接口获取操作日志
+    // loadLogList()
+  })
+  
+  // 返回上一页
+  function goBack() {
+    uni.navigateBack({ delta: 1 })
+  }
+  
+  // 导出日志
+  function exportLog() {
+    uni.showModal({
+      title: '导出日志',
+      content: '确定要导出当前筛选条件的操作日志吗？',
+      success: function(res) {
+        if (res.confirm) {
+          uni.showLoading({ title: '导出中...' })
+          
+          setTimeout(() => {
+            uni.hideLoading()
+            uni.showToast({ 
+              title: '导出成功', 
+              icon: 'success' 
+            })
+            // 实际项目中应调用接口导出日志
+            // exportLogData()
+          }, 1500)
+        }
+      }
+    })
+  }
+  
+  // 操作类型变更
+  function onOperationChange(e) {
+    const value = e.detail.value
+    operationIndex.value = value
+    // 实际项目中应根据操作类型筛选日志
+    // filterLogList()
+  }
+  
+  // 日期变更
+  function onDateChange(e) {
+    dateRange.value = e.detail.value
+    dateRangeDisplay.value = e.detail.value
+    // 实际项目中应根据日期筛选日志
+    // filterLogList()
+  }
+  
+  // 搜索
+  function onSearch() {
+    // 实际项目中应根据关键词搜索日志
+    // searchLogList()
+  }
+  
+  // 跳转到指定页码
+  function goToPage(page) {
+    if (page < 1 || page > totalPages.value) {
+      return
+    }
+    currentPage.value = page
+    // 实际项目中应加载指定页码的日志
+    // loadLogList(page)
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: #f5f7fa;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+  /* #endif */
+
+  .log-manage-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* 页面头部 */
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 120rpx;
+    background-color: #fff;
+    padding: 0 32rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .header-left {
+    width: 60rpx;
+  }
+  
+  .back-icon {
+    font-size: 40rpx;
+    color: #303133;
+    cursor: pointer;
+  }
+  
+  .header-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .header-right {
+    width: 60rpx;
+    text-align: right;
+  }
+  
+  .export-btn {
+    font-size: 28rpx;
+    color: #409eff;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  /* 筛选条件 */
+  .filter-section {
+    padding: 24rpx 32rpx;
+    background-color: #fff;
+    margin: 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .filter-row {
+    display: flex;
+    gap: 16rpx;
+    flex-wrap: wrap;
+  }
+  
+  .filter-item {
+    flex: 1;
+    min-width: 200rpx;
+  }
+  
+  .filter-label {
+    font-size: 24rpx;
+    color: #606266;
+    margin-bottom: 8rpx;
+  }
+  
+  .filter-control {
+    background-color: #f9f9f9;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+  }
+  
+  .picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .picker-text {
+    font-size: 24rpx;
+    color: #303133;
+  }
+  
+  .search-input {
+    font-size: 24rpx;
+    color: #303133;
+    width: 100%;
+  }
+  
+  /* 日志列表 */
+  .log-list {
+    flex: 1;
+    padding: 0 16rpx;
+  }
+  
+  .log-item {
+    background-color: #fff;
+    border-radius: 16rpx;
+    padding: 24rpx;
+    margin-bottom: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .log-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16rpx;
+  }
+  
+  .log-time {
+    font-size: 20rpx;
+    color: #606266;
+  }
+  
+  .log-status {
+    font-size: 20rpx;
+    font-weight: 600;
+    padding: 4rpx 12rpx;
+    border-radius: 12rpx;
+  }
+  
+  .status-success {
+    color: #67c23a;
+    background-color: rgba(103, 194, 58, 0.1);
+  }
+  
+  .status-fail {
+    color: #f56c6c;
+    background-color: rgba(245, 108, 108, 0.1);
+  }
+  
+  .log-content {
+    margin-bottom: 16rpx;
+  }
+  
+  .log-operation {
+    font-size: 24rpx;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 8rpx;
+  }
+  
+  .log-detail {
+    font-size: 20rpx;
+    color: #606266;
+    line-height: 1.4;
+  }
+  
+  .log-meta {
+    display: flex;
+    justify-content: space-between;
+    font-size: 20rpx;
+    color: #909399;
+  }
+  
+  /* 空状态 */
+  .empty-state {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 100rpx 0;
+  }
+  
+  .empty-icon {
+    font-size: 80rpx;
+    margin-bottom: 24rpx;
+  }
+  
+  .empty-text {
+    font-size: 24rpx;
+    color: #909399;
+  }
+  
+  /* 分页 */
+  .pagination {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24rpx 32rpx;
+    background-color: #fff;
+    margin: 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .page-info {
+    font-size: 20rpx;
+    color: #606266;
+  }
+  
+  .page-controls {
+    display: flex;
+    gap: 16rpx;
+  }
+  
+  .page-btn {
+    padding: 8rpx 16rpx;
+    border-radius: 8rpx;
+    font-size: 20rpx;
+    font-weight: 600;
+    color: #409eff;
+    cursor: pointer;
+  }
+  
+  .page-btn.disabled {
+    color: #909399;
+    cursor: not-allowed;
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/account/manage.vue b/src/pages/account/manage.vue
new file mode 100644
index 0000000..39d8c7c
--- /dev/null
+++ b/src/pages/account/manage.vue
@@ -0,0 +1,390 @@
+<template>
+  <view class="account-manage-container">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <view class="header-left" @click="goBack">
+        <view class="back-icon">←</view>
+      </view>
+      <view class="header-title">账号创建与管控</view>
+      <view class="header-right" @click="addAccount">
+        <view class="add-btn">+ 添加</view>
+      </view>
+    </view>
+    
+    <!-- 筛选条件 -->
+    <view class="filter-section">
+      <view class="filter-row">
+        <view class="filter-item">
+          <view class="filter-label">账号状态</view>
+          <view class="filter-control">
+            <picker 
+              :range="statusOptions" 
+              :value="statusIndex"
+              @change="onStatusChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ statusOptions[statusIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="filter-item">
+          <view class="filter-label">搜索</view>
+          <view class="filter-control">
+            <input 
+              v-model="searchKeyword" 
+              class="search-input"
+              placeholder="请输入账号名称或手机号"
+              @input="onSearch"
+            />
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 账号列表 -->
+    <view class="account-list">
+      <view 
+        v-for="(account, index) in accountList" 
+        :key="index"
+        class="account-item"
+      >
+        <view class="account-info">
+          <view class="account-name">{{ account.name }}</view>
+          <view class="account-meta">
+            <view class="meta-item">{{ account.phone }}</view>
+            <view class="meta-item">{{ account.role }}</view>
+            <view class="meta-item status-{{ account.status }}">{{ account.statusText }}</view>
+          </view>
+        </view>
+        <view class="account-actions">
+          <view class="action-btn edit-btn" @click="editAccount(account.id)">
+            编辑
+          </view>
+          <view 
+            class="action-btn"
+            :class="account.status === 'active' ? 'disable-btn' : 'enable-btn'"
+            @click="toggleAccountStatus(account.id, account.status)"
+          >
+            {{ account.status === 'active' ? '冻结' : '启用' }}
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 空状态 -->
+    <view v-if="accountList.length === 0" class="empty-state">
+      <view class="empty-icon">👥</view>
+      <view class="empty-text">暂无账号数据</view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { ref, onMounted } from "vue"
+
+  // 状态选项
+  const statusOptions = ['全部', '启用', '冻结']
+  const statusIndex = ref(0)
+  
+  // 搜索关键词
+  const searchKeyword = ref('')
+  
+  // 账号列表
+  const accountList = ref([
+    {
+      id: 1,
+      name: '张教练',
+      phone: '138****1234',
+      role: '分销员',
+      status: 'active',
+      statusText: '启用'
+    },
+    {
+      id: 2,
+      name: '李教练',
+      phone: '139****5678',
+      role: '分销员',
+      status: 'active',
+      statusText: '启用'
+    },
+    {
+      id: 3,
+      name: '王教练',
+      phone: '137****9012',
+      role: '分销员',
+      status: 'inactive',
+      statusText: '冻结'
+    }
+  ])
+  
+  onMounted(() => {
+    // 实际项目中应从接口获取账号列表
+    // loadAccountList()
+  })
+  
+  // 返回上一页
+  function goBack() {
+    uni.navigateBack({ delta: 1 })
+  }
+  
+  // 添加账号
+  function addAccount() {
+    uni.navigateTo({
+      url: '/pages/account/add'
+    })
+  }
+  
+  // 编辑账号
+  function editAccount(accountId) {
+    uni.navigateTo({
+      url: `/pages/account/edit?id=${accountId}`
+    })
+  }
+  
+  // 切换账号状态
+  function toggleAccountStatus(accountId, currentStatus) {
+    const newStatus = currentStatus === 'active' ? 'inactive' : 'active'
+    const newStatusText = newStatus === 'active' ? '启用' : '冻结'
+    
+    uni.showModal({
+      title: '确认操作',
+      content: `确定要${newStatusText}该账号吗？`,
+      success: function(res) {
+        if (res.confirm) {
+          // 实际项目中应调用接口切换账号状态
+          const account = accountList.value.find(item => item.id === accountId)
+          if (account) {
+            account.status = newStatus
+            account.statusText = newStatusText
+          }
+          uni.showToast({ 
+            title: `账号已${newStatusText}`, 
+            icon: 'success' 
+          })
+        }
+      }
+    })
+  }
+  
+  // 状态变更
+  function onStatusChange(e) {
+    const value = e.detail.value
+    statusIndex.value = value
+    // 实际项目中应根据状态筛选账号列表
+    // filterAccountList()
+  }
+  
+  // 搜索
+  function onSearch() {
+    // 实际项目中应根据关键词搜索账号列表
+    // searchAccountList()
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: #f5f7fa;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+  /* #endif */
+
+  .account-manage-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* 页面头部 */
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 120rpx;
+    background-color: #fff;
+    padding: 0 32rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .header-left {
+    width: 60rpx;
+  }
+  
+  .back-icon {
+    font-size: 40rpx;
+    color: #303133;
+    cursor: pointer;
+  }
+  
+  .header-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .header-right {
+    width: 100rpx;
+    text-align: right;
+  }
+  
+  .add-btn {
+    font-size: 24rpx;
+    color: #409eff;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  /* 筛选条件 */
+  .filter-section {
+    padding: 24rpx 32rpx;
+    background-color: #fff;
+    margin: 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .filter-row {
+    display: flex;
+    justify-content: space-between;
+    gap: 16rpx;
+  }
+  
+  .filter-item {
+    flex: 1;
+  }
+  
+  .filter-label {
+    font-size: 24rpx;
+    color: #606266;
+    margin-bottom: 8rpx;
+  }
+  
+  .filter-control {
+    background-color: #f9f9f9;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+  }
+  
+  .picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .picker-text {
+    font-size: 24rpx;
+    color: #303133;
+  }
+  
+  .search-input {
+    font-size: 24rpx;
+    color: #303133;
+    width: 100%;
+  }
+  
+  /* 账号列表 */
+  .account-list {
+    flex: 1;
+    padding: 0 16rpx;
+  }
+  
+  .account-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #fff;
+    border-radius: 16rpx;
+    padding: 24rpx;
+    margin-bottom: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .account-info {
+    flex: 1;
+    margin-right: 24rpx;
+  }
+  
+  .account-name {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 8rpx;
+  }
+  
+  .account-meta {
+    display: flex;
+    gap: 16rpx;
+    flex-wrap: wrap;
+  }
+  
+  .meta-item {
+    font-size: 20rpx;
+    color: #606266;
+  }
+  
+  .status-active {
+    color: #67c23a;
+  }
+  
+  .status-inactive {
+    color: #909399;
+  }
+  
+  .account-actions {
+    display: flex;
+    gap: 16rpx;
+  }
+  
+  .action-btn {
+    padding: 8rpx 16rpx;
+    border-radius: 8rpx;
+    font-size: 20rpx;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  .edit-btn {
+    background-color: #ecf5ff;
+    color: #409eff;
+  }
+  
+  .disable-btn {
+    background-color: #fef0f0;
+    color: #f56c6c;
+  }
+  
+  .enable-btn {
+    background-color: #f0f9eb;
+    color: #67c23a;
+  }
+  
+  /* 空状态 */
+  .empty-state {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 100rpx 0;
+  }
+  
+  .empty-icon {
+    font-size: 80rpx;
+    margin-bottom: 24rpx;
+  }
+  
+  .empty-text {
+    font-size: 24rpx;
+    color: #909399;
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/account/personal.vue b/src/pages/account/personal.vue
new file mode 100644
index 0000000..b2696f4
--- /dev/null
+++ b/src/pages/account/personal.vue
@@ -0,0 +1,410 @@
+<template>
+  <view class="personal-account-container">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <view class="header-left" @click="goBack">
+        <view class="back-icon">←</view>
+      </view>
+      <view class="header-title">个人账号管理</view>
+      <view class="header-right" @click="saveChanges">
+        <view class="save-btn">保存</view>
+      </view>
+    </view>
+    
+    <!-- 个人信息 -->
+    <view class="info-section">
+      <view class="section-title">个人信息</view>
+      <view class="info-card">
+        <view class="info-row">
+          <view class="info-item">
+            <view class="info-label">姓名</view>
+            <view class="info-control">
+              <input 
+                v-model="userInfo.name" 
+                class="info-input"
+                placeholder="请输入姓名"
+                maxlength="20"
+              />
+            </view>
+          </view>
+        </view>
+        <view class="info-row">
+          <view class="info-item">
+            <view class="info-label">手机号码</view>
+            <view class="info-control">
+              <input 
+                v-model="userInfo.phone" 
+                class="info-input"
+                placeholder="请输入手机号码"
+                maxlength="11"
+                type="number"
+              />
+            </view>
+          </view>
+        </view>
+        <view class="info-row">
+          <view class="info-item">
+            <view class="info-label">邮箱</view>
+            <view class="info-control">
+              <input 
+                v-model="userInfo.email" 
+                class="info-input"
+                placeholder="请输入邮箱"
+                maxlength="50"
+                type="email"
+              />
+            </view>
+          </view>
+        </view>
+        <view class="info-row">
+          <view class="info-item">
+            <view class="info-label">性别</view>
+            <view class="info-control">
+              <picker 
+                :range="genders" 
+                :value="genderIndex"
+                @change="onGenderChange"
+                class="picker"
+              >
+                <view class="picker-text">{{ userInfo.gender || '请选择性别' }}</view>
+              </picker>
+            </view>
+          </view>
+        </view>
+        <view class="info-row">
+          <view class="info-item">
+            <view class="info-label">所属驾校</view>
+            <view class="info-control">
+              <view class="info-text">{{ userInfo.school || '顺达驾校' }}</view>
+            </view>
+          </view>
+        </view>
+        <view class="info-row">
+          <view class="info-item">
+            <view class="info-label">职位</view>
+            <view class="info-control">
+              <input 
+                v-model="userInfo.position" 
+                class="info-input"
+                placeholder="请输入职位"
+                maxlength="20"
+              />
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 账号安全 -->
+    <view class="security-section">
+      <view class="section-title">账号安全</view>
+      <view class="security-card">
+        <view class="security-item" @click="goToPasswordChange">
+          <view class="security-label">修改登录密码</view>
+          <view class="security-arrow">→</view>
+        </view>
+        <view class="security-item" @click="bindPhone">
+          <view class="security-label">绑定手机号</view>
+          <view class="security-status">{{ userInfo.phone ? '已绑定' : '未绑定' }}</view>
+          <view class="security-arrow">→</view>
+        </view>
+        <view class="security-item" @click="bindEmail">
+          <view class="security-label">绑定邮箱</view>
+          <view class="security-status">{{ userInfo.email ? '已绑定' : '未绑定' }}</view>
+          <view class="security-arrow">→</view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 账号信息 -->
+    <view class="account-info-section">
+      <view class="section-title">账号信息</view>
+      <view class="info-card">
+        <view class="info-row">
+          <view class="info-item">
+            <view class="info-label">账号ID</view>
+            <view class="info-value">{{ userInfo.id || '10001' }}</view>
+          </view>
+        </view>
+        <view class="info-row">
+          <view class="info-item">
+            <view class="info-label">账号类型</view>
+            <view class="info-value">{{ userInfo.role || '分销员' }}</view>
+          </view>
+        </view>
+        <view class="info-row">
+          <view class="info-item">
+            <view class="info-label">注册时间</view>
+            <view class="info-value">{{ userInfo.registerTime || '2026-01-15' }}</view>
+          </view>
+        </view>
+        <view class="info-row">
+          <view class="info-item">
+            <view class="info-label">最后登录</view>
+            <view class="info-value">{{ userInfo.lastLogin || '2026-01-29 10:30:00' }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { ref, computed, onMounted } from "vue"
+
+  // 性别选项
+  const genders = ['男', '女', '保密']
+  
+  // 用户信息
+  const userInfo = ref({
+    id: '10001',
+    name: '张教练',
+    phone: '13800138000',
+    email: 'zhang@shunda.com',
+    gender: '男',
+    school: '顺达驾校',
+    position: '科目二教练',
+    role: '分销员',
+    registerTime: '2026-01-15',
+    lastLogin: '2026-01-29 10:30:00'
+  })
+  
+  // 计算性别索引
+  const genderIndex = computed(() => {
+    return genders.indexOf(userInfo.value.gender)
+  })
+  
+  onMounted(() => {
+    // 实际项目中应从接口获取用户信息
+    // loadUserInfo()
+  })
+  
+  // 返回上一页
+  function goBack() {
+    uni.navigateBack({ delta: 1 })
+  }
+  
+  // 保存修改
+  function saveChanges() {
+    uni.showModal({
+      title: '保存修改',
+      content: '确定要保存个人信息修改吗？',
+      success: function(res) {
+        if (res.confirm) {
+          uni.showLoading({ title: '保存中...' })
+          
+          setTimeout(() => {
+            uni.hideLoading()
+            uni.showToast({ 
+              title: '保存成功', 
+              icon: 'success' 
+            })
+            // 实际项目中应调用接口保存用户信息
+            // saveUserInfo()
+          }, 1500)
+        }
+      }
+    })
+  }
+  
+  // 性别变更
+  function onGenderChange(e) {
+    const index = e.detail.value
+    userInfo.value.gender = genders[index]
+  }
+  
+  // 跳转到修改密码页面
+  function goToPasswordChange() {
+    uni.navigateTo({
+      url: '/pages/mine/password-change'
+    })
+  }
+  
+  // 绑定手机号
+  function bindPhone() {
+    uni.showToast({ 
+      title: '绑定手机号功能开发中', 
+      icon: 'none' 
+    })
+  }
+  
+  // 绑定邮箱
+  function bindEmail() {
+    uni.showToast({ 
+      title: '绑定邮箱功能开发中', 
+      icon: 'none' 
+    })
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: #f5f7fa;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+  /* #endif */
+
+  .personal-account-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* 页面头部 */
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 120rpx;
+    background-color: #fff;
+    padding: 0 32rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .header-left {
+    width: 60rpx;
+  }
+  
+  .back-icon {
+    font-size: 40rpx;
+    color: #303133;
+    cursor: pointer;
+  }
+  
+  .header-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .header-right {
+    width: 60rpx;
+    text-align: right;
+  }
+  
+  .save-btn {
+    font-size: 28rpx;
+    color: #409eff;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  /* 通用部分样式 */
+  .info-section,
+  .security-section,
+  .account-info-section {
+    padding: 32rpx;
+    background-color: #fff;
+    margin: 0 16rpx 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 24rpx;
+    padding-left: 12rpx;
+    border-left: 8rpx solid #409eff;
+    line-height: 1.2;
+  }
+  
+  /* 个人信息 */
+  .info-card {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+  }
+  
+  .info-row {
+    display: flex;
+  }
+  
+  .info-item {
+    flex: 1;
+  }
+  
+  .info-label {
+    font-size: 24rpx;
+    color: #606266;
+    margin-bottom: 8rpx;
+  }
+  
+  .info-control {
+    background-color: #f9f9f9;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+  }
+  
+  .info-input {
+    font-size: 24rpx;
+    color: #303133;
+    width: 100%;
+  }
+  
+  .info-text {
+    font-size: 24rpx;
+    color: #303133;
+  }
+  
+  .info-value {
+    font-size: 24rpx;
+    color: #303133;
+  }
+  
+  .picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .picker-text {
+    font-size: 24rpx;
+    color: #303133;
+  }
+  
+  /* 账号安全 */
+  .security-card {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+  }
+  
+  .security-item {
+    display: flex;
+    align-items: center;
+    padding: 24rpx;
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    cursor: pointer;
+  }
+  
+  .security-label {
+    flex: 1;
+    font-size: 24rpx;
+    color: #303133;
+  }
+  
+  .security-status {
+    font-size: 20rpx;
+    color: #67c23a;
+    margin-right: 16rpx;
+  }
+  
+  .security-arrow {
+    font-size: 24rpx;
+    color: #909399;
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/account/quota.vue b/src/pages/account/quota.vue
new file mode 100644
index 0000000..609f321
--- /dev/null
+++ b/src/pages/account/quota.vue
@@ -0,0 +1,454 @@
+<template>
+  <view class="quota-manage-container">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <view class="header-left" @click="goBack">
+        <view class="back-icon">←</view>
+      </view>
+      <view class="header-title">赠会员额度分配</view>
+      <view class="header-right" @click="saveQuota">
+        <view class="save-btn">保存</view>
+      </view>
+    </view>
+    
+    <!-- 筛选条件 -->
+    <view class="filter-section">
+      <view class="filter-row">
+        <view class="filter-item">
+          <view class="filter-label">选择月份</view>
+          <view class="filter-control">
+            <picker 
+              mode="date" 
+              fields="month"
+              :value="currentMonth"
+              start="2026-01"
+              end="2026-12"
+              @change="onMonthChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ currentMonthDisplay }}</view>
+            </picker>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 总额度设置 -->
+    <view class="total-quota-section">
+      <view class="section-title">总额度设置</view>
+      <view class="quota-card">
+        <view class="quota-item">
+          <view class="quota-label">月度赠会员总额度</view>
+          <view class="quota-control">
+            <input 
+              v-model="totalQuota" 
+              type="number" 
+              class="quota-input"
+              placeholder="请输入总额度"
+              min="0"
+              max="1000"
+            />
+            <view class="quota-unit">个</view>
+          </view>
+        </view>
+        <view class="quota-hint">
+          • 总额度将分配给所有分销员
+          • 单个分销员最高可分配额度为总额度的50%
+        </view>
+      </view>
+    </view>
+    
+    <!-- 分销员额度分配 -->
+    <view class="distributor-quota-section">
+      <view class="section-title">分销员额度分配</view>
+      <view class="quota-list">
+        <view 
+          v-for="(distributor, index) in distributors" 
+          :key="distributor.id"
+          class="quota-item"
+        >
+          <view class="distributor-info">
+            <view class="distributor-name">{{ distributor.name }}</view>
+            <view class="distributor-id">ID: {{ distributor.id }}</view>
+          </view>
+          <view class="quota-control">
+            <input 
+              v-model="distributor.quota" 
+              type="number" 
+              class="quota-input"
+              placeholder="0"
+              min="0"
+              :max="maxDistributorQuota"
+            />
+            <view class="quota-unit">个</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 配额统计 -->
+    <view class="quota-stats">
+      <view class="stats-item">
+        <view class="stats-label">已分配额度：</view>
+        <view class="stats-value">{{ allocatedQuota }} 个</view>
+      </view>
+      <view class="stats-item">
+        <view class="stats-label">剩余额度：</view>
+        <view class="stats-value" :class="{ 'warning': remainingQuota < 0 }">
+          {{ remainingQuota }} 个
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { ref, computed, onMounted } from "vue"
+
+  // 当前月份
+  const currentMonth = ref('2026-01')
+  const currentMonthDisplay = ref('2026年01月')
+  
+  // 总额度
+  const totalQuota = ref(100)
+  
+  // 分销员列表
+  const distributors = ref([
+    {
+      id: 1,
+      name: '张分销',
+      quota: 30
+    },
+    {
+      id: 2,
+      name: '李分销',
+      quota: 25
+    },
+    {
+      id: 3,
+      name: '王分销',
+      quota: 20
+    },
+    {
+      id: 4,
+      name: '刘分销',
+      quota: 15
+    }
+  ])
+  
+  // 计算单个分销员最大可分配额度
+  const maxDistributorQuota = computed(() => {
+    return Math.floor(totalQuota.value * 0.5)
+  })
+  
+  // 计算已分配额度
+  const allocatedQuota = computed(() => {
+    return distributors.value.reduce((sum, distributor) => {
+      return sum + parseInt(distributor.quota || 0)
+    }, 0)
+  })
+  
+  // 计算剩余额度
+  const remainingQuota = computed(() => {
+    return totalQuota.value - allocatedQuota.value
+  })
+  
+  // 返回上一页
+  function goBack() {
+    uni.navigateBack({ delta: 1 })
+  }
+  
+  // 月份变更
+  function onMonthChange(e) {
+    currentMonth.value = e.detail.value
+    const date = new Date(e.detail.value)
+    currentMonthDisplay.value = `${date.getFullYear()}年${String(date.getMonth() + 1).padStart(2, '0')}月`
+    // 实际项目中应根据选择的月份加载对应的额度配置
+    // loadQuotaByMonth(currentMonth.value)
+  }
+  
+  // 保存配额
+  function saveQuota() {
+    if (!totalQuota.value || totalQuota.value <= 0) {
+      uni.showToast({ 
+        title: '请设置有效的总额度', 
+        icon: 'none' 
+      })
+      return
+    }
+    
+    if (remainingQuota.value < 0) {
+      uni.showToast({ 
+        title: '已分配额度超过总额度', 
+        icon: 'none' 
+      })
+      return
+    }
+    
+    uni.showLoading({ title: '保存中...' })
+    
+    setTimeout(() => {
+      uni.hideLoading()
+      uni.showToast({ 
+        title: '保存成功', 
+        icon: 'success' 
+      })
+      
+      // 实际项目中应调用接口保存配额配置
+      // saveQuotaConfig()
+    }, 1500)
+  }
+  
+  onMounted(() => {
+    // 实际项目中应从接口获取分销员列表和当前月份的配额配置
+    // loadDistributors()
+    // loadCurrentMonthQuota()
+  })
+</script>
+
+<style lang="scss" scoped>
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: #f5f7fa;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+  /* #endif */
+
+  .quota-manage-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* 页面头部 */
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 120rpx;
+    background-color: #fff;
+    padding: 0 32rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .header-left {
+    width: 60rpx;
+  }
+  
+  .back-icon {
+    font-size: 40rpx;
+    color: #303133;
+    cursor: pointer;
+  }
+  
+  .header-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .header-right {
+    width: 60rpx;
+    text-align: right;
+  }
+  
+  .save-btn {
+    font-size: 28rpx;
+    color: #409eff;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  /* 筛选条件 */
+  .filter-section {
+    padding: 24rpx 32rpx;
+    background-color: #fff;
+    margin: 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .filter-row {
+    display: flex;
+    gap: 16rpx;
+  }
+  
+  .filter-item {
+    flex: 1;
+  }
+  
+  .filter-label {
+    font-size: 24rpx;
+    color: #606266;
+    margin-bottom: 8rpx;
+  }
+  
+  .filter-control {
+    background-color: #f9f9f9;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+  }
+  
+  .picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .picker-text {
+    font-size: 24rpx;
+    color: #303133;
+  }
+  
+  /* 通用部分样式 */
+  .total-quota-section,
+  .distributor-quota-section {
+    padding: 32rpx;
+    background-color: #fff;
+    margin: 0 16rpx 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 24rpx;
+    padding-left: 12rpx;
+    border-left: 8rpx solid #409eff;
+    line-height: 1.2;
+  }
+  
+  /* 总额度设置 */
+  .quota-card {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .quota-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16rpx;
+  }
+  
+  .quota-label {
+    font-size: 24rpx;
+    color: #606266;
+  }
+  
+  .quota-control {
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+  }
+  
+  .quota-input {
+    width: 120rpx;
+    height: 60rpx;
+    background-color: #fff;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 0 16rpx;
+    text-align: center;
+    font-size: 24rpx;
+  }
+  
+  .quota-unit {
+    font-size: 24rpx;
+    color: #606266;
+  }
+  
+  .quota-hint {
+    font-size: 20rpx;
+    color: #909399;
+    margin-top: 16rpx;
+    line-height: 1.4;
+  }
+  
+  /* 分销员额度分配 */
+  .quota-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+  }
+  
+  .distributor-info {
+    flex: 1;
+    margin-right: 24rpx;
+  }
+  
+  .distributor-name {
+    font-size: 24rpx;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 4rpx;
+  }
+  
+  .distributor-id {
+    font-size: 20rpx;
+    color: #909399;
+  }
+  
+  /* 配额统计 */
+  .quota-stats {
+    display: flex;
+    justify-content: space-around;
+    padding: 24rpx;
+    background-color: #fff;
+    margin: 0 16rpx 32rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .stats-item {
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+  }
+  
+  .stats-label {
+    font-size: 24rpx;
+    color: #606266;
+  }
+  
+  .stats-value {
+    font-size: 28rpx;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .stats-value.warning {
+    color: #f56c6c;
+  }
+  
+  /* 响应式设计 */
+  @media screen and (min-width: 500px) {
+    .quota-manage-container {
+      max-width: 900px;
+      margin: 0 auto;
+    }
+    
+    .quota-input {
+      width: 160rpx;
+      height: 72rpx;
+      font-size: 28rpx;
+    }
+    
+    .distributor-name {
+      font-size: 28rpx;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/distribution/data.vue b/src/pages/distribution/data.vue
new file mode 100644
index 0000000..a31b819
--- /dev/null
+++ b/src/pages/distribution/data.vue
@@ -0,0 +1,672 @@
+<template>
+  <view class="distribution-data-container">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <view class="header-left" @click="goBack">
+        <view class="back-icon">←</view>
+      </view>
+      <view class="header-title">分销数据查看</view>
+      <view class="header-right" @click="exportData">
+        <view class="export-btn">导出</view>
+      </view>
+    </view>
+    
+    <!-- 筛选条件 -->
+    <view class="filter-section">
+      <view class="filter-row">
+        <view class="filter-item">
+          <view class="filter-label">时间范围</view>
+          <view class="filter-control">
+            <picker 
+              :range="dateOptions" 
+              :value="dateIndex"
+              @change="onDateChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ dateOptions[dateIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="filter-item">
+          <view class="filter-label">分销员</view>
+          <view class="filter-control">
+            <picker 
+              :range="distributorOptions" 
+              :value="distributorIndex"
+              @change="onDistributorChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ distributorOptions[distributorIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="filter-item">
+          <view class="filter-label">搜索</view>
+          <view class="filter-control">
+            <input 
+              v-model="searchKeyword" 
+              class="search-input"
+              placeholder="请输入推广码或学员姓名"
+              @input="onSearch"
+            />
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 核心指标 -->
+    <view class="metrics-section">
+      <view class="section-title">核心指标</view>
+      <view class="metrics-grid">
+        <view class="metric-card">
+          <view class="metric-icon">📱</view>
+          <view class="metric-content">
+            <view class="metric-value">{{ metrics.scanCount }}</view>
+            <view class="metric-label">扫码数</view>
+          </view>
+        </view>
+        <view class="metric-card">
+          <view class="metric-icon">👥</view>
+          <view class="metric-content">
+            <view class="metric-value">{{ metrics.registerCount }}</view>
+            <view class="metric-label">注册数</view>
+          </view>
+        </view>
+        <view class="metric-card">
+          <view class="metric-icon">🎓</view>
+          <view class="metric-content">
+            <view class="metric-value">{{ metrics.memberCount }}</view>
+            <view class="metric-label">会员数</view>
+          </view>
+        </view>
+        <view class="metric-card">
+          <view class="metric-icon">💰</view>
+          <view class="metric-content">
+            <view class="metric-value">{{ metrics.totalProfit }}</view>
+            <view class="metric-label">分润总额</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 数据趋势 -->
+    <view class="trend-section">
+      <view class="section-title">数据趋势</view>
+      <view class="chart-container">
+        <!-- 模拟图表，实际项目中应使用图表库 -->
+        <view class="mock-chart">
+          <view class="chart-header">
+            <view class="chart-title">近7天数据趋势</view>
+          </view>
+          <view class="chart-body">
+            <view class="chart-bars">
+              <view v-for="(day, index) in trendData" :key="index" class="chart-bar">
+                <view class="bar-container">
+                  <view class="bar" :style="{ height: day.value + '%' }"></view>
+                </view>
+                <view class="bar-label">{{ day.date }}</view>
+                <view class="bar-value">{{ day.count }}</view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 推广明细 -->
+    <view class="detail-section">
+      <view class="section-title">推广明细</view>
+      <view class="detail-list">
+        <view 
+          v-for="(item, index) in promotionList" 
+          :key="index"
+          class="detail-item"
+        >
+          <view class="detail-header">
+            <view class="detail-time">{{ item.time }}</view>
+            <view class="detail-status" :class="item.statusClass">{{ item.status }}</view>
+          </view>
+          <view class="detail-content">
+            <view class="detail-info">
+              <view class="info-item">
+                <view class="info-label">推广码：</view>
+                <view class="info-value">{{ item.promotionCode }}</view>
+              </view>
+              <view class="info-item">
+                <view class="info-label">学员：</view>
+                <view class="info-value">{{ item.studentName }}</view>
+              </view>
+              <view class="info-item">
+                <view class="info-label">分销员：</view>
+                <view class="info-value">{{ item.distributorName }}</view>
+              </view>
+            </view>
+            <view class="detail-amount">
+              <view class="amount-label">分润金额：</view>
+              <view class="amount-value">{{ item.profitAmount }}</view>
+            </view>
+          </view>
+        </view>
+      </view>
+      
+      <!-- 分页 -->
+      <view class="pagination">
+        <view class="page-info">
+          共 {{ totalItems }} 条，当前第 {{ currentPage }} 页
+        </view>
+        <view class="page-controls">
+          <view 
+            class="page-btn" 
+            :class="{ disabled: currentPage === 1 }"
+            @click="goToPage(currentPage - 1)"
+          >
+            上一页
+          </view>
+          <view 
+            class="page-btn" 
+            :class="{ disabled: currentPage === totalPages }"
+            @click="goToPage(currentPage + 1)"
+          >
+            下一页
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { ref, computed, onMounted } from "vue"
+
+  // 时间范围选项
+  const dateOptions = ['近7天', '近30天', '近90天', '今年', '全部']
+  const dateIndex = ref(0)
+  
+  // 分销员选项
+  const distributorOptions = ['全部分销员', '张分销', '李分销', '王分销', '刘分销']
+  const distributorIndex = ref(0)
+  
+  // 搜索关键词
+  const searchKeyword = ref('')
+  
+  // 核心指标
+  const metrics = ref({
+    scanCount: 1234,
+    registerCount: 890,
+    memberCount: 456,
+    totalProfit: '¥12,345.67'
+  })
+  
+  // 趋势数据
+  const trendData = ref([
+    { date: '1/23', count: 120, value: 60 },
+    { date: '1/24', count: 150, value: 75 },
+    { date: '1/25', count: 100, value: 50 },
+    { date: '1/26', count: 200, value: 100 },
+    { date: '1/27', count: 180, value: 90 },
+    { date: '1/28', count: 160, value: 80 },
+    { date: '1/29', count: 190, value: 95 }
+  ])
+  
+  // 推广明细
+  const promotionList = ref([
+    {
+      id: 1,
+      time: '2026-01-29 15:30:45',
+      promotionCode: 'SD20260129001',
+      studentName: '张**',
+      distributorName: '张分销',
+      profitAmount: '¥128.00',
+      status: '已完成',
+      statusClass: 'status-success'
+    },
+    {
+      id: 2,
+      time: '2026-01-29 14:20:30',
+      promotionCode: 'SD20260129002',
+      studentName: '李**',
+      distributorName: '李分销',
+      profitAmount: '¥99.00',
+      status: '已完成',
+      statusClass: 'status-success'
+    },
+    {
+      id: 3,
+      time: '2026-01-29 10:15:20',
+      promotionCode: 'SD20260129003',
+      studentName: '王**',
+      distributorName: '王分销',
+      profitAmount: '¥128.00',
+      status: '已完成',
+      statusClass: 'status-success'
+    }
+  ])
+  
+  // 分页信息
+  const currentPage = ref(1)
+  const totalItems = ref(100)
+  const pageSize = ref(10)
+  
+  // 计算总页数
+  const totalPages = computed(() => {
+    return Math.ceil(totalItems.value / pageSize.value)
+  })
+  
+  onMounted(() => {
+    // 实际项目中应从接口获取分销数据
+    // loadDistributionData()
+  })
+  
+  // 返回上一页
+  function goBack() {
+    uni.navigateBack({ delta: 1 })
+  }
+  
+  // 导出数据
+  function exportData() {
+    uni.showModal({
+      title: '导出数据',
+      content: '确定要导出当前筛选条件的分销数据吗？',
+      success: function(res) {
+        if (res.confirm) {
+          uni.showLoading({ title: '导出中...' })
+          
+          setTimeout(() => {
+            uni.hideLoading()
+            uni.showToast({ 
+              title: '导出成功', 
+              icon: 'success' 
+            })
+            // 实际项目中应调用接口导出数据
+            // exportDistributionData()
+          }, 1500)
+        }
+      }
+    })
+  }
+  
+  // 时间范围变更
+  function onDateChange(e) {
+    const value = e.detail.value
+    dateIndex.value = value
+    // 实际项目中应根据时间范围筛选数据
+    // filterData()
+  }
+  
+  // 分销员变更
+  function onDistributorChange(e) {
+    const value = e.detail.value
+    distributorIndex.value = value
+    // 实际项目中应根据分销员筛选数据
+    // filterData()
+  }
+  
+  // 搜索
+  function onSearch() {
+    // 实际项目中应根据关键词搜索数据
+    // searchData()
+  }
+  
+  // 跳转到指定页码
+  function goToPage(page) {
+    if (page < 1 || page > totalPages.value) {
+      return
+    }
+    currentPage.value = page
+    // 实际项目中应加载指定页码的数据
+    // loadPageData(page)
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: #f5f7fa;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+  /* #endif */
+
+  .distribution-data-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* 页面头部 */
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 120rpx;
+    background-color: #fff;
+    padding: 0 32rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .header-left {
+    width: 60rpx;
+  }
+  
+  .back-icon {
+    font-size: 40rpx;
+    color: #303133;
+    cursor: pointer;
+  }
+  
+  .header-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .header-right {
+    width: 60rpx;
+    text-align: right;
+  }
+  
+  .export-btn {
+    font-size: 28rpx;
+    color: #409eff;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  /* 筛选条件 */
+  .filter-section {
+    padding: 24rpx 32rpx;
+    background-color: #fff;
+    margin: 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .filter-row {
+    display: flex;
+    gap: 16rpx;
+    flex-wrap: wrap;
+  }
+  
+  .filter-item {
+    flex: 1;
+    min-width: 200rpx;
+  }
+  
+  .filter-label {
+    font-size: 24rpx;
+    color: #606266;
+    margin-bottom: 8rpx;
+  }
+  
+  .filter-control {
+    background-color: #f9f9f9;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+  }
+  
+  .picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .picker-text {
+    font-size: 24rpx;
+    color: #303133;
+  }
+  
+  .search-input {
+    font-size: 24rpx;
+    color: #303133;
+    width: 100%;
+  }
+  
+  /* 通用部分样式 */
+  .metrics-section,
+  .trend-section,
+  .detail-section {
+    padding: 32rpx;
+    background-color: #fff;
+    margin: 0 16rpx 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 24rpx;
+    padding-left: 12rpx;
+    border-left: 8rpx solid #409eff;
+    line-height: 1.2;
+  }
+  
+  /* 核心指标 */
+  .metrics-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16rpx;
+  }
+  
+  .metric-card {
+    display: flex;
+    align-items: center;
+    padding: 24rpx;
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+  }
+  
+  .metric-icon {
+    font-size: 48rpx;
+    margin-right: 24rpx;
+  }
+  
+  .metric-content {
+    flex: 1;
+  }
+  
+  .metric-value {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 8rpx;
+  }
+  
+  .metric-label {
+    font-size: 24rpx;
+    color: #606266;
+  }
+  
+  /* 数据趋势 */
+  .chart-container {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .mock-chart {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .chart-header {
+    margin-bottom: 24rpx;
+  }
+  
+  .chart-title {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #303133;
+    text-align: center;
+  }
+  
+  .chart-bars {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    height: 300rpx;
+    gap: 16rpx;
+  }
+  
+  .chart-bar {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .bar-container {
+    flex: 1;
+    width: 100%;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    margin-bottom: 12rpx;
+  }
+  
+  .bar {
+    width: 40rpx;
+    background-color: #409eff;
+    border-radius: 4rpx 4rpx 0 0;
+    transition: height 0.5s ease;
+  }
+  
+  .bar-label {
+    font-size: 20rpx;
+    color: #606266;
+    margin-bottom: 8rpx;
+  }
+  
+  .bar-value {
+    font-size: 20rpx;
+    font-weight: 600;
+    color: #303133;
+  }
+  
+  /* 推广明细 */
+  .detail-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+    margin-bottom: 24rpx;
+  }
+  
+  .detail-item {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .detail-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16rpx;
+  }
+  
+  .detail-time {
+    font-size: 20rpx;
+    color: #606266;
+  }
+  
+  .detail-status {
+    font-size: 20rpx;
+    font-weight: 600;
+    padding: 4rpx 12rpx;
+    border-radius: 12rpx;
+  }
+  
+  .status-success {
+    color: #67c23a;
+    background-color: rgba(103, 194, 58, 0.1);
+  }
+  
+  .detail-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+  
+  .detail-info {
+    flex: 1;
+    margin-right: 24rpx;
+  }
+  
+  .info-item {
+    display: flex;
+    margin-bottom: 8rpx;
+  }
+  
+  .info-label {
+    font-size: 20rpx;
+    color: #606266;
+    width: 80rpx;
+  }
+  
+  .info-value {
+    font-size: 20rpx;
+    color: #303133;
+  }
+  
+  .detail-amount {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+  
+  .amount-label {
+    font-size: 20rpx;
+    color: #606266;
+    margin-bottom: 4rpx;
+  }
+  
+  .amount-value {
+    font-size: 28rpx;
+    font-weight: bold;
+    color: #f56c6c;
+  }
+  
+  /* 分页 */
+  .pagination {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24rpx;
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+  }
+  
+  .page-info {
+    font-size: 20rpx;
+    color: #606266;
+  }
+  
+  .page-controls {
+    display: flex;
+    gap: 16rpx;
+  }
+  
+  .page-btn {
+    padding: 8rpx 16rpx;
+    border-radius: 8rpx;
+    font-size: 20rpx;
+    font-weight: 600;
+    color: #409eff;
+    cursor: pointer;
+  }
+  
+  .page-btn.disabled {
+    color: #909399;
+    cursor: not-allowed;
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/distribution/personal.vue b/src/pages/distribution/personal.vue
new file mode 100644
index 0000000..4a90163
--- /dev/null
+++ b/src/pages/distribution/personal.vue
@@ -0,0 +1,535 @@
+<template>
+  <view class="personal-promotion-container">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <view class="header-left" @click="goBack">
+        <view class="back-icon">←</view>
+      </view>
+      <view class="header-title">个人推广管理</view>
+      <view class="header-right" @click="sharePromotion">
+        <view class="share-btn">分享</view>
+      </view>
+    </view>
+    
+    <!-- 推广码信息 -->
+    <view class="promotion-info-section">
+      <view class="section-title">推广码信息</view>
+      <view class="info-card">
+        <view class="info-row">
+          <view class="info-label">推广码</view>
+          <view class="info-value">{{ promotionCode }}</view>
+        </view>
+        <view class="info-row">
+          <view class="info-label">生成时间</view>
+          <view class="info-value">{{ createTime }}</view>
+        </view>
+        <view class="info-row">
+          <view class="info-label">有效期</view>
+          <view class="info-value">{{ validityPeriod }}</view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 推广二维码 -->
+    <view class="qrcode-section">
+      <view class="section-title">推广二维码</view>
+      <view class="qrcode-card">
+        <view class="qrcode-image">
+          <!-- 模拟二维码图片 -->
+          <view class="mock-qrcode">
+            <view class="qrcode-pattern"></view>
+            <view class="qrcode-text">{{ promotionCode }}</view>
+          </view>
+        </view>
+        <view class="qrcode-hint">
+          请保存二维码并分享给学员，学员扫码注册后将自动绑定为您的推广学员
+        </view>
+        <view class="qrcode-actions">
+          <view class="action-btn download-btn" @click="downloadQrcode">
+            下载二维码
+          </view>
+          <view class="action-btn refresh-btn" @click="refreshQrcode">
+            刷新二维码
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 推广数据 -->
+    <view class="promotion-data-section">
+      <view class="section-title">推广数据</view>
+      <view class="data-card">
+        <view class="data-row">
+          <view class="data-item">
+            <view class="data-value">{{ totalScanCount }}</view>
+            <view class="data-label">扫码次数</view>
+          </view>
+          <view class="data-item">
+            <view class="data-value">{{ totalRegisterCount }}</view>
+            <view class="data-label">注册人数</view>
+          </view>
+          <view class="data-item">
+            <view class="data-value">{{ totalMemberCount }}</view>
+            <view class="data-label">会员人数</view>
+          </view>
+        </view>
+        <view class="data-row">
+          <view class="data-item">
+            <view class="data-value">{{ totalProfit }}</view>
+            <view class="data-label">累计分润</view>
+          </view>
+          <view class="data-item">
+            <view class="data-value">{{ todayScanCount }}</view>
+            <view class="data-label">今日扫码</view>
+          </view>
+          <view class="data-item">
+            <view class="data-value">{{ todayRegisterCount }}</view>
+            <view class="data-label">今日注册</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 推广记录 -->
+    <view class="promotion-record-section">
+      <view class="section-title">推广记录</view>
+      <view class="record-card">
+        <view class="record-header">
+          <view class="header-item">时间</view>
+          <view class="header-item">类型</view>
+          <view class="header-item">状态</view>
+          <view class="header-item">收益</view>
+        </view>
+        <view class="record-list">
+          <view 
+            v-for="(record, index) in promotionRecords" 
+            :key="index"
+            class="record-item"
+          >
+            <view class="record-cell">{{ record.time }}</view>
+            <view class="record-cell">{{ record.type }}</view>
+            <view class="record-cell" :class="record.statusClass">{{ record.status }}</view>
+            <view class="record-cell profit">{{ record.profit }}</view>
+          </view>
+        </view>
+        <view class="record-footer">
+          <view class="footer-text">
+            共 {{ totalRecords }} 条记录，显示最近 {{ promotionRecords.length }} 条
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { ref, onMounted } from "vue"
+
+  // 推广码信息
+  const promotionCode = ref('SD20260129001')
+  const createTime = ref('2026-01-29 10:00:00')
+  const validityPeriod = ref('永久有效')
+  
+  // 推广数据
+  const totalScanCount = ref(120)
+  const totalRegisterCount = ref(89)
+  const totalMemberCount = ref(45)
+  const totalProfit = ref('¥1,234.56')
+  const todayScanCount = ref(12)
+  const todayRegisterCount = ref(8)
+  
+  // 推广记录
+  const promotionRecords = ref([
+    {
+      time: '2026-01-29 15:30:00',
+      type: '扫码注册',
+      status: '成功',
+      statusClass: 'status-success',
+      profit: '¥10.00'
+    },
+    {
+      time: '2026-01-29 14:20:00',
+      type: '购买会员',
+      status: '成功',
+      statusClass: 'status-success',
+      profit: '¥7.98'
+    },
+    {
+      time: '2026-01-29 13:10:00',
+      type: '扫码注册',
+      status: '成功',
+      statusClass: 'status-success',
+      profit: '¥10.00'
+    },
+    {
+      time: '2026-01-29 12:00:00',
+      type: '扫码注册',
+      status: '失败',
+      statusClass: 'status-failed',
+      profit: '¥0.00'
+    }
+  ])
+  
+  const totalRecords = ref(100)
+  
+  onMounted(() => {
+    // 实际项目中应从接口获取个人推广信息
+    // loadPersonalPromotionInfo()
+  })
+  
+  // 返回上一页
+  function goBack() {
+    uni.navigateBack({ delta: 1 })
+  }
+  
+  // 分享推广
+  function sharePromotion() {
+    uni.showActionSheet({
+      itemList: ['分享到微信', '分享到朋友圈', '复制推广链接'],
+      success: function(res) {
+        switch(res.tapIndex) {
+          case 0:
+            uni.showToast({ title: '分享到微信', duration: 1000 })
+            break
+          case 1:
+            uni.showToast({ title: '分享到朋友圈', duration: 1000 })
+            break
+          case 2:
+            uni.setClipboardData({
+              data: `https://example.com/register?code=${promotionCode.value}`,
+              success: function() {
+                uni.showToast({ title: '推广链接已复制', duration: 1000 })
+              }
+            })
+            break
+        }
+      }
+    })
+  }
+  
+  // 下载二维码
+  function downloadQrcode() {
+    uni.showLoading({ title: '下载中...' })
+    
+    setTimeout(() => {
+      uni.hideLoading()
+      uni.showToast({ 
+        title: '二维码已下载', 
+        icon: 'success' 
+      })
+      // 实际项目中应调用接口下载二维码
+      // downloadQrcodeById()
+    }, 1000)
+  }
+  
+  // 刷新二维码
+  function refreshQrcode() {
+    uni.showModal({
+      title: '刷新二维码',
+      content: '刷新二维码后，原二维码将失效，确定要刷新吗？',
+      success: function(res) {
+        if (res.confirm) {
+          uni.showLoading({ title: '刷新中...' })
+          
+          setTimeout(() => {
+            uni.hideLoading()
+            // 模拟刷新后生成新的推广码
+            promotionCode.value = 'SD' + new Date().getTime().toString().substring(0, 10)
+            createTime.value = new Date().toLocaleString('zh-CN')
+            uni.showToast({ 
+              title: '二维码已刷新', 
+              icon: 'success' 
+            })
+            // 实际项目中应调用接口刷新二维码
+            // refreshQrcodeById()
+          }, 1500)
+        }
+      }
+    })
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: #f5f7fa;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+  /* #endif */
+
+  .personal-promotion-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* 页面头部 */
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 120rpx;
+    background-color: #fff;
+    padding: 0 32rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .header-left {
+    width: 60rpx;
+  }
+  
+  .back-icon {
+    font-size: 40rpx;
+    color: #303133;
+    cursor: pointer;
+  }
+  
+  .header-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .header-right {
+    width: 60rpx;
+    text-align: right;
+  }
+  
+  .share-btn {
+    font-size: 24rpx;
+    color: #409eff;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  /* 通用部分样式 */
+  .promotion-info-section,
+  .qrcode-section,
+  .promotion-data-section,
+  .promotion-record-section {
+    padding: 32rpx;
+    background-color: #fff;
+    margin: 0 16rpx 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 24rpx;
+    padding-left: 12rpx;
+    border-left: 8rpx solid #409eff;
+    line-height: 1.2;
+  }
+  
+  /* 推广码信息 */
+  .info-card {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .info-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16rpx;
+  }
+  
+  .info-row:last-child {
+    margin-bottom: 0;
+  }
+  
+  .info-label {
+    font-size: 24rpx;
+    color: #606266;
+  }
+  
+  .info-value {
+    font-size: 24rpx;
+    color: #303133;
+    font-weight: 600;
+  }
+  
+  /* 推广二维码 */
+  .qrcode-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 24rpx;
+  }
+  
+  .qrcode-image {
+    display: flex;
+    justify-content: center;
+  }
+  
+  .mock-qrcode {
+    width: 300rpx;
+    height: 300rpx;
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .qrcode-pattern {
+    width: 240rpx;
+    height: 240rpx;
+    background-color: #303133;
+    margin-bottom: 16rpx;
+  }
+  
+  .qrcode-text {
+    font-size: 20rpx;
+    color: #606266;
+  }
+  
+  .qrcode-hint {
+    font-size: 20rpx;
+    color: #606266;
+    text-align: center;
+    line-height: 1.4;
+    padding: 0 24rpx;
+  }
+  
+  .qrcode-actions {
+    display: flex;
+    gap: 16rpx;
+  }
+  
+  .action-btn {
+    padding: 12rpx 24rpx;
+    border-radius: 8rpx;
+    font-size: 20rpx;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  .download-btn {
+    background-color: #ecf5ff;
+    color: #409eff;
+  }
+  
+  .refresh-btn {
+    background-color: #f0f9eb;
+    color: #67c23a;
+  }
+  
+  /* 推广数据 */
+  .data-card {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .data-row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 24rpx;
+  }
+  
+  .data-row:last-child {
+    margin-bottom: 0;
+  }
+  
+  .data-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8rpx;
+  }
+  
+  .data-value {
+    font-size: 28rpx;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .data-label {
+    font-size: 18rpx;
+    color: #606266;
+  }
+  
+  /* 推广记录 */
+  .record-card {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .record-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 16rpx;
+    padding-bottom: 16rpx;
+    border-bottom: 1rpx solid #e0e0e0;
+  }
+  
+  .header-item {
+    flex: 1;
+    font-size: 20rpx;
+    font-weight: bold;
+    color: #606266;
+    text-align: center;
+  }
+  
+  .record-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+    margin-bottom: 16rpx;
+  }
+  
+  .record-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16rpx;
+    background-color: #fff;
+    border-radius: 8rpx;
+  }
+  
+  .record-cell {
+    flex: 1;
+    font-size: 20rpx;
+    color: #303133;
+    text-align: center;
+  }
+  
+  .record-cell.profit {
+    color: #f56c6c;
+    font-weight: 600;
+  }
+  
+  .status-success {
+    color: #67c23a;
+  }
+  
+  .status-failed {
+    color: #f56c6c;
+  }
+  
+  .record-footer {
+    text-align: center;
+  }
+  
+  .footer-text {
+    font-size: 18rpx;
+    color: #909399;
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/distribution/profit-rule.vue b/src/pages/distribution/profit-rule.vue
new file mode 100644
index 0000000..9db84d4
--- /dev/null
+++ b/src/pages/distribution/profit-rule.vue
@@ -0,0 +1,533 @@
+<template>
+  <view class="profit-rule-container">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <view class="header-left" @click="goBack">
+        <view class="back-icon">←</view>
+      </view>
+      <view class="header-title">分润规则配置</view>
+      <view class="header-right" @click="saveRules">
+        <view class="save-btn">保存</view>
+      </view>
+    </view>
+    
+    <!-- 规则说明 -->
+    <view class="rule-info-section">
+      <view class="section-title">规则说明</view>
+      <view class="info-card">
+        <view class="info-item">• 分润规则适用于所有分销员</view>
+        <view class="info-item">• 扫码注册分润：学员通过推广码扫码注册后，分销员可获得的分润</view>
+        <view class="info-item">• 购买会员分润：学员通过推广码购买会员后，分销员可获得的分润</view>
+        <view class="info-item">• 分润比例：按会员价格的百分比计算，最高不超过50%</view>
+      </view>
+    </view>
+    
+    <!-- 分润规则配置 -->
+    <view class="rule-config-section">
+      <view class="section-title">分润规则配置</view>
+      <view class="rule-card">
+        <!-- 扫码注册分润 -->
+        <view class="rule-item">
+          <view class="rule-header">
+            <view class="rule-title">扫码注册分润</view>
+            <view class="rule-toggle">
+              <switch 
+                :checked="scanRegisterRule.enabled"
+                @change="onScanRegisterToggle"
+                class="toggle-switch"
+                active-color="#409eff"
+              />
+            </view>
+          </view>
+          <view v-if="scanRegisterRule.enabled" class="rule-content">
+            <view class="rule-row">
+              <view class="rule-label">分润金额</view>
+              <view class="rule-control">
+                <input 
+                  v-model="scanRegisterRule.amount" 
+                  type="number" 
+                  class="rule-input"
+                  placeholder="请输入分润金额"
+                  min="0"
+                  max="100"
+                  step="0.1"
+                />
+                <view class="rule-unit">元</view>
+              </view>
+            </view>
+            <view class="rule-hint">
+              • 固定金额分润，学员扫码注册后立即发放
+              • 建议设置为5-20元
+            </view>
+          </view>
+        </view>
+        
+        <!-- 购买会员分润 -->
+        <view class="rule-item">
+          <view class="rule-header">
+            <view class="rule-title">购买会员分润</view>
+            <view class="rule-toggle">
+              <switch 
+                :checked="memberPurchaseRule.enabled"
+                @change="onMemberPurchaseToggle"
+                class="toggle-switch"
+                active-color="#409eff"
+              />
+            </view>
+          </view>
+          <view v-if="memberPurchaseRule.enabled" class="rule-content">
+            <view class="rule-row">
+              <view class="rule-label">分润比例</view>
+              <view class="rule-control">
+                <input 
+                  v-model="memberPurchaseRule.percentage" 
+                  type="number" 
+                  class="rule-input"
+                  placeholder="请输入分润比例"
+                  min="0"
+                  max="50"
+                  step="0.1"
+                />
+                <view class="rule-unit">%</view>
+              </view>
+            </view>
+            <view class="rule-row">
+              <view class="rule-label">会员类型</view>
+              <view class="rule-control">
+                <picker 
+                  :range="memberTypes" 
+                  :value="memberTypeIndex"
+                  @change="onMemberTypeChange"
+                  class="picker"
+                >
+                  <view class="picker-text">{{ memberTypes[memberTypeIndex] }}</view>
+                </picker>
+              </view>
+            </view>
+            <view class="rule-hint">
+              • 按会员价格的百分比计算分润
+              • 最高分润比例为50%
+              • 建议设置为10%-30%
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 会员价格设置 -->
+    <view class="price-section">
+      <view class="section-title">会员价格设置</view>
+      <view class="price-card">
+        <view class="price-item">
+          <view class="price-label">月度会员价格</view>
+          <view class="price-control">
+            <input 
+              v-model="memberPrices.monthly" 
+              type="number" 
+              class="price-input"
+              placeholder="请输入月度会员价格"
+              min="0"
+              max="1000"
+              step="0.1"
+            />
+            <view class="price-unit">元</view>
+          </view>
+        </view>
+        <view class="price-item">
+          <view class="price-label">季度会员价格</view>
+          <view class="price-control">
+            <input 
+              v-model="memberPrices.quarterly" 
+              type="number" 
+              class="price-input"
+              placeholder="请输入季度会员价格"
+              min="0"
+              max="3000"
+              step="0.1"
+            />
+            <view class="price-unit">元</view>
+          </view>
+        </view>
+        <view class="price-item">
+          <view class="price-label">年度会员价格</view>
+          <view class="price-control">
+            <input 
+              v-model="memberPrices.yearly" 
+              type="number" 
+              class="price-input"
+              placeholder="请输入年度会员价格"
+              min="0"
+              max="10000"
+              step="0.1"
+            />
+            <view class="price-unit">元</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 分润预览 -->
+    <view class="preview-section">
+      <view class="section-title">分润预览</view>
+      <view class="preview-card">
+        <view class="preview-item">
+          <view class="preview-label">月度会员分润</view>
+          <view class="preview-value">{{ calculatePreview('monthly') }}</view>
+        </view>
+        <view class="preview-item">
+          <view class="preview-label">季度会员分润</view>
+          <view class="preview-value">{{ calculatePreview('quarterly') }}</view>
+        </view>
+        <view class="preview-item">
+          <view class="preview-label">年度会员分润</view>
+          <view class="preview-value">{{ calculatePreview('yearly') }}</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { ref, computed, onMounted } from "vue"
+
+  // 扫码注册分润规则
+  const scanRegisterRule = ref({
+    enabled: true,
+    amount: 10
+  })
+  
+  // 购买会员分润规则
+  const memberPurchaseRule = ref({
+    enabled: true,
+    percentage: 20
+  })
+  
+  // 会员类型选项
+  const memberTypes = ['全部会员类型', '月度会员', '季度会员', '年度会员']
+  const memberTypeIndex = ref(0)
+  
+  // 会员价格
+  const memberPrices = ref({
+    monthly: 39.9,
+    quarterly: 99.9,
+    yearly: 299.9
+  })
+  
+  // 计算分润预览
+  function calculatePreview(type) {
+    if (!memberPurchaseRule.value.enabled) {
+      return '¥0.00'
+    }
+    
+    const price = memberPrices.value[type]
+    const percentage = memberPurchaseRule.value.percentage
+    const amount = (price * percentage) / 100
+    
+    return `¥${amount.toFixed(2)}`
+  }
+  
+  onMounted(() => {
+    // 实际项目中应从接口获取分润规则配置
+    // loadProfitRules()
+  })
+  
+  // 返回上一页
+  function goBack() {
+    uni.navigateBack({ delta: 1 })
+  }
+  
+  // 保存规则
+  function saveRules() {
+    uni.showModal({
+      title: '保存规则',
+      content: '确定要保存分润规则配置吗？',
+      success: function(res) {
+        if (res.confirm) {
+          uni.showLoading({ title: '保存中...' })
+          
+          setTimeout(() => {
+            uni.hideLoading()
+            uni.showToast({ 
+              title: '保存成功', 
+              icon: 'success' 
+            })
+            // 实际项目中应调用接口保存分润规则
+            // saveProfitRules()
+          }, 1500)
+        }
+      }
+    })
+  }
+  
+  // 扫码注册分润开关
+  function onScanRegisterToggle(e) {
+    scanRegisterRule.value.enabled = e.detail.value
+  }
+  
+  // 购买会员分润开关
+  function onMemberPurchaseToggle(e) {
+    memberPurchaseRule.value.enabled = e.detail.value
+  }
+  
+  // 会员类型变更
+  function onMemberTypeChange(e) {
+    memberTypeIndex.value = e.detail.value
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: #f5f7fa;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+  /* #endif */
+
+  .profit-rule-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* 页面头部 */
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 120rpx;
+    background-color: #fff;
+    padding: 0 32rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .header-left {
+    width: 60rpx;
+  }
+  
+  .back-icon {
+    font-size: 40rpx;
+    color: #303133;
+    cursor: pointer;
+  }
+  
+  .header-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .header-right {
+    width: 60rpx;
+    text-align: right;
+  }
+  
+  .save-btn {
+    font-size: 28rpx;
+    color: #409eff;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  /* 通用部分样式 */
+  .rule-info-section,
+  .rule-config-section,
+  .price-section,
+  .preview-section {
+    padding: 32rpx;
+    background-color: #fff;
+    margin: 0 16rpx 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 24rpx;
+    padding-left: 12rpx;
+    border-left: 8rpx solid #409eff;
+    line-height: 1.2;
+  }
+  
+  /* 规则说明 */
+  .info-card {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .info-item {
+    font-size: 20rpx;
+    color: #606266;
+    margin-bottom: 8rpx;
+    line-height: 1.4;
+  }
+  
+  /* 分润规则配置 */
+  .rule-card {
+    display: flex;
+    flex-direction: column;
+    gap: 24rpx;
+  }
+  
+  .rule-item {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .rule-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16rpx;
+  }
+  
+  .rule-title {
+    font-size: 24rpx;
+    font-weight: 600;
+    color: #303133;
+  }
+  
+  .rule-content {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+  }
+  
+  .rule-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .rule-label {
+    font-size: 20rpx;
+    color: #606266;
+  }
+  
+  .rule-control {
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+  }
+  
+  .rule-input {
+    width: 120rpx;
+    height: 60rpx;
+    background-color: #fff;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 0 16rpx;
+    text-align: center;
+    font-size: 24rpx;
+  }
+  
+  .rule-unit {
+    font-size: 24rpx;
+    color: #606266;
+  }
+  
+  .rule-hint {
+    font-size: 20rpx;
+    color: #909399;
+    margin-top: 8rpx;
+    line-height: 1.4;
+  }
+  
+  .picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #fff;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+    min-width: 200rpx;
+  }
+  
+  .picker-text {
+    font-size: 24rpx;
+    color: #303133;
+  }
+  
+  /* 会员价格设置 */
+  .price-card {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+  }
+  
+  .price-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24rpx;
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+  }
+  
+  .price-label {
+    font-size: 24rpx;
+    color: #606266;
+  }
+  
+  .price-control {
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+  }
+  
+  .price-input {
+    width: 160rpx;
+    height: 60rpx;
+    background-color: #fff;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 0 16rpx;
+    text-align: center;
+    font-size: 24rpx;
+  }
+  
+  .price-unit {
+    font-size: 24rpx;
+    color: #606266;
+  }
+  
+  /* 分润预览 */
+  .preview-card {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+  }
+  
+  .preview-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24rpx;
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+  }
+  
+  .preview-label {
+    font-size: 24rpx;
+    color: #606266;
+  }
+  
+  .preview-value {
+    font-size: 28rpx;
+    font-weight: bold;
+    color: #f56c6c;
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/distribution/profit.vue b/src/pages/distribution/profit.vue
new file mode 100644
index 0000000..f9a3ef7
--- /dev/null
+++ b/src/pages/distribution/profit.vue
@@ -0,0 +1,528 @@
+<template>
+  <view class="profit-query-container">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <view class="header-left" @click="goBack">
+        <view class="back-icon">←</view>
+      </view>
+      <view class="header-title">分润查询</view>
+      <view class="header-right" @click="exportProfit">
+        <view class="export-btn">导出</view>
+      </view>
+    </view>
+    
+    <!-- 分润概览 -->
+    <view class="profit-overview-section">
+      <view class="section-title">分润概览</view>
+      <view class="overview-card">
+        <view class="overview-row">
+          <view class="overview-item">
+            <view class="overview-value">{{ totalProfit }}</view>
+            <view class="overview-label">累计分润</view>
+          </view>
+          <view class="overview-item">
+            <view class="overview-value">{{ todayProfit }}</view>
+            <view class="overview-label">今日分润</view>
+          </view>
+          <view class="overview-item">
+            <view class="overview-value">{{ monthProfit }}</view>
+            <view class="overview-label">本月分润</view>
+          </view>
+        </view>
+        <view class="overview-row">
+          <view class="overview-item">
+            <view class="overview-value">{{ pendingProfit }}</view>
+            <view class="overview-label">待结算</view>
+          </view>
+          <view class="overview-item">
+            <view class="overview-value">{{ settledProfit }}</view>
+            <view class="overview-label">已结算</view>
+          </view>
+          <view class="overview-item">
+            <view class="overview-value">{{ withdrawableProfit }}</view>
+            <view class="overview-label">可提现</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 筛选条件 -->
+    <view class="filter-section">
+      <view class="filter-row">
+        <view class="filter-item">
+          <view class="filter-label">时间范围</view>
+          <view class="filter-control">
+            <picker 
+              :range="timeRangeOptions" 
+              :value="timeRangeIndex"
+              @change="onTimeRangeChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ timeRangeOptions[timeRangeIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="filter-item">
+          <view class="filter-label">分润类型</view>
+          <view class="filter-control">
+            <picker 
+              :range="profitTypeOptions" 
+              :value="profitTypeIndex"
+              @change="onProfitTypeChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ profitTypeOptions[profitTypeIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="filter-item">
+          <view class="filter-label">状态</view>
+          <view class="filter-control">
+            <picker 
+              :range="statusOptions" 
+              :value="statusIndex"
+              @change="onStatusChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ statusOptions[statusIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 分润明细 -->
+    <view class="profit-detail-section">
+      <view class="section-title">分润明细</view>
+      <view class="detail-card">
+        <view class="detail-header">
+          <view class="header-item">时间</view>
+          <view class="header-item">类型</view>
+          <view class="header-item">金额</view>
+          <view class="header-item">状态</view>
+        </view>
+        <view class="detail-list">
+          <view 
+            v-for="(item, index) in profitList" 
+            :key="index"
+            class="detail-item"
+          >
+            <view class="detail-cell">{{ item.time }}</view>
+            <view class="detail-cell">{{ item.type }}</view>
+            <view class="detail-cell amount">{{ item.amount }}</view>
+            <view class="detail-cell" :class="item.statusClass">{{ item.status }}</view>
+          </view>
+        </view>
+        <view class="detail-footer">
+          <view class="footer-text">
+            共 {{ totalItems }} 条记录，当前第 {{ currentPage }} / {{ totalPages }} 页
+          </view>
+          <view class="footer-controls">
+            <view 
+              class="control-btn" 
+              :class="{ disabled: currentPage === 1 }"
+              @click="goToPage(currentPage - 1)"
+            >
+              上一页
+            </view>
+            <view 
+              class="control-btn" 
+              :class="{ disabled: currentPage === totalPages }"
+              @click="goToPage(currentPage + 1)"
+            >
+              下一页
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { ref, computed, onMounted } from "vue"
+
+  // 分润概览数据
+  const totalProfit = ref('¥1,234.56')
+  const todayProfit = ref('¥123.45')
+  const monthProfit = ref('¥3,456.78')
+  const pendingProfit = ref('¥567.89')
+  const settledProfit = ref('¥666.67')
+  const withdrawableProfit = ref('¥456.78')
+  
+  // 筛选条件
+  const timeRangeOptions = ['全部时间', '今日', '本周', '本月', '本季度', '本年', '自定义']
+  const timeRangeIndex = ref(3)
+  
+  const profitTypeOptions = ['全部类型', '扫码注册', '购买会员']
+  const profitTypeIndex = ref(0)
+  
+  const statusOptions = ['全部状态', '待结算', '已结算', '已提现']
+  const statusIndex = ref(0)
+  
+  // 分润明细数据
+  const profitList = ref([
+    {
+      time: '2026-01-29 15:30:00',
+      type: '扫码注册',
+      amount: '¥10.00',
+      status: '待结算',
+      statusClass: 'status-pending'
+    },
+    {
+      time: '2026-01-29 14:20:00',
+      type: '购买会员',
+      amount: '¥7.98',
+      status: '待结算',
+      statusClass: 'status-pending'
+    },
+    {
+      time: '2026-01-28 10:15:00',
+      type: '扫码注册',
+      amount: '¥10.00',
+      status: '已结算',
+      statusClass: 'status-settled'
+    },
+    {
+      time: '2026-01-27 09:45:00',
+      type: '购买会员',
+      amount: '¥7.98',
+      status: '已结算',
+      statusClass: 'status-settled'
+    },
+    {
+      time: '2026-01-26 16:20:00',
+      type: '扫码注册',
+      amount: '¥10.00',
+      status: '已提现',
+      statusClass: 'status-withdrawn'
+    }
+  ])
+  
+  // 分页信息
+  const currentPage = ref(1)
+  const totalItems = ref(100)
+  const pageSize = ref(10)
+  
+  // 计算总页数
+  const totalPages = computed(() => {
+    return Math.ceil(totalItems.value / pageSize.value)
+  })
+  
+  onMounted(() => {
+    // 实际项目中应从接口获取分润数据
+    // loadProfitData()
+  })
+  
+  // 返回上一页
+  function goBack() {
+    uni.navigateBack({ delta: 1 })
+  }
+  
+  // 导出分润
+  function exportProfit() {
+    uni.showModal({
+      title: '导出分润明细',
+      content: '确定要导出当前筛选条件下的分润明细吗？',
+      success: function(res) {
+        if (res.confirm) {
+          uni.showLoading({ title: '导出中...' })
+          
+          setTimeout(() => {
+            uni.hideLoading()
+            uni.showToast({ 
+              title: '导出成功', 
+              icon: 'success' 
+            })
+            // 实际项目中应调用接口导出分润
+            // exportProfitData()
+          }, 1500)
+        }
+      }
+    })
+  }
+  
+  // 时间范围变更
+  function onTimeRangeChange(e) {
+    const value = e.detail.value
+    timeRangeIndex.value = value
+    // 实际项目中应根据时间范围筛选分润数据
+    // filterProfitData()
+  }
+  
+  // 分润类型变更
+  function onProfitTypeChange(e) {
+    const value = e.detail.value
+    profitTypeIndex.value = value
+    // 实际项目中应根据分润类型筛选分润数据
+    // filterProfitData()
+  }
+  
+  // 状态变更
+  function onStatusChange(e) {
+    const value = e.detail.value
+    statusIndex.value = value
+    // 实际项目中应根据状态筛选分润数据
+    // filterProfitData()
+  }
+  
+  // 跳转到指定页码
+  function goToPage(page) {
+    if (page < 1 || page > totalPages.value) {
+      return
+    }
+    currentPage.value = page
+    // 实际项目中应加载指定页码的分润数据
+    // loadProfitPage(page)
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: #f5f7fa;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+  /* #endif */
+
+  .profit-query-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* 页面头部 */
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 120rpx;
+    background-color: #fff;
+    padding: 0 32rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .header-left {
+    width: 60rpx;
+  }
+  
+  .back-icon {
+    font-size: 40rpx;
+    color: #303133;
+    cursor: pointer;
+  }
+  
+  .header-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .header-right {
+    width: 60rpx;
+    text-align: right;
+  }
+  
+  .export-btn {
+    font-size: 24rpx;
+    color: #409eff;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  /* 通用部分样式 */
+  .profit-overview-section,
+  .filter-section,
+  .profit-detail-section {
+    padding: 32rpx;
+    background-color: #fff;
+    margin: 0 16rpx 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 24rpx;
+    padding-left: 12rpx;
+    border-left: 8rpx solid #409eff;
+    line-height: 1.2;
+  }
+  
+  /* 分润概览 */
+  .overview-card {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .overview-row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 24rpx;
+  }
+  
+  .overview-row:last-child {
+    margin-bottom: 0;
+  }
+  
+  .overview-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8rpx;
+  }
+  
+  .overview-value {
+    font-size: 28rpx;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .overview-label {
+    font-size: 18rpx;
+    color: #606266;
+  }
+  
+  /* 筛选条件 */
+  .filter-row {
+    display: flex;
+    gap: 16rpx;
+    flex-wrap: wrap;
+  }
+  
+  .filter-item {
+    flex: 1;
+    min-width: 200rpx;
+  }
+  
+  .filter-label {
+    font-size: 24rpx;
+    color: #606266;
+    margin-bottom: 8rpx;
+  }
+  
+  .filter-control {
+    background-color: #f9f9f9;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+  }
+  
+  .picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .picker-text {
+    font-size: 24rpx;
+    color: #303133;
+  }
+  
+  /* 分润明细 */
+  .detail-card {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .detail-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 16rpx;
+    padding-bottom: 16rpx;
+    border-bottom: 1rpx solid #e0e0e0;
+  }
+  
+  .header-item {
+    flex: 1;
+    font-size: 20rpx;
+    font-weight: bold;
+    color: #606266;
+    text-align: center;
+  }
+  
+  .detail-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+    margin-bottom: 24rpx;
+  }
+  
+  .detail-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16rpx;
+    background-color: #fff;
+    border-radius: 8rpx;
+  }
+  
+  .detail-cell {
+    flex: 1;
+    font-size: 20rpx;
+    color: #303133;
+    text-align: center;
+  }
+  
+  .detail-cell.amount {
+    color: #f56c6c;
+    font-weight: 600;
+  }
+  
+  .status-pending {
+    color: #e6a23c;
+  }
+  
+  .status-settled {
+    color: #67c23a;
+  }
+  
+  .status-withdrawn {
+    color: #409eff;
+  }
+  
+  .detail-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 16rpx;
+    border-top: 1rpx solid #e0e0e0;
+  }
+  
+  .footer-text {
+    font-size: 20rpx;
+    color: #606266;
+  }
+  
+  .footer-controls {
+    display: flex;
+    gap: 16rpx;
+  }
+  
+  .control-btn {
+    padding: 8rpx 16rpx;
+    border-radius: 8rpx;
+    font-size: 20rpx;
+    color: #409eff;
+    cursor: pointer;
+  }
+  
+  .control-btn.disabled {
+    color: #909399;
+    cursor: not-allowed;
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/distribution/qrcode.vue b/src/pages/distribution/qrcode.vue
new file mode 100644
index 0000000..c7d5f03
--- /dev/null
+++ b/src/pages/distribution/qrcode.vue
@@ -0,0 +1,654 @@
+<template>
+  <view class="qrcode-manage-container">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <view class="header-left" @click="goBack">
+        <view class="back-icon">←</view>
+      </view>
+      <view class="header-title">专属二维码管理</view>
+      <view class="header-right" @click="generateBatchQrcode">
+        <view class="batch-btn">批量生成</view>
+      </view>
+    </view>
+    
+    <!-- 筛选条件 -->
+    <view class="filter-section">
+      <view class="filter-row">
+        <view class="filter-item">
+          <view class="filter-label">分销员</view>
+          <view class="filter-control">
+            <picker 
+              :range="distributorOptions" 
+              :value="distributorIndex"
+              @change="onDistributorChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ distributorOptions[distributorIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="filter-item">
+          <view class="filter-label">状态</view>
+          <view class="filter-control">
+            <picker 
+              :range="statusOptions" 
+              :value="statusIndex"
+              @change="onStatusChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ statusOptions[statusIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="filter-item">
+          <view class="filter-label">搜索</view>
+          <view class="filter-control">
+            <input 
+              v-model="searchKeyword" 
+              class="search-input"
+              placeholder="请输入推广码或备注"
+              @input="onSearch"
+            />
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 二维码列表 -->
+    <view class="qrcode-list-section">
+      <view class="section-title">二维码列表</view>
+      <view class="qrcode-grid">
+        <view 
+          v-for="(qrcode, index) in qrcodeList" 
+          :key="index"
+          class="qrcode-item"
+        >
+          <view class="qrcode-card">
+            <view class="qrcode-header">
+              <view class="qrcode-code">{{ qrcode.code }}</view>
+              <view class="qrcode-status" :class="qrcode.statusClass">{{ qrcode.status }}</view>
+            </view>
+            <view class="qrcode-body">
+              <view class="qrcode-image">
+                <!-- 模拟二维码图片 -->
+                <view class="mock-qrcode">
+                  <view class="qrcode-pattern"></view>
+                  <view class="qrcode-text">{{ qrcode.code }}</view>
+                </view>
+              </view>
+              <view class="qrcode-info">
+                <view class="info-item">
+                  <view class="info-label">分销员：</view>
+                  <view class="info-value">{{ qrcode.distributor }}</view>
+                </view>
+                <view class="info-item">
+                  <view class="info-label">生成时间：</view>
+                  <view class="info-value">{{ qrcode.createTime }}</view>
+                </view>
+                <view class="info-item">
+                  <view class="info-label">扫码次数：</view>
+                  <view class="info-value">{{ qrcode.scanCount }}</view>
+                </view>
+                <view class="info-item">
+                  <view class="info-label">备注：</view>
+                  <view class="info-value">{{ qrcode.remark }}</view>
+                </view>
+              </view>
+            </view>
+            <view class="qrcode-footer">
+              <view class="action-btn download-btn" @click="downloadQrcode(qrcode.id)">
+                下载
+              </view>
+              <view class="action-btn preview-btn" @click="previewQrcode(qrcode.id)">
+                预览
+              </view>
+              <view class="action-btn" :class="qrcode.status === '启用' ? 'disable-btn' : 'enable-btn'"
+                   @click="toggleQrcodeStatus(qrcode.id, qrcode.status)">
+                {{ qrcode.status === '启用' ? '禁用' : '启用' }}
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 空状态 -->
+    <view v-if="qrcodeList.length === 0" class="empty-state">
+      <view class="empty-icon">🔗</view>
+      <view class="empty-text">暂无二维码数据</view>
+    </view>
+    
+    <!-- 分页 -->
+    <view v-if="qrcodeList.length > 0" class="pagination">
+      <view class="page-info">
+        共 {{ totalQrcodes }} 条，当前第 {{ currentPage }} 页
+      </view>
+      <view class="page-controls">
+        <view 
+          class="page-btn" 
+          :class="{ disabled: currentPage === 1 }"
+          @click="goToPage(currentPage - 1)"
+        >
+          上一页
+        </view>
+        <view 
+          class="page-btn" 
+          :class="{ disabled: currentPage === totalPages }"
+          @click="goToPage(currentPage + 1)"
+        >
+          下一页
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { ref, computed, onMounted } from "vue"
+
+  // 分销员选项
+  const distributorOptions = ['全部分销员', '张分销', '李分销', '王分销', '刘分销']
+  const distributorIndex = ref(0)
+  
+  // 状态选项
+  const statusOptions = ['全部状态', '启用', '禁用']
+  const statusIndex = ref(0)
+  
+  // 搜索关键词
+  const searchKeyword = ref('')
+  
+  // 二维码列表
+  const qrcodeList = ref([
+    {
+      id: 1,
+      code: 'SD20260129001',
+      distributor: '张分销',
+      createTime: '2026-01-29 10:00:00',
+      scanCount: 120,
+      status: '启用',
+      statusClass: 'status-active',
+      remark: '推广活动专用'
+    },
+    {
+      id: 2,
+      code: 'SD20260129002',
+      distributor: '李分销',
+      createTime: '2026-01-29 11:00:00',
+      scanCount: 89,
+      status: '启用',
+      statusClass: 'status-active',
+      remark: '日常推广'
+    },
+    {
+      id: 3,
+      code: 'SD20260129003',
+      distributor: '王分销',
+      createTime: '2026-01-29 12:00:00',
+      scanCount: 45,
+      status: '禁用',
+      statusClass: 'status-inactive',
+      remark: '备用二维码'
+    },
+    {
+      id: 4,
+      code: 'SD20260129004',
+      distributor: '刘分销',
+      createTime: '2026-01-29 13:00:00',
+      scanCount: 67,
+      status: '启用',
+      statusClass: 'status-active',
+      remark: '线下活动专用'
+    }
+  ])
+  
+  // 分页信息
+  const currentPage = ref(1)
+  const totalQrcodes = ref(100)
+  const pageSize = ref(12)
+  
+  // 计算总页数
+  const totalPages = computed(() => {
+    return Math.ceil(totalQrcodes.value / pageSize.value)
+  })
+  
+  onMounted(() => {
+    // 实际项目中应从接口获取二维码列表
+    // loadQrcodeList()
+  })
+  
+  // 返回上一页
+  function goBack() {
+    uni.navigateBack({ delta: 1 })
+  }
+  
+  // 批量生成二维码
+  function generateBatchQrcode() {
+    uni.showModal({
+      title: '批量生成二维码',
+      content: '请输入要生成的二维码数量',
+      editable: true,
+      placeholderText: '请输入数量',
+      success: function(res) {
+        if (res.confirm && res.content) {
+          const count = parseInt(res.content)
+          if (isNaN(count) || count <= 0 || count > 100) {
+            uni.showToast({ 
+              title: '请输入1-100之间的数字', 
+              icon: 'none' 
+            })
+            return
+          }
+          
+          uni.showLoading({ title: '生成中...' })
+          
+          setTimeout(() => {
+            uni.hideLoading()
+            uni.showToast({ 
+              title: `成功生成${count}个二维码`, 
+              icon: 'success' 
+            })
+            // 实际项目中应调用接口批量生成二维码
+            // generateBatchQrcodes(count)
+          }, 1500)
+        }
+      }
+    })
+  }
+  
+  // 分销员变更
+  function onDistributorChange(e) {
+    const value = e.detail.value
+    distributorIndex.value = value
+    // 实际项目中应根据分销员筛选二维码
+    // filterQrcodeList()
+  }
+  
+  // 状态变更
+  function onStatusChange(e) {
+    const value = e.detail.value
+    statusIndex.value = value
+    // 实际项目中应根据状态筛选二维码
+    // filterQrcodeList()
+  }
+  
+  // 搜索
+  function onSearch() {
+    // 实际项目中应根据关键词搜索二维码
+    // searchQrcodeList()
+  }
+  
+  // 下载二维码
+  function downloadQrcode(id) {
+    uni.showLoading({ title: '下载中...' })
+    
+    setTimeout(() => {
+      uni.hideLoading()
+      uni.showToast({ 
+        title: '下载成功', 
+        icon: 'success' 
+      })
+      // 实际项目中应调用接口下载二维码
+      // downloadQrcodeById(id)
+    }, 1000)
+  }
+  
+  // 预览二维码
+  function previewQrcode(id) {
+    uni.showToast({ 
+      title: '预览功能开发中', 
+      icon: 'none' 
+    })
+  }
+  
+  // 切换二维码状态
+  function toggleQrcodeStatus(id, currentStatus) {
+    const newStatus = currentStatus === '启用' ? '禁用' : '启用'
+    
+    uni.showModal({
+      title: '切换状态',
+      content: `确定要${newStatus === '启用' ? '启用' : '禁用'}该二维码吗？`,
+      success: function(res) {
+        if (res.confirm) {
+          // 实际项目中应调用接口切换二维码状态
+          const qrcode = qrcodeList.value.find(item => item.id === id)
+          if (qrcode) {
+            qrcode.status = newStatus
+            qrcode.statusClass = newStatus === '启用' ? 'status-active' : 'status-inactive'
+          }
+          uni.showToast({ 
+            title: `二维码已${newStatus}`, 
+            icon: 'success' 
+          })
+        }
+      }
+    })
+  }
+  
+  // 跳转到指定页码
+  function goToPage(page) {
+    if (page < 1 || page > totalPages.value) {
+      return
+    }
+    currentPage.value = page
+    // 实际项目中应加载指定页码的二维码
+    // loadQrcodePage(page)
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: #f5f7fa;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+  /* #endif */
+
+  .qrcode-manage-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* 页面头部 */
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 120rpx;
+    background-color: #fff;
+    padding: 0 32rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .header-left {
+    width: 60rpx;
+  }
+  
+  .back-icon {
+    font-size: 40rpx;
+    color: #303133;
+    cursor: pointer;
+  }
+  
+  .header-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .header-right {
+    width: 120rpx;
+    text-align: right;
+  }
+  
+  .batch-btn {
+    font-size: 24rpx;
+    color: #409eff;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  /* 筛选条件 */
+  .filter-section {
+    padding: 24rpx 32rpx;
+    background-color: #fff;
+    margin: 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .filter-row {
+    display: flex;
+    gap: 16rpx;
+    flex-wrap: wrap;
+  }
+  
+  .filter-item {
+    flex: 1;
+    min-width: 200rpx;
+  }
+  
+  .filter-label {
+    font-size: 24rpx;
+    color: #606266;
+    margin-bottom: 8rpx;
+  }
+  
+  .filter-control {
+    background-color: #f9f9f9;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+  }
+  
+  .picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .picker-text {
+    font-size: 24rpx;
+    color: #303133;
+  }
+  
+  .search-input {
+    font-size: 24rpx;
+    color: #303133;
+    width: 100%;
+  }
+  
+  /* 二维码列表 */
+  .qrcode-list-section {
+    flex: 1;
+    padding: 0 16rpx;
+  }
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 24rpx;
+    padding-left: 12rpx;
+    border-left: 8rpx solid #409eff;
+    line-height: 1.2;
+  }
+  
+  .qrcode-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
+    gap: 16rpx;
+  }
+  
+  .qrcode-item {
+    background-color: #fff;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .qrcode-card {
+    padding: 24rpx;
+  }
+  
+  .qrcode-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16rpx;
+  }
+  
+  .qrcode-code {
+    font-size: 20rpx;
+    font-weight: 600;
+    color: #303133;
+  }
+  
+  .qrcode-status {
+    font-size: 16rpx;
+    font-weight: 600;
+    padding: 4rpx 12rpx;
+    border-radius: 12rpx;
+  }
+  
+  .status-active {
+    color: #67c23a;
+    background-color: rgba(103, 194, 58, 0.1);
+  }
+  
+  .status-inactive {
+    color: #909399;
+    background-color: rgba(144, 147, 153, 0.1);
+  }
+  
+  .qrcode-body {
+    margin-bottom: 16rpx;
+  }
+  
+  .qrcode-image {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 16rpx;
+  }
+  
+  .mock-qrcode {
+    width: 200rpx;
+    height: 200rpx;
+    background-color: #f9f9f9;
+    border-radius: 8rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .qrcode-pattern {
+    width: 160rpx;
+    height: 160rpx;
+    background-color: #303133;
+    margin-bottom: 8rpx;
+  }
+  
+  .qrcode-text {
+    font-size: 16rpx;
+    color: #606266;
+  }
+  
+  .qrcode-info {
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+  }
+  
+  .info-item {
+    display: flex;
+    font-size: 18rpx;
+  }
+  
+  .info-label {
+    color: #606266;
+    width: 80rpx;
+  }
+  
+  .info-value {
+    color: #303133;
+    flex: 1;
+  }
+  
+  .qrcode-footer {
+    display: flex;
+    justify-content: space-between;
+  }
+  
+  .action-btn {
+    padding: 8rpx 16rpx;
+    border-radius: 8rpx;
+    font-size: 16rpx;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  .download-btn {
+    background-color: #ecf5ff;
+    color: #409eff;
+  }
+  
+  .preview-btn {
+    background-color: #f0f9eb;
+    color: #67c23a;
+  }
+  
+  .disable-btn {
+    background-color: #fef0f0;
+    color: #f56c6c;
+  }
+  
+  .enable-btn {
+    background-color: #f0f9eb;
+    color: #67c23a;
+  }
+  
+  /* 空状态 */
+  .empty-state {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 100rpx 0;
+  }
+  
+  .empty-icon {
+    font-size: 80rpx;
+    margin-bottom: 24rpx;
+  }
+  
+  .empty-text {
+    font-size: 24rpx;
+    color: #909399;
+  }
+  
+  /* 分页 */
+  .pagination {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24rpx;
+    background-color: #fff;
+    margin: 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .page-info {
+    font-size: 20rpx;
+    color: #606266;
+  }
+  
+  .page-controls {
+    display: flex;
+    gap: 16rpx;
+  }
+  
+  .page-btn {
+    padding: 8rpx 16rpx;
+    border-radius: 8rpx;
+    font-size: 20rpx;
+    font-weight: 600;
+    color: #409eff;
+    cursor: pointer;
+  }
+  
+  .page-btn.disabled {
+    color: #909399;
+    cursor: not-allowed;
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/distributor/add.vue b/src/pages/distributor/add.vue
index 72a1484..9af88e7 100644
--- a/src/pages/distributor/add.vue
+++ b/src/pages/distributor/add.vue
@@ -1,224 +1,314 @@
 <template>
-  <view class="add-container">
-    <!-- 头部 -->
-    <view class="header">
-      <uni-icons type="back" size="28" color="#303133" @click="handleCancel" />
-      <text class="title">新增分销员</text>
-      <view class="header-right"></view>
+  <view class="distributor-add-container">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <view class="header-left" @click="goBack">
+        <view class="back-icon">←</view>
+      </view>
+      <view class="header-title">添加分销员</view>
+      <view class="header-right" @click="saveDistributor">
+        <view class="save-btn">保存</view>
+      </view>
     </view>
     
-    <!-- 表单容器 -->
-    <view class="form-container">
-      <uni-forms :model="formData" ref="formRef" labelWidth="100rpx">
-        <uni-forms-item label="姓名" required name="name">
-          <uni-easyinput 
-            v-model="formData.name" 
-            placeholder="请输入姓名" 
-            class="form-input"
-            :focus="true"
-          />
-        </uni-forms-item>
-        
-        <uni-forms-item label="手机号" required name="phone">
-          <uni-easyinput 
-            v-model="formData.phone" 
-            placeholder="请输入手机号" 
-            class="form-input"
-          />
-        </uni-forms-item>
-        
-        <uni-forms-item label="OpenID" required name="openid">
-          <uni-easyinput 
-            v-model="formData.openid" 
-            placeholder="请输入OpenID" 
-            class="form-input"
-          />
-        </uni-forms-item>
-        
-        <uni-forms-item label="父ID" required name="parent_id">
-          <uni-easyinput 
-            v-model="formData.parent_id" 
-            placeholder="请输入父ID" 
-            type="number" 
-            class="form-input"
-          />
-        </uni-forms-item>
-        
-        <uni-forms-item label="租户ID" required name="tenant_id">
-          <uni-easyinput 
-            v-model="formData.tenant_id" 
-            placeholder="请输入租户ID" 
-            type="number" 
-            class="form-input"
-          />
-        </uni-forms-item>
-        
-        <uni-forms-item label="苹果URL" name="applet_url">
-          <uni-easyinput 
-            v-model="formData.applet_url" 
-            placeholder="请输入苹果URL" 
-            class="form-input"
-          />
-        </uni-forms-item>
-        
-        <uni-forms-item label="状态" name="is_active">
-          <uni-data-checkbox 
-            v-model="formData.is_active" 
-            :localdata="statusOptions" 
-            style="width: 100%"
-          />
-        </uni-forms-item>
-      </uni-forms>
-    </view>
-    
-    <!-- 按钮容器 -->
-    <view class="btn-container">
-      <button class="cancel-btn" @click="handleCancel">
-        <uni-icons type="close" size="20" color="#fff" />
-        <text class="btn-text">取消</text>
-      </button>
-      <button class="submit-btn" @click="handleSubmit">
-        <uni-icons type="checkmark" size="20" color="#fff" />
-        <text class="btn-text">提交</text>
-      </button>
+    <!-- 表单内容 -->
+    <view class="form-section">
+      <view class="section-title">基本信息</view>
+      <view class="form-card">
+        <view class="form-row">
+          <view class="form-label">姓名</view>
+          <view class="form-control">
+            <input 
+              v-model="distributorForm.name" 
+              class="form-input"
+              placeholder="请输入姓名"
+            />
+          </view>
+        </view>
+        <view class="form-row">
+          <view class="form-label">手机号</view>
+          <view class="form-control">
+            <input 
+              v-model="distributorForm.phone" 
+              type="number" 
+              class="form-input"
+              placeholder="请输入手机号"
+              maxlength="11"
+            />
+          </view>
+        </view>
+        <view class="form-row">
+          <view class="form-label">角色</view>
+          <view class="form-control">
+            <picker 
+              :range="roleOptions" 
+              :value="roleIndex"
+              @change="onRoleChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ roleOptions[roleIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="form-row">
+          <view class="form-label">状态</view>
+          <view class="form-control">
+            <picker 
+              :range="statusOptions" 
+              :value="statusIndex"
+              @change="onStatusChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ statusOptions[statusIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="form-row">
+          <view class="form-label">备注</view>
+          <view class="form-control">
+            <textarea 
+              v-model="distributorForm.remark" 
+              class="form-textarea"
+              placeholder="请输入备注信息"
+              maxlength="200"
+            ></textarea>
+            <view class="textarea-count">{{ distributorForm.remark.length }}/200</view>
+          </view>
+        </view>
+      </view>
     </view>
   </view>
 </template>
 
 <script setup>
-  import { ref } from "vue"
+  import { ref, onMounted } from "vue"
 
-  const formRef = ref(null)
-  
-  const formData = ref({
+  // 分销员表单数据
+  const distributorForm = ref({
     name: '',
     phone: '',
-    openid: '',
-    parent_id: '',
-    tenant_id: '',
-    applet_url: '',
-    is_active: 'Y'
+    role: '初级分销员',
+    status: '启用',
+    remark: ''
   })
   
-  const statusOptions = [
-    { text: '激活', value: 'Y' },
-    { text: '未激活', value: 'N' }
-  ]
-
-  // 取消
-  function handleCancel() {
-    uni.navigateBack()
+  // 角色选项
+  const roleOptions = ['初级分销员', '中级分销员', '高级分销员']
+  const roleIndex = ref(0)
+  
+  // 状态选项
+  const statusOptions = ['启用', '禁用']
+  const statusIndex = ref(0)
+  
+  onMounted(() => {
+    // 初始化表单数据
+  })
+  
+  // 返回上一页
+  function goBack() {
+    uni.navigateBack({ delta: 1 })
   }
-
-  // 提交
-  function handleSubmit() {
-    formRef.value.validate().then(() => {
-      // 这里应该调用后端API提交数据
-      uni.showToast({ title: '新增成功' })
-      uni.navigateTo({ url: '/pages/distributor/index' })
-    }).catch(err => {
-      console.log('表单验证失败', err)
-    })
+  
+  // 保存分销员
+  function saveDistributor() {
+    if (!distributorForm.value.name) {
+      uni.showToast({ 
+        title: '请输入姓名', 
+        icon: 'none' 
+      })
+      return
+    }
+    
+    if (!distributorForm.value.phone || distributorForm.value.phone.length !== 11) {
+      uni.showToast({ 
+        title: '请输入有效的手机号', 
+        icon: 'none' 
+      })
+      return
+    }
+    
+    uni.showLoading({ title: '保存中...' })
+    
+    setTimeout(() => {
+      uni.hideLoading()
+      uni.showToast({ 
+        title: '添加成功', 
+        icon: 'success' 
+      })
+      // 实际项目中应调用接口保存分销员
+      // saveDistributorData()
+      
+      // 保存成功后返回上一页
+      setTimeout(() => {
+        goBack()
+      }, 1000)
+    }, 1500)
+  }
+  
+  // 角色变更
+  function onRoleChange(e) {
+    const value = e.detail.value
+    roleIndex.value = value
+    distributorForm.value.role = roleOptions[value]
+  }
+  
+  // 状态变更
+  function onStatusChange(e) {
+    const value = e.detail.value
+    statusIndex.value = value
+    distributorForm.value.status = statusOptions[value]
   }
 </script>
 
 <style lang="scss" scoped>
-  .add-container {
-    padding: 20rpx;
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
     background-color: #f5f7fa;
-    min-height: 100vh;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+  /* #endif */
+
+  .distributor-add-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
   }
   
-  /* 头部样式 */
-  .header {
+  /* 页面头部 */
+  .page-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 24rpx;
-    padding-bottom: 16rpx;
-    border-bottom: 2rpx solid #ecf5ff;
+    height: 120rpx;
+    background-color: #fff;
+    padding: 0 32rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
   }
   
-  .title {
+  .header-left {
+    width: 60rpx;
+  }
+  
+  .back-icon {
+    font-size: 40rpx;
+    color: #303133;
+    cursor: pointer;
+  }
+  
+  .header-title {
     font-size: 32rpx;
-    font-weight: 600;
+    font-weight: bold;
     color: #303133;
   }
   
   .header-right {
-    width: 28px;
+    width: 60rpx;
+    text-align: right;
   }
   
-  /* 表单容器样式 */
-  .form-container {
+  .save-btn {
+    font-size: 24rpx;
+    color: #409eff;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  /* 表单内容 */
+  .form-section {
+    padding: 32rpx;
     background-color: #fff;
+    margin: 0 16rpx 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 24rpx;
+    padding-left: 12rpx;
+    border-left: 8rpx solid #409eff;
+    line-height: 1.2;
+  }
+  
+  .form-card {
+    background-color: #f9f9f9;
     border-radius: 12rpx;
     padding: 24rpx;
+  }
+  
+  .form-row {
+    display: flex;
+    flex-direction: column;
     margin-bottom: 24rpx;
-    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
   }
   
-  /* 表单输入框样式 */
+  .form-row:last-child {
+    margin-bottom: 0;
+  }
+  
+  .form-label {
+    font-size: 24rpx;
+    color: #606266;
+    margin-bottom: 8rpx;
+  }
+  
+  .form-control {
+    position: relative;
+  }
+  
   .form-input {
-    border-radius: 8rpx !important;
-    border: 1rpx solid #dcdfe6 !important;
-    transition: all 0.3s ease !important;
-  }
-  
-  .form-input:focus {
-    border-color: #409eff !important;
-    box-shadow: 0 0 0 2rpx rgba(64, 158, 255, 0.2) !important;
-  }
-  
-  /* 按钮容器样式 */
-  .btn-container {
-    display: flex;
-    gap: 16rpx;
-    margin-top: 32rpx;
-  }
-  
-  .cancel-btn,
-  .submit-btn {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    padding: 16rpx 0;
+    width: 100%;
+    background-color: #fff;
+    border: 1rpx solid #dcdfe6;
     border-radius: 8rpx;
-    font-size: 28rpx;
-    transition: all 0.3s ease;
-    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+    padding: 16rpx;
+    font-size: 24rpx;
+    color: #303133;
   }
   
-  .cancel-btn:active,
-  .submit-btn:active {
-    transform: translateY(2rpx);
-    box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
+  .picker {
+    background-color: #fff;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
   
-  .cancel-btn {
-    background-color: #909399;
-    color: #fff;
+  .picker-text {
+    font-size: 24rpx;
+    color: #303133;
   }
   
-  .submit-btn {
-    background-color: #409eff;
-    color: #fff;
+  .form-textarea {
+    width: 100%;
+    height: 160rpx;
+    background-color: #fff;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+    font-size: 24rpx;
+    color: #303133;
+    resize: none;
   }
   
-  .btn-text {
-    margin-left: 8rpx;
-  }
-  
-  /* 响应式设计 */
-  @media screen and (max-width: 750rpx) {
-    .form-container {
-      padding: 20rpx;
-    }
-    
-    .btn-container {
-      margin-top: 24rpx;
-    }
+  .textarea-count {
+    position: absolute;
+    bottom: 8rpx;
+    right: 16rpx;
+    font-size: 18rpx;
+    color: #909399;
   }
 </style>
\ No newline at end of file
diff --git a/src/pages/distributor/edit.vue b/src/pages/distributor/edit.vue
index d49f8aa..6cf8039 100644
--- a/src/pages/distributor/edit.vue
+++ b/src/pages/distributor/edit.vue
@@ -1,85 +1,88 @@
 <template>
-  <view class="edit-container">
-    <!-- 头部 -->
-    <view class="header">
-      <uni-icons type="back" size="28" color="#303133" @click="handleCancel" />
-      <text class="title">修改分销员</text>
-      <view class="header-right"></view>
+  <view class="distributor-edit-container">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <view class="header-left" @click="goBack">
+        <view class="back-icon">←</view>
+      </view>
+      <view class="header-title">编辑分销员</view>
+      <view class="header-right" @click="saveDistributor">
+        <view class="save-btn">保存</view>
+      </view>
     </view>
     
-    <!-- 表单容器 -->
-    <view class="form-container">
-      <uni-forms :model="formData" ref="formRef" labelWidth="100rpx">
-        <uni-forms-item label="姓名" required name="name">
-          <uni-easyinput 
-            v-model="formData.name" 
-            placeholder="请输入姓名" 
-            class="form-input"
-          />
-        </uni-forms-item>
-        
-        <uni-forms-item label="手机号" required name="phone">
-          <uni-easyinput 
-            v-model="formData.phone" 
-            placeholder="请输入手机号" 
-            class="form-input"
-          />
-        </uni-forms-item>
-        
-        <uni-forms-item label="OpenID" required name="openid">
-          <uni-easyinput 
-            v-model="formData.openid" 
-            placeholder="请输入OpenID" 
-            class="form-input"
-          />
-        </uni-forms-item>
-        
-        <uni-forms-item label="父ID" required name="parent_id">
-          <uni-easyinput 
-            v-model="formData.parent_id" 
-            placeholder="请输入父ID" 
-            type="number" 
-            class="form-input"
-          />
-        </uni-forms-item>
-        
-        <uni-forms-item label="租户ID" required name="tenant_id">
-          <uni-easyinput 
-            v-model="formData.tenant_id" 
-            placeholder="请输入租户ID" 
-            type="number" 
-            class="form-input"
-          />
-        </uni-forms-item>
-        
-        <uni-forms-item label="苹果URL" name="applet_url">
-          <uni-easyinput 
-            v-model="formData.applet_url" 
-            placeholder="请输入苹果URL" 
-            class="form-input"
-          />
-        </uni-forms-item>
-        
-        <uni-forms-item label="状态" name="is_active">
-          <uni-data-checkbox 
-            v-model="formData.is_active" 
-            :localdata="statusOptions" 
-            style="width: 100%"
-          />
-        </uni-forms-item>
-      </uni-forms>
+    <!-- 表单内容 -->
+    <view class="form-section">
+      <view class="section-title">基本信息</view>
+      <view class="form-card">
+        <view class="form-row">
+          <view class="form-label">姓名</view>
+          <view class="form-control">
+            <input 
+              v-model="distributorForm.name" 
+              class="form-input"
+              placeholder="请输入姓名"
+            />
+          </view>
+        </view>
+        <view class="form-row">
+          <view class="form-label">手机号</view>
+          <view class="form-control">
+            <input 
+              v-model="distributorForm.phone" 
+              type="number" 
+              class="form-input"
+              placeholder="请输入手机号"
+              maxlength="11"
+            />
+          </view>
+        </view>
+        <view class="form-row">
+          <view class="form-label">角色</view>
+          <view class="form-control">
+            <picker 
+              :range="roleOptions" 
+              :value="roleIndex"
+              @change="onRoleChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ roleOptions[roleIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="form-row">
+          <view class="form-label">状态</view>
+          <view class="form-control">
+            <picker 
+              :range="statusOptions" 
+              :value="statusIndex"
+              @change="onStatusChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ statusOptions[statusIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="form-row">
+          <view class="form-label">备注</view>
+          <view class="form-control">
+            <textarea 
+              v-model="distributorForm.remark" 
+              class="form-textarea"
+              placeholder="请输入备注信息"
+              maxlength="200"
+            ></textarea>
+            <view class="textarea-count">{{ distributorForm.remark.length }}/200</view>
+          </view>
+        </view>
+      </view>
     </view>
     
-    <!-- 按钮容器 -->
-    <view class="btn-container">
-      <button class="cancel-btn" @click="handleCancel">
-        <uni-icons type="close" size="20" color="#fff" />
-        <text class="btn-text">取消</text>
-      </button>
-      <button class="submit-btn" @click="handleSubmit">
-        <uni-icons type="checkmark" size="20" color="#fff" />
-        <text class="btn-text">提交</text>
-      </button>
+    <!-- 操作按钮 -->
+    <view class="action-section">
+      <view class="action-btn delete-btn" @click="deleteDistributor">
+        删除分销员
+      </view>
     </view>
   </view>
 </template>
@@ -87,162 +90,286 @@
 <script setup>
   import { ref, onMounted } from "vue"
 
-  const formRef = ref(null)
-  const distributorId = ref(uni.getStorageSync('__uni_route_query')?.id || '')
-  
-  const formData = ref({
+  // 分销员表单数据
+  const distributorForm = ref({
     id: '',
-    name: '',
-    phone: '',
-    openid: '',
-    parent_id: '',
-    tenant_id: '',
-    applet_url: '',
-    is_active: 'Y'
+    name: '张三',
+    phone: '13800138001',
+    role: '初级分销员',
+    status: '启用',
+    remark: '默认分销员'
   })
   
-  const statusOptions = [
-    { text: '激活', value: 'Y' },
-    { text: '未激活', value: 'N' }
-  ]
-
-  // 初始化加载数据
+  // 角色选项
+  const roleOptions = ['初级分销员', '中级分销员', '高级分销员']
+  const roleIndex = ref(0)
+  
+  // 状态选项
+  const statusOptions = ['启用', '禁用']
+  const statusIndex = ref(0)
+  
   onMounted(() => {
-    fetchDistributorDetail()
+    // 实际项目中应从接口获取分销员详情
+    // loadDistributorDetail()
   })
-
-  // 获取分销员详情
-  function fetchDistributorDetail() {
-    // 这里应该调用后端API获取数据
-    // 模拟数据
+  
+  // 返回上一页
+  function goBack() {
+    uni.navigateBack({ delta: 1 })
+  }
+  
+  // 保存分销员
+  function saveDistributor() {
+    if (!distributorForm.value.name) {
+      uni.showToast({ 
+        title: '请输入姓名', 
+        icon: 'none' 
+      })
+      return
+    }
+    
+    if (!distributorForm.value.phone || distributorForm.value.phone.length !== 11) {
+      uni.showToast({ 
+        title: '请输入有效的手机号', 
+        icon: 'none' 
+      })
+      return
+    }
+    
+    uni.showLoading({ title: '保存中...' })
+    
     setTimeout(() => {
-      formData.value = {
-        id: distributorId.value,
-        name: '张三',
-        phone: '13800138001',
-        openid: 'openid123456',
-        parent_id: '0',
-        tenant_id: '1',
-        applet_url: 'https://example.com',
-        is_active: 'Y'
+      uni.hideLoading()
+      uni.showToast({ 
+        title: '保存成功', 
+        icon: 'success' 
+      })
+      // 实际项目中应调用接口保存分销员
+      // updateDistributorData()
+      
+      // 保存成功后返回上一页
+      setTimeout(() => {
+        goBack()
+      }, 1000)
+    }, 1500)
+  }
+  
+  // 删除分销员
+  function deleteDistributor() {
+    uni.showModal({
+      title: '删除分销员',
+      content: '确定要删除该分销员吗？',
+      success: function(res) {
+        if (res.confirm) {
+          uni.showLoading({ title: '删除中...' })
+          
+          setTimeout(() => {
+            uni.hideLoading()
+            uni.showToast({ 
+              title: '删除成功', 
+              icon: 'success' 
+            })
+            // 实际项目中应调用接口删除分销员
+            // deleteDistributorData()
+            
+            // 删除成功后返回上一页
+            setTimeout(() => {
+              goBack()
+            }, 1000)
+          }, 1500)
+        }
       }
-    }, 500)
-  }
-
-  // 取消
-  function handleCancel() {
-    uni.navigateBack()
-  }
-
-  // 提交
-  function handleSubmit() {
-    formRef.value.validate().then(() => {
-      // 这里应该调用后端API提交数据
-      uni.showToast({ title: '修改成功' })
-      uni.navigateTo({ url: '/pages/distributor/index' })
-    }).catch(err => {
-      console.log('表单验证失败', err)
     })
   }
+  
+  // 角色变更
+  function onRoleChange(e) {
+    const value = e.detail.value
+    roleIndex.value = value
+    distributorForm.value.role = roleOptions[value]
+  }
+  
+  // 状态变更
+  function onStatusChange(e) {
+    const value = e.detail.value
+    statusIndex.value = value
+    distributorForm.value.status = statusOptions[value]
+  }
 </script>
 
 <style lang="scss" scoped>
-  .edit-container {
-    padding: 20rpx;
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
     background-color: #f5f7fa;
-    min-height: 100vh;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+  /* #endif */
+
+  .distributor-edit-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
   }
   
-  /* 头部样式 */
-  .header {
+  /* 页面头部 */
+  .page-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 24rpx;
-    padding-bottom: 16rpx;
-    border-bottom: 2rpx solid #ecf5ff;
+    height: 120rpx;
+    background-color: #fff;
+    padding: 0 32rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
   }
   
-  .title {
+  .header-left {
+    width: 60rpx;
+  }
+  
+  .back-icon {
+    font-size: 40rpx;
+    color: #303133;
+    cursor: pointer;
+  }
+  
+  .header-title {
     font-size: 32rpx;
-    font-weight: 600;
+    font-weight: bold;
     color: #303133;
   }
   
   .header-right {
-    width: 28px;
+    width: 60rpx;
+    text-align: right;
   }
   
-  /* 表单容器样式 */
-  .form-container {
+  .save-btn {
+    font-size: 24rpx;
+    color: #409eff;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  /* 表单内容 */
+  .form-section {
+    padding: 32rpx;
     background-color: #fff;
+    margin: 0 16rpx 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 24rpx;
+    padding-left: 12rpx;
+    border-left: 8rpx solid #409eff;
+    line-height: 1.2;
+  }
+  
+  .form-card {
+    background-color: #f9f9f9;
     border-radius: 12rpx;
     padding: 24rpx;
+  }
+  
+  .form-row {
+    display: flex;
+    flex-direction: column;
     margin-bottom: 24rpx;
-    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
   }
   
-  /* 表单输入框样式 */
+  .form-row:last-child {
+    margin-bottom: 0;
+  }
+  
+  .form-label {
+    font-size: 24rpx;
+    color: #606266;
+    margin-bottom: 8rpx;
+  }
+  
+  .form-control {
+    position: relative;
+  }
+  
   .form-input {
-    border-radius: 8rpx !important;
-    border: 1rpx solid #dcdfe6 !important;
-    transition: all 0.3s ease !important;
-  }
-  
-  .form-input:focus {
-    border-color: #409eff !important;
-    box-shadow: 0 0 0 2rpx rgba(64, 158, 255, 0.2) !important;
-  }
-  
-  /* 按钮容器样式 */
-  .btn-container {
-    display: flex;
-    gap: 16rpx;
-    margin-top: 32rpx;
-  }
-  
-  .cancel-btn,
-  .submit-btn {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    padding: 16rpx 0;
+    width: 100%;
+    background-color: #fff;
+    border: 1rpx solid #dcdfe6;
     border-radius: 8rpx;
-    font-size: 28rpx;
-    transition: all 0.3s ease;
-    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+    padding: 16rpx;
+    font-size: 24rpx;
+    color: #303133;
   }
   
-  .cancel-btn:active,
-  .submit-btn:active {
-    transform: translateY(2rpx);
-    box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
+  .picker {
+    background-color: #fff;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
   
-  .cancel-btn {
-    background-color: #909399;
-    color: #fff;
+  .picker-text {
+    font-size: 24rpx;
+    color: #303133;
   }
   
-  .submit-btn {
-    background-color: #409eff;
-    color: #fff;
+  .form-textarea {
+    width: 100%;
+    height: 160rpx;
+    background-color: #fff;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+    font-size: 24rpx;
+    color: #303133;
+    resize: none;
   }
   
-  .btn-text {
-    margin-left: 8rpx;
+  .textarea-count {
+    position: absolute;
+    bottom: 8rpx;
+    right: 16rpx;
+    font-size: 18rpx;
+    color: #909399;
   }
   
-  /* 响应式设计 */
-  @media screen and (max-width: 750rpx) {
-    .form-container {
-      padding: 20rpx;
-    }
-    
-    .btn-container {
-      margin-top: 24rpx;
-    }
+  /* 操作按钮 */
+  .action-section {
+    padding: 32rpx;
+    background-color: #fff;
+    margin: 0 16rpx 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .action-btn {
+    width: 100%;
+    text-align: center;
+    padding: 20rpx;
+    border-radius: 8rpx;
+    font-size: 24rpx;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  .delete-btn {
+    background-color: #fef0f0;
+    color: #f56c6c;
   }
 </style>
\ No newline at end of file
diff --git a/src/pages/distributor/index.vue b/src/pages/distributor/index.vue
index 322e116..c948f56 100644
--- a/src/pages/distributor/index.vue
+++ b/src/pages/distributor/index.vue
@@ -1,398 +1,495 @@
 <template>
-  <view class="distributor-container">
-    <!-- 头部 -->
-    <view class="header">
-      <text class="title">分销员管理</text>
-      <button class="add-btn" @click="handleAdd">
-        <uni-icons type="plus" size="20" color="#fff" />
-        <text class="add-btn-text">新增分销员</text>
-      </button>
+  <view class="distributor-list-container">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <view class="header-left" @click="goBack">
+        <view class="back-icon">←</view>
+      </view>
+      <view class="header-title">分销员管理</view>
+      <view class="header-right" @click="addDistributor">
+        <view class="add-btn">添加</view>
+      </view>
     </view>
     
-    <!-- 搜索框 -->
-    <view class="search-box">
-      <view class="search-input-wrapper">
-        <uni-icons type="search" size="20" color="#909399" class="search-icon" />
-        <input 
-          v-model="searchForm.name" 
-          type="text" 
-          placeholder="请输入分销员姓名" 
-          class="search-input"
-        />
+    <!-- 筛选条件 -->
+    <view class="filter-section">
+      <view class="filter-row">
+        <view class="filter-item">
+          <view class="filter-label">状态</view>
+          <view class="filter-control">
+            <picker 
+              :range="statusOptions" 
+              :value="statusIndex"
+              @change="onStatusChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ statusOptions[statusIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="filter-item">
+          <view class="filter-label">搜索</view>
+          <view class="filter-control">
+            <input 
+              v-model="searchKeyword" 
+              class="search-input"
+              placeholder="请输入姓名或手机号"
+              @input="onSearch"
+            />
+          </view>
+        </view>
       </view>
-      <view class="search-input-wrapper">
-        <uni-icons type="phone" size="20" color="#909399" class="search-icon" />
-        <input 
-          v-model="searchForm.phone" 
-          type="text" 
-          placeholder="请输入手机号" 
-          class="search-input"
-        />
-      </view>
-      <button class="search-btn" @click="handleSearch">
-        <uni-icons type="search" size="20" color="#fff" />
-        <text class="search-btn-text">查询</text>
-      </button>
     </view>
     
-    <!-- 表格容器 -->
-    <view class="table-container">
-      <uni-table :loading="loading" border stripe emptyText="暂无数据">
-        <uni-tr>
-          <uni-th width="120">姓名</uni-th>
-          <uni-th width="150">手机号</uni-th>
-          <uni-th width="100">总收益</uni-th>
-          <uni-th width="100">可用收益</uni-th>
-          <uni-th width="80">状态</uni-th>
-          <uni-th width="180">操作</uni-th>
-        </uni-tr>
-        <uni-tr v-for="item in distributorList" :key="item.id" hover>
-          <uni-td>{{ item.name }}</uni-td>
-          <uni-td>{{ item.phone }}</uni-td>
-          <uni-td>{{ item.total_income }}</uni-td>
-          <uni-td>{{ item.available_income }}</uni-td>
-          <uni-td>
-            <view class="status-badge" :class="item.is_active === 'Y' ? 'active' : 'inactive'">
-              {{ item.is_active === 'Y' ? '激活' : '未激活' }}
+    <!-- 分销员列表 -->
+    <view class="distributor-list-section">
+      <view class="section-title">分销员列表</view>
+      <view class="distributor-list">
+        <view 
+          v-for="(distributor, index) in distributorList" 
+          :key="index"
+          class="distributor-item"
+        >
+          <view class="distributor-avatar">
+            <view class="avatar-placeholder">{{ getInitials(distributor.name) }}</view>
+          </view>
+          <view class="distributor-info">
+            <view class="distributor-name">{{ distributor.name }}</view>
+            <view class="distributor-meta">
+              <view class="meta-item">{{ distributor.phone }}</view>
+              <view class="meta-item">{{ distributor.role }}</view>
+              <view class="meta-item status-{{ distributor.statusClass }}">{{ distributor.status }}</view>
             </view>
-          </uni-td>
-          <uni-td>
-            <view class="action-buttons">
-              <button class="action-btn edit" @click="handleEdit(item)">
-                <uni-icons type="compose" size="18" color="#409eff" />
-                <text>修改</text>
-              </button>
-              <button class="action-btn delete" @click="handleDelete(item.id)">
-                <uni-icons type="trash" size="18" color="#f56c6c" />
-                <text>删除</text>
-              </button>
-              <button class="action-btn rule" @click="handleRule(item.id)">
-                <uni-icons type="settings" size="18" color="#e6a23c" />
-                <text>分润</text>
-              </button>
+          </view>
+          <view class="distributor-actions">
+            <view class="action-btn edit-btn" @click="editDistributor(distributor.id)">
+              编辑
             </view>
-          </uni-td>
-        </uni-tr>
-      </uni-table>
+            <view class="action-btn delete-btn" @click="deleteDistributor(distributor.id)">
+              删除
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 空状态 -->
+    <view v-if="distributorList.length === 0" class="empty-state">
+      <view class="empty-icon">👥</view>
+      <view class="empty-text">暂无分销员数据</view>
     </view>
     
     <!-- 分页 -->
-    <view class="pagination-container">
-      <uni-pagination 
-        :current="currentPage" 
-        :pageSize="pageSize" 
-        :total="total" 
-        @change="handlePageChange"
-        show-icon
-        prev-text="上一页"
-        next-text="下一页"
-      />
+    <view v-if="distributorList.length > 0" class="pagination">
+      <view class="page-info">
+        共 {{ totalDistributors }} 条，当前第 {{ currentPage }} 页
+      </view>
+      <view class="page-controls">
+        <view 
+          class="page-btn" 
+          :class="{ disabled: currentPage === 1 }"
+          @click="goToPage(currentPage - 1)"
+        >
+          上一页
+        </view>
+        <view 
+          class="page-btn" 
+          :class="{ disabled: currentPage === totalPages }"
+          @click="goToPage(currentPage + 1)"
+        >
+          下一页
+        </view>
+      </view>
     </view>
   </view>
 </template>
 
 <script setup>
-  import { ref, onMounted } from "vue"
+  import { ref, computed, onMounted } from "vue"
 
-  const loading = ref(false)
-  const distributorList = ref([])
-  const currentPage = ref(1)
-  const pageSize = ref(10)
-  const total = ref(0)
+  // 筛选条件
+  const statusOptions = ['全部状态', '启用', '禁用']
+  const statusIndex = ref(0)
+  const searchKeyword = ref('')
   
-  const searchForm = ref({
-    name: '',
-    phone: ''
+  // 分销员列表数据
+  const distributorList = ref([
+    {
+      id: 1,
+      name: '张三',
+      phone: '13800138001',
+      role: '初级分销员',
+      status: '启用',
+      statusClass: 'active'
+    },
+    {
+      id: 2,
+      name: '李四',
+      phone: '13800138002',
+      role: '中级分销员',
+      status: '启用',
+      statusClass: 'active'
+    },
+    {
+      id: 3,
+      name: '王五',
+      phone: '13800138003',
+      role: '高级分销员',
+      status: '禁用',
+      statusClass: 'inactive'
+    }
+  ])
+  
+  // 分页信息
+  const currentPage = ref(1)
+  const totalDistributors = ref(50)
+  const pageSize = ref(10)
+  
+  // 计算总页数
+  const totalPages = computed(() => {
+    return Math.ceil(totalDistributors.value / pageSize.value)
   })
-
-  // 初始化加载数据
+  
   onMounted(() => {
-    fetchDistributorList()
+    // 实际项目中应从接口获取分销员列表
+    // loadDistributorList()
   })
-
-  // 获取分销员列表
-  function fetchDistributorList() {
-    loading.value = true
-    // 这里应该调用后端API获取数据
-    // 模拟数据
-    setTimeout(() => {
-      distributorList.value = [
-        {
-          id: 1,
-          name: '张三',
-          phone: '13800138001',
-          total_income: 1000.00,
-          available_income: 800.00,
-          is_active: 'Y'
-        },
-        {
-          id: 2,
-          name: '李四',
-          phone: '13900139002',
-          total_income: 2000.00,
-          available_income: 1500.00,
-          is_active: 'Y'
-        }
-      ]
-      total.value = 2
-      loading.value = false
-    }, 500)
+  
+  // 返回上一页
+  function goBack() {
+    uni.navigateBack({ delta: 1 })
   }
-
-  // 搜索
-  function handleSearch() {
-    currentPage.value = 1
-    fetchDistributorList()
-  }
-
-  // 分页
-  function handlePageChange(e) {
-    currentPage.value = e.current
-    fetchDistributorList()
-  }
-
-  // 新增分销员
-  function handleAdd() {
-    // 跳转到新增页面
-    uni.navigateTo({ url: '/pages/distributor/add' })
-  }
-
-  // 修改分销员
-  function handleEdit(item) {
-    // 跳转到修改页面，并传递参数
-    uni.navigateTo({
-      url: `/pages/distributor/edit?id=${item.id}`
+  
+  // 添加分销员
+  function addDistributor() {
+    uni.showToast({ 
+      title: '添加分销员功能开发中', 
+      icon: 'none' 
     })
   }
-
+  
+  // 编辑分销员
+  function editDistributor(id) {
+    uni.showToast({ 
+      title: '编辑分销员功能开发中', 
+      icon: 'none' 
+    })
+  }
+  
   // 删除分销员
-  function handleDelete(id) {
+  function deleteDistributor(id) {
     uni.showModal({
-      title: '提示',
+      title: '删除分销员',
       content: '确定要删除该分销员吗？',
-      success: (res) => {
+      success: function(res) {
         if (res.confirm) {
-          // 这里应该调用后端API删除数据
-          fetchDistributorList()
-          uni.showToast({ title: '删除成功' })
+          // 实际项目中应调用接口删除分销员
+          const index = distributorList.value.findIndex(item => item.id === id)
+          if (index !== -1) {
+            distributorList.value.splice(index, 1)
+          }
+          uni.showToast({ 
+            title: '删除成功', 
+            icon: 'success' 
+          })
         }
       }
     })
   }
-
-  // 配置分润规则
-  function handleRule(id) {
-    // 跳转到分润规则配置页面
-    uni.navigateTo({
-      url: `/pages/distributor/rule?id=${id}`
-    })
+  
+  // 状态变更
+  function onStatusChange(e) {
+    const value = e.detail.value
+    statusIndex.value = value
+    // 实际项目中应根据状态筛选分销员
+    // filterDistributorList()
+  }
+  
+  // 搜索
+  function onSearch() {
+    // 实际项目中应根据关键词搜索分销员
+    // searchDistributorList()
+  }
+  
+  // 跳转到指定页码
+  function goToPage(page) {
+    if (page < 1 || page > totalPages.value) {
+      return
+    }
+    currentPage.value = page
+    // 实际项目中应加载指定页码的分销员
+    // loadDistributorPage(page)
+  }
+  
+  // 获取姓名首字母
+  function getInitials(name) {
+    return name.charAt(0).toUpperCase()
   }
 </script>
 
 <style lang="scss" scoped>
-  .distributor-container {
-    padding: 20rpx;
-    background-color: #f5f7fa;
-    min-height: 100vh;
-  }
-  
-  /* 头部样式 */
-  .header {
+  /* #ifndef APP-NVUE */
+  page {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 24rpx;
-    padding-bottom: 16rpx;
-    border-bottom: 2rpx solid #ecf5ff;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: #f5f7fa;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+  /* #endif */
+
+  .distributor-list-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
   }
   
-  .title {
-    font-size: 32rpx;
-    font-weight: 600;
+  /* 页面头部 */
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 120rpx;
+    background-color: #fff;
+    padding: 0 32rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .header-left {
+    width: 60rpx;
+  }
+  
+  .back-icon {
+    font-size: 40rpx;
     color: #303133;
+    cursor: pointer;
+  }
+  
+  .header-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .header-right {
+    width: 60rpx;
+    text-align: right;
   }
   
   .add-btn {
-    display: flex;
-    align-items: center;
-    background-color: #409eff;
-    color: #fff;
-    border: none;
-    padding: 12rpx 24rpx;
-    border-radius: 8rpx;
     font-size: 24rpx;
-    transition: all 0.3s ease;
-    box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.3);
+    color: #409eff;
+    font-weight: 600;
+    cursor: pointer;
   }
   
-  .add-btn:active {
-    transform: translateY(2rpx);
-    box-shadow: 0 1rpx 4rpx rgba(64, 158, 255, 0.3);
-  }
-  
-  .add-btn-text {
-    margin-left: 8rpx;
-  }
-  
-  /* 搜索框样式 */
-  .search-box {
-    display: flex;
-    margin-bottom: 24rpx;
-    gap: 16rpx;
-    align-items: center;
-  }
-  
-  .search-input-wrapper {
-    flex: 1;
-    display: flex;
-    align-items: center;
+  /* 筛选条件 */
+  .filter-section {
+    padding: 24rpx 32rpx;
     background-color: #fff;
+    margin: 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .filter-row {
+    display: flex;
+    gap: 16rpx;
+  }
+  
+  .filter-item {
+    flex: 1;
+  }
+  
+  .filter-label {
+    font-size: 24rpx;
+    color: #606266;
+    margin-bottom: 8rpx;
+  }
+  
+  .filter-control {
+    background-color: #f9f9f9;
     border: 1rpx solid #dcdfe6;
     border-radius: 8rpx;
-    padding: 0 16rpx;
-    transition: all 0.3s ease;
+    padding: 16rpx;
   }
   
-  .search-input-wrapper:focus-within {
-    border-color: #409eff;
-    box-shadow: 0 0 0 2rpx rgba(64, 158, 255, 0.2);
+  .picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
   
-  .search-icon {
-    margin-right: 12rpx;
-  }
-  
-  .search-input {
-    flex: 1;
-    padding: 16rpx 0;
-    border: none;
+  .picker-text {
     font-size: 24rpx;
     color: #303133;
   }
   
-  .search-input::placeholder {
-    color: #909399;
-  }
-  
-  .search-btn {
-    display: flex;
-    align-items: center;
-    background-color: #67c23a;
-    color: #fff;
-    border: none;
-    padding: 16rpx 24rpx;
-    border-radius: 8rpx;
+  .search-input {
     font-size: 24rpx;
-    transition: all 0.3s ease;
-    box-shadow: 0 2rpx 8rpx rgba(103, 194, 58, 0.3);
+    color: #303133;
+    width: 100%;
   }
   
-  .search-btn:active {
-    transform: translateY(2rpx);
-    box-shadow: 0 1rpx 4rpx rgba(103, 194, 58, 0.3);
+  /* 分销员列表 */
+  .distributor-list-section {
+    flex: 1;
+    padding: 0 16rpx;
   }
   
-  .search-btn-text {
-    margin-left: 8rpx;
-  }
-  
-  /* 表格容器样式 */
-  .table-container {
-    background-color: #fff;
-    border-radius: 12rpx;
-    overflow: hidden;
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
     margin-bottom: 24rpx;
-    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    padding-left: 12rpx;
+    border-left: 8rpx solid #409eff;
+    line-height: 1.2;
   }
   
-  /* 状态标签样式 */
-  .status-badge {
-    display: inline-block;
-    padding: 4rpx 12rpx;
-    border-radius: 12rpx;
-    font-size: 20rpx;
-    font-weight: 500;
-  }
-  
-  .status-badge.active {
-    background-color: #f0f9eb;
-    color: #67c23a;
-  }
-  
-  .status-badge.inactive {
-    background-color: #fef0f0;
-    color: #f56c6c;
-  }
-  
-  /* 操作按钮样式 */
-  .action-buttons {
+  .distributor-list {
     display: flex;
-    gap: 8rpx;
-    align-items: center;
+    flex-direction: column;
+    gap: 16rpx;
   }
   
-  .action-btn {
+  .distributor-item {
+    display: flex;
+    align-items: center;
+    background-color: #fff;
+    border-radius: 16rpx;
+    padding: 24rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .distributor-avatar {
+    width: 80rpx;
+    height: 80rpx;
+    border-radius: 40rpx;
+    background-color: #409eff;
     display: flex;
     align-items: center;
     justify-content: center;
-    border: none;
-    padding: 8rpx 12rpx;
-    border-radius: 6rpx;
+    margin-right: 24rpx;
+  }
+  
+  .avatar-placeholder {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #fff;
+  }
+  
+  .distributor-info {
+    flex: 1;
+  }
+  
+  .distributor-name {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 8rpx;
+  }
+  
+  .distributor-meta {
+    display: flex;
+    gap: 16rpx;
+    flex-wrap: wrap;
+  }
+  
+  .meta-item {
     font-size: 20rpx;
-    transition: all 0.3s ease;
+    color: #606266;
   }
   
-  .action-btn:active {
-    transform: translateY(1rpx);
+  .meta-item.status-active {
+    color: #67c23a;
   }
   
-  .action-btn.edit {
+  .meta-item.status-inactive {
+    color: #909399;
+  }
+  
+  .distributor-actions {
+    display: flex;
+    gap: 16rpx;
+  }
+  
+  .action-btn {
+    padding: 8rpx 16rpx;
+    border-radius: 8rpx;
+    font-size: 16rpx;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  .edit-btn {
     background-color: #ecf5ff;
     color: #409eff;
   }
   
-  .action-btn.delete {
+  .delete-btn {
     background-color: #fef0f0;
     color: #f56c6c;
   }
   
-  .action-btn.rule {
-    background-color: #fdf6ec;
-    color: #e6a23c;
-  }
-  
-  .action-btn text {
-    margin-left: 4rpx;
-  }
-  
-  /* 分页样式 */
-  .pagination-container {
+  /* 空状态 */
+  .empty-state {
+    flex: 1;
     display: flex;
-    justify-content: flex-end;
-    padding: 16rpx 0;
-    background-color: #fff;
-    border-radius: 12rpx;
-    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 100rpx 0;
   }
   
-  /* 响应式设计 */
-  @media screen and (max-width: 750rpx) {
-    .search-box {
-      flex-direction: column;
-      align-items: stretch;
-    }
-    
-    .search-input-wrapper {
-      width: 100%;
-    }
-    
-    .action-buttons {
-      flex-wrap: wrap;
-    }
-    
-    .action-btn {
-      flex: 1;
-      min-width: 80rpx;
-    }
+  .empty-icon {
+    font-size: 80rpx;
+    margin-bottom: 24rpx;
+  }
+  
+  .empty-text {
+    font-size: 24rpx;
+    color: #909399;
+  }
+  
+  /* 分页 */
+  .pagination {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24rpx;
+    background-color: #fff;
+    margin: 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .page-info {
+    font-size: 20rpx;
+    color: #606266;
+  }
+  
+  .page-controls {
+    display: flex;
+    gap: 16rpx;
+  }
+  
+  .page-btn {
+    padding: 8rpx 16rpx;
+    border-radius: 8rpx;
+    font-size: 20rpx;
+    color: #409eff;
+    cursor: pointer;
+  }
+  
+  .page-btn.disabled {
+    color: #909399;
+    cursor: not-allowed;
   }
 </style>
\ No newline at end of file
diff --git a/src/pages/distributor/rule.vue b/src/pages/distributor/rule.vue
index efd6c79..9a3f967 100644
--- a/src/pages/distributor/rule.vue
+++ b/src/pages/distributor/rule.vue
@@ -1,40 +1,153 @@
 <template>
-  <view class="rule-container">
-    <view class="header">
-      <text class="title">分润规则配置</text>
+  <view class="distributor-rule-container">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <view class="header-left" @click="goBack">
+        <view class="back-icon">←</view>
+      </view>
+      <view class="header-title">分销规则配置</view>
+      <view class="header-right" @click="saveRule">
+        <view class="save-btn">保存</view>
+      </view>
     </view>
     
-    <view class="form-container">
-      <uni-forms :model="ruleForm" ref="formRef">
-        <uni-forms-item label="分销员ID" required>
-          <uni-easyinput v-model="ruleForm.distributor_id" placeholder="请输入分销员ID" type="number" />
-        </uni-forms-item>
-        
-        <uni-forms-item label="分润比例" required>
-          <uni-easyinput v-model="ruleForm.profit_ratio" placeholder="请输入分润比例（%）" type="number" />
-        </uni-forms-item>
-        
-        <uni-forms-item label="规则名称" required>
-          <uni-easyinput v-model="ruleForm.rule_name" placeholder="请输入规则名称" />
-        </uni-forms-item>
-        
-        <uni-forms-item label="规则描述">
-          <uni-easyinput v-model="ruleForm.rule_desc" placeholder="请输入规则描述" type="textarea" />
-        </uni-forms-item>
-        
-        <uni-forms-item label="生效时间">
-          <uni-datetime-picker v-model="ruleForm.effective_time" type="datetime" placeholder="请选择生效时间" />
-        </uni-forms-item>
-        
-        <uni-forms-item label="失效时间">
-          <uni-datetime-picker v-model="ruleForm.expire_time" type="datetime" placeholder="请选择失效时间" />
-        </uni-forms-item>
-      </uni-forms>
+    <!-- 规则配置 -->
+    <view class="rule-section">
+      <view class="section-title">基本规则</view>
+      <view class="rule-card">
+        <view class="rule-row">
+          <view class="rule-label">分销员申请审核</view>
+          <view class="rule-control">
+            <switch 
+              :checked="ruleForm.needAudit" 
+              @change="onAuditChange"
+              class="switch"
+            />
+          </view>
+        </view>
+        <view class="rule-row">
+          <view class="rule-label">分销员等级制度</view>
+          <view class="rule-control">
+            <switch 
+              :checked="ruleForm.enableLevel" 
+              @change="onLevelChange"
+              class="switch"
+            />
+          </view>
+        </view>
+        <view class="rule-row">
+          <view class="rule-label">分销员自购优惠</view>
+          <view class="rule-control">
+            <switch 
+              :checked="ruleForm.enableSelfBuy" 
+              @change="onSelfBuyChange"
+              class="switch"
+            />
+          </view>
+        </view>
+        <view class="rule-row">
+          <view class="rule-label">分销员邀请奖励</view>
+          <view class="rule-control">
+            <switch 
+              :checked="ruleForm.enableInviteReward" 
+              @change="onInviteRewardChange"
+              class="switch"
+            />
+          </view>
+        </view>
+      </view>
     </view>
     
-    <view class="btn-container">
-      <button class="cancel-btn" @click="handleCancel">取消</button>
-      <button class="submit-btn" @click="handleSubmit">提交</button>
+    <!-- 等级配置 -->
+    <view class="rule-section" v-if="ruleForm.enableLevel">
+      <view class="section-title">等级配置</view>
+      <view class="rule-card">
+        <view class="level-config">
+          <view 
+            v-for="(level, index) in levelList" 
+            :key="index"
+            class="level-item"
+          >
+            <view class="level-header">
+              <view class="level-title">{{ level.name }}</view>
+              <view class="level-condition">
+                <view class="condition-label">升级条件：</view>
+                <view class="condition-value">{{ level.condition }}</view>
+              </view>
+            </view>
+            <view class="level-benefit">
+              <view class="benefit-item">
+                <view class="benefit-label">分销佣金比例：</view>
+                <view class="benefit-value">{{ level.commissionRate }}%</view>
+              </view>
+              <view class="benefit-item">
+                <view class="benefit-label">自购优惠比例：</view>
+                <view class="benefit-value">{{ level.selfBuyRate }}%</view>
+              </view>
+              <view class="benefit-item">
+                <view class="benefit-label">邀请奖励：</view>
+                <view class="benefit-value">¥{{ level.inviteReward.toFixed(2) }}</view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 佣金规则 -->
+    <view class="rule-section">
+      <view class="section-title">佣金规则</view>
+      <view class="rule-card">
+        <view class="rule-row">
+          <view class="rule-label">佣金计算方式</view>
+          <view class="rule-control">
+            <picker 
+              :range="commissionTypeOptions" 
+              :value="commissionTypeIndex"
+              @change="onCommissionTypeChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ commissionTypeOptions[commissionTypeIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="rule-row">
+          <view class="rule-label">佣金结算周期</view>
+          <view class="rule-control">
+            <picker 
+              :range="settlementCycleOptions" 
+              :value="settlementCycleIndex"
+              @change="onSettlementCycleChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ settlementCycleOptions[settlementCycleIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="rule-row">
+          <view class="rule-label">最低提现金额</view>
+          <view class="rule-control">
+            <input 
+              v-model="ruleForm.minWithdrawAmount" 
+              type="number" 
+              class="form-input"
+              placeholder="请输入最低提现金额"
+            />
+          </view>
+        </view>
+        <view class="rule-row">
+          <view class="rule-label">提现手续费</view>
+          <view class="rule-control">
+            <input 
+              v-model="ruleForm.withdrawFee" 
+              type="number" 
+              class="form-input"
+              placeholder="请输入提现手续费比例"
+            />
+            <view class="input-suffix">%</view>
+          </view>
+        </view>
+      </view>
     </view>
   </view>
 </template>
@@ -42,104 +155,319 @@
 <script setup>
   import { ref, onMounted } from "vue"
 
-  const formRef = ref(null)
-  const distributorId = ref(uni.getStorageSync('__uni_route_query')?.id || '')
-  
+  // 规则表单数据
   const ruleForm = ref({
-    distributor_id: distributorId.value,
-    profit_ratio: '',
-    rule_name: '',
-    rule_desc: '',
-    effective_time: '',
-    expire_time: ''
+    needAudit: true,
+    enableLevel: true,
+    enableSelfBuy: true,
+    enableInviteReward: true,
+    minWithdrawAmount: 100,
+    withdrawFee: 0.5
   })
-
-  // 初始化加载数据
+  
+  // 佣金计算方式选项
+  const commissionTypeOptions = ['按比例', '固定金额']
+  const commissionTypeIndex = ref(0)
+  
+  // 结算周期选项
+  const settlementCycleOptions = ['实时结算', '每日结算', '每周结算', '每月结算']
+  const settlementCycleIndex = ref(3)
+  
+  // 等级配置
+  const levelList = ref([
+    {
+      name: '初级分销员',
+      condition: '邀请1人注册',
+      commissionRate: 10,
+      selfBuyRate: 5,
+      inviteReward: 5
+    },
+    {
+      name: '中级分销员',
+      condition: '邀请5人注册',
+      commissionRate: 15,
+      selfBuyRate: 8,
+      inviteReward: 8
+    },
+    {
+      name: '高级分销员',
+      condition: '邀请10人注册',
+      commissionRate: 20,
+      selfBuyRate: 10,
+      inviteReward: 10
+    }
+  ])
+  
   onMounted(() => {
-    fetchRuleDetail()
+    // 实际项目中应从接口获取规则配置
+    // loadRuleConfig()
   })
-
-  // 获取分润规则详情
-  function fetchRuleDetail() {
-    // 这里应该调用后端API获取数据
-    // 模拟数据
+  
+  // 返回上一页
+  function goBack() {
+    uni.navigateBack({ delta: 1 })
+  }
+  
+  // 保存规则
+  function saveRule() {
+    uni.showLoading({ title: '保存中...' })
+    
     setTimeout(() => {
-      ruleForm.value = {
-        distributor_id: distributorId.value,
-        profit_ratio: '10',
-        rule_name: '默认分润规则',
-        rule_desc: '基础分润规则',
-        effective_time: new Date().toISOString(),
-        expire_time: ''
-      }
-    }, 500)
+      uni.hideLoading()
+      uni.showToast({ 
+        title: '保存成功', 
+        icon: 'success' 
+      })
+      // 实际项目中应调用接口保存规则配置
+      // saveRuleConfig()
+    }, 1500)
   }
-
-  // 取消
-  function handleCancel() {
-    uni.navigateBack()
+  
+  // 审核开关变更
+  function onAuditChange(e) {
+    const value = e.detail.value
+    ruleForm.value.needAudit = value
   }
-
-  // 提交
-  function handleSubmit() {
-    formRef.value.validate().then(() => {
-      // 这里应该调用后端API提交数据
-      uni.showToast({ title: '配置成功' })
-      uni.navigateTo({ url: '/pages/distributor/index' })
-    }).catch(err => {
-      console.log('表单验证失败', err)
-    })
+  
+  // 等级制度开关变更
+  function onLevelChange(e) {
+    const value = e.detail.value
+    ruleForm.value.enableLevel = value
+  }
+  
+  // 自购优惠开关变更
+  function onSelfBuyChange(e) {
+    const value = e.detail.value
+    ruleForm.value.enableSelfBuy = value
+  }
+  
+  // 邀请奖励开关变更
+  function onInviteRewardChange(e) {
+    const value = e.detail.value
+    ruleForm.value.enableInviteReward = value
+  }
+  
+  // 佣金计算方式变更
+  function onCommissionTypeChange(e) {
+    const value = e.detail.value
+    commissionTypeIndex.value = value
+  }
+  
+  // 结算周期变更
+  function onSettlementCycleChange(e) {
+    const value = e.detail.value
+    settlementCycleIndex.value = value
   }
 </script>
 
 <style lang="scss" scoped>
-  .rule-container {
-    padding: 20rpx;
-    background-color: #f5f5f5;
-    min-height: 100vh;
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: #f5f7fa;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+  /* #endif */
+
+  .distributor-rule-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
   }
   
-  .header {
-    margin-bottom: 20rpx;
-    padding-bottom: 20rpx;
-    border-bottom: 1rpx solid #e5e5e5;
+  /* 页面头部 */
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 120rpx;
+    background-color: #fff;
+    padding: 0 32rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
   }
   
-  .title {
+  .header-left {
+    width: 60rpx;
+  }
+  
+  .back-icon {
+    font-size: 40rpx;
+    color: #303133;
+    cursor: pointer;
+  }
+  
+  .header-title {
     font-size: 32rpx;
     font-weight: bold;
-    color: #333;
+    color: #303133;
   }
   
-  .form-container {
+  .header-right {
+    width: 60rpx;
+    text-align: right;
+  }
+  
+  .save-btn {
+    font-size: 24rpx;
+    color: #409eff;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  /* 规则配置 */
+  .rule-section {
+    padding: 32rpx;
     background-color: #fff;
-    border-radius: 8rpx;
-    padding: 20rpx;
-    margin-bottom: 20rpx;
+    margin: 0 16rpx 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
   }
   
-  .btn-container {
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 24rpx;
+    padding-left: 12rpx;
+    border-left: 8rpx solid #409eff;
+    line-height: 1.2;
+  }
+  
+  .rule-card {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .rule-row {
     display: flex;
-    gap: 20rpx;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24rpx;
   }
   
-  .cancel-btn {
-    flex: 1;
-    background-color: #909399;
-    color: #fff;
-    border: none;
-    padding: 20rpx;
-    border-radius: 4rpx;
-    font-size: 28rpx;
+  .rule-row:last-child {
+    margin-bottom: 0;
   }
   
-  .submit-btn {
-    flex: 1;
-    background-color: #409eff;
-    color: #fff;
-    border: none;
-    padding: 20rpx;
-    border-radius: 4rpx;
-    font-size: 28rpx;
+  .rule-label {
+    font-size: 24rpx;
+    color: #606266;
+  }
+  
+  .rule-control {
+    position: relative;
+  }
+  
+  .switch {
+    transform: scale(0.8);
+  }
+  
+  .picker {
+    background-color: #fff;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    min-width: 200rpx;
+  }
+  
+  .picker-text {
+    font-size: 24rpx;
+    color: #303133;
+  }
+  
+  .form-input {
+    background-color: #fff;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+    font-size: 24rpx;
+    color: #303133;
+    min-width: 150rpx;
+  }
+  
+  .input-suffix {
+    position: absolute;
+    right: 32rpx;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 24rpx;
+    color: #606266;
+  }
+  
+  /* 等级配置 */
+  .level-config {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+  }
+  
+  .level-item {
+    background-color: #fff;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+  }
+  
+  .level-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12rpx;
+  }
+  
+  .level-title {
+    font-size: 24rpx;
+    font-weight: 600;
+    color: #303133;
+  }
+  
+  .level-condition {
+    display: flex;
+    align-items: center;
+  }
+  
+  .condition-label {
+    font-size: 18rpx;
+    color: #606266;
+  }
+  
+  .condition-value {
+    font-size: 18rpx;
+    color: #409eff;
+    margin-left: 4rpx;
+  }
+  
+  .level-benefit {
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+  }
+  
+  .benefit-item {
+    display: flex;
+    align-items: center;
+  }
+  
+  .benefit-label {
+    font-size: 18rpx;
+    color: #606266;
+  }
+  
+  .benefit-value {
+    font-size: 18rpx;
+    color: #303133;
+    margin-left: 4rpx;
   }
 </style>
\ No newline at end of file
diff --git a/src/pages/member/general-code.vue b/src/pages/member/general-code.vue
new file mode 100644
index 0000000..27db8d5
--- /dev/null
+++ b/src/pages/member/general-code.vue
@@ -0,0 +1,433 @@
+<template>
+  <view class="general-code-container">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <view class="header-left" @click="goBack">
+        <view class="back-icon">←</view>
+      </view>
+      <view class="header-title">通用会员推广码</view>
+      <view class="header-right" @click="refreshCode">
+        <view class="refresh-btn">刷新</view>
+      </view>
+    </view>
+    
+    <!-- 推广码信息 -->
+    <view class="code-info-section">
+      <view class="section-title">推广码信息</view>
+      <view class="info-card">
+        <view class="info-row">
+          <view class="info-label">推广码</view>
+          <view class="info-value">{{ generalCode }}</view>
+        </view>
+        <view class="info-row">
+          <view class="info-label">生成时间</view>
+          <view class="info-value">{{ createTime }}</view>
+        </view>
+        <view class="info-row">
+          <view class="info-label">有效期</view>
+          <view class="info-value">{{ validityPeriod }}</view>
+        </view>
+        <view class="info-row">
+          <view class="info-label">使用次数</view>
+          <view class="info-value">{{ usageCount }}次</view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 推广二维码 -->
+    <view class="qrcode-section">
+      <view class="section-title">推广二维码</view>
+      <view class="qrcode-card">
+        <view class="qrcode-image">
+          <!-- 模拟二维码图片 -->
+          <view class="mock-qrcode">
+            <view class="qrcode-pattern"></view>
+            <view class="qrcode-text">{{ generalCode }}</view>
+          </view>
+        </view>
+        <view class="qrcode-hint">
+          这是通用推广二维码，适用于所有渠道的推广活动
+        </view>
+        <view class="qrcode-actions">
+          <view class="action-btn download-btn" @click="downloadQrcode">
+            下载二维码
+          </view>
+          <view class="action-btn share-btn" @click="shareQrcode">
+            分享二维码
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 使用记录 -->
+    <view class="usage-record-section">
+      <view class="section-title">使用记录</view>
+      <view class="record-card">
+        <view class="record-header">
+          <view class="header-item">时间</view>
+          <view class="header-item">使用人</view>
+          <view class="header-item">操作</view>
+        </view>
+        <view class="record-list">
+          <view 
+            v-for="(record, index) in usageRecords" 
+            :key="index"
+            class="record-item"
+          >
+            <view class="record-cell">{{ record.time }}</view>
+            <view class="record-cell">{{ record.user }}</view>
+            <view class="record-cell">{{ record.action }}</view>
+          </view>
+        </view>
+        <view class="record-footer">
+          <view class="footer-text">
+            共 {{ totalRecords }} 条记录，显示最近 {{ usageRecords.length }} 条
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { ref, onMounted } from "vue"
+
+  // 推广码信息
+  const generalCode = ref('GC202601290001')
+  const createTime = ref('2026-01-29 10:00:00')
+  const validityPeriod = ref('永久有效')
+  const usageCount = ref(123)
+  
+  // 使用记录
+  const usageRecords = ref([
+    {
+      time: '2026-01-29 15:30:00',
+      user: '张三',
+      action: '扫码注册'
+    },
+    {
+      time: '2026-01-29 14:20:00',
+      user: '李四',
+      action: '购买会员'
+    },
+    {
+      time: '2026-01-29 13:10:00',
+      user: '王五',
+      action: '扫码注册'
+    }
+  ])
+  
+  const totalRecords = ref(100)
+  
+  onMounted(() => {
+    // 实际项目中应从接口获取通用推广码信息
+    // loadGeneralCodeInfo()
+  })
+  
+  // 返回上一页
+  function goBack() {
+    uni.navigateBack({ delta: 1 })
+  }
+  
+  // 刷新推广码
+  function refreshCode() {
+    uni.showModal({
+      title: '刷新推广码',
+      content: '刷新推广码后，原推广码将失效，确定要刷新吗？',
+      success: function(res) {
+        if (res.confirm) {
+          uni.showLoading({ title: '刷新中...' })
+          
+          setTimeout(() => {
+            uni.hideLoading()
+            // 模拟刷新后生成新的推广码
+            generalCode.value = 'GC' + new Date().getTime().toString().substring(0, 12)
+            createTime.value = new Date().toLocaleString('zh-CN')
+            usageCount.value = 0
+            uni.showToast({ 
+              title: '推广码已刷新', 
+              icon: 'success' 
+            })
+            // 实际项目中应调用接口刷新推广码
+            // refreshGeneralCode()
+          }, 1500)
+        }
+      }
+    })
+  }
+  
+  // 下载二维码
+  function downloadQrcode() {
+    uni.showLoading({ title: '下载中...' })
+    
+    setTimeout(() => {
+      uni.hideLoading()
+      uni.showToast({ 
+        title: '二维码已下载', 
+        icon: 'success' 
+      })
+      // 实际项目中应调用接口下载二维码
+      // downloadGeneralQrcode()
+    }, 1000)
+  }
+  
+  // 分享二维码
+  function shareQrcode() {
+    uni.showActionSheet({
+      itemList: ['分享到微信', '分享到朋友圈', '复制推广链接'],
+      success: function(res) {
+        switch(res.tapIndex) {
+          case 0:
+            uni.showToast({ title: '分享到微信', duration: 1000 })
+            break
+          case 1:
+            uni.showToast({ title: '分享到朋友圈', duration: 1000 })
+            break
+          case 2:
+            uni.setClipboardData({
+              data: `https://example.com/register?code=${generalCode.value}`,
+              success: function() {
+                uni.showToast({ title: '推广链接已复制', duration: 1000 })
+              }
+            })
+            break
+        }
+      }
+    })
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: #f5f7fa;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+  /* #endif */
+
+  .general-code-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* 页面头部 */
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 120rpx;
+    background-color: #fff;
+    padding: 0 32rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .header-left {
+    width: 60rpx;
+  }
+  
+  .back-icon {
+    font-size: 40rpx;
+    color: #303133;
+    cursor: pointer;
+  }
+  
+  .header-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .header-right {
+    width: 60rpx;
+    text-align: right;
+  }
+  
+  .refresh-btn {
+    font-size: 24rpx;
+    color: #409eff;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  /* 通用部分样式 */
+  .code-info-section,
+  .qrcode-section,
+  .usage-record-section {
+    padding: 32rpx;
+    background-color: #fff;
+    margin: 0 16rpx 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 24rpx;
+    padding-left: 12rpx;
+    border-left: 8rpx solid #409eff;
+    line-height: 1.2;
+  }
+  
+  /* 推广码信息 */
+  .info-card {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .info-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16rpx;
+  }
+  
+  .info-row:last-child {
+    margin-bottom: 0;
+  }
+  
+  .info-label {
+    font-size: 24rpx;
+    color: #606266;
+  }
+  
+  .info-value {
+    font-size: 24rpx;
+    color: #303133;
+    font-weight: 600;
+  }
+  
+  /* 推广二维码 */
+  .qrcode-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 24rpx;
+  }
+  
+  .qrcode-image {
+    display: flex;
+    justify-content: center;
+  }
+  
+  .mock-qrcode {
+    width: 300rpx;
+    height: 300rpx;
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .qrcode-pattern {
+    width: 240rpx;
+    height: 240rpx;
+    background-color: #303133;
+    margin-bottom: 16rpx;
+  }
+  
+  .qrcode-text {
+    font-size: 20rpx;
+    color: #606266;
+  }
+  
+  .qrcode-hint {
+    font-size: 20rpx;
+    color: #606266;
+    text-align: center;
+    line-height: 1.4;
+    padding: 0 24rpx;
+  }
+  
+  .qrcode-actions {
+    display: flex;
+    gap: 16rpx;
+  }
+  
+  .action-btn {
+    padding: 12rpx 24rpx;
+    border-radius: 8rpx;
+    font-size: 20rpx;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  .download-btn {
+    background-color: #ecf5ff;
+    color: #409eff;
+  }
+  
+  .share-btn {
+    background-color: #f0f9eb;
+    color: #67c23a;
+  }
+  
+  /* 使用记录 */
+  .record-card {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .record-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 16rpx;
+    padding-bottom: 16rpx;
+    border-bottom: 1rpx solid #e0e0e0;
+  }
+  
+  .header-item {
+    flex: 1;
+    font-size: 20rpx;
+    font-weight: bold;
+    color: #606266;
+    text-align: center;
+  }
+  
+  .record-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+    margin-bottom: 16rpx;
+  }
+  
+  .record-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16rpx;
+    background-color: #fff;
+    border-radius: 8rpx;
+  }
+  
+  .record-cell {
+    flex: 1;
+    font-size: 20rpx;
+    color: #303133;
+    text-align: center;
+  }
+  
+  .record-footer {
+    text-align: center;
+  }
+  
+  .footer-text {
+    font-size: 18rpx;
+    color: #909399;
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/member/gift.vue b/src/pages/member/gift.vue
new file mode 100644
index 0000000..b634d70
--- /dev/null
+++ b/src/pages/member/gift.vue
@@ -0,0 +1,633 @@
+<template>
+  <view class="gift-member-container">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <view class="header-left" @click="goBack">
+        <view class="back-icon">←</view>
+      </view>
+      <view class="header-title">赠送会员管理</view>
+      <view class="header-right" @click="generateBatchCode">
+        <view class="batch-btn">批量生成</view>
+      </view>
+    </view>
+    
+    <!-- 生成核验码 -->
+    <view class="generate-section">
+      <view class="section-title">生成核验码</view>
+      <view class="generate-card">
+        <view class="generate-row">
+          <view class="generate-label">会员类型</view>
+          <view class="generate-control">
+            <picker 
+              :range="memberTypeOptions" 
+              :value="memberTypeIndex"
+              @change="onMemberTypeChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ memberTypeOptions[memberTypeIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="generate-row">
+          <view class="generate-label">生成数量</view>
+          <view class="generate-control">
+            <input 
+              v-model="generateCount" 
+              type="number" 
+              class="count-input"
+              placeholder="请输入生成数量"
+              min="1"
+              max="100"
+            />
+          </view>
+        </view>
+        <view class="generate-row">
+          <view class="generate-label">有效期</view>
+          <view class="generate-control">
+            <input 
+              v-model="validityPeriod" 
+              class="period-input"
+              placeholder="请选择有效期"
+              @click="showDatePicker"
+            />
+          </view>
+        </view>
+        <view class="generate-action">
+          <view class="action-btn primary-btn" @click="generateCode">
+            生成核验码
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 核验码列表 -->
+    <view class="code-list-section">
+      <view class="section-title">核验码列表</view>
+      <view class="code-list">
+        <view 
+          v-for="(code, index) in codeList" 
+          :key="index"
+          class="code-item"
+        >
+          <view class="code-header">
+            <view class="code-value">{{ code.code }}</view>
+            <view class="code-status" :class="code.statusClass">{{ code.status }}</view>
+          </view>
+          <view class="code-body">
+            <view class="code-info">
+              <view class="info-item">
+                <view class="info-label">会员类型：</view>
+                <view class="info-value">{{ code.memberType }}</view>
+              </view>
+              <view class="info-item">
+                <view class="info-label">生成时间：</view>
+                <view class="info-value">{{ code.createTime }}</view>
+              </view>
+              <view class="info-item">
+                <view class="info-label">有效期至：</view>
+                <view class="info-value">{{ code.validUntil }}</view>
+              </view>
+              <view class="info-item" v-if="code.usedTime">
+                <view class="info-label">使用时间：</view>
+                <view class="info-value">{{ code.usedTime }}</view>
+              </view>
+            </view>
+          </view>
+          <view class="code-footer">
+            <view class="code-actions">
+              <view class="action-btn copy-btn" @click="copyCode(code.code)">
+                复制
+              </view>
+              <view class="action-btn delete-btn" @click="deleteCode(code.id)">
+                删除
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 空状态 -->
+    <view v-if="codeList.length === 0" class="empty-state">
+      <view class="empty-icon">🎁</view>
+      <view class="empty-text">暂无核验码数据</view>
+    </view>
+    
+    <!-- 分页 -->
+    <view v-if="codeList.length > 0" class="pagination">
+      <view class="page-info">
+        共 {{ totalCodes }} 条，当前第 {{ currentPage }} 页
+      </view>
+      <view class="page-controls">
+        <view 
+          class="page-btn" 
+          :class="{ disabled: currentPage === 1 }"
+          @click="goToPage(currentPage - 1)"
+        >
+          上一页
+        </view>
+        <view 
+          class="page-btn" 
+          :class="{ disabled: currentPage === totalPages }"
+          @click="goToPage(currentPage + 1)"
+        >
+          下一页
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { ref, computed, onMounted } from "vue"
+
+  // 会员类型选项
+  const memberTypeOptions = ['月度会员', '季度会员', '年度会员']
+  const memberTypeIndex = ref(0)
+  
+  // 生成数量
+  const generateCount = ref('1')
+  
+  // 有效期
+  const validityPeriod = ref('')
+  
+  // 核验码列表数据
+  const codeList = ref([
+    {
+      id: 1,
+      code: 'GC20260129001',
+      memberType: '月度会员',
+      createTime: '2026-01-29 15:30:00',
+      validUntil: '2026-02-29 23:59:59',
+      status: '未使用',
+      statusClass: 'status-unused'
+    },
+    {
+      id: 2,
+      code: 'GC20260129002',
+      memberType: '季度会员',
+      createTime: '2026-01-29 14:20:00',
+      validUntil: '2026-04-29 23:59:59',
+      status: '已使用',
+      statusClass: 'status-used',
+      usedTime: '2026-01-29 14:30:00'
+    },
+    {
+      id: 3,
+      code: 'GC20260129003',
+      memberType: '年度会员',
+      createTime: '2026-01-29 13:10:00',
+      validUntil: '2027-01-29 23:59:59',
+      status: '已过期',
+      statusClass: 'status-expired'
+    }
+  ])
+  
+  // 分页信息
+  const currentPage = ref(1)
+  const totalCodes = ref(100)
+  const pageSize = ref(10)
+  
+  // 计算总页数
+  const totalPages = computed(() => {
+    return Math.ceil(totalCodes.value / pageSize.value)
+  })
+  
+  onMounted(() => {
+    // 实际项目中应从接口获取核验码列表
+    // loadCodeList()
+  })
+  
+  // 返回上一页
+  function goBack() {
+    uni.navigateBack({ delta: 1 })
+  }
+  
+  // 批量生成
+  function generateBatchCode() {
+    uni.showModal({
+      title: '批量生成核验码',
+      content: '请输入要生成的核验码数量',
+      editable: true,
+      placeholderText: '请输入数量',
+      success: function(res) {
+        if (res.confirm && res.content) {
+          const count = parseInt(res.content)
+          if (isNaN(count) || count <= 0 || count > 100) {
+            uni.showToast({ 
+              title: '请输入1-100之间的数字', 
+              icon: 'none' 
+            })
+            return
+          }
+          
+          uni.showLoading({ title: '生成中...' })
+          
+          setTimeout(() => {
+            uni.hideLoading()
+            uni.showToast({ 
+              title: `成功生成${count}个核验码`, 
+              icon: 'success' 
+            })
+            // 实际项目中应调用接口批量生成核验码
+            // generateBatchCodes(count)
+          }, 1500)
+        }
+      }
+    })
+  }
+  
+  // 会员类型变更
+  function onMemberTypeChange(e) {
+    const value = e.detail.value
+    memberTypeIndex.value = value
+  }
+  
+  // 显示日期选择器
+  function showDatePicker() {
+    const now = new Date()
+    uni.showDatePicker({
+      year: now.getFullYear(),
+      month: now.getMonth(),
+      day: now.getDate(),
+      success: function(res) {
+        validityPeriod.value = `${res.year}-${res.month + 1}-${res.day}`
+      }
+    })
+  }
+  
+  // 生成核验码
+  function generateCode() {
+    if (!generateCount.value || parseInt(generateCount.value) <= 0) {
+      uni.showToast({ 
+        title: '请输入有效的生成数量', 
+        icon: 'none' 
+      })
+      return
+    }
+    
+    if (!validityPeriod.value) {
+      uni.showToast({ 
+        title: '请选择有效期', 
+        icon: 'none' 
+      })
+      return
+    }
+    
+    uni.showLoading({ title: '生成中...' })
+    
+    setTimeout(() => {
+      uni.hideLoading()
+      uni.showToast({ 
+        title: '核验码生成成功', 
+        icon: 'success' 
+      })
+      // 实际项目中应调用接口生成核验码
+      // generateVerificationCode()
+    }, 1500)
+  }
+  
+  // 复制核验码
+  function copyCode(code) {
+    uni.setClipboardData({
+      data: code,
+      success: function() {
+        uni.showToast({ 
+          title: '核验码已复制', 
+          icon: 'success' 
+        })
+      }
+    })
+  }
+  
+  // 删除核验码
+  function deleteCode(id) {
+    uni.showModal({
+      title: '删除核验码',
+      content: '确定要删除该核验码吗？',
+      success: function(res) {
+        if (res.confirm) {
+          // 实际项目中应调用接口删除核验码
+          const index = codeList.value.findIndex(item => item.id === id)
+          if (index !== -1) {
+            codeList.value.splice(index, 1)
+          }
+          uni.showToast({ 
+            title: '删除成功', 
+            icon: 'success' 
+          })
+        }
+      }
+    })
+  }
+  
+  // 跳转到指定页码
+  function goToPage(page) {
+    if (page < 1 || page > totalPages.value) {
+      return
+    }
+    currentPage.value = page
+    // 实际项目中应加载指定页码的核验码
+    // loadCodePage(page)
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: #f5f7fa;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+  /* #endif */
+
+  .gift-member-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* 页面头部 */
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 120rpx;
+    background-color: #fff;
+    padding: 0 32rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .header-left {
+    width: 60rpx;
+  }
+  
+  .back-icon {
+    font-size: 40rpx;
+    color: #303133;
+    cursor: pointer;
+  }
+  
+  .header-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .header-right {
+    width: 120rpx;
+    text-align: right;
+  }
+  
+  .batch-btn {
+    font-size: 24rpx;
+    color: #409eff;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  /* 通用部分样式 */
+  .generate-section,
+  .code-list-section {
+    padding: 32rpx;
+    background-color: #fff;
+    margin: 0 16rpx 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 24rpx;
+    padding-left: 12rpx;
+    border-left: 8rpx solid #409eff;
+    line-height: 1.2;
+  }
+  
+  /* 生成核验码 */
+  .generate-card {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .generate-row {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 24rpx;
+  }
+  
+  .generate-row:last-child {
+    margin-bottom: 0;
+  }
+  
+  .generate-label {
+    font-size: 24rpx;
+    color: #606266;
+    margin-bottom: 8rpx;
+  }
+  
+  .generate-control {
+    background-color: #fff;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+  }
+  
+  .picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .picker-text {
+    font-size: 24rpx;
+    color: #303133;
+  }
+  
+  .count-input,
+  .period-input {
+    font-size: 24rpx;
+    color: #303133;
+    width: 100%;
+  }
+  
+  .generate-action {
+    margin-top: 24rpx;
+  }
+  
+  .action-btn {
+    padding: 16rpx;
+    border-radius: 8rpx;
+    font-size: 24rpx;
+    font-weight: 600;
+    text-align: center;
+    cursor: pointer;
+  }
+  
+  .primary-btn {
+    background-color: #409eff;
+    color: #fff;
+  }
+  
+  /* 核验码列表 */
+  .code-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+  }
+  
+  .code-item {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .code-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16rpx;
+    padding-bottom: 16rpx;
+    border-bottom: 1rpx solid #e0e0e0;
+  }
+  
+  .code-value {
+    font-size: 24rpx;
+    font-weight: 600;
+    color: #303133;
+  }
+  
+  .code-status {
+    font-size: 20rpx;
+    font-weight: 600;
+    padding: 4rpx 12rpx;
+    border-radius: 12rpx;
+  }
+  
+  .status-unused {
+    color: #409eff;
+    background-color: rgba(64, 158, 255, 0.1);
+  }
+  
+  .status-used {
+    color: #67c23a;
+    background-color: rgba(103, 194, 58, 0.1);
+  }
+  
+  .status-expired {
+    color: #909399;
+    background-color: rgba(144, 147, 153, 0.1);
+  }
+  
+  .code-body {
+    margin-bottom: 16rpx;
+  }
+  
+  .code-info {
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+  }
+  
+  .info-item {
+    display: flex;
+    font-size: 20rpx;
+  }
+  
+  .info-label {
+    color: #606266;
+    width: 120rpx;
+  }
+  
+  .info-value {
+    color: #303133;
+    flex: 1;
+  }
+  
+  .code-footer {
+    border-top: 1rpx solid #e0e0e0;
+    padding-top: 16rpx;
+  }
+  
+  .code-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 16rpx;
+  }
+  
+  .copy-btn {
+    background-color: #ecf5ff;
+    color: #409eff;
+  }
+  
+  .delete-btn {
+    background-color: #fef0f0;
+    color: #f56c6c;
+  }
+  
+  /* 空状态 */
+  .empty-state {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 100rpx 0;
+  }
+  
+  .empty-icon {
+    font-size: 80rpx;
+    margin-bottom: 24rpx;
+  }
+  
+  .empty-text {
+    font-size: 24rpx;
+    color: #909399;
+  }
+  
+  /* 分页 */
+  .pagination {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24rpx;
+    background-color: #fff;
+    margin: 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .page-info {
+    font-size: 20rpx;
+    color: #606266;
+  }
+  
+  .page-controls {
+    display: flex;
+    gap: 16rpx;
+  }
+  
+  .page-btn {
+    padding: 8rpx 16rpx;
+    border-radius: 8rpx;
+    font-size: 20rpx;
+    color: #409eff;
+    cursor: pointer;
+  }
+  
+  .page-btn.disabled {
+    color: #909399;
+    cursor: not-allowed;
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/member/order.vue b/src/pages/member/order.vue
new file mode 100644
index 0000000..be446d9
--- /dev/null
+++ b/src/pages/member/order.vue
@@ -0,0 +1,623 @@
+<template>
+  <view class="member-order-container">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <view class="header-left" @click="goBack">
+        <view class="back-icon">←</view>
+      </view>
+      <view class="header-title">会员订单管理</view>
+      <view class="header-right" @click="exportOrders">
+        <view class="export-btn">导出</view>
+      </view>
+    </view>
+    
+    <!-- 筛选条件 -->
+    <view class="filter-section">
+      <view class="filter-row">
+        <view class="filter-item">
+          <view class="filter-label">状态</view>
+          <view class="filter-control">
+            <picker 
+              :range="statusOptions" 
+              :value="statusIndex"
+              @change="onStatusChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ statusOptions[statusIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="filter-item">
+          <view class="filter-label">会员类型</view>
+          <view class="filter-control">
+            <picker 
+              :range="memberTypeOptions" 
+              :value="memberTypeIndex"
+              @change="onMemberTypeChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ memberTypeOptions[memberTypeIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="filter-item">
+          <view class="filter-label">搜索</view>
+          <view class="filter-control">
+            <input 
+              v-model="searchKeyword" 
+              class="search-input"
+              placeholder="请输入订单号或学员姓名"
+              @input="onSearch"
+            />
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 订单列表 -->
+    <view class="order-list-section">
+      <view class="section-title">订单列表</view>
+      <view class="order-list">
+        <view 
+          v-for="(order, index) in orderList" 
+          :key="index"
+          class="order-item"
+        >
+          <view class="order-header">
+            <view class="order-code">{{ order.code }}</view>
+            <view class="order-status" :class="order.statusClass">{{ order.status }}</view>
+          </view>
+          <view class="order-body">
+            <view class="order-info">
+              <view class="info-item">
+                <view class="info-label">学员姓名：</view>
+                <view class="info-value">{{ order.studentName }}</view>
+              </view>
+              <view class="info-item">
+                <view class="info-label">会员类型：</view>
+                <view class="info-value">{{ order.memberType }}</view>
+              </view>
+              <view class="info-item">
+                <view class="info-label">订单金额：</view>
+                <view class="info-value price">{{ order.amount }}</view>
+              </view>
+              <view class="info-item">
+                <view class="info-label">下单时间：</view>
+                <view class="info-value">{{ order.createTime }}</view>
+              </view>
+            </view>
+          </view>
+          <view class="order-footer">
+            <view class="order-actions">
+              <view v-if="order.status === '待处理'" class="action-btn process-btn" @click="processOrder(order.id)">
+                处理
+              </view>
+              <view class="action-btn detail-btn" @click="viewOrderDetail(order.id)">
+                详情
+              </view>
+              <view class="action-btn refund-btn" @click="refundOrder(order.id)">
+                退款
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 空状态 -->
+    <view v-if="orderList.length === 0" class="empty-state">
+      <view class="empty-icon">🛒</view>
+      <view class="empty-text">暂无订单数据</view>
+    </view>
+    
+    <!-- 分页 -->
+    <view v-if="orderList.length > 0" class="pagination">
+      <view class="page-info">
+        共 {{ totalOrders }} 条，当前第 {{ currentPage }} 页
+      </view>
+      <view class="page-controls">
+        <view 
+          class="page-btn" 
+          :class="{ disabled: currentPage === 1 }"
+          @click="goToPage(currentPage - 1)"
+        >
+          上一页
+        </view>
+        <view 
+          class="page-btn" 
+          :class="{ disabled: currentPage === totalPages }"
+          @click="goToPage(currentPage + 1)"
+        >
+          下一页
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { ref, computed, onMounted } from "vue"
+
+  // 筛选条件
+  const statusOptions = ['全部状态', '待处理', '已完成', '已退款', '异常']
+  const statusIndex = ref(0)
+  
+  const memberTypeOptions = ['全部类型', '月度会员', '季度会员', '年度会员']
+  const memberTypeIndex = ref(0)
+  
+  const searchKeyword = ref('')
+  
+  // 订单列表数据
+  const orderList = ref([
+    {
+      id: 1,
+      code: 'MO20260129001',
+      studentName: '张三',
+      memberType: '年度会员',
+      amount: '¥299.90',
+      createTime: '2026-01-29 15:30:00',
+      status: '待处理',
+      statusClass: 'status-pending'
+    },
+    {
+      id: 2,
+      code: 'MO20260129002',
+      studentName: '李四',
+      memberType: '月度会员',
+      amount: '¥39.90',
+      createTime: '2026-01-29 14:20:00',
+      status: '已完成',
+      statusClass: 'status-completed'
+    },
+    {
+      id: 3,
+      code: 'MO20260129003',
+      studentName: '王五',
+      memberType: '季度会员',
+      amount: '¥99.90',
+      createTime: '2026-01-29 13:10:00',
+      status: '异常',
+      statusClass: 'status-exception'
+    },
+    {
+      id: 4,
+      code: 'MO20260129004',
+      studentName: '赵六',
+      memberType: '年度会员',
+      amount: '¥299.90',
+      createTime: '2026-01-29 12:00:00',
+      status: '已退款',
+      statusClass: 'status-refunded'
+    }
+  ])
+  
+  // 分页信息
+  const currentPage = ref(1)
+  const totalOrders = ref(100)
+  const pageSize = ref(10)
+  
+  // 计算总页数
+  const totalPages = computed(() => {
+    return Math.ceil(totalOrders.value / pageSize.value)
+  })
+  
+  onMounted(() => {
+    // 实际项目中应从接口获取订单列表
+    // loadOrderList()
+  })
+  
+  // 返回上一页
+  function goBack() {
+    uni.navigateBack({ delta: 1 })
+  }
+  
+  // 导出订单
+  function exportOrders() {
+    uni.showModal({
+      title: '导出订单',
+      content: '确定要导出当前筛选条件下的订单吗？',
+      success: function(res) {
+        if (res.confirm) {
+          uni.showLoading({ title: '导出中...' })
+          
+          setTimeout(() => {
+            uni.hideLoading()
+            uni.showToast({ 
+              title: '导出成功', 
+              icon: 'success' 
+            })
+            // 实际项目中应调用接口导出订单
+            // exportOrderList()
+          }, 1500)
+        }
+      }
+    })
+  }
+  
+  // 状态变更
+  function onStatusChange(e) {
+    const value = e.detail.value
+    statusIndex.value = value
+    // 实际项目中应根据状态筛选订单
+    // filterOrderList()
+  }
+  
+  // 会员类型变更
+  function onMemberTypeChange(e) {
+    const value = e.detail.value
+    memberTypeIndex.value = value
+    // 实际项目中应根据会员类型筛选订单
+    // filterOrderList()
+  }
+  
+  // 搜索
+  function onSearch() {
+    // 实际项目中应根据关键词搜索订单
+    // searchOrderList()
+  }
+  
+  // 处理订单
+  function processOrder(id) {
+    uni.showModal({
+      title: '处理订单',
+      content: '确定要处理该订单吗？',
+      success: function(res) {
+        if (res.confirm) {
+          // 实际项目中应调用接口处理订单
+          const order = orderList.value.find(item => item.id === id)
+          if (order) {
+            order.status = '已完成'
+            order.statusClass = 'status-completed'
+          }
+          uni.showToast({ 
+            title: '订单处理成功', 
+            icon: 'success' 
+          })
+        }
+      }
+    })
+  }
+  
+  // 查看订单详情
+  function viewOrderDetail(id) {
+    uni.showToast({ 
+      title: '查看订单详情功能开发中', 
+      icon: 'none' 
+    })
+  }
+  
+  // 退款订单
+  function refundOrder(id) {
+    uni.showModal({
+      title: '退款订单',
+      content: '确定要退款该订单吗？',
+      success: function(res) {
+        if (res.confirm) {
+          // 实际项目中应调用接口退款订单
+          const order = orderList.value.find(item => item.id === id)
+          if (order) {
+            order.status = '已退款'
+            order.statusClass = 'status-refunded'
+          }
+          uni.showToast({ 
+            title: '订单退款成功', 
+            icon: 'success' 
+          })
+        }
+      }
+    })
+  }
+  
+  // 跳转到指定页码
+  function goToPage(page) {
+    if (page < 1 || page > totalPages.value) {
+      return
+    }
+    currentPage.value = page
+    // 实际项目中应加载指定页码的订单
+    // loadOrderPage(page)
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: #f5f7fa;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+  /* #endif */
+
+  .member-order-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* 页面头部 */
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 120rpx;
+    background-color: #fff;
+    padding: 0 32rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .header-left {
+    width: 60rpx;
+  }
+  
+  .back-icon {
+    font-size: 40rpx;
+    color: #303133;
+    cursor: pointer;
+  }
+  
+  .header-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .header-right {
+    width: 60rpx;
+    text-align: right;
+  }
+  
+  .export-btn {
+    font-size: 24rpx;
+    color: #409eff;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  /* 筛选条件 */
+  .filter-section {
+    padding: 24rpx 32rpx;
+    background-color: #fff;
+    margin: 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .filter-row {
+    display: flex;
+    gap: 16rpx;
+    flex-wrap: wrap;
+  }
+  
+  .filter-item {
+    flex: 1;
+    min-width: 200rpx;
+  }
+  
+  .filter-label {
+    font-size: 24rpx;
+    color: #606266;
+    margin-bottom: 8rpx;
+  }
+  
+  .filter-control {
+    background-color: #f9f9f9;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+  }
+  
+  .picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .picker-text {
+    font-size: 24rpx;
+    color: #303133;
+  }
+  
+  .search-input {
+    font-size: 24rpx;
+    color: #303133;
+    width: 100%;
+  }
+  
+  /* 订单列表 */
+  .order-list-section {
+    flex: 1;
+    padding: 0 16rpx;
+  }
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 24rpx;
+    padding-left: 12rpx;
+    border-left: 8rpx solid #409eff;
+    line-height: 1.2;
+  }
+  
+  .order-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+  }
+  
+  .order-item {
+    background-color: #fff;
+    border-radius: 16rpx;
+    padding: 24rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .order-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16rpx;
+    padding-bottom: 16rpx;
+    border-bottom: 1rpx solid #e0e0e0;
+  }
+  
+  .order-code {
+    font-size: 24rpx;
+    font-weight: 600;
+    color: #303133;
+  }
+  
+  .order-status {
+    font-size: 20rpx;
+    font-weight: 600;
+    padding: 4rpx 12rpx;
+    border-radius: 12rpx;
+  }
+  
+  .status-pending {
+    color: #e6a23c;
+    background-color: rgba(230, 162, 60, 0.1);
+  }
+  
+  .status-completed {
+    color: #67c23a;
+    background-color: rgba(103, 194, 58, 0.1);
+  }
+  
+  .status-exception {
+    color: #f56c6c;
+    background-color: rgba(245, 108, 108, 0.1);
+  }
+  
+  .status-refunded {
+    color: #909399;
+    background-color: rgba(144, 147, 153, 0.1);
+  }
+  
+  .order-body {
+    margin-bottom: 16rpx;
+  }
+  
+  .order-info {
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+  }
+  
+  .info-item {
+    display: flex;
+    font-size: 20rpx;
+  }
+  
+  .info-label {
+    color: #606266;
+    width: 120rpx;
+  }
+  
+  .info-value {
+    color: #303133;
+    flex: 1;
+  }
+  
+  .info-value.price {
+    color: #f56c6c;
+    font-weight: 600;
+  }
+  
+  .order-footer {
+    border-top: 1rpx solid #e0e0e0;
+    padding-top: 16rpx;
+  }
+  
+  .order-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 16rpx;
+  }
+  
+  .action-btn {
+    padding: 8rpx 16rpx;
+    border-radius: 8rpx;
+    font-size: 16rpx;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  .process-btn {
+    background-color: #ecf5ff;
+    color: #409eff;
+  }
+  
+  .detail-btn {
+    background-color: #f0f9eb;
+    color: #67c23a;
+  }
+  
+  .refund-btn {
+    background-color: #fef0f0;
+    color: #f56c6c;
+  }
+  
+  /* 空状态 */
+  .empty-state {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 100rpx 0;
+  }
+  
+  .empty-icon {
+    font-size: 80rpx;
+    margin-bottom: 24rpx;
+  }
+  
+  .empty-text {
+    font-size: 24rpx;
+    color: #909399;
+  }
+  
+  /* 分页 */
+  .pagination {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24rpx;
+    background-color: #fff;
+    margin: 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .page-info {
+    font-size: 20rpx;
+    color: #606266;
+  }
+  
+  .page-controls {
+    display: flex;
+    gap: 16rpx;
+  }
+  
+  .page-btn {
+    padding: 8rpx 16rpx;
+    border-radius: 8rpx;
+    font-size: 20rpx;
+    color: #409eff;
+    cursor: pointer;
+  }
+  
+  .page-btn.disabled {
+    color: #909399;
+    cursor: not-allowed;
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/member/personal-gift.vue b/src/pages/member/personal-gift.vue
new file mode 100644
index 0000000..34413f0
--- /dev/null
+++ b/src/pages/member/personal-gift.vue
@@ -0,0 +1,548 @@
+<template>
+  <view class="personal-gift-container">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <view class="header-left" @click="goBack">
+        <view class="back-icon">←</view>
+      </view>
+      <view class="header-title">赠送会员操作</view>
+      <view class="header-right" @click="viewHistory">
+        <view class="history-btn">历史</view>
+      </view>
+    </view>
+    
+    <!-- 可用额度 -->
+    <view class="quota-section">
+      <view class="section-title">可用额度</view>
+      <view class="quota-card">
+        <view class="quota-info">
+          <view class="quota-label">本月可用赠送额度</view>
+          <view class="quota-value">{{ availableQuota }}个</view>
+        </view>
+        <view class="quota-hint">
+          剩余 {{ availableQuota }} 个赠送会员名额，请合理使用
+        </view>
+      </view>
+    </view>
+    
+    <!-- 生成核验码 -->
+    <view class="generate-section">
+      <view class="section-title">生成核验码</view>
+      <view class="generate-card">
+        <view class="generate-row">
+          <view class="generate-label">会员类型</view>
+          <view class="generate-control">
+            <picker 
+              :range="memberTypeOptions" 
+              :value="memberTypeIndex"
+              @change="onMemberTypeChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ memberTypeOptions[memberTypeIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="generate-row">
+          <view class="generate-label">生成数量</view>
+          <view class="generate-control">
+            <input 
+              v-model="generateCount" 
+              type="number" 
+              class="count-input"
+              placeholder="请输入生成数量"
+              min="1"
+              :max="availableQuota"
+            />
+          </view>
+        </view>
+        <view class="generate-action">
+          <view class="action-btn primary-btn" @click="generateCode">
+            生成核验码
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 核验码列表 -->
+    <view class="code-list-section">
+      <view class="section-title">我的核验码</view>
+      <view class="code-list">
+        <view 
+          v-for="(code, index) in codeList" 
+          :key="index"
+          class="code-item"
+        >
+          <view class="code-header">
+            <view class="code-value">{{ code.code }}</view>
+            <view class="code-status" :class="code.statusClass">{{ code.status }}</view>
+          </view>
+          <view class="code-body">
+            <view class="code-info">
+              <view class="info-item">
+                <view class="info-label">会员类型：</view>
+                <view class="info-value">{{ code.memberType }}</view>
+              </view>
+              <view class="info-item">
+                <view class="info-label">生成时间：</view>
+                <view class="info-value">{{ code.createTime }}</view>
+              </view>
+              <view class="info-item">
+                <view class="info-label">有效期至：</view>
+                <view class="info-value">{{ code.validUntil }}</view>
+              </view>
+            </view>
+          </view>
+          <view class="code-footer">
+            <view class="code-actions">
+              <view class="action-btn copy-btn" @click="copyCode(code.code)">
+                复制
+              </view>
+              <view class="action-btn share-btn" @click="shareCode(code.code)">
+                分享
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 空状态 -->
+    <view v-if="codeList.length === 0" class="empty-state">
+      <view class="empty-icon">🎁</view>
+      <view class="empty-text">暂无核验码数据</view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { ref, onMounted } from "vue"
+
+  // 可用额度
+  const availableQuota = ref(10)
+  
+  // 会员类型选项
+  const memberTypeOptions = ['月度会员', '季度会员', '年度会员']
+  const memberTypeIndex = ref(0)
+  
+  // 生成数量
+  const generateCount = ref('1')
+  
+  // 核验码列表数据
+  const codeList = ref([
+    {
+      id: 1,
+      code: 'PG20260129001',
+      memberType: '月度会员',
+      createTime: '2026-01-29 15:30:00',
+      validUntil: '2026-02-29 23:59:59',
+      status: '未使用',
+      statusClass: 'status-unused'
+    },
+    {
+      id: 2,
+      code: 'PG20260129002',
+      memberType: '季度会员',
+      createTime: '2026-01-29 14:20:00',
+      validUntil: '2026-04-29 23:59:59',
+      status: '已使用',
+      statusClass: 'status-used'
+    }
+  ])
+  
+  onMounted(() => {
+    // 实际项目中应从接口获取可用额度和核验码列表
+    // loadQuotaAndCodes()
+  })
+  
+  // 返回上一页
+  function goBack() {
+    uni.navigateBack({ delta: 1 })
+  }
+  
+  // 查看历史
+  function viewHistory() {
+    uni.showToast({ 
+      title: '查看历史功能开发中', 
+      icon: 'none' 
+    })
+  }
+  
+  // 会员类型变更
+  function onMemberTypeChange(e) {
+    const value = e.detail.value
+    memberTypeIndex.value = value
+  }
+  
+  // 生成核验码
+  function generateCode() {
+    const count = parseInt(generateCount.value)
+    if (!count || count <= 0) {
+      uni.showToast({ 
+        title: '请输入有效的生成数量', 
+        icon: 'none' 
+      })
+      return
+    }
+    
+    if (count > availableQuota) {
+      uni.showToast({ 
+        title: '生成数量超过可用额度', 
+        icon: 'none' 
+      })
+      return
+    }
+    
+    uni.showLoading({ title: '生成中...' })
+    
+    setTimeout(() => {
+      uni.hideLoading()
+      // 模拟生成核验码
+      const newCode = {
+        id: codeList.value.length + 1,
+        code: 'PG' + new Date().getTime().toString().substring(0, 10),
+        memberType: memberTypeOptions[memberTypeIndex.value],
+        createTime: new Date().toLocaleString('zh-CN'),
+        validUntil: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toLocaleDateString('zh-CN'),
+        status: '未使用',
+        statusClass: 'status-unused'
+      }
+      codeList.value.unshift(newCode)
+      availableQuota.value -= count
+      uni.showToast({ 
+        title: '核验码生成成功', 
+        icon: 'success' 
+      })
+      // 实际项目中应调用接口生成核验码
+      // generateVerificationCode(count)
+    }, 1500)
+  }
+  
+  // 复制核验码
+  function copyCode(code) {
+    uni.setClipboardData({
+      data: code,
+      success: function() {
+        uni.showToast({ 
+          title: '核验码已复制', 
+          icon: 'success' 
+        })
+      }
+    })
+  }
+  
+  // 分享核验码
+  function shareCode(code) {
+    uni.showActionSheet({
+      itemList: ['分享到微信', '分享到朋友圈', '复制链接'],
+      success: function(res) {
+        switch(res.tapIndex) {
+          case 0:
+            uni.showToast({ title: '分享到微信', duration: 1000 })
+            break
+          case 1:
+            uni.showToast({ title: '分享到朋友圈', duration: 1000 })
+            break
+          case 2:
+            uni.setClipboardData({
+              data: `https://example.com/activate?code=${code}`,
+              success: function() {
+                uni.showToast({ title: '链接已复制', duration: 1000 })
+              }
+            })
+            break
+        }
+      }
+    })
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: #f5f7fa;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+  /* #endif */
+
+  .personal-gift-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* 页面头部 */
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 120rpx;
+    background-color: #fff;
+    padding: 0 32rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .header-left {
+    width: 60rpx;
+  }
+  
+  .back-icon {
+    font-size: 40rpx;
+    color: #303133;
+    cursor: pointer;
+  }
+  
+  .header-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .header-right {
+    width: 60rpx;
+    text-align: right;
+  }
+  
+  .history-btn {
+    font-size: 24rpx;
+    color: #409eff;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  /* 通用部分样式 */
+  .quota-section,
+  .generate-section,
+  .code-list-section {
+    padding: 32rpx;
+    background-color: #fff;
+    margin: 0 16rpx 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 24rpx;
+    padding-left: 12rpx;
+    border-left: 8rpx solid #409eff;
+    line-height: 1.2;
+  }
+  
+  /* 可用额度 */
+  .quota-card {
+    background-color: #ecf5ff;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .quota-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16rpx;
+  }
+  
+  .quota-label {
+    font-size: 24rpx;
+    color: #409eff;
+  }
+  
+  .quota-value {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #409eff;
+  }
+  
+  .quota-hint {
+    font-size: 20rpx;
+    color: #606266;
+    line-height: 1.4;
+  }
+  
+  /* 生成核验码 */
+  .generate-card {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .generate-row {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 24rpx;
+  }
+  
+  .generate-row:last-child {
+    margin-bottom: 0;
+  }
+  
+  .generate-label {
+    font-size: 24rpx;
+    color: #606266;
+    margin-bottom: 8rpx;
+  }
+  
+  .generate-control {
+    background-color: #fff;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+  }
+  
+  .picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .picker-text {
+    font-size: 24rpx;
+    color: #303133;
+  }
+  
+  .count-input {
+    font-size: 24rpx;
+    color: #303133;
+    width: 100%;
+  }
+  
+  .generate-action {
+    margin-top: 24rpx;
+  }
+  
+  .action-btn {
+    padding: 16rpx;
+    border-radius: 8rpx;
+    font-size: 24rpx;
+    font-weight: 600;
+    text-align: center;
+    cursor: pointer;
+  }
+  
+  .primary-btn {
+    background-color: #409eff;
+    color: #fff;
+  }
+  
+  /* 核验码列表 */
+  .code-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+  }
+  
+  .code-item {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .code-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16rpx;
+    padding-bottom: 16rpx;
+    border-bottom: 1rpx solid #e0e0e0;
+  }
+  
+  .code-value {
+    font-size: 24rpx;
+    font-weight: 600;
+    color: #303133;
+  }
+  
+  .code-status {
+    font-size: 20rpx;
+    font-weight: 600;
+    padding: 4rpx 12rpx;
+    border-radius: 12rpx;
+  }
+  
+  .status-unused {
+    color: #409eff;
+    background-color: rgba(64, 158, 255, 0.1);
+  }
+  
+  .status-used {
+    color: #67c23a;
+    background-color: rgba(103, 194, 58, 0.1);
+  }
+  
+  .code-body {
+    margin-bottom: 16rpx;
+  }
+  
+  .code-info {
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+  }
+  
+  .info-item {
+    display: flex;
+    font-size: 20rpx;
+  }
+  
+  .info-label {
+    color: #606266;
+    width: 120rpx;
+  }
+  
+  .info-value {
+    color: #303133;
+    flex: 1;
+  }
+  
+  .code-footer {
+    border-top: 1rpx solid #e0e0e0;
+    padding-top: 16rpx;
+  }
+  
+  .code-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 16rpx;
+  }
+  
+  .copy-btn {
+    background-color: #ecf5ff;
+    color: #409eff;
+  }
+  
+  .share-btn {
+    background-color: #f0f9eb;
+    color: #67c23a;
+  }
+  
+  /* 空状态 */
+  .empty-state {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 100rpx 0;
+  }
+  
+  .empty-icon {
+    font-size: 80rpx;
+    margin-bottom: 24rpx;
+  }
+  
+  .empty-text {
+    font-size: 24rpx;
+    color: #909399;
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/member/personal-order.vue b/src/pages/member/personal-order.vue
new file mode 100644
index 0000000..db55dbd
--- /dev/null
+++ b/src/pages/member/personal-order.vue
@@ -0,0 +1,548 @@
+<template>
+  <view class="personal-order-container">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <view class="header-left" @click="goBack">
+        <view class="back-icon">←</view>
+      </view>
+      <view class="header-title">订单查看</view>
+      <view class="header-right" @click="exportOrders">
+        <view class="export-btn">导出</view>
+      </view>
+    </view>
+    
+    <!-- 筛选条件 -->
+    <view class="filter-section">
+      <view class="filter-row">
+        <view class="filter-item">
+          <view class="filter-label">时间范围</view>
+          <view class="filter-control">
+            <picker 
+              :range="timeRangeOptions" 
+              :value="timeRangeIndex"
+              @change="onTimeRangeChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ timeRangeOptions[timeRangeIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="filter-item">
+          <view class="filter-label">订单状态</view>
+          <view class="filter-control">
+            <picker 
+              :range="statusOptions" 
+              :value="statusIndex"
+              @change="onStatusChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ statusOptions[statusIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 订单概览 -->
+    <view class="overview-section">
+      <view class="section-title">订单概览</view>
+      <view class="overview-card">
+        <view class="overview-row">
+          <view class="overview-item">
+            <view class="overview-value">{{ totalOrders }}</view>
+            <view class="overview-label">总订单数</view>
+          </view>
+          <view class="overview-item">
+            <view class="overview-value">{{ completedOrders }}</view>
+            <view class="overview-label">已完成</view>
+          </view>
+          <view class="overview-item">
+            <view class="overview-value">{{ totalAmount }}</view>
+            <view class="overview-label">总金额</view>
+          </view>
+          <view class="overview-item">
+            <view class="overview-value">{{ totalProfit }}</view>
+            <view class="overview-label">总收益</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 订单列表 -->
+    <view class="order-list-section">
+      <view class="section-title">订单列表</view>
+      <view class="order-list">
+        <view 
+          v-for="(order, index) in orderList" 
+          :key="index"
+          class="order-item"
+        >
+          <view class="order-header">
+            <view class="order-code">{{ order.code }}</view>
+            <view class="order-status" :class="order.statusClass">{{ order.status }}</view>
+          </view>
+          <view class="order-body">
+            <view class="order-info">
+              <view class="info-item">
+                <view class="info-label">学员姓名：</view>
+                <view class="info-value">{{ order.studentName }}</view>
+              </view>
+              <view class="info-item">
+                <view class="info-label">会员类型：</view>
+                <view class="info-value">{{ order.memberType }}</view>
+              </view>
+              <view class="info-item">
+                <view class="info-label">订单金额：</view>
+                <view class="info-value price">{{ order.amount }}</view>
+              </view>
+              <view class="info-item">
+                <view class="info-label">下单时间：</view>
+                <view class="info-value">{{ order.createTime }}</view>
+              </view>
+              <view class="info-item">
+                <view class="info-label">收益：</view>
+                <view class="info-value profit">{{ order.profit }}</view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 空状态 -->
+    <view v-if="orderList.length === 0" class="empty-state">
+      <view class="empty-icon">📋</view>
+      <view class="empty-text">暂无订单数据</view>
+    </view>
+    
+    <!-- 分页 -->
+    <view v-if="orderList.length > 0" class="pagination">
+      <view class="page-info">
+        共 {{ totalOrders }} 条，当前第 {{ currentPage }} 页
+      </view>
+      <view class="page-controls">
+        <view 
+          class="page-btn" 
+          :class="{ disabled: currentPage === 1 }"
+          @click="goToPage(currentPage - 1)"
+        >
+          上一页
+        </view>
+        <view 
+          class="page-btn" 
+          :class="{ disabled: currentPage === totalPages }"
+          @click="goToPage(currentPage + 1)"
+        >
+          下一页
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { ref, computed, onMounted } from "vue"
+
+  // 筛选条件
+  const timeRangeOptions = ['全部时间', '今日', '本周', '本月', '本季度', '本年']
+  const timeRangeIndex = ref(3)
+  
+  const statusOptions = ['全部状态', '待处理', '已完成', '已退款']
+  const statusIndex = ref(0)
+  
+  // 订单概览数据
+  const totalOrders = ref(100)
+  const completedOrders = ref(85)
+  const totalAmount = ref('¥12,345.67')
+  const totalProfit = ref('¥1,234.56')
+  
+  // 订单列表数据
+  const orderList = ref([
+    {
+      id: 1,
+      code: 'MO20260129001',
+      studentName: '张三',
+      memberType: '年度会员',
+      amount: '¥299.90',
+      profit: '¥29.99',
+      createTime: '2026-01-29 15:30:00',
+      status: '已完成',
+      statusClass: 'status-completed'
+    },
+    {
+      id: 2,
+      code: 'MO20260129002',
+      studentName: '李四',
+      memberType: '月度会员',
+      amount: '¥39.90',
+      profit: '¥3.99',
+      createTime: '2026-01-29 14:20:00',
+      status: '已完成',
+      statusClass: 'status-completed'
+    },
+    {
+      id: 3,
+      code: 'MO20260129003',
+      studentName: '王五',
+      memberType: '季度会员',
+      amount: '¥99.90',
+      profit: '¥9.99',
+      createTime: '2026-01-29 13:10:00',
+      status: '待处理',
+      statusClass: 'status-pending'
+    }
+  ])
+  
+  // 分页信息
+  const currentPage = ref(1)
+  const pageSize = ref(10)
+  
+  // 计算总页数
+  const totalPages = computed(() => {
+    return Math.ceil(totalOrders.value / pageSize.value)
+  })
+  
+  onMounted(() => {
+    // 实际项目中应从接口获取订单数据
+    // loadOrderData()
+  })
+  
+  // 返回上一页
+  function goBack() {
+    uni.navigateBack({ delta: 1 })
+  }
+  
+  // 导出订单
+  function exportOrders() {
+    uni.showModal({
+      title: '导出订单',
+      content: '确定要导出当前筛选条件下的订单吗？',
+      success: function(res) {
+        if (res.confirm) {
+          uni.showLoading({ title: '导出中...' })
+          
+          setTimeout(() => {
+            uni.hideLoading()
+            uni.showToast({ 
+              title: '导出成功', 
+              icon: 'success' 
+            })
+            // 实际项目中应调用接口导出订单
+            // exportOrderData()
+          }, 1500)
+        }
+      }
+    })
+  }
+  
+  // 时间范围变更
+  function onTimeRangeChange(e) {
+    const value = e.detail.value
+    timeRangeIndex.value = value
+    // 实际项目中应根据时间范围筛选订单
+    // filterOrderData()
+  }
+  
+  // 状态变更
+  function onStatusChange(e) {
+    const value = e.detail.value
+    statusIndex.value = value
+    // 实际项目中应根据状态筛选订单
+    // filterOrderData()
+  }
+  
+  // 跳转到指定页码
+  function goToPage(page) {
+    if (page < 1 || page > totalPages.value) {
+      return
+    }
+    currentPage.value = page
+    // 实际项目中应加载指定页码的订单
+    // loadOrderPage(page)
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: #f5f7fa;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+  /* #endif */
+
+  .personal-order-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* 页面头部 */
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 120rpx;
+    background-color: #fff;
+    padding: 0 32rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .header-left {
+    width: 60rpx;
+  }
+  
+  .back-icon {
+    font-size: 40rpx;
+    color: #303133;
+    cursor: pointer;
+  }
+  
+  .header-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .header-right {
+    width: 60rpx;
+    text-align: right;
+  }
+  
+  .export-btn {
+    font-size: 24rpx;
+    color: #409eff;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  /* 通用部分样式 */
+  .filter-section,
+  .overview-section,
+  .order-list-section {
+    padding: 32rpx;
+    background-color: #fff;
+    margin: 0 16rpx 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 24rpx;
+    padding-left: 12rpx;
+    border-left: 8rpx solid #409eff;
+    line-height: 1.2;
+  }
+  
+  /* 筛选条件 */
+  .filter-row {
+    display: flex;
+    gap: 16rpx;
+  }
+  
+  .filter-item {
+    flex: 1;
+  }
+  
+  .filter-label {
+    font-size: 24rpx;
+    color: #606266;
+    margin-bottom: 8rpx;
+  }
+  
+  .filter-control {
+    background-color: #f9f9f9;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+  }
+  
+  .picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .picker-text {
+    font-size: 24rpx;
+    color: #303133;
+  }
+  
+  /* 订单概览 */
+  .overview-card {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .overview-row {
+    display: flex;
+    justify-content: space-between;
+  }
+  
+  .overview-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8rpx;
+  }
+  
+  .overview-value {
+    font-size: 28rpx;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .overview-label {
+    font-size: 18rpx;
+    color: #606266;
+  }
+  
+  /* 订单列表 */
+  .order-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+  }
+  
+  .order-item {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .order-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16rpx;
+    padding-bottom: 16rpx;
+    border-bottom: 1rpx solid #e0e0e0;
+  }
+  
+  .order-code {
+    font-size: 24rpx;
+    font-weight: 600;
+    color: #303133;
+  }
+  
+  .order-status {
+    font-size: 20rpx;
+    font-weight: 600;
+    padding: 4rpx 12rpx;
+    border-radius: 12rpx;
+  }
+  
+  .status-pending {
+    color: #e6a23c;
+    background-color: rgba(230, 162, 60, 0.1);
+  }
+  
+  .status-completed {
+    color: #67c23a;
+    background-color: rgba(103, 194, 58, 0.1);
+  }
+  
+  .status-refunded {
+    color: #909399;
+    background-color: rgba(144, 147, 153, 0.1);
+  }
+  
+  .order-body {
+    margin-bottom: 16rpx;
+  }
+  
+  .order-info {
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+  }
+  
+  .info-item {
+    display: flex;
+    font-size: 20rpx;
+  }
+  
+  .info-label {
+    color: #606266;
+    width: 120rpx;
+  }
+  
+  .info-value {
+    color: #303133;
+    flex: 1;
+  }
+  
+  .info-value.price,
+  .info-value.profit {
+    color: #f56c6c;
+    font-weight: 600;
+  }
+  
+  /* 空状态 */
+  .empty-state {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 100rpx 0;
+  }
+  
+  .empty-icon {
+    font-size: 80rpx;
+    margin-bottom: 24rpx;
+  }
+  
+  .empty-text {
+    font-size: 24rpx;
+    color: #909399;
+  }
+  
+  /* 分页 */
+  .pagination {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24rpx;
+    background-color: #fff;
+    margin: 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .page-info {
+    font-size: 20rpx;
+    color: #606266;
+  }
+  
+  .page-controls {
+    display: flex;
+    gap: 16rpx;
+  }
+  
+  .page-btn {
+    padding: 8rpx 16rpx;
+    border-radius: 8rpx;
+    font-size: 20rpx;
+    color: #409eff;
+    cursor: pointer;
+  }
+  
+  .page-btn.disabled {
+    color: #909399;
+    cursor: not-allowed;
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/mine/custom-fields.vue b/src/pages/mine/custom-fields.vue
index a730b14..76584b7 100644
--- a/src/pages/mine/custom-fields.vue
+++ b/src/pages/mine/custom-fields.vue
@@ -55,9 +55,10 @@
               <view class="form-label">字段类型</view>
               <view class="form-control">
                 <picker 
-                  v-model="field.type" 
+                  :value="getFieldTypeIndex(field.type)"
                   :range="fieldTypes" 
                   :range-key="'label'"
+                  @change="onFieldTypeChange"
                   class="form-picker"
                 >
                   <view class="picker-display">{{ getFieldTypeName(field.type) }}</view>
@@ -82,7 +83,8 @@
               <view class="form-label">是否必填</view>
               <view class="form-control">
                 <switch 
-                  v-model="field.required" 
+                  :checked="field.required"
+                  @change="onRequiredChange($event, index)"
                   class="form-switch"
                   active-color="#409eff"
                 />
@@ -113,7 +115,8 @@
           <view class="rule-label">启用字段筛选</view>
           <view class="rule-control">
             <switch 
-              v-model="filterRules.enabled" 
+              :checked="filterRules.enabled"
+              @change="onFilterEnabledChange"
               class="form-switch"
               active-color="#409eff"
             />
@@ -123,18 +126,19 @@
         <view class="rule-item">
           <view class="rule-label">默认显示字段</view>
           <view class="rule-control">
-            <picker 
-              v-model="filterRules.defaultFields" 
-              :range="availableFields" 
-              :range-key="'name'"
-              mode="multiSelector"
-              class="form-picker"
-            >
-              <view class="picker-display">
-                {{ filterRules.defaultFields.length }} 个字段
+                <picker 
+                  :value="getDefaultFieldsIndex()"
+                  :range="availableFields" 
+                  :range-key="'name'"
+                  mode="multiSelector"
+                  @change="onDefaultFieldsChange"
+                  class="form-picker"
+                >
+                  <view class="picker-display">
+                    {{ filterRules.defaultFields.length }} 个字段
+                  </view>
+                </picker>
               </view>
-            </picker>
-          </view>
         </view>
       </view>
     </view>
@@ -188,6 +192,9 @@
     defaultFields: [0, 1]
   })
   
+  // 当前编辑的字段索引
+  const currentEditIndex = ref(null)
+  
   // 计算可用字段
   const availableFields = computed(() => {
     return customFields.value.map((field, index) => ({
@@ -237,6 +244,39 @@
     })
   }
   
+  // 获取字段类型索引
+  function getFieldTypeIndex(type) {
+    return fieldTypes.value.findIndex(item => item.value === type)
+  }
+  
+  // 处理字段类型变更
+  function onFieldTypeChange(e) {
+    const index = e.detail.value
+    if (currentEditIndex.value !== null) {
+      customFields.value[currentEditIndex.value].type = fieldTypes.value[index].value
+    }
+  }
+  
+  // 获取默认字段索引
+  function getDefaultFieldsIndex() {
+    return filterRules.value.defaultFields
+  }
+  
+  // 处理默认字段变更
+  function onDefaultFieldsChange(e) {
+    filterRules.value.defaultFields = e.detail.value
+  }
+  
+  // 处理必填状态变更
+  function onRequiredChange(e, index) {
+    customFields.value[index].required = e.detail.value
+  }
+  
+  // 处理筛选启用状态变更
+  function onFilterEnabledChange(e) {
+    filterRules.value.enabled = e.detail.value
+  }
+  
   // 移动字段
   function moveField(index, direction) {
     if (direction === 'up' && index > 0) {
diff --git a/src/pages/mine/password-change.vue b/src/pages/mine/password-change.vue
index 77624ee..6c7a024 100644
--- a/src/pages/mine/password-change.vue
+++ b/src/pages/mine/password-change.vue
@@ -69,16 +69,16 @@
         <view class="tip-item" :class="{ active: passwordForm.newPassword.length >= 8 }">
           • 密码长度至少8位
         </view>
-        <view class="tip-item" :class="{ active: /[A-Z]/.test(passwordForm.newPassword) }">
+        <view class="tip-item" :class="{ active: hasUpperCase }">
           • 包含大写字母
         </view>
-        <view class="tip-item" :class="{ active: /[a-z]/.test(passwordForm.newPassword) }">
+        <view class="tip-item" :class="{ active: hasLowerCase }">
           • 包含小写字母
         </view>
-        <view class="tip-item" :class="{ active: /[0-9]/.test(passwordForm.newPassword) }">
+        <view class="tip-item" :class="{ active: hasNumber }">
           • 包含数字
         </view>
-        <view class="tip-item" :class="{ active: /[!@#$%^&*(),.?":{}|<>]/.test(passwordForm.newPassword) }">
+        <view class="tip-item" :class="{ active: hasSpecialChar }">
           • 包含特殊字符
         </view>
       </view>
@@ -119,7 +119,13 @@
     confirmPassword: ''
   })
   
-  // 显示密码
+  // 密码强度计算属性
+  const hasUpperCase = computed(() => /[A-Z]/.test(passwordForm.value.newPassword))
+  const hasLowerCase = computed(() => /[a-z]/.test(passwordForm.value.newPassword))
+  const hasNumber = computed(() => /[0-9]/.test(passwordForm.value.newPassword))
+  const hasSpecialChar = computed(() => /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(passwordForm.value.newPassword))
+  
+  // 密码强度文本显示密码
   const showPassword = ref(false)
   
   // 切换密码显示状态
diff --git a/src/pages/mine/personal-info.vue b/src/pages/mine/personal-info.vue
index d86b6e0..9002a5c 100644
--- a/src/pages/mine/personal-info.vue
+++ b/src/pages/mine/personal-info.vue
@@ -67,8 +67,9 @@
         <view class="form-label">性别</view>
         <view class="form-control">
           <picker 
-            v-model="userInfo.gender" 
+            :value="getGenderIndex()"
             :range="genders" 
+            @change="onGenderChange"
             class="form-picker"
           >
             <view class="picker-display">{{ userInfo.gender || '请选择性别' }}</view>
@@ -165,6 +166,17 @@
     uni.navigateBack({ delta: 1 })
   }
   
+  // 获取性别索引
+  function getGenderIndex() {
+    return genders.indexOf(userInfo.value.gender)
+  }
+  
+  // 处理性别变更
+  function onGenderChange(e) {
+    const index = e.detail.value
+    userInfo.value.gender = genders[index]
+  }
+  
   // 选择头像
   function chooseAvatar() {
     uni.chooseImage({
diff --git a/src/pages/stats/distribution.vue b/src/pages/stats/distribution.vue
new file mode 100644
index 0000000..b2266a5
--- /dev/null
+++ b/src/pages/stats/distribution.vue
@@ -0,0 +1,589 @@
+<template>
+  <view class="distribution-stats-container">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <view class="header-left" @click="goBack">
+        <view class="back-icon">←</view>
+      </view>
+      <view class="header-title">分销业绩统计</view>
+      <view class="header-right" @click="exportData">
+        <view class="export-btn">导出</view>
+      </view>
+    </view>
+    
+    <!-- 筛选条件 -->
+    <view class="filter-section">
+      <view class="filter-row">
+        <view class="filter-item">
+          <view class="filter-label">时间范围</view>
+          <view class="filter-control">
+            <picker-view 
+              :value="dateRangeValue" 
+              @change="onDateRangeChange"
+              class="date-picker"
+            >
+              <picker-view-column>
+                <view v-for="(date, index) in dateOptions" :key="index">{{ date }}</view>
+              </picker-view-column>
+            </picker-view>
+          </view>
+        </view>
+        <view class="filter-item">
+          <view class="filter-label">分销员</view>
+          <view class="filter-control">
+            <picker 
+              :range="distributorOptions" 
+              :value="distributorIndex"
+              @change="onDistributorChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ distributorOptions[distributorIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 核心指标 -->
+    <view class="metrics-section">
+      <view class="metrics-grid">
+        <view class="metric-card">
+          <view class="metric-icon">💰</view>
+          <view class="metric-content">
+            <view class="metric-value">{{ metrics.totalProfit }}</view>
+            <view class="metric-label">总提成</view>
+          </view>
+        </view>
+        <view class="metric-card">
+          <view class="metric-icon">📱</view>
+          <view class="metric-content">
+            <view class="metric-value">{{ metrics.scanCount }}</view>
+            <view class="metric-label">扫码数</view>
+          </view>
+        </view>
+        <view class="metric-card">
+          <view class="metric-icon">👥</view>
+          <view class="metric-content">
+            <view class="metric-value">{{ metrics.paidCount }}</view>
+            <view class="metric-label">付费人数</view>
+          </view>
+        </view>
+        <view class="metric-card">
+          <view class="metric-icon">📈</view>
+          <view class="metric-content">
+            <view class="metric-value">{{ metrics.conversionRate }}</view>
+            <view class="metric-label">转化率</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 趋势图表 -->
+    <view class="chart-section">
+      <view class="section-title">业绩趋势</view>
+      <view class="chart-container">
+        <!-- 模拟图表，实际项目中应使用图表库 -->
+        <view class="mock-chart">
+          <view class="chart-header">
+            <view class="chart-title">近7天业绩趋势</view>
+          </view>
+          <view class="chart-body">
+            <view class="chart-bars">
+              <view v-for="(day, index) in trendData" :key="index" class="chart-bar">
+                <view class="bar-container">
+                  <view class="bar" :style="{ height: day.value + '%' }"></view>
+                </view>
+                <view class="bar-label">{{ day.date }}</view>
+                <view class="bar-value">{{ day.amount }}</view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 排行榜 -->
+    <view class="ranking-section">
+      <view class="section-title">分销员排行榜</view>
+      <view class="ranking-list">
+        <view 
+          v-for="(item, index) in rankingData" 
+          :key="index"
+          class="ranking-item"
+          :class="{ 'top-three': index < 3 }"
+        >
+          <view class="ranking-number">{{ index + 1 }}</view>
+          <view class="ranking-info">
+            <view class="ranking-name">{{ item.name }}</view>
+            <view class="ranking-stats">
+              <view class="stat-item">
+                <view class="stat-label">提成：</view>
+                <view class="stat-value">{{ item.profit }}</view>
+              </view>
+              <view class="stat-item">
+                <view class="stat-label">扫码：</view>
+                <view class="stat-value">{{ item.scans }}</view>
+              </view>
+            </view>
+          </view>
+          <view class="ranking-arrow" @click="viewDistributorDetail(item.id)">
+            →
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { ref, onMounted } from "vue"
+
+  // 筛选条件
+  const dateOptions = ['全部时间', '近7天', '近30天', '近90天', '今年', '去年']
+  const dateRangeValue = ref([0])
+  
+  const distributorOptions = ['全部分销员', '张三', '李四', '王五', '赵六']
+  const distributorIndex = ref(0)
+  
+  // 核心指标
+  const metrics = ref({
+    totalProfit: '¥12,345.67',
+    scanCount: 1234,
+    paidCount: 456,
+    conversionRate: '36.9%'
+  })
+  
+  // 趋势数据
+  const trendData = ref([
+    { date: '1/23', amount: '¥1,234', value: 30 },
+    { date: '1/24', amount: '¥1,567', value: 40 },
+    { date: '1/25', amount: '¥987', value: 25 },
+    { date: '1/26', amount: '¥2,109', value: 55 },
+    { date: '1/27', amount: '¥1,876', value: 48 },
+    { date: '1/28', amount: '¥2,345', value: 60 },
+    { date: '1/29', amount: '¥1,987', value: 50 }
+  ])
+  
+  // 排行榜数据
+  const rankingData = ref([
+    { id: 1, name: '张三', profit: '¥3,456.78', scans: 345 },
+    { id: 2, name: '李四', profit: '¥2,890.12', scans: 298 },
+    { id: 3, name: '王五', profit: '¥2,123.45', scans: 215 },
+    { id: 4, name: '赵六', profit: '¥1,876.54', scans: 189 },
+    { id: 5, name: '钱七', profit: '¥1,543.21', scans: 156 }
+  ])
+  
+  // 返回上一页
+  function goBack() {
+    uni.navigateBack({ delta: 1 })
+  }
+  
+  // 导出数据
+  function exportData() {
+    uni.showModal({
+      title: '导出数据',
+      content: '是否导出当前统计数据？',
+      success: function(res) {
+        if (res.confirm) {
+          uni.showLoading({ title: '导出中...' })
+          
+          setTimeout(() => {
+            uni.hideLoading()
+            uni.showToast({ title: '导出成功', icon: 'success' })
+          }, 1500)
+        }
+      }
+    })
+  }
+  
+  // 日期范围变化
+  function onDateRangeChange(e) {
+    const value = e.detail.value
+    dateRangeValue.value = value
+    // 实际项目中应根据选择的日期范围重新获取数据
+    refreshData()
+  }
+  
+  // 分销员变化
+  function onDistributorChange(e) {
+    const value = e.detail.value
+    distributorIndex.value = value
+    // 实际项目中应根据选择的分销员重新获取数据
+    refreshData()
+  }
+  
+  // 刷新数据
+  function refreshData() {
+    uni.showLoading({ title: '加载中...' })
+    
+    setTimeout(() => {
+      uni.hideLoading()
+      // 实际项目中应从接口获取数据
+    }, 1000)
+  }
+  
+  // 查看分销员详情
+  function viewDistributorDetail(distributorId) {
+    uni.navigateTo({
+      url: `/pages/distributor/detail?id=${distributorId}`
+    })
+  }
+  
+  onMounted(() => {
+    // 实际项目中应从接口获取数据
+    // loadStatsData()
+  })
+</script>
+
+<style lang="scss" scoped>
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: #f5f7fa;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+  /* #endif */
+
+  .distribution-stats-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* 页面头部 */
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 120rpx;
+    background-color: #fff;
+    padding: 0 32rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .header-left {
+    width: 60rpx;
+  }
+  
+  .back-icon {
+    font-size: 40rpx;
+    color: #303133;
+    cursor: pointer;
+  }
+  
+  .header-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .header-right {
+    width: 60rpx;
+    text-align: right;
+  }
+  
+  .export-btn {
+    font-size: 28rpx;
+    color: #409eff;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  /* 筛选条件 */
+  .filter-section {
+    padding: 24rpx 32rpx;
+    background-color: #fff;
+    margin: 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .filter-row {
+    display: flex;
+    justify-content: space-between;
+    gap: 16rpx;
+  }
+  
+  .filter-item {
+    flex: 1;
+  }
+  
+  .filter-label {
+    font-size: 24rpx;
+    color: #606266;
+    margin-bottom: 8rpx;
+  }
+  
+  .filter-control {
+    background-color: #f9f9f9;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+  }
+  
+  .date-picker {
+    height: 150rpx;
+  }
+  
+  .picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .picker-text {
+    font-size: 24rpx;
+    color: #303133;
+  }
+  
+  /* 核心指标 */
+  .metrics-section {
+    padding: 32rpx;
+    background-color: #fff;
+    margin: 0 16rpx 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .metrics-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16rpx;
+  }
+  
+  .metric-card {
+    display: flex;
+    align-items: center;
+    padding: 24rpx;
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+  }
+  
+  .metric-icon {
+    font-size: 48rpx;
+    margin-right: 24rpx;
+  }
+  
+  .metric-content {
+    flex: 1;
+  }
+  
+  .metric-value {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 8rpx;
+  }
+  
+  .metric-label {
+    font-size: 24rpx;
+    color: #606266;
+  }
+  
+  /* 图表区域 */
+  .chart-section {
+    padding: 32rpx;
+    background-color: #fff;
+    margin: 0 16rpx 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 24rpx;
+    padding-left: 12rpx;
+    border-left: 8rpx solid #409eff;
+    line-height: 1.2;
+  }
+  
+  .chart-container {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .mock-chart {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .chart-header {
+    margin-bottom: 24rpx;
+  }
+  
+  .chart-title {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #303133;
+    text-align: center;
+  }
+  
+  .chart-bars {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    height: 300rpx;
+    gap: 16rpx;
+  }
+  
+  .chart-bar {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .bar-container {
+    flex: 1;
+    width: 100%;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    margin-bottom: 12rpx;
+  }
+  
+  .bar {
+    width: 40rpx;
+    background-color: #409eff;
+    border-radius: 4rpx 4rpx 0 0;
+    transition: height 0.5s ease;
+  }
+  
+  .bar-label {
+    font-size: 20rpx;
+    color: #606266;
+    margin-bottom: 8rpx;
+  }
+  
+  .bar-value {
+    font-size: 20rpx;
+    font-weight: 600;
+    color: #303133;
+  }
+  
+  /* 排行榜 */
+  .ranking-section {
+    padding: 32rpx;
+    background-color: #fff;
+    margin: 0 16rpx 32rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .ranking-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+  }
+  
+  .ranking-item {
+    display: flex;
+    align-items: center;
+    padding: 24rpx;
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    transition: all 0.3s ease;
+  }
+  
+  .ranking-item:active {
+    transform: translateY(2rpx);
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .ranking-item.top-three {
+    background-color: #f0f9eb;
+    border-left: 8rpx solid #67c23a;
+  }
+  
+  .ranking-number {
+    width: 48rpx;
+    height: 48rpx;
+    border-radius: 24rpx;
+    background-color: #409eff;
+    color: #fff;
+    font-size: 24rpx;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 24rpx;
+  }
+  
+  .ranking-item.top-three .ranking-number {
+    background-color: #67c23a;
+  }
+  
+  .ranking-info {
+    flex: 1;
+  }
+  
+  .ranking-name {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 8rpx;
+  }
+  
+  .ranking-stats {
+    display: flex;
+    gap: 32rpx;
+  }
+  
+  .stat-item {
+    display: flex;
+    align-items: center;
+  }
+  
+  .stat-label {
+    font-size: 20rpx;
+    color: #606266;
+    margin-right: 8rpx;
+  }
+  
+  .stat-value {
+    font-size: 20rpx;
+    font-weight: 600;
+    color: #303133;
+  }
+  
+  .ranking-arrow {
+    font-size: 32rpx;
+    color: #909399;
+    margin-left: 16rpx;
+  }
+  
+  /* 响应式设计 */
+  @media screen and (min-width: 500px) {
+    .distribution-stats-container {
+      max-width: 900px;
+      margin: 0 auto;
+    }
+    
+    .metrics-grid {
+      grid-template-columns: repeat(4, 1fr);
+    }
+    
+    .filter-row {
+      gap: 24rpx;
+    }
+    
+    .chart-bars {
+      height: 400rpx;
+    }
+    
+    .bar {
+      width: 60rpx;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/stats/member.vue b/src/pages/stats/member.vue
new file mode 100644
index 0000000..ed040fc
--- /dev/null
+++ b/src/pages/stats/member.vue
@@ -0,0 +1,743 @@
+<template>
+  <view class="member-stats-container">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <view class="header-left" @click="goBack">
+        <view class="back-icon">←</view>
+      </view>
+      <view class="header-title">会员运营统计</view>
+      <view class="header-right" @click="exportData">
+        <view class="export-btn">导出</view>
+      </view>
+    </view>
+    
+    <!-- 筛选条件 -->
+    <view class="filter-section">
+      <view class="filter-row">
+        <view class="filter-item">
+          <view class="filter-label">时间范围</view>
+          <view class="filter-control">
+            <picker 
+              :range="dateOptions" 
+              :value="dateIndex"
+              @change="onDateChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ dateOptions[dateIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="filter-item">
+          <view class="filter-label">会员类型</view>
+          <view class="filter-control">
+            <picker 
+              :range="memberTypeOptions" 
+              :value="memberTypeIndex"
+              @change="onMemberTypeChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ memberTypeOptions[memberTypeIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 核心指标 -->
+    <view class="metrics-section">
+      <view class="metrics-grid">
+        <view class="metric-card">
+          <view class="metric-icon">🛒</view>
+          <view class="metric-content">
+            <view class="metric-value">{{ metrics.totalOrders }}</view>
+            <view class="metric-label">总订单数</view>
+          </view>
+        </view>
+        <view class="metric-card">
+          <view class="metric-icon">💰</view>
+          <view class="metric-content">
+            <view class="metric-value">{{ metrics.totalAmount }}</view>
+            <view class="metric-label">总金额</view>
+          </view>
+        </view>
+        <view class="metric-card">
+          <view class="metric-icon">📈</view>
+          <view class="metric-content">
+            <view class="metric-value">{{ metrics.averageAmount }}</view>
+            <view class="metric-label">平均金额</view>
+          </view>
+        </view>
+        <view class="metric-card">
+          <view class="metric-icon">⚠️</view>
+          <view class="metric-content">
+            <view class="metric-value">{{ metrics.refundRate }}</view>
+            <view class="metric-label">退款率</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 订单趋势 -->
+    <view class="chart-section">
+      <view class="section-title">订单趋势</view>
+      <view class="chart-container">
+        <!-- 模拟图表，实际项目中应使用图表库 -->
+        <view class="mock-chart">
+          <view class="chart-header">
+            <view class="chart-title">近30天订单趋势</view>
+          </view>
+          <view class="chart-body">
+            <view class="chart-lines">
+              <view class="chart-line-container">
+                <view class="chart-line order-line"></view>
+              </view>
+              <view class="chart-line-container">
+                <view class="chart-line amount-line"></view>
+              </view>
+            </view>
+            <view class="chart-legend">
+              <view class="legend-item">
+                <view class="legend-color order-color"></view>
+                <view class="legend-text">订单数</view>
+              </view>
+              <view class="legend-item">
+                <view class="legend-color amount-color"></view>
+                <view class="legend-text">金额</view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 会员类型分布 -->
+    <view class="distribution-section">
+      <view class="section-title">会员类型分布</view>
+      <view class="distribution-grid">
+        <view 
+          v-for="(item, index) in memberTypeDistribution" 
+          :key="index"
+          class="distribution-card"
+        >
+          <view class="distribution-icon">{{ item.icon }}</view>
+          <view class="distribution-content">
+            <view class="distribution-title">{{ item.type }}</view>
+            <view class="distribution-stats">
+              <view class="stat-item">
+                <view class="stat-label">订单：</view>
+                <view class="stat-value">{{ item.orders }}</view>
+              </view>
+              <view class="stat-item">
+                <view class="stat-label">占比：</view>
+                <view class="stat-value">{{ item.percentage }}</view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 最近订单 -->
+    <view class="recent-orders-section">
+      <view class="section-title">最近订单</view>
+      <view class="order-list">
+        <view 
+          v-for="(order, index) in recentOrders" 
+          :key="index"
+          class="order-item"
+          @click="viewOrderDetail(order.id)"
+        >
+          <view class="order-header">
+            <view class="order-no">订单号：{{ order.orderNo }}</view>
+            <view class="order-status" :class="order.status">{{ order.statusText }}</view>
+          </view>
+          <view class="order-info">
+            <view class="info-row">
+              <view class="info-label">会员类型：</view>
+              <view class="info-value">{{ order.memberType }}</view>
+            </view>
+            <view class="info-row">
+              <view class="info-label">学员：</view>
+              <view class="info-value">{{ order.studentName }}</view>
+            </view>
+            <view class="info-row">
+              <view class="info-label">金额：</view>
+              <view class="info-value price">{{ order.amount }}</view>
+            </view>
+            <view class="info-row">
+              <view class="info-label">时间：</view>
+              <view class="info-value">{{ order.createTime }}</view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { ref, onMounted } from "vue"
+
+  // 筛选条件
+  const dateOptions = ['近7天', '近30天', '近90天', '今年', '全部']
+  const dateIndex = ref(0)
+  
+  const memberTypeOptions = ['全部类型', '月度会员', '季度会员', '年度会员']
+  const memberTypeIndex = ref(0)
+  
+  // 核心指标
+  const metrics = ref({
+    totalOrders: 789,
+    totalAmount: '¥89,765.43',
+    averageAmount: '¥113.77',
+    refundRate: '2.1%'
+  })
+  
+  // 会员类型分布
+  const memberTypeDistribution = ref([
+    {
+      type: '月度会员',
+      icon: '📅',
+      orders: 345,
+      percentage: '43.7%'
+    },
+    {
+      type: '季度会员',
+      icon: '📊',
+      orders: 234,
+      percentage: '29.7%'
+    },
+    {
+      type: '年度会员',
+      icon: '📈',
+      orders: 210,
+      percentage: '26.6%'
+    }
+  ])
+  
+  // 最近订单
+  const recentOrders = ref([
+    {
+      id: 1,
+      orderNo: 'M202601290001',
+      memberType: '年度会员',
+      studentName: '张**',
+      amount: '¥299.00',
+      status: 'success',
+      statusText: '支付成功',
+      createTime: '2026-01-29 10:30:45'
+    },
+    {
+      id: 2,
+      orderNo: 'M202601290002',
+      memberType: '季度会员',
+      studentName: '李**',
+      amount: '¥99.00',
+      status: 'success',
+      statusText: '支付成功',
+      createTime: '2026-01-29 09:15:30'
+    },
+    {
+      id: 3,
+      orderNo: 'M202601290003',
+      memberType: '月度会员',
+      studentName: '王**',
+      amount: '¥39.00',
+      status: 'pending',
+      statusText: '待支付',
+      createTime: '2026-01-29 08:45:12'
+    }
+  ])
+  
+  // 返回上一页
+  function goBack() {
+    uni.navigateBack({ delta: 1 })
+  }
+  
+  // 导出数据
+  function exportData() {
+    uni.showModal({
+      title: '导出数据',
+      content: '是否导出当前统计数据？',
+      success: function(res) {
+        if (res.confirm) {
+          uni.showLoading({ title: '导出中...' })
+          
+          setTimeout(() => {
+            uni.hideLoading()
+            uni.showToast({ title: '导出成功', icon: 'success' })
+          }, 1500)
+        }
+      }
+    })
+  }
+  
+  // 日期变化
+  function onDateChange(e) {
+    const value = e.detail.value
+    dateIndex.value = value
+    // 实际项目中应根据选择的日期重新获取数据
+    refreshData()
+  }
+  
+  // 会员类型变化
+  function onMemberTypeChange(e) {
+    const value = e.detail.value
+    memberTypeIndex.value = value
+    // 实际项目中应根据选择的会员类型重新获取数据
+    refreshData()
+  }
+  
+  // 刷新数据
+  function refreshData() {
+    uni.showLoading({ title: '加载中...' })
+    
+    setTimeout(() => {
+      uni.hideLoading()
+      // 实际项目中应从接口获取数据
+    }, 1000)
+  }
+  
+  // 查看订单详情
+  function viewOrderDetail(orderId) {
+    uni.navigateTo({
+      url: `/pages/member/order-detail?id=${orderId}`
+    })
+  }
+  
+  onMounted(() => {
+    // 实际项目中应从接口获取数据
+    // loadStatsData()
+  })
+</script>
+
+<style lang="scss" scoped>
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: #f5f7fa;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+  /* #endif */
+
+  .member-stats-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* 页面头部 */
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 120rpx;
+    background-color: #fff;
+    padding: 0 32rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .header-left {
+    width: 60rpx;
+  }
+  
+  .back-icon {
+    font-size: 40rpx;
+    color: #303133;
+    cursor: pointer;
+  }
+  
+  .header-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .header-right {
+    width: 60rpx;
+    text-align: right;
+  }
+  
+  .export-btn {
+    font-size: 28rpx;
+    color: #409eff;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  /* 筛选条件 */
+  .filter-section {
+    padding: 24rpx 32rpx;
+    background-color: #fff;
+    margin: 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .filter-row {
+    display: flex;
+    justify-content: space-between;
+    gap: 16rpx;
+  }
+  
+  .filter-item {
+    flex: 1;
+  }
+  
+  .filter-label {
+    font-size: 24rpx;
+    color: #606266;
+    margin-bottom: 8rpx;
+  }
+  
+  .filter-control {
+    background-color: #f9f9f9;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+  }
+  
+  .picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .picker-text {
+    font-size: 24rpx;
+    color: #303133;
+  }
+  
+  /* 核心指标 */
+  .metrics-section {
+    padding: 32rpx;
+    background-color: #fff;
+    margin: 0 16rpx 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .metrics-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16rpx;
+  }
+  
+  .metric-card {
+    display: flex;
+    align-items: center;
+    padding: 24rpx;
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+  }
+  
+  .metric-icon {
+    font-size: 48rpx;
+    margin-right: 24rpx;
+  }
+  
+  .metric-content {
+    flex: 1;
+  }
+  
+  .metric-value {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 8rpx;
+  }
+  
+  .metric-label {
+    font-size: 24rpx;
+    color: #606266;
+  }
+  
+  /* 图表区域 */
+  .chart-section {
+    padding: 32rpx;
+    background-color: #fff;
+    margin: 0 16rpx 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 24rpx;
+    padding-left: 12rpx;
+    border-left: 8rpx solid #409eff;
+    line-height: 1.2;
+  }
+  
+  .chart-container {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .mock-chart {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .chart-header {
+    margin-bottom: 24rpx;
+  }
+  
+  .chart-title {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #303133;
+    text-align: center;
+  }
+  
+  .chart-body {
+    display: flex;
+    flex-direction: column;
+    gap: 24rpx;
+  }
+  
+  .chart-lines {
+    height: 300rpx;
+    position: relative;
+  }
+  
+  .chart-line-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  
+  .chart-line {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 60%;
+    background: linear-gradient(to top, rgba(64, 158, 255, 0.2), transparent);
+    border-radius: 8rpx;
+  }
+  
+  .chart-line.amount-line {
+    height: 40%;
+    background: linear-gradient(to top, rgba(103, 194, 58, 0.2), transparent);
+  }
+  
+  .chart-legend {
+    display: flex;
+    justify-content: center;
+    gap: 32rpx;
+  }
+  
+  .legend-item {
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+  }
+  
+  .legend-color {
+    width: 16rpx;
+    height: 16rpx;
+    border-radius: 8rpx;
+  }
+  
+  .legend-color.order-color {
+    background-color: #409eff;
+  }
+  
+  .legend-color.amount-color {
+    background-color: #67c23a;
+  }
+  
+  .legend-text {
+    font-size: 20rpx;
+    color: #606266;
+  }
+  
+  /* 会员类型分布 */
+  .distribution-section {
+    padding: 32rpx;
+    background-color: #fff;
+    margin: 0 16rpx 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .distribution-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16rpx;
+  }
+  
+  .distribution-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 24rpx;
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+  }
+  
+  .distribution-icon {
+    font-size: 48rpx;
+    margin-bottom: 16rpx;
+  }
+  
+  .distribution-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .distribution-title {
+    font-size: 24rpx;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 16rpx;
+  }
+  
+  .distribution-stats {
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+    align-items: center;
+  }
+  
+  .stat-item {
+    display: flex;
+    align-items: center;
+  }
+  
+  .stat-label {
+    font-size: 20rpx;
+    color: #606266;
+    margin-right: 8rpx;
+  }
+  
+  .stat-value {
+    font-size: 20rpx;
+    font-weight: 600;
+    color: #303133;
+  }
+  
+  /* 最近订单 */
+  .recent-orders-section {
+    padding: 32rpx;
+    background-color: #fff;
+    margin: 0 16rpx 32rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .order-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+  }
+  
+  .order-item {
+    padding: 24rpx;
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    transition: all 0.3s ease;
+  }
+  
+  .order-item:active {
+    transform: translateY(2rpx);
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .order-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16rpx;
+  }
+  
+  .order-no {
+    font-size: 24rpx;
+    color: #303133;
+  }
+  
+  .order-status {
+    padding: 4rpx 12rpx;
+    border-radius: 4rpx;
+    font-size: 18rpx;
+    font-weight: 600;
+  }
+  
+  .order-status.success {
+    background-color: #f0f9eb;
+    color: #67c23a;
+  }
+  
+  .order-status.pending {
+    background-color: #ecf5ff;
+    color: #409eff;
+  }
+  
+  .order-status.refund {
+    background-color: #fef0f0;
+    color: #f56c6c;
+  }
+  
+  .order-info {
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+  }
+  
+  .info-row {
+    display: flex;
+    align-items: center;
+  }
+  
+  .info-label {
+    font-size: 20rpx;
+    color: #606266;
+    width: 120rpx;
+  }
+  
+  .info-value {
+    font-size: 20rpx;
+    color: #303133;
+    flex: 1;
+  }
+  
+  .info-value.price {
+    font-weight: 600;
+    color: #f56c6c;
+  }
+  
+  /* 响应式设计 */
+  @media screen and (min-width: 500px) {
+    .member-stats-container {
+      max-width: 900px;
+      margin: 0 auto;
+    }
+    
+    .metrics-grid {
+      grid-template-columns: repeat(4, 1fr);
+    }
+    
+    .distribution-grid {
+      gap: 24rpx;
+    }
+    
+    .order-item {
+      padding: 32rpx;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/stats/student.vue b/src/pages/stats/student.vue
new file mode 100644
index 0000000..1b62285
--- /dev/null
+++ b/src/pages/stats/student.vue
@@ -0,0 +1,762 @@
+<template>
+  <view class="student-stats-container">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <view class="header-left" @click="goBack">
+        <view class="back-icon">←</view>
+      </view>
+      <view class="header-title">学员学情统计</view>
+      <view class="header-right" @click="exportData">
+        <view class="export-btn">导出</view>
+      </view>
+    </view>
+    
+    <!-- 筛选条件 -->
+    <view class="filter-section">
+      <view class="filter-row">
+        <view class="filter-item">
+          <view class="filter-label">时间范围</view>
+          <view class="filter-control">
+            <picker 
+              :range="dateOptions" 
+              :value="dateIndex"
+              @change="onDateChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ dateOptions[dateIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="filter-item">
+          <view class="filter-label">班级</view>
+          <view class="filter-control">
+            <picker 
+              :range="classOptions" 
+              :value="classIndex"
+              @change="onClassChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ classOptions[classIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 核心指标 -->
+    <view class="metrics-section">
+      <view class="metrics-grid">
+        <view class="metric-card">
+          <view class="metric-icon">🎓</view>
+          <view class="metric-content">
+            <view class="metric-value">{{ metrics.totalStudents }}</view>
+            <view class="metric-label">总学员数</view>
+          </view>
+        </view>
+        <view class="metric-card">
+          <view class="metric-icon">👥</view>
+          <view class="metric-content">
+            <view class="metric-value">{{ metrics.memberStudents }}</view>
+            <view class="metric-label">会员学员</view>
+          </view>
+        </view>
+        <view class="metric-card">
+          <view class="metric-icon">📊</view>
+          <view class="metric-content">
+            <view class="metric-value">{{ metrics.avgCorrectRate }}</view>
+            <view class="metric-label">平均正确率</view>
+          </view>
+        </view>
+        <view class="metric-card">
+          <view class="metric-icon">✏️</view>
+          <view class="metric-content">
+            <view class="metric-value">{{ metrics.avgExamScore }}</view>
+            <view class="metric-label">平均模考分</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 学习趋势 -->
+    <view class="chart-section">
+      <view class="section-title">学习趋势</view>
+      <view class="chart-container">
+        <!-- 模拟图表，实际项目中应使用图表库 -->
+        <view class="mock-chart">
+          <view class="chart-header">
+            <view class="chart-title">近30天学习时长趋势</view>
+          </view>
+          <view class="chart-body">
+            <view class="chart-bars">
+              <view v-for="(day, index) in trendData" :key="index" class="chart-bar">
+                <view class="bar-container">
+                  <view class="bar" :style="{ height: day.value + '%' }"></view>
+                </view>
+                <view class="bar-label">{{ day.date }}</view>
+                <view class="bar-value">{{ day.hours }}h</view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 学习情况分布 -->
+    <view class="distribution-section">
+      <view class="section-title">学习情况分布</view>
+      <view class="distribution-grid">
+        <view 
+          v-for="(item, index) in learningDistribution" 
+          :key="index"
+          class="distribution-card"
+        >
+          <view class="distribution-icon">{{ item.icon }}</view>
+          <view class="distribution-content">
+            <view class="distribution-title">{{ item.level }}</view>
+            <view class="distribution-stats">
+              <view class="stat-item">
+                <view class="stat-label">人数：</view>
+                <view class="stat-value">{{ item.count }}</view>
+              </view>
+              <view class="stat-item">
+                <view class="stat-label">占比：</view>
+                <view class="stat-value">{{ item.percentage }}</view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 学员列表 -->
+    <view class="student-section">
+      <view class="section-title">学员列表</view>
+      <view class="student-list">
+        <view 
+          v-for="(student, index) in studentList" 
+          :key="index"
+          class="student-item"
+          @click="viewStudentDetail(student.id)"
+        >
+          <view class="student-info">
+            <view class="student-name">{{ student.name }}</view>
+            <view class="student-meta">
+              <view class="meta-item">
+                <view class="meta-label">班级：</view>
+                <view class="meta-value">{{ student.class }}</view>
+              </view>
+              <view class="meta-item">
+                <view class="meta-label">会员：</view>
+                <view class="meta-value" :class="{ 'member': student.isMember }">{{ student.isMember ? '是' : '否' }}</view>
+              </view>
+            </view>
+          </view>
+          <view class="student-stats">
+            <view class="stat-item">
+              <view class="stat-label">正确率：</view>
+              <view class="stat-value">{{ student.correctRate }}</view>
+            </view>
+            <view class="stat-item">
+              <view class="stat-label">模考分：</view>
+              <view class="stat-value">{{ student.examScore }}</view>
+            </view>
+          </view>
+          <view class="student-arrow">
+            →
+          </view>
+        </view>
+      </view>
+      <view class="load-more" @click="loadMoreStudents">
+        加载更多
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { ref, onMounted } from "vue"
+
+  // 筛选条件
+  const dateOptions = ['近7天', '近30天', '近90天', '今年', '全部']
+  const dateIndex = ref(0)
+  
+  const classOptions = ['全部班级', '一班', '二班', '三班', '四班']
+  const classIndex = ref(0)
+  
+  // 核心指标
+  const metrics = ref({
+    totalStudents: 1234,
+    memberStudents: 890,
+    avgCorrectRate: '78.5%',
+    avgExamScore: '82.3'
+  })
+  
+  // 学习趋势数据
+  const trendData = ref([
+    { date: '1/20', hours: 2.5, value: 30 },
+    { date: '1/21', hours: 3.2, value: 40 },
+    { date: '1/22', hours: 2.8, value: 35 },
+    { date: '1/23', hours: 4.5, value: 60 },
+    { date: '1/24', hours: 3.8, value: 50 },
+    { date: '1/25', hours: 4.2, value: 55 },
+    { date: '1/26', hours: 3.5, value: 45 }
+  ])
+  
+  // 学习情况分布
+  const learningDistribution = ref([
+    {
+      level: '优秀',
+      icon: '🏆',
+      count: 345,
+      percentage: '28.0%'
+    },
+    {
+      level: '良好',
+      icon: '📈',
+      count: 456,
+      percentage: '37.0%'
+    },
+    {
+      level: '一般',
+      icon: '📊',
+      count: 321,
+      percentage: '26.0%'
+    },
+    {
+      level: '待提高',
+      icon: '⚠️',
+      count: 112,
+      percentage: '9.0%'
+    }
+  ])
+  
+  // 学员列表
+  const studentList = ref([
+    {
+      id: 1,
+      name: '张**',
+      class: '一班',
+      isMember: true,
+      correctRate: '92.5%',
+      examScore: '95'
+    },
+    {
+      id: 2,
+      name: '李**',
+      class: '二班',
+      isMember: true,
+      correctRate: '88.2%',
+      examScore: '90'
+    },
+    {
+      id: 3,
+      name: '王**',
+      class: '一班',
+      isMember: false,
+      correctRate: '76.8%',
+      examScore: '82'
+    },
+    {
+      id: 4,
+      name: '刘**',
+      class: '三班',
+      isMember: true,
+      correctRate: '94.3%',
+      examScore: '97'
+    },
+    {
+      id: 5,
+      name: '陈**',
+      class: '二班',
+      isMember: false,
+      correctRate: '72.1%',
+      examScore: '78'
+    }
+  ])
+  
+  // 返回上一页
+  function goBack() {
+    uni.navigateBack({ delta: 1 })
+  }
+  
+  // 导出数据
+  function exportData() {
+    uni.showModal({
+      title: '导出数据',
+      content: '是否导出当前统计数据？',
+      success: function(res) {
+        if (res.confirm) {
+          uni.showLoading({ title: '导出中...' })
+          
+          setTimeout(() => {
+            uni.hideLoading()
+            uni.showToast({ title: '导出成功', icon: 'success' })
+          }, 1500)
+        }
+      }
+    })
+  }
+  
+  // 日期变化
+  function onDateChange(e) {
+    const value = e.detail.value
+    dateIndex.value = value
+    // 实际项目中应根据选择的日期重新获取数据
+    refreshData()
+  }
+  
+  // 班级变化
+  function onClassChange(e) {
+    const value = e.detail.value
+    classIndex.value = value
+    // 实际项目中应根据选择的班级重新获取数据
+    refreshData()
+  }
+  
+  // 刷新数据
+  function refreshData() {
+    uni.showLoading({ title: '加载中...' })
+    
+    setTimeout(() => {
+      uni.hideLoading()
+      // 实际项目中应从接口获取数据
+    }, 1000)
+  }
+  
+  // 查看学员详情
+  function viewStudentDetail(studentId) {
+    uni.navigateTo({
+      url: `/pages/student/detail?id=${studentId}`
+    })
+  }
+  
+  // 加载更多学员
+  function loadMoreStudents() {
+    uni.showLoading({ title: '加载中...' })
+    
+    setTimeout(() => {
+      uni.hideLoading()
+      // 实际项目中应从接口获取更多学员数据
+      uni.showToast({ title: '已加载全部数据', icon: 'none' })
+    }, 1000)
+  }
+  
+  onMounted(() => {
+    // 实际项目中应从接口获取数据
+    // loadStatsData()
+  })
+</script>
+
+<style lang="scss" scoped>
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: #f5f7fa;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+  /* #endif */
+
+  .student-stats-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* 页面头部 */
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 120rpx;
+    background-color: #fff;
+    padding: 0 32rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .header-left {
+    width: 60rpx;
+  }
+  
+  .back-icon {
+    font-size: 40rpx;
+    color: #303133;
+    cursor: pointer;
+  }
+  
+  .header-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .header-right {
+    width: 60rpx;
+    text-align: right;
+  }
+  
+  .export-btn {
+    font-size: 28rpx;
+    color: #409eff;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  /* 筛选条件 */
+  .filter-section {
+    padding: 24rpx 32rpx;
+    background-color: #fff;
+    margin: 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .filter-row {
+    display: flex;
+    justify-content: space-between;
+    gap: 16rpx;
+  }
+  
+  .filter-item {
+    flex: 1;
+  }
+  
+  .filter-label {
+    font-size: 24rpx;
+    color: #606266;
+    margin-bottom: 8rpx;
+  }
+  
+  .filter-control {
+    background-color: #f9f9f9;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+  }
+  
+  .picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .picker-text {
+    font-size: 24rpx;
+    color: #303133;
+  }
+  
+  /* 核心指标 */
+  .metrics-section {
+    padding: 32rpx;
+    background-color: #fff;
+    margin: 0 16rpx 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .metrics-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16rpx;
+  }
+  
+  .metric-card {
+    display: flex;
+    align-items: center;
+    padding: 24rpx;
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+  }
+  
+  .metric-icon {
+    font-size: 48rpx;
+    margin-right: 24rpx;
+  }
+  
+  .metric-content {
+    flex: 1;
+  }
+  
+  .metric-value {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 8rpx;
+  }
+  
+  .metric-label {
+    font-size: 24rpx;
+    color: #606266;
+  }
+  
+  /* 图表区域 */
+  .chart-section {
+    padding: 32rpx;
+    background-color: #fff;
+    margin: 0 16rpx 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 24rpx;
+    padding-left: 12rpx;
+    border-left: 8rpx solid #409eff;
+    line-height: 1.2;
+  }
+  
+  .chart-container {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .mock-chart {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .chart-header {
+    margin-bottom: 24rpx;
+  }
+  
+  .chart-title {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #303133;
+    text-align: center;
+  }
+  
+  .chart-bars {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    height: 300rpx;
+    gap: 16rpx;
+  }
+  
+  .chart-bar {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .bar-container {
+    flex: 1;
+    width: 100%;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    margin-bottom: 12rpx;
+  }
+  
+  .bar {
+    width: 40rpx;
+    background-color: #409eff;
+    border-radius: 4rpx 4rpx 0 0;
+    transition: height 0.5s ease;
+  }
+  
+  .bar-label {
+    font-size: 20rpx;
+    color: #606266;
+    margin-bottom: 8rpx;
+  }
+  
+  .bar-value {
+    font-size: 20rpx;
+    font-weight: 600;
+    color: #303133;
+  }
+  
+  /* 学习情况分布 */
+  .distribution-section {
+    padding: 32rpx;
+    background-color: #fff;
+    margin: 0 16rpx 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .distribution-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 16rpx;
+  }
+  
+  .distribution-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 24rpx;
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+  }
+  
+  .distribution-icon {
+    font-size: 48rpx;
+    margin-bottom: 16rpx;
+  }
+  
+  .distribution-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .distribution-title {
+    font-size: 24rpx;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 16rpx;
+  }
+  
+  .distribution-stats {
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+    align-items: center;
+  }
+  
+  .stat-item {
+    display: flex;
+    align-items: center;
+  }
+  
+  .stat-label {
+    font-size: 20rpx;
+    color: #606266;
+    margin-right: 8rpx;
+  }
+  
+  .stat-value {
+    font-size: 20rpx;
+    font-weight: 600;
+    color: #303133;
+  }
+  
+  /* 学员列表 */
+  .student-section {
+    padding: 32rpx;
+    background-color: #fff;
+    margin: 0 16rpx 32rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .student-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+    margin-bottom: 24rpx;
+  }
+  
+  .student-item {
+    display: flex;
+    align-items: center;
+    padding: 24rpx;
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    transition: all 0.3s ease;
+  }
+  
+  .student-item:active {
+    transform: translateY(2rpx);
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .student-info {
+    flex: 1;
+    margin-right: 24rpx;
+  }
+  
+  .student-name {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 8rpx;
+  }
+  
+  .student-meta {
+    display: flex;
+    gap: 32rpx;
+  }
+  
+  .meta-item {
+    display: flex;
+    align-items: center;
+  }
+  
+  .meta-label {
+    font-size: 20rpx;
+    color: #606266;
+    margin-right: 8rpx;
+  }
+  
+  .meta-value {
+    font-size: 20rpx;
+    color: #303133;
+  }
+  
+  .meta-value.member {
+    color: #67c23a;
+    font-weight: 600;
+  }
+  
+  .student-stats {
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+    margin-right: 24rpx;
+  }
+  
+  .student-arrow {
+    font-size: 32rpx;
+    color: #909399;
+  }
+  
+  .load-more {
+    text-align: center;
+    padding: 24rpx;
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    font-size: 24rpx;
+    color: #409eff;
+    cursor: pointer;
+  }
+  
+  /* 响应式设计 */
+  @media screen and (min-width: 500px) {
+    .student-stats-container {
+      max-width: 900px;
+      margin: 0 auto;
+    }
+    
+    .metrics-grid {
+      grid-template-columns: repeat(4, 1fr);
+    }
+    
+    .chart-bars {
+      height: 400rpx;
+    }
+    
+    .bar {
+      width: 60rpx;
+    }
+    
+    .student-item {
+      padding: 32rpx;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/student/analysis.vue b/src/pages/student/analysis.vue
new file mode 100644
index 0000000..3390c46
--- /dev/null
+++ b/src/pages/student/analysis.vue
@@ -0,0 +1,475 @@
+<template>
+  <view class="learning-analysis-container">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <view class="header-left" @click="goBack">
+        <view class="back-icon">←</view>
+      </view>
+      <view class="header-title">学情统计分析</view>
+      <view class="header-right" @click="exportAnalysis">
+        <view class="export-btn">导出</view>
+      </view>
+    </view>
+    
+    <!-- 筛选条件 -->
+    <view class="filter-section">
+      <view class="filter-row">
+        <view class="filter-item">
+          <view class="filter-label">时间范围</view>
+          <view class="filter-control">
+            <picker 
+              :range="timeRangeOptions" 
+              :value="timeRangeIndex"
+              @change="onTimeRangeChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ timeRangeOptions[timeRangeIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="filter-item">
+          <view class="filter-label">学员类型</view>
+          <view class="filter-control">
+            <picker 
+              :range="studentTypeOptions" 
+              :value="studentTypeIndex"
+              @change="onStudentTypeChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ studentTypeOptions[studentTypeIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 核心数据 -->
+    <view class="core-data-section">
+      <view class="section-title">核心数据</view>
+      <view class="data-card">
+        <view class="data-row">
+          <view class="data-item">
+            <view class="data-value">{{ totalStudents }}</view>
+            <view class="data-label">总学员数</view>
+          </view>
+          <view class="data-item">
+            <view class="data-value">{{ activeStudents }}</view>
+            <view class="data-label">活跃学员</view>
+          </view>
+          <view class="data-item">
+            <view class="data-value">{{ memberStudents }}</view>
+            <view class="data-label">会员学员</view>
+          </view>
+          <view class="data-item">
+            <view class="data-value">{{ avgStudyTime }}</view>
+            <view class="data-label">平均学习时长</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 学习趋势 -->
+    <view class="trend-section">
+      <view class="section-title">学习趋势</view>
+      <view class="trend-card">
+        <view class="chart-placeholder">
+          <view class="chart-rect"></view>
+          <view class="chart-text">学习时长趋势图</view>
+        </view>
+        <view class="trend-hint">
+          近7天学员学习时长变化趋势
+        </view>
+      </view>
+    </view>
+    
+    <!-- 学习分布 -->
+    <view class="distribution-section">
+      <view class="section-title">学习分布</view>
+      <view class="distribution-card">
+        <view class="chart-placeholder">
+          <view class="chart-rect"></view>
+          <view class="chart-text">学习分布饼图</view>
+        </view>
+        <view class="distribution-hint">
+          学员学习科目分布
+        </view>
+      </view>
+    </view>
+    
+    <!-- 学习排行 -->
+    <view class="ranking-section">
+      <view class="section-title">学习排行</view>
+      <view class="ranking-card">
+        <view class="ranking-header">
+          <view class="header-item">排名</view>
+          <view class="header-item">学员姓名</view>
+          <view class="header-item">学习时长</view>
+          <view class="header-item">完成题目</view>
+        </view>
+        <view class="ranking-list">
+          <view 
+            v-for="(item, index) in rankingList" 
+            :key="index"
+            class="ranking-item"
+          >
+            <view class="ranking-cell rank">{{ index + 1 }}</view>
+            <view class="ranking-cell name">{{ item.name }}</view>
+            <view class="ranking-cell time">{{ item.studyTime }}</view>
+            <view class="ranking-cell count">{{ item.completedCount }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { ref, onMounted } from "vue"
+
+  // 筛选条件
+  const timeRangeOptions = ['最近7天', '最近30天', '最近90天', '本学期', '自定义']
+  const timeRangeIndex = ref(0)
+  
+  const studentTypeOptions = ['全部学员', '普通学员', '会员学员', '分销员学员']
+  const studentTypeIndex = ref(0)
+  
+  // 核心数据
+  const totalStudents = ref(1200)
+  const activeStudents = ref(850)
+  const memberStudents = ref(450)
+  const avgStudyTime = ref('2.5小时')
+  
+  // 学习排行
+  const rankingList = ref([
+    {
+      name: '张三',
+      studyTime: '15.5小时',
+      completedCount: 120
+    },
+    {
+      name: '李四',
+      studyTime: '12.3小时',
+      completedCount: 98
+    },
+    {
+      name: '王五',
+      studyTime: '10.8小时',
+      completedCount: 85
+    },
+    {
+      name: '赵六',
+      studyTime: '9.2小时',
+      completedCount: 75
+    },
+    {
+      name: '钱七',
+      studyTime: '8.5小时',
+      completedCount: 68
+    }
+  ])
+  
+  onMounted(() => {
+    // 实际项目中应从接口获取学情数据
+    // loadLearningData()
+  })
+  
+  // 返回上一页
+  function goBack() {
+    uni.navigateBack({ delta: 1 })
+  }
+  
+  // 导出分析
+  function exportAnalysis() {
+    uni.showModal({
+      title: '导出分析报告',
+      content: '确定要导出当前分析报告吗？',
+      success: function(res) {
+        if (res.confirm) {
+          uni.showLoading({ title: '导出中...' })
+          
+          setTimeout(() => {
+            uni.hideLoading()
+            uni.showToast({ 
+              title: '导出成功', 
+              icon: 'success' 
+            })
+            // 实际项目中应调用接口导出分析报告
+            // exportAnalysisReport()
+          }, 1500)
+        }
+      }
+    })
+  }
+  
+  // 时间范围变更
+  function onTimeRangeChange(e) {
+    const value = e.detail.value
+    timeRangeIndex.value = value
+    // 实际项目中应根据时间范围筛选数据
+    // filterLearningData()
+  }
+  
+  // 学员类型变更
+  function onStudentTypeChange(e) {
+    const value = e.detail.value
+    studentTypeIndex.value = value
+    // 实际项目中应根据学员类型筛选数据
+    // filterLearningData()
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: #f5f7fa;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+  /* #endif */
+
+  .learning-analysis-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* 页面头部 */
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 120rpx;
+    background-color: #fff;
+    padding: 0 32rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .header-left {
+    width: 60rpx;
+  }
+  
+  .back-icon {
+    font-size: 40rpx;
+    color: #303133;
+    cursor: pointer;
+  }
+  
+  .header-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .header-right {
+    width: 60rpx;
+    text-align: right;
+  }
+  
+  .export-btn {
+    font-size: 24rpx;
+    color: #409eff;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  /* 通用部分样式 */
+  .filter-section,
+  .core-data-section,
+  .trend-section,
+  .distribution-section,
+  .ranking-section {
+    padding: 32rpx;
+    background-color: #fff;
+    margin: 0 16rpx 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 24rpx;
+    padding-left: 12rpx;
+    border-left: 8rpx solid #409eff;
+    line-height: 1.2;
+  }
+  
+  /* 筛选条件 */
+  .filter-row {
+    display: flex;
+    gap: 16rpx;
+  }
+  
+  .filter-item {
+    flex: 1;
+  }
+  
+  .filter-label {
+    font-size: 24rpx;
+    color: #606266;
+    margin-bottom: 8rpx;
+  }
+  
+  .filter-control {
+    background-color: #f9f9f9;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+  }
+  
+  .picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .picker-text {
+    font-size: 24rpx;
+    color: #303133;
+  }
+  
+  /* 核心数据 */
+  .data-card {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .data-row {
+    display: flex;
+    justify-content: space-between;
+  }
+  
+  .data-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8rpx;
+  }
+  
+  .data-value {
+    font-size: 28rpx;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .data-label {
+    font-size: 18rpx;
+    color: #606266;
+  }
+  
+  /* 学习趋势 */
+  .trend-card {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+  }
+  
+  .chart-placeholder {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 48rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16rpx;
+  }
+  
+  .chart-rect {
+    width: 100%;
+    height: 300rpx;
+    background-color: #e0e0e0;
+    border-radius: 8rpx;
+  }
+  
+  .chart-text {
+    font-size: 24rpx;
+    color: #909399;
+  }
+  
+  .trend-hint {
+    font-size: 20rpx;
+    color: #606266;
+    text-align: center;
+  }
+  
+  /* 学习分布 */
+  .distribution-card {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+  }
+  
+  .distribution-hint {
+    font-size: 20rpx;
+    color: #606266;
+    text-align: center;
+  }
+  
+  /* 学习排行 */
+  .ranking-card {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .ranking-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 16rpx;
+    padding-bottom: 16rpx;
+    border-bottom: 1rpx solid #e0e0e0;
+  }
+  
+  .header-item {
+    flex: 1;
+    font-size: 20rpx;
+    font-weight: bold;
+    color: #606266;
+    text-align: center;
+  }
+  
+  .ranking-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+  }
+  
+  .ranking-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16rpx;
+    background-color: #fff;
+    border-radius: 8rpx;
+  }
+  
+  .ranking-cell {
+    flex: 1;
+    font-size: 20rpx;
+    color: #303133;
+    text-align: center;
+  }
+  
+  .ranking-cell.rank {
+    font-weight: bold;
+  }
+  
+  .ranking-cell.time {
+    color: #409eff;
+  }
+  
+  .ranking-cell.count {
+    color: #67c23a;
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/student/detail.vue b/src/pages/student/detail.vue
new file mode 100644
index 0000000..0ad2d3d
--- /dev/null
+++ b/src/pages/student/detail.vue
@@ -0,0 +1,642 @@
+<template>
+  <view class="student-detail-container">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <view class="header-left" @click="goBack">
+        <view class="back-icon">←</view>
+      </view>
+      <view class="header-title">学员详情</view>
+      <view class="header-right">
+        <view class="action-btn" @click="editStudent">编辑</view>
+      </view>
+    </view>
+    
+    <!-- 学员基本信息 -->
+    <view class="info-section">
+      <view class="section-title">基本信息</view>
+      <view class="info-card">
+        <view class="info-row">
+          <view class="info-item">
+            <view class="info-label">学员姓名</view>
+            <view class="info-value">{{ studentInfo.name }}</view>
+          </view>
+          <view class="info-item">
+            <view class="info-label">性别</view>
+            <view class="info-value">{{ studentInfo.gender }}</view>
+          </view>
+        </view>
+        <view class="info-row">
+          <view class="info-item">
+            <view class="info-label">手机号码</view>
+            <view class="info-value">{{ studentInfo.phone }}</view>
+          </view>
+          <view class="info-item">
+            <view class="info-label">年龄</view>
+            <view class="info-value">{{ studentInfo.age }}岁</view>
+          </view>
+        </view>
+        <view class="info-row">
+          <view class="info-item">
+            <view class="info-label">所在班级</view>
+            <view class="info-value">{{ studentInfo.class }}</view>
+          </view>
+          <view class="info-item">
+            <view class="info-label">会员状态</view>
+            <view class="info-value" :class="{ 'member': studentInfo.isMember }">{{ studentInfo.isMember ? '会员' : '非会员' }}</view>
+          </view>
+        </view>
+        <view class="info-row">
+          <view class="info-item full-width">
+            <view class="info-label">注册时间</view>
+            <view class="info-value">{{ studentInfo.registerTime }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 学习情况 -->
+    <view class="learning-section">
+      <view class="section-title">学习情况</view>
+      <view class="learning-card">
+        <view class="learning-metrics">
+          <view class="metric-item">
+            <view class="metric-icon">📚</view>
+            <view class="metric-content">
+              <view class="metric-value">{{ learningStats.totalQuestions }}</view>
+              <view class="metric-label">总练习题数</view>
+            </view>
+          </view>
+          <view class="metric-item">
+            <view class="metric-icon">🎯</view>
+            <view class="metric-content">
+              <view class="metric-value">{{ learningStats.correctRate }}</view>
+              <view class="metric-label">正确率</view>
+            </view>
+          </view>
+          <view class="metric-item">
+            <view class="metric-icon">✏️</view>
+            <view class="metric-content">
+              <view class="metric-value">{{ learningStats.totalExams }}</view>
+              <view class="metric-label">总模考次数</view>
+            </view>
+          </view>
+          <view class="metric-item">
+            <view class="metric-icon">🏆</view>
+            <view class="metric-content">
+              <view class="metric-value">{{ learningStats.avgScore }}</view>
+              <view class="metric-label">平均模考分</view>
+            </view>
+          </view>
+        </view>
+        
+        <!-- 学习进度 -->
+        <view class="progress-section">
+          <view class="progress-title">学习进度</view>
+          <view class="progress-items">
+            <view 
+              v-for="(progress, index) in learningProgress" 
+              :key="index"
+              class="progress-item"
+            >
+              <view class="progress-header">
+                <view class="progress-subject">{{ progress.subject }}</view>
+                <view class="progress-percentage">{{ progress.percentage }}</view>
+              </view>
+              <view class="progress-bar">
+                <view 
+                  class="progress-fill" 
+                  :style="{ width: progress.percentage }"
+                ></view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 最近学习记录 -->
+    <view class="record-section">
+      <view class="section-title">最近学习记录</view>
+      <view class="record-list">
+        <view 
+          v-for="(record, index) in recentRecords" 
+          :key="index"
+          class="record-item"
+        >
+          <view class="record-time">{{ record.time }}</view>
+          <view class="record-content">
+            <view class="record-type">{{ record.type }}</view>
+            <view class="record-detail">{{ record.detail }}</view>
+          </view>
+          <view class="record-status" :class="record.statusClass">{{ record.status }}</view>
+        </view>
+      </view>
+      <view class="view-all-btn" @click="viewAllRecords">
+        查看全部记录
+      </view>
+    </view>
+    
+    <!-- 操作按钮 -->
+    <view class="action-section">
+      <view class="action-grid">
+        <view class="action-item" @click="sendMessage">
+          <view class="action-icon">💬</view>
+          <view class="action-label">发送消息</view>
+        </view>
+        <view class="action-item" @click="callStudent">
+          <view class="action-icon">📞</view>
+          <view class="action-label">拨打电话</view>
+        </view>
+        <view class="action-item" @click="viewExamRecords">
+          <view class="action-icon">📝</view>
+          <view class="action-label">模考记录</view>
+        </view>
+        <view class="action-item" @click="viewErrorSets">
+          <view class="action-icon">❌</view>
+          <view class="action-label">错题本</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { ref, onMounted } from "vue"
+
+  // 学员基本信息
+  const studentInfo = ref({
+    name: '张**',
+    gender: '男',
+    phone: '138****1234',
+    age: 25,
+    class: '一班',
+    isMember: true,
+    registerTime: '2023-10-01 10:00:00'
+  })
+  
+  // 学习统计
+  const learningStats = ref({
+    totalQuestions: 1256,
+    correctRate: '88.5%',
+    totalExams: 24,
+    avgScore: '92.3'
+  })
+  
+  // 学习进度
+  const learningProgress = ref([
+    {
+      subject: '科目一',
+      percentage: '95%'
+    },
+    {
+      subject: '科目二',
+      percentage: '80%'
+    },
+    {
+      subject: '科目三',
+      percentage: '65%'
+    },
+    {
+      subject: '科目四',
+      percentage: '75%'
+    }
+  ])
+  
+  // 最近学习记录
+  const recentRecords = ref([
+    {
+      time: '2024-01-26 14:30:00',
+      type: '模考',
+      detail: '科目一模拟考试',
+      status: '通过',
+      statusClass: 'status-pass'
+    },
+    {
+      time: '2024-01-26 10:15:00',
+      type: '练习',
+      detail: '科目一专项练习-交通标志',
+      status: '完成',
+      statusClass: 'status-complete'
+    },
+    {
+      time: '2024-01-25 16:45:00',
+      type: '模考',
+      detail: '科目一模拟考试',
+      status: '通过',
+      statusClass: 'status-pass'
+    },
+    {
+      time: '2024-01-25 09:30:00',
+      type: '练习',
+      detail: '科目一专项练习-安全驾驶',
+      status: '完成',
+      statusClass: 'status-complete'
+    }
+  ])
+  
+  // 返回上一页
+  function goBack() {
+    uni.navigateBack({ delta: 1 })
+  }
+  
+  // 编辑学员信息
+  function editStudent() {
+    uni.showToast({ 
+      title: '编辑功能开发中', 
+      icon: 'none' 
+    })
+  }
+  
+  // 发送消息
+  function sendMessage() {
+    uni.showModal({
+      title: '发送消息',
+      content: '确认发送消息给学员？',
+      success: function(res) {
+        if (res.confirm) {
+          uni.showToast({ 
+            title: '消息发送成功', 
+            icon: 'success' 
+          })
+        }
+      }
+    })
+  }
+  
+  // 拨打电话
+  function callStudent() {
+    uni.makePhoneCall({
+      phoneNumber: '13800138000', // 实际项目中应使用真实手机号
+      success: function() {
+        console.log('拨打电话成功')
+      },
+      fail: function() {
+        console.log('拨打电话失败')
+      }
+    })
+  }
+  
+  // 查看模考记录
+  function viewExamRecords() {
+    uni.navigateTo({
+      url: `/pages/student/exam-records?id=${1}` // 实际项目中应传入学员ID
+    })
+  }
+  
+  // 查看错题本
+  function viewErrorSets() {
+    uni.navigateTo({
+      url: `/pages/student/error-sets?id=${1}` // 实际项目中应传入学员ID
+    })
+  }
+  
+  // 查看全部记录
+  function viewAllRecords() {
+    uni.navigateTo({
+      url: `/pages/student/all-records?id=${1}` // 实际项目中应传入学员ID
+    })
+  }
+  
+  onMounted(() => {
+    // 实际项目中应从接口获取学员详情数据
+    // const studentId = getCurrentPages().pop().options.id
+    // loadStudentDetail(studentId)
+  })
+</script>
+
+<style lang="scss" scoped>
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: #f5f7fa;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+  /* #endif */
+
+  .student-detail-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* 页面头部 */
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 120rpx;
+    background-color: #fff;
+    padding: 0 32rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .header-left {
+    width: 60rpx;
+  }
+  
+  .back-icon {
+    font-size: 40rpx;
+    color: #303133;
+    cursor: pointer;
+  }
+  
+  .header-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .header-right {
+    width: 60rpx;
+    text-align: right;
+  }
+  
+  .action-btn {
+    font-size: 28rpx;
+    color: #409eff;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  /* 通用部分样式 */
+  .info-section,
+  .learning-section,
+  .record-section {
+    padding: 32rpx;
+    background-color: #fff;
+    margin: 0 16rpx 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 24rpx;
+    padding-left: 12rpx;
+    border-left: 8rpx solid #409eff;
+    line-height: 1.2;
+  }
+  
+  /* 学员基本信息 */
+  .info-card {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+  }
+  
+  .info-row {
+    display: flex;
+    gap: 32rpx;
+  }
+  
+  .info-item {
+    flex: 1;
+  }
+  
+  .info-label {
+    font-size: 24rpx;
+    color: #606266;
+    margin-bottom: 8rpx;
+  }
+  
+  .info-value {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #303133;
+  }
+  
+  .info-item.full-width {
+    flex: 2;
+  }
+  
+  /* 学习情况 */
+  .learning-card {
+    display: flex;
+    flex-direction: column;
+    gap: 24rpx;
+  }
+  
+  .learning-metrics {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16rpx;
+  }
+  
+  .metric-item {
+    display: flex;
+    align-items: center;
+    padding: 24rpx;
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+  }
+  
+  .metric-icon {
+    font-size: 48rpx;
+    margin-right: 24rpx;
+  }
+  
+  .metric-content {
+    flex: 1;
+  }
+  
+  .metric-value {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 8rpx;
+  }
+  
+  .metric-label {
+    font-size: 24rpx;
+    color: #606266;
+  }
+  
+  /* 学习进度 */
+  .progress-section {
+    margin-top: 16rpx;
+  }
+  
+  .progress-title {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 16rpx;
+  }
+  
+  .progress-items {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+  }
+  
+  .progress-item {
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+  }
+  
+  .progress-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .progress-subject {
+    font-size: 24rpx;
+    color: #303133;
+  }
+  
+  .progress-percentage {
+    font-size: 24rpx;
+    font-weight: 600;
+    color: #409eff;
+  }
+  
+  .progress-bar {
+    height: 12rpx;
+    background-color: #f0f0f0;
+    border-radius: 6rpx;
+    overflow: hidden;
+  }
+  
+  .progress-fill {
+    height: 100%;
+    background-color: #409eff;
+    border-radius: 6rpx;
+    transition: width 0.5s ease;
+  }
+  
+  /* 最近学习记录 */
+  .record-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+    margin-bottom: 24rpx;
+  }
+  
+  .record-item {
+    display: flex;
+    align-items: center;
+    padding: 24rpx;
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+  }
+  
+  .record-time {
+    font-size: 20rpx;
+    color: #606266;
+    margin-right: 24rpx;
+    width: 160rpx;
+  }
+  
+  .record-content {
+    flex: 1;
+    margin-right: 24rpx;
+  }
+  
+  .record-type {
+    font-size: 24rpx;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 4rpx;
+  }
+  
+  .record-detail {
+    font-size: 20rpx;
+    color: #606266;
+  }
+  
+  .record-status {
+    font-size: 20rpx;
+    font-weight: 600;
+    padding: 4rpx 12rpx;
+    border-radius: 12rpx;
+  }
+  
+  .status-pass {
+    color: #67c23a;
+    background-color: rgba(103, 194, 58, 0.1);
+  }
+  
+  .status-complete {
+    color: #409eff;
+    background-color: rgba(64, 158, 255, 0.1);
+  }
+  
+  .view-all-btn {
+    text-align: center;
+    padding: 16rpx;
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    font-size: 24rpx;
+    color: #409eff;
+    cursor: pointer;
+  }
+  
+  /* 操作按钮 */
+  .action-section {
+    padding: 32rpx;
+    background-color: #fff;
+    margin: 0 16rpx 32rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .action-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 16rpx;
+  }
+  
+  .action-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 32rpx 16rpx;
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    transition: all 0.3s ease;
+  }
+  
+  .action-item:active {
+    transform: translateY(2rpx);
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .action-icon {
+    font-size: 48rpx;
+    margin-bottom: 16rpx;
+  }
+  
+  .action-label {
+    font-size: 20rpx;
+    color: #303133;
+    text-align: center;
+  }
+  
+  /* 响应式设计 */
+  @media screen and (min-width: 500px) {
+    .student-detail-container {
+      max-width: 900px;
+      margin: 0 auto;
+    }
+    
+    .learning-metrics {
+      grid-template-columns: repeat(4, 1fr);
+    }
+    
+    .info-row {
+      gap: 48rpx;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/student/list.vue b/src/pages/student/list.vue
new file mode 100644
index 0000000..6282c0e
--- /dev/null
+++ b/src/pages/student/list.vue
@@ -0,0 +1,511 @@
+<template>
+  <view class="student-list-container">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <view class="header-left" @click="goBack">
+        <view class="back-icon">←</view>
+      </view>
+      <view class="header-title">学员列表管理</view>
+      <view class="header-right" @click="addStudent">
+        <view class="add-btn">添加</view>
+      </view>
+    </view>
+    
+    <!-- 筛选条件 -->
+    <view class="filter-section">
+      <view class="filter-row">
+        <view class="filter-item">
+          <view class="filter-label">状态</view>
+          <view class="filter-control">
+            <picker 
+              :range="statusOptions" 
+              :value="statusIndex"
+              @change="onStatusChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ statusOptions[statusIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="filter-item">
+          <view class="filter-label">搜索</view>
+          <view class="filter-control">
+            <input 
+              v-model="searchKeyword" 
+              class="search-input"
+              placeholder="请输入姓名或手机号"
+              @input="onSearch"
+            />
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 学员列表 -->
+    <view class="student-list-section">
+      <view class="section-title">学员列表</view>
+      <view class="student-list">
+        <view 
+          v-for="(student, index) in studentList" 
+          :key="index"
+          class="student-item"
+          @click="goToStudentDetail(student.id)"
+        >
+          <view class="student-avatar">
+            <view class="avatar-placeholder">{{ getInitials(student.name) }}</view>
+          </view>
+          <view class="student-info">
+            <view class="student-name">{{ student.name }}</view>
+            <view class="student-meta">
+              <view class="meta-item">{{ student.phone }}</view>
+              <view class="meta-item">{{ student.school }}</view>
+              <view class="meta-item status-{{ student.statusClass }}">{{ student.status }}</view>
+            </view>
+          </view>
+          <view class="student-actions">
+            <view class="action-btn edit-btn" @click.stop="editStudent(student.id)">
+              编辑
+            </view>
+            <view class="action-btn delete-btn" @click.stop="deleteStudent(student.id)">
+              删除
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 空状态 -->
+    <view v-if="studentList.length === 0" class="empty-state">
+      <view class="empty-icon">🎓</view>
+      <view class="empty-text">暂无学员数据</view>
+    </view>
+    
+    <!-- 分页 -->
+    <view v-if="studentList.length > 0" class="pagination">
+      <view class="page-info">
+        共 {{ totalStudents }} 条，当前第 {{ currentPage }} 页
+      </view>
+      <view class="page-controls">
+        <view 
+          class="page-btn" 
+          :class="{ disabled: currentPage === 1 }"
+          @click="goToPage(currentPage - 1)"
+        >
+          上一页
+        </view>
+        <view 
+          class="page-btn" 
+          :class="{ disabled: currentPage === totalPages }"
+          @click="goToPage(currentPage + 1)"
+        >
+          下一页
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { ref, computed, onMounted } from "vue"
+
+  // 筛选条件
+  const statusOptions = ['全部状态', '正常', '禁用']
+  const statusIndex = ref(0)
+  const searchKeyword = ref('')
+  
+  // 学员列表数据
+  const studentList = ref([
+    {
+      id: 1,
+      name: '张三',
+      phone: '13800138001',
+      school: '北京大学',
+      status: '正常',
+      statusClass: 'active'
+    },
+    {
+      id: 2,
+      name: '李四',
+      phone: '13800138002',
+      school: '清华大学',
+      status: '正常',
+      statusClass: 'active'
+    },
+    {
+      id: 3,
+      name: '王五',
+      phone: '13800138003',
+      school: '复旦大学',
+      status: '禁用',
+      statusClass: 'inactive'
+    },
+    {
+      id: 4,
+      name: '赵六',
+      phone: '13800138004',
+      school: '上海交通大学',
+      status: '正常',
+      statusClass: 'active'
+    }
+  ])
+  
+  // 分页信息
+  const currentPage = ref(1)
+  const totalStudents = ref(100)
+  const pageSize = ref(10)
+  
+  // 计算总页数
+  const totalPages = computed(() => {
+    return Math.ceil(totalStudents.value / pageSize.value)
+  })
+  
+  onMounted(() => {
+    // 实际项目中应从接口获取学员列表
+    // loadStudentList()
+  })
+  
+  // 返回上一页
+  function goBack() {
+    uni.navigateBack({ delta: 1 })
+  }
+  
+  // 添加学员
+  function addStudent() {
+    uni.showToast({ 
+      title: '添加学员功能开发中', 
+      icon: 'none' 
+    })
+  }
+  
+  // 跳转到学员详情
+  function goToStudentDetail(id) {
+    uni.navigateTo({
+      url: `/pages/student/detail?id=${id}`
+    })
+  }
+  
+  // 编辑学员
+  function editStudent(id) {
+    uni.showToast({ 
+      title: '编辑学员功能开发中', 
+      icon: 'none' 
+    })
+  }
+  
+  // 删除学员
+  function deleteStudent(id) {
+    uni.showModal({
+      title: '删除学员',
+      content: '确定要删除该学员吗？',
+      success: function(res) {
+        if (res.confirm) {
+          // 实际项目中应调用接口删除学员
+          const index = studentList.value.findIndex(item => item.id === id)
+          if (index !== -1) {
+            studentList.value.splice(index, 1)
+          }
+          uni.showToast({ 
+            title: '删除成功', 
+            icon: 'success' 
+          })
+        }
+      }
+    })
+  }
+  
+  // 状态变更
+  function onStatusChange(e) {
+    const value = e.detail.value
+    statusIndex.value = value
+    // 实际项目中应根据状态筛选学员
+    // filterStudentList()
+  }
+  
+  // 搜索
+  function onSearch() {
+    // 实际项目中应根据关键词搜索学员
+    // searchStudentList()
+  }
+  
+  // 跳转到指定页码
+  function goToPage(page) {
+    if (page < 1 || page > totalPages.value) {
+      return
+    }
+    currentPage.value = page
+    // 实际项目中应加载指定页码的学员
+    // loadStudentPage(page)
+  }
+  
+  // 获取姓名首字母
+  function getInitials(name) {
+    return name.charAt(0).toUpperCase()
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: #f5f7fa;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+  /* #endif */
+
+  .student-list-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* 页面头部 */
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 120rpx;
+    background-color: #fff;
+    padding: 0 32rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .header-left {
+    width: 60rpx;
+  }
+  
+  .back-icon {
+    font-size: 40rpx;
+    color: #303133;
+    cursor: pointer;
+  }
+  
+  .header-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .header-right {
+    width: 60rpx;
+    text-align: right;
+  }
+  
+  .add-btn {
+    font-size: 24rpx;
+    color: #409eff;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  /* 筛选条件 */
+  .filter-section {
+    padding: 24rpx 32rpx;
+    background-color: #fff;
+    margin: 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .filter-row {
+    display: flex;
+    gap: 16rpx;
+  }
+  
+  .filter-item {
+    flex: 1;
+  }
+  
+  .filter-label {
+    font-size: 24rpx;
+    color: #606266;
+    margin-bottom: 8rpx;
+  }
+  
+  .filter-control {
+    background-color: #f9f9f9;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+  }
+  
+  .picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .picker-text {
+    font-size: 24rpx;
+    color: #303133;
+  }
+  
+  .search-input {
+    font-size: 24rpx;
+    color: #303133;
+    width: 100%;
+  }
+  
+  /* 学员列表 */
+  .student-list-section {
+    flex: 1;
+    padding: 0 16rpx;
+  }
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 24rpx;
+    padding-left: 12rpx;
+    border-left: 8rpx solid #409eff;
+    line-height: 1.2;
+  }
+  
+  .student-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+  }
+  
+  .student-item {
+    display: flex;
+    align-items: center;
+    background-color: #fff;
+    border-radius: 16rpx;
+    padding: 24rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .student-avatar {
+    width: 80rpx;
+    height: 80rpx;
+    border-radius: 40rpx;
+    background-color: #409eff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 24rpx;
+  }
+  
+  .avatar-placeholder {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #fff;
+  }
+  
+  .student-info {
+    flex: 1;
+  }
+  
+  .student-name {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 8rpx;
+  }
+  
+  .student-meta {
+    display: flex;
+    gap: 16rpx;
+    flex-wrap: wrap;
+  }
+  
+  .meta-item {
+    font-size: 20rpx;
+    color: #606266;
+  }
+  
+  .meta-item.status-active {
+    color: #67c23a;
+  }
+  
+  .meta-item.status-inactive {
+    color: #909399;
+  }
+  
+  .student-actions {
+    display: flex;
+    gap: 16rpx;
+  }
+  
+  .action-btn {
+    padding: 8rpx 16rpx;
+    border-radius: 8rpx;
+    font-size: 16rpx;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  .edit-btn {
+    background-color: #ecf5ff;
+    color: #409eff;
+  }
+  
+  .delete-btn {
+    background-color: #fef0f0;
+    color: #f56c6c;
+  }
+  
+  /* 空状态 */
+  .empty-state {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 100rpx 0;
+  }
+  
+  .empty-icon {
+    font-size: 80rpx;
+    margin-bottom: 24rpx;
+  }
+  
+  .empty-text {
+    font-size: 24rpx;
+    color: #909399;
+  }
+  
+  /* 分页 */
+  .pagination {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24rpx;
+    background-color: #fff;
+    margin: 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .page-info {
+    font-size: 20rpx;
+    color: #606266;
+  }
+  
+  .page-controls {
+    display: flex;
+    gap: 16rpx;
+  }
+  
+  .page-btn {
+    padding: 8rpx 16rpx;
+    border-radius: 8rpx;
+    font-size: 20rpx;
+    color: #409eff;
+    cursor: pointer;
+  }
+  
+  .page-btn.disabled {
+    color: #909399;
+    cursor: not-allowed;
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/student/remind.vue b/src/pages/student/remind.vue
new file mode 100644
index 0000000..263ba16
--- /dev/null
+++ b/src/pages/student/remind.vue
@@ -0,0 +1,515 @@
+<template>
+  <view class="learning-remind-container">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <view class="header-left" @click="goBack">
+        <view class="back-icon">←</view>
+      </view>
+      <view class="header-title">学习提醒</view>
+      <view class="header-right" @click="sendBatchRemind">
+        <view class="batch-btn">批量发送</view>
+      </view>
+    </view>
+    
+    <!-- 提醒设置 -->
+    <view class="remind-setting-section">
+      <view class="section-title">提醒设置</view>
+      <view class="setting-card">
+        <view class="setting-row">
+          <view class="setting-label">提醒类型</view>
+          <view class="setting-control">
+            <picker 
+              :range="remindTypeOptions" 
+              :value="remindTypeIndex"
+              @change="onRemindTypeChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ remindTypeOptions[remindTypeIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="setting-row">
+          <view class="setting-label">提醒内容</view>
+          <view class="setting-control">
+            <textarea 
+              v-model="remindContent" 
+              class="content-textarea"
+              placeholder="请输入提醒内容"
+              maxlength="200"
+            ></textarea>
+            <view class="content-count">{{ remindContent.length }}/200</view>
+          </view>
+        </view>
+        <view class="setting-row">
+          <view class="setting-label">发送时间</view>
+          <view class="setting-control">
+            <input 
+              v-model="sendTime" 
+              class="time-input"
+              placeholder="请选择发送时间"
+              @click="showTimePicker"
+            />
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 学员选择 -->
+    <view class="student-select-section">
+      <view class="section-title">学员选择</view>
+      <view class="select-card">
+        <view class="select-row">
+          <view class="select-label">选择方式</view>
+          <view class="select-control">
+            <picker 
+              :range="selectTypeOptions" 
+              :value="selectTypeIndex"
+              @change="onSelectTypeChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ selectTypeOptions[selectTypeIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="select-row" v-if="selectTypeIndex === 1">
+          <view class="select-label">选择学员</view>
+          <view class="select-control">
+            <textarea 
+              v-model="selectedStudents" 
+              class="students-textarea"
+              placeholder="请输入学员ID，多个ID用逗号分隔"
+            ></textarea>
+          </view>
+        </view>
+        <view class="select-row" v-if="selectTypeIndex === 2">
+          <view class="select-label">上传文件</view>
+          <view class="select-control">
+            <view class="upload-btn" @click="uploadFile">
+              选择文件
+            </view>
+            <view class="file-name" v-if="uploadedFile">{{ uploadedFile }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 发送预览 -->
+    <view class="preview-section">
+      <view class="section-title">发送预览</view>
+      <view class="preview-card">
+        <view class="preview-header">
+          <view class="preview-title">提醒内容预览</view>
+        </view>
+        <view class="preview-content">
+          {{ remindContent || '请输入提醒内容' }}
+        </view>
+        <view class="preview-footer">
+          <view class="preview-info">
+            <view class="info-item">提醒类型：{{ remindTypeOptions[remindTypeIndex] }}</view>
+            <view class="info-item">发送时间：{{ sendTime || '立即发送' }}</view>
+            <view class="info-item">接收人数：{{ estimatedCount }}人</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 操作按钮 -->
+    <view class="action-section">
+      <view class="action-btn primary-btn" @click="sendRemind">
+        发送提醒
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { ref, onMounted } from "vue"
+
+  // 提醒类型选项
+  const remindTypeOptions = ['学习提醒', '作业提醒', '考试提醒', '活动提醒', '其他提醒']
+  const remindTypeIndex = ref(0)
+  
+  // 提醒内容
+  const remindContent = ref('')
+  
+  // 发送时间
+  const sendTime = ref('')
+  
+  // 选择方式选项
+  const selectTypeOptions = ['全部学员', '指定学员', '上传文件']
+  const selectTypeIndex = ref(0)
+  
+  // 选中的学员
+  const selectedStudents = ref('')
+  
+  // 上传的文件
+  const uploadedFile = ref('')
+  
+  // 估计接收人数
+  const estimatedCount = ref(100)
+  
+  onMounted(() => {
+    // 实际项目中应从接口获取默认设置
+    // loadDefaultSettings()
+  })
+  
+  // 返回上一页
+  function goBack() {
+    uni.navigateBack({ delta: 1 })
+  }
+  
+  // 批量发送
+  function sendBatchRemind() {
+    uni.showModal({
+      title: '批量发送提醒',
+      content: '确定要向所有学员批量发送提醒吗？',
+      success: function(res) {
+        if (res.confirm) {
+          uni.showLoading({ title: '发送中...' })
+          
+          setTimeout(() => {
+            uni.hideLoading()
+            uni.showToast({ 
+              title: '提醒发送成功', 
+              icon: 'success' 
+            })
+            // 实际项目中应调用接口批量发送提醒
+            // sendBatchRemindApi()
+          }, 1500)
+        }
+      }
+    })
+  }
+  
+  // 提醒类型变更
+  function onRemindTypeChange(e) {
+    const value = e.detail.value
+    remindTypeIndex.value = value
+  }
+  
+  // 选择方式变更
+  function onSelectTypeChange(e) {
+    const value = e.detail.value
+    selectTypeIndex.value = value
+    // 根据选择方式更新估计接收人数
+    if (value === 0) {
+      estimatedCount.value = 100
+    } else if (value === 1) {
+      estimatedCount.value = 10
+    } else {
+      estimatedCount.value = 50
+    }
+  }
+  
+  // 显示时间选择器
+  function showTimePicker() {
+    const now = new Date()
+    uni.showDateTimePicker({
+      year: now.getFullYear(),
+      month: now.getMonth(),
+      day: now.getDate(),
+      hour: now.getHours(),
+      minute: now.getMinutes(),
+      success: function(res) {
+        sendTime.value = `${res.year}-${res.month + 1}-${res.day} ${res.hour}:${res.minute}`
+      }
+    })
+  }
+  
+  // 上传文件
+  function uploadFile() {
+    uni.chooseFile({
+      count: 1,
+      extension: ['.txt', '.csv', '.xlsx'],
+      success: function(res) {
+        uploadedFile.value = res.tempFiles[0].name
+        uni.showToast({ 
+          title: '文件选择成功', 
+          icon: 'success' 
+        })
+      }
+    })
+  }
+  
+  // 发送提醒
+  function sendRemind() {
+    if (!remindContent.value) {
+      uni.showToast({ 
+        title: '请输入提醒内容', 
+        icon: 'none' 
+      })
+      return
+    }
+    
+    uni.showModal({
+      title: '发送提醒',
+      content: `确定要发送提醒给${estimatedCount.value}名学员吗？`,
+      success: function(res) {
+        if (res.confirm) {
+          uni.showLoading({ title: '发送中...' })
+          
+          setTimeout(() => {
+            uni.hideLoading()
+            uni.showToast({ 
+              title: '提醒发送成功', 
+              icon: 'success' 
+            })
+            // 实际项目中应调用接口发送提醒
+            // sendRemindApi()
+          }, 1500)
+        }
+      }
+    })
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: #f5f7fa;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+  /* #endif */
+
+  .learning-remind-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* 页面头部 */
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 120rpx;
+    background-color: #fff;
+    padding: 0 32rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .header-left {
+    width: 60rpx;
+  }
+  
+  .back-icon {
+    font-size: 40rpx;
+    color: #303133;
+    cursor: pointer;
+  }
+  
+  .header-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .header-right {
+    width: 100rpx;
+    text-align: right;
+  }
+  
+  .batch-btn {
+    font-size: 24rpx;
+    color: #409eff;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  /* 通用部分样式 */
+  .remind-setting-section,
+  .student-select-section,
+  .preview-section {
+    padding: 32rpx;
+    background-color: #fff;
+    margin: 0 16rpx 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 24rpx;
+    padding-left: 12rpx;
+    border-left: 8rpx solid #409eff;
+    line-height: 1.2;
+  }
+  
+  /* 提醒设置 */
+  .setting-card {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .setting-row {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 24rpx;
+  }
+  
+  .setting-row:last-child {
+    margin-bottom: 0;
+  }
+  
+  .setting-label {
+    font-size: 24rpx;
+    color: #606266;
+    margin-bottom: 8rpx;
+  }
+  
+  .setting-control {
+    position: relative;
+  }
+  
+  .picker {
+    background-color: #fff;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .picker-text {
+    font-size: 24rpx;
+    color: #303133;
+  }
+  
+  .content-textarea {
+    width: 100%;
+    height: 160rpx;
+    background-color: #fff;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+    font-size: 24rpx;
+    color: #303133;
+    resize: none;
+  }
+  
+  .content-count {
+    position: absolute;
+    bottom: 8rpx;
+    right: 16rpx;
+    font-size: 18rpx;
+    color: #909399;
+  }
+  
+  .time-input {
+    width: 100%;
+    background-color: #fff;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+    font-size: 24rpx;
+    color: #303133;
+  }
+  
+  .students-textarea {
+    width: 100%;
+    height: 120rpx;
+    background-color: #fff;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+    font-size: 24rpx;
+    color: #303133;
+    resize: none;
+  }
+  
+  .upload-btn {
+    background-color: #ecf5ff;
+    color: #409eff;
+    padding: 16rpx;
+    border-radius: 8rpx;
+    font-size: 24rpx;
+    font-weight: 600;
+    text-align: center;
+    cursor: pointer;
+  }
+  
+  .file-name {
+    margin-top: 8rpx;
+    font-size: 20rpx;
+    color: #606266;
+  }
+  
+  /* 发送预览 */
+  .preview-card {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .preview-header {
+    margin-bottom: 16rpx;
+  }
+  
+  .preview-title {
+    font-size: 24rpx;
+    font-weight: 600;
+    color: #303133;
+  }
+  
+  .preview-content {
+    background-color: #fff;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 24rpx;
+    font-size: 24rpx;
+    color: #303133;
+    min-height: 120rpx;
+    line-height: 1.4;
+    margin-bottom: 16rpx;
+  }
+  
+  .preview-footer {
+    border-top: 1rpx solid #e0e0e0;
+    padding-top: 16rpx;
+  }
+  
+  .preview-info {
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+  }
+  
+  .info-item {
+    font-size: 20rpx;
+    color: #606266;
+  }
+  
+  /* 操作按钮 */
+  .action-section {
+    padding: 32rpx;
+    margin: 0 16rpx 16rpx;
+  }
+  
+  .action-btn {
+    width: 100%;
+    padding: 24rpx;
+    border-radius: 12rpx;
+    font-size: 28rpx;
+    font-weight: bold;
+    text-align: center;
+    cursor: pointer;
+  }
+  
+  .primary-btn {
+    background-color: #409eff;
+    color: #fff;
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/work/index.vue b/src/pages/work/index.vue
index 3d56b73..db670c0 100644
--- a/src/pages/work/index.vue
+++ b/src/pages/work/index.vue
@@ -235,17 +235,6 @@
           </view>
         </view>
         
-        <view class="feature-card" @click="goToAiRechargeException">
-          <view class="feature-icon notice-icon">
-            <view class="icon-text">🤖</view>
-            <view v-if="exceptionCount.ai > 0" class="exception-badge">{{ exceptionCount.ai }}</view>
-          </view>
-          <view class="feature-info">
-            <view class="feature-title">AI充值订单异常</view>
-            <view class="feature-desc">处理AI充值订单失败等异常</view>
-          </view>
-        </view>
-        
         <view class="feature-card" @click="goToMemberOrderException">
           <view class="feature-icon notice-icon">
             <view class="icon-text">🛒</view>
@@ -268,7 +257,6 @@
   const userRole = ref('admin') // 模拟角色，实际应从登录状态获取
   const exceptionCount = ref({ // 模拟异常数量
     profit: 2, // 分润异常数量
-    ai: 1, // AI充值订单异常数量
     member: 3 // 会员订单异常数量
   })
 
@@ -457,12 +445,6 @@
     })
   }
 
-  function goToAiRechargeException() {
-    uni.navigateTo({
-      url: '/pages/exception/ai-recharge'
-    })
-  }
-
   function goToMemberOrderException() {
     uni.navigateTo({
       url: '/pages/exception/member-order'