feat(login): add language switcher and refine page layout

add language switcher with Chinese, English and Thai options at login page bottom
integrate i18n locale switching functionality
restructure login page container for better content centering
adjust van-cell styles to remove side padding and full-width border
This commit is contained in:
DEV_DSW
2026-06-02 09:59:05 +08:00
parent 3398bc2644
commit fe32095c67

View File

@@ -1,6 +1,7 @@
<template> <template>
<div class="h-[100dvh] flex flex-col items-center justify-center px-4 overflow-hidden bg-white"> <div class="h-[100dvh] flex flex-col px-[12px] overflow-hidden bg-white">
<div class="px-[12px]"> <div class="flex-1 flex flex-col items-center justify-center">
<div>
<section> <section>
<van-cell :title="t('common.login.fields.country')" :value="selectedCountryDisplay" is-link <van-cell :title="t('common.login.fields.country')" :value="selectedCountryDisplay" is-link
@click="countryPopupVisible = true" /> @click="countryPopupVisible = true" />
@@ -33,9 +34,20 @@
</div> </div>
</div> </div>
<!-- 语种切换 -->
<div class="flex justify-center items-center gap-4 pb-4">
<span v-for="lang in languageOptions" :key="lang.locale"
class="text-xs transition-colors duration-200 text-[14px]"
:class="currentLocale === lang.locale ? 'text-[#00C853] font-medium' : 'text-[#999]'"
@click="switchLanguage(lang.locale)">
{{ lang.label }}
</span>
</div>
</div>
<van-popup v-model:show="countryPopupVisible" round position="bottom" class="h-[70vh]"> <van-popup v-model:show="countryPopupVisible" round position="bottom" class="h-[70vh]">
<div class="h-full flex flex-col"> <div class="h-full flex flex-col px-[12px]">
<div class="p-3"> <div>
<van-search v-model="countrySearch" :placeholder="t('common.login.placeholders.selectCountry')" shape="round" /> <van-search v-model="countrySearch" :placeholder="t('common.login.placeholders.selectCountry')" shape="round" />
</div> </div>
<div class="flex-1 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"> <div class="flex-1 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
@@ -51,7 +63,7 @@ import { computed, nextTick, onMounted, ref } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { oauthToken } from "@/api/login"; import { oauthToken } from "@/api/login";
import { COUNTRY_CALLING_CODES, findCountryCallingCode } from "@/constants/countryCallingCodes"; import { COUNTRY_CALLING_CODES, findCountryCallingCode } from "@/constants/countryCallingCodes";
import { getCurrentLocale } from "@/i18n"; import { getCurrentLocale, setLocale } from "@/i18n";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
const router = useRouter(); const router = useRouter();
@@ -63,6 +75,14 @@ const googleButtonRendered = ref(false);
const countryPopupVisible = ref(false); const countryPopupVisible = ref(false);
const countrySearch = ref(""); const countrySearch = ref("");
const languageOptions = [
{ locale: "zh-CN", label: "中文" },
{ locale: "en-US", label: "English" },
{ locale: "th-TH", label: "ภาษาไทย" },
];
const currentLocale = computed(() => getCurrentLocale());
const switchLanguage = (locale: string) => setLocale(locale);
const selectedCountry = ref( const selectedCountry = ref(
findCountryCallingCode( findCountryCallingCode(
(() => { (() => {
@@ -272,6 +292,16 @@ onMounted(() => {
border-radius: 50px !important; border-radius: 50px !important;
} }
:deep(.van-cell) {
padding-left: 0;
padding-right: 0;
&::after {
left: 0;
right: 0;
}
}
.login-main-btn { .login-main-btn {
height: 44px; height: 44px;
} }