feat(提现相关页面): 使用新的头部组件，对接语言切换功能并调整布局
This commit is contained in:
hzj
parent
510d527531
commit
22bc2d3898
@ -230,5 +230,8 @@
|
||||
"upload_failed": "فشل التحميل",
|
||||
"please_enter_contact_number": "يرجى إدخال رقم الاتصال",
|
||||
|
||||
"invite_user_to_become_bd": "دعوة المستخدم ليصبح BD"
|
||||
"invite_user_to_become_bd": "دعوة المستخدم ليصبح BD",
|
||||
|
||||
"under_review": "قيد المراجعة",
|
||||
"approved": "موافق عليه"
|
||||
}
|
||||
|
||||
@ -230,5 +230,8 @@
|
||||
"upload_failed": "Upload failed",
|
||||
"please_enter_contact_number": "Please enter contact number",
|
||||
|
||||
"invite_user_to_become_bd": "Invite User To Become BD"
|
||||
"invite_user_to_become_bd": "Invite User To Become BD",
|
||||
|
||||
"under_review": "Under review",
|
||||
"approved": "Approved"
|
||||
}
|
||||
|
||||
@ -230,5 +230,8 @@
|
||||
"upload_failed": "上传失败",
|
||||
"please_enter_contact_number": "请输入联系电话",
|
||||
|
||||
"invite_user_to_become_bd": "邀请用户成为BD"
|
||||
"invite_user_to_become_bd": "邀请用户成为BD",
|
||||
|
||||
"under_review": "审核中",
|
||||
"approved": "已批准"
|
||||
}
|
||||
|
||||
@ -1,12 +1,15 @@
|
||||
// src/views/Wallet/CashOut/CashOut.vue
|
||||
<template>
|
||||
<div class="fullPage">
|
||||
<GeneralHeader
|
||||
style="width: 100%"
|
||||
title="Cash out"
|
||||
color="color: rgba(0, 0, 0, 0.80)"
|
||||
:title="t('cash_out')"
|
||||
color="rgba(0, 0, 0, 0.80)"
|
||||
:backImg="imgUrl"
|
||||
:showLanguageList="true"
|
||||
/>
|
||||
|
||||
<!-- 其余内容保持不变 -->
|
||||
<div style="padding: 16px">
|
||||
<!-- 信息部分 -->
|
||||
<div>
|
||||
@ -18,10 +21,10 @@
|
||||
margin-bottom: 10px;
|
||||
"
|
||||
>
|
||||
<div style="font-weight: 600">Information</div>
|
||||
<div style="font-weight: 600">{{ t('information') }}</div>
|
||||
<div style="display: flex; align-items: center" @click="lookDetails">
|
||||
<div style="color: rgba(0, 0, 0, 0.4)">Details</div>
|
||||
<img src="../../../assets/icon/arrow.png" alt="" style="width: 6vw" />
|
||||
<div style="color: rgba(0, 0, 0, 0.4)">{{ t('details') }}</div>
|
||||
<img class="flipImg" src="../../../assets/icon/arrow.png" alt="" style="width: 6vw" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -33,7 +36,7 @@
|
||||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
|
||||
"
|
||||
>
|
||||
<span style="font-weight: 510; font-size: 0.8em">Withdrawable amount: </span>
|
||||
<span style="font-weight: 510; font-size: 0.8em">{{ t('available_salaries') }} </span>
|
||||
<span style="font-weight: 700; color: #333">{{
|
||||
currentAmount.availableAmount || 0
|
||||
}}</span>
|
||||
@ -62,18 +65,19 @@
|
||||
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 class="flipImg" src="../../../assets/icon/arrow.png" alt="" style="width: 6vw" />
|
||||
</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
|
||||
class="flipImg"
|
||||
src="../../../assets/icon/arrow.png"
|
||||
alt=""
|
||||
style="width: 6vw"
|
||||
@ -90,13 +94,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>
|
||||
@ -123,7 +127,7 @@
|
||||
}"
|
||||
@click="CashOut"
|
||||
>
|
||||
Cash out
|
||||
{{ t('cash_out') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -152,14 +156,12 @@
|
||||
gap: 8px;
|
||||
"
|
||||
>
|
||||
<div style="font-weight: 800; font-size: 1.2em">Tips</div>
|
||||
<div style="font-weight: 800; font-size: 1.2em">{{ t('tips') }}</div>
|
||||
<div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.9em">
|
||||
Please fill in the information carefully. You can only withdraw cash after the
|
||||
information is completed.
|
||||
{{ t('cash_withdrawal_tips') }}
|
||||
</div>
|
||||
<div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.7em">
|
||||
*lf there is a problem with the card number and the transfer cannot be made, it will
|
||||
result in the review being.
|
||||
*{{ t('cash_withdrawal_tips') }}
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center; align-items: center">
|
||||
<div
|
||||
@ -176,7 +178,7 @@
|
||||
"
|
||||
@click="Receive"
|
||||
>
|
||||
Receive
|
||||
{{ t('receive') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -186,6 +188,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import GeneralHeader from '@/components/GeneralHeader.vue'
|
||||
import maskLayer from '@/components/MaskLayer.vue'
|
||||
import {
|
||||
@ -195,9 +198,15 @@ import {
|
||||
import { setApplyInfo, getApplyInfo } from '@/utils/applyStore.js'
|
||||
import { ref, onMounted, computed, onUnmounted } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { setDocumentDirection } from '@/locales/i18n'
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
// 监听语言变化并设置文档方向
|
||||
locale.value && setDocumentDirection(locale.value)
|
||||
|
||||
const activityId = route.query.activityId || ''
|
||||
const imgUrl = new URL('../../../assets/icon/arrowBackBlack.png', import.meta.url).href
|
||||
|
||||
@ -303,4 +312,9 @@ onUnmounted(() => {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
/* RTL支持 */
|
||||
[dir='rtl'] .flipImg {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,12 @@
|
||||
// src/views/Wallet/CashOut/Details.vue
|
||||
<template>
|
||||
<div class="fullPage">
|
||||
<GeneralHeader style="width: 100%" title="Details" color="color: rgba(0, 0, 0, 0.80)" />
|
||||
<GeneralHeader
|
||||
style="width: 100%"
|
||||
:title="t('details')"
|
||||
color="rgba(0, 0, 0, 0.80)"
|
||||
:showLanguageList="true"
|
||||
/>
|
||||
|
||||
<div style="padding: 16px; display: flex; flex-direction: column; gap: 12px">
|
||||
<div
|
||||
@ -16,7 +22,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">
|
||||
@ -48,22 +54,29 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import GeneralHeader from '@/components/GeneralHeader.vue'
|
||||
import { ref, onMounted, watch, computed } from 'vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { formatUTCCustom } from '@/utils/utcFormat.js'
|
||||
import { setDocumentDirection } from '@/locales/i18n'
|
||||
import {
|
||||
withdrawRecords, //获取可提现金额
|
||||
} from '@/api/lottery'
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
// 监听语言变化并设置文档方向
|
||||
locale.value && setDocumentDirection(locale.value)
|
||||
|
||||
const records = ref([])
|
||||
|
||||
const showStatus = (item) => {
|
||||
if (item.status == 0) {
|
||||
return 'Under review'
|
||||
return t('under_review')
|
||||
} else if (item.status == 1) {
|
||||
return 'Approved'
|
||||
return t('approved')
|
||||
} else if (item.status == 2) {
|
||||
return 'Rejection'
|
||||
return t('rejection')
|
||||
}
|
||||
}
|
||||
|
||||
@ -121,4 +134,9 @@ onMounted(() => {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
/* RTL支持 */
|
||||
[dir='rtl'] .flipImg {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user