feat(新页面): 邀请BDLeader页面

src/router/index.js

@@ -269,6 +269,12 @@ const router = createRouter({
       component: () => import('../views/Invitation/inviteBD.vue'),
       meta: { requiresAuth: true },
     },
+    {
+      path: '/invite-bd-leader',
+      name: 'invite-bd-leader',
+      component: () => import('../views/Invitation/inviteBDLeader.vue'),
+      meta: { requiresAuth: true },
+    },
     {
       path: '/policy',
       name: 'policy',

src/utils/permissionManager.js

@@ -35,14 +35,22 @@ export const PAGES = {
   MAP: '/map',
 }
 
+// 邀请页面
+const INVITATION_PAGES = {
+  INVITE_USER: '/invitation-to-register', //邀请新用户（邀请码）
+  INVITE_AGENCY: '/invite-agency', //邀请代理
+  INVITE_BD: '/invite-bd', //邀请成为BD
+  INVITE_BDLEADER: '/invite-bd-leader', //邀请成为BDLeader
+}
+
 // 活动页面
 const ACTIVITIES = [
+  INVITATION_PAGES.INVITE_USER, //邀请新用户（邀请码）
   '/top-list', //排行榜
   '/weekly-star', //每周明星
   '/ranking', //总排行榜
   '/lottery', // 抽奖活动页面
   '/recharge-reward', //充值奖励页面
-  '/invitation-to-register', //邀请新用户注册页面
   '/revolution-unity-day', //孟加拉国民革命与团结日
   '/heroes-day', //印度尼西亚英雄日
   '/independence-day', //巴勒斯坦独立日
@@ -82,7 +90,7 @@ export const ROLE_PERMISSIONS = {
     PAGES.TRANSFER, // 转账功能
     PAGES.EXCHANGE, // 兑换功能
     PAGES.MESSAGE, // 消息功能
-    '/invite-agency', //邀请代理
+    INVITATION_PAGES.INVITE_AGENCY, //邀请代理
     '/team-member',
     '/history-salary',
     '/available-income', //操作收益页
@@ -90,19 +98,12 @@ export const ROLE_PERMISSIONS = {
     '/policy', //政策页
   ],
 
-  // BD Leader (商务拓展领导)
-  // [USER_ROLES.BDLEADER]: [
-  //   PAGES.BD_LEADER_CENTER,
-  //   ...[USER_ROLES.BD],
-  //   '/invite-bd', //邀请成为BD
-  // ],
-
   // BD Leader (商务拓展领导)
   get [USER_ROLES.BDLEADER]() {
     return [
-      PAGES.BD_LEADER_CENTER,
+      PAGES.BD_LEADER_CENTER, // 主页面
+      INVITATION_PAGES.INVITE_BD, //邀请成为BD
       ...this[USER_ROLES.BD],
-      '/invite-bd', //邀请成为BD
     ]
   },
 
@@ -123,13 +124,14 @@ export const ROLE_PERMISSIONS = {
   // Admin（管理员）
   [USER_ROLES.ADMIN]: [
     PAGES.ADMIN_CENTER, //管理员中心
+    INVITATION_PAGES.INVITE_BDLEADER, //邀请成为BDLeader
+    INVITATION_PAGES.INVITE_BD, //邀请成为BD
+    INVITATION_PAGES.INVITE_AGENCY, //邀请代理
     '/item-distribution', //赠送商品页面
     '/my-BDLeader-teams', //我的BDLeader团队页面
     '/my-BD-teams', //我的BD团队页面
     '/my-agency-teams', //我的代理团队页面
     '/my-recharge-agency', //我的金币代理团队页面
-    '/invite-bd', //邀请成为BD
-    '/invite-agency', //邀请代理
   ],
 
   // Guest (访客/申请者)

src/views/Invitation/inviteBDLeader.vue

@@ -0,0 +1,413 @@
+<template>
+  <div class="fullPage">
+    <!-- 顶部导航 -->
+    <GeneralHeader
+      :showLanguageList="true"
+      title="Invite User To Become BD Leader"
+      color="black"
+      style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
+    />
+
+    <!-- 内容 -->
+    <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="t('enter_user_id')"
+            @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"
+        >
+          {{ t('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;
+              "
+            >
+              {{ t('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;
+              "
+            >
+              {{ t('success') }}
+            </div>
+          </div>
+          <!-- 用户信息 -->
+          <div style="font-weight: 600">{{ t('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)"
+              >
+                {{ t('cancel') }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 无数据提示 -->
+      <div v-else class="no-data">
+        {{ t('no_users_found') }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { setDocumentDirection } from '@/locales/i18n'
+import { showError, showSuccess } from '@/utils/toast.js'
+
+import { searchUser } from '@/api/userInfo'
+// import {
+//   invitedList, // 获取已邀请列表
+//   inviteToBeBD, // 邀请代理
+//   cancelInvite, // 处理邀请(取消邀请)
+// } from '@/api/bdLeaderCenter.js'
+
+import GeneralHeader from '@/components/GeneralHeader.vue'
+
+const { t, locale } = useI18n()
+
+// 监听语言变化并设置文档方向
+locale.value && setDocumentDirection(locale.value)
+
+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(t('invitation_submitted'))
+  //   }
+  // } catch (error) {
+  //   showError(error.response?.errorMsg || t('something_went_wrong'))
+  // }
+  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(t('application_cancelled'))
+  //     getInvitedList()
+  //   }
+  // } catch (error) {
+  //   let errorMsg =
+  //     error.response?.errorMsg?.replace(/^.*\]\s*/, '') || t('cancellation_failed_try_again')
+  //   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;
+}
+
+.no-data {
+  text-align: center;
+  padding: 40px 20px;
+  color: #666;
+}
+
+@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;
+  }
+}
+
+/* RTL支持 */
+[dir='rtl'] .avatar {
+  margin-right: 0;
+  margin-left: 12px;
+}
+
+[dir='rtl'] .user-info {
+  text-align: right;
+}
+</style>