微信小程序上传

2026-07-12 14:45:57 +08:00
parent d271ac5b13
commit becf91da52
45 changed files with 1815 additions and 23 deletions
@@ -0,0 +1,114 @@
+import { useState } from 'react';
+import { View, Text, Input, Button } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+import { SmsScene } from '@dukang/shared-types';
+import { request, saveAuth, toast, type SessionPayload } from '../../lib/api';
+import './index.css';
+
+export default function LoginPage() {
+  const [phone, setPhone] = useState('');
+  const [code, setCode] = useState(process.env.TARO_ENV === 'h5' ? '123456' : '');
+  const [cooldown, setCooldown] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [msg, setMsg] = useState('');
+
+  async function sendCode() {
+    if (cooldown > 0) return;
+    const normalized = phone.trim();
+    if (!/^1[3-9]\d{9}$/.test(normalized)) {
+      setMsg('请输入正确的手机号');
+      return;
+    }
+    setMsg('');
+    try {
+      await request('/auth/sms/send', {
+        method: 'POST',
+        data: { phone: normalized, scene: SmsScene.USER_LOGIN },
+      });
+      toast('验证码已发送');
+      setCooldown(60);
+      const timer = setInterval(() => {
+        setCooldown((c) => {
+          if (c <= 1) {
+            clearInterval(timer);
+            return 0;
+          }
+          return c - 1;
+        });
+      }, 1000);
+    } catch (e) {
+      setMsg(e instanceof Error ? e.message : '发送失败');
+    }
+  }
+
+  async function login() {
+    const normalized = phone.trim();
+    if (!/^1[3-9]\d{9}$/.test(normalized)) {
+      setMsg('请输入正确的手机号');
+      return;
+    }
+    if (!code.trim()) {
+      setMsg('请输入验证码');
+      return;
+    }
+    setLoading(true);
+    setMsg('');
+    try {
+      const data = await request<SessionPayload>('/auth/login/sms', {
+        method: 'POST',
+        data: { phone: normalized, code: code.trim() },
+      });
+      saveAuth(data);
+      toast('登录成功', 'success');
+      Taro.switchTab({ url: '/pages/home/index' });
+    } catch (e) {
+      setMsg(e instanceof Error ? e.message : '登录失败');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <View className="login-page">
+      <View className="login-brand">
+        <Text className="login-title">杜康好客</Text>
+        <Text className="login-subtitle">用户端小程序</Text>
+      </View>
+      <View className="login-card">
+        <Text className="login-card-title">手机号登录</Text>
+        <Input
+          className="login-input"
+          type="number"
+          maxlength={11}
+          placeholder="请输入手机号"
+          value={phone}
+          onInput={(e) => setPhone(e.detail.value)}
+        />
+        <View className="login-code-row">
+          <Input
+            className="login-input login-input--code"
+            type="number"
+            maxlength={6}
+            placeholder="验证码"
+            value={code}
+            onInput={(e) => setCode(e.detail.value)}
+          />
+          <Button className="login-send" disabled={cooldown > 0} onClick={() => void sendCode()}>
+            {cooldown > 0 ? `${cooldown}s` : '获取验证码'}
+          </Button>
+        </View>
+        {msg ? <Text className="login-msg">{msg}</Text> : null}
+        <Button
+          className="u-btn u-btn--primary u-btn--block"
+          loading={loading}
+          onClick={() => void login()}
+        >
+          登录
+        </Button>
+        <Text className="u-muted" style={{ textAlign: 'center', marginTop: 8 }}>
+          Mock 环境验证码一般为 123456；微信一键登录后续接入
+        </Text>
+      </View>
+    </View>
+  );
+}