hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 使用新的头部组件，对接语言切换功能并调整布局

Browse Source
This commit is contained in:
hzj 2025-10-31 21:43:10 +08:00
parent 834bcbb166
commit c73d267160
5 changed files with 150 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/locales/ar.json
View File

@ -206,5 +206,18 @@
"unknown_user": "مستخدم غير معروف", "unknown_user": "مستخدم غير معروف",
"approved_application": "تمت الموافقة على طلب {name}", "approved_application": "تمت الموافقة على طلب {name}",
"rejected_application": "تم رفض طلب {name}", "rejected_application": "تم رفض طلب {name}",
"operation_failed": "فشلت العملية، يرجى المحاولة مرة أخرى" "operation_failed": "فشلت العملية، يرجى المحاولة مرة أخرى",
"cash_out": "سحب نقدي",
"complete_information": "إكمال المعلومات",
"contact_number": "رقم الاتصال",
"other_description": "وصف آخر",
"cash_withdrawal_tips": "يتطلب سحب النقود مراجعة. يرجى الانتظار بصبر حتى وصول النقد بعد اجتياز المراجعة.",
"receive": "استلام",
"rejection": "مرفوض",
"kyc": "KYC",
"passport_id_card": "جواز السفر/بطاقة الهوية:({current}/3)",
"transfer_coins": "تحويل العملات",
"plus_coins": "+{amount} عملات"
} }

15
src/locales/en.json
View File

@ -206,5 +206,18 @@
"unknown_user": "Unknown User", "unknown_user": "Unknown User",
"approved_application": "Approved {name}'s application", "approved_application": "Approved {name}'s application",
"rejected_application": "Rejected {name}'s application", "rejected_application": "Rejected {name}'s application",
"operation_failed": "Operation failed, please try again" "operation_failed": "Operation failed, please try again",
"cash_out": "Cash out",
"complete_information": "Complete information",
"contact_number": "Contact number",
"other_description": "Other description",
"cash_withdrawal_tips": "Cash withdrawals require review. Please wait patiently for the cash to arrive after the review is passed.",
"receive": "Receive",
"rejection": "Rejection",
"kyc": "KYC",
"passport_id_card": "Passport/ID card:({current}/3)",
"transfer_coins": "Transfer Coins",
"plus_coins": "+{amount} Coins"
} }

15
src/locales/zh.json
View File

@ -206,5 +206,18 @@
"unknown_user": "未知用户", "unknown_user": "未知用户",
"approved_application": "已批准 {name} 的申请", "approved_application": "已批准 {name} 的申请",
"rejected_application": "已拒绝 {name} 的申请", "rejected_application": "已拒绝 {name} 的申请",
"operation_failed": "操作失败，请重试" "operation_failed": "操作失败，请重试",
"cash_out": "提现",
"complete_information": "完善信息",
"contact_number": "联系电话",
"other_description": "其他说明",
"cash_withdrawal_tips": "提现需要审核，请审核通过后耐心等待到账。",
"receive": "确认",
"rejection": "已拒绝",
"kyc": "KYC",
"passport_id_card": "护照/身份证:({current}/3)",
"transfer_coins": "转账金币",
"plus_coins": "+{amount} 金币"
} }

103
src/views/BDCenter/availableIncome.vue
View File

@ -1,6 +1,11 @@
<template> <template>
<div class="transfer gradient-background-circles"> <div class="transfer gradient-background-circles">
<MobileHeader title="Available income" /> <GeneralHeader
:title="t('available_salaries')"
:showLanguageList="true"
color="black"
style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
/>
<div class="content"> <div class="content">
<!-- 信息部分 --> <!-- 信息部分 -->
@ -13,10 +18,10 @@
margin-bottom: 10px; margin-bottom: 10px;
" "
> >
<div style="font-weight: 600">Available income</div> <div style="font-weight: 600">{{ t('available_salaries') }}</div>
<div style="display: flex; align-items: center" @click="showDetails"> <div style="display: flex; align-items: center" @click="showDetails">
<div style="color: rgba(0, 0, 0, 0.4)">Details</div> <div style="color: rgba(0, 0, 0, 0.4)">{{ t('details') }}</div>
<img src="../../assets/icon/arrow.png" alt="" width="16px" /> <img src="../../assets/icon/arrow.png" alt="" width="16px" class="flipImg" />
</div> </div>
</div> </div>
<div <div
@ -28,7 +33,7 @@
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
" "
> >
<span v-if="loading" class="loading-text">Loading...</span> <span v-if="loading" class="loading-text">{{ t('loading') }}...</span>
<span v-else style="font-weight: 700; color: #333; font-size: 1.1em" <span v-else style="font-weight: 700; color: #333; font-size: 1.1em"
>${{ availableIncome }}</span >${{ availableIncome }}</span
> >
@ -63,7 +68,7 @@
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)', boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
}" }"
> >
{{ action.name }} {{ t(action.name.toLowerCase()) }}
</button> </button>
</div> </div>
@ -130,14 +135,14 @@
opacity: !selectedExchangeOption ? 0.6 : 1, opacity: !selectedExchangeOption ? 0.6 : 1,
}" }"
> >
Exchange {{ t('exchange') }}
</button> </button>
</div> </div>
</div> </div>
<!-- Transfer转账对象 --> <!-- Transfer转账对象 -->
<div v-if="activeAction === 'Transfer'"> <div v-if="activeAction === 'Transfer'">
<div style="font-weight: 600; margin-bottom: 10px">Transfer to others</div> <div style="font-weight: 600; margin-bottom: 10px">{{ t('transfer_to_others') }}</div>
<div <div
style=" style="
background-color: white; background-color: white;
@ -202,7 +207,7 @@
" "
@click="searchPayee" @click="searchPayee"
> >
Change {{ t('change') }}
</button> </button>
</div> </div>
<!-- 身份 --> <!-- 身份 -->
@ -240,7 +245,7 @@
" "
@click="searchPayee" @click="searchPayee"
> >
Search {{ t('search') }}
</div> </div>
</div> </div>
</div> </div>
@ -308,7 +313,7 @@
opacity: !selectedCoin || !selectedPayee.id ? 0.6 : 1, opacity: !selectedCoin || !selectedPayee.id ? 0.6 : 1,
}" }"
> >
Transfer {{ t('transfer') }}
</button> </button>
</div> </div>
</div> </div>
@ -320,7 +325,7 @@
<div> <div>
<!-- 标题 --> <!-- 标题 -->
<div style="display: flex; align-items: center; margin-bottom: 10px"> <div style="display: flex; align-items: center; margin-bottom: 10px">
<div style="font-weight: 600">KYC</div> <div style="font-weight: 600">{{ t('kyc') }}</div>
</div> </div>
<!-- 银行卡信息 --> <!-- 银行卡信息 -->
<div <div
@ -338,17 +343,17 @@
style="display: flex; justify-content: space-between; align-items: center" style="display: flex; justify-content: space-between; align-items: center"
@click="gotoKYC" @click="gotoKYC"
> >
<span style="font-weight: 510; font-size: 1em">Complete information</span> <span style="font-weight: 510; font-size: 1em">{{ t('complete_information') }}</span>
<img src="../../assets/icon/arrow.png" alt="" style="width: 6vw" /> <img src="../../assets/icon/arrow.png" alt="" style="width: 6vw" class="flipImg" />
</div> </div>
<!-- 获取到银行卡信息 --> <!-- 获取到银行卡信息 -->
<div v-else style="width: 100%; display: flex; flex-direction: column; gap: 8px"> <div v-else style="width: 100%; display: flex; flex-direction: column; gap: 8px">
<!-- 图片 --> <!-- 图片 -->
<div style="display: flex; justify-content: space-between; align-items: center"> <div style="display: flex; justify-content: space-between; align-items: center">
<span style="font-weight: 510; font-size: 1em" <span style="font-weight: 510; font-size: 1em">{{
>Passport/ID card:({{ bankCardInfo.cardImages.length }}/3)</span t('passport_id_card', { current: bankCardInfo.cardImages.length })
> }}</span>
<img src="../../assets/icon/arrow.png" alt="" style="width: 6vw" @click="gotoKYC" /> <img src="../../assets/icon/arrow.png" alt="" style="width: 6vw" @click="gotoKYC" />
</div> </div>
<div style="display: flex; align-items: center; gap: 4px"> <div style="display: flex; align-items: center; gap: 4px">
@ -361,13 +366,13 @@
</div> </div>
<!-- 卡号 --> <!-- 卡号 -->
<div style="font-weight: 500">Contact number:</div> <div style="font-weight: 500">{{ t('contact_number') }}:</div>
<div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.8em"> <div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.8em">
{{ bankCardInfo.contactNumber }} {{ bankCardInfo.contactNumber }}
</div> </div>
<!-- 备注信息 --> <!-- 备注信息 -->
<div style="font-weight: 500">Other description:</div> <div style="font-weight: 500">{{ t('other_description') }}:</div>
<div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.8em"> <div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.8em">
{{ bankCardInfo.description }} {{ bankCardInfo.description }}
</div> </div>
@ -394,7 +399,7 @@
}" }"
@click="CashOut" @click="CashOut"
> >
Cash out {{ t('cash_out') }}
</div> </div>
</div> </div>
</div> </div>
@ -426,10 +431,9 @@
" "
@click.stop @click.stop
> >
<div style="color: rgba(0, 0, 0, 0.8); font-weight: 800">Tips</div> <div style="color: rgba(0, 0, 0, 0.8); font-weight: 800">{{ t('tips') }}</div>
<div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.7em"> <div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.7em">
Cash withdrawals require review. Pleasewait patiently for the cash to arrive afterthe {{ t('cash_withdrawal_tips') }}
review is passed.
</div> </div>
<div <div
style=" style="
@ -450,7 +454,7 @@
" "
@click="Receive" @click="Receive"
> >
Receive {{ t('receive') }}
</div> </div>
</div> </div>
</div> </div>
@ -459,9 +463,10 @@
</template> </template>
<script setup> <script setup>
import { useI18n } from 'vue-i18n'
import { ref, reactive, onMounted, onUnmounted, computed } from 'vue' import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import MobileHeader from '@/components/MobileHeader.vue' import GeneralHeader from '@/components/GeneralHeader.vue'
import { import {
getBankBalance, getBankBalance,
userBankTransfer, userBankTransfer,
@ -474,9 +479,14 @@ import { setApplyInfo, getApplyInfo } from '@/utils/applyStore.js'
import maskLayer from '@/components/MaskLayer.vue' import maskLayer from '@/components/MaskLayer.vue'
import { withdrawApply } from '@/api/bdCenter.js' import { withdrawApply } from '@/api/bdCenter.js'
import { getUserId } from '@/utils/userStore.js' import { getUserId } from '@/utils/userStore.js'
import { setDocumentDirection } from '@/locales/i18n'
const { t, locale } = useI18n()
const router = useRouter() const router = useRouter()
// 监听语言变化并设置文档方向
locale.value && setDocumentDirection(locale.value)
const availableIncome = ref('') const availableIncome = ref('')
const selectedCoin = ref(null) const selectedCoin = ref(null)
const selectedExchangeOption = ref(null) const selectedExchangeOption = ref(null)
@ -564,7 +574,7 @@ const fetchBankBalance = async () => {
} catch (error) { } catch (error) {
console.error('Failed to fetch bank balance:', error) console.error('Failed to fetch bank balance:', error)
availableIncome.value = '-' availableIncome.value = '-'
showError(error.response.errorMsg) showError(error.response?.errorMsg || t('failed_to_load_balance'))
} finally { } finally {
loading.value = false loading.value = false
} }
@ -620,12 +630,12 @@ const selectExchangeOption = (option) => {
const transfer = async () => { const transfer = async () => {
if (!selectedCoin.value) { if (!selectedCoin.value) {
showError('Please select an amount first') showError(t('please_select_amount'))
return return
} }
if (!selectedPayee.id) { if (!selectedPayee.id) {
showError('Please select a payee first') showError(t('please_select_payee'))
return return
} }
@ -640,21 +650,23 @@ const transfer = async () => {
try { try {
const response = await userBankTransfer(transferData) const response = await userBankTransfer(transferData)
if (response.status) { if (response.status) {
showSuccess(`Successfully transferred $${selectedCoinData.price} to ${selectedPayee.name}`) showSuccess(
t('transfer_success', { price: selectedCoinData.price, name: selectedPayee.name })
)
selectedCoin.value = null selectedCoin.value = null
await fetchBankBalance() await fetchBankBalance()
} else { } else {
showError(`Failed to transfer $${selectedCoinData.price}`) showError(t('transfer_failed', { price: selectedCoinData.price }))
} }
} catch (error) { } catch (error) {
console.error('Transfer failed:', error) console.error('Transfer failed:', error)
showError(error.response.errorMsg) showError(error.response?.errorMsg || t('transfer_error'))
} }
} }
const handleExchange = async () => { const handleExchange = async () => {
if (!selectedExchangeOption.value) { if (!selectedExchangeOption.value) {
showError('Please select an amount first') showError(t('please_select_coin_amount'))
return return
} }
@ -671,7 +683,7 @@ const handleExchange = async () => {
}) })
if (response.status === true || response.errorCode === 0) { if (response.status === true || response.errorCode === 0) {
showSuccess(`Successfully exchanged`) showSuccess(t('exchange_success', { price: selectedOption.cash }))
// 刷新银行余额 // 刷新银行余额
await fetchBankBalance() await fetchBankBalance()
@ -680,7 +692,7 @@ const handleExchange = async () => {
selectedExchangeOption.value = null selectedExchangeOption.value = null
} catch (error) { } catch (error) {
console.error('Exchange failed:', error) console.error('Exchange failed:', error)
showError(error.response.errorMsg) showError(error.response?.errorMsg || t('exchange_error_occurred'))
} }
} }
@ -694,7 +706,7 @@ const Receive = async () => {
maskLayerShow.value = false maskLayerShow.value = false
} catch (error) { } catch (error) {
maskLayerShow.value = false maskLayerShow.value = false
showError(error.response.errorMsg) showError(error.response?.errorMsg || t('something_went_wrong'))
} }
} }
@ -722,6 +734,13 @@ onUnmounted(() => {
.transfer { .transfer {
font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-family: -apple-system, BlinkMacSystemFont, sans-serif;
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;
} }
.content { .content {
@ -753,4 +772,18 @@ onUnmounted(() => {
font-size: 16px; font-size: 16px;
} }
} }
/* RTL支持 */
[dir='rtl'] .avatar {
margin-right: 0;
margin-left: 12px;
}
[dir='rtl'] .user-info {
text-align: right;
}
[dir='rtl'] .flipImg {
transform: scaleX(-1);
}
</style> </style>

46
src/views/BDCenter/incomeDetails.vue
View File

@ -2,8 +2,9 @@
<div class="fullPage"> <div class="fullPage">
<GeneralHeader <GeneralHeader
style="width: 100%" style="width: 100%"
title="Details" :title="t('salary_details')"
color="color: rgba(0, 0, 0, 0.80)" :showLanguageList="true"
color="black"
backImg="/src/assets/icon/arrowBackBlack.png" backImg="/src/assets/icon/arrowBackBlack.png"
/> />
@ -23,7 +24,7 @@
" "
> >
<div style="display: flex; justify-content: space-between; align-items: center"> <div style="display: flex; justify-content: space-between; align-items: center">
<div style="font-weight: 600">Cash Out</div> <div style="font-weight: 600">{{ t('cash_out') }}</div>
<div style="font-weight: 600">${{ record.amount }}</div> <div style="font-weight: 600">${{ record.amount }}</div>
</div> </div>
<div style="display: flex; justify-content: space-between; align-items: center"> <div style="display: flex; justify-content: space-between; align-items: center">
@ -46,7 +47,7 @@
: 'linear-gradient(248deg, #FF7578 5.66%, #FF3D40 42.49%)', : 'linear-gradient(248deg, #FF7578 5.66%, #FF3D40 42.49%)',
}" }"
> >
{{ record.status }} {{ getStatusText(record.status) }}
</div> </div>
</div> </div>
</div> </div>
@ -63,7 +64,7 @@
gap: 8px; gap: 8px;
" "
> >
<div style="font-weight: 700">Transfer</div> <div style="font-weight: 700">{{ t('transfer') }}</div>
<div <div
style=" style="
padding: 12px; padding: 12px;
@ -101,7 +102,9 @@
</div> </div>
</div> </div>
<div style="font-weight: 600; font-size: 0.9em">+10000 Coins</div> <div style="font-weight: 600; font-size: 0.9em">
{{ t('plus_coins', { amount: '10000' }) }}
</div>
</div> </div>
<!-- 其他记录 --> <!-- 其他记录 -->
@ -138,8 +141,15 @@
</template> </template>
<script setup> <script setup>
import { useI18n } from 'vue-i18n'
import GeneralHeader from '@/components/GeneralHeader.vue' import GeneralHeader from '@/components/GeneralHeader.vue'
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import { setDocumentDirection } from '@/locales/i18n'
const { t, locale } = useI18n()
// 监听语言变化并设置文档方向
locale.value && setDocumentDirection(locale.value)
// Cash Out 记录数据 // Cash Out 记录数据
const cashOutRecords = ref([ const cashOutRecords = ref([
@ -185,6 +195,20 @@ const otherRecords = ref([
}, },
]) ])
// 获取状态文本翻译
const getStatusText = (status) => {
switch (status) {
case 'Under review':
return t('pending')
case 'Approved':
return t('success')
case 'Rejection':
return t('rejection')
default:
return status
}
}
const defaultAvatarUrl = (e) => { const defaultAvatarUrl = (e) => {
console.log('头像资源出错') console.log('头像资源出错')
e.target.onerror = null //防止循环 e.target.onerror = null //防止循环
@ -235,4 +259,14 @@ onMounted(() => {
font-size: 32px; font-size: 32px;
} }
} }
/* RTL支持 */
[dir='rtl'] .avatar {
margin-right: 0;
margin-left: 12px;
}
[dir='rtl'] .user-info {
text-align: right;
}
</style> </style>