增添手机验证码登录

pages/start/login/login.vue

@@ -5,11 +5,17 @@
       class="custom-navbar"
       :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
     >
-      <view class="nav-left">
+      <!-- <view class="nav-left">
         <text class="back-btn" @click="goToIndex">＜</text>
-      </view>
+      </view> -->
       <view class="nav-right">
-        <text class="headphone-btn">🎧</text>
+        <image class="icons" src="../../../static/icons/Headset.png" alt="" />
+        <image
+          class="icons"
+          @click="goToIndex"
+          src="../../../static/icons/Frame.png"
+          alt=""
+        />
       </view>
     </view>
 
@@ -36,22 +42,36 @@
     </view>
     <!-- 输入框 -->
     <view class="input-container">
-      <input
-        v-if="switchType === 'Email'"
-        class="input-field"
-        type="text"
-        placeholder="输入邮箱/用户名"
-        v-model="email"
-      />
+      <view v-if="switchType === 'Email'">
+        <!-- 修改邮箱输入框容器，将图标包含在内 -->
+        <view class="input-with-icon">
+          <image class="input-icon" src="../../../static/icons/People-safe.png" alt="" />
+          <input
+            class="input-field"
+            type="text"
+            placeholder="请输入邮箱/DeepChart ID"
+            v-model="email"
+          />
+        </view>
+        <view class="input-with-icon">
+          <image class="input-icon" src="../../../static/icons/Unlock.png" alt="" />
+          <input
+            class="input-field"
+            type="text"
+            placeholder="请输入密码"
+            v-model="password"
+          />
+        </view>
+      </view>
       <view v-else class="phone-input-container">
         <view class="country-code-selector" @click="showCountryPicker">
           <image
             class="country-flag-img"
-            :src="selectedCountry.flag"
+            src="../../../static/icons/Iphone.png"
             mode="aspectFit"
           ></image>
           <text class="country-code">{{ selectedCountry.code }}</text>
-          <text class="arrow-down">▼</text>
+          <!-- <text class="arrow-down">▼</text> -->
         </view>
         <input
           class="input-field phone-input"
@@ -60,7 +80,27 @@
           v-model="phone"
           @input="onPhoneInput"
         />
+        <view>
+          <button 
+            class="send-code-btn" 
+            :disabled="isCodeBtnDisabled" 
+            :class="{ 'send-code-btn-disabled': isCodeBtnDisabled }"
+            @click="sendCode">
+            <text class="send-code-text"
+            :class="{ 'send-code-btn-disabled-text': isCodeBtnDisabled }"
+            >{{ codeBtnText }}</text>
+          </button>
+        </view>
       </view>
+          <view v-if="switchType === 'Phone'" class="input-with-icon">
+          <image class="input-icon" src="../../../static/icons/Text-recognition.png" alt="" />
+          <input
+            class="input-field"
+            type="text"
+            placeholder="请输入密码"
+            v-model="password"
+          />
+        </view>
     </view>
 
     <!-- 注册按钮 -->
@@ -74,7 +114,7 @@
       <view class="third-party-btn" @click="loginWithApple">
         <image
           class="apple-icon"
-          src="/static/apple-icon.png"
+          src="../../../static/icons/appleIcons.png"
           mode="aspectFit"
         ></image>
         <text class="third-party-text">通过 Apple 继续</text>
@@ -83,7 +123,7 @@
       <view class="third-party-btn" @click="loginWithGoogle">
         <image
           class="google-icon"
-          src="/static/google-icon.png"
+          src="../../../static/icons/GoogleIcons.png"
           mode="aspectFit"
         ></image>
         <text class="third-party-text">通过 Google 继续</text>
@@ -104,10 +144,13 @@ import { ref } from "vue";
 import countryList from "./list.js";
 
 const email = ref("");
+const password = ref("");
 const phone = ref("");
 const agreed = ref(false);
 const switchType = ref("Email"); // 默认是邮箱注册
 const { safeAreaInsets } = uni.getSystemInfoSync();
+const codeBtnText = ref("获取验证码");
+const isCodeBtnDisabled = ref(false); // 添加验证码按钮禁用状态
 
 // 使用从list.js导入的完整国家列表数据
 const countries = ref(
@@ -194,15 +237,14 @@ function loginWithApple() {
         provider: "apple",
         success: function (info) {
           // 获取用户信息成功, info.authResult中保存登录认证数据
-		  console.log(info);
+          console.log(info);
         },
       });
     },
     fail: function (err) {
       // 登录授权失败
       // err.code错误码参考`授权失败错误码(code)说明`
-	  console.log(err);
-	  
+      console.log(err);
     },
   });
 }
@@ -218,14 +260,14 @@ function loginWithGoogle() {
         provider: "google",
         success: function (info) {
           // 获取用户信息成功, info.authResult保存用户信息
-		  console.log(info);
+          console.log(info);
         },
       });
     },
     fail: function (err) {
       // 登录授权失败
       // err.code是错误码
-	  console.log(err);
+      console.log(err);
     },
   });
 }
@@ -247,6 +289,29 @@ function onPhoneInput(e) {
     phone.value = value;
   }
 }
+
+function sendCode(){
+  // 如果按钮已禁用，则不执行后续逻辑
+  if (isCodeBtnDisabled.value) return;
+  
+  // 设置按钮为禁用状态
+  isCodeBtnDisabled.value = true;
+  codeBtnText.value = "重新发送"
+  let time = 6
+  const timer = setInterval(() => {
+    time--
+    codeBtnText.value = "重新发送 " + time + "s"
+    if (time <= 0) {
+      clearInterval(timer)
+      codeBtnText.value = "重新发送"
+      // 倒计时结束后启用按钮
+      isCodeBtnDisabled.value = false;
+    }
+  }, 1000)
+  
+
+  return 
+}
 </script>
 
 <style scoped>
@@ -285,6 +350,12 @@ function onPhoneInput(e) {
   justify-content: flex-end;
 }
 
+.icons {
+  margin: 20rpx;
+  width: 40rpx;
+  height: 40rpx;
+  /* margin-right: 10rpx; */
+}
 .back-btn,
 .headphone-btn {
   font-size: 36rpx;
@@ -354,15 +425,30 @@ function onPhoneInput(e) {
   margin-bottom: 40rpx;
 }
 
+/* 添加图标输入框样式 */
+.input-with-icon {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 80rpx;
+  border-bottom: 2rpx solid #e5e5e5;
+  margin-bottom: 20rpx;
+}
+
+.input-icon {
+  width: 40rpx;
+  height: 40rpx;
+  margin: 0 20rpx;
+}
+
 .input-field {
-  width: 90%;
+  flex: 1;
   height: 80rpx;
-  border-radius: 20rpx;
-  border: 2rpx solid #e5e5e5;
-  padding: 0 30rpx;
+  padding: 15rpx 0;
   font-size: 28rpx;
   color: #333333;
-  background-color: #f5f5f5;
+  border: none;
+  background-color: transparent;
 }
 
 .phone-input-container {
@@ -370,19 +456,22 @@ function onPhoneInput(e) {
   align-items: center;
   width: 95.8%;
   height: 80rpx;
-  border-radius: 20rpx;
-  border: 2rpx solid #e5e5e5;
-  background-color: #f5f5f5;
+  /* border-radius: 20rpx; */
+  /* border: 2rpx solid #e5e5e5; */
+  /* background-color: #f5f5f5; */
   padding: 0 10rpx;
+  border-bottom: 2rpx solid #e5e5e5;
+  margin-bottom: 20rpx;
 }
 
 .country-code-selector {
   display: flex;
   align-items: center;
-  padding: 0 20rpx;
+  padding: 0 10rpx;
+  padding-bottom: 1rpx;
   height: 100%;
-  border-right: 2rpx solid #e5e5e5;
-  background-color: #f5f5f5;
+  /* border-right: 2rpx solid #e5e5e5; */
+  /* background-color: #f5f5f5; */
   border-radius: 20rpx 0 0 20rpx;
 }
 
@@ -412,6 +501,31 @@ function onPhoneInput(e) {
   padding: 0 20rpx;
 }
 
+.send-code-btn {
+  width: 200rpx;
+  height: 60rpx;
+  display: inline-flex;
+  padding: 0rpx 10rpx;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 4px;
+  background: #000;
+}
+
+.send-code-btn-disabled {
+  background: #E6E6E6; /* 禁用状态下的灰色背景 */
+}
+.send-code-btn-disabled-text {
+  color: #999999 !important;
+}
+
+
+.send-code-text{
+  color: #fff;
+  font-size: 28rpx;
+}
+
 .agreement-container {
   /* display: flex; */
   align-items: center;
@@ -441,7 +555,7 @@ function onPhoneInput(e) {
 .register-btn {
   width: 100%;
   height: 80rpx;
-  background-color: #333333;
+  background-color: #000000;
   color: white;
   font-size: 32rpx;
   font-weight: bold;