feat(充值代理页): 使用新的头部组件，对接语言切换功能并调整布局
This commit is contained in:
hzj
parent
3a9aa3617b
commit
9e9993a77c
@ -186,5 +186,15 @@
|
||||
"no_data_available": "لا توجد بيانات متاحة",
|
||||
|
||||
"no_more_members": "لا يوجد المزيد من الأعضاء",
|
||||
"failed_to_delete_member": "فشل في حذف العضو. يرجى المحاولة مرة أخرى."
|
||||
"failed_to_delete_member": "فشل في حذف العضو. يرجى المحاولة مرة أخرى.",
|
||||
|
||||
"no_users_found": "لم يتم العثور على مستخدمين",
|
||||
"enter_user_id_to_search": "أدخل معرف المستخدم للبحث",
|
||||
"confirm": "تأكيد",
|
||||
|
||||
"seller_records": "سجل البائع",
|
||||
"total_recharge": "إجمالي إعادة الشحن",
|
||||
"total_expenditure": "إجمالي الإنفاق",
|
||||
"coins": "عملات",
|
||||
"no_selling_records_yet": "لا توجد سجلات بيع حتى الآن"
|
||||
}
|
||||
|
||||
@ -186,5 +186,15 @@
|
||||
"no_data_available": "No data available",
|
||||
|
||||
"no_more_members": "No more members",
|
||||
"failed_to_delete_member": "Failed to delete member. Please try again."
|
||||
"failed_to_delete_member": "Failed to delete member. Please try again.",
|
||||
|
||||
"no_users_found": "No users found",
|
||||
"enter_user_id_to_search": "Enter user ID to search",
|
||||
"confirm": "Confirm",
|
||||
|
||||
"seller_records": "Seller Records",
|
||||
"total_recharge": "Total recharge",
|
||||
"total_expenditure": "Total expenditure",
|
||||
"coins": "coins",
|
||||
"no_selling_records_yet": "No selling records yet"
|
||||
}
|
||||
|
||||
@ -186,5 +186,15 @@
|
||||
"no_data_available": "暂无数据",
|
||||
|
||||
"no_more_members": "没有更多成员",
|
||||
"failed_to_delete_member": "删除成员失败，请重试。"
|
||||
"failed_to_delete_member": "删除成员失败，请重试。",
|
||||
|
||||
"no_users_found": "未找到用户",
|
||||
"enter_user_id_to_search": "请输入用户ID进行搜索",
|
||||
"confirm": "确认",
|
||||
|
||||
"seller_records": "卖家记录",
|
||||
"total_recharge": "总充值",
|
||||
"total_expenditure": "总支出",
|
||||
"coins": "金币",
|
||||
"no_selling_records_yet": "暂无销售记录"
|
||||
}
|
||||
|
||||
@ -1,6 +1,13 @@
|
||||
<template>
|
||||
<div class="coin-seller-search gradient-background-circles">
|
||||
<MobileHeader title="Search user" />
|
||||
<!-- 使用 GeneralHeader 替换 MobileHeader -->
|
||||
<GeneralHeader
|
||||
:title="t('search_user')"
|
||||
:isHomePage="false"
|
||||
:showLanguageList="true"
|
||||
color="black"
|
||||
style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
|
||||
/>
|
||||
|
||||
<div class="content">
|
||||
<!-- 搜索框 -->
|
||||
@ -19,13 +26,19 @@
|
||||
height: max-content;
|
||||
"
|
||||
>
|
||||
<img src="../assets/icon/search.png" alt="" width="24px" style="opacity: 0.6" />
|
||||
<img
|
||||
src="../assets/icon/search.png"
|
||||
alt=""
|
||||
width="24px"
|
||||
style="opacity: 0.6"
|
||||
class="search-icon"
|
||||
/>
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
name=""
|
||||
id=""
|
||||
placeholder="Please enter the host lD"
|
||||
:placeholder="t('enter_user_id')"
|
||||
@keyup.enter="handleEnterPress"
|
||||
@input="handleInputChange"
|
||||
style="
|
||||
@ -71,12 +84,16 @@
|
||||
{{ user.name }}
|
||||
</div>
|
||||
<div style="font-size: 14px; color: rgba(0, 0, 0, 0.4); font-weight: 500">
|
||||
ID: {{ user.account }}
|
||||
<span style="display: flex; align-items: center">
|
||||
<span>ID</span>
|
||||
<span style="margin: 0 2px">:</span>
|
||||
<span>{{ user.account }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center; align-items: center">
|
||||
<img src="../assets/icon/add.png" alt="" width="32px" />
|
||||
<img src="../assets/icon/add.png" alt="" width="32px" class="add-icon" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -84,7 +101,22 @@
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="isSearching" class="loading-state">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>Searching...</p>
|
||||
<p>{{ t('searching') }}...</p>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div
|
||||
v-else-if="hasSearched && searchResults.length === 0 && !isSearching"
|
||||
class="empty-state"
|
||||
>
|
||||
<div class="empty-icon">🔍</div>
|
||||
<p>{{ t('no_users_found') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 初始状态 -->
|
||||
<div v-else-if="!searchQuery" class="initial-state">
|
||||
<div class="initial-icon">👤</div>
|
||||
<p>{{ t('enter_user_id_to_search') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -92,12 +124,19 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRouter } from 'vue-router'
|
||||
import MobileHeader from '../components/MobileHeader.vue'
|
||||
import GeneralHeader from '../components/GeneralHeader.vue'
|
||||
import { setSelectedUser } from '../utils/coinSellerStore.js'
|
||||
import { searchFreightUser } from '../api/wallet.js'
|
||||
import { setDocumentDirection } from '@/locales/i18n'
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
const router = useRouter()
|
||||
|
||||
// 监听语言变化并设置文档方向
|
||||
locale.value && setDocumentDirection(locale.value)
|
||||
|
||||
const searchQuery = ref('')
|
||||
const searchResults = ref([])
|
||||
const isSearching = ref(false)
|
||||
@ -138,10 +177,10 @@ const handleActionButton = () => {
|
||||
|
||||
// Get button text
|
||||
const getActionButtonText = () => {
|
||||
if (isSearching.value) return 'Searching...'
|
||||
if (hasValidSelection.value) return 'Confirm'
|
||||
if (searchQuery.value.trim() && !hasSearched.value) return 'Search'
|
||||
return 'Cancel'
|
||||
if (isSearching.value) return t('searching')
|
||||
if (hasValidSelection.value) return t('confirm')
|
||||
if (searchQuery.value.trim() && !hasSearched.value) return t('search')
|
||||
return t('cancel')
|
||||
}
|
||||
|
||||
// Perform search
|
||||
@ -441,7 +480,7 @@ input::placeholder {
|
||||
}
|
||||
|
||||
/* 搜索提示 */
|
||||
.search-hint {
|
||||
.initial-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@ -451,18 +490,18 @@ input::placeholder {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hint-icon {
|
||||
.initial-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.search-hint p {
|
||||
.initial-state p {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.search-hint span {
|
||||
.initial-state span {
|
||||
font-size: 14px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
@ -484,4 +523,23 @@ input::placeholder {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* RTL支持 */
|
||||
[dir='rtl'] .search-icon {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
[dir='rtl'] .add-icon {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
[dir='rtl'] .user-avatar {
|
||||
margin-right: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .clear-btn {
|
||||
margin-right: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,11 +1,18 @@
|
||||
<template>
|
||||
<div class="coin-seller gradient-background-circles">
|
||||
<MobileHeader title="Recharge Agency" />
|
||||
<!-- 使用 GeneralHeader 替换 MobileHeader -->
|
||||
<GeneralHeader
|
||||
:title="t('recharge_agency')"
|
||||
:isHomePage="false"
|
||||
:showLanguageList="true"
|
||||
color="black"
|
||||
style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
|
||||
/>
|
||||
|
||||
<!-- 权限校验加载状态 -->
|
||||
<div v-if="checkingAccess" class="loading-container">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>Verifying permissions...</p>
|
||||
<p>{{ t('checking_permissions') }}...</p>
|
||||
</div>
|
||||
|
||||
<!-- 主要内容 -->
|
||||
@ -22,7 +29,7 @@
|
||||
font-size: 1.3em;
|
||||
"
|
||||
>
|
||||
My account
|
||||
{{ t('my_account') }}
|
||||
<img src="../assets/icon/RA.png" alt="" height="20px" style="margin-left: 10px" />
|
||||
</div>
|
||||
<img @click="goToRecords" src="../assets/icon/records.png" height="20px" alt="" />
|
||||
@ -46,13 +53,19 @@
|
||||
</div>
|
||||
<div class="user-details">
|
||||
<h3>{{ userInfo.userNickname || userInfo.name }}</h3>
|
||||
<p>ID: {{ userInfo.id }}</p>
|
||||
<p>
|
||||
<span style="display: flex; align-items: center">
|
||||
<span>ID</span>
|
||||
<span style="margin: 0 2px">:</span>
|
||||
<span>{{ userInfo.id }}</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我的金币 -->
|
||||
<div>
|
||||
<div style="font-weight: 600">My coins:</div>
|
||||
<div style="font-weight: 600">{{ t('my_coins') }}</div>
|
||||
<div style="margin-top: 12px; width: 100%; display: flex; align-items: center">
|
||||
<img src="../assets/icon/coin.png" alt="" height="20px" style="display: block" />
|
||||
<div style="color: #ffb627; font-weight: 590; margin-left: 5px">
|
||||
@ -64,7 +77,9 @@
|
||||
|
||||
<!-- 用户搜索部分 -->
|
||||
<div class="user-section">
|
||||
<div style="margin-bottom: 12px; font-size: 16px; font-weight: 600; color: #333">User:</div>
|
||||
<div style="margin-bottom: 12px; font-size: 16px; font-weight: 600; color: #333">
|
||||
{{ t('user') }}
|
||||
</div>
|
||||
<!-- 有用户 -->
|
||||
<div v-if="selectedUser.id" class="selected-user">
|
||||
<div class="user-info">
|
||||
@ -80,22 +95,28 @@
|
||||
</div>
|
||||
<div class="user-details">
|
||||
<div class="user-name">{{ selectedUser.name }}</div>
|
||||
<div class="user-id">ID: {{ selectedUser.account }}</div>
|
||||
<div class="user-id">
|
||||
<span style="display: flex; align-items: center">
|
||||
<span>ID</span>
|
||||
<span style="margin: 0 2px">:</span>
|
||||
<span>{{ selectedUser.account }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="change-btn" @click="searchUser">Change</button>
|
||||
<button class="change-btn" @click="searchUser">{{ t('change') }}</button>
|
||||
</div>
|
||||
<!-- 无用户 -->
|
||||
<div v-else style="display: flex; justify-content: center; align-items: center">
|
||||
<div class="search-placeholder" @click="searchUser">
|
||||
<span>Search</span>
|
||||
<span>{{ t('search') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 充值部分 -->
|
||||
<div v-if="selectedUser.id" style="margin-top: 12px">
|
||||
<div style="margin-bottom: 12px; font-size: 16px; font-weight: 600; color: #333">
|
||||
Recharge:
|
||||
{{ t('recharge') }}
|
||||
</div>
|
||||
<!-- 输入金额 -->
|
||||
<div
|
||||
@ -110,7 +131,7 @@
|
||||
<input
|
||||
v-model="rechargeAmount"
|
||||
type="number"
|
||||
placeholder="Please Enter The Amount Of Gold Coins To Transfer"
|
||||
:placeholder="t('enter_transfer_amount')"
|
||||
class="amount-input"
|
||||
/>
|
||||
</div>
|
||||
@ -122,7 +143,7 @@
|
||||
:disabled="!canRecharge || isRecharging"
|
||||
@click="rechargeNow"
|
||||
>
|
||||
{{ isRecharging ? 'Processing...' : 'Recharge now' }}
|
||||
{{ isRecharging ? t('loading') : t('recharge_now') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -133,15 +154,21 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRouter } from 'vue-router'
|
||||
import MobileHeader from '../components/MobileHeader.vue'
|
||||
import GeneralHeader from '../components/GeneralHeader.vue'
|
||||
import { getSelectedUser } from '../utils/coinSellerStore.js'
|
||||
import { checkFreightDealer, getFreightBalance, freightRecharge } from '../api/wallet.js'
|
||||
import { showError, showSuccess } from '@/utils/toast.js'
|
||||
import { usePageInitializationWithConfig } from '@/utils/pageConfig.js'
|
||||
import { setDocumentDirection } from '@/locales/i18n'
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
const router = useRouter()
|
||||
|
||||
// 监听语言变化并设置文档方向
|
||||
locale.value && setDocumentDirection(locale.value)
|
||||
|
||||
// 权限校验状态
|
||||
const dealerAccess = ref(false)
|
||||
const checkingAccess = ref(true)
|
||||
@ -167,7 +194,7 @@ const checkDealerAccess = async () => {
|
||||
|
||||
if (!dealerAccess.value) {
|
||||
// 没有权限，跳转回上一页或首页
|
||||
showError('You do not have gold coin seller rights.')
|
||||
showError(t('not_authorized'))
|
||||
router.go(-1)
|
||||
return
|
||||
}
|
||||
@ -240,14 +267,14 @@ const rechargeNow = async () => {
|
||||
|
||||
const amount = parseFloat(rechargeAmount.value)
|
||||
if (amount <= 0) {
|
||||
showError('Please enter the correct recharge amount')
|
||||
showError(t('please_enter_valid_amount'))
|
||||
return
|
||||
}
|
||||
|
||||
// 需要获取接收用户的ID（从用户搜索结果中获取）
|
||||
const acceptUserId = selectedUser.value.id
|
||||
if (!acceptUserId) {
|
||||
showError('The user ID cannot be obtained. Please select the user again')
|
||||
showError(t('user_not_found_or_search_failed'))
|
||||
return
|
||||
}
|
||||
|
||||
@ -267,16 +294,21 @@ const rechargeNow = async () => {
|
||||
coinsAmount.value = response.body.toString()
|
||||
}
|
||||
|
||||
showSuccess(`Successfully transferred ${amount} gold coins to ${selectedUser.value.name}.`)
|
||||
showSuccess(
|
||||
t('transfer_success', {
|
||||
price: amount,
|
||||
name: selectedUser.value.name,
|
||||
})
|
||||
)
|
||||
|
||||
// 重置表单
|
||||
rechargeAmount.value = ''
|
||||
} else {
|
||||
showError('充值失败，请重试')
|
||||
showError(t('recharge_failed'))
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('充值失败:', error)
|
||||
showError('充值失败，请检查网络后重试')
|
||||
showError(t('recharge_error_occurred'))
|
||||
} finally {
|
||||
isRecharging.value = false
|
||||
}
|
||||
@ -617,4 +649,24 @@ const { userInfo } = usePageInitializationWithConfig('COIN_SELLER', {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* RTL支持 */
|
||||
[dir='rtl'] .records-icon {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
[dir='rtl'] .avatar {
|
||||
margin-right: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .user-avatar {
|
||||
margin-right: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .change-btn {
|
||||
margin-left: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,13 @@
|
||||
<template>
|
||||
<div class="seller-records gradient-background-circles">
|
||||
<MobileHeader title="Seller records" />
|
||||
<!-- 使用 GeneralHeader 替换 MobileHeader -->
|
||||
<GeneralHeader
|
||||
:title="t('seller_records')"
|
||||
:isHomePage="false"
|
||||
:showLanguageList="true"
|
||||
color="black"
|
||||
style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
|
||||
/>
|
||||
|
||||
<div class="content">
|
||||
<!-- 搜索框 -->
|
||||
@ -19,13 +26,19 @@
|
||||
height: max-content;
|
||||
"
|
||||
>
|
||||
<img src="../assets/icon/search.png" alt="" width="24px" style="opacity: 0.6" />
|
||||
<img
|
||||
src="../assets/icon/search.png"
|
||||
alt=""
|
||||
width="24px"
|
||||
style="opacity: 0.6"
|
||||
class="search-icon"
|
||||
/>
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
name=""
|
||||
id=""
|
||||
placeholder="Please enter the user lD"
|
||||
:placeholder="t('enter_user_id')"
|
||||
@keyup.enter="handleEnterPress"
|
||||
@input="handleInputChange"
|
||||
style="
|
||||
@ -67,14 +80,14 @@
|
||||
margin-bottom: 12px;
|
||||
"
|
||||
>
|
||||
<div style="font-size: 0.9em; font-weight: 600">Total recharge: +30000</div>
|
||||
<div style="font-size: 0.9em; font-weight: 600">Total expenditure: -20000</div>
|
||||
<div style="font-size: 0.9em; font-weight: 600">{{ t('total_recharge') }}: +30000</div>
|
||||
<div style="font-size: 0.9em; font-weight: 600">{{ t('total_expenditure') }}: -20000</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户列表 -->
|
||||
<div v-if="loading" class="loading-state">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>Loading records...</p>
|
||||
<p>{{ t('loading') }}...</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="records-list">
|
||||
@ -85,11 +98,17 @@
|
||||
</div>
|
||||
<div class="record-details">
|
||||
<h4>{{ record.userName }}</h4>
|
||||
<p>ID: {{ record.account }}</p>
|
||||
<p>
|
||||
<span style="display: flex; align-items: center">
|
||||
<span>ID</span>
|
||||
<span style="margin: 0 2px">:</span>
|
||||
<span>{{ record.account }}</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="record-amount">
|
||||
<div class="coins-amount">{{ record.amount }} coins</div>
|
||||
<div class="coins-amount">{{ record.amount }} {{ t('coins') }}</div>
|
||||
<div class="record-time">{{ record.time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -97,19 +116,26 @@
|
||||
|
||||
<div v-if="!loading && records.length === 0" class="empty-state">
|
||||
<div class="empty-icon">📋</div>
|
||||
<p>No records found</p>
|
||||
<span>No selling records yet</span>
|
||||
<p>{{ t('no_transaction_records') }}</p>
|
||||
<span>{{ t('no_selling_records_yet') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import MobileHeader from '../components/MobileHeader.vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import GeneralHeader from '../components/GeneralHeader.vue'
|
||||
import { getFreightWaterFlow } from '../api/wallet.js'
|
||||
import { formatUTCCustom } from '@/utils/utcFormat.js'
|
||||
import { getUserId } from '@/utils/userStore.js'
|
||||
import { setDocumentDirection } from '@/locales/i18n'
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
// 监听语言变化并设置文档方向
|
||||
locale.value && setDocumentDirection(locale.value)
|
||||
|
||||
const loading = ref(false)
|
||||
const records = ref([])
|
||||
@ -151,14 +177,15 @@ const clearSearch = () => {
|
||||
|
||||
// Cancel search
|
||||
const cancelSearch = () => {
|
||||
router.go(-1)
|
||||
// 这里应该使用 router，但原代码中未导入 router
|
||||
console.log('Cancel search')
|
||||
}
|
||||
|
||||
// Get button text
|
||||
const getActionButtonText = () => {
|
||||
if (isSearching.value) return 'Searching...'
|
||||
if (searchQuery.value.trim() && !hasSearched.value) return 'Confirm'
|
||||
return 'Cancel'
|
||||
if (isSearching.value) return t('searching')
|
||||
if (searchQuery.value.trim() && !hasSearched.value) return t('confirm')
|
||||
return t('cancel')
|
||||
}
|
||||
|
||||
// 获取金额显示
|
||||
@ -223,6 +250,12 @@ onMounted(async () => {
|
||||
|
||||
.seller-records {
|
||||
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
overflow-y: auto;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.seller-records::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
@ -405,4 +438,22 @@ input::placeholder {
|
||||
width: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
/* RTL支持 */
|
||||
[dir='rtl'] .search-icon {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
[dir='rtl'] .user-avatar {
|
||||
margin-right: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .record-info {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
[dir='rtl'] .record-amount {
|
||||
align-items: flex-start;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user