feat(充值代理消息页): 使用新的头部组件，对接语言切换功能并调整布局
This commit is contained in:
hzj
parent
9e9993a77c
commit
59b9c7f406
@ -196,5 +196,14 @@
|
||||
"total_recharge": "إجمالي إعادة الشحن",
|
||||
"total_expenditure": "إجمالي الإنفاق",
|
||||
"coins": "عملات",
|
||||
"no_selling_records_yet": "لا توجد سجلات بيع حتى الآن"
|
||||
"no_selling_records_yet": "لا توجد سجلات بيع حتى الآن",
|
||||
|
||||
"users_message": "رسالة المستخدم",
|
||||
"no_messages": "لا توجد رسائل",
|
||||
"agree": "موافقة",
|
||||
"refuse": "رفض",
|
||||
"unknown_user": "مستخدم غير معروف",
|
||||
"approved_application": "تمت الموافقة على طلب {name}",
|
||||
"rejected_application": "تم رفض طلب {name}",
|
||||
"operation_failed": "فشلت العملية، يرجى المحاولة مرة أخرى"
|
||||
}
|
||||
|
||||
@ -196,5 +196,14 @@
|
||||
"total_recharge": "Total recharge",
|
||||
"total_expenditure": "Total expenditure",
|
||||
"coins": "coins",
|
||||
"no_selling_records_yet": "No selling records yet"
|
||||
"no_selling_records_yet": "No selling records yet",
|
||||
|
||||
"users_message": "User's message",
|
||||
"no_messages": "No messages",
|
||||
"agree": "Agree",
|
||||
"refuse": "Refuse",
|
||||
"unknown_user": "Unknown User",
|
||||
"approved_application": "Approved {name}'s application",
|
||||
"rejected_application": "Rejected {name}'s application",
|
||||
"operation_failed": "Operation failed, please try again"
|
||||
}
|
||||
|
||||
@ -196,5 +196,14 @@
|
||||
"total_recharge": "总充值",
|
||||
"total_expenditure": "总支出",
|
||||
"coins": "金币",
|
||||
"no_selling_records_yet": "暂无销售记录"
|
||||
"no_selling_records_yet": "暂无销售记录",
|
||||
|
||||
"users_message": "用户消息",
|
||||
"no_messages": "暂无消息",
|
||||
"agree": "同意",
|
||||
"refuse": "拒绝",
|
||||
"unknown_user": "未知用户",
|
||||
"approved_application": "已批准 {name} 的申请",
|
||||
"rejected_application": "已拒绝 {name} 的申请",
|
||||
"operation_failed": "操作失败，请重试"
|
||||
}
|
||||
|
||||
@ -1,11 +1,18 @@
|
||||
<template>
|
||||
<div class="message gradient-background-circles">
|
||||
<MobileHeader title="User's message" />
|
||||
<!-- 使用 GeneralHeader 替换 MobileHeader -->
|
||||
<GeneralHeader
|
||||
:title="t('users_message')"
|
||||
:isHomePage="false"
|
||||
:showLanguageList="true"
|
||||
color="black"
|
||||
style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
|
||||
/>
|
||||
|
||||
<div class="content">
|
||||
<div v-if="loading" class="loading-state">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>Loading messages...</p>
|
||||
<p>{{ t('loading') }}...</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="message-list">
|
||||
@ -16,20 +23,26 @@
|
||||
<div v-else>{{ message.name?.charAt(0) || 'U' }}</div>
|
||||
</div>
|
||||
<div class="user-details">
|
||||
<h4>{{ message.name || 'Unknown User' }}</h4>
|
||||
<p>ID: {{ message.account || message.userId }}</p>
|
||||
<h4>{{ message.name || t('unknown_user') }}</h4>
|
||||
<p>
|
||||
<span style="display: flex; align-items: center">
|
||||
<span>ID</span>
|
||||
<span style="margin: 0 2px">:</span>
|
||||
<span>{{ message.account || message.userId }}</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="action-buttons">
|
||||
<button class="agree-btn" @click="handleAgree(message)">Agree</button>
|
||||
<button class="refuse-btn" @click="handleRefuse(message)">Refuse</button>
|
||||
<button class="agree-btn" @click="handleAgree(message)">{{ t('agree') }}</button>
|
||||
<button class="refuse-btn" @click="handleRefuse(message)">{{ t('refuse') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!loading && messages.length === 0" class="empty-state">
|
||||
<div class="empty-icon">📨</div>
|
||||
<p>No messages</p>
|
||||
<p>{{ t('no_messages') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -37,15 +50,20 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import MobileHeader from '../components/MobileHeader.vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import GeneralHeader from '../components/GeneralHeader.vue'
|
||||
import { getApplyRecord } from '../api/teamBill.js'
|
||||
import { processUserApply } from '../api/wallet.js'
|
||||
import { getTeamId } from '@/utils/userStore.js'
|
||||
import { showError, showSuccess, showWarning } from '@/utils/toast.js'
|
||||
import { formatUTCTime } from '@/utils/utcFormat.js'
|
||||
import { setDocumentDirection } from '@/locales/i18n'
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
// 监听语言变化并设置文档方向
|
||||
locale.value && setDocumentDirection(locale.value)
|
||||
|
||||
const router = useRouter()
|
||||
const loading = ref(false)
|
||||
const messages = ref([])
|
||||
|
||||
@ -100,18 +118,22 @@ const handleAgree = async (message) => {
|
||||
})
|
||||
|
||||
if (response.status) {
|
||||
showSuccess(`Approved ${message.name}'s application`)
|
||||
showSuccess(
|
||||
t('approved_application', {
|
||||
name: message.name,
|
||||
})
|
||||
)
|
||||
// 从列表中移除
|
||||
const index = messages.value.findIndex((m) => m.id === message.id)
|
||||
if (index > -1) {
|
||||
messages.value.splice(index, 1)
|
||||
}
|
||||
} else {
|
||||
showError('Operation failed, please try again')
|
||||
showError(t('operation_failed'))
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('同意申请失败:', error)
|
||||
showError('Operation failed, please try again')
|
||||
showError(t('operation_failed'))
|
||||
}
|
||||
}
|
||||
|
||||
@ -124,18 +146,22 @@ const handleRefuse = async (message) => {
|
||||
})
|
||||
|
||||
if (response.status) {
|
||||
showWarning(`Rejected ${message.name}'s application`)
|
||||
showWarning(
|
||||
t('rejected_application', {
|
||||
name: message.name,
|
||||
})
|
||||
)
|
||||
// 从列表中移除
|
||||
const index = messages.value.findIndex((m) => m.id === message.id)
|
||||
if (index > -1) {
|
||||
messages.value.splice(index, 1)
|
||||
}
|
||||
} else {
|
||||
showError('Operation failed, please try again')
|
||||
showError(t('operation_failed'))
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('拒绝申请失败:', error)
|
||||
showError('Operation failed, please try again')
|
||||
showError(t('operation_failed'))
|
||||
}
|
||||
}
|
||||
|
||||
@ -304,4 +330,36 @@ onMounted(() => {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@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'] .user-avatar {
|
||||
margin-right: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .user-info {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
[dir='rtl'] .action-buttons {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user