Skip to content

P
poc-fe
Commit 69ef3c03 authored by tyyin lan's avatar tyyin lan
Browse files
Options

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

parent b639055e
Show whitespace changes
Inline Side-by-side
Showing with 163 additions and 107 deletions
src/layout/components/sidebar/sidebar.vue
View file @ 69ef3c03
...@@ -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>
......
src/views/equity/components/gift-pack-list.vue
View file @ 69ef3c03
<script setup lang="ts"> <script setup lang="ts">
import { useSystemLanguageStore } from '@/store/modules/system-language'
import { useUserStore } from '@/store/modules/user' import { useUserStore } from '@/store/modules/user'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
type VersionName = 'BasicVersion' | 'ProfessionalVersion' | 'FlagshipVersion' | 'EnterpriseVersion' | null type VersionName = 'BasicVersion' | 'ProfessionalVersion' | 'FlagshipVersion' | 'EnterpriseVersion' | null
...@@ -9,6 +11,9 @@ const currentSelectVersion = defineModel<VersionName>('currentSelectVersion', { ...@@ -9,6 +11,9 @@ const currentSelectVersion = defineModel<VersionName>('currentSelectVersion', {
const { t } = useI18n() const { t } = useI18n()
const userStore = useUserStore() const userStore = useUserStore()
const systemLanguageStore = useSystemLanguageStore()
const isEnglishLanguage = computed(() => systemLanguageStore.currentLanguageInfo.key === 'en')
function handleVersionSwitch(version: VersionName) { function handleVersionSwitch(version: VersionName) {
if ( if (
...@@ -32,7 +37,10 @@ function handleVersionSwitch(version: VersionName) { ...@@ -32,7 +37,10 @@ function handleVersionSwitch(version: VersionName) {
class="mt-[31px] grid grid-flow-row-dense gap-[29px]" class="mt-[31px] grid grid-flow-row-dense gap-[29px]"
style="grid-template-columns: repeat(auto-fill, minmax(255px, 1fr))" style="grid-template-columns: repeat(auto-fill, minmax(255px, 1fr))"
> >
<section class="relative h-[452px] rounded-[10px] border border-[#CFD3D4] bg-[#FBFCFF]"> <section
class="relative h-[452px] rounded-[10px] border border-[#CFD3D4] bg-[#FBFCFF]"
:class="[isEnglishLanguage ? 'h-[492px]' : 'h-[452px]']"
>
<div <div
v-if="userStore.equityInfo.equityLevel === 'normal'" v-if="userStore.equityInfo.equityLevel === 'normal'"
class="z-1 absolute left-[-1px] top-0 -translate-y-1/2 rounded-[2px_16px_2px_2px] px-[10px] py-[6px] text-[12px] text-white" class="z-1 absolute left-[-1px] top-0 -translate-y-1/2 rounded-[2px_16px_2px_2px] px-[10px] py-[6px] text-[12px] text-white"
...@@ -58,25 +66,30 @@ function handleVersionSwitch(version: VersionName) { ...@@ -58,25 +66,30 @@ function handleVersionSwitch(version: VersionName) {
</div> </div>
<div class="mt-[12px]"> <div class="mt-[12px]">
<ul class="ml-[42px]"> <ul class="pr-[8px]" :class="isEnglishLanguage ? 'ml-[12px]' : 'ml-[42px]'">
<li class="mb-[14px] flex items-center text-[14px] text-[#010448]"> <li class="mb-[14px] flex text-[14px] text-[#010448]">
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#D8D8D8]"></span> <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#D8D8D8]"></span>
{{ t('equity_module.points2') }}：<span class="font-600">50</span> <div>{{ t('equity_module.points2') }}：<span class="font-600">50</span></div>
</li> </li>
<li class="mb-[14px] flex items-center text-[14px] text-[#010448]"> <li class="mb-[14px] flex text-[14px] text-[#010448]">
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#D8D8D8]"></span> <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#D8D8D8]"></span>
<div>
{{ t('equity_module.upper_application_limit') }}： {{ t('equity_module.upper_application_limit') }}：
<span class="font-600">5{{ t('equity_module.individual') }}</span> <span class="font-600">5 {{ t('equity_module.individual') }}</span>
</div>
</li> </li>
<li class="mb-[14px] flex items-center text-[14px] text-[#010448]"> <li class="mb-[14px] flex text-[14px] text-[#010448]">
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#D8D8D8]"></span> <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#D8D8D8]"></span>
{{ t('equity_module.number_of_knowledge_base_files') }}：<span class="font-600" <div>
>5{{ t('equity_module.individual') }}</span {{ t('equity_module.number_of_knowledge_base_files') }}：
> <span class="font-600">5 {{ t('equity_module.individual') }}</span>
</div>
</li> </li>
<li class="mb-[14px] flex items-center text-[14px] text-[#010448]"> <li class="mb-[14px] flex text-[14px] text-[#010448]">
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#D8D8D8]"></span> <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#D8D8D8]"></span>
<div>
{{ t('equity_module.support_ai_model') }}：<span class="font-600">{{ t('common_module.all') }}</span> {{ t('equity_module.support_ai_model') }}：<span class="font-600">{{ t('common_module.all') }}</span>
</div>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -84,7 +97,10 @@ function handleVersionSwitch(version: VersionName) { ...@@ -84,7 +97,10 @@ function handleVersionSwitch(version: VersionName) {
<section <section
class="relative h-[452px] rounded-[10px] border border-[#F4DEC5] bg-[#FFFDFB] transition-all" class="relative h-[452px] rounded-[10px] border border-[#F4DEC5] bg-[#FFFDFB] transition-all"
:class="currentSelectVersion === 'ProfessionalVersion' ? 'border-[#FFC07B] !bg-[#FFF7ED]' : ''" :class="[
currentSelectVersion === 'ProfessionalVersion' ? 'border-[#FFC07B] !bg-[#FFF7ED]' : '',
isEnglishLanguage ? 'h-[492px]' : 'h-[452px]',
]"
> >
<div <div
v-if="userStore.equityInfo.equityLevel === 'professional'" v-if="userStore.equityInfo.equityLevel === 'professional'"
...@@ -128,29 +144,35 @@ function handleVersionSwitch(version: VersionName) { ...@@ -128,29 +144,35 @@ function handleVersionSwitch(version: VersionName) {
</div> </div>
<div class="mt-[12px]"> <div class="mt-[12px]">
<ul class="ml-[42px]"> <ul :class="isEnglishLanguage ? 'ml-[12px]' : 'ml-[42px]'">
<li class="mb-[14px] flex items-center text-[14px] text-[#482801]"> <li class="mb-[14px] flex text-[14px] text-[#482801]">
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#EBD8BE]"></span> <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#EBD8BE]"></span>
<div>
{{ t('equity_module.points2') }}： {{ t('equity_module.points2') }}：
<span class="font-600" <span class="font-600"
>{{ t('equity_module.monthly_pass') }} 100/{{ t('equity_module.annual_card') }} 1500</span >{{ t('equity_module.monthly_pass') }} 100/{{ t('equity_module.annual_card') }} 1500</span
> >
</div>
</li> </li>
<li class="mb-[14px] flex items-center text-[14px] text-[#482801]"> <li class="mb-[14px] flex text-[14px] text-[#482801]">
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#EBD8BE]"></span> <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#EBD8BE]"></span>
{{ t('equity_module.upper_application_limit') }}：<span class="font-600" <div>
>30{{ t('equity_module.individual') }}</span {{ t('equity_module.upper_application_limit') }}：
> <span class="font-600">30{{ t('equity_module.individual') }}</span>
</div>
</li> </li>
<li class="mb-[14px] flex items-center text-[14px] text-[#482801]"> <li class="mb-[14px] flex text-[14px] text-[#482801]">
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#EBD8BE]"></span> <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#EBD8BE]"></span>
{{ t('equity_module.number_of_knowledge_base_files') }}：<span class="font-600" <div>
>50{{ t('equity_module.individual') }}</span {{ t('equity_module.number_of_knowledge_base_files') }}：
> <span class="font-600">50{{ t('equity_module.individual') }}</span>
</div>
</li> </li>
<li class="mb-[14px] flex items-center text-[14px] text-[#482801]"> <li class="mb-[14px] flex text-[14px] text-[#482801]">
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#EBD8BE]"></span> <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#EBD8BE]"></span>
<div>
{{ t('equity_module.support_ai_model') }}：<span class="font-600">{{ t('common_module.all') }}</span> {{ t('equity_module.support_ai_model') }}：<span class="font-600">{{ t('common_module.all') }}</span>
</div>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -158,7 +180,10 @@ function handleVersionSwitch(version: VersionName) { ...@@ -158,7 +180,10 @@ function handleVersionSwitch(version: VersionName) {
<section <section
class="relative h-[452px] rounded-[10px] border border-[#F4DEC5] bg-[#FFFDFB]" class="relative h-[452px] rounded-[10px] border border-[#F4DEC5] bg-[#FFFDFB]"
:class="currentSelectVersion === 'FlagshipVersion' ? 'border-[#FFC07B] !bg-[#FFF7ED]' : ''" :class="[
currentSelectVersion === 'FlagshipVersion' ? 'border-[#FFC07B] !bg-[#FFF7ED]' : '',
isEnglishLanguage ? 'h-[492px]' : 'h-[452px]',
]"
> >
<div <div
v-if="userStore.equityInfo.equityLevel === 'ultimate'" v-if="userStore.equityInfo.equityLevel === 'ultimate'"
...@@ -202,35 +227,46 @@ function handleVersionSwitch(version: VersionName) { ...@@ -202,35 +227,46 @@ function handleVersionSwitch(version: VersionName) {
</div> </div>
<div class="mt-[12px]"> <div class="mt-[12px]">
<ul class="ml-[42px]"> <ul class="pr-[8px]" :class="isEnglishLanguage ? 'ml-[12px]' : 'ml-[42px]'">
<li class="mb-[14px] flex items-center text-[14px] text-[#482801]"> <li class="mb-[14px] flex text-[14px] text-[#482801]">
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#EBD8BE]"></span> <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#EBD8BE]"></span>
{{ t('equity_module.points2') }}：<span class="font-600" <div>
>{{ t('equity_module.monthly_pass') }} 200/{{ t('equity_module.annual_card') }} 3000</span {{ t('equity_module.points2') }}：
> <span class="font-600">
{{ t('equity_module.monthly_pass') }} 200/{{ t('equity_module.annual_card') }} 3000
</span>
</div>
</li> </li>
<li class="mb-[14px] flex items-center text-[14px] text-[#482801] before:mr-[5px]"> <li class="mb-[14px] flex text-[14px] text-[#482801] before:mr-[5px]">
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#EBD8BE]"></span> <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#EBD8BE]"></span>
<div>
{{ t('equity_module.upper_application_limit') }}： {{ t('equity_module.upper_application_limit') }}：
<span class="font-600">{{ t('common_module.unlimited_amount') }}</span> <span class="font-600">{{ t('common_module.unlimited_amount') }}</span>
</div>
</li> </li>
<li class="mb-[14px] flex items-center text-[14px] text-[#482801]"> <li class="mb-[14px] flex text-[14px] text-[#482801]">
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#EBD8BE]"></span> <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#EBD8BE]"></span>
{{ t('equity_module.number_of_knowledge_base_files') }}：<span class="font-600" <div>
>100{{ t('equity_module.individual') }}</span {{ t('equity_module.number_of_knowledge_base_files') }}：
> <span class="font-600">100{{ t('equity_module.individual') }}</span>
</div>
</li> </li>
<li class="mb-[14px] flex items-center text-[14px] text-[#482801]"> <li class="mb-[14px] flex text-[14px] text-[#482801]">
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#EBD8BE]"></span> <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#EBD8BE]"></span>
<div>
{{ t('equity_module.support_ai_model') }}：<span class="font-600">{{ t('common_module.all') }}</span> {{ t('equity_module.support_ai_model') }}：<span class="font-600">{{ t('common_module.all') }}</span>
</div>
</li> </li>
</ul> </ul>
</div> </div>
</section> </section>
<section <section
class="relative h-[452px] rounded-[10px] border border-[#D2D2D0] bg-[#F8F8F8]" class="relative rounded-[10px] border border-[#D2D2D0] bg-[#F8F8F8]"
:class="currentSelectVersion === 'EnterpriseVersion' ? 'border-[#000000] !bg-[#86785B]' : ''" :class="[
currentSelectVersion === 'EnterpriseVersion' ? 'border-[#000000] !bg-[#86785B]' : '',
isEnglishLanguage ? 'h-[492px]' : 'h-[452px]',
]"
> >
<!-- <div <!-- <div
v-if="userStore.equityInfo.equityLevel === 'ultimate'" v-if="userStore.equityInfo.equityLevel === 'ultimate'"
...@@ -269,63 +305,76 @@ function handleVersionSwitch(version: VersionName) { ...@@ -269,63 +305,76 @@ function handleVersionSwitch(version: VersionName) {
</button> </button>
</div> </div>
<div class="mt-[12px]"> <div class="mt-[12px]">
<ul class="ml-[42px]"> <ul class="pr-[8px]" :class="isEnglishLanguage ? 'ml-[12px]' : 'ml-[42px]'">
<li <li
class="mb-[14px] flex items-center text-[14px] text-[#482801]" class="mb-[14px] flex text-[14px] text-[#482801]"
:class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''" :class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''"
> >
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#C7C2AB]"></span> <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#C7C2AB]"></span>
{{ t('equity_module.points2') }}：<span class="font-600 text-[#FFE0A0]">{{ <div>
t('common_module.unlimited_amount') {{ t('equity_module.points2') }}：
}}</span> <span class="font-600 text-[#FFE0A0]">{{ t('common_module.unlimited_amount') }}</span>
</div>
</li> </li>
<li <li
class="mb-[14px] flex items-center text-[14px] text-[#482801]" class="mb-[14px] flex text-[14px] text-[#482801]"
:class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''" :class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''"
> >
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#C7C2AB]"></span> <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#C7C2AB]"></span>
<div>
{{ t('equity_module.upper_application_limit') }}： {{ t('equity_module.upper_application_limit') }}：
<span class="font-600 text-[#FFE0A0]">{{ t('common_module.unlimited_amount') }}</span> <span class="font-600 text-[#FFE0A0]">{{ t('common_module.unlimited_amount') }}</span>
</div>
</li> </li>
<li <li
class="mb-[14px] flex items-center text-[14px] text-[#482801]" class="mb-[14px] flex text-[14px] text-[#482801]"
:class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''" :class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''"
> >
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#C7C2AB]"></span> <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#C7C2AB]"></span>
<div>
{{ t('equity_module.number_of_knowledge_base_files') }}： {{ t('equity_module.number_of_knowledge_base_files') }}：
<span class="font-600 text-[#FFE0A0]">{{ t('common_module.unlimited_amount') }}</span> <span class="font-600 text-[#FFE0A0]">{{ t('common_module.unlimited_amount') }}</span>
</div>
</li> </li>
<li <li
class="mb-[14px] flex items-center text-[14px] text-[#482801]" class="mb-[14px] flex text-[14px] text-[#482801]"
:class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''" :class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''"
> >
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#C7C2AB]"></span> <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#C7C2AB]"></span>
<div>
{{ t('equity_module.support_ai_model') }}： {{ t('equity_module.support_ai_model') }}：
<span class="font-600 text-[#FFE0A0]">{{ t('common_module.all') }}</span> <span class="font-600 text-[#FFE0A0]">{{ t('common_module.all') }}</span>
</div>
</li> </li>
<li <li
class="mb-[14px] flex items-center text-[14px] text-[#482801]" class="mb-[14px] flex text-[14px] text-[#482801]"
:class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''" :class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''"
> >
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#C7C2AB]"></span> <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#C7C2AB]"></span>
<div>
{{ t('equity_module.custom_digital_person') }}： {{ t('equity_module.custom_digital_person') }}：
<span class="font-600 text-[#FFE0A0]">{{ t('common_module.support') }}</span> <span class="font-600 text-[#FFE0A0]">{{ t('common_module.support') }}</span>
</div>
</li> </li>
<li <li
class="mb-[14px] flex items-center text-[14px] text-[#482801]" class="mb-[14px] flex text-[14px] text-[#482801]"
:class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''" :class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''"
> >
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#C7C2AB]"></span> <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#C7C2AB]"></span>
<div>
{{ t('equity_module.ai_training_tuning_service') }}： {{ t('equity_module.ai_training_tuning_service') }}：
<span class="font-600 text-[#FFE0A0]">{{ t('common_module.support') }}</span> <span class="font-600 text-[#FFE0A0]">{{ t('common_module.support') }}</span>
</div>
</li> </li>
<li <li
class="mb-[14px] flex items-center text-[14px] text-[#482801]" class="mb-[14px] flex text-[14px] text-[#482801]"
:class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''" :class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''"
> >
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#C7C2AB]"></span> <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#C7C2AB]"></span>
<div>
{{ t('equity_module.private_deployment') }}： {{ t('equity_module.private_deployment') }}：
<span class="font-600 text-[#FFE0A0]">{{ t('common_module.support') }}</span> <span class="font-600 text-[#FFE0A0]">{{ t('common_module.support') }}</span>
</div>
</li> </li>
</ul> </ul>
</div> </div>
......
src/views/equity/components/point-recharge-modal.vue
View file @ 69ef3c03
...@@ -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