Refactor code structure for improved readability and maintainability

frontend/wechat/src/views/VerifyPhone.vue

@@ -13,8 +13,21 @@ const verifying = ref(false);
 const countdown = ref(0);
 let countdownTimer = null;
 
-const canSend = computed(() => !sending.value && countdown.value <= 0 && phone.value.trim().length >= 6);
+const normalizeDigits = (value, maxLen) => String(value || "").replace(/\D/g, "").slice(0, maxLen);
-const canVerify = computed(() => !verifying.value && phone.value.trim() !== "" && code.value.trim() !== "");
+
+const onPhoneInput = (e) => {
+    phone.value = normalizeDigits(e?.target?.value, 11);
+};
+
+const onCodeInput = (e) => {
+    code.value = normalizeDigits(e?.target?.value, 4);
+};
+
+const isValidPhone = computed(() => phone.value.length === 11);
+const isValidCode = computed(() => code.value.length === 4);
+
+const canSend = computed(() => !sending.value && countdown.value <= 0 && isValidPhone.value);
+const canVerify = computed(() => !verifying.value && isValidPhone.value && isValidCode.value);
 
 const startCountdown = (seconds = 60) => {
     countdown.value = seconds;
@@ -90,24 +103,26 @@ onMounted(() => {
         <div class="w-full max-w-[420px] bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
             <h1 class="text-xl font-semibold text-gray-900">手机号验证</h1>
             <p class="text-sm text-gray-500 mt-2">
-                未认证用户需要验证手机号后才能访问「已购买」「我的」并进行购买操作。
+                请登录后再进行操作， 无法验证请联系管理员微信：13932043996
             </p>
 
-            <div class="mt-6 space-y-4">
+	            <div class="mt-6 space-y-4">
-                <div>
+	                <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
+	                    <label class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
-                    <input v-model="phone" inputmode="tel" autocomplete="tel" placeholder="请输入手机号"
+	                    <input :value="phone" @input="onPhoneInput" inputmode="numeric" autocomplete="tel"
-                        class="w-full rounded-xl border border-gray-200 px-4 py-3 outline-none focus:ring-2 focus:ring-primary-200 focus:border-primary-300" />
+	                        placeholder="请输入 11 位手机号" maxlength="11"
-                </div>
+	                        class="w-full rounded-xl border border-gray-200 px-4 py-3 outline-none focus:ring-2 focus:ring-primary-200 focus:border-primary-300" />
+	                </div>
 
-                <div>
+	                <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
+	                    <label class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
-                    <div class="flex gap-2">
+	                    <div class="flex gap-2">
-                        <input v-model="code" inputmode="numeric" autocomplete="one-time-code" placeholder="请输入短信验证码"
+	                        <input :value="code" @input="onCodeInput" inputmode="numeric" autocomplete="one-time-code"
-                            class="flex-1 rounded-xl border border-gray-200 px-4 py-3 outline-none focus:ring-2 focus:ring-primary-200 focus:border-primary-300" />
+	                            placeholder="请输入 4 位验证码" maxlength="4"
-                        <button :disabled="!canSend" @click="handleSend"
+	                            class="flex-1 rounded-xl border border-gray-200 px-4 py-3 outline-none focus:ring-2 focus:ring-primary-200 focus:border-primary-300" />
-                            class="whitespace-nowrap rounded-xl px-4 py-3 text-sm font-medium border transition-colors"
+	                        <button :disabled="!canSend" @click="handleSend"
-                            :class="canSend ? 'bg-primary-600 text-white border-primary-600 hover:bg-primary-700 active:bg-primary-800' : 'bg-gray-100 text-gray-400 border-gray-200'">
+	                            class="whitespace-nowrap rounded-xl px-4 py-3 text-sm font-medium border transition-colors"
+	                            :class="canSend ? 'bg-primary-600 text-white border-primary-600 hover:bg-primary-700 active:bg-primary-800' : 'bg-gray-100 text-gray-400 border-gray-200'">
                             <span v-if="countdown > 0">{{ countdown }}s</span>
                             <span v-else>发送验证码</span>
                         </button>
@@ -121,7 +136,7 @@ onMounted(() => {
                 </button>
 
                 <button class="w-full text-sm text-gray-500 hover:text-gray-700" @click="router.replace('/')">
-                    暂不验证，返回首页
+                    暂不验证，返回上一页
                 </button>
             </div>
         </div>