hookehuyr

fix(登录页): 修正验证码校验规则为4位数字

修复登录页验证码校验逻辑,将验证码长度从4-6位改为严格4位数字
1 <!-- 1 <!--
2 * @Date: 2025-11-10 18:08:59 2 * @Date: 2025-11-10 18:08:59
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-11-11 14:01:40 4 + * @LastEditTime: 2025-11-11 15:51:10
5 * @FilePath: /stdj_h5/src/views/Login.vue 5 * @FilePath: /stdj_h5/src/views/Login.vue
6 * @Description: 登录页 6 * @Description: 登录页
7 --> 7 -->
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
45 </template> 45 </template>
46 46
47 <script setup> 47 <script setup>
48 -import { ref, onUnmounted, computed } from 'vue' 48 +import { ref, onUnmounted, computed, onMounted } from 'vue'
49 import { useRoute, useRouter } from 'vue-router' 49 import { useRoute, useRouter } from 'vue-router'
50 import { useTitle } from '@vueuse/core' 50 import { useTitle } from '@vueuse/core'
51 import { smsAPI } from '@/api/common.js' 51 import { smsAPI } from '@/api/common.js'
...@@ -82,7 +82,7 @@ const login_disabled = computed(function () { ...@@ -82,7 +82,7 @@ const login_disabled = computed(function () {
82 return ( 82 return (
83 logging.value || 83 logging.value ||
84 !is_valid_phone(phone.value) || 84 !is_valid_phone(phone.value) ||
85 - !/^\d{4,6}$/.test(String(code.value || '').trim()) 85 + !/^\d{4}$/.test(String(code.value || '').trim())
86 ) 86 )
87 }) 87 })
88 88
...@@ -172,8 +172,8 @@ const on_login = async function () { ...@@ -172,8 +172,8 @@ const on_login = async function () {
172 showFailToast('请输入有效的手机号') 172 showFailToast('请输入有效的手机号')
173 return 173 return
174 } 174 }
175 - if (!/^\d{4,6}$/.test(String(code.value || '').trim())) { 175 + if (!/^\d{4}$/.test(String(code.value || '').trim())) {
176 - showFailToast('请输入4~6位数字验证码') 176 + showFailToast('请输入4位数字验证码')
177 return 177 return
178 } 178 }
179 try { 179 try {
...@@ -193,6 +193,9 @@ const on_login = async function () { ...@@ -193,6 +193,9 @@ const on_login = async function () {
193 } 193 }
194 } 194 }
195 195
196 +onMounted(() => {
197 +})
198 +
196 // 组件卸载时清理计时器 199 // 组件卸载时清理计时器
197 onUnmounted(function () { 200 onUnmounted(function () {
198 if (timer_id.value) { 201 if (timer_id.value) {
...@@ -220,6 +223,7 @@ onUnmounted(function () { ...@@ -220,6 +223,7 @@ onUnmounted(function () {
220 .logo-title { 223 .logo-title {
221 margin-bottom: 2rem; 224 margin-bottom: 2rem;
222 } 225 }
226 +
223 .logo-img { 227 .logo-img {
224 height: 5.5rem; 228 height: 5.5rem;
225 object-fit: contain; 229 object-fit: contain;
...@@ -234,6 +238,7 @@ onUnmounted(function () { ...@@ -234,6 +238,7 @@ onUnmounted(function () {
234 padding: 1rem; 238 padding: 1rem;
235 box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.06); 239 box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.06);
236 } 240 }
241 +
237 .card-title { 242 .card-title {
238 text-align: center; 243 text-align: center;
239 color: #432C0E; 244 color: #432C0E;
...@@ -248,6 +253,7 @@ onUnmounted(function () { ...@@ -248,6 +253,7 @@ onUnmounted(function () {
248 margin-top: 1.25rem; 253 margin-top: 1.25rem;
249 margin-bottom: 0.75rem; 254 margin-bottom: 0.75rem;
250 } 255 }
256 +
251 .code-row { 257 .code-row {
252 display: flex; 258 display: flex;
253 gap: 0.5rem; 259 gap: 0.5rem;
...@@ -258,6 +264,7 @@ onUnmounted(function () { ...@@ -258,6 +264,7 @@ onUnmounted(function () {
258 .input-with-icon { 264 .input-with-icon {
259 position: relative; 265 position: relative;
260 } 266 }
267 +
261 .input-with-icon::before { 268 .input-with-icon::before {
262 content: ''; 269 content: '';
263 position: absolute; 270 position: absolute;
...@@ -270,9 +277,11 @@ onUnmounted(function () { ...@@ -270,9 +277,11 @@ onUnmounted(function () {
270 background-repeat: no-repeat; 277 background-repeat: no-repeat;
271 transform: translateY(-50%); 278 transform: translateY(-50%);
272 } 279 }
280 +
273 .input-with-icon.phone::before { 281 .input-with-icon.phone::before {
274 background-image: url('https://cdn.ipadbiz.cn/stdj/images/%E6%89%8B%E6%9C%BA@2x.png'); 282 background-image: url('https://cdn.ipadbiz.cn/stdj/images/%E6%89%8B%E6%9C%BA@2x.png');
275 } 283 }
284 +
276 .input-with-icon.code::before { 285 .input-with-icon.code::before {
277 background-image: url('https://cdn.ipadbiz.cn/stdj/images/%E9%AA%8C%E8%AF%81%E7%A0%81@2x-1.png'); 286 background-image: url('https://cdn.ipadbiz.cn/stdj/images/%E9%AA%8C%E8%AF%81%E7%A0%81@2x-1.png');
278 } 287 }
...@@ -286,6 +295,7 @@ onUnmounted(function () { ...@@ -286,6 +295,7 @@ onUnmounted(function () {
286 padding: 0 0.75rem 0 2.25rem; // 为左侧图标预留空间 295 padding: 0 0.75rem 0 2.25rem; // 为左侧图标预留空间
287 box-shadow: inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.08); 296 box-shadow: inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.08);
288 } 297 }
298 +
289 .input::placeholder { 299 .input::placeholder {
290 color: #999999; 300 color: #999999;
291 } 301 }
...@@ -302,12 +312,15 @@ onUnmounted(function () { ...@@ -302,12 +312,15 @@ onUnmounted(function () {
302 text-align: center; 312 text-align: center;
303 line-height: 2.5rem; 313 line-height: 2.5rem;
304 } 314 }
315 +
305 .btn.send { 316 .btn.send {
306 white-space: nowrap; 317 white-space: nowrap;
307 } 318 }
319 +
308 .btn.primary { 320 .btn.primary {
309 width: 100%; 321 width: 100%;
310 } 322 }
323 +
311 .btn.disabled { 324 .btn.disabled {
312 // 不可操作态:明显的灰显与禁止样式 325 // 不可操作态:明显的灰显与禁止样式
313 opacity: 0.5; 326 opacity: 0.5;
......