分销员管理

src/pages.json

@@ -83,6 +83,30 @@
       "style": {
         "navigationBarTitleText": "浏览文本"
       }
+    },
+    {
+      "path": "pages/distributor/index",
+      "style": {
+        "navigationBarTitleText": "分销员管理"
+      }
+    },
+    {
+      "path": "pages/distributor/add",
+      "style": {
+        "navigationBarTitleText": "新增分销员"
+      }
+    },
+    {
+      "path": "pages/distributor/edit",
+      "style": {
+        "navigationBarTitleText": "修改分销员"
+      }
+    },
+    {
+      "path": "pages/distributor/rule",
+      "style": {
+        "navigationBarTitleText": "分润规则配置"
+      }
     }
   ],
   "tabBar": {

src/pages/distributor/add.vue

@@ -0,0 +1,224 @@
+<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>
+    
+    <!-- 表单容器 -->
+    <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>
+  </view>
+</template>
+
+<script setup>
+  import { ref } from "vue"
+
+  const formRef = ref(null)
+  
+  const formData = ref({
+    name: '',
+    phone: '',
+    openid: '',
+    parent_id: '',
+    tenant_id: '',
+    applet_url: '',
+    is_active: 'Y'
+  })
+  
+  const statusOptions = [
+    { text: '激活', value: 'Y' },
+    { text: '未激活', value: 'N' }
+  ]
+
+  // 取消
+  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)
+    })
+  }
+</script>
+
+<style lang="scss" scoped>
+  .add-container {
+    padding: 20rpx;
+    background-color: #f5f7fa;
+    min-height: 100vh;
+  }
+  
+  /* 头部样式 */
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 24rpx;
+    padding-bottom: 16rpx;
+    border-bottom: 2rpx solid #ecf5ff;
+  }
+  
+  .title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #303133;
+  }
+  
+  .header-right {
+    width: 28px;
+  }
+  
+  /* 表单容器样式 */
+  .form-container {
+    background-color: #fff;
+    border-radius: 12rpx;
+    padding: 24rpx;
+    margin-bottom: 24rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  /* 表单输入框样式 */
+  .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;
+    border-radius: 8rpx;
+    font-size: 28rpx;
+    transition: all 0.3s ease;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .cancel-btn:active,
+  .submit-btn:active {
+    transform: translateY(2rpx);
+    box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .cancel-btn {
+    background-color: #909399;
+    color: #fff;
+  }
+  
+  .submit-btn {
+    background-color: #409eff;
+    color: #fff;
+  }
+  
+  .btn-text {
+    margin-left: 8rpx;
+  }
+  
+  /* 响应式设计 */
+  @media screen and (max-width: 750rpx) {
+    .form-container {
+      padding: 20rpx;
+    }
+    
+    .btn-container {
+      margin-top: 24rpx;
+    }
+  }
+</style>

src/pages/distributor/edit.vue

@@ -0,0 +1,248 @@
+<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>
+    
+    <!-- 表单容器 -->
+    <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>
+    
+    <!-- 按钮容器 -->
+    <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>
+  </view>
+</template>
+
+<script setup>
+  import { ref, onMounted } from "vue"
+
+  const formRef = ref(null)
+  const distributorId = ref(uni.getStorageSync('__uni_route_query')?.id || '')
+  
+  const formData = ref({
+    id: '',
+    name: '',
+    phone: '',
+    openid: '',
+    parent_id: '',
+    tenant_id: '',
+    applet_url: '',
+    is_active: 'Y'
+  })
+  
+  const statusOptions = [
+    { text: '激活', value: 'Y' },
+    { text: '未激活', value: 'N' }
+  ]
+
+  // 初始化加载数据
+  onMounted(() => {
+    fetchDistributorDetail()
+  })
+
+  // 获取分销员详情
+  function fetchDistributorDetail() {
+    // 这里应该调用后端API获取数据
+    // 模拟数据
+    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'
+      }
+    }, 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)
+    })
+  }
+</script>
+
+<style lang="scss" scoped>
+  .edit-container {
+    padding: 20rpx;
+    background-color: #f5f7fa;
+    min-height: 100vh;
+  }
+  
+  /* 头部样式 */
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 24rpx;
+    padding-bottom: 16rpx;
+    border-bottom: 2rpx solid #ecf5ff;
+  }
+  
+  .title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #303133;
+  }
+  
+  .header-right {
+    width: 28px;
+  }
+  
+  /* 表单容器样式 */
+  .form-container {
+    background-color: #fff;
+    border-radius: 12rpx;
+    padding: 24rpx;
+    margin-bottom: 24rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  /* 表单输入框样式 */
+  .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;
+    border-radius: 8rpx;
+    font-size: 28rpx;
+    transition: all 0.3s ease;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .cancel-btn:active,
+  .submit-btn:active {
+    transform: translateY(2rpx);
+    box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .cancel-btn {
+    background-color: #909399;
+    color: #fff;
+  }
+  
+  .submit-btn {
+    background-color: #409eff;
+    color: #fff;
+  }
+  
+  .btn-text {
+    margin-left: 8rpx;
+  }
+  
+  /* 响应式设计 */
+  @media screen and (max-width: 750rpx) {
+    .form-container {
+      padding: 20rpx;
+    }
+    
+    .btn-container {
+      margin-top: 24rpx;
+    }
+  }
+</style>

src/pages/distributor/index.vue

@@ -0,0 +1,398 @@
+<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>
+    
+    <!-- 搜索框 -->
+    <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>
+      <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>
+          </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>
+          </uni-td>
+        </uni-tr>
+      </uni-table>
+    </view>
+    
+    <!-- 分页 -->
+    <view class="pagination-container">
+      <uni-pagination 
+        :current="currentPage" 
+        :pageSize="pageSize" 
+        :total="total" 
+        @change="handlePageChange"
+        show-icon
+        prev-text="上一页"
+        next-text="下一页"
+      />
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { ref, onMounted } from "vue"
+
+  const loading = ref(false)
+  const distributorList = ref([])
+  const currentPage = ref(1)
+  const pageSize = ref(10)
+  const total = ref(0)
+  
+  const searchForm = ref({
+    name: '',
+    phone: ''
+  })
+
+  // 初始化加载数据
+  onMounted(() => {
+    fetchDistributorList()
+  })
+
+  // 获取分销员列表
+  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 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 handleDelete(id) {
+    uni.showModal({
+      title: '提示',
+      content: '确定要删除该分销员吗？',
+      success: (res) => {
+        if (res.confirm) {
+          // 这里应该调用后端API删除数据
+          fetchDistributorList()
+          uni.showToast({ title: '删除成功' })
+        }
+      }
+    })
+  }
+
+  // 配置分润规则
+  function handleRule(id) {
+    // 跳转到分润规则配置页面
+    uni.navigateTo({
+      url: `/pages/distributor/rule?id=${id}`
+    })
+  }
+</script>
+
+<style lang="scss" scoped>
+  .distributor-container {
+    padding: 20rpx;
+    background-color: #f5f7fa;
+    min-height: 100vh;
+  }
+  
+  /* 头部样式 */
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24rpx;
+    padding-bottom: 16rpx;
+    border-bottom: 2rpx solid #ecf5ff;
+  }
+  
+  .title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #303133;
+  }
+  
+  .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);
+  }
+  
+  .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;
+    background-color: #fff;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 0 16rpx;
+    transition: all 0.3s ease;
+  }
+  
+  .search-input-wrapper:focus-within {
+    border-color: #409eff;
+    box-shadow: 0 0 0 2rpx rgba(64, 158, 255, 0.2);
+  }
+  
+  .search-icon {
+    margin-right: 12rpx;
+  }
+  
+  .search-input {
+    flex: 1;
+    padding: 16rpx 0;
+    border: none;
+    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;
+    font-size: 24rpx;
+    transition: all 0.3s ease;
+    box-shadow: 0 2rpx 8rpx rgba(103, 194, 58, 0.3);
+  }
+  
+  .search-btn:active {
+    transform: translateY(2rpx);
+    box-shadow: 0 1rpx 4rpx rgba(103, 194, 58, 0.3);
+  }
+  
+  .search-btn-text {
+    margin-left: 8rpx;
+  }
+  
+  /* 表格容器样式 */
+  .table-container {
+    background-color: #fff;
+    border-radius: 12rpx;
+    overflow: hidden;
+    margin-bottom: 24rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  /* 状态标签样式 */
+  .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 {
+    display: flex;
+    gap: 8rpx;
+    align-items: center;
+  }
+  
+  .action-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    padding: 8rpx 12rpx;
+    border-radius: 6rpx;
+    font-size: 20rpx;
+    transition: all 0.3s ease;
+  }
+  
+  .action-btn:active {
+    transform: translateY(1rpx);
+  }
+  
+  .action-btn.edit {
+    background-color: #ecf5ff;
+    color: #409eff;
+  }
+  
+  .action-btn.delete {
+    background-color: #fef0f0;
+    color: #f56c6c;
+  }
+  
+  .action-btn.rule {
+    background-color: #fdf6ec;
+    color: #e6a23c;
+  }
+  
+  .action-btn text {
+    margin-left: 4rpx;
+  }
+  
+  /* 分页样式 */
+  .pagination-container {
+    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);
+  }
+  
+  /* 响应式设计 */
+  @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;
+    }
+  }
+</style>

src/pages/distributor/rule.vue

@@ -0,0 +1,145 @@
+<template>
+  <view class="rule-container">
+    <view class="header">
+      <text class="title">分润规则配置</text>
+    </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>
+    
+    <view class="btn-container">
+      <button class="cancel-btn" @click="handleCancel">取消</button>
+      <button class="submit-btn" @click="handleSubmit">提交</button>
+    </view>
+  </view>
+</template>
+
+<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: ''
+  })
+
+  // 初始化加载数据
+  onMounted(() => {
+    fetchRuleDetail()
+  })
+
+  // 获取分润规则详情
+  function fetchRuleDetail() {
+    // 这里应该调用后端API获取数据
+    // 模拟数据
+    setTimeout(() => {
+      ruleForm.value = {
+        distributor_id: distributorId.value,
+        profit_ratio: '10',
+        rule_name: '默认分润规则',
+        rule_desc: '基础分润规则',
+        effective_time: new Date().toISOString(),
+        expire_time: ''
+      }
+    }, 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)
+    })
+  }
+</script>
+
+<style lang="scss" scoped>
+  .rule-container {
+    padding: 20rpx;
+    background-color: #f5f5f5;
+    min-height: 100vh;
+  }
+  
+  .header {
+    margin-bottom: 20rpx;
+    padding-bottom: 20rpx;
+    border-bottom: 1rpx solid #e5e5e5;
+  }
+  
+  .title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #333;
+  }
+  
+  .form-container {
+    background-color: #fff;
+    border-radius: 8rpx;
+    padding: 20rpx;
+    margin-bottom: 20rpx;
+  }
+  
+  .btn-container {
+    display: flex;
+    gap: 20rpx;
+  }
+  
+  .cancel-btn {
+    flex: 1;
+    background-color: #909399;
+    color: #fff;
+    border: none;
+    padding: 20rpx;
+    border-radius: 4rpx;
+    font-size: 28rpx;
+  }
+  
+  .submit-btn {
+    flex: 1;
+    background-color: #409eff;
+    color: #fff;
+    border: none;
+    padding: 20rpx;
+    border-radius: 4rpx;
+    font-size: 28rpx;
+  }
+</style>

src/pages/login.vue

@@ -3,7 +3,7 @@
     <view class="logo-content align-center justify-center flex">
       <image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
       </image>
-      <text class="title">若依移动端登录</text>
+      <text class="title">寻驾小程序管理</text>
     </view>
     <view class="login-form-content">
       <view class="input-item flex align-center">

src/pages/work/index.vue

@@ -5,67 +5,53 @@
       <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
         <swiper-item v-for="(item, index) in data" :key="index">
           <view class="swiper-item" @click="clickBannerItem(item)">
-            <image :src="item.image" mode="aspectFill" :draggable="false" />
+            <image :src="item.image" mode="aspectFill" :draggable="false" class="banner-image" />
           </view>
         </swiper-item>
       </swiper>
     </uni-swiper-dot>
 
     <!-- 宫格组件 -->
-    <uni-section title="系统管理" type="line"></uni-section>
     <view class="grid-body">
-      <uni-grid :column="4" :showBorder="false" @change="changeGrid">
+      <view class="grid-title">系统功能</view>
-        <uni-grid-item>
+      <uni-grid :column="4" :showBorder="false">
-          <view class="grid-item-box">
+        <uni-grid-item @click="goToDistributor">
-            <uni-icons type="person-filled" size="30"></uni-icons>
+          <view class="grid-item-box distributor">
+            <view class="icon-container">
+              <uni-icons type="share" size="36" color="#409eff" />
+            </view>
+            <text class="text">分销员管理</text>
+          </view>
+        </uni-grid-item>
+        <uni-grid-item @click="showUnderConstruction">
+          <view class="grid-item-box user">
+            <view class="icon-container">
+              <uni-icons type="person-filled" size="36" color="#67c23a" />
+            </view>
             <text class="text">用户管理</text>
           </view>
         </uni-grid-item>
-        <uni-grid-item>
+        <uni-grid-item @click="showUnderConstruction">
-          <view class="grid-item-box">
+          <view class="grid-item-box dept">
-            <uni-icons type="staff-filled" size="30"></uni-icons>
+            <view class="icon-container">
-            <text class="text">角色管理</text>
+              <uni-icons type="settings-filled" size="36" color="#e6a23c" />
-          </view>
+            </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="color" size="30"></uni-icons>
-            <text class="text">菜单管理</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="settings-filled" size="30"></uni-icons>
             <text class="text">部门管理</text>
           </view>
         </uni-grid-item>
-        <uni-grid-item>
+        <uni-grid-item @click="showUnderConstruction">
-          <view class="grid-item-box">
+          <view class="grid-item-box notice">
-            <uni-icons type="heart-filled" size="30"></uni-icons>
+            <view class="icon-container">
-            <text class="text">岗位管理</text>
+              <uni-icons type="chat-filled" size="36" color="#f56c6c" />
-          </view>
+            </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="bars" size="30"></uni-icons>
-            <text class="text">字典管理</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="gear-filled" size="30"></uni-icons>
-            <text class="text">参数设置</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="chat-filled" size="30"></uni-icons>
             <text class="text">通知公告</text>
           </view>
         </uni-grid-item>
-        <uni-grid-item>
+        <uni-grid-item @click="showUnderConstruction">
-          <view class="grid-item-box">
+          <view class="grid-item-box log">
-            <uni-icons type="wallet-filled" size="30"></uni-icons>
+            <view class="icon-container">
+              <uni-icons type="wallet-filled" size="36" color="#909399" />
+            </view>
             <text class="text">日志管理</text>
           </view>
         </uni-grid-item>
@@ -90,7 +76,34 @@
     current.value = e.detail.current
   }
 
-  function changeGrid(e) {
+  // 跳转到分销员管理页面
+  function goToDistributor() {
+    console.log('准备跳转到分销员管理页面')
+    uni.navigateTo({
+      url: '/pages/distributor/index',
+      success: function() {
+        console.log('跳转成功')
+      },
+      fail: function(err) {
+        console.log('跳转失败：', err)
+        // 尝试使用其他跳转方式
+        uni.redirectTo({
+          url: '/pages/distributor/index',
+          success: function() {
+            console.log('redirectTo跳转成功')
+          },
+          fail: function(err2) {
+            console.log('redirectTo跳转失败：', err2)
+            // 显示错误信息
+            proxy.$modal.showToast('跳转失败，请重试')
+          }
+        })
+      }
+    })
+  }
+
+  // 显示建设中提示
+  function showUnderConstruction() {
     proxy.$modal.showToast('模块建设中~')
   }
 </script>
@@ -101,7 +114,7 @@
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
-    background-color: #fff;
+    background-color: #f5f7fa;
     min-height: 100%;
     height: auto;
   }
@@ -112,60 +125,128 @@
   }
   /* #endif */
 
-  .text {
+  .work-container {
-    text-align: center;
+    padding: 20rpx;
-    font-size: 26rpx;
+    min-height: 100vh;
-    margin-top: 10rpx;
+  }
+
+  /* 轮播图样式 */
+  .uni-swiper-dot-box {
+    margin-bottom: 30rpx;
+    border-radius: 12rpx;
+    overflow: hidden;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+  }
+
+  .swiper-box {
+    height: 200px;
+    border-radius: 12rpx;
+    overflow: hidden;
+  }
+
+  .swiper-item {
+    height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .banner-image {
+    width: 100%;
+    height: 100%;
+    border-radius: 12rpx;
+  }
+
+  /* 宫格样式 */
+  .grid-body {
+    background-color: #fff;
+    border-radius: 12rpx;
+    padding: 20rpx;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+  }
+
+  .grid-title {
+    font-size: 30rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 20rpx;
+    padding-left: 10rpx;
+    border-left: 6rpx solid #409eff;
   }
 
   .grid-item-box {
     flex: 1;
-    /* #ifndef APP-NVUE */
     display: flex;
-    /* #endif */
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 15px 0;
+    padding: 20rpx 0;
+    transition: all 0.3s ease;
+    border-radius: 8rpx;
+    position: relative;
   }
 
-  .uni-margin-wrap {
+  .grid-item-box:active {
-    width: 690rpx;
+    transform: translateY(2rpx);
-    width: 100%;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
-    ;
   }
 
-  .swiper {
+  .icon-container {
-    height: 300rpx;
+    width: 80rpx;
-  }
+    height: 80rpx;
-
+    border-radius: 16rpx;
-  .swiper-box {
-    height: 150px;
-  }
-
-  .swiper-item {
-    /* #ifndef APP-NVUE */
     display: flex;
-    /* #endif */
-    flex-direction: column;
-    justify-content: center;
     align-items: center;
-    color: #fff;
+    justify-content: center;
-    height: 300rpx;
+    margin-bottom: 15rpx;
-    line-height: 300rpx;
+    background-color: #f0f9eb;
   }
 
+  /* 各模块颜色 */
+  .distributor .icon-container {
+    background-color: #ecf5ff;
+  }
+
+  .user .icon-container {
+    background-color: #f0f9eb;
+  }
+
+  .dept .icon-container {
+    background-color: #fdf6ec;
+  }
+
+  .notice .icon-container {
+    background-color: #fef0f0;
+  }
+
+  .log .icon-container {
+    background-color: #f4f4f5;
+  }
+
+  .text {
+    text-align: center;
+    font-size: 26rpx;
+    color: #606266;
+    font-weight: 500;
+  }
+
+  /* 响应式设计 */
   @media screen and (min-width: 500px) {
-    .uni-swiper-dot-box {
+    .work-container {
-      width: 400px;
+      max-width: 800px;
-      /* #ifndef APP-NVUE */
       margin: 0 auto;
-      /* #endif */
-      margin-top: 8px;
     }
 
-    .image {
+    .swiper-box {
-      width: 100%;
+      height: 240px;
+    }
+
+    .swiper-item {
+      height: 240px;
+    }
+
+    .grid-item-box {
+      padding: 25rpx 0;
     }
   }
 </style>