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

pages/start/login/login.vue

@@ -1,10 +1,10 @@
 <template>
+  <view class="login-registration-container">
+    <!-- 自定义导航栏 -->
     <view
-    class="login-registration-container"
-   
+      class="custom-navbar"
+      :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
     >
-    <!-- 自定义导航栏 -->
-    <view class="custom-navbar"  :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
       <view class="nav-left">
         <text class="back-btn" @click="goToIndex">＜</text>
       </view>
@@ -43,23 +43,21 @@
         placeholder="输入邮箱/用户名"
         v-model="email"
       />
+      <view v-else class="phone-input-container">
+        <view class="country-code-selector" @click="showCountryPicker">
+          <text class="country-flag">{{ selectedCountry.flag }}</text>
+          <text class="country-code">{{ selectedCountry.code }}</text>
+          <text class="arrow-down">▼</text>
+        </view>
         <input
-        v-else
-        class="input-field"
-        type="text"
+          class="input-field phone-input"
+          type="number"
           placeholder="输入手机号"
           v-model="phone"
+          @input="onPhoneInput"
         />
       </view>
-
-    <!-- 用户协议 -->
-    <!-- <view class="agreement-container">
-      <checkbox class="checkbox" v-model="agreed" />
-      <text class="agreement-text"
-        >接受 <text class="link">用户协议</text> 和
-        <text class="link">隐私政策</text></text
-      >
-    </view> -->
+    </view>
 
     <!-- 注册按钮 -->
     <button class="register-btn" @click="register">下一步</button>
@@ -105,9 +103,38 @@ 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]);
+
+// 显示国家选择器
+function showCountryPicker() {
+  uni.showActionSheet({
+    itemList: countries.value.map(country => `${country.flag} ${country.name} ${country.code}`),
+    success: function (res) {
+      selectedCountry.value = countries.value[res.tapIndex];
+    }
+  });
+}
+
 function goToIndex() {
   // 返回上一页
-  uni.navigateTo({ url: '/pages/start/index/index' });
+  uni.navigateTo({ url: "/pages/start/index/index" });
 }
 
 function switchEmail() {
@@ -121,7 +148,8 @@ function switchPhone() {
 }
 
 function register() {
-  // 注册逻辑
+  if (switchType.value === "Email") {
+    // 登录逻辑
     if (!email.value) {
       uni.showToast({
         title: "请输入邮箱地址",
@@ -129,15 +157,24 @@ function register() {
       });
       return;
     }
-  if (!agreed.value) {
+
+    // 发送登录请求
+    console.log("登录:", email.value);
+  }
+
+  if(switchType.value === "Phone"){
+    // 登录逻辑
+    if (!phone.value) {
       uni.showToast({
-      title: "请同意用户协议和隐私政策",
+        title: "请输入手机号码",
         icon: "none",
       });
       return;
     }
-  // 发送注册请求
-  console.log("注册:", email.value);
+
+    // 发送登录请求
+    console.log("登录:", phone.value);
+  }
 }
 
 function loginWithApple() {
@@ -156,6 +193,18 @@ function goToRegistration() {
     url: "/pages/start/Registration/Registration",
   });
 }
+
+function onPhoneInput(e) {
+  // 确保只允许输入数字
+  const value = e.detail.value;
+  // 使用 isNaN 检查是否为有效数字
+  if (isNaN(value)) {
+    phone.value = '';
+  } else {
+    phone.value = value;
+  }
+}
+
 </script>
 
 <style scoped>
@@ -274,6 +323,52 @@ function goToRegistration() {
   background-color: #f5f5f5;
 }
 
+.phone-input-container {
+  display: flex;
+  align-items: center;
+  width: 90%;
+  height: 80rpx;
+  border-radius: 20rpx;
+  border: 2rpx solid #e5e5e5;
+  background-color: #f5f5f5;
+  padding: 0 10rpx;
+}
+
+.country-code-selector {
+  display: flex;
+  align-items: center;
+  padding: 0 20rpx;
+  height: 100%;
+  border-right: 2rpx solid #e5e5e5;
+  background-color: #f0f0f0;
+  border-radius: 20rpx 0 0 20rpx;
+}
+
+.country-code {
+  font-size: 28rpx;
+  color: #333333;
+  margin-right: 10rpx;
+}
+
+.country-flag {
+  font-size: 32rpx;
+  margin-right: 10rpx;
+}
+
+.arrow-down {
+  font-size: 20rpx;
+  color: #999999;
+}
+
+.phone-input {
+  flex: 1;
+  width: auto;
+  height: 100%;
+  border: none;
+  background-color: transparent;
+  padding: 0 20rpx;
+}
+
 .agreement-container {
   /* display: flex; */
   align-items: center;