duanshuwen/nianxx-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(login): add country flags to login country picker

Browse Source 
Update the country selection UI to show national flags alongside country names and dial codes. Add a helper function to fetch flag images from flagcdn using country ISO2 codes. Restyle the country picker popup for better layout, and remove the unused selectedCountryDisplay computed property.
This commit is contained in:
DEV_DSW
2026-06-02 10:13:36 +08:00
parent fe32095c67
commit 3031a7fd3b
1 changed files with 29 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/pages/login/index.vue
View File

@@ -3,8 +3,15 @@
<div class="flex-1 flex flex-col items-center justify-center">
<div>
<section>
<van-cell :title="t('common.login.fields.country')" :value="selectedCountryDisplay" is-link
@click="countryPopupVisible = true" />
<van-cell :title="t('common.login.fields.country')" is-link @click="countryPopupVisible = true">
<template #value>
<span class="inline-flex items-center gap-2">
<img class="w-[20px] h-[15px] object-cover rounded-[2px]"
:src="getCountryFlagPngUrl(selectedCountry.iso2)" alt="" loading="lazy" />
<span>{{ selectedCountry.name }} ({{ selectedCountry.dialCode }})</span>
</span>
</template>
</van-cell>
<van-field v-model="phone" type="tel" clearable :label="t('common.login.fields.phone')"
:placeholder="t('common.login.placeholders.phone')" autocomplete="tel" />
@@ -46,13 +53,22 @@
</div>
<van-popup v-model:show="countryPopupVisible" round position="bottom" class="h-[70vh]">
<div class="h-full flex flex-col px-[12px]">
<div>
<div class="h-full flex flex-col ">
<div class="border-b border-[#E5E5E5]">
<van-search v-model="countrySearch" :placeholder="t('common.login.placeholders.selectCountry')" shape="round" />
</div>
<div class="flex-1 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
<van-cell v-for="item in filteredCountries" :key="`${item.iso2}-${item.dialCode}`" :title="item.name"
:label="item.iso2" :value="item.dialCode" @click="handleSelectCountry(item)" />
<div
class="flex-1 px-[12px] overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
<van-cell v-for="item in filteredCountries" :key="`${item.iso2}-${item.dialCode}`" :value="item.dialCode"
@click="handleSelectCountry(item)">
<template #title>
<span class="inline-flex items-center gap-2">
<img class="w-[20px] h-[15px] object-cover rounded-[2px]" :src="getCountryFlagPngUrl(item.iso2)" alt=""
loading="lazy" />
<span>{{ item.name }}</span>
</span>
</template>
</van-cell>
</div>
</div>
</van-popup>
@@ -83,6 +99,12 @@ const languageOptions = [
const currentLocale = computed(() => getCurrentLocale());
const switchLanguage = (locale: string) => setLocale(locale);
function getCountryFlagPngUrl(iso2: string): string {
const country = (iso2 ?? "").trim().toLowerCase();
if (!/^[a-z]{2}$/.test(country)) return "https://flagcdn.com/w40/un.png";
return `https://flagcdn.com/w40/${country}.png`;
}
const selectedCountry = ref(
findCountryCallingCode(
(() => {
@@ -98,10 +120,6 @@ const phone = ref("");
const code = ref("");
const phoneSubmitting = ref(false);
const selectedCountryDisplay = computed(() => {
return `${selectedCountry.value.name} (${selectedCountry.value.dialCode})`;
});
const filteredCountries = computed(() => {
const q = countrySearch.value.trim().toLowerCase();
if (!q) {