feat: 本次提交更新内容如下
存了微信样式
This commit is contained in:
@@ -262,7 +262,7 @@
|
|||||||
|
|
||||||
.agreement-section {
|
.agreement-section {
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
padding: 12px;
|
padding: 10px;
|
||||||
background: #f8f9fa;
|
background: #f8f9fa;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
border: 1px solid #e5e5e5;
|
border: 1px solid #e5e5e5;
|
||||||
@@ -271,15 +271,16 @@
|
|||||||
.agreement-checkbox {
|
.agreement-checkbox {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 6px;
|
||||||
font-size: 12px;
|
font-size: 11px;
|
||||||
color: #666;
|
color: #666;
|
||||||
line-height: 1.4;
|
line-height: 1.3;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
:global(.adm-checkbox) {
|
:global(.adm-checkbox) {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
transform: scale(0.8);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -289,8 +290,9 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: visible;
|
||||||
text-overflow: ellipsis;
|
text-overflow: clip;
|
||||||
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.agreement-link {
|
.agreement-link {
|
||||||
@@ -298,6 +300,7 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
font-size: 11px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
|
|||||||
@@ -7,7 +7,11 @@ import {
|
|||||||
UserOutline,
|
UserOutline,
|
||||||
} from "antd-mobile-icons";
|
} from "antd-mobile-icons";
|
||||||
import { useUserStore } from "@/store/module/user";
|
import { useUserStore } from "@/store/module/user";
|
||||||
import { loginWithPassword, loginWithCode, sendVerificationCode } from "./api";
|
import {
|
||||||
|
loginWithPassword,
|
||||||
|
loginWithCode,
|
||||||
|
sendVerificationCode,
|
||||||
|
} from "@/api/auth";
|
||||||
import style from "./login.module.scss";
|
import style from "./login.module.scss";
|
||||||
|
|
||||||
const Login: React.FC = () => {
|
const Login: React.FC = () => {
|
||||||
@@ -77,41 +81,12 @@ const Login: React.FC = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 表单验证
|
|
||||||
const validateForm = async () => {
|
|
||||||
try {
|
|
||||||
const values = await form.validateFields();
|
|
||||||
|
|
||||||
if (!agreeToTerms) {
|
|
||||||
Toast.show({ content: "请同意用户协议和隐私政策", position: "top" });
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!validatePhone(values.phone)) {
|
|
||||||
Toast.show({ content: "请输入正确的11位手机号", position: "top" });
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (activeTab === "password" && !values.password) {
|
|
||||||
Toast.show({ content: "请输入密码", position: "top" });
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (activeTab === "verification" && !values.verificationCode) {
|
|
||||||
Toast.show({ content: "请输入验证码", position: "top" });
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return values;
|
|
||||||
} catch (error) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 登录处理
|
// 登录处理
|
||||||
const handleLogin = async () => {
|
const handleLogin = async (values: any) => {
|
||||||
const values = await validateForm();
|
if (!agreeToTerms) {
|
||||||
if (!values) return;
|
Toast.show({ content: "请同意用户协议和隐私政策", position: "top" });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
@@ -225,26 +200,36 @@ const Login: React.FC = () => {
|
|||||||
onFinish={handleLogin}
|
onFinish={handleLogin}
|
||||||
>
|
>
|
||||||
{/* 手机号输入 */}
|
{/* 手机号输入 */}
|
||||||
<div className={style["input-group"]}>
|
<Form.Item
|
||||||
<label className={style["input-label"]}>手机号</label>
|
name="phone"
|
||||||
|
label="手机号"
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: "请输入手机号" },
|
||||||
|
{
|
||||||
|
pattern: /^1[3-9]\d{9}$/,
|
||||||
|
message: "请输入正确的11位手机号",
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
<div className={style["input-wrapper"]}>
|
<div className={style["input-wrapper"]}>
|
||||||
<span className={style["input-prefix"]}>+86</span>
|
<span className={style["input-prefix"]}>+86</span>
|
||||||
<Input
|
<Input
|
||||||
name="phone"
|
|
||||||
placeholder="请输入手机号"
|
placeholder="请输入手机号"
|
||||||
clearable
|
clearable
|
||||||
className={style["phone-input"]}
|
className={style["phone-input"]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Form.Item>
|
||||||
|
|
||||||
{/* 密码输入 */}
|
{/* 密码输入 */}
|
||||||
{activeTab === "password" && (
|
{activeTab === "password" && (
|
||||||
<div className={style["input-group"]}>
|
<Form.Item
|
||||||
<label className={style["input-label"]}>密码</label>
|
name="password"
|
||||||
|
label="密码"
|
||||||
|
rules={[{ required: true, message: "请输入密码" }]}
|
||||||
|
>
|
||||||
<div className={style["input-wrapper"]}>
|
<div className={style["input-wrapper"]}>
|
||||||
<Input
|
<Input
|
||||||
name="password"
|
|
||||||
placeholder="请输入密码"
|
placeholder="请输入密码"
|
||||||
clearable
|
clearable
|
||||||
type={showPassword ? "text" : "password"}
|
type={showPassword ? "text" : "password"}
|
||||||
@@ -257,16 +242,18 @@ const Login: React.FC = () => {
|
|||||||
{showPassword ? <EyeOutline /> : <EyeInvisibleOutline />}
|
{showPassword ? <EyeOutline /> : <EyeInvisibleOutline />}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Form.Item>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 验证码输入 */}
|
{/* 验证码输入 */}
|
||||||
{activeTab === "verification" && (
|
{activeTab === "verification" && (
|
||||||
<div className={style["input-group"]}>
|
<Form.Item
|
||||||
<label className={style["input-label"]}>验证码</label>
|
name="verificationCode"
|
||||||
|
label="验证码"
|
||||||
|
rules={[{ required: true, message: "请输入验证码" }]}
|
||||||
|
>
|
||||||
<div className={style["input-wrapper"]}>
|
<div className={style["input-wrapper"]}>
|
||||||
<Input
|
<Input
|
||||||
name="verificationCode"
|
|
||||||
placeholder="请输入验证码"
|
placeholder="请输入验证码"
|
||||||
clearable
|
clearable
|
||||||
className={style["code-input"]}
|
className={style["code-input"]}
|
||||||
@@ -282,7 +269,7 @@ const Login: React.FC = () => {
|
|||||||
{countdown > 0 ? `${countdown}s` : "获取验证码"}
|
{countdown > 0 ? `${countdown}s` : "获取验证码"}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Form.Item>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 用户协议 */}
|
{/* 用户协议 */}
|
||||||
|
|||||||
Reference in New Issue
Block a user