fix(小程序扫码登录): 去除 .jsx 内 TS 泛型 + 去掉 setInterval 倒计时(原生定时器 setState 触发 Invalid attempt to destruct non-iterable→黑屏) + 登录 tab 改柔彩
This commit is contained in:
@@ -15,10 +15,9 @@ export default function ScanLogin() {
|
|||||||
const [busy, setBusy] = useState(false);
|
const [busy, setBusy] = useState(false);
|
||||||
const [msg, setMsg] = useState('');
|
const [msg, setMsg] = useState('');
|
||||||
const [done, setDone] = useState(false);
|
const [done, setDone] = useState(false);
|
||||||
const [loginMode, setLoginMode] = useState<'wx' | 'phone'>('wx');
|
const [loginMode, setLoginMode] = useState('wx');
|
||||||
const [gatePhone, setGatePhone] = useState('');
|
const [gatePhone, setGatePhone] = useState('');
|
||||||
const [gateCode, setGateCode] = useState('');
|
const [gateCode, setGateCode] = useState('');
|
||||||
const [cd, setCd] = useState(0);
|
|
||||||
|
|
||||||
// 冷启动/扫码进入:纯 React useEffect 读当前实例参数(wxacode 的 scene 在 router.params.scene)。
|
// 冷启动/扫码进入:纯 React useEffect 读当前实例参数(wxacode 的 scene 在 router.params.scene)。
|
||||||
// 不再用 useLoad/useDidShow 等 Taro 元钩子(其内部在原生计时器里调度 React hook,会触发
|
// 不再用 useLoad/useDidShow 等 Taro 元钩子(其内部在原生计时器里调度 React hook,会触发
|
||||||
@@ -51,9 +50,7 @@ export default function ScanLogin() {
|
|||||||
try {
|
try {
|
||||||
const r = await sendCode(gatePhone);
|
const r = await sendCode(gatePhone);
|
||||||
setMsg(`验证码已发送${r.debugCode ? `(演示 ${r.debugCode})` : ''}`);
|
setMsg(`验证码已发送${r.debugCode ? `(演示 ${r.debugCode})` : ''}`);
|
||||||
setCd(60);
|
// 不启用 setInterval 倒计时:小程序原生定时器里 setState 会触发 "Invalid attempt to destruct non-iterable",改为允许随时重发
|
||||||
// 小程序无 window,用全局 setInterval/clearInterval(源码里 window.* 会导致运行时 ReferenceError)
|
|
||||||
const t = setInterval(() => setCd((c) => (c <= 1 ? (clearInterval(t), 0) : c - 1)), 1000);
|
|
||||||
} catch (e) { setMsg((e && e.message) || '发送失败'); }
|
} catch (e) { setMsg((e && e.message) || '发送失败'); }
|
||||||
finally { setBusy(false); }
|
finally { setBusy(false); }
|
||||||
};
|
};
|
||||||
@@ -101,7 +98,7 @@ export default function ScanLogin() {
|
|||||||
<Input className="input" placeholder="11 位手机号" value={gatePhone} onInput={(e) => setGatePhone(e.detail.value)} />
|
<Input className="input" placeholder="11 位手机号" value={gatePhone} onInput={(e) => setGatePhone(e.detail.value)} />
|
||||||
<View className="sl-code">
|
<View className="sl-code">
|
||||||
<Input className="input" placeholder="验证码" value={gateCode} onInput={(e) => setGateCode(e.detail.value)} />
|
<Input className="input" placeholder="验证码" value={gateCode} onInput={(e) => setGateCode(e.detail.value)} />
|
||||||
<Button className="btn btn-ghost btn-sm" disabled={cd > 0 || busy} onClick={sendSms}>{cd > 0 ? `${cd}s` : '验证码'}</Button>
|
<Button className="btn btn-ghost btn-sm" disabled={busy} onClick={sendSms}>验证码</Button>
|
||||||
</View>
|
</View>
|
||||||
<Button className="btn btn-cta" loading={busy} onClick={phoneLoginNow}>登录</Button>
|
<Button className="btn btn-cta" loading={busy} onClick={phoneLoginNow}>登录</Button>
|
||||||
</View>
|
</View>
|
||||||
|
|||||||
@@ -13,9 +13,9 @@
|
|||||||
.sl-actions { display: flex; flex-direction: column; gap: 16rpx; margin-top: 40rpx; }
|
.sl-actions { display: flex; flex-direction: column; gap: 16rpx; margin-top: 40rpx; }
|
||||||
|
|
||||||
/* 登录门 */
|
/* 登录门 */
|
||||||
.sl-tabs { display: flex; gap: 4px; margin: 24rpx 0; padding: 4px; border-radius: 12px; background: #161618; border: 1px solid #d7ddf0; }
|
.sl-tabs { display: flex; gap: 4px; margin: 24rpx 0; padding: 4px; border-radius: 12px; background: #eef1ff; border: 1px solid rgba(99,132,255,.14); }
|
||||||
.sl-tab { flex: 1; text-align: center; padding: 12rpx 0; border-radius: 9px; color: #7a86b0; font-size: 26rpx; }
|
.sl-tab { flex: 1; text-align: center; padding: 12rpx 0; border-radius: 9px; color: #7a86b0; font-size: 26rpx; }
|
||||||
.sl-tab.on { background: #fff; color: #111; }
|
.sl-tab.on { background: #fff; color: #23315c; box-shadow: 0 4rpx 12rpx rgba(59,79,125,.10); }
|
||||||
.sl-field { display: flex; flex-direction: column; gap: 14rpx; margin-top: 8rpx; }
|
.sl-field { display: flex; flex-direction: column; gap: 14rpx; margin-top: 8rpx; }
|
||||||
.sl-code { display: flex; gap: 12rpx; align-items: center; }
|
.sl-code { display: flex; gap: 12rpx; align-items: center; }
|
||||||
.sl-code .input { flex: 1; }
|
.sl-code .input { flex: 1; }
|
||||||
|
|||||||
Reference in New Issue
Block a user