feat(搜索转账对象页): 旧页面增加页面来源,根据来源展示弹窗和修改标题
This commit is contained in:
parent
8d06903553
commit
c7119ece10
@ -959,7 +959,7 @@ const clearPayee = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const searchPayee = () => {
|
const searchPayee = () => {
|
||||||
router.push('/search-payee')
|
router.push({ path: '/search-payee', query: { from: 'lottery' } })
|
||||||
}
|
}
|
||||||
|
|
||||||
// 转账金币选项
|
// 转账金币选项
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="search-payee gradient-background-circles">
|
<div class="search-payee gradient-background-circles">
|
||||||
<MobileHeader title="Search Payee" />
|
<MobileHeader :title="pageTitle" />
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<!-- 搜索框 -->
|
<!-- 搜索框 -->
|
||||||
@ -141,18 +141,87 @@
|
|||||||
<p>Searching...</p>
|
<p>Searching...</p>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, onMounted, watch } from 'vue'
|
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 MobileHeader from '../components/MobileHeader.vue'
|
||||||
import { userBankCheckTransfer, userBankSearchUserProfile } from '../api/wallet.js'
|
import { userBankCheckTransfer, userBankSearchUserProfile } from '../api/wallet.js'
|
||||||
import { setSelectedPayee } from '../utils/payeeStore.js'
|
import { setSelectedPayee } from '../utils/payeeStore.js'
|
||||||
import { showError } from '@/utils/toast.js'
|
import { showError } from '@/utils/toast.js'
|
||||||
|
import maskLayer from '@/components/MaskLayer.vue'
|
||||||
|
|
||||||
const router = useRouter()
|
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 searchQuery = ref('')
|
||||||
const searchResults = ref([])
|
const searchResults = ref([])
|
||||||
@ -163,6 +232,9 @@ const isLoadingRole = ref(false)
|
|||||||
const selectedUserType = ref('')
|
const selectedUserType = ref('')
|
||||||
const showTypeSelector = ref(false)
|
const showTypeSelector = ref(false)
|
||||||
|
|
||||||
|
const maskLayerShow = ref(false)
|
||||||
|
const selectedUser = ref({})
|
||||||
|
|
||||||
// 模拟用户数据 - 根据角色显示不同的用户
|
// 模拟用户数据 - 根据角色显示不同的用户
|
||||||
const allUsers = {
|
const allUsers = {
|
||||||
TEAM_OWN: [
|
TEAM_OWN: [
|
||||||
@ -343,17 +415,22 @@ const clearSearch = () => {
|
|||||||
|
|
||||||
// 选择用户
|
// 选择用户
|
||||||
const selectUser = (user) => {
|
const selectUser = (user) => {
|
||||||
|
selectedUser.value = user
|
||||||
|
if (fromLottery.value) {
|
||||||
|
maskLayerShow.value = true
|
||||||
|
} else {
|
||||||
|
Confirm()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const Cancel = () => {
|
||||||
|
selectedUser.value = {}
|
||||||
|
maskLayerShow.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
const Confirm = () => {
|
||||||
// 将选中的用户信息保存到全局状态
|
// 将选中的用户信息保存到全局状态
|
||||||
setSelectedPayee({
|
setSelectedPayee({ ...selectedUser.value })
|
||||||
id: user.id,
|
|
||||||
account: user.account,
|
|
||||||
name: user.name,
|
|
||||||
avatar: user.avatar,
|
|
||||||
type: user.type,
|
|
||||||
isHost: user.isHost,
|
|
||||||
isAgency: user.isAgency,
|
|
||||||
hasSalary: user.hasSalary,
|
|
||||||
})
|
|
||||||
|
|
||||||
// 返回到 Transfer 页面
|
// 返回到 Transfer 页面
|
||||||
// router.push('/transfer')
|
// router.push('/transfer')
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user