From c7119ece10129792a19318b1f93edd2ea1242046 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Thu, 23 Oct 2025 11:45:49 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=90=9C=E7=B4=A2=E8=BD=AC=E8=B4=A6?=
 =?UTF-8?q?=E5=AF=B9=E8=B1=A1=E9=A1=B5):=20=E6=97=A7=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=A1=B5=E9=9D=A2=E6=9D=A5=E6=BA=90=EF=BC=8C?=
 =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E6=9D=A5=E6=BA=90=E5=B1=95=E7=A4=BA=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E5=92=8C=E4=BF=AE=E6=94=B9=E6=A0=87=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Activities/Lottery/Lottery.vue |   2 +-
 src/views/SearchPayeeView.vue            | 101 ++++++++++++++++++++---
 2 files changed, 90 insertions(+), 13 deletions(-)

diff --git a/src/views/Activities/Lottery/Lottery.vue b/src/views/Activities/Lottery/Lottery.vue
index b0ea0ba..ac9d8ba 100644
--- a/src/views/Activities/Lottery/Lottery.vue
+++ b/src/views/Activities/Lottery/Lottery.vue
@@ -959,7 +959,7 @@ const clearPayee = () => {
 }
 
 const searchPayee = () => {
-  router.push('/search-payee')
+  router.push({ path: '/search-payee', query: { from: 'lottery' } })
 }
 
 // 转账金币选项
diff --git a/src/views/SearchPayeeView.vue b/src/views/SearchPayeeView.vue
index 9fe8f32..37022be 100644
--- a/src/views/SearchPayeeView.vue
+++ b/src/views/SearchPayeeView.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="search-payee gradient-background-circles">
-    <MobileHeader title="Search Payee" />
+    <MobileHeader :title="pageTitle" />
 
     <div class="content">
       <!-- 搜索框 -->
@@ -141,18 +141,87 @@
         <p>Searching...</p>
       </div>
     </div>
+
+    <!-- 弹窗遮罩层 -->
+    <maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
+      <div
+        style="
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        "
+        @click.stop
+      >
+        <div
+          style="
+            width: 80%;
+            border-radius: 12px;
+            background: #fff;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 8px;
+          "
+        >
+          <div style="color: rgba(0, 0, 0, 0.8); font-weight: 800">Tips</div>
+          <div style="color: rgba(0, 0, 0, 0.5); font-weight: 600; text-align: center">
+            Are you sure you want to transfer coins to this user?
+          </div>
+          <div
+            style="width: 100%; display: flex; justify-content: space-around; align-items: center"
+          >
+            <div
+              style="
+                padding: 12px 20px;
+                border-radius: 12px;
+                border: 1px solid #e6e6e6;
+                color: rgba(0, 0, 0, 0.4);
+                font-weight: 800;
+              "
+              @click="Cancel"
+            >
+              Cancel
+            </div>
+            <div
+              style="
+                padding: 12px 20px;
+                border-radius: 12px;
+                background: linear-gradient(
+                  152deg,
+                  rgba(198, 112, 255, 0.6) 7.01%,
+                  rgba(119, 38, 255, 0.6) 92.99%
+                );
+                color: rgba(255, 255, 255, 0.8);
+                font-weight: 800;
+              "
+              @click="Confirm"
+            >
+              Confirm
+            </div>
+          </div>
+        </div>
+      </div>
+    </maskLayer>
   </div>
 </template>
 
 <script setup>
 import { ref, computed, onMounted, watch } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import MobileHeader from '../components/MobileHeader.vue'
 import { userBankCheckTransfer, userBankSearchUserProfile } from '../api/wallet.js'
 import { setSelectedPayee } from '../utils/payeeStore.js'
 import { showError } from '@/utils/toast.js'
+import maskLayer from '@/components/MaskLayer.vue'
 
 const router = useRouter()
+const route = useRoute()
+
+const fromLottery = computed(() => route.query?.from == 'lottery')
+const pageTitle = ref(route.query?.from == 'lottery' ? 'Add recharge agent' : 'Search Payee')
 
 const searchQuery = ref('')
 const searchResults = ref([])
@@ -163,6 +232,9 @@ const isLoadingRole = ref(false)
 const selectedUserType = ref('')
 const showTypeSelector = ref(false)
 
+const maskLayerShow = ref(false)
+const selectedUser = ref({})
+
 // 模拟用户数据 - 根据角色显示不同的用户
 const allUsers = {
   TEAM_OWN: [
@@ -343,17 +415,22 @@ const clearSearch = () => {
 
 // 选择用户
 const selectUser = (user) => {
+  selectedUser.value = user
+  if (fromLottery.value) {
+    maskLayerShow.value = true
+  } else {
+    Confirm()
+  }
+}
+
+const Cancel = () => {
+  selectedUser.value = {}
+  maskLayerShow.value = false
+}
+
+const Confirm = () => {
   // 将选中的用户信息保存到全局状态
-  setSelectedPayee({
-    id: user.id,
-    account: user.account,
-    name: user.name,
-    avatar: user.avatar,
-    type: user.type,
-    isHost: user.isHost,
-    isAgency: user.isAgency,
-    hasSalary: user.hasSalary,
-  })
+  setSelectedPayee({ ...selectedUser.value })
 
   // 返回到 Transfer 页面
   // router.push('/transfer')