From 8190e8d689ede227dc3b334bdff822d468eeafbd Mon Sep 17 00:00:00 2001
From: Sun_sun <469361609@qq.com>
Date: Tue, 9 Sep 2025 17:30:27 +0800
Subject: [PATCH] =?UTF-8?q?[=E4=BF=AE=E6=94=B9]=20=E5=88=86=E9=94=80?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=20=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83?=
 =?UTF-8?q?=E8=87=AA=E6=84=BF=E5=A7=94=E6=89=98=E5=87=BA=E5=94=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js        | 638 ++++++++++++++++++-------------------
 src/views/Distribution.vue | 184 +++++++++--
 src/views/MyProfile.vue    | 205 ++++++------
 3 files changed, 584 insertions(+), 443 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index ac86b83..482d93d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,351 +1,351 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import { useUserStore } from '@/stores/user'
+import {createRouter, createWebHistory} from 'vue-router'
+import {useUserStore} from '@/stores/user'
 import NProgress from 'nprogress'
 import api from '@/utils/api'
 
 const routes = [
-  {
-    path: '/',
-    name: 'Home',
-    redirect: '/mainpage',
-    meta: {
-      title: '首页'
+    {
+        path: '/',
+        name: 'Home',
+        redirect: '/mainpage',
+        meta: {
+            title: '首页'
+        }
+    },
+    {
+        path: '/mylogin',
+        name: 'MyLogin',
+        component: () => import('@/views/MyLogin.vue'),
+        meta: {
+            title: '登录',
+            hideForAuth: true
+        }
+    },
+    {
+        path: '/mainpage',
+        name: 'MainPage',
+        component: () => import('@/views/MainPage.vue'),
+        meta: {
+            title: '主页'
+        }
+    },
+    {
+        path: '/myshop',
+        name: 'MyShop',
+        component: () => import('@/views/MyShop.vue'),
+        meta: {
+            title: '积分商城'
+        }
+    },
+    {
+        path: '/myprofile',
+        name: 'MyProfile',
+        component: () => import('@/views/MyProfile.vue'),
+        meta: {
+            title: '个人中心'
+        }
+    },
+    {
+        path: '/distribution',
+        name: 'Distribution',
+        component: () => import('@/views/Distribution.vue'),
+        meta: {
+            title: '分销'
+        }
+    },
+    {
+        path: '/loading',
+        name: 'Loading',
+        component: () => import('@/views/Loading.vue'),
+        meta: {
+            title: '维护中'
+        }
+    },
+    {
+        path: '/mypoints-history',
+        name: 'MyPointsHistory',
+        component: () => import('@/views/MyPointsHistory.vue'),
+        meta: {
+            title: '积分记录',
+            requiresAuth: true
+        }
+    },
+    {
+        path: '/editdetailspage',
+        name: 'EditDetailsPage',
+        component: () => import('@/views/EditDetailsPage.vue'),
+        meta: {
+            title: '编辑信息',
+            requiresAuth: true
+        }
+    },
+    {
+        path: '/editpasswordpage',
+        name: 'EditPasswordPage',
+        component: () => import('@/views/EditPasswordPage.vue'),
+        meta: {
+            title: '编辑密码',
+            requiresAuth: true
+        }
+    },
+    {
+        path: '/shop',
+        name: 'Shop',
+        component: () => import('@/views/Shop.vue'),
+        meta: {
+            title: '积分商城'
+        }
+    },
+    {
+        path: '/product/:id',
+        name: 'ProductDetail',
+        component: () => import('@/views/ProductDetail.vue'),
+        meta: {
+            title: '商品详情'
+        }
+    },
+    {
+        path: '/register',
+        name: 'Register',
+        component: () => import('@/views/Register.vue'),
+        meta: {
+            title: '注册',
+            hideForAuth: true
+        }
+    },
+    {
+        path: '/payment',
+        name: 'Payment',
+        component: () => import('@/views/Payment.vue'),
+        meta: {
+            title: '支付激活',
+            requiresAuth: true
+        }
+    },
+    {
+        path: '/orders',
+        name: 'Orders',
+        component: () => import('@/views/Orders.vue'),
+        meta: {
+            title: '我的订单',
+            requiresAuth: true
+        }
+    },
+    {
+        path: '/transfers',
+        name: 'Transfers',
+        component: () => import('@/views/Transfers.vue'),
+        meta: {
+            title: '转账',
+            requiresAuth: true
+        }
+    },
+    {
+        path: '/matching',
+        name: 'Matching',
+        component: () => import('@/views/Matching.vue'),
+        meta: {
+            title: '货款匹配',
+            requiresAuth: true
+        }
+    },
+    {
+        path: '/agent/login',
+        name: 'AgentLogin',
+        component: () => import('@/views/AgentLogin.vue'),
+        meta: {
+            title: '代理登录'
+        }
+    },
+    {
+        path: '/agent/dashboard',
+        name: 'AgentDashboard',
+        component: () => import('@/views/AgentDashboard.vue'),
+        meta: {
+            title: '代理后台',
+            requiresAuth: true,
+            isAgent: true
+        }
+    },
+    {
+        path: '/agent/withdrawals',
+        name: 'AgentWithdrawals',
+        component: () => import('@/views/AgentWithdrawals.vue'),
+        meta: {
+            title: '佣金提现',
+            requiresAuth: true,
+            isAgent: true
+        }
+    },
+    {
+        path: '/customerservice',
+        name: 'CustomerService',
+        component: () => import('@/views/CustomerService.vue'),
+        meta: {
+            title: '客服中心'
+        }
+    },
+    {
+        path: '/productsummary/:id',
+        name: 'productSummary',
+        component: () => import('@/views/ProductSummary.vue'),
+        meta: {
+            title: '商品汇总'
+        }
+    },
+    {
+        path: '/buydetail',
+        name: 'BuyDetail',
+        component: () => import('../views/BuyDetails.vue'),
+        meta: {title: '确认订单'}
+    },
+    {
+        path: '/pay/:orderId',
+        name: 'Pay',
+        component: () => import('@/views/Pay.vue'),
+        meta: {title: '确认支付'},
+        props: route => ({orderId: route.query.orderId})
+    },
+    {
+        path: '/cart',
+        name: 'Cart',
+        component: () => import('@/views/Cart.vue'),
+        meta: {title: '购物车'}
+    },
+    {
+        path: '/address',
+        name: 'Address',
+        component: () => import('@/views/Address.vue'),
+        meta: {title: '地址管理', requiresAuth: true}
+    },
+    {
+        path: '/payloading',
+        name: 'PayLoading',
+        component: () => import('@/views/PayLoading.vue'),
+        meta: {title: '支付确认'},
+        props: route => ({orderId: route.query.orderId})
+    },
+    {
+        path: '/:pathMatch(.*)*',
+        name: 'NotFound',
+        component: () => import('@/views/NotFound.vue'),
+        meta: {
+            title: '页面不存在'
+        }
     }
-  },
-  {
-    path: '/mylogin',
-    name: 'MyLogin',
-    component: () => import('@/views/MyLogin.vue'),
-    meta: {
-      title: '登录',
-      hideForAuth: true
-    }
-  },
-  {
-    path: '/mainpage',
-    name: 'MainPage',
-    component: () => import('@/views/MainPage.vue'),
-    meta: {
-      title: '主页'
-    }
-  },
-  {
-    path: '/myshop',
-    name: 'MyShop',
-    component: () => import('@/views/MyShop.vue'),
-    meta: {
-      title: '积分商城'
-    }
-  },
-  {
-    path: '/myprofile',
-    name: 'MyProfile',
-    component: () => import('@/views/MyProfile.vue'),
-    meta: {
-      title: '个人中心'
-    }
-  },
-  {
-    path: '/distribution',
-    name: 'Distribution',
-    component: () => import('@/views/Distribution.vue'),
-    meta: {
-      title: '分销'
-    }
-  },
-  {
-    path: '/loading',
-    name: 'Loading',
-    component: () => import('@/views/Loading.vue'),
-    meta: {
-      title: '维护中'
-    }
-  },
-  {
-    path: '/mypoints-history',
-    name: 'MyPointsHistory',
-    component: () => import('@/views/MyPointsHistory.vue'),
-    meta: {
-      title: '积分记录',
-      requiresAuth: true
-    }
-  },
-  {
-    path: '/editdetailspage',
-    name: 'EditDetailsPage',
-    component: () => import('@/views/EditDetailsPage.vue'),
-    meta: {
-      title: '编辑信息',
-      requiresAuth: true
-    }
-  },
-  {
-    path: '/editpasswordpage',
-    name: 'EditPasswordPage',
-    component: () => import('@/views/EditPasswordPage.vue'),
-    meta: {
-      title: '编辑密码',
-      requiresAuth: true
-    }
-  },
-  {
-    path: '/shop',
-    name: 'Shop',
-    component: () => import('@/views/Shop.vue'),
-    meta: {
-      title: '积分商城'
-    }
-  },
-  {
-    path: '/product/:id',
-    name: 'ProductDetail',
-    component: () => import('@/views/ProductDetail.vue'),
-    meta: {
-      title: '商品详情'
-    }
-  },
-  {
-    path: '/register',
-    name: 'Register',
-    component: () => import('@/views/Register.vue'),
-    meta: {
-      title: '注册',
-      hideForAuth: true
-    }
-  },
-  {
-    path: '/payment',
-    name: 'Payment',
-    component: () => import('@/views/Payment.vue'),
-    meta: {
-      title: '支付激活',
-       requiresAuth: true
-    }
-  },
-  {
-    path: '/orders',
-    name: 'Orders',
-    component: () => import('@/views/Orders.vue'),
-    meta: {
-      title: '我的订单',
-      requiresAuth: true
-    }
-  },
-  {
-    path: '/transfers',
-    name: 'Transfers',
-    component: () => import('@/views/Transfers.vue'),
-    meta: {
-      title: '转账',
-      requiresAuth: true
-    }
-  },
-  {
-    path: '/matching',
-    name: 'Matching',
-    component: () => import('@/views/Matching.vue'),
-    meta: {
-      title: '货款匹配',
-      requiresAuth: true
-    }
-  },
-  {
-    path: '/agent/login',
-    name: 'AgentLogin',
-    component: () => import('@/views/AgentLogin.vue'),
-    meta: {
-      title: '代理登录'
-    }
-  },
-  {
-    path: '/agent/dashboard',
-    name: 'AgentDashboard',
-    component: () => import('@/views/AgentDashboard.vue'),
-    meta: {
-      title: '代理后台',
-      requiresAuth: true,
-      isAgent: true
-    }
-  },
-  {
-    path: '/agent/withdrawals',
-    name: 'AgentWithdrawals',
-    component: () => import('@/views/AgentWithdrawals.vue'),
-    meta: {
-      title: '佣金提现',
-      requiresAuth: true,
-      isAgent: true
-    }
-  },
-  {
-    path: '/customerservice',
-    name: 'CustomerService',
-    component: () => import('@/views/CustomerService.vue'),
-    meta: {
-      title: '客服中心'
-    }
-  },
-  {
-    path: '/productsummary/:id',
-    name: 'productSummary',
-    component: () => import('@/views/ProductSummary.vue'),
-    meta: {
-      title: '商品汇总'
-    }
-  },
-  {
-    path: '/buydetail',
-    name: 'BuyDetail',
-    component: () => import('../views/BuyDetails.vue'),
-    meta: { title: '确认订单' }
-  },
-  {
-    path: '/pay/:orderId',
-    name: 'Pay',
-    component: () => import('@/views/Pay.vue'),
-    meta: { title: '确认支付' },
-    props: route => ({ orderId: route.query.orderId })
-  },
-  {
-    path: '/cart',
-    name: 'Cart',
-    component: () => import('@/views/Cart.vue'),
-    meta: { title: '购物车' }
-  },
-  {
-    path: '/address',
-    name: 'Address',
-    component: () => import('@/views/Address.vue'),
-    meta: { title: '地址管理', requiresAuth: true }
-  },
-  {
-    path: '/payloading',
-    name: 'PayLoading',
-    component: () => import('@/views/PayLoading.vue'),
-    meta: { title: '支付确认' },
-    props: route => ({ orderId: route.query.orderId })
-  },
-  {
-    path: '/:pathMatch(.*)*',
-    name: 'NotFound',
-    component: () => import('@/views/NotFound.vue'),
-    meta: {
-      title: '页面不存在'
-    }
-  }
 ]
 
 const router = createRouter({
-  history: createWebHistory('/frontend/'),
-  routes,
-  scrollBehavior(to, from, savedPosition) {
-    if (savedPosition) {
-      return savedPosition
-    } else {
-      return { top: 0 }
+    history: createWebHistory('/frontend/'),
+    routes,
+    scrollBehavior(to, from, savedPosition) {
+        if (savedPosition) {
+            return savedPosition
+        } else {
+            return {top: 0}
+        }
     }
-  }
 })
 
 // 路由守卫
 router.beforeEach(async (to, from, next) => {
-  NProgress.start()
+    NProgress.start()
 
-  const userStore = useUserStore()
+    const userStore = useUserStore()
 
-  // 设置页面标题
-  if (to.meta.title) {
-    document.title = `${to.meta.title} - 炬融圈`
-  }
-
-  // 检查维护模式
-  try {
-    const { data } = await api.get('/system/maintenance-status', { showLoading: false })
-    console.log(data, 'data');
-
-    if (data.success) {
-      if (data.data.maintenance_mode) {
-        // 维护模式开启，且不在维护页面，跳转到维护页面
-        if (to.name !== 'Loading') {
-          next({ name: 'Loading' })
-          return
-        }
-      } else {
-        // 维护模式关闭，且在维护页面，跳转到首页
-        if (to.name === 'Loading') {
-          next({ name: 'MainPage' })
-          return
-        }
-      }
+    // 设置页面标题
+    if (to.meta.title) {
+        document.title = `${to.meta.title} - 炬融圈`
     }
-  } catch (error) {
-    // 如果检查维护状态失败，继续正常流程
-    console.warn('检查维护状态失败:', error)
-  }
 
-  // 检查是否需要认证
-  if (to.meta.requiresAuth) {
-    // 检查是否是代理页面
-    if (to.meta.isAgent) {
-      // 代理页面认证逻辑
-      const agentInfo = localStorage.getItem('agentInfo')
-      const agentToken = localStorage.getItem('token')
+    // 检查维护模式
+    try {
+        const {data} = await api.get('/system/maintenance-status', {showLoading: false})
+        console.log(data, 'data');
 
-      if (!agentInfo || !agentToken) {
-        next({
-          path: '/mylogin',
-          query: { redirect: to.fullPath }
-        })
-        return
-      }
-    } else {
-      // 普通用户页面认证逻辑
-      console.log(userStore.isAuthenticated,'isAuthenticated');
-
-      if (!userStore.isAuthenticated) {
-        // 尝试从本地存储恢复登录状态
-        await userStore.checkAuth()
-
-        if (!userStore.isAuthenticated) {
-          next({
-            name: 'MyLogin',
-            query: { redirect: to.fullPath }
-          })
-          return
+        if (data.success) {
+            if (data.data.maintenance_mode) {
+                // 维护模式开启，且不在维护页面，跳转到维护页面
+                if (to.name !== 'Loading') {
+                    next({name: 'Loading'})
+                    return
+                }
+            } else {
+                // 维护模式关闭，且在维护页面，跳转到首页
+                if (to.name === 'Loading') {
+                    next({name: 'MainPage'})
+                    return
+                }
+            }
         }
-      }
+    } catch (error) {
+        // 如果检查维护状态失败，继续正常流程
+        console.warn('检查维护状态失败:', error)
+    }
 
-      // 检查支付状态（管理员除外）
-      console.log(userStore.user);
+    // 检查是否需要认证
+    if (to.meta.requiresAuth) {
+        // 检查是否是代理页面
+        if (to.meta.isAgent) {
+            // 代理页面认证逻辑
+            const agentInfo = localStorage.getItem('agentInfo')
+            const agentToken = localStorage.getItem('token')
 
-      if (userStore.user && userStore.user.role !== 'admin' && userStore.user.payment_status === 'unpaid') {
-        console.log('进来了');
-
-        // 如果当前不在支付页面，静默重定向到支付页面（不显示额外通知）
-        if (to.name !== 'Payment') {
-          next({
-            name: 'Payment',
-            query: { redirect: to.fullPath }
-          })
-          return
+            if (!agentInfo || !agentToken) {
+                next({
+                    path: '/mylogin',
+                    query: {redirect: to.fullPath}
+                })
+                return
+            }
         } else {
-          next()
+            // 普通用户页面认证逻辑
+            console.log(userStore.isAuthenticated, 'isAuthenticated');
+
+            if (!userStore.isAuthenticated) {
+                // 尝试从本地存储恢复登录状态
+                await userStore.checkAuth()
+
+                if (!userStore.isAuthenticated) {
+                    next({
+                        name: 'MyLogin',
+                        query: {redirect: to.fullPath}
+                    })
+                    return
+                }
+            }
+
+            // 检查支付状态（管理员除外）
+            console.log(userStore.user);
+
+            if (userStore.user && userStore.user.role !== 'admin' && userStore.user.payment_status === 'unpaid') {
+                console.log('进来了');
+
+                // 如果当前不在支付页面，静默重定向到支付页面（不显示额外通知）
+                if (to.name !== 'Payment') {
+                    next({
+                        name: 'Payment',
+                        query: {redirect: to.fullPath}
+                    })
+                    return
+                } else {
+                    next()
+                }
+            }
         }
-      }
     }
-  }
 
-  // 如果已登录用户访问登录/注册页面，重定向到转账管理（改成了主页）
-  if (to.meta.hideForAuth && userStore.isAuthenticated) {
-    next({ name: 'MainPage' })
-    return
-  }
+    // 如果已登录用户访问登录/注册页面，重定向到转账管理（改成了主页）
+    if (to.meta.hideForAuth && userStore.isAuthenticated) {
+        next({name: 'MainPage'})
+        return
+    }
 
-  next()
+    next()
 })
 
 router.afterEach(() => {
-  NProgress.done()
+    NProgress.done()
 })
 
 export default router
\ No newline at end of file
diff --git a/src/views/Distribution.vue b/src/views/Distribution.vue
index 7f7d120..75398f5 100644
--- a/src/views/Distribution.vue
+++ b/src/views/Distribution.vue
@@ -3,12 +3,14 @@
     <!-- 导航栏 -->
     <nav class="navbar">
       <div class="nav-left">
-        <el-button 
-          type="text" 
-          @click="$router.go(-1)"
-          class="back-btn"
+        <el-button
+            :text="true"
+            @click="$router.go(-1)"
+            class="back-btn"
         >
-          <el-icon><ArrowLeft /></el-icon>
+          <el-icon>
+            <ArrowLeft/>
+          </el-icon>
         </el-button>
       </div>
       <div class="nav-center">
@@ -33,18 +35,20 @@
         <div class="qrcode-card">
           <h4 class="qrcode-title">我的推广二维码</h4>
           <div class="qrcode-container">
-            <canvas 
-              ref="qrcodeCanvas" 
-              class="qrcode-canvas"
-              v-show="qrcodeGenerated"
+            <canvas
+                ref="qrcodeCanvas"
+                class="qrcode-canvas"
+                v-show="qrcodeGenerated"
             ></canvas>
             <div v-show="!qrcodeGenerated" class="qrcode-loading">
-              <el-icon class="loading-icon"><Loading /></el-icon>
+              <el-icon class="loading-icon">
+                <Loading/>
+              </el-icon>
               <span>生成中...</span>
             </div>
           </div>
           <p class="qrcode-tip">扫描二维码，好友可直接注册并绑定您的推荐关系</p>
-          
+
         </div>
       </div>
 
@@ -53,10 +57,10 @@
         <div class="link-card">
           <h4 class="link-title">推广链接</h4>
           <div class="link-container">
-            <el-input 
-              v-model="inviteLink" 
-              readonly 
-              class="link-input"
+            <el-input
+                v-model="inviteLink"
+                readonly
+                class="link-input"
             >
               <template #append>
                 <el-button @click="copyLink" type="primary">
@@ -68,21 +72,63 @@
         </div>
       </div>
 
+      <!-- 下级用户 -->
+      <el-button class="lower-users-btn" @click="handleLowerUser">查看下级用户</el-button>
+      <el-drawer
+          v-model="drawerLowerUsers"
+          title="下级用户"
+          direction="btt"
+          :lockScroll="false"
+          size="70%"
+          @open="requestLowerUsers"
+          @closed="closeScrollerLowerUsers"
+      >
+        <ul v-infinite-scroll="loadScrollerLowerUsers" class="users-list" style="overflow: auto"
+            :infinite-scroll-immediate="false"
+            :infinite-scroll-disabled="scrollLowerUsers">
+          <li v-for="(item, index) in lowerUsers" :key="item.id">
+            <el-divider v-if="index!=0" border-style="dashed" />
+            <div class="users-item">
+              <el-image
+                  :src="getImageUrl(item.voucher_url)"
+                  :preview-src-list="[getImageUrl(item.voucher_url)]"
+                  class="user-avatar"
+                  fit="cover"
+              >
+                <template #error>
+                  <div class="image-slot">
+                    <el-icon>
+                      <Picture/>
+                    </el-icon>
+                  </div>
+                </template>
+              </el-image>
+              <div class="user-text">
+                <div class="user-username">用户名：{{item.from_real_name}}</div>
+                <div class="user-date">时间：{{ item.created_at }}</div>
+              </div>
+            </div>
+          </li>
+          <el-divider v-if="scrollLowerUsers" border-style="dashed" content-position="center">到底了~</el-divider>
+        </ul>
+      </el-drawer>
 
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, nextTick } from 'vue'
-import { useRouter } from 'vue-router'
-import { useUserStore } from '@/stores/user'
-import { ElMessage } from 'element-plus'
-import { 
+import {ref, onMounted, nextTick} from 'vue'
+import {useRouter} from 'vue-router'
+import {useUserStore} from '@/stores/user'
+import {ElMessage} from 'element-plus'
+import {
   ArrowLeft,
-  Loading
+  Loading, Picture
 } from '@element-plus/icons-vue'
 import QRCode from 'qrcode'
+import api from "@/utils/api.js";
+import {getImageUrl} from "@/config/index.js";
 
 const router = useRouter()
 const userStore = useUserStore()
@@ -92,7 +138,8 @@ const qrcodeCanvas = ref(null)
 const qrcodeGenerated = ref(false)
 const generating = ref(false)
 const inviteLink = ref('')
-
+// 下级用户
+const drawerLowerUsers = ref(false)
 
 // 生成邀请链接
 const generateInviteLink = () => {
@@ -100,7 +147,7 @@ const generateInviteLink = () => {
   console.log(userId)
   const baseUrl = `${window.location.origin}/frontend`
   // return `${baseUrl}/register?inviter=${userId}`// 实施用
-  return `http://192.168.1.124:5173/register?inviter=${userId}`// 测试用
+  return `http://192.168.1.250:5173/register?inviter=${userId}`// 测试用
 }
 
 // 生成二维码
@@ -108,14 +155,14 @@ const generateQRCode = async () => {
   try {
     generating.value = true
     qrcodeGenerated.value = false
-    
+
     // 生成邀请链接
     const link = generateInviteLink()
     inviteLink.value = link
-    
+
     // 等待DOM更新
     await nextTick()
-    
+
     if (qrcodeCanvas.value) {
       // 生成二维码到canvas
       await QRCode.toCanvas(qrcodeCanvas.value, link, {
@@ -126,7 +173,7 @@ const generateQRCode = async () => {
           light: '#FFFFFF'
         }
       })
-      
+
       qrcodeGenerated.value = true
     }
   } catch (error) {
@@ -138,7 +185,6 @@ const generateQRCode = async () => {
 }
 
 
-
 // 复制链接
 const copyLink = async () => {
   try {
@@ -156,6 +202,41 @@ const copyLink = async () => {
   }
 }
 
+// 查看下级用户
+const scrollLowerUsers = ref(false)
+const lowerUsers = ref([])
+const params = {
+  page: 1,
+  limit: 10
+}
+const pages = ref(0)
+
+const handleLowerUser = async () => {
+  lowerUsers.value = []
+  drawerLowerUsers.value = true
+}
+
+const loadScrollerLowerUsers = async () => {
+  params.page += 1
+  await requestLowerUsers(params)
+  if (params.page > pages.value) {
+    scrollLowerUsers.value = true
+  }
+}
+
+const closeScrollerLowerUsers = () => {
+  lowerUsers.value = []
+  params.page = 0
+  scrollLowerUsers.value = false
+}
+
+const requestLowerUsers = async (params) => {
+  await api.get(`/transfers/user/3641`, {params}).then((res) => {
+    lowerUsers.value = lowerUsers.value.concat(res.data.data.transfers)
+    pages.value = res.data.data.pagination.pages
+  })
+}
+
 
 // 生命周期
 onMounted(() => {
@@ -163,7 +244,7 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .distribution-page {
   min-height: 100vh;
   background: linear-gradient(to bottom, #72c9ffae, #f3f3f3);
@@ -266,8 +347,12 @@ onMounted(() => {
 }
 
 @keyframes rotate {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .qrcode-tip {
@@ -318,4 +403,41 @@ onMounted(() => {
     flex-direction: column;
   }
 }
+
+.lower-users-btn {
+  width: 100%;
+  border-radius: 10px;
+}
+
+.users-list {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.users-list .users-item {
+  display: flex; /* 使用Flexbox布局 */
+  align-items: center; /* 垂直居中对齐 */
+  gap: 1rem; /* 图片与文字之间的间距 */
+
+  .user-avatar{
+    width: 50px;
+    height: 50px;
+    object-fit: cover;
+  }
+  .user-text{
+    .user-username{
+      margin-bottom: 5px;
+    }
+    .user-date{
+      color: #666;
+      font-size: 14px;
+    }
+  }
+}
+
+.users-list .users-item + .list-item {
+  margin-top: 10px;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/MyProfile.vue b/src/views/MyProfile.vue
index b681fa9..9895385 100644
--- a/src/views/MyProfile.vue
+++ b/src/views/MyProfile.vue
@@ -3,18 +3,20 @@
     <!-- 用户信息区域 -->
     <div class="user-info-section">
       <div class="user-avatar">
-        <el-avatar 
-          :size="76" 
-          :src="avatarUrl" 
-          class="avatar-img"
+        <el-avatar
+            :size="76"
+            :src="avatarUrl"
+            class="avatar-img"
         >
-          <el-icon><User /></el-icon>
+          <el-icon>
+            <User/>
+          </el-icon>
         </el-avatar>
-        <el-button 
-          type="primary" 
-          size="small" 
-          @click="showAvatarUpload = true"
-          class="upload-btn"
+        <el-button
+            type="primary"
+            size="small"
+            @click="showAvatarUpload = true"
+            class="upload-btn"
         >
           更换头像
         </el-button>
@@ -40,13 +42,13 @@
     <!-- 功能入口区域 -->
     <div class="function-section">
       <div class="function-grid">
-        <router-link 
-          v-for="(item, index) in functionItems" 
-          :key="index" 
-          :to="item.path" 
-          class="function-item"
-          custom
-          v-slot="{ navigate }"
+        <router-link
+            v-for="(item, index) in functionItems"
+            :key="index"
+            :to="item.path"
+            class="function-item"
+            custom
+            v-slot="{ navigate }"
         >
           <div @click="navigate" class="function-item-content">
             <div class="function-icon">
@@ -69,18 +71,18 @@
           </div>
         </div>
         <div class="agreement-section">
-          <el-checkbox 
-            v-model="accountInfo.is_distribute" 
-            @change="handleDistributeChange"
-            class="distribute-checkbox"
-            :true-label="true"
-            :false-label="false"
+          <el-checkbox
+              v-model="accountInfo.is_distribute"
+              @change="handleDistributeChange"
+              class="distribute-checkbox"
+              :true-label="true"
+              :false-label="false"
           >
             自愿委托出售
           </el-checkbox>
-          <el-link 
-            type="primary" 
-            @click="showAgreement"
+          <el-link
+              type="primary"
+              @click="showAgreement"
           >
             《委托出售协议》
           </el-link>
@@ -111,20 +113,22 @@
     </div>
 
     <!-- 头像上传对话框 -->
-    <el-dialog 
-      v-model="showAvatarUpload" 
-      title="更换头像" 
-      width="400px"
+    <el-dialog
+        v-model="showAvatarUpload"
+        title="更换头像"
+        width="400px"
     >
       <el-upload
-        class="avatar-uploader"
-        action="#"
-        :show-file-list="false"
-        :before-upload="beforeAvatarUpload"
-        :http-request="uploadAvatar"
+          class="avatar-uploader"
+          action="#"
+          :show-file-list="false"
+          :before-upload="beforeAvatarUpload"
+          :http-request="uploadAvatar"
       >
-        <img v-if="newAvatar" :src="newAvatar" class="avatar-preview" />
-        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+        <img v-if="newAvatar" :src="newAvatar" class="avatar-preview"/>
+        <el-icon v-else class="avatar-uploader-icon">
+          <Plus/>
+        </el-icon>
       </el-upload>
       <template #footer>
         <span class="dialog-footer">
@@ -139,13 +143,13 @@
 </template>
 
 <script>
-import { ref, onMounted } from 'vue';
-import { useUserStore } from '@/stores/user';
-import { useRouter } from 'vue-router';
-import { ElMessage, ElMessageBox } from 'element-plus';
-import { User, Plus } from '@element-plus/icons-vue';
+import {ref, onMounted} from 'vue';
+import {useUserStore} from '@/stores/user';
+import {useRouter} from 'vue-router';
+import {ElMessage, ElMessageBox} from 'element-plus';
+import {User, Plus} from '@element-plus/icons-vue';
 import api from '@/utils/api';
-import { getImageUrl } from '@/config';
+import {getImageUrl} from '@/config';
 
 export default {
   setup() {
@@ -155,27 +159,27 @@ export default {
     const newAvatar = ref('');
     const uploadedAvatarData = ref(null);
     const showAvatarUpload = ref(false);
-    const accountInfo = ref({ balance: '0.00', is_distribute: false });
+    const accountInfo = ref({balance: '0.00', is_distribute: false});
     const isLoading = ref(false);
     const settings = ref([
-      {text:'账号安全',path:'/editpasswordpage'},
-      {text:'商户资料',path:'/editdetailspage'},
-      {text:'分销',path:'/distribution'},
+      {text: '账号安全', path: '/editpasswordpage'},
+      {text: '商户资料', path: '/editdetailspage'},
+      {text: '分销', path: '/distribution'},
       // {text:'通知设置'},
       // {text:'积分获取规则'},
       // {text:'隐私协议'},
     ]);
     const functionItems = ref([
-      { image: "/imgs/mainpage/jiaoyijilu.png", text: "购物车", path: "/cart" },
-      { image: "/imgs/mainpage/dingdanchaxun.png", text: "地址", path: "/address" },
-      { image: "/imgs/mainpage/kefuzhongxin.png", text: "收藏", path: "" }
+      {image: "/imgs/mainpage/jiaoyijilu.png", text: "购物车", path: "/cart"},
+      {image: "/imgs/mainpage/dingdanchaxun.png", text: "地址", path: "/address"},
+      {image: "/imgs/mainpage/kefuzhongxin.png", text: "收藏", path: ""}
     ]);
 
     // 加载账户信息
     const loadAccountInfo = async () => {
       try {
-        console.log(userStore.user,'userStore.user');
-        
+        console.log(userStore.user, 'userStore.user');
+
         if (userStore.user?.id) {
           const response = await api.get(`/user/profile`);
           console.log(response.data);
@@ -192,7 +196,7 @@ export default {
               const processedAvatarUrl = getImageUrl(response.data.user.avatar);
               avatarUrl.value = processedAvatarUrl;
               // 更新store中的头像
-              if(userStore.user) {
+              if (userStore.user) {
                 userStore.setUser({
                   ...userStore.user,
                   avatar: processedAvatarUrl
@@ -210,11 +214,9 @@ export default {
     const handleDistributeChange = async (value) => {
       try {
         // 判断融豆状态，为0提示，其余正常
-        if (accountInfo.value.balance==0){
+        if (accountInfo.value.balance == 0) {
           ElMessageBox.alert(
-              '请获取融豆后，可开通此服务', '',{
-              confirmButtonText: 'OK',
-            }
+              '请获取融豆后，可开通此服务', '', {confirmButtonText: '确定',}
           )
           accountInfo.value.is_distribute = !value;
           return
@@ -222,12 +224,12 @@ export default {
 
         // 检查是否为第一次勾选
         const isFirstTimeCheck = localStorage.getItem('hasCheckedDistribute') !== 'true';
-        
+
         // 如果是第一次勾选且为开启状态，强制显示协议
         if (value && isFirstTimeCheck) {
           try {
             await ElMessageBox.alert(
-              `<div style="text-align: left; line-height: 1.6;">
+                `<div style="text-align: left; line-height: 1.6;">
                 <h3>委托出售协议</h3>
                 <p>1. 委托方同意将其持有的融豆委托给平台进行出售。</p>
                 <p>2. 平台将根据市场情况和委托方的要求进行出售操作。</p>
@@ -236,15 +238,15 @@ export default {
                 <p>5. 平台收取合理的服务费用，具体标准详见费率说明。</p>
                 <p>6. 双方应遵守相关法律法规，确保交易合法合规。</p>
               </div>`,
-              '委托出售协议',
-              {
-                confirmButtonText: '我已了解并同意',
-                dangerouslyUseHTMLString: true,
-                customClass: 'agreement-dialog',
-                showCancelButton: false,
-                closeOnClickModal: false,
-                closeOnPressEscape: false
-              }
+                '委托出售协议',
+                {
+                  confirmButtonText: '我已了解并同意',
+                  dangerouslyUseHTMLString: true,
+                  customClass: 'agreement-dialog',
+                  showCancelButton: false,
+                  closeOnClickModal: false,
+                  closeOnPressEscape: false
+                }
             );
             // 用户同意协议后，标记为已勾选过
             localStorage.setItem('hasCheckedDistribute', 'true');
@@ -254,18 +256,18 @@ export default {
             return;
           }
         }
-        
+
         const action = value ? '开启' : '关闭';
         await ElMessageBox.confirm(
-          `确定要${action}默认自动匹配功能吗？`,
-          '确认操作',
-          {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }
+            `确定要${action}默认自动匹配功能吗？`,
+            '确认操作',
+            {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }
         );
-        
+
         const response = await api.put(`/user/${userStore.user.id}/distribute`, {
           is_distribute: value
         });
@@ -276,9 +278,24 @@ export default {
             localStorage.setItem('hasCheckedDistribute', 'true');
           }
         } else {
-          // 如果更新失败，恢复原状态
           accountInfo.value.is_distribute = !value;
-          ElMessage.error(response.data.message);
+          ElMessageBox.confirm(
+              '是否同意缴费',
+              response.data.message,
+              {
+                confirmButtonText: '同意',
+                cancelButtonText: '取消',
+                type: 'warning',
+              }
+          ).then(async () => {
+            let response = await api.post(`/users/${userStore.user?.id}/deduct-service-fee`)
+            if (response.data.success) {
+              ElMessage.success(response.data.message);
+              loadAccountInfo()
+            }
+          }).catch(() => {
+            accountInfo.value.is_distribute = !value;
+          })
         }
       } catch (error) {
         if (error === 'cancel') {
@@ -314,14 +331,14 @@ export default {
       try {
         const formData = new FormData();
         formData.append('file', options.file);
-        
+
         const response = await api.post('/upload', formData, {
           headers: {
             'Content-Type': 'multipart/form-data',
             'Authorization': `Bearer ${userStore.token}`
           }
         });
-        
+
         if (response.data.success) {
           // 保存上传响应数据
           uploadedAvatarData.value = response.data.data;
@@ -344,18 +361,18 @@ export default {
           ElMessage.error('请先选择头像');
           return;
         }
-        
+
         // 使用path提交给后端
         const avatarPath = uploadedAvatarData.value.path;
-        const response = await api.put('/user/profile', { 
+        const response = await api.put('/user/profile', {
           avatar: avatarPath
         });
-        
+
         if (response.data.success) {
           // 使用url作为显示地址
           avatarUrl.value = uploadedAvatarData.value.url;
           // 更新用户store中的头像信息
-          if(userStore.user) {
+          if (userStore.user) {
             userStore.setUser({
               ...userStore.user,
               avatar: uploadedAvatarData.value.url
@@ -385,7 +402,7 @@ export default {
           cancelButtonText: '取消',
           type: 'warning'
         });
-        
+
         userStore.logout();
         router.push('/mylogin');
         ElMessage.success('已退出登录');
@@ -397,7 +414,7 @@ export default {
     // 显示委托出售协议
     const showAgreement = () => {
       ElMessageBox.alert(
-        `<div style="text-align: left; line-height: 1.6;">
+          `<div style="text-align: left; line-height: 1.6;">
           <h3>委托出售协议</h3>
           <p>1. 委托方同意将其持有的融豆委托给平台进行出售。</p>
           <p>2. 平台将根据市场情况和委托方的要求进行出售操作。</p>
@@ -406,12 +423,12 @@ export default {
           <p>5. 平台收取合理的服务费用，具体标准详见费率说明。</p>
           <p>6. 双方应遵守相关法律法规，确保交易合法合规。</p>
         </div>`,
-        '委托出售协议',
-        {
-          confirmButtonText: '我已了解',
-          dangerouslyUseHTMLString: true,
-          customClass: 'agreement-dialog'
-        }
+          '委托出售协议',
+          {
+            confirmButtonText: '我已了解',
+            dangerouslyUseHTMLString: true,
+            customClass: 'agreement-dialog'
+          }
       );
     };
 
@@ -421,6 +438,7 @@ export default {
         avatarUrl.value = userStore.user.avatar;
       }
       loadAccountInfo();
+
     });
 
     return {
@@ -705,6 +723,7 @@ export default {
     background-color: rgba(255, 255, 255, 0.9) !important;
     border-color: rgba(255, 255, 255, 0.9) !important;
   }
+
   .el-checkbox__inner::after {
     border-color: #2f89ff !important;
   }