feat: 本次提交更新内容如下

登录页面算是完成了
2025-07-18 17:23:25 +08:00
parent 20a254f957
commit 4ce3036c42
4 changed files with 90 additions and 98 deletions
--- a/nkebao/src/pages/login/api.ts
+++ b/nkebao/src/pages/login/api.ts
@@ -39,7 +39,7 @@ export function loginWithCode(params:any) {

 // 发送验证码
 export function sendVerificationCode(params:any) {
-  return request('/v1/auth/send-code',params, 'POST');
+  return request('/v1/auth/code',params, 'POST');
 }

 // 退出登录
--- a/nkebao/src/pages/login/login.module.scss
+++ b/nkebao/src/pages/login/login.module.scss
@@ -4,7 +4,7 @@
  display: flex;
  align-items: center;
  justify-content: center;
-  padding: 20px;
+  padding: 15px;
  position: relative;
  overflow: hidden;
 }
@@ -66,7 +66,7 @@
  background: #ffffff;
  backdrop-filter: blur(20px);
  border-radius: 24px;
-  padding: 32px 24px;
+  padding: 24px 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
@@ -109,13 +109,6 @@
  margin: 0;
 }

-.welcome-text {
-  font-size: 18px;
-  font-weight: 600;
-  color: #333;
-  margin: 0 0 4px 0;
-}
-
 .subtitle {
  font-size: 13px;
  color: #666;
@@ -262,17 +255,13 @@

 .agreement-section {
  margin-bottom: 24px;
-  padding: 10px;
-  background: #f8f9fa;
-  border-radius: 10px;
-  border: 1px solid #e5e5e5;
 }

 .agreement-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
-  font-size: 11px;
+  font-size: 12px;
  color: #666;
  line-height: 1.3;
  white-space: nowrap;
@@ -292,7 +281,7 @@
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
-  font-size: 11px;
+  font-size: 13px;
 }

 .agreement-link {
@@ -434,10 +423,6 @@
    font-size: 22px;
  }

-  .welcome-text {
-    font-size: 16px;
-  }
-
  .third-party-login {
    gap: 16px;
  }
--- a/nkebao/src/pages/login/login.tsx
+++ b/nkebao/src/pages/login/login.tsx
@@ -12,7 +12,7 @@ import style from "./login.module.scss";

 const Login: React.FC = () => {
  const [form] = Form.useForm();
-  const [activeTab, setActiveTab] = useState("password");
+  const [activeTab, setActiveTab] = useState(1); // 1: 密码登录, 2: 验证码登录
  const [loading, setLoading] = useState(false);
  const [countdown, setCountdown] = useState(0);
  const [showPassword, setShowPassword] = useState(false);
@@ -40,38 +40,33 @@ const Login: React.FC = () => {
    }
  };

-  // 手机号格式验证
-  const validatePhone = (phone: string) => {
-    const phoneRegex = /^1[3-9]\d{9}$/;
-    return phoneRegex.test(phone);
-  };
-
  // 发送验证码
  const handleSendVerificationCode = async () => {
-    const phone = form.getFieldValue("phone");
+    const account = form.getFieldValue("account");

-    if (!phone) {
+    if (!account) {
      Toast.show({ content: "请输入手机号", position: "top" });
      return;
    }

-    if (!validatePhone(phone)) {
+    // 手机号格式验证
+    const phoneRegex = /^1[3-9]\d{9}$/;
+    if (!phoneRegex.test(account)) {
      Toast.show({ content: "请输入正确的11位手机号", position: "top" });
      return;
    }

    try {
      setLoading(true);
-      const response = await sendVerificationCode(phone);
+      await sendVerificationCode({
+        mobile: account,
+        type: "login",
+      });

-      if (response.code === 200) {
-        Toast.show({ content: "验证码已发送", position: "top" });
-        setCountdown(60);
-      } else {
-        Toast.show({ content: response.msg || "发送失败", position: "top" });
-      }
+      Toast.show({ content: "验证码已发送", position: "top" });
+      setCountdown(60);
    } catch (error) {
-      Toast.show({ content: "发送失败，请稍后重试", position: "top" });
+      // 错误已在request中处理，这里不需要额外处理
    } finally {
      setLoading(false);
    }
@@ -86,46 +81,39 @@ const Login: React.FC = () => {

    setLoading(true);
    try {
+      // 添加typeId参数
+      const loginParams = {
+        ...values,
+        typeId: activeTab as number,
+      };
+
      let response;
-
-      if (activeTab === "password") {
-        response = await loginWithPassword(values.phone, values.password);
+      if (activeTab === 1) {
+        response = await loginWithPassword(loginParams);
      } else {
-        response = await loginWithCode(values.phone, values.verificationCode);
+        response = await loginWithCode(loginParams);
      }
+      console.log(response, "response");

-      if (response.code === 200 && response.data) {
-        // 保存登录信息到localStorage
-        localStorage.setItem("token", response.data.token);
-        localStorage.setItem("token_expired", response.data.token_expired);
-        localStorage.setItem("s2_accountId", response.data.member.s2_accountId);
-        localStorage.setItem("userInfo", JSON.stringify(response.data.member));
+      // 更新状态管理（token会自动存储到localStorage，用户信息存储在状态管理中）
+      login(response.token, response.member);

-        // 更新状态管理
-        login(response.data.token, response.data.member);
+      Toast.show({ content: "登录成功", position: "top" });

-        Toast.show({ content: "登录成功", position: "top" });
-
-        // 跳转到首页或重定向URL
-        const returnUrl = searchParams.get("returnUrl");
-        if (returnUrl) {
-          const decodedUrl = decodeURIComponent(returnUrl);
-          if (isLoginPage(decodedUrl)) {
-            navigate("/");
-          } else {
-            window.location.href = decodedUrl;
-          }
-        } else {
+      // 跳转到首页或重定向URL
+      const returnUrl = searchParams.get("returnUrl");
+      if (returnUrl) {
+        const decodedUrl = decodeURIComponent(returnUrl);
+        if (isLoginPage(decodedUrl)) {
          navigate("/");
+        } else {
+          window.location.href = decodedUrl;
        }
      } else {
-        Toast.show({ content: response.msg || "登录失败", position: "top" });
+        navigate("/");
      }
    } catch (error: any) {
-      Toast.show({
-        content: error?.message || "登录失败，请稍后重试",
-        position: "top",
-      });
+      // 错误已在request中处理，这里不需要额外处理
    } finally {
      setLoading(false);
    }
@@ -158,7 +146,6 @@ const Login: React.FC = () => {
            </div>
            <h1 className={style["app-name"]}>存客宝</h1>
          </div>
-          <p className={style["welcome-text"]}>欢迎回来</p>
          <p className={style["subtitle"]}>登录您的账户继续使用</p>
        </div>

@@ -168,23 +155,23 @@ const Login: React.FC = () => {
          <div className={style["tab-container"]}>
            <div
              className={`${style["tab-item"]} ${
-                activeTab === "password" ? style["active"] : ""
+                activeTab === 1 ? style["active"] : ""
              }`}
-              onClick={() => setActiveTab("password")}
+              onClick={() => setActiveTab(1)}
            >
              密码登录
            </div>
            <div
              className={`${style["tab-item"]} ${
-                activeTab === "verification" ? style["active"] : ""
+                activeTab === 2 ? style["active"] : ""
              }`}
-              onClick={() => setActiveTab("verification")}
+              onClick={() => setActiveTab(2)}
            >
              验证码登录
            </div>
            <div
              className={`${style["tab-indicator"]} ${
-                activeTab === "verification" ? style["slide"] : ""
+                activeTab === 2 ? style["slide"] : ""
              }`}
            ></div>
          </div>
@@ -197,7 +184,7 @@ const Login: React.FC = () => {
          >
            {/* 手机号输入 */}
            <Form.Item
-              name="phone"
+              name="account"
              label="手机号"
              rules={[
                { required: true, message: "请输入手机号" },
@@ -218,7 +205,7 @@ const Login: React.FC = () => {
            </Form.Item>

            {/* 密码输入 */}
-            {activeTab === "password" && (
+            {activeTab === 1 && (
              <Form.Item
                name="password"
                label="密码"
@@ -242,7 +229,7 @@ const Login: React.FC = () => {
            )}

            {/* 验证码输入 */}
-            {activeTab === "verification" && (
+            {activeTab === 2 && (
              <Form.Item
                name="verificationCode"
                label="验证码"