[修改]

分销列表
个人中心自愿委托出售

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

src/views/Distribution.vue

@@ -4,11 +4,13 @@
     <nav class="navbar">
       <div class="nav-left">
         <el-button
-          type="text" 
-          @click="$router.go(-1)"
-          class="back-btn"
+            :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">
@@ -34,12 +36,14 @@
           <h4 class="qrcode-title">我的推广二维码</h4>
           <div class="qrcode-container">
             <canvas
-              ref="qrcodeCanvas" 
-              class="qrcode-canvas"
-              v-show="qrcodeGenerated"
+                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>
@@ -54,9 +58,9 @@
           <h4 class="link-title">推广链接</h4>
           <div class="link-container">
             <el-input
-              v-model="inviteLink" 
-              readonly 
-              class="link-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 {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}`// 测试用
 }
 
 // 生成二维码
@@ -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>

src/views/MyProfile.vue

@@ -4,17 +4,19 @@
     <div class="user-info-section">
       <div class="user-avatar">
         <el-avatar
-          :size="76" 
-          :src="avatarUrl" 
-          class="avatar-img"
+            :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"
+            type="primary"
+            size="small"
+            @click="showAvatarUpload = true"
+            class="upload-btn"
         >
           更换头像
         </el-button>
@@ -41,12 +43,12 @@
     <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 }"
+            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">
@@ -70,17 +72,17 @@
         </div>
         <div class="agreement-section">
           <el-checkbox
-            v-model="accountInfo.is_distribute" 
-            @change="handleDistributeChange"
-            class="distribute-checkbox"
-            :true-label="true"
-            :false-label="false"
+              v-model="accountInfo.is_distribute"
+              @change="handleDistributeChange"
+              class="distribute-checkbox"
+              :true-label="true"
+              :false-label="false"
           >
             自愿委托出售
           </el-checkbox>
           <el-link
-            type="primary" 
-            @click="showAgreement"
+              type="primary"
+              @click="showAgreement"
           >
             《委托出售协议》
           </el-link>
@@ -112,19 +114,21 @@
 
     <!-- 头像上传对话框 -->
     <el-dialog
-      v-model="showAvatarUpload" 
-      title="更换头像" 
-      width="400px"
+        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,26 +159,26 @@ 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`);
@@ -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
@@ -227,7 +229,7 @@ export default {
         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');
@@ -257,13 +259,13 @@ export default {
 
         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`, {
@@ -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') {
@@ -355,7 +372,7 @@ export default {
           // 使用url作为显示地址
           avatarUrl.value = uploadedAvatarData.value.url;
           // 更新用户store中的头像信息
-          if(userStore.user) {
+          if (userStore.user) {
             userStore.setUser({
               ...userStore.user,
               avatar: uploadedAvatarData.value.url
@@ -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;
   }