完成40%

pages/auth/a05-reset-password.vue

@@ -38,12 +38,12 @@
                 class="auth-input"
                 type="number"
                 maxlength="11"
-                :disabled="sendingCode || cooldownSeconds > 0 || submitting"
+                :disabled="sendingCode || submitting"
                 placeholder="请输入手机号"
                 placeholder-class="placeholder"
                 :aria-invalid="Boolean(fieldErrors.phone)"
                 :aria-describedby="fieldErrors.phone ? 'a05-phone-error' : undefined"
-                @input="clearFieldError('phone')"
+                @input="handlePhoneInput"
               />
             </view>
             <text v-if="fieldErrors.phone" id="a05-phone-error" class="field-error" role="alert">{{
@@ -208,7 +208,7 @@
 
 <script setup>
 import { computed, ref } from "vue";
-import { onBackPress, onUnload } from "@dcloudio/uni-app";
+import { onBackPress, onShow, onUnload } from "@dcloudio/uni-app";
 import AppDialog from "@/components/AppDialog.vue";
 import AppToast from "@/components/AppToast.vue";
 import AuthPageShell from "@/components/AuthPageShell.vue";
@@ -222,9 +222,11 @@ import {
   AUTH_TAC_SCENE,
   createTacRenderContext,
   isAuthPhone,
+  isSmsDeliveryOutcomeUnknown,
   normalizeCaptchaRequirement,
   normalizeTacSuccess,
 } from "@/utils/auth-verification.js";
+import { createAuthSmsCooldown } from "@/utils/auth-sms-cooldown.js";
 import { runtimeConfig } from "@/utils/config.js";
 import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
 import { calcMD5 } from "@/utils/md5.js";
@@ -251,6 +253,7 @@ const tacContext = ref(null);
 const sendingCode = ref(false);
 const submitting = ref(false);
 const cooldownSeconds = ref(0);
+const sentPhone = ref("");
 const fieldErrors = ref({
   phone: "",
   verificationCode: "",
@@ -267,10 +270,15 @@ const isDirty = computed(() =>
   ),
 );
 let feedbackTimer = null;
-let cooldownTimer = null;
 let tacSequence = 0;
 let pageActive = true;
 const authRequestController = createRequestController();
+const smsCooldown = createAuthSmsCooldown({
+  sceneCode: AUTH_TAC_SCENE.FORGOT_PASSWORD,
+  onChange: (seconds) => {
+    cooldownSeconds.value = seconds;
+  },
+});
 const discardConfirmation = createDiscardConfirmation((visible) => {
   discardVisible.value = visible;
 });
@@ -313,9 +321,10 @@ onUnload(() => {
   pageActive = false;
   authRequestController.abort();
   if (feedbackTimer) clearTimeout(feedbackTimer);
-  if (cooldownTimer) clearInterval(cooldownTimer);
+  smsCooldown.dispose();
   discardConfirmation.dispose();
 });
+onShow(() => smsCooldown.sync());
 
 const showFeedback = (message) => {
   feedbackMessage.value = message;
@@ -331,16 +340,11 @@ const clearFieldError = (field) => {
   fieldErrors.value[field] = "";
 };
 
-const startCooldown = () => {
-  cooldownSeconds.value = 60;
-  if (cooldownTimer) clearInterval(cooldownTimer);
-  cooldownTimer = setInterval(() => {
-    cooldownSeconds.value -= 1;
-    if (cooldownSeconds.value <= 0) {
-      clearInterval(cooldownTimer);
-      cooldownTimer = null;
-    }
-  }, 1000);
+const handlePhoneInput = () => {
+  clearFieldError("phone");
+  if (!sentPhone.value || phone.value === sentPhone.value) return;
+  verificationCode.value = "";
+  sentPhone.value = "";
 };
 
 const prepareGetCode = async () => {
@@ -398,12 +402,19 @@ const completeTac = async (result) => {
       { requestController: authRequestController },
     );
     if (!pageActive) return;
-    startCooldown();
+    sentPhone.value = expectedContext.subject;
+    smsCooldown.start();
     showFeedback("验证码已发送");
   } catch (error) {
     closeTac();
-    if (pageActive && !isRequestCancelled(error)) {
-      showFeedback(error.message || "验证码发送失败");
+    if (pageActive) {
+      if (isSmsDeliveryOutcomeUnknown(error)) {
+        sentPhone.value = expectedContext.subject;
+        smsCooldown.start();
+        showFeedback("发送结果未知，如收到短信可直接填写；60 秒后可重试");
+      } else if (!isRequestCancelled(error)) {
+        showFeedback(error.message || "验证码发送失败");
+      }
     }
   } finally {
     if (pageActive) sendingCode.value = false;
@@ -426,7 +437,9 @@ const validateForm = () => {
     confirmPassword: "",
   };
   if (!isAuthPhone(phone.value)) nextErrors.phone = "请输入正确手机号";
-  if (!/^\d{4}$/.test(verificationCode.value))
+  if (sentPhone.value !== phone.value)
+    nextErrors.verificationCode = "请先获取当前手机号的验证码";
+  else if (!/^\d{4}$/.test(verificationCode.value))
     nextErrors.verificationCode = "请输入 4 位验证码";
   const passwordResult = validatePassword(password.value);
   if (!passwordResult.valid) nextErrors.password = PASSWORD_POLICY_MESSAGE;
@@ -557,11 +570,17 @@ const submitReset = async () => {
   color: #9f968d;
 }
 .get-code {
-  flex: 0 0 auto;
-  padding-left: 14rpx;
+  display: flex;
+  flex: 0 0 176rpx;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 8rpx;
   border-left: 1rpx solid #d7bd94;
+  background: transparent !important;
   color: #a7160c;
   font-size: 26rpx;
+  white-space: nowrap;
 }
 .get-code--disabled {
   color: #9f968d;