forked from wangziqi/gongxue-base
fix: make admin sms code input visible
This commit is contained in:
@@ -14,6 +14,7 @@ export default function StudentLoginPage() {
|
|||||||
const [phone, setPhone] = useState('');
|
const [phone, setPhone] = useState('');
|
||||||
const [code, setCode] = useState('');
|
const [code, setCode] = useState('');
|
||||||
const [debugCode, setDebugCode] = useState('');
|
const [debugCode, setDebugCode] = useState('');
|
||||||
|
const [codeSent, setCodeSent] = useState(false);
|
||||||
const [message, setMessage] = useState('');
|
const [message, setMessage] = useState('');
|
||||||
const [error, setError] = useState('');
|
const [error, setError] = useState('');
|
||||||
const [reason, setReason] = useState('');
|
const [reason, setReason] = useState('');
|
||||||
@@ -96,6 +97,7 @@ export default function StudentLoginPage() {
|
|||||||
const nextCode = typeof result.debugCode === 'string' ? result.debugCode : '';
|
const nextCode = typeof result.debugCode === 'string' ? result.debugCode : '';
|
||||||
setDebugCode(nextCode);
|
setDebugCode(nextCode);
|
||||||
setCode('');
|
setCode('');
|
||||||
|
setCodeSent(true);
|
||||||
setMessage(nextCode ? `验证码已发送,开发环境验证码 ${nextCode}` : '验证码已发送');
|
setMessage(nextCode ? `验证码已发送,开发环境验证码 ${nextCode}` : '验证码已发送');
|
||||||
} catch (nextError) {
|
} catch (nextError) {
|
||||||
setError(nextError instanceof Error ? nextError.message : '验证码发送失败');
|
setError(nextError instanceof Error ? nextError.message : '验证码发送失败');
|
||||||
@@ -142,21 +144,19 @@ export default function StudentLoginPage() {
|
|||||||
{reason ? <Text className='error-text'>{reason}</Text> : null}
|
{reason ? <Text className='error-text'>{reason}</Text> : null}
|
||||||
<View className='login-field'>
|
<View className='login-field'>
|
||||||
<Text className='login-field-label'>手机号</Text>
|
<Text className='login-field-label'>手机号</Text>
|
||||||
<View className='login-input-shell'>
|
<View className='login-input-shell login-phone-shell'>
|
||||||
<Input className='login-input-native' type='text' maxlength={11} placeholder='请输入手机号' value={phone} onInput={event => setPhoneDigits(String(event.detail.value || ''))} />
|
<Input className='login-input-native' type='text' maxlength={11} placeholder='请输入手机号' value={phone} onInput={event => setPhoneDigits(String(event.detail.value || ''))} />
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
<View className='login-field'>
|
<View className='login-field'>
|
||||||
<Text className='login-field-label'>验证码</Text>
|
<Text className='login-field-label'>验证码</Text>
|
||||||
<View className='login-code-row'>
|
|
||||||
<View className='login-input-shell login-code-shell'>
|
<View className='login-input-shell login-code-shell'>
|
||||||
<Input className='login-input-native' type='text' maxlength={6} placeholder='请输入验证码' value={code} onInput={event => setCodeDigits(String(event.detail.value || ''))} />
|
<Input className='login-input-native' type='text' maxlength={6} placeholder={codeSent ? '请输入收到的验证码' : '先发送验证码'} value={code} onInput={event => setCodeDigits(String(event.detail.value || ''))} />
|
||||||
</View>
|
</View>
|
||||||
<Button className='login-send-button secondary-button' disabled={!canSendCode} loading={sending} onClick={handleSendCode}>
|
<Button className='login-send-button secondary-button' disabled={!canSendCode} loading={sending} onClick={handleSendCode}>
|
||||||
{message ? '重发' : '发送'}
|
{codeSent ? '重新发送验证码' : '发送验证码'}
|
||||||
</Button>
|
</Button>
|
||||||
</View>
|
<Text className={`login-field-help ${message ? 'success' : ''}`}>{message || '收到短信后在上方填写验证码'}</Text>
|
||||||
<Text className={`login-field-help ${message ? 'success' : ''}`}>{message || '收到短信后在这里填写验证码'}</Text>
|
|
||||||
</View>
|
</View>
|
||||||
<Button className='primary-button' disabled={!canSubmit} loading={verifying} onClick={handleLogin}>
|
<Button className='primary-button' disabled={!canSubmit} loading={verifying} onClick={handleLogin}>
|
||||||
登录
|
登录
|
||||||
|
|||||||
@@ -119,7 +119,8 @@
|
|||||||
.login-input,
|
.login-input,
|
||||||
.login-input-shell {
|
.login-input-shell {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: block;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 54px;
|
height: 54px;
|
||||||
min-height: 54px;
|
min-height: 54px;
|
||||||
@@ -133,8 +134,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.login-input-shell {
|
.login-input-shell {
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
@@ -156,7 +155,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.login-input-native .taro-input,
|
.login-input-native .taro-input,
|
||||||
|
.login-input-native .weui-input,
|
||||||
|
.login-input-native .taro-input__input,
|
||||||
.login-input-native input,
|
.login-input-native input,
|
||||||
|
.login-input-native > input,
|
||||||
.login-input-shell input {
|
.login-input-shell input {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -171,34 +173,23 @@
|
|||||||
line-height: 52px;
|
line-height: 52px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-code-row {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: minmax(0, 1fr) 104px;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-code-input {
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-code-shell {
|
.login-code-shell {
|
||||||
min-width: 0;
|
width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-send-button {
|
.login-send-button {
|
||||||
width: 104px;
|
width: 100%;
|
||||||
min-width: 104px;
|
min-width: 0;
|
||||||
max-width: 104px;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-card .login-input,
|
.login-card .login-input,
|
||||||
.login-card .login-input-shell {
|
.login-card .login-input-shell {
|
||||||
display: block;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 54px;
|
height: 54px;
|
||||||
min-height: 54px;
|
min-height: 54px;
|
||||||
@@ -212,8 +203,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.login-card .login-input-shell {
|
.login-card .login-input-shell {
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -231,7 +220,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.login-card .login-input-native .taro-input,
|
.login-card .login-input-native .taro-input,
|
||||||
|
.login-card .login-input-native .weui-input,
|
||||||
|
.login-card .login-input-native .taro-input__input,
|
||||||
.login-card .login-input-native input,
|
.login-card .login-input-native input,
|
||||||
|
.login-card .login-input-native > input,
|
||||||
.login-card .login-input-shell input {
|
.login-card .login-input-shell input {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -247,15 +239,15 @@
|
|||||||
line-height: 52px;
|
line-height: 52px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-card .login-code-row .login-code-input,
|
.login-card .login-phone-shell,
|
||||||
.login-card .login-code-row .login-code-shell {
|
.login-card .login-code-shell {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-card .login-send-button.secondary-button {
|
.login-card .login-send-button.secondary-button {
|
||||||
width: 104px;
|
width: 100%;
|
||||||
min-width: 104px;
|
min-width: 0;
|
||||||
max-width: 104px;
|
max-width: 100%;
|
||||||
height: 54px;
|
height: 54px;
|
||||||
min-height: 54px;
|
min-height: 54px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@@ -2458,13 +2450,9 @@
|
|||||||
flex: 1 1 150px;
|
flex: 1 1 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-code-row {
|
|
||||||
grid-template-columns: minmax(0, 1fr) 92px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-send-button {
|
.login-send-button {
|
||||||
width: 92px;
|
width: 100%;
|
||||||
min-width: 92px;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.asset-preview-frame,
|
.asset-preview-frame,
|
||||||
|
|||||||
Reference in New Issue
Block a user