diff --git a/apps/taro/src/pages/student/login/index.tsx b/apps/taro/src/pages/student/login/index.tsx index 9fe29190..e1d57f29 100644 --- a/apps/taro/src/pages/student/login/index.tsx +++ b/apps/taro/src/pages/student/login/index.tsx @@ -19,6 +19,10 @@ export default function StudentLoginPage() { const [reason, setReason] = useState(''); const [sending, setSending] = useState(false); const [verifying, setVerifying] = useState(false); + const phoneValue = phone.trim(); + const codeValue = code.trim(); + const canSendCode = runtimeReady && /^1\d{10}$/.test(phoneValue) && !sending; + const canSubmit = runtimeReady && /^1\d{10}$/.test(phoneValue) && /^\d{4,8}$/.test(codeValue || debugCode) && !verifying; useEffect(() => { ensureRuntimeConfigLoaded() @@ -71,13 +75,19 @@ export default function StudentLoginPage() { }; async function handleSendCode() { + if (!/^1\d{10}$/.test(phoneValue)) { + setError('请输入 11 位手机号'); + return; + } setSending(true); setError(''); setMessage(''); try { - const result = await sendSmsCode(phone); + await ensureTenantResolved(); + const result = await sendSmsCode(phoneValue); const nextCode = typeof result.debugCode === 'string' ? result.debugCode : ''; setDebugCode(nextCode); + setCode(''); setMessage(nextCode ? `验证码已发送,开发环境验证码 ${nextCode}` : '验证码已发送'); } catch (nextError) { setError(nextError instanceof Error ? nextError.message : '验证码发送失败'); @@ -87,10 +97,18 @@ export default function StudentLoginPage() { } async function handleLogin() { + if (!/^1\d{10}$/.test(phoneValue)) { + setError('请输入 11 位手机号'); + return; + } + if (!/^\d{4,8}$/.test(codeValue || debugCode)) { + setError('请输入短信验证码'); + return; + } setVerifying(true); setError(''); try { - await verifySmsCode(phone, code || debugCode); + await verifySmsCode(phoneValue, codeValue || debugCode); redirectAfterLogin(params.redirect || landingPath()); } catch (nextError) { setError(nextError instanceof Error ? nextError.message : '登录失败'); @@ -116,21 +134,25 @@ export default function StudentLoginPage() { {reason ? {reason} : null} 手机号 - setPhone(String(event.detail.value || ''))} /> + + setPhone(String(event.detail.value || ''))} /> + 验证码 - setCode(String(event.detail.value || ''))} /> - + {message || '收到短信后在这里填写验证码'} - - {message ? {message} : null} {error ? {error} : null} diff --git a/apps/taro/src/pages/student/student.css b/apps/taro/src/pages/student/student.css index b66b60d7..0cf9660e 100644 --- a/apps/taro/src/pages/student/student.css +++ b/apps/taro/src/pages/student/student.css @@ -116,7 +116,8 @@ font-weight: 850; } -.login-input { +.login-input, +.login-input-shell { box-sizing: border-box; display: block; width: 100%; @@ -131,6 +132,27 @@ line-height: 54px; } +.login-input-shell { + display: flex; + align-items: center; + padding: 0; + overflow: hidden; +} + +.login-input-native { + display: block; + width: 100%; + height: 52px; + min-height: 52px; + padding: 0 16px; + border: 0; + outline: 0; + background: transparent; + color: #111827; + font-size: 17px; + line-height: 52px; +} + .login-code-row { display: grid; grid-template-columns: minmax(0, 1fr) 104px; @@ -143,6 +165,10 @@ min-width: 0; } +.login-code-shell { + min-width: 0; +} + .login-send-button { width: 104px; min-width: 104px; @@ -151,7 +177,8 @@ white-space: nowrap; } -.login-card .login-input { +.login-card .login-input, +.login-card .login-input-shell { display: block; width: 100%; height: 54px; @@ -165,7 +192,24 @@ line-height: 54px; } -.login-card .login-code-row .login-code-input { +.login-card .login-input-shell { + display: flex; + align-items: center; + padding: 0; +} + +.login-card .login-input-native { + width: 100%; + height: 52px; + min-height: 52px; + padding: 0 16px; + color: #111827; + font-size: 16px; + line-height: 52px; +} + +.login-card .login-code-row .login-code-input, +.login-card .login-code-row .login-code-shell { width: 100%; } @@ -181,6 +225,25 @@ line-height: 54px; } +.login-card .primary-button[disabled], +.login-card .secondary-button[disabled], +.login-card .login-send-button[disabled] { + opacity: 0.55; +} + +.login-field-help { + display: block; + min-height: 20px; + color: #64748b; + font-size: 14px; + line-height: 1.45; +} + +.login-field-help.success { + color: #0f766e; + font-weight: 750; +} + .login-page-admin { background: linear-gradient(to right, rgba(15, 23, 42, 0.035) 1px, transparent 1px),