feat(新页面): 邀请BD页和政策页

src/api/bdCenter.js

@@ -71,7 +71,7 @@ export const withdrawApply = async (data) => {
   }
 }
 
-// 查询BD成员账单列表
+// 查询BD/BDLearer 成员账单列表
 export const getBdMemberBillList = async (type) => {
   try {
     const response = await get(`/team/bd/member-bill/list?type=${type}`)
@@ -95,13 +95,13 @@ export const getBdHistory = async () => {
   }
 }
 
-// 查询BD Leader历史记录
-export const getBdLeaderHistory = async () => {
+// 查询BD历史记录详情（More页面）
+export const getBdHistoryMore = async (billBelong) => {
   try {
-    const response = await get(`/team/bd/leader/history`)
+    const response = await get(`/team/bd/history/more?billBelong=${billBelong}`)
     return response
   } catch (error) {
-    console.error('Failed to fetch BD leader history:', error)
+    console.error('Failed to fetch BD history more:', error)
     console.error('error:' + error.response.errorMsg)
     throw error
   }

src/api/bdLeaderCenter.js

@@ -0,0 +1,61 @@
+import { get, post } from '../utils/http.js'
+
+// 获取我邀请的BD列表
+export const invitedList = async () => {
+  try {
+    const response = await get(`/team/bd/invite-bd-message-own`)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch get my BD:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 邀请成为BD
+export const inviteToBeBD = async (data) => {
+  try {
+    const response = await post(`/team/bd/invite-bd`, data)
+    return response
+  } catch (error) {
+    console.error('Failed to invite to be BD:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 处理邀请(取消邀请)
+export const handleInvite = async (data) => {
+  try {
+    const response = await post(`/team/bd/invite-bd-message-process`, data)
+    return response
+  } catch (error) {
+    console.error('Failed to handle invite:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 查询BD Leader历史记录
+export const getBdLeaderHistory = async () => {
+  try {
+    const response = await get(`/team/bd/leader/history`)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch BD leader history:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 查询BD Leader历史记录详情（More页面）
+export const getBdLeaderHistoryMore = async (billBelong) => {
+  try {
+    const response = await get(`/team/bd/leader/history/more?billBelong=${billBelong}`)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch BD leader history more:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}

src/router/index.js

@@ -287,6 +287,18 @@ const router = createRouter({
       component: () => import('../views/BDLeaderCenter/index.vue'),
       meta: { requiresAuth: true },
     },
+    {
+      path: '/invite-bd',
+      name: 'invite-bd',
+      component: () => import('../views/BDLeaderCenter/inviteBD.vue'),
+      meta: { requiresAuth: true },
+    },
+    {
+      path: '/policy',
+      name: 'policy',
+      component: () => import('../views/BDCenter/policy.vue'),
+      meta: { requiresAuth: true },
+    },
   ],
 })
 

src/utils/permissionManager.js

@@ -78,10 +78,15 @@ export const ROLE_PERMISSIONS = {
     '/platform-salary',
     '/available-income', //操作收益页
     '/income-details', //操作结果页
+    '/policy', //政策页
   ],
 
   // BD Leader (商务拓展领导)
-  [USER_ROLES.BDLEADER]: [...[USER_ROLES.BD], PAGES.BD_LEADER_CENTER],
+  [USER_ROLES.BDLEADER]: [
+    PAGES.BD_LEADER_CENTER,
+    ...[USER_ROLES.BD],
+    '/invite-bd', //邀请成为BD
+  ],
 
   // Anchor (主播)
   [USER_ROLES.ANCHOR]: [

src/views/BDCenter/inviteAgency.vue

@@ -27,7 +27,7 @@
             type="text"
             name=""
             id=""
-            placeholder="Please enter the host lD"
+            placeholder="Please enter the user lD"
             @keyup.enter="handleEnterPress"
             @input="handleInputChange"
             style="
@@ -238,7 +238,7 @@ const handleInputChange = () => {
 
 // 回车搜索
 const handleEnterPress = async () => {
-  console.log('充值目标用户id：', searchQuery.value)
+  console.log('搜索用户id：', searchQuery.value)
   searchResults.value = []
   selectedUser.value = {}
   disInvite.value = true
@@ -328,6 +328,12 @@ onMounted(() => {
   position: relative;
 }
 
+input::placeholder {
+  font-weight: bold;
+  font-size: 0.7em;
+  color: rgba(0, 0, 0, 0.4);
+}
+
 .invite-btn {
   padding: 10px 12px;
   border-radius: 32px;

src/views/BDCenter/policy.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="policy-container">
+    <img :src="imgUrl" alt="Policy Image" class="policy-image" />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const from = route.query.from || 'BDLead'
+
+const imgUrl = computed(() => {
+  if (from === 'BD') {
+    return new URL('/src/assets/images/BDPolicy/BDPolicy.png', import.meta.url).href
+  } else if (from === 'BDLead') {
+    return new URL('/src/assets/images/BDPolicy/BDLeaderPolicy.png', import.meta.url).href
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.policy-container {
+  height: 100vh;
+  overflow-y: auto;
+}
+
+.policy-container::-webkit-scrollbar {
+  display: none;
+}
+
+.policy-image {
+  display: block;
+  width: 100vw;
+  object-fit: cover;
+}
+</style>

src/views/BDLeaderCenter/inviteBD.vue

@@ -0,0 +1,378 @@
+<template>
+  <div class="fullPage">
+    <!-- 顶部导航 -->
+    <MobileHeader title="Invite user to become BD" />
+
+    <!-- 内容 -->
+    <div style="padding: 16px; position: relative">
+      <!-- 搜索框 -->
+      <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
+            v-model="searchQuery"
+            type="text"
+            name=""
+            id=""
+            placeholder="Please enter the user lD"
+            @keyup.enter="handleEnterPress"
+            @input="handleInputChange"
+            style="
+              width: 100%;
+              color: rgba(0, 0, 0, 0.4);
+              font-weight: 600;
+              font-size: 14px;
+              outline: none;
+              border: none;
+              background-color: transparent;
+              padding: 10px 8px;
+            "
+          />
+          <button
+            v-if="searchQuery"
+            @click="clearSearch"
+            style="
+              background: none;
+              border: none;
+              font-size: 18px;
+              color: #9ca3af;
+              cursor: pointer;
+              padding: 0 8px;
+            "
+          >
+            ×
+          </button>
+        </div>
+        <button
+          style="font-weight: 600"
+          class="invite-btn"
+          @click="inviteAgency"
+          :disabled="disInvite"
+        >
+          invite
+        </button>
+      </div>
+
+      <!-- 搜索结果 -->
+      <div
+        v-if="showUserList.length > 0"
+        style="margin: 16px 0; display: flex; flex-direction: column; gap: 12px"
+      >
+        <div
+          v-for="user in showUserList"
+          :key="user.id"
+          style="
+            position: relative;
+            background-color: white;
+            padding: 4px 10px;
+            border-radius: 12px;
+            box-sizing: border-box;
+            border: 2px solid transparent;
+            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+            transition: all 0.2s;
+          "
+          @click="toggleUserSelection(user)"
+        >
+          <!-- 绝对定位 选中框 -->
+          <div
+            style="position: absolute; inset: -2px; border-radius: 12px; z-index: 2"
+            :class="{ selected: selectedUser?.id === user.userProfile.id }"
+          ></div>
+          <!-- 绝对定位 状态显示 -->
+          <div
+            style="position: absolute; top: -2px; right: -2px"
+            v-if="user.status == 0 || user.status == 1"
+          >
+            <div
+              v-if="user.status == 0"
+              style="
+                background-image: linear-gradient(112deg, #759cff 5.66%, #3d73ff 42.49%);
+                padding: 4px 8px;
+                border-radius: 0 12px;
+                color: white;
+                font-weight: 600;
+              "
+            >
+              Pending
+            </div>
+            <div
+              v-if="user.status == 1"
+              style="
+                background-image: linear-gradient(112deg, #75ff98 5.66%, #3dff54 42.49%);
+                padding: 4px 8px;
+                border-radius: 0 12px;
+                color: white;
+                font-weight: 600;
+              "
+            >
+              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;
+                  aspect-ratio: 1/1;
+                  border-radius: 25px;
+                  background-color: #f59e0b;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  color: white;
+                  font-size: 18px;
+                  font-weight: 600;
+                  margin-right: 12px;
+                  overflow: hidden;
+                  position: relative;
+                "
+              >
+                <img
+                  v-if="user.userProfile.userAvatar"
+                  :src="user.userProfile.userAvatar"
+                  :alt="user.userProfile.userNickname"
+                  style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 25px"
+                  @error="(e) => (e.target.style.display = 'none')"
+                />
+                <span
+                  v-if="!user.userProfile.userAvatar"
+                  style="color: white; font-size: 18px; font-weight: 600"
+                  >{{ user.userProfile.userNickname.charAt(0) }}</span
+                >
+              </div>
+              <div>
+                <div style="margin-bottom: 4px; font-size: 16px; font-weight: 700">
+                  {{ user.userProfile.userNickname }}
+                </div>
+                <div style="font-size: 14px; color: rgba(0, 0, 0, 0.4); font-weight: 500">
+                  ID: {{ user.userProfile.account }}
+                </div>
+              </div>
+            </div>
+            <div style="display: flex; justify-content: center; align-items: center">
+              <div
+                v-if="user.status == 0"
+                style="
+                  padding: 4px 8px;
+                  border-radius: 32px;
+                  background-color: red;
+                  color: white;
+                  font-size: 16px;
+                  font-weight: 600;
+                  z-index: 5;
+                "
+                @click="cancelInviteAgency(user.id)"
+              >
+                Cancel
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import MobileHeader from '@/components/MobileHeader.vue'
+import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js'
+import { searchUser } from '@/api/userInfo'
+import {
+  invitedList, // 获取已邀请列表
+  inviteToBeBD, // 邀请代理
+  handleInvite, // 处理邀请(取消邀请)
+} from '@/api/bdLeaderCenter.js'
+import { computed, onMounted, ref } from 'vue'
+
+const searchQuery = ref('') //关键词
+const invitedUserList = ref([]) //已邀请列表
+const searchResults = ref([]) //搜索结果
+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 = {}
+    disInvite.value = true
+    getInvitedList() //重新获取已邀请列表
+  }
+}
+
+// 回车搜索
+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) => {
+  console.log('选择用户:', user)
+
+  if (selectedUser.value?.id == user.userProfile.id) {
+    selectedUser.value = {}
+    disInvite.value = true
+  } else {
+    selectedUser.value = user.userProfile
+    if (user.status == 0 || user.status == 1) {
+      disInvite.value = true
+    } else {
+      disInvite.value = false
+    }
+  }
+}
+
+// 邀请代理
+const inviteAgency = async () => {
+  console.log('点击邀请代理')
+  try {
+    let data = { inviteUserId: selectedUser.value.id }
+    const resInvite = await inviteToBeBD(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)
+  let data = { id: userId, status: 0 }
+  try {
+    const resCancel = await handleInvite(data)
+    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>
+* {
+  color: rgba(0, 0, 0, 0.8);
+  font-family: 'SF Pro Text';
+}
+
+input::placeholder {
+  font-weight: bold;
+  font-size: 0.7em;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.fullPage {
+  width: 100vw;
+  min-height: 100vh;
+  background-color: #ffffff;
+  background-image: url(../../assets/images/secondBg.png);
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+  position: relative;
+}
+
+.invite-btn {
+  padding: 10px 12px;
+  border-radius: 32px;
+  background: linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%);
+  color: white;
+  border: none;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.invite-btn:not(:disabled):active {
+  background: linear-gradient(135deg, #b080ff 2.82%, #6302ff 99.15%);
+}
+
+.invite-btn:disabled {
+  background: #d1d5db;
+  cursor: not-allowed;
+}
+
+.selected {
+  border: 2px solid #8b5cf6 !important;
+}
+
+@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>