登陆页操作流程调整

src/assets/styles/pages/login.scss

@@ -336,6 +336,22 @@
   50% { opacity: 0; }
 }
 
+/* ==================== 验证码发送状态提示 ==================== */
+.login-view__sms-status {
+  width: 100%;
+  font-size: 0.13rem;
+  line-height: 0.16rem;
+  color: #64748B;
+  text-align: center;
+  padding-right: 0.1rem;
+  margin-top: -0.19rem;
+  margin-bottom: -0.10rem;
+}
+
+.login-view__sms-status--error {
+  color: #E85635;
+}
+
 /* ==================== 状态按钮（步骤二） ==================== */
 .login-view__status-btn {
   width: 100%;

src/views/Login.vue

@@ -78,7 +78,7 @@
           <!-- 标题 -->
           <div class="login-view__heading">
             <h2 class="login-view__title">请输入验证码</h2>
-            <p class="login-view__subtitle">短信验证码已发送至 +86{{ phone }}</p>
+            <p class="login-view__subtitle">短信验证码已发送至 +86{{ phone }} <span class="fw600 ml5 cursor-po" @click="handleChangePhone">修改手机号</span></p>
           </div>
           <!-- 6位验证码输入框 -->
           <div class="login-view__otp-wrap" @click="focusOtpInput">
@@ -109,6 +109,8 @@
               <span v-else-if="idx === otpValue.length && !isLoggingIn" class="login-view__otp-cursor"></span>
             </div>
           </div>
+          <!-- 验证码发送状态提示 -->
+          <p v-if="smsStatusMsg" class="login-view__sms-status" :class="{ 'login-view__sms-status--error': smsStatusIsError }">{{ smsStatusMsg }}</p>
           <!-- 状态按钮 — 三种状态：登录中 / 倒计时 / 再次发送 -->
           <button
             class="login-view__status-btn"
@@ -178,6 +180,10 @@ const countdown = ref(0)
 let countdownTimer: ReturnType<typeof setInterval> | null = null
 /** 是否正在调用登录接口 */
 const isLoggingIn = ref(false)
+/** 验证码发送状态提示文字 */
+const smsStatusMsg = ref('')
+/** 状态提示是否为错误样式 */
+const smsStatusIsError = ref(false)
 /** OTP 输入框引用 */
 const otpInputRef = ref<HTMLInputElement | null>(null)
 
@@ -199,6 +205,21 @@ function focusOtpInput() {
   otpInputRef.value?.focus()
 }
 
+/** 修改手机号 — 回到步骤一并清空所有状态 */
+function handleChangePhone() {
+  step.value = 1
+  phone.value = ''
+  otpValue.value = ''
+  countdown.value = 0
+  smsStatusMsg.value = ''
+  smsStatusIsError.value = false
+  isLoggingIn.value = false
+  if (countdownTimer) {
+    clearInterval(countdownTimer)
+    countdownTimer = null
+  }
+}
+
 /** 开始60秒倒计时 */
 function startCountdown() {
   countdown.value = 60
@@ -224,7 +245,8 @@ async function handleSendCode() {
   try {
     const res = await sendSmsCode(phone.value)
     if (res.code === '0') {
-      ElMessage.success('验证码已发送')
+      smsStatusMsg.value = '验证码发送成功，请输入'
+      smsStatusIsError.value = false
       // 进入步骤二
       step.value = 2
       // 开始倒计时
@@ -233,15 +255,20 @@ async function handleSendCode() {
       nextTick(() => focusOtpInput())
     } else if (res.msg && res.msg.includes('请勿重复发送')) {
       // 之前发送过的验证码仍有效，直接进入步骤二让用户输入
-      ElMessage.warning(res.msg)
+      smsStatusMsg.value = '验证码还在有效期内，请输入'
+      smsStatusIsError.value = false
       step.value = 2
       startCountdown()
       nextTick(() => focusOtpInput())
     } else {
-      ElMessage.error(res.msg || '验证码发送失败')
+      smsStatusMsg.value = res.msg || '验证码发送失败'
+      smsStatusIsError.value = true
     }
-  } catch {
-    // 错误已在 request 拦截器中统一处理
+  } catch (err: any) {
+    // HTTP 500 等异常，拦截器已弹提示，这里同步显示到状态文字
+    const msg = err?.response?.data?.msg || '验证码发送失败'
+    smsStatusMsg.value = msg
+    smsStatusIsError.value = true
   }
 }
 
@@ -261,15 +288,22 @@ async function handleResendCode() {
   try {
     const res = await sendSmsCode(phone.value)
     if (res.code === '0') {
-      ElMessage.success('验证码已发送')
+      smsStatusMsg.value = '验证码发送成功，请输入'
+      smsStatusIsError.value = false
       otpValue.value = ''
       startCountdown()
       nextTick(() => focusOtpInput())
+    } else if (res.msg && res.msg.includes('请勿重复发送')) {
+      smsStatusMsg.value = '验证码还在有效期内，请输入'
+      smsStatusIsError.value = false
     } else {
-      ElMessage.error(res.msg || '验证码发送失败')
+      smsStatusMsg.value = res.msg || '验证码发送失败'
+      smsStatusIsError.value = true
     }
-  } catch {
-    // 错误已在 request 拦截器中统一处理
+  } catch (err: any) {
+    const msg = err?.response?.data?.msg || '验证码发送失败'
+    smsStatusMsg.value = msg
+    smsStatusIsError.value = true
   }
 }