[修改]

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

src/views/Distribution.vue

@@ -4,11 +4,13 @@
     <nav class="navbar">
       <div class="nav-left">
         <el-button
-          type="text" 
+            :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">
@@ -39,7 +41,9 @@
                 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>
@@ -68,6 +72,46 @@
         </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>
@@ -80,9 +124,11 @@ 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

@@ -8,7 +8,9 @@
             :src="avatarUrl"
             class="avatar-img"
         >
-          <el-icon><User /></el-icon>
+          <el-icon>
+            <User/>
+          </el-icon>
         </el-avatar>
         <el-button
             type="primary"
@@ -124,7 +126,9 @@
           :http-request="uploadAvatar"
       >
         <img v-if="newAvatar" :src="newAvatar" class="avatar-preview"/>
-        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+        <el-icon v-else class="avatar-uploader-icon">
+          <Plus/>
+        </el-icon>
       </el-upload>
       <template #footer>
         <span class="dialog-footer">
@@ -212,9 +216,7 @@ export default {
         // 判断融豆状态，为0提示，其余正常
         if (accountInfo.value.balance == 0) {
           ElMessageBox.alert(
-              '请获取融豆后，可开通此服务', '',{
-              confirmButtonText: 'OK',
-            }
+              '请获取融豆后，可开通此服务', '', {confirmButtonText: '确定',}
           )
           accountInfo.value.is_distribute = !value;
           return
@@ -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') {
@@ -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;
   }