style(团队成员页): 样式调整

src/views/TeamMemberView.vue

@@ -41,6 +41,7 @@
 
       <!-- 团队信息 -->
       <div
+        v-if="isFromBdCenter"
         style="
           background-color: white;
           padding: 16px;
@@ -92,7 +93,8 @@
             justify-content: space-between;
           "
         >
-          <div style="width: 70%; display: flex; align-items: center">
+          <!-- 用户信息 -->
+          <div style="flex: 1; display: flex; align-items: center">
             <div
               style="
                 position: relative;
@@ -149,25 +151,40 @@
               </div>
             </div>
           </div>
-          <div style="width: 30%" v-if="member.hostQuantity || member.billBalance">
+          <!-- bd展示信息 -->
-            <div v-if="member.billBalance" style="color: rgba(0, 0, 0, 0.4); font-weight: 510">
+          <div v-if="isFromBdCenter" style="width: 25%; display: flex; justify-content: flex-end">
-              ${{ member.billBalance }}
-            </div>
             <div
-              style="
+              v-if="member.hostQuantity || member.billBalance"
-                color: rgba(0, 0, 0, 0.4);
+              style="display: flex; flex-direction: column"
-                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 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>
           </div>
+          <!-- agency展示按钮 -->
+          <img
+            v-else
+            src="/src/assets/icon/trash.png"
+            alt=""
+            width="30px"
+            style="display: block"
+            @click="trash(member)"
+          />
         </div>
 
         <!-- 加载提示 -->
@@ -203,20 +220,19 @@
     <div v-if="showDeleteModal" class="modal-overlay" @click="closeDeleteModal">
       <div class="delete-modal-content" @click.stop>
         <div class="modal-header">
-          <h3>Confirm Delete</h3>
+          <h3>Tips</h3>
         </div>
 
         <div class="modal-body">
           <p>
-            Are you sure you want to remove
+            Are you sure you want to remove ID:{{ formatAccount(memberToDelete.userProfile) }} from
-            <strong>{{ memberToDelete?.userProfile?.userNickname }}</strong> from the team?
+            the team?
           </p>
-          <p class="warning-text">This action cannot be undone.</p>
         </div>
 
         <div class="modal-actions">
           <button class="cancel-btn" @click="closeDeleteModal">Cancel</button>
-          <button class="confirm-btn" @click="confirmDelete">Delete</button>
+          <button class="confirm-btn" @click="confirmDelete">Confirm</button>
         </div>
       </div>
     </div>
@@ -245,6 +261,8 @@ const showDeleteModal = ref(false)
 const memberToDelete = ref(null)
 const memberListRef = ref(null)
 
+const targetUserId = ref('') //搜索目标id
+
 // 分页相关状态
 const loadingMore = ref(false)
 const noMoreData = ref(false)
@@ -350,6 +368,12 @@ const handleImageError = (event) => {
   // event.target.nextElementSibling.style.display = 'flex'
 }
 
+// 点击删除
+const trash = (member) => {
+  showDeleteModal.value = true
+  memberToDelete.value = member
+}
+
 // 关闭删除模态框
 const closeDeleteModal = () => {
   showDeleteModal.value = false
@@ -442,12 +466,14 @@ const getAgentMonth = async () => {
 onMounted(async () => {
   console.log('Component mounted')
 
-  getAgentMonth()
-
   // 检查是否来自BD Center
   isFromBdCenter.value = route.query.source === 'bd-center'
   membersTotal.value = parseInt(route.query.members)
 
+  if (isFromBdCenter.value) {
+    getAgentMonth()
+  }
+
   await fetchTeamMembers()
 
   // 添加滚动监听
@@ -711,27 +737,24 @@ input::placeholder {
   border: none;
   border-radius: 8px;
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 700;
   cursor: pointer;
   transition: all 0.2s;
 }
 
 .cancel-btn {
-  background-color: #f3f4f6;
+  border: 1px solid #e6e6e6;
-  color: #374151;
+  background-color: #fff;
-}
+  color: rgba(0, 0, 0, 0.4);
-
-.cancel-btn:hover {
-  background-color: #e5e7eb;
 }
 
 .confirm-btn {
-  background-color: #dc2626;
+  color: rgba(255, 255, 255, 0.8);
-  color: white;
+  background: linear-gradient(
-}
+    152deg,
-
+    rgba(198, 112, 255, 0.6) 7.01%,
-.confirm-btn:hover {
+    rgba(119, 38, 255, 0.6) 92.99%
-  background-color: #b91c1c;
+  );
 }
 
 .cancel-btn:active,