feat(邀请代理页): 对接接口

src/api/bdCenter.js

@@ -0,0 +1,61 @@
+import { get, post } from '../utils/http.js'
+
+// 获取我邀请的用户
+export const invitedList = async () => {
+  try {
+    const response = await get(`/team/bd/invite-message-own`)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch get my agency:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 获取邀请我的用户
+export const beInvitedList = async () => {
+  try {
+    const response = await get(`/team/bd/invite-message`)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch get my message:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 邀请成为代理
+export const inviteToBeAgency = async (data) => {
+  try {
+    const response = await post(`/team/bd/invite-agent`, data)
+    return response
+  } catch (error) {
+    console.error('Failed to invite to be agency:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 处理邀请
+export const handleInvite = async (data) => {
+  try {
+    const response = await post(`/team/bd/invite-message-process`, data)
+    return response
+  } catch (error) {
+    console.error('Failed to handle invite:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+//取消邀请
+export const cancelInvite = async (userId) => {
+  try {
+    const response = await post(`/team/bd/invite-agent-cancel/${userId}`)
+    return response
+  } catch (error) {
+    console.error('Failed to cancel invite:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}

src/views/BDCenter/inviteAgency.vue

@@ -68,11 +68,11 @@
 
       <!-- 搜索结果 -->
       <div
-        v-if="searchResults.length > 0"
+        v-if="showUserList.length > 0"
         style="margin: 16px 0; display: flex; flex-direction: column; gap: 12px"
       >
         <div
-          v-for="user in searchResults"
+          v-for="user in showUserList"
           :key="user.id"
           style="
             position: relative;
@@ -86,13 +86,18 @@
           "
           @click="toggleUserSelection(user)"
         >
+          <!-- 绝对定位 选中框 -->
           <div
             style="position: absolute; inset: -2px; border-radius: 12px; z-index: 2"
-            :class="{ selected: selectedUser?.id === user.id }"
+            :class="{ selected: selectedUser?.id === user.userProfile.id }"
           ></div>
-          <div style="position: absolute; top: -2px; right: -2px">
+          <!-- 绝对定位 状态显示 -->
+          <div
+            style="position: absolute; top: -2px; right: -2px"
+            v-if="user.status == 0 || user.status == 1"
+          >
             <div
-              v-if="user.inviteStatus == 1 && user.inviteRes == 0"
+              v-if="user.status == 0"
               style="
                 background-image: linear-gradient(112deg, #759cff 5.66%, #3d73ff 42.49%);
                 padding: 4px 8px;
@@ -104,7 +109,7 @@
               Pending
             </div>
             <div
-              v-if="user.inviteStatus == 1 && user.inviteRes == 1"
+              v-if="user.status == 1"
               style="
                 background-image: linear-gradient(112deg, #75ff98 5.66%, #3dff54 42.49%);
                 padding: 4px 8px;
@@ -116,13 +121,14 @@
               Success
             </div>
           </div>
+          <!-- 用户信息 -->
           <div style="font-weight: 600">Invited user information:</div>
           <div style="display: flex; align-items: center; justify-content: space-between">
             <div style="display: flex; align-items: center; flex: 1">
               <div
                 style="
                   width: 50px;
-                  height: 50px;
+                  aspect-ratio: 1/1;
                   border-radius: 25px;
                   background-color: #f59e0b;
                   display: flex;
@@ -137,30 +143,30 @@
                 "
               >
                 <img
-                  v-if="user.userAvatar"
+                  v-if="user.userProfile.userAvatar"
-                  :src="user.userAvatar"
+                  :src="user.userProfile.userAvatar"
-                  :alt="user.name"
+                  :alt="user.userProfile.userNickname"
-                  style="width: 100%; height: 100%; object-fit: cover; border-radius: 25px"
+                  style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 25px"
                   @error="(e) => (e.target.style.display = 'none')"
                 />
                 <span
-                  v-if="!user.userAvatar"
+                  v-if="!user.userProfile.userAvatar"
                   style="color: white; font-size: 18px; font-weight: 600"
-                  >{{ user.name.charAt(0) }}</span
+                  >{{ user.userProfile.userNickname.charAt(0) }}</span
                 >
               </div>
               <div>
                 <div style="margin-bottom: 4px; font-size: 16px; font-weight: 700">
-                  {{ user.name }}
+                  {{ user.userProfile.userNickname }}
                 </div>
                 <div style="font-size: 14px; color: rgba(0, 0, 0, 0.4); font-weight: 500">
-                  ID: {{ user.account }}
+                  ID: {{ user.userProfile.account }}
                 </div>
               </div>
             </div>
             <div style="display: flex; justify-content: center; align-items: center">
               <div
-                v-if="user.inviteStatus == 1 && user.inviteRes == 0"
+                v-if="user.status == 0"
                 style="
                   padding: 4px 8px;
                   border-radius: 32px;
@@ -168,7 +174,9 @@
                   color: white;
                   font-size: 16px;
                   font-weight: 600;
+                  z-index: 5;
                 "
+                @click="cancelInviteAgency(user.id)"
               >
                 Cancel
               </div>
@@ -183,72 +191,125 @@
 <script setup>
 import MobileHeader from '@/components/MobileHeader.vue'
 import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js'
-import { ref } from 'vue'
+import { searchUser } from '@/api/userInfo'
+import {
+  invitedList,
+  beInvitedList,
+  inviteToBeAgency,
+  handleInvite,
+  cancelInvite,
+} from '@/api/bdCenter.js'
+import { computed, onMounted, ref } from 'vue'
 
 const searchQuery = ref('') //关键词
-const searchResults = ref([
+const invitedUserList = ref([]) //已邀请列表
-  {
+const searchResults = ref([]) //搜索结果
-    id: 1,
-    account: 3265454,
-    name: 'User One',
-    userAvatar: '',
-    inviteStatus: 0, //0未邀请 1已邀请
-    inviteRes: 0, //0邀请中 1邀请成功 2邀请失败
-  },
-  {
-    id: 2,
-    account: 6548465,
-    name: 'User Two',
-    userAvatar: '',
-    inviteStatus: 1, //0未邀请 1已邀请
-    inviteRes: 0, //0邀请中 1邀请成功 2邀请失败
-  },
-  {
-    id: 3,
-    account: 6548465,
-    name: 'User Three',
-    userAvatar: '',
-    inviteStatus: 1, //0未邀请 1已邀请
-    inviteRes: 1, //0邀请中 1邀请成功 2邀请失败
-  },
-]) //搜索结果
 const disInvite = ref(true) //不可邀请
 const selectedUser = ref({}) //选中的用户
 
+//展示的用户列表
+const showUserList = computed(() => {
+  if (searchQuery.value) {
+    return searchResults.value
+  } else {
+    return invitedUserList.value
+  }
+})
+
 // 清空关键词
 const clearSearch = () => {
   searchQuery.value = ''
+  searchResults.value = []
+  selectedUser.value = {}
+  disInvite.value = true
+  getInvitedList() //重新获取已邀请列表
 }
 
 // 输入框变化
 const handleInputChange = () => {
+  // 输入框为空时，清空搜索结果
   if (!searchQuery.value.trim()) {
     searchResults.value = []
-    selectedUser.value = null
+    selectedUser.value = {}
+    disInvite.value = true
+    getInvitedList() //重新获取已邀请列表
   }
 }
 
 // 回车搜索
-const handleEnterPress = () => {}
+const handleEnterPress = async () => {
+  console.log('充值目标用户id：', searchQuery.value)
+  searchResults.value = []
+  selectedUser.value = {}
+  disInvite.value = true
+  if (searchQuery.value.trim()) {
+    const resSearchUser = await searchUser(searchQuery.value)
+    if (resSearchUser.status && resSearchUser.body) {
+      let targetUserInfo = { userProfile: resSearchUser.body }
+      searchResults.value.push(targetUserInfo)
+    }
+  }
+}
 
 // 选择用户
 const toggleUserSelection = (user) => {
-  if (selectedUser.value?.id === user.id) {
+  console.log('选择用户:', user)
-    selectedUser.value = null
+
+  if (selectedUser.value?.id == user.userProfile.id) {
+    selectedUser.value = {}
     disInvite.value = true
   } else {
-    selectedUser.value = user
+    selectedUser.value = user.userProfile
-    if (selectedUser.value.inviteStatus == 0) {
+    if (user.status == 0 || user.status == 1) {
+      disInvite.value = true
+    } else {
       disInvite.value = false
     }
   }
 }
 
 // 邀请代理
-const inviteAgency = () => {
+const inviteAgency = async () => {
   console.log('点击邀请代理')
-  showSuccess('Invitation information submitted successfully!')
+  try {
+    let data = { inviteUserId: selectedUser.value.id }
+    const resInvite = await inviteToBeAgency(data)
+    if (resInvite.status) {
+      showSuccess('Invitation information submitted successfully!')
+    }
+  } catch (error) {
+    showError(error.response.errorMsg)
+  }
+  clearSearch()
 }
+
+// 获取已邀请列表
+const getInvitedList = async () => {
+  const resInvitedList = await invitedList()
+  console.log('已邀请列表:', resInvitedList)
+  if (resInvitedList.status && resInvitedList.body) {
+    invitedUserList.value = resInvitedList.body
+  }
+}
+
+// 取消邀请
+const cancelInviteAgency = async (userId) => {
+  console.log('取消邀请用户id:', userId)
+  try {
+    const resCancel = await cancelInvite(userId)
+    if (resCancel.status) {
+      showSuccess('Cancel invitation successfully!')
+      getInvitedList()
+    }
+  } catch (error) {
+    let errorMsg = error.response.errorMsg.replace(/^.*\]\s*/, '')
+    showError(errorMsg)
+  }
+}
+
+onMounted(() => {
+  getInvitedList()
+})
 </script>
 
 <style lang="scss" scoped>