init

2026-06-30 10:33:56 +08:00
commit 6e047dc0a5
607 changed files with 65966 additions and 0 deletions
@@ -0,0 +1,150 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import AppImage from '@dukang/shared-ui/AppImage';
+import { request, saveAuth } from '../lib/api';
+
+export default function LoginPage() {
+  const navigate = useNavigate();
+  const [phone, setPhone] = useState('13800000001');
+  const [code, setCode] = useState('123456');
+  const [loading, setLoading] = useState(false);
+  const [agreed, setAgreed] = useState(true);
+  const [codeCooldown, setCodeCooldown] = useState(0);
+  const [msg, setMsg] = useState('');
+
+  function ensureAgreed() {
+    if (!agreed) {
+      setMsg('请先勾选并同意用户协议');
+      return false;
+    }
+    return true;
+  }
+
+  async function sendCode() {
+    if (!ensureAgreed()) return;
+    setMsg('');
+    await request('USER_H5', '/auth/sms/send', {
+      method: 'POST',
+      body: JSON.stringify({ phone, scene: 'USER_LOGIN' }),
+    });
+    setMsg('验证码已发送（Mock: 123456）');
+    setCodeCooldown(60);
+    const timer = setInterval(() => {
+      setCodeCooldown((c) => {
+        if (c <= 1) {
+          clearInterval(timer);
+          return 0;
+        }
+        return c - 1;
+      });
+    }, 1000);
+  }
+
+  async function login() {
+    if (!ensureAgreed()) return;
+    setLoading(true);
+    setMsg('');
+    try {
+      const data = await request<{ accessToken: string; refreshToken: string }>('USER_H5', '/auth/login/sms', {
+        method: 'POST',
+        body: JSON.stringify({ phone, code }),
+      });
+      saveAuth(data);
+      navigate('/');
+    } catch (e) {
+      setMsg(e instanceof Error ? e.message : '登录失败');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function wechatLogin() {
+    if (!ensureAgreed()) return;
+    setMsg('preV1：微信一键授权暂未开放，请使用手机验证码登录');
+  }
+
+  return (
+    <div className="login-page">
+      <header className="login-header">
+        <div className="login-logo-wrap">
+          <AppImage src="/logo.png" alt="杜康好客" wrapperClassName="login-logo" fit="contain" />
+          <span className="login-logo-badge">官方</span>
+        </div>
+        <div className="login-welcome">
+          <h1 className="login-welcome-title">欢迎来到杜康好客</h1>
+          <p className="login-welcome-sub">买美酒，享好礼</p>
+        </div>
+      </header>
+
+      <main className="login-main">
+        <button type="button" className="login-wechat-btn" onClick={wechatLogin}>
+          <span className="material-symbols-outlined login-wechat-icon">chat</span>
+          <span>微信一键授权</span>
+        </button>
+
+        <div className="login-divider">
+          <span className="login-divider-line" />
+          <span className="login-divider-text">或者</span>
+          <span className="login-divider-line" />
+        </div>
+
+        <div className="login-card">
+          <h3 className="login-card-title">手机验证码登录</h3>
+          <div className="login-field">
+            <span className="login-field-prefix">+86</span>
+            <input
+              type="tel"
+              className="login-field-input"
+              placeholder="请输入手机号"
+              value={phone}
+              onChange={(e) => setPhone(e.target.value)}
+            />
+          </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={login}
+          >
+            {loading ? '登录中...' : '登录'}
+          </button>
+        </div>
+      </main>
+
+      <footer className="login-footer">
+        <label className="login-agreement">
+          <input
+            type="checkbox"
+            checked={agreed}
+            onChange={(e) => setAgreed(e.target.checked)}
+          />
+          <span>
+            我已阅读并同意
+            <a href="#user-agreement">《用户协议》</a>
+            和
+            <a href="#privacy">《隐私政策》</a>
+          </span>
+        </label>
+      </footer>
+    </div>
+  );
+}