From 0232b2bac8bc13c8091741570e18104163d3411a Mon Sep 17 00:00:00 2001
From: Ethereal <3432649580@qq.com>
Date: Wed, 22 Oct 2025 19:25:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=8B=E6=9C=BA=E5=8F=B7=E5=A2=9E=E6=B7=BB?=
 =?UTF-8?q?=E4=B8=8D=E5=90=8C=E5=9B=BD=E5=AE=B6=E7=9A=84=E5=8C=BA=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/start/login/login.vue | 169 ++++++++++++++++++++++++++++++++++----------
 1 file changed, 132 insertions(+), 37 deletions(-)

diff --git a/pages/start/login/login.vue b/pages/start/login/login.vue
index 8e8726f..719c532 100644
--- a/pages/start/login/login.vue
+++ b/pages/start/login/login.vue
@@ -1,10 +1,10 @@
 <template>
-  <view
-    class="login-registration-container"
-   
-  >
+  <view class="login-registration-container">
     <!-- 自定义导航栏 -->
-    <view 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,24 +43,22 @@
         placeholder="输入邮箱/用户名"
         v-model="email"
       />
-      <input
-        v-else
-        class="input-field"
-        type="text"
-        placeholder="输入手机号"
-        v-model="phone"
-      />
+      <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
+          class="input-field phone-input"
+          type="number"
+          placeholder="输入手机号"
+          v-model="phone"
+          @input="onPhoneInput"
+        />
+      </view>
     </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> -->
-
     <!-- 注册按钮 -->
     <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,23 +148,33 @@ function switchPhone() {
 }
 
 function register() {
-  // 注册逻辑
-  if (!email.value) {
-    uni.showToast({
-      title: "请输入邮箱地址",
-      icon: "none",
-    });
-    return;
+  if (switchType.value === "Email") {
+    // 登录逻辑
+    if (!email.value) {
+      uni.showToast({
+        title: "请输入邮箱地址",
+        icon: "none",
+      });
+      return;
+    }
+
+    // 发送登录请求
+    console.log("登录:", email.value);
   }
-  if (!agreed.value) {
-    uni.showToast({
-      title: "请同意用户协议和隐私政策",
-      icon: "none",
-    });
-    return;
+
+  if(switchType.value === "Phone"){
+    // 登录逻辑
+    if (!phone.value) {
+      uni.showToast({
+        title: "请输入手机号码",
+        icon: "none",
+      });
+      return;
+    }
+
+    // 发送登录请求
+    console.log("登录:", phone.value);
   }
-  // 发送注册请求
-  console.log("注册:", email.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;