From 3031a7fd3b0c34e88a6ff55dbaafa9b2da65dcb9 Mon Sep 17 00:00:00 2001
From: DEV_DSW <562304744@qq.com>
Date: Tue, 2 Jun 2026 10:13:36 +0800
Subject: [PATCH] feat(login): add country flags to login country picker

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.
---
 src/pages/login/index.vue | 40 ++++++++++++++++++++++++++++-----------
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index 0492bcc..b9ba119 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -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) {