Commit 69ef3c03 authored by tyyin lan's avatar tyyin lan

chore(积分充值): 英语语言页面布局适配

parent b639055e
...@@ -144,12 +144,13 @@ function handleNavigateToEquity() { ...@@ -144,12 +144,13 @@ function handleNavigateToEquity() {
<i class="iconfont icon-gift text-[14px] text-[#000dff]"></i> <i class="iconfont icon-gift text-[14px] text-[#000dff]"></i>
<n-ellipsis> <n-ellipsis>
<n-number-animation <!-- <n-number-animation
v-if="userStore.equityInfo.points" v-if="userStore.equityInfo.points"
:from="0" :from="0"
:to="userStore.equityInfo.points" :to="userStore.equityInfo.points"
:precision="2" :precision="2"
/> /> -->
<span v-if="userStore.equityInfo.points">{{ userStore.equityInfo.points }}</span>
<span v-else class="ml-[5px]">-</span> <span v-else class="ml-[5px]">-</span>
</n-ellipsis> </n-ellipsis>
</span> </span>
......
...@@ -5,14 +5,16 @@ import { ...@@ -5,14 +5,16 @@ import {
fetchGetPayStatus, fetchGetPayStatus,
fetchGetPointsGiftPackageList, fetchGetPointsGiftPackageList,
} from '@/apis/equity' } from '@/apis/equity'
import { useSystemLanguageStore } from '@/store/modules/system-language'
import { useUserStore } from '@/store/modules/user' import { useUserStore } from '@/store/modules/user'
import { ref, watch } from 'vue' import { computed, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
const isShowPointRechargeModal = defineModel<boolean>('isShowPointRechargeModal', { default: false }) const isShowPointRechargeModal = defineModel<boolean>('isShowPointRechargeModal', { default: false })
const { t } = useI18n() const { t } = useI18n()
const userStore = useUserStore() const userStore = useUserStore()
const systemLanguageStore = useSystemLanguageStore()
const currentSelectPackage = ref<0 | 1 | 2>(0) // 1:100积分 2:350积分 3:600积分 const currentSelectPackage = ref<0 | 1 | 2>(0) // 1:100积分 2:350积分 3:600积分
const currentPaymentMethod = ref<'alipay' | 'wechatpay'>('alipay') const currentPaymentMethod = ref<'alipay' | 'wechatpay'>('alipay')
...@@ -45,6 +47,8 @@ const currentPayPrice = ref(0) ...@@ -45,6 +47,8 @@ const currentPayPrice = ref(0)
let payStatusTimer: NodeJS.Timeout | null = null let payStatusTimer: NodeJS.Timeout | null = null
let controller: AbortController | null = null let controller: AbortController | null = null
const isEnglishLanguage = computed(() => systemLanguageStore.currentLanguageInfo.key === 'en')
watch(isShowPointRechargeModal, (newVal) => { watch(isShowPointRechargeModal, (newVal) => {
if (newVal) { if (newVal) {
getPointsGiftPackageList() getPointsGiftPackageList()
...@@ -230,7 +234,7 @@ function handlePayQrCodeRefresh() { ...@@ -230,7 +234,7 @@ function handlePayQrCodeRefresh() {
:on-after-leave="onModalAfterLeave" :on-after-leave="onModalAfterLeave"
> >
<div v-if="!pointsGiftPackageListLoading"> <div v-if="!pointsGiftPackageListLoading">
<ul class="mt-[10px] flex h-[255px]"> <ul class="mt-[10px] flex" :class="isEnglishLanguage ? 'h-[285px]' : 'h-[255px]'">
<li <li
v-for="(packageItem, packageIndex) in pointsGiftPackageList" v-for="(packageItem, packageIndex) in pointsGiftPackageList"
:key="packageItem.id" :key="packageItem.id"
...@@ -261,13 +265,15 @@ function handlePayQrCodeRefresh() { ...@@ -261,13 +265,15 @@ function handlePayQrCodeRefresh() {
{{ t('common_module.buy_now') }} {{ t('common_module.buy_now') }}
</button> </button>
<ul class="ml-[20px] mt-[26px]"> <ul class="ml-[20px] mt-[26px] pr-[8px]">
<li class="mb-[8px] flex items-center text-[14px] text-[#482801]"> <li class="mb-[8px] flex text-[14px] text-[#482801]">
<span <span
class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full" class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full"
:class="currentSelectPackage === packageIndex ? 'bg-[#FFEAC8]' : 'bg-[#EBD8BE]'" :class="currentSelectPackage === packageIndex ? 'bg-[#FFEAC8]' : 'bg-[#EBD8BE]'"
></span> ></span>
<div class="text-start">
{{ t('equity_module.get_points_for_interacting_with_the_ai', { points: packageItem.points }) }} {{ t('equity_module.get_points_for_interacting_with_the_ai', { points: packageItem.points }) }}
</div>
</li> </li>
<li class="mb-[8px] flex items-center text-[14px] text-[#482801]"> <li class="mb-[8px] flex items-center text-[14px] text-[#482801]">
<span <span
...@@ -339,19 +345,19 @@ function handlePayQrCodeRefresh() { ...@@ -339,19 +345,19 @@ function handlePayQrCodeRefresh() {
<div class="mt-[10px] flex items-center justify-center"> <div class="mt-[10px] flex items-center justify-center">
<template v-if="currentPaymentMethod === 'alipay'"> <template v-if="currentPaymentMethod === 'alipay'">
<img class="mr-[5px] mt-[6px] h-[16px] w-[16px]" src="@/assets/images/equity/alipay-icon.png" alt="alipay" /> <img class="mr-[5px] mt-[6px] h-[16px] w-[16px]" src="@/assets/images/equity/alipay-icon.png" alt="alipay" />
<span class="font-600 text-[16px]" <span class="font-600 text-[16px]">
>{{ t('common_module.alipay') }} {{ t('equity_module.scan_code_payment') {{ t('common_module.alipay') }} {{ t('equity_module.scan_code_payment') }}
}}<span class="text-[24px] text-[#F25744]">{{ currentPayPrice }}</span <span class="text-[24px] text-[#F25744]">{{ currentPayPrice }}</span>
></span
> </span>
</template> </template>
<template v-else-if="currentPaymentMethod === 'wechatpay'"> <template v-else-if="currentPaymentMethod === 'wechatpay'">
<img class="mr-[5px] mt-[6px] h-[16px] w-[16px]" src="@/assets/images/equity/wechat-icon.png" alt="alipay" /> <img class="mr-[5px] mt-[6px] h-[16px] w-[16px]" src="@/assets/images/equity/wechat-icon.png" alt="alipay" />
<span class="font-600 text-[16px]" <span class="font-600 text-[16px]">
>{{ t('common_module.wechat') }} {{ t('equity_module.scan_code_payment') {{ t('common_module.wechat') }} {{ t('equity_module.scan_code_payment') }}
}}<span class="text-[24px] text-[#F25744]">{{ currentPayPrice }}</span <span class="text-[24px] text-[#F25744]"> {{ currentPayPrice }}</span>
></span
> </span>
</template> </template>
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment