From 2dff4382b56b4e59235426069f3974da6822aef3 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Tue, 14 Oct 2025 15:43:02 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=96=B0=E9=A1=B5=E9=9D=A2):=20=E9=82=80?=
 =?UTF-8?q?=E8=AF=B7=E4=BB=A3=E7=90=86=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/BDCenter/inviteAgency.vue | 311 +++++++++++++++++++++++++++-
 1 file changed, 308 insertions(+), 3 deletions(-)

diff --git a/src/views/BDCenter/inviteAgency.vue b/src/views/BDCenter/inviteAgency.vue
index 677f24b..ad2fa41 100644
--- a/src/views/BDCenter/inviteAgency.vue
+++ b/src/views/BDCenter/inviteAgency.vue
@@ -1,7 +1,312 @@
 <template>
-  <div></div>
+  <div class="fullPage">
+    <!-- 顶部导航 -->
+    <MobileHeader title="Invite user to become agency" />
+
+    <!-- 内容 -->
+    <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 host 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="searchResults.length > 0"
+        style="margin: 16px 0; display: flex; flex-direction: column; gap: 12px"
+      >
+        <div
+          v-for="user in searchResults"
+          :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.id }"
+          ></div>
+          <div style="position: absolute; top: -2px; right: -2px">
+            <div
+              v-if="user.inviteStatus == 1 && user.inviteRes == 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.inviteStatus == 1 && user.inviteRes == 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;
+                  height: 50px;
+                  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.userAvatar"
+                  :src="user.userAvatar"
+                  :alt="user.name"
+                  style="width: 100%; height: 100%; object-fit: cover; border-radius: 25px"
+                  @error="(e) => (e.target.style.display = 'none')"
+                />
+                <span
+                  v-if="!user.userAvatar"
+                  style="color: white; font-size: 18px; font-weight: 600"
+                  >{{ user.name.charAt(0) }}</span
+                >
+              </div>
+              <div>
+                <div style="margin-bottom: 4px; font-size: 16px; font-weight: 700">
+                  {{ user.name }}
+                </div>
+                <div style="font-size: 14px; color: rgba(0, 0, 0, 0.4); font-weight: 500">
+                  ID: {{ user.account }}
+                </div>
+              </div>
+            </div>
+            <div style="display: flex; justify-content: center; align-items: center">
+              <div
+                v-if="user.inviteStatus == 1 && user.inviteRes == 0"
+                style="
+                  padding: 4px 8px;
+                  border-radius: 32px;
+                  background-color: red;
+                  color: white;
+                  font-size: 16px;
+                  font-weight: 600;
+                "
+              >
+                Cancel
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import MobileHeader from '@/components/MobileHeader.vue'
+import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js'
+import { ref } from 'vue'
 
-<style lang="scss" scoped></style>
+const searchQuery = 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 clearSearch = () => {
+  searchQuery.value = ''
+}
+
+// 输入框变化
+const handleInputChange = () => {
+  if (!searchQuery.value.trim()) {
+    searchResults.value = []
+    selectedUser.value = null
+  }
+}
+
+// 回车搜索
+const handleEnterPress = () => {}
+
+// 选择用户
+const toggleUserSelection = (user) => {
+  if (selectedUser.value?.id === user.id) {
+    selectedUser.value = null
+    disInvite.value = true
+  } else {
+    selectedUser.value = user
+    if (selectedUser.value.inviteStatus == 0) {
+      disInvite.value = false
+    }
+  }
+}
+
+// 邀请代理
+const inviteAgency = () => {
+  console.log('点击邀请代理')
+  showSuccess('Invitation information submitted successfully!')
+}
+</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;
+}
+
+.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>