[修改]

个人中心退出登录样式修改

src/views/Distribution.vue

@@ -14,7 +14,7 @@
         </el-button>
       </div>
       <div class="nav-center">
-        <h1 class="nav-title">分享推广</h1>
+        <h1 class="nav-title">分享</h1>
       </div>
       <div class="nav-right">
         <!-- 占位元素，保持标题居中 -->
@@ -22,7 +22,7 @@
     </nav>
 
     <div class="page-content">
-      <!-- 分享说明 -->
+      <!-- 分销说明 -->
       <div class="intro-section">
         <div class="intro-card">
           <h3 class="intro-title">邀请好友注册</h3>
@@ -80,16 +80,19 @@
           direction="btt"
           :lockScroll="false"
           size="70%"
-          @open="requestLowerUsers"
+          @open="requestLowerUsers(params)"
           @closed="closeScrollerLowerUsers"
       >
-        <ul v-infinite-scroll="loadScrollerLowerUsers" class="users-list" style="overflow: auto"
+        <!-- 一级 -->
+        <ul v-if="!showScrollerLowerUsersByUser" v-infinite-scroll="loadScrollerLowerUsers" class="users-list"
+            style="overflow: auto"
             :infinite-scroll-immediate="false"
             :infinite-scroll-disabled="scrollLowerUsers">
+          <!-- lowerUsers 空数据处理 -->
           <el-empty v-if="lowerUsers.length==0" :image-size="200"/>
           <li v-else v-for="(item, index) in lowerUsers" :key="item.id">
             <el-divider v-if="index!=0" border-style="dashed"/>
-            <div class="users-item">
+            <div class="users-item" @click="handleLowerUserByUserId(item)">
               <el-image
                   :src="getImageUrl(item.avatar)"
                   :preview-src-list="[getImageUrl(item.avatar)]"
@@ -112,6 +115,45 @@
           </li>
           <el-divider v-if="scrollLowerUsers" border-style="dashed" content-position="center">到底了~</el-divider>
         </ul>
+
+        <!-- 二级 -->
+        <ul v-else v-infinite-scroll="loadScrollerLowerUsersByUser" class="users-list" style="overflow: auto"
+            :infinite-scroll-immediate="false"
+            :infinite-scroll-disabled="scrollLowerUsersByUser">
+          <el-page-header style="margin-bottom: 20px" @back="onBack">
+            <template #content>
+              <span class="text-large font-600 mr-3"
+                    style="font-size: 14px"> 正在查看{{ currentUser.username }}的下级 </span>
+            </template>
+            <div class="mt-4 text-sm font-bold"></div>
+          </el-page-header>
+          <!-- lowerUsers 空数据处理 -->
+          <el-empty v-if="lowerUsersByUser.length==0" :image-size="200"/>
+          <li v-else v-for="(item, index) in lowerUsersByUser" :key="item.id">
+            <el-divider v-if="index!=0" border-style="dashed"/>
+            <div class="users-item">
+              <el-image
+                  :src="getImageUrl(item.avatar)"
+                  :preview-src-list="[getImageUrl(item.avatar)]"
+                  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.username }}</div>
+                <div class="user-date">时间：{{ item.created_at }}</div>
+              </div>
+            </div>
+          </li>
+          <el-divider v-if="scrollLowerUsersByUser" border-style="dashed" content-position="center">到底了~</el-divider>
+        </ul>
       </el-drawer>
 
     </div>
@@ -119,7 +161,7 @@
 </template>
 
 <script setup>
-import {ref, onMounted, nextTick} from 'vue'
+import {ref, onMounted, nextTick, reactive} from 'vue'
 import {useRouter} from 'vue-router'
 import {useUserStore} from '@/stores/user'
 import {ElMessage} from 'element-plus'
@@ -148,7 +190,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}`// 测试用
 }
 
 // 生成二维码
@@ -204,33 +246,43 @@ const copyLink = async () => {
 }
 
 // 查看下级用户
-const scrollLowerUsers = ref(false)
+const canMultiLevel = ref(false) // 是否有权查看更多级用户
-const lowerUsers = ref([])
+const showScrollerLowerUsersByUser = ref(false) // 一二级切换
+const scrollLowerUsers = ref(false) // 一级是否继续滚动
+const scrollLowerUsersByUser = ref(false) // 二级是否继续滚动
+
+const lowerUsers = ref([]) // 一级下级
+const currentUser = ref({}) // 二级当前选中
+const lowerUsersByUser = ref([]) // 二级下级
+
+// 一级传参
 const params = {
   page: 1,
   size: 10
 }
-const pages = ref(0)
 
+// 二级传参
+const paramsByUser = {
+  page: 1,
+  size: 10,
+  user_id: ''
+}
+
+const pages = ref(1)
+const pagesByUser = ref(1)
+
+// 打开查看下级用户抽屉
 const handleLowerUser = async () => {
+  // 判断是否为*代理查看下下级用户
+  var role = JSON.parse(localStorage.getItem('role'))
+  if (role.distribution || (role.user_type == 'agent' || role.user_type == 'agent_directly')) {
+    canMultiLevel.value = true
+  }
   lowerUsers.value = []
   drawerLowerUsers.value = true
 }
 
-const loadScrollerLowerUsers = async () => {
+// 请求一级用户
-  if (scrollLowerUsers.value) {
-    return
-  }
-  params.page += 1
-  await requestLowerUsers(params)
-}
-
-const closeScrollerLowerUsers = () => {
-  lowerUsers.value = []
-  params.page = 0
-  scrollLowerUsers.value = false
-}
-
 const requestLowerUsers = async (params) => {
   await distributionAPI.getLowerUsers(params).then((res) => {
     lowerUsers.value = lowerUsers.value.concat(res.data.data)
@@ -241,6 +293,57 @@ const requestLowerUsers = async (params) => {
   })
 }
 
+// 请求二级用户
+const requestLowerUsersByUser = async (params) => {
+  await distributionAPI.getLowerUsers(params).then((res) => {
+    lowerUsersByUser.value = lowerUsersByUser.value.concat(res.data.data)
+    pagesByUser.value = res.data.pagination.pages
+    if (params.page >= pagesByUser.value) {
+      scrollLowerUsersByUser.value = true
+    }
+  })
+}
+
+// 一级分页请求查看
+const loadScrollerLowerUsers = async () => {
+  if (scrollLowerUsers.value) {
+    return
+  }
+  params.page += 1
+  await requestLowerUsers(params)
+}
+
+// 二级分页请求查看
+const loadScrollerLowerUsersByUser = async () => {
+  if (scrollLowerUsersByUser.value) {
+    return
+  }
+  paramsByUser.page += 1
+  await requestLowerUsersByUser(paramsByUser)
+}
+
+// 查看二级用户
+const handleLowerUserByUserId = async (item) => {
+  // 是否有权查看二级
+  if (canMultiLevel.value) {
+    paramsByUser.user_id = item.user_id
+    currentUser.value = item
+    await requestLowerUsersByUser(paramsByUser)
+    showScrollerLowerUsersByUser.value = true
+  }
+}
+
+const onBack = () => {
+  showScrollerLowerUsersByUser.value = false
+}
+
+// 关闭查看下级用户抽屉
+const closeScrollerLowerUsers = () => {
+  lowerUsers.value = []
+  params.page = 0
+  scrollLowerUsers.value = false
+}
+
 
 // 生命周期
 onMounted(() => {
@@ -415,7 +518,7 @@ onMounted(() => {
 
 .users-list {
   height: 100%;
-  padding: 0;
+  padding: 0 0 0 10px;;
   margin: 0;
   list-style: none;
 }

src/views/MyProfile.vue

@@ -25,7 +25,13 @@
         <template v-if="userStore.isAuthenticated">
           <span class="username">{{ userStore.user?.username || '用户' }}</span>
           <div class="user-role">
-            <el-tag type="primary">代理</el-tag>
+            <template v-if="accountInfo.distribution">
+              <el-tag v-if="accountInfo.user_type==='agent_directly'" type="primary">直营代理</el-tag>
+              <el-tag v-if="accountInfo.user_type==='directly_operated'" type="primary">直营商户</el-tag>
+              <el-tag v-if="accountInfo.user_type==='agent'" type="primary">代理</el-tag>
+              <el-tag v-if="accountInfo.user_type==='user'" type="primary">融豆商户</el-tag>
+            </template>
+            <el-tag v-else type="primary">普通用户</el-tag>
           </div>
           <!--          <button class="logout-btn" @click="handleLogout">退出登录</button>-->
         </template>
@@ -198,6 +204,11 @@ export default {
               balance: response.data.user?.balance || '0.00',
               is_distribute: response.data.user?.is_distribute || false
             };
+            // 存储用户角色
+            localStorage.setItem('role', JSON.stringify({
+              "distribution": accountInfo.value.distribution,
+              "user_type": accountInfo.value.user_type
+            }));
             // 确保加载头像
             if (response.data.user?.avatar) {
               // 使用getImageUrl处理头像路径
@@ -446,7 +457,6 @@ export default {
         avatarUrl.value = userStore.user.avatar;
       }
       loadAccountInfo();
-
     });
 
     return {