feat(新页面): 邀请充值代理页面（未接接口）

src/router/index.js

@@ -94,12 +94,6 @@ const router = createRouter({
       component: () => import('../views/Wallet/Detail/InformationDetails.vue'),
       meta: { requiresAuth: true },
     },
-    {
-      path: '/invite-members',
-      name: 'invite-members',
-      component: () => import('../views/AgencyCenter/InviteMembersProcess.vue'),
-      meta: { requiresAuth: true },
-    },
     {
       path: '/team-bill',
       name: 'team-bill',
@@ -203,24 +197,12 @@ const router = createRouter({
       component: () => import('../views/Ranking/Overall/Ranking.vue'),
       meta: { requiresAuth: true },
     },
-    {
-      path: '/invite-agency',
-      name: 'invite-agency',
-      component: () => import('../views/Invitation/inviteAgency.vue'),
-      meta: { requiresAuth: true },
-    },
     {
       path: '/recharge-agency-recruit',
       name: 'recharge-agency-recruit',
       component: () => import('../views/RechargeAgency/Recruit.vue'),
       meta: { requiresAuth: true },
     },
-    {
-      path: '/invitation-to-register',
-      name: 'invitation-to-register',
-      component: () => import('../views/Invitation/InviteToRegister.vue'),
-      meta: { requiresAuth: true },
-    },
     {
       path: '/lottery',
       name: 'lottery',
@@ -264,9 +246,9 @@ const router = createRouter({
       meta: { requiresAuth: true },
     },
     {
-      path: '/invite-bd',
+      path: '/invitation-to-register',
-      name: 'invite-bd',
+      name: 'invitation-to-register',
-      component: () => import('../views/Invitation/inviteBD.vue'),
+      component: () => import('../views/Invitation/InviteToRegister.vue'),
       meta: { requiresAuth: true },
     },
     {
@@ -275,6 +257,30 @@ const router = createRouter({
       component: () => import('../views/Invitation/inviteBDLeader.vue'),
       meta: { requiresAuth: true },
     },
+    {
+      path: '/invite-bd',
+      name: 'invite-bd',
+      component: () => import('../views/Invitation/inviteBD.vue'),
+      meta: { requiresAuth: true },
+    },
+    {
+      path: '/invite-recharge-agency',
+      name: 'invite-recharge-agency',
+      component: () => import('../views/Invitation/inviteRechargeAgency.vue'),
+      meta: { requiresAuth: true },
+    },
+    {
+      path: '/invite-agency',
+      name: 'invite-agency',
+      component: () => import('../views/Invitation/inviteAgency.vue'),
+      meta: { requiresAuth: true },
+    },
+    {
+      path: '/invite-members',
+      name: 'invite-members',
+      component: () => import('../views/AgencyCenter/InviteMembersProcess.vue'),
+      meta: { requiresAuth: true },
+    },
     {
       path: '/policy',
       name: 'policy',

src/utils/permissionManager.js

@@ -38,6 +38,7 @@ export const PAGES = {
 // 邀请页面
 const INVITATION_PAGES = {
   INVITE_USER: '/invitation-to-register', //邀请新用户（邀请码）
+  INVITE_RECHARGE_AGENCY: '/invite-recharge-agency', //邀请代理
   INVITE_AGENCY: '/invite-agency', //邀请代理
   INVITE_BD: '/invite-bd', //邀请成为BD
   INVITE_BDLEADER: '/invite-bd-leader', //邀请成为BDLeader
@@ -61,27 +62,35 @@ const ACTIVITIES = [
 // 🎯 核心改变：基于身份的权限配置
 // 每个身份拥有的页面权限列表
 export const ROLE_PERMISSIONS = {
-  // Freight Agent (充值代理Rechange Agency/货运代理Freight Agent/金币销售员Coin Seller)
+  // 公共页面（所有身份都可以访问）
-  [USER_ROLES.FREIGHT_AGENT]: [
+  PUBLIC_PAGES: [
-    PAGES.COIN_SELLER, // 主页面
+    PAGES.APPLY, //申请主播页面
-    '/seller-records',
+    PAGES.NOT_APP, // 错误页面
-    '/coin-seller-search',
+    PAGES.PAY_RESULT, // 支付成功页面
+    PAGES.MAP, // 地图选择页面
+    ...ACTIVITIES, //活动页面
+    '/recharge',
     '/recharge-freight-agent',
+    '/recharge-agency-recruit', //充值代理介绍页面
+    '/search-payee', //搜索收款人
+    '/cash-out', // 提现页面
+    '/cash-out-details', //提现详情页面
+    '/KYC', //提现资料提交
+    '/bank-card', //选择银行卡
   ],
 
-  // Agent (代理商)
+  // Admin（管理员）
-  [USER_ROLES.AGENT]: [
+  [USER_ROLES.ADMIN]: [
-    PAGES.AGENCY_CENTER, // 主页面
+    PAGES.ADMIN_CENTER, //管理员中心
-    PAGES.TRANSFER, // 转账功能
+    INVITATION_PAGES.INVITE_BDLEADER, //邀请成为BDLeader
-    PAGES.EXCHANGE, // 兑换功能
+    INVITATION_PAGES.INVITE_BD, //邀请成为BD
-    PAGES.MESSAGE, // 消息功能
+    INVITATION_PAGES.INVITE_RECHARGE_AGENCY, //邀请金币代理
-    PAGES.PERSONAL_SALARY, // 个人薪资查看
+    INVITATION_PAGES.INVITE_AGENCY, //邀请代理
-    PAGES.AGENCY_SETTING, // 主播设置
+    '/item-distribution', //赠送商品页面
-    '/team-member',
+    '/my-BDLeader-teams', //我的BDLeader团队页面
-    '/information-details',
+    '/my-BD-teams', //我的BD团队页面
-    '/history-salary',
+    '/my-agency-teams', //我的代理团队页面
-    '/invite-members',
+    '/my-recharge-agency', //我的金币代理团队页面
-    '/team-bill',
   ],
 
   // BD (商务拓展)
@@ -102,12 +111,35 @@ export const ROLE_PERMISSIONS = {
   get [USER_ROLES.BDLEADER]() {
     return [
       PAGES.BD_LEADER_CENTER, // 主页面
+      INVITATION_PAGES.INVITE_BDLEADER, //邀请成为BDLeader
       INVITATION_PAGES.INVITE_BD, //邀请成为BD
       ...this[USER_ROLES.BD],
     ]
   },
+  // Freight Agent (充值代理Rechange Agency/货运代理Freight Agent/金币代理Coin Seller)
+  [USER_ROLES.FREIGHT_AGENT]: [
+    PAGES.COIN_SELLER, // 主页面
+    '/seller-records',
+    '/coin-seller-search',
+    '/recharge-freight-agent',
+  ],
 
-  // Anchor (主播)
+  // Agency (代理商)
+  [USER_ROLES.AGENT]: [
+    PAGES.AGENCY_CENTER, // 主页面
+    PAGES.TRANSFER, // 转账功能
+    PAGES.EXCHANGE, // 兑换功能
+    PAGES.MESSAGE, // 消息功能
+    PAGES.PERSONAL_SALARY, // 个人薪资查看
+    PAGES.AGENCY_SETTING, // 主播设置
+    '/team-member',
+    '/information-details',
+    '/history-salary',
+    '/invite-members',
+    '/team-bill',
+  ],
+
+  // Host (主播)
   [USER_ROLES.ANCHOR]: [
     PAGES.HOST_CENTER, // 主页面
     PAGES.TRANSFER, // 转账功能
@@ -121,41 +153,11 @@ export const ROLE_PERMISSIONS = {
     '/team-bill',
   ],
 
-  // 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', //我的金币代理团队页面
-  ],
-
   // Guest (访客/申请者)
   [USER_ROLES.GUEST]: [
     PAGES.APPLY, // 申请页面
   ],
 
-  // 公共页面（所有身份都可以访问）
-  PUBLIC_PAGES: [
-    PAGES.APPLY, //申请主播页面
-    PAGES.NOT_APP, // 错误页面
-    PAGES.PAY_RESULT, // 支付成功页面
-    PAGES.MAP, // 地图选择页面
-    ...ACTIVITIES, //活动页面
-    '/recharge',
-    '/recharge-freight-agent',
-    '/recharge-agency-recruit', //充值代理介绍页面
-    '/search-payee', //搜索收款人
-    '/cash-out', // 提现页面
-    '/cash-out-details', //提现详情页面
-    '/KYC', //提现资料提交
-    '/bank-card', //选择银行卡
-  ],
-
   // 加载页面
   LOADING_PAGE: [PAGES.LOADING],
 }

src/views/AdminCenter/index.vue

@@ -185,6 +185,7 @@
                   alt=""
                   style="display: block; width: 1.6em"
                   class="flipImg"
+                  @click="gotoPage('/invite-bd-leader')"
                 />
                 <img
                   src="../../assets/icon/list.png"
@@ -274,6 +275,7 @@
                   alt=""
                   style="display: block; width: 1.6em"
                   class="flipImg"
+                  @click="gotoPage('/invite-recharge-agency')"
                 />
                 <img
                   src="../../assets/icon/list.png"

src/views/Invitation/inviteRechargeAgency.vue

@@ -0,0 +1,421 @@
+<template>
+  <div class="fullPage">
+    <!-- 顶部导航 -->
+    <GeneralHeader
+      :showLanguageList="true"
+      title="Invite User To Become Recharge Agency"
+      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; min-width: 0">
+              <div
+                style="
+                  width: 50px;
+                  aspect-ratio: 1/1;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  margin-right: 12px;
+                "
+              >
+                <img
+                  :src="user.userProfile.userAvatar || ''"
+                  :alt="user.userProfile.userNickname"
+                  style="
+                    display: block;
+                    object-fit: cover;
+                    width: 100%;
+                    aspect-ratio: 1/1;
+                    border-radius: 50%;
+                  "
+                  @error="defaultAvatarUrl"
+                />
+              </div>
+              <div style="min-width: 0; flex: 1">
+                <div
+                  style="
+                    margin-bottom: 4px;
+                    font-weight: 700;
+                    color: #333;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                  "
+                >
+                  {{ user.userProfile.userNickname }}
+                </div>
+                <div style="font-size: 0.9em; 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 GeneralHeader from '@/components/GeneralHeader.vue'
+
+import { searchUser } from '@/api/userInfo'
+// import {
+//   invitedList,
+//   inviteToBeAgency,
+//   cancelInvite,
+// } from '@/api/bdCenter.js'
+
+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 defaultAvatarUrl = (e) => {
+  console.log('头像资源出错')
+  e.target.onerror = null //防止循环
+  e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
+}
+
+//展示的用户列表
+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 inviteToBeAgency(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';
+}
+
+.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;
+}
+
+input::placeholder {
+  font-weight: bold;
+  font-size: 0.7em;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.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>