用户静默注册

2026-07-01 02:48:59 +08:00
parent d3dd3a0ad1
commit 9f4577d3d8
18 changed files with 912 additions and 93 deletions
@@ -0,0 +1,123 @@
+import { useEffect, useState } from 'react';
+import { bindPhone, request, saveSession } from '../lib/api';
+import { normalizePhoneInput, validateMobilePhone } from '../lib/phone';
+
+type PhoneVerifySheetProps = {
+  open: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+};
+
+export default function PhoneVerifySheet({ open, onClose, onSuccess }: PhoneVerifySheetProps) {
+  const [phone, setPhone] = useState('');
+  const [code, setCode] = useState('');
+  const [msg, setMsg] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [codeCooldown, setCodeCooldown] = useState(0);
+
+  useEffect(() => {
+    if (!open) {
+      setPhone('');
+      setCode('');
+      setMsg('');
+      setCodeCooldown(0);
+    }
+  }, [open]);
+
+  async function sendCode() {
+    const phoneCheck = validateMobilePhone(phone);
+    if (!phoneCheck.ok) {
+      setMsg(phoneCheck.message ?? '请输入正确的手机号码');
+      return;
+    }
+    setMsg('');
+    await request('USER_H5', '/auth/sms/send', {
+      method: 'POST',
+      body: JSON.stringify({ phone, scene: 'BIND_PHONE' }),
+    });
+    setMsg('验证码已发送（Mock: 123456）');
+    setCodeCooldown(60);
+    const timer = setInterval(() => {
+      setCodeCooldown((c) => {
+        if (c <= 1) {
+          clearInterval(timer);
+          return 0;
+        }
+        return c - 1;
+      });
+    }, 1000);
+  }
+
+  async function submit() {
+    const phoneCheck = validateMobilePhone(phone);
+    if (!phoneCheck.ok) {
+      setMsg(phoneCheck.message ?? '请输入正确的手机号码');
+      return;
+    }
+    if (!code.trim()) {
+      setMsg('请输入验证码');
+      return;
+    }
+    setLoading(true);
+    setMsg('');
+    try {
+      const session = await bindPhone(phone, code);
+      saveSession(session);
+      onSuccess();
+      onClose();
+    } catch (e) {
+      setMsg(e instanceof Error ? e.message : '验证失败');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (!open) return null;
+
+  return (
+    <div className="phone-verify-overlay" role="dialog" aria-modal="true">
+      <button type="button" className="phone-verify-backdrop" aria-label="关闭" onClick={onClose} />
+      <div className="phone-verify-sheet">
+        <h3 className="phone-verify-title">验证手机号</h3>
+        <p className="phone-verify-desc">下单前需验证手机号，以便接收订单通知</p>
+        <div className="login-field">
+          <span className="login-field-prefix">+86</span>
+          <input
+            type="tel"
+            className="login-field-input"
+            placeholder="请输入手机号"
+            maxLength={11}
+            inputMode="numeric"
+            value={phone}
+            onChange={(e) => {
+              setPhone(normalizePhoneInput(e.target.value));
+              setMsg('');
+            }}
+          />
+        </div>
+        <div className="login-field">
+          <input
+            type="text"
+            inputMode="numeric"
+            className="login-field-input"
+            placeholder="请输入验证码"
+            value={code}
+            onChange={(e) => setCode(e.target.value)}
+          />
+          <button
+            type="button"
+            className={`login-get-code${codeCooldown > 0 ? ' disabled' : ''}`}
+            disabled={codeCooldown > 0}
+            onClick={sendCode}
+          >
+            {codeCooldown > 0 ? `${codeCooldown}s 后重新获取` : '获取验证码'}
+          </button>
+        </div>
+        {msg && <p className="login-msg">{msg}</p>}
+        <button type="button" className="login-sms-btn" disabled={loading} onClick={submit}>
+          {loading ? '验证中...' : '确认验证'}
+        </button>
+      </div>
+    </div>
+  );
+}