feat: 使用新的头部组件，对接语言切换功能并调整布局
This commit is contained in:
hzj
parent
834bcbb166
commit
c73d267160
@ -206,5 +206,18 @@
|
||||
"unknown_user": "مستخدم غير معروف",
|
||||
"approved_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} عملات"
|
||||
}
|
||||
|
||||
@ -206,5 +206,18 @@
|
||||
"unknown_user": "Unknown User",
|
||||
"approved_application": "Approved {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"
|
||||
}
|
||||
|
||||
@ -206,5 +206,18 @@
|
||||
"unknown_user": "未知用户",
|
||||
"approved_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} 金币"
|
||||
}
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
<template>
|
||||
<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">
|
||||
<!-- 信息部分 -->
|
||||
@ -13,10 +18,10 @@
|
||||
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="color: rgba(0, 0, 0, 0.4)">Details</div>
|
||||
<img src="../../assets/icon/arrow.png" alt="" width="16px" />
|
||||
<div style="color: rgba(0, 0, 0, 0.4)">{{ t('details') }}</div>
|
||||
<img src="../../assets/icon/arrow.png" alt="" width="16px" class="flipImg" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -28,7 +33,7 @@
|
||||
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"
|
||||
>${{ availableIncome }}</span
|
||||
>
|
||||
@ -63,7 +68,7 @@
|
||||
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
|
||||
}"
|
||||
>
|
||||
{{ action.name }}
|
||||
{{ t(action.name.toLowerCase()) }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -130,14 +135,14 @@
|
||||
opacity: !selectedExchangeOption ? 0.6 : 1,
|
||||
}"
|
||||
>
|
||||
Exchange
|
||||
{{ t('exchange') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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
|
||||
style="
|
||||
background-color: white;
|
||||
@ -202,7 +207,7 @@
|
||||
"
|
||||
@click="searchPayee"
|
||||
>
|
||||
Change
|
||||
{{ t('change') }}
|
||||
</button>
|
||||
</div>
|
||||
<!-- 身份 -->
|
||||
@ -240,7 +245,7 @@
|
||||
"
|
||||
@click="searchPayee"
|
||||
>
|
||||
Search
|
||||
{{ t('search') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -308,7 +313,7 @@
|
||||
opacity: !selectedCoin || !selectedPayee.id ? 0.6 : 1,
|
||||
}"
|
||||
>
|
||||
Transfer
|
||||
{{ t('transfer') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -320,7 +325,7 @@
|
||||
<div>
|
||||
<!-- 标题 -->
|
||||
<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
|
||||
@ -338,17 +343,17 @@
|
||||
style="display: flex; justify-content: space-between; align-items: center"
|
||||
@click="gotoKYC"
|
||||
>
|
||||
<span style="font-weight: 510; font-size: 1em">Complete information</span>
|
||||
<img src="../../assets/icon/arrow.png" alt="" style="width: 6vw" />
|
||||
<span style="font-weight: 510; font-size: 1em">{{ t('complete_information') }}</span>
|
||||
<img src="../../assets/icon/arrow.png" alt="" style="width: 6vw" class="flipImg" />
|
||||
</div>
|
||||
|
||||
<!-- 获取到银行卡信息 -->
|
||||
<div v-else style="width: 100%; display: flex; flex-direction: column; gap: 8px">
|
||||
<!-- 图片 -->
|
||||
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||
<span style="font-weight: 510; font-size: 1em"
|
||||
>Passport/ID card:({{ bankCardInfo.cardImages.length }}/3)</span
|
||||
>
|
||||
<span style="font-weight: 510; font-size: 1em">{{
|
||||
t('passport_id_card', { current: bankCardInfo.cardImages.length })
|
||||
}}</span>
|
||||
<img src="../../assets/icon/arrow.png" alt="" style="width: 6vw" @click="gotoKYC" />
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 4px">
|
||||
@ -361,13 +366,13 @@
|
||||
</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">
|
||||
{{ bankCardInfo.contactNumber }}
|
||||
</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">
|
||||
{{ bankCardInfo.description }}
|
||||
</div>
|
||||
@ -394,7 +399,7 @@
|
||||
}"
|
||||
@click="CashOut"
|
||||
>
|
||||
Cash out
|
||||
{{ t('cash_out') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -426,10 +431,9 @@
|
||||
"
|
||||
@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">
|
||||
Cash withdrawals require review. Pleasewait patiently for the cash to arrive afterthe
|
||||
review is passed.
|
||||
{{ t('cash_withdrawal_tips') }}
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
@ -450,7 +454,7 @@
|
||||
"
|
||||
@click="Receive"
|
||||
>
|
||||
Receive
|
||||
{{ t('receive') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -459,9 +463,10 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import MobileHeader from '@/components/MobileHeader.vue'
|
||||
import GeneralHeader from '@/components/GeneralHeader.vue'
|
||||
import {
|
||||
getBankBalance,
|
||||
userBankTransfer,
|
||||
@ -474,9 +479,14 @@ import { setApplyInfo, getApplyInfo } from '@/utils/applyStore.js'
|
||||
import maskLayer from '@/components/MaskLayer.vue'
|
||||
import { withdrawApply } from '@/api/bdCenter.js'
|
||||
import { getUserId } from '@/utils/userStore.js'
|
||||
import { setDocumentDirection } from '@/locales/i18n'
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
const router = useRouter()
|
||||
|
||||
// 监听语言变化并设置文档方向
|
||||
locale.value && setDocumentDirection(locale.value)
|
||||
|
||||
const availableIncome = ref('')
|
||||
const selectedCoin = ref(null)
|
||||
const selectedExchangeOption = ref(null)
|
||||
@ -564,7 +574,7 @@ const fetchBankBalance = async () => {
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch bank balance:', error)
|
||||
availableIncome.value = '-'
|
||||
showError(error.response.errorMsg)
|
||||
showError(error.response?.errorMsg || t('failed_to_load_balance'))
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
@ -620,12 +630,12 @@ const selectExchangeOption = (option) => {
|
||||
|
||||
const transfer = async () => {
|
||||
if (!selectedCoin.value) {
|
||||
showError('Please select an amount first')
|
||||
showError(t('please_select_amount'))
|
||||
return
|
||||
}
|
||||
|
||||
if (!selectedPayee.id) {
|
||||
showError('Please select a payee first')
|
||||
showError(t('please_select_payee'))
|
||||
return
|
||||
}
|
||||
|
||||
@ -640,21 +650,23 @@ const transfer = async () => {
|
||||
try {
|
||||
const response = await userBankTransfer(transferData)
|
||||
if (response.status) {
|
||||
showSuccess(`Successfully transferred $${selectedCoinData.price} to ${selectedPayee.name}`)
|
||||
showSuccess(
|
||||
t('transfer_success', { price: selectedCoinData.price, name: selectedPayee.name })
|
||||
)
|
||||
selectedCoin.value = null
|
||||
await fetchBankBalance()
|
||||
} else {
|
||||
showError(`Failed to transfer $${selectedCoinData.price}`)
|
||||
showError(t('transfer_failed', { price: selectedCoinData.price }))
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Transfer failed:', error)
|
||||
showError(error.response.errorMsg)
|
||||
showError(error.response?.errorMsg || t('transfer_error'))
|
||||
}
|
||||
}
|
||||
|
||||
const handleExchange = async () => {
|
||||
if (!selectedExchangeOption.value) {
|
||||
showError('Please select an amount first')
|
||||
showError(t('please_select_coin_amount'))
|
||||
return
|
||||
}
|
||||
|
||||
@ -671,7 +683,7 @@ const handleExchange = async () => {
|
||||
})
|
||||
|
||||
if (response.status === true || response.errorCode === 0) {
|
||||
showSuccess(`Successfully exchanged`)
|
||||
showSuccess(t('exchange_success', { price: selectedOption.cash }))
|
||||
|
||||
// 刷新银行余额
|
||||
await fetchBankBalance()
|
||||
@ -680,7 +692,7 @@ const handleExchange = async () => {
|
||||
selectedExchangeOption.value = null
|
||||
} catch (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
|
||||
} catch (error) {
|
||||
maskLayerShow.value = false
|
||||
showError(error.response.errorMsg)
|
||||
showError(error.response?.errorMsg || t('something_went_wrong'))
|
||||
}
|
||||
}
|
||||
|
||||
@ -722,6 +734,13 @@ onUnmounted(() => {
|
||||
|
||||
.transfer {
|
||||
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 {
|
||||
@ -753,4 +772,18 @@ onUnmounted(() => {
|
||||
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>
|
||||
|
||||
@ -2,8 +2,9 @@
|
||||
<div class="fullPage">
|
||||
<GeneralHeader
|
||||
style="width: 100%"
|
||||
title="Details"
|
||||
color="color: rgba(0, 0, 0, 0.80)"
|
||||
:title="t('salary_details')"
|
||||
:showLanguageList="true"
|
||||
color="black"
|
||||
backImg="/src/assets/icon/arrowBackBlack.png"
|
||||
/>
|
||||
|
||||
@ -23,7 +24,7 @@
|
||||
"
|
||||
>
|
||||
<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>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||
@ -46,7 +47,7 @@
|
||||
: 'linear-gradient(248deg, #FF7578 5.66%, #FF3D40 42.49%)',
|
||||
}"
|
||||
>
|
||||
{{ record.status }}
|
||||
{{ getStatusText(record.status) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -63,7 +64,7 @@
|
||||
gap: 8px;
|
||||
"
|
||||
>
|
||||
<div style="font-weight: 700">Transfer</div>
|
||||
<div style="font-weight: 700">{{ t('transfer') }}</div>
|
||||
<div
|
||||
style="
|
||||
padding: 12px;
|
||||
@ -101,7 +102,9 @@
|
||||
</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>
|
||||
|
||||
<!-- 其他记录 -->
|
||||
@ -138,8 +141,15 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import GeneralHeader from '@/components/GeneralHeader.vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { setDocumentDirection } from '@/locales/i18n'
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
// 监听语言变化并设置文档方向
|
||||
locale.value && setDocumentDirection(locale.value)
|
||||
|
||||
// Cash Out 记录数据
|
||||
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) => {
|
||||
console.log('头像资源出错')
|
||||
e.target.onerror = null //防止循环
|
||||
@ -235,4 +259,14 @@ onMounted(() => {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
/* RTL支持 */
|
||||
[dir='rtl'] .avatar {
|
||||
margin-right: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .user-info {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user