手机号增添不同国家的区号全

pages/start/login/login.vue

@@ -45,7 +45,7 @@
       />
       <view v-else class="phone-input-container">
         <view class="country-code-selector" @click="showCountryPicker">
-          <text class="country-flag">{{ selectedCountry.flag }}</text>
+          <image class="country-flag-img" :src="selectedCountry.flag" mode="aspectFit"></image>
           <text class="country-code">{{ selectedCountry.code }}</text>
           <text class="arrow-down">▼</text>
         </view>
@@ -96,6 +96,8 @@
 
 <script setup>
 import { ref } from "vue";
+// 导入完整的国家列表
+import countryList from './list.js';
 
 const email = ref("");
 const phone = ref("");
@@ -103,29 +105,22 @@ const agreed = ref(false);
 const switchType = ref("Email"); // 默认是邮箱注册
 const { safeAreaInsets } = uni.getSystemInfoSync();
 
-// 国家前缀数据（添加国旗）
-const countries = ref([
-  { name: '中国', code: '+86', flag: '🇨🇳' },
-  { name: '美国', code: '+1', flag: '🇺🇸' },
-  { name: '英国', code: '+44', flag: '🇬🇧' },
-  { name: '日本', code: '+81', flag: '🇯🇵' },
-  { name: '韩国', code: '+82', flag: '🇰🇷' },
-  { name: '德国', code: '+49', flag: '🇩🇪' },
-  { name: '法国', code: '+33', flag: '🇫🇷' },
-  { name: '加拿大', code: '+1', flag: '🇨🇦' },
-  { name: '澳大利亚', code: '+61', flag: '🇦🇺' },
-  { name: '俄罗斯', code: '+7', flag: '🇷🇺' },
-  { name: '印度', code: '+91', flag: '🇮🇳' },
-  { name: '巴西', code: '+55', flag: '🇧🇷' },
-]);
-
-// 默认选中的国家
-const selectedCountry = ref(countries.value[0]);
+// 使用从list.js导入的完整国家列表数据
+const countries = ref(countryList.list.map(item => ({
+  name: item.name,
+  code: `+${item.tel}`,
+  flag: item.flag,
+  short: item.short,
+  en: item.en
+})));
+
+// 默认选中的国家（中国）
+const selectedCountry = ref(countries.value.find(country => country.short === 'CN') || countries.value[0]);
 
 // 显示国家选择器
 function showCountryPicker() {
   uni.showActionSheet({
-    itemList: countries.value.map(country => `${country.flag} ${country.name} ${country.code}`),
+    itemList: countries.value.map(country => `${country.name} ${country.code}`),
     success: function (res) {
       selectedCountry.value = countries.value[res.tapIndex];
     }
@@ -326,7 +321,7 @@ function onPhoneInput(e) {
 .phone-input-container {
   display: flex;
   align-items: center;
-  width: 90%;
+  width: 95.8%;
   height: 80rpx;
   border-radius: 20rpx;
   border: 2rpx solid #e5e5e5;
@@ -340,7 +335,7 @@ function onPhoneInput(e) {
   padding: 0 20rpx;
   height: 100%;
   border-right: 2rpx solid #e5e5e5;
-  background-color: #f0f0f0;
+  background-color: #f5f5f5;
   border-radius: 20rpx 0 0 20rpx;
 }
 
@@ -350,8 +345,9 @@ function onPhoneInput(e) {
   margin-right: 10rpx;
 }
 
-.country-flag {
-  font-size: 32rpx;
+.country-flag-img {
+  width: 40rpx;
+  height: 40rpx;
   margin-right: 10rpx;
 }