feat(团队成员页): 新增样式并对接接口

src/views/TeamMemberView.vue

@@ -3,6 +3,74 @@
     <MobileHeader :title="`Team Member (${membersTotal})`" />
 
     <div class="content">
+      <!-- 搜索框 -->
+      <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px">
+        <div
+          style="
+            flex: 1;
+            border-radius: 32px;
+            border: 1px solid #fff;
+
+            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+            padding: 0 8px;
+
+            display: flex;
+            align-items: center;
+            height: max-content;
+          "
+        >
+          <img src="../assets/icon/search.png" alt="" width="24px" style="opacity: 0.6" />
+          <input
+            type="text"
+            name=""
+            id=""
+            placeholder="Please enter the host lD"
+            style="
+              width: 100%;
+              outline: none;
+              border: none;
+              background-color: transparent;
+              color: black;
+              padding: 10px 8px;
+            "
+            v-model="targetUserId"
+          />
+        </div>
+        <div style="font-weight: 600">Cancel</div>
+      </div>
+
+      <!-- 团队信息 -->
+      <div
+        style="
+          background-color: white;
+          padding: 16px;
+          border-radius: 12px;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
+          margin-bottom: 10px;
+        "
+      >
+        <div style="display: flex">
+          <div style="display: flex; flex-direction: column; align-items: center; gap: 5px">
+            <div class="team-des-title">Agent number</div>
+            <div class="team-des-value">{{ agentMonthTarget.agentQuantity }}</div>
+          </div>
+        </div>
+
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 5px">
+          <div class="team-des-title">Team target</div>
+          <div class="team-des-value">${{ agentMonthTarget.thisMonthTotalTarget }}</div>
+        </div>
+
+        <div style="display: flex; justify-content: flex-end">
+          <div style="display: flex; flex-direction: column; align-items: center; gap: 5px">
+            <div class="team-des-title">My</div>
+            <div class="team-des-value">{{ agentMonthTarget.foreverPercentage }}%</div>
+          </div>
+        </div>
+      </div>
+
       <!-- 加载状态 -->
       <div v-if="loading" class="loading-container">
         <div class="loading-spinner"></div>
@@ -10,51 +78,118 @@
       </div>
 
       <!-- 成员列表 -->
-      <div v-else-if="members.length > 0" class="member-list" ref="memberListRef">
+      <div v-if="members.length > 0" class="member-list" ref="memberListRef">
         <div
           v-for="member in members"
           :key="member.id"
-          class="member-item"
+          style="
+            background-color: white;
+            padding: 16px;
+            border-radius: 12px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+          "
         >
-          <div class="member-info">
+          <div style="width: 70%; display: flex; align-items: center">
-            <div class="member-avatar">
+            <div
+              style="
+                position: relative;
+                margin-right: 12px;
+
+                width: 50px;
+                height: 50px;
+                border-radius: 25px;
+
+                background-color: #8b5cf6;
+                color: white;
+
+                font-size: 18px;
+                font-weight: 600;
+
+                display: flex;
+                align-items: center;
+                justify-content: center;
+              "
+            >
               <img
                 v-if="member.userProfile.userAvatar"
                 :src="member.userProfile.userAvatar"
                 :alt="member.userProfile.userNickname"
                 @error="handleImageError"
+                style="width: 100%; height: 100%; border-radius: 50%; object-fit: cover"
               />
-              <span v-else>{{ member.userProfile.userNickname.charAt(0) }}</span>
+              <span
+                v-else
+                style="
+                  position: absolute;
+                  top: 50%;
+                  left: 50%;
+                  transform: translate(-50%, -50%);
+                  text-transform: uppercase;
+                "
+                >{{ member.userProfile.userNickname.charAt(0) }}</span
+              >
             </div>
-            <div class="member-details">
+            <div style="width: calc(100% - 62px); display: flex; flex-direction: column; gap: 4px">
-              <h4>{{ member.userProfile.userNickname }}</h4>
+              <div
-              <p>ID: {{ formatAccount(member.userProfile) }}</p>
+                style="
+                  font-weight: 700;
+                  width: 100%;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                "
+              >
+                {{ member.userProfile.userNickname }}
+              </div>
+              <div style="color: rgba(0, 0, 0, 0.4); font-weight: 500">
+                ID: {{ formatAccount(member.userProfile) }}
+              </div>
+            </div>
+          </div>
+          <div style="width: 30%" v-if="member.hostQuantity || member.billBalance">
+            <div v-if="member.billBalance" style="color: rgba(0, 0, 0, 0.4); font-weight: 510">
+              ${{ member.billBalance }}
+            </div>
+            <div
+              style="
+                color: rgba(0, 0, 0, 0.4);
+                font-weight: 510;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                width: 100%;
+                font-size: 0.9em;
+              "
+              v-if="member.hostQuantity"
+            >
+              Host number:{{ member.hostQuantity }}
             </div>
           </div>
-
-<!--          <button
-            class="delete-btn"
-            @click="handleDeleteMember(member)"
-            :disabled="deletingMemberId === member.id"
-          >
-            <span v-if="deletingMemberId === member.id">⏳</span>
-            <span v-else>🗑️</span>
-          </button>-->
         </div>
 
-        <!-- 加载更多状态 -->
+        <!-- 加载提示 -->
-        <div v-if="loadingMore" class="loading-more">
+        <div>
-          <div class="loading-spinner small"></div>
+          <!-- 加载更多状态 -->
-          <p>Loading more...</p>
+          <div v-if="loadingMore" class="loading-more">
-        </div>
+            <div class="loading-spinner small"></div>
+            <p>Loading more...</p>
+          </div>
 
-        <!-- 没有更多数据提示 -->
+          <!-- 没有更多数据提示 -->
-        <div v-else-if="noMoreData && members.length > 0" class="no-more-data">
+          <div v-else-if="noMoreData && members.length > 0" class="no-more-data">
-          <p>No more members</p>
+            <p>No more members</p>
+          </div>
         </div>
 
         <!-- 无形的加载触发器 -->
-        <div v-if="!noMoreData && members.length > 0" ref="loadMoreTrigger" class="load-more-trigger"></div>
+        <div
+          v-if="!noMoreData && members.length > 0"
+          ref="loadMoreTrigger"
+          class="load-more-trigger"
+        ></div>
       </div>
 
       <!-- 空状态 -->
@@ -72,7 +207,10 @@
         </div>
 
         <div class="modal-body">
-          <p>Are you sure you want to remove <strong>{{ memberToDelete?.userProfile?.userNickname }}</strong> from the team?</p>
+          <p>
+            Are you sure you want to remove
+            <strong>{{ memberToDelete?.userProfile?.userNickname }}</strong> from the team?
+          </p>
           <p class="warning-text">This action cannot be undone.</p>
         </div>
 
@@ -93,10 +231,10 @@ import {
   getTeamMembers,
   getBdAgentList,
   deleteMember as deleteMemberApi,
-  getAgentMonthTarget
+  getAgentMonthTarget,
 } from '../api/teamBill.js'
-import {getTeamId} from "@/utils/userStore.js";
+import { getTeamId } from '@/utils/userStore.js'
-import {showError} from "@/utils/toast.js";
+import { showError } from '@/utils/toast.js'
 
 const route = useRoute()
 const loading = ref(false)
@@ -117,6 +255,8 @@ const loadMoreTrigger = ref(null)
 // 检查是否来自BD Center
 const isFromBdCenter = ref(false)
 
+const agentMonthTarget = ref({})
+
 // 获取团队成员列表
 const fetchTeamMembers = async (isLoadMore = false) => {
   try {
@@ -171,7 +311,7 @@ const fetchTeamMembers = async (isLoadMore = false) => {
         newCount: newMembers.length,
         totalCount: members.value.length,
         lastId: lastId.value,
-        noMoreData: noMoreData.value
+        noMoreData: noMoreData.value,
       })
     } else {
       if (!isLoadMore) {
@@ -227,7 +367,7 @@ const confirmDelete = async () => {
     await deleteMemberApi([memberToDelete.value.id])
 
     // 从列表中移除成员
-    const index = members.value.findIndex(m => m.id === memberToDelete.value.id)
+    const index = members.value.findIndex((m) => m.id === memberToDelete.value.id)
     if (index > -1) {
       members.value.splice(index, 1)
     }
@@ -258,7 +398,7 @@ const handleScroll = () => {
     scrollTop,
     windowHeight,
     documentHeight,
-    distanceToBottom: documentHeight - (scrollTop + windowHeight)
+    distanceToBottom: documentHeight - (scrollTop + windowHeight),
   })
 
   // 当滚动到距离底部100px时开始加载
@@ -283,7 +423,7 @@ const setupIntersectionObserver = () => {
       }
     },
     {
-      rootMargin: '100px'
+      rootMargin: '100px',
     }
   )
 
@@ -291,10 +431,19 @@ const setupIntersectionObserver = () => {
   console.log('Intersection observer set up')
 }
 
+const getAgentMonth = async () => {
+  const res = await getAgentMonthTarget()
+  if (res.status === true) {
+    agentMonthTarget.value = res.body
+  }
+}
+
 // 组件挂载时获取数据
 onMounted(async () => {
   console.log('Component mounted')
 
+  getAgentMonth()
+
   // 检查是否来自BD Center
   isFromBdCenter.value = route.query.source === 'bd-center'
   membersTotal.value = parseInt(route.query.members)
@@ -319,7 +468,7 @@ onMounted(async () => {
     console.log('Page height check:', {
       windowHeight,
       documentHeight,
-      hasScroll: documentHeight > windowHeight
+      hasScroll: documentHeight > windowHeight,
     })
 
     // 如果页面没有滚动条，但是数据不多，可能需要加载更多
@@ -342,6 +491,25 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
+* {
+  color: rgba(0, 0, 0, 0.8);
+  font-family: 'SF Pro Text';
+}
+
+input::placeholder {
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.team-des-title {
+  font-weight: 600;
+}
+
+.team-des-value {
+  color: rgba(0, 0, 0, 0.4);
+  font-weight: 500;
+}
+
 .team-member {
   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
   min-height: 100vh;
@@ -367,7 +535,7 @@ onUnmounted(() => {
   width: 32px;
   height: 32px;
   border: 3px solid #f3f3f3;
-  border-top: 3px solid #8B5CF6;
+  border-top: 3px solid #8b5cf6;
   border-radius: 50%;
   animation: spin 1s linear infinite;
   margin-bottom: 12px;
@@ -381,8 +549,12 @@ onUnmounted(() => {
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
+  0% {
-  100% { transform: rotate(360deg); }
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 /* 加载更多状态 */
@@ -422,83 +594,11 @@ onUnmounted(() => {
   gap: 12px;
 }
 
-.member-item {
-  background-color: white;
-  padding: 16px;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  transition: all 0.2s;
-}
-
-.member-item:hover {
-  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-}
-
-.member-info {
-  display: flex;
-  align-items: center;
-  flex: 1;
-}
-
-.member-avatar {
-  width: 50px;
-  height: 50px;
-  border-radius: 25px;
-  background-color: #8B5CF6;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-size: 18px;
-  font-weight: 600;
-  margin-right: 12px;
-  overflow: hidden;
-  position: relative;
-}
-
-.member-avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.member-avatar span {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  text-transform: uppercase;
-}
-
-.member-details {
-  flex: 1;
-}
-
-.member-details h4 {
-  margin: 0 0 4px 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-  max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.member-details p {
-  margin: 0;
-  font-size: 14px;
-  color: #666;
-}
-
 /* 删除按钮 */
 .delete-btn {
-  background-color: #FEE2E2;
+  background-color: #fee2e2;
-  border: 1px solid #FECACA;
+  border: 1px solid #fecaca;
-  color: #DC2626;
+  color: #dc2626;
   padding: 8px;
   border-radius: 8px;
   cursor: pointer;
@@ -512,8 +612,8 @@ onUnmounted(() => {
 }
 
 .delete-btn:hover:not(:disabled) {
-  background-color: #FECACA;
+  background-color: #fecaca;
-  border-color: #FCA5A5;
+  border-color: #fca5a5;
 }
 
 .delete-btn:disabled {
@@ -594,7 +694,7 @@ onUnmounted(() => {
 }
 
 .warning-text {
-  color: #DC2626 !important;
+  color: #dc2626 !important;
   font-weight: 500;
 }
 
@@ -617,21 +717,21 @@ onUnmounted(() => {
 }
 
 .cancel-btn {
-  background-color: #F3F4F6;
+  background-color: #f3f4f6;
   color: #374151;
 }
 
 .cancel-btn:hover {
-  background-color: #E5E7EB;
+  background-color: #e5e7eb;
 }
 
 .confirm-btn {
-  background-color: #DC2626;
+  background-color: #dc2626;
   color: white;
 }
 
 .confirm-btn:hover {
-  background-color: #B91C1C;
+  background-color: #b91c1c;
 }
 
 .cancel-btn:active,
@@ -641,14 +741,28 @@ onUnmounted(() => {
 
 /* 响应式设计 */
 @media (max-width: 480px) {
-  .member-details h4 {
-    max-width: 150px;
-  }
-
   .delete-btn {
     width: 36px;
     height: 36px;
     font-size: 14px;
   }
 }
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 12px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
 </style>