Skip to content

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

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

parent b639055e
Hide 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() {
<i class="iconfont icon-gift text-[14px] text-[#000dff]"></i>
<n-ellipsis>
<n-number-animation
<!-- <n-number-animation
v-if="userStore.equityInfo.points"
:from="0"
:to="userStore.equityInfo.points"
:precision="2"
/>
/> -->
<span v-if="userStore.equityInfo.points">{{ userStore.equityInfo.points }}</span>
<span v-else class="ml-[5px]">-</span>
</n-ellipsis>
</span>
......
src/views/equity/components/gift-pack-list.vue
View file @ 69ef3c03
<script setup lang="ts">
import { useSystemLanguageStore } from '@/store/modules/system-language'
import { useUserStore } from '@/store/modules/user'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
type VersionName = 'BasicVersion' | 'ProfessionalVersion' | 'FlagshipVersion' | 'EnterpriseVersion' | null
......@@ -9,6 +11,9 @@ const currentSelectVersion = defineModel<VersionName>('currentSelectVersion', {
const { t } = useI18n()
const userStore = useUserStore()
const systemLanguageStore = useSystemLanguageStore()
const isEnglishLanguage = computed(() => systemLanguageStore.currentLanguageInfo.key === 'en')
function handleVersionSwitch(version: VersionName) {
if (
......@@ -32,7 +37,10 @@ function handleVersionSwitch(version: VersionName) {
class="mt-[31px] grid grid-flow-row-dense gap-[29px]"
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
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"
......@@ -58,25 +66,30 @@ function handleVersionSwitch(version: VersionName) {
</div>
<div class="mt-[12px]">
<ul class="ml-[42px]">
<li class="mb-[14px] flex items-center text-[14px] text-[#010448]">
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#D8D8D8]"></span>
{{ t('equity_module.points2') }}：<span class="font-600">50</span>
<ul class="pr-[8px]" :class="isEnglishLanguage ? 'ml-[12px]' : 'ml-[42px]'">
<li class="mb-[14px] flex text-[14px] text-[#010448]">
<span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#D8D8D8]"></span>
<div>{{ t('equity_module.points2') }}：<span class="font-600">50</span></div>
</li>
<li class="mb-[14px] flex items-center text-[14px] text-[#010448]">
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#D8D8D8]"></span>
{{ t('equity_module.upper_application_limit') }}：
<span class="font-600">5{{ t('equity_module.individual') }}</span>
<li class="mb-[14px] flex text-[14px] text-[#010448]">
<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') }}：
<span class="font-600">5 {{ t('equity_module.individual') }}</span>
</div>
</li>
<li class="mb-[14px] flex items-center text-[14px] text-[#010448]">
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#D8D8D8]"></span>
{{ t('equity_module.number_of_knowledge_base_files') }}：<span class="font-600"
>5{{ t('equity_module.individual') }}</span
>
<li class="mb-[14px] flex text-[14px] text-[#010448]">
<span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#D8D8D8]"></span>
<div>
{{ t('equity_module.number_of_knowledge_base_files') }}：
<span class="font-600">5 {{ t('equity_module.individual') }}</span>
</div>
</li>
<li class="mb-[14px] flex items-center text-[14px] text-[#010448]">
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#D8D8D8]"></span>
{{ t('equity_module.support_ai_model') }}：<span class="font-600">{{ t('common_module.all') }}</span>
<li class="mb-[14px] flex text-[14px] text-[#010448]">
<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>
</div>
</li>
</ul>
</div>
......@@ -84,7 +97,10 @@ function handleVersionSwitch(version: VersionName) {
<section
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
v-if="userStore.equityInfo.equityLevel === 'professional'"
......@@ -128,29 +144,35 @@ function handleVersionSwitch(version: VersionName) {
</div>
<div class="mt-[12px]">
<ul class="ml-[42px]">
<li class="mb-[14px] flex items-center text-[14px] text-[#482801]">
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#EBD8BE]"></span>
{{ t('equity_module.points2') }}：
<span class="font-600"
>{{ t('equity_module.monthly_pass') }} 100/{{ t('equity_module.annual_card') }} 1500</span
>
<ul :class="isEnglishLanguage ? 'ml-[12px]' : 'ml-[42px]'">
<li class="mb-[14px] flex text-[14px] text-[#482801]">
<span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#EBD8BE]"></span>
<div>
{{ t('equity_module.points2') }}：
<span class="font-600"
>{{ t('equity_module.monthly_pass') }} 100/{{ t('equity_module.annual_card') }} 1500</span
>
</div>
</li>
<li class="mb-[14px] flex items-center text-[14px] text-[#482801]">
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#EBD8BE]"></span>
{{ t('equity_module.upper_application_limit') }}：<span class="font-600"
>30{{ t('equity_module.individual') }}</span
>
<li class="mb-[14px] flex text-[14px] text-[#482801]">
<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') }}：
<span class="font-600">30{{ t('equity_module.individual') }}</span>
</div>
</li>
<li class="mb-[14px] flex items-center text-[14px] text-[#482801]">
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#EBD8BE]"></span>
{{ t('equity_module.number_of_knowledge_base_files') }}：<span class="font-600"
>50{{ t('equity_module.individual') }}</span
>
<li class="mb-[14px] flex text-[14px] text-[#482801]">
<span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#EBD8BE]"></span>
<div>
{{ t('equity_module.number_of_knowledge_base_files') }}：
<span class="font-600">50{{ t('equity_module.individual') }}</span>
</div>
</li>
<li class="mb-[14px] flex items-center text-[14px] text-[#482801]">
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#EBD8BE]"></span>
{{ t('equity_module.support_ai_model') }}：<span class="font-600">{{ t('common_module.all') }}</span>
<li class="mb-[14px] flex text-[14px] text-[#482801]">
<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>
</div>
</li>
</ul>
</div>
......@@ -158,7 +180,10 @@ function handleVersionSwitch(version: VersionName) {
<section
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
v-if="userStore.equityInfo.equityLevel === 'ultimate'"
......@@ -202,35 +227,46 @@ function handleVersionSwitch(version: VersionName) {
</div>
<div class="mt-[12px]">
<ul class="ml-[42px]">
<li class="mb-[14px] flex items-center text-[14px] text-[#482801]">
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#EBD8BE]"></span>
{{ t('equity_module.points2') }}：<span class="font-600"
>{{ t('equity_module.monthly_pass') }} 200/{{ t('equity_module.annual_card') }} 3000</span
>
<ul class="pr-[8px]" :class="isEnglishLanguage ? 'ml-[12px]' : 'ml-[42px]'">
<li class="mb-[14px] flex text-[14px] text-[#482801]">
<span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#EBD8BE]"></span>
<div>
{{ t('equity_module.points2') }}：
<span class="font-600">
{{ t('equity_module.monthly_pass') }} 200/{{ t('equity_module.annual_card') }} 3000
</span>
</div>
</li>
<li class="mb-[14px] flex items-center text-[14px] text-[#482801] before:mr-[5px]">
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#EBD8BE]"></span>
{{ t('equity_module.upper_application_limit') }}：
<span class="font-600">{{ t('common_module.unlimited_amount') }}</span>
<li class="mb-[14px] flex text-[14px] text-[#482801] before:mr-[5px]">
<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') }}：
<span class="font-600">{{ t('common_module.unlimited_amount') }}</span>
</div>
</li>
<li class="mb-[14px] flex items-center text-[14px] text-[#482801]">
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#EBD8BE]"></span>
{{ t('equity_module.number_of_knowledge_base_files') }}：<span class="font-600"
>100{{ t('equity_module.individual') }}</span
>
<li class="mb-[14px] flex text-[14px] text-[#482801]">
<span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#EBD8BE]"></span>
<div>
{{ t('equity_module.number_of_knowledge_base_files') }}：
<span class="font-600">100{{ t('equity_module.individual') }}</span>
</div>
</li>
<li class="mb-[14px] flex items-center text-[14px] text-[#482801]">
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#EBD8BE]"></span>
{{ t('equity_module.support_ai_model') }}：<span class="font-600">{{ t('common_module.all') }}</span>
<li class="mb-[14px] flex text-[14px] text-[#482801]">
<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>
</div>
</li>
</ul>
</div>
</section>
<section
class="relative h-[452px] rounded-[10px] border border-[#D2D2D0] bg-[#F8F8F8]"
:class="currentSelectVersion === 'EnterpriseVersion' ? 'border-[#000000] !bg-[#86785B]' : ''"
class="relative rounded-[10px] border border-[#D2D2D0] bg-[#F8F8F8]"
:class="[
currentSelectVersion === 'EnterpriseVersion' ? 'border-[#000000] !bg-[#86785B]' : '',
isEnglishLanguage ? 'h-[492px]' : 'h-[452px]',
]"
>
<!-- <div
v-if="userStore.equityInfo.equityLevel === 'ultimate'"
......@@ -269,63 +305,76 @@ function handleVersionSwitch(version: VersionName) {
</button>
</div>
<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]"
class="mb-[14px] flex text-[14px] text-[#482801]"
:class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''"
>
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#C7C2AB]"></span>
{{ t('equity_module.points2') }}：<span class="font-600 text-[#FFE0A0]">{{
t('common_module.unlimited_amount')
}}</span>
<span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#C7C2AB]"></span>
<div>
{{ t('equity_module.points2') }}：
<span class="font-600 text-[#FFE0A0]">{{ t('common_module.unlimited_amount') }}</span>
</div>
</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]' : ''"
>
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#C7C2AB]"></span>
{{ t('equity_module.upper_application_limit') }}：
<span class="font-600 text-[#FFE0A0]">{{ t('common_module.unlimited_amount') }}</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') }}：
<span class="font-600 text-[#FFE0A0]">{{ t('common_module.unlimited_amount') }}</span>
</div>
</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]' : ''"
>
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#C7C2AB]"></span>
{{ t('equity_module.number_of_knowledge_base_files') }}：
<span class="font-600 text-[#FFE0A0]">{{ t('common_module.unlimited_amount') }}</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') }}：
<span class="font-600 text-[#FFE0A0]">{{ t('common_module.unlimited_amount') }}</span>
</div>
</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]' : ''"
>
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#C7C2AB]"></span>
{{ t('equity_module.support_ai_model') }}：
<span class="font-600 text-[#FFE0A0]">{{ t('common_module.all') }}</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') }}：
<span class="font-600 text-[#FFE0A0]">{{ t('common_module.all') }}</span>
</div>
</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]' : ''"
>
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#C7C2AB]"></span>
{{ t('equity_module.custom_digital_person') }}：
<span class="font-600 text-[#FFE0A0]">{{ t('common_module.support') }}</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') }}：
<span class="font-600 text-[#FFE0A0]">{{ t('common_module.support') }}</span>
</div>
</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]' : ''"
>
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#C7C2AB]"></span>
{{ t('equity_module.ai_training_tuning_service') }}：
<span class="font-600 text-[#FFE0A0]">{{ t('common_module.support') }}</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') }}：
<span class="font-600 text-[#FFE0A0]">{{ t('common_module.support') }}</span>
</div>
</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]' : ''"
>
<span class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full bg-[#C7C2AB]"></span>
{{ t('equity_module.private_deployment') }}：
<span class="font-600 text-[#FFE0A0]">{{ t('common_module.support') }}</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') }}：
<span class="font-600 text-[#FFE0A0]">{{ t('common_module.support') }}</span>
</div>
</li>
</ul>
</div>
......
src/views/equity/components/point-recharge-modal.vue
View file @ 69ef3c03
......@@ -5,14 +5,16 @@ import {
fetchGetPayStatus,
fetchGetPointsGiftPackageList,
} from '@/apis/equity'
import { useSystemLanguageStore } from '@/store/modules/system-language'
import { useUserStore } from '@/store/modules/user'
import { ref, watch } from 'vue'
import { computed, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
const isShowPointRechargeModal = defineModel<boolean>('isShowPointRechargeModal', { default: false })
const { t } = useI18n()
const userStore = useUserStore()
const systemLanguageStore = useSystemLanguageStore()
const currentSelectPackage = ref<0 | 1 | 2>(0) // 1：100积分 2：350积分 3：600积分
const currentPaymentMethod = ref<'alipay' | 'wechatpay'>('alipay')
......@@ -45,6 +47,8 @@ const currentPayPrice = ref(0)
let payStatusTimer: NodeJS.Timeout | null = null
let controller: AbortController | null = null
const isEnglishLanguage = computed(() => systemLanguageStore.currentLanguageInfo.key === 'en')
watch(isShowPointRechargeModal, (newVal) => {
if (newVal) {
getPointsGiftPackageList()
......@@ -230,7 +234,7 @@ function handlePayQrCodeRefresh() {
:on-after-leave="onModalAfterLeave"
>
<div v-if="!pointsGiftPackageListLoading">
<ul class="mt-[10px] flex h-[255px]">
<ul class="mt-[10px] flex" :class="isEnglishLanguage ? 'h-[285px]' : 'h-[255px]'">
<li
v-for="(packageItem, packageIndex) in pointsGiftPackageList"
:key="packageItem.id"
......@@ -261,13 +265,15 @@ function handlePayQrCodeRefresh() {
{{ t('common_module.buy_now') }}
</button>
<ul class="ml-[20px] mt-[26px]">
<li class="mb-[8px] flex items-center text-[14px] text-[#482801]">
<ul class="ml-[20px] mt-[26px] pr-[8px]">
<li class="mb-[8px] flex text-[14px] text-[#482801]">
<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]'"
></span>
{{ t('equity_module.get_points_for_interacting_with_the_ai', { points: packageItem.points }) }}
<div class="text-start">
{{ t('equity_module.get_points_for_interacting_with_the_ai', { points: packageItem.points }) }}
</div>
</li>
<li class="mb-[8px] flex items-center text-[14px] text-[#482801]">
<span
......@@ -339,19 +345,19 @@ function handlePayQrCodeRefresh() {
<div class="mt-[10px] flex items-center justify-center">
<template v-if="currentPaymentMethod === '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]"
>{{ t('common_module.alipay') }} {{ t('equity_module.scan_code_payment')
}}<span class="text-[24px] text-[#F25744]">{{ currentPayPrice }}</span
>￥</span
>
<span class="font-600 text-[16px]">
{{ t('common_module.alipay') }} {{ t('equity_module.scan_code_payment') }}
<span class="text-[24px] text-[#F25744]">{{ currentPayPrice }}</span>
￥
</span>
</template>
<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" />
<span class="font-600 text-[16px]"
>{{ t('common_module.wechat') }} {{ t('equity_module.scan_code_payment')
}}<span class="text-[24px] text-[#F25744]">{{ currentPayPrice }}</span
>￥</span
>
<span class="font-600 text-[16px]">
{{ t('common_module.wechat') }} {{ t('equity_module.scan_code_payment') }}
<span class="text-[24px] text-[#F25744]"> {{ currentPayPrice }}</span>
￥
</span>
</template>
</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