feat: update
This commit is contained in:
landaiqing
@@ -1,168 +1,171 @@
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import './index.less'
|
||||
import {useEffect} from "react";
|
||||
/** @format */
|
||||
|
||||
import { useNavigate } from "react-router-dom";
|
||||
// import "./index.less";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export default () => {
|
||||
const navigate = useNavigate()
|
||||
const goBack = () => {
|
||||
navigate(-1)
|
||||
}
|
||||
const navigate = useNavigate();
|
||||
const goBack = () => {
|
||||
navigate(-1);
|
||||
};
|
||||
useEffect(() => {
|
||||
document.body.classList.add('not-fount-body')
|
||||
return ()=>{
|
||||
document.body.classList.remove('not-fount-body')
|
||||
}
|
||||
document.body.classList.add("not-fount-body");
|
||||
return () => {
|
||||
document.body.classList.remove("not-fount-body");
|
||||
};
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<body translate='no'>
|
||||
<div className='container container-star'>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-1'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
<div className='star-2'></div>
|
||||
</div>
|
||||
<div className='container container-bird'>
|
||||
<div className='bird bird-anim'>
|
||||
<div className='bird-container'>
|
||||
<div className='wing wing-left'>
|
||||
<div className='wing-left-top'></div>
|
||||
</div>
|
||||
<div className='wing wing-right'>
|
||||
<div className='wing-right-top'></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='bird bird-anim'>
|
||||
<div className='bird-container'>
|
||||
<div className='wing wing-left'>
|
||||
<div className='wing-left-top'></div>
|
||||
</div>
|
||||
<div className='wing wing-right'>
|
||||
<div className='wing-right-top'></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='bird bird-anim'>
|
||||
<div className='bird-container'>
|
||||
<div className='wing wing-left'>
|
||||
<div className='wing-left-top'></div>
|
||||
</div>
|
||||
<div className='wing wing-right'>
|
||||
<div className='wing-right-top'></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='bird bird-anim'>
|
||||
<div className='bird-container'>
|
||||
<div className='wing wing-left'>
|
||||
<div className='wing-left-top'></div>
|
||||
</div>
|
||||
<div className='wing wing-right'>
|
||||
<div className='wing-right-top'></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='bird bird-anim'>
|
||||
<div className='bird-container'>
|
||||
<div className='wing wing-left'>
|
||||
<div className='wing-left-top'></div>
|
||||
</div>
|
||||
<div className='wing wing-right'>
|
||||
<div className='wing-right-top'></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='bird bird-anim'>
|
||||
<div className='bird-container'>
|
||||
<div className='wing wing-left'>
|
||||
<div className='wing-left-top'></div>
|
||||
</div>
|
||||
<div className='wing wing-right'>
|
||||
<div className='wing-right-top'></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='container-title'>
|
||||
<div className='title'>
|
||||
<div className='number'>4</div>
|
||||
<div className='moon'>
|
||||
<div className='face'>
|
||||
<div className='mouth'></div>
|
||||
<div className='eyes'>
|
||||
<div className='eye-left'></div>
|
||||
<div className='eye-right'></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='number'>4</div>
|
||||
</div>
|
||||
<div className='subtitle'>Oops. Looks like you took a wrong turn.</div>
|
||||
<button
|
||||
style={{
|
||||
marginTop: '1.5em',
|
||||
}}
|
||||
onClick={goBack}>
|
||||
Go back
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<body translate="no">
|
||||
<div className="container container-star">
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-1"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
<div className="star-2"></div>
|
||||
</div>
|
||||
<div className="container container-bird">
|
||||
<div className="bird bird-anim">
|
||||
<div className="bird-container">
|
||||
<div className="wing wing-left">
|
||||
<div className="wing-left-top"></div>
|
||||
</div>
|
||||
<div className="wing wing-right">
|
||||
<div className="wing-right-top"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bird bird-anim">
|
||||
<div className="bird-container">
|
||||
<div className="wing wing-left">
|
||||
<div className="wing-left-top"></div>
|
||||
</div>
|
||||
<div className="wing wing-right">
|
||||
<div className="wing-right-top"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bird bird-anim">
|
||||
<div className="bird-container">
|
||||
<div className="wing wing-left">
|
||||
<div className="wing-left-top"></div>
|
||||
</div>
|
||||
<div className="wing wing-right">
|
||||
<div className="wing-right-top"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bird bird-anim">
|
||||
<div className="bird-container">
|
||||
<div className="wing wing-left">
|
||||
<div className="wing-left-top"></div>
|
||||
</div>
|
||||
<div className="wing wing-right">
|
||||
<div className="wing-right-top"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bird bird-anim">
|
||||
<div className="bird-container">
|
||||
<div className="wing wing-left">
|
||||
<div className="wing-left-top"></div>
|
||||
</div>
|
||||
<div className="wing wing-right">
|
||||
<div className="wing-right-top"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bird bird-anim">
|
||||
<div className="bird-container">
|
||||
<div className="wing wing-left">
|
||||
<div className="wing-left-top"></div>
|
||||
</div>
|
||||
<div className="wing wing-right">
|
||||
<div className="wing-right-top"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container-title">
|
||||
<div className="title">
|
||||
<div className="number">4</div>
|
||||
<div className="moon">
|
||||
<div className="face">
|
||||
<div className="mouth"></div>
|
||||
<div className="eyes">
|
||||
<div className="eye-left"></div>
|
||||
<div className="eye-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="number">4</div>
|
||||
</div>
|
||||
<div className="subtitle">Oops. Looks like you took a wrong turn.</div>
|
||||
<button
|
||||
style={{
|
||||
marginTop: "1.5em",
|
||||
}}
|
||||
onClick={goBack}>
|
||||
Go back
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,30 +1,13 @@
|
||||
import HomeIndex from '@/components/HomeIndex'
|
||||
import { useEffect } from 'react'
|
||||
import { getBaseInfo, initMinio } from '@/api/oss/minio'
|
||||
import { Button } from 'antd'
|
||||
/** @format */
|
||||
import { useEffect } from "react";
|
||||
|
||||
import HomeIndex from "@/components/HomeIndex";
|
||||
|
||||
export default () => {
|
||||
const minioInit = () => {
|
||||
initMinio('1').then(() => {
|
||||
getBaseInfo('wallhaven-1pd98v.jpg').then((res) => {
|
||||
console.log(res)
|
||||
})
|
||||
})
|
||||
}
|
||||
const init = () => {
|
||||
initMinio('2').then(() => {
|
||||
getBaseInfo('background.png').then((res) => {
|
||||
console.log(res)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {}, [])
|
||||
return (
|
||||
<div>
|
||||
<HomeIndex />
|
||||
<Button onClick={minioInit}>测试一</Button>
|
||||
<Button onClick={init}>测试二</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
useEffect(() => {}, []);
|
||||
return (
|
||||
<div>
|
||||
<HomeIndex />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
import DefaultLayOut from '@/layout/default'
|
||||
/** @format */
|
||||
|
||||
import DefaultLayOut from "@/layout/default";
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<>
|
||||
<DefaultLayOut />
|
||||
</>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<DefaultLayOut />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,376 +1,378 @@
|
||||
/** @format */
|
||||
|
||||
import {
|
||||
GithubOutlined,
|
||||
GitlabOutlined,
|
||||
LockOutlined,
|
||||
MobileOutlined,
|
||||
QqOutlined,
|
||||
UserOutlined,
|
||||
WechatOutlined,
|
||||
} from '@ant-design/icons'
|
||||
import { ProFormCaptcha, ProFormCheckbox, ProFormText } from '@ant-design/pro-components'
|
||||
import { Divider, Space, Tabs, message, Image, Alert, Form, Button } from 'antd'
|
||||
import { CSSProperties, useRef } from 'react'
|
||||
import { useState } from 'react'
|
||||
import logo from '@/assets/icons/schisandra.svg'
|
||||
import qrCode from '@/assets/images/login_qrcode-landaiqing.jpg'
|
||||
import styles from './index.module.less'
|
||||
import { observer } from 'mobx-react'
|
||||
import FooterComponent from '@/components/Footer'
|
||||
import RotateCaptcha, { CaptchaInstance } from 'react-rotate-captcha'
|
||||
import { get, load, verify } from '@/api/captcha/index.ts'
|
||||
GithubOutlined,
|
||||
GitlabOutlined,
|
||||
LockOutlined,
|
||||
MobileOutlined,
|
||||
QqOutlined,
|
||||
UserOutlined,
|
||||
WechatOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { ProFormCaptcha, ProFormCheckbox, ProFormText } from "@ant-design/pro-components";
|
||||
import { Divider, Space, Tabs, message, Image, Alert, Form, Button } from "antd";
|
||||
import { CSSProperties, useRef } from "react";
|
||||
import { useState } from "react";
|
||||
import logo from "@/assets/icons/schisandra.svg";
|
||||
import qrCode from "@/assets/images/login_qrcode-landaiqing.jpg";
|
||||
import styles from "./index.module.less";
|
||||
import { observer } from "mobx-react";
|
||||
import FooterComponent from "@/components/Footer";
|
||||
import RotateCaptcha, { CaptchaInstance } from "react-rotate-captcha";
|
||||
import { get, load, verify } from "@/api/captcha/index.ts";
|
||||
// import useStore from '@/utils/store/useStore.tsx'
|
||||
type LoginType = 'account' | 'phone'
|
||||
type LoginType = "account" | "phone";
|
||||
|
||||
const iconStyles: CSSProperties = {
|
||||
color: 'rgba(0, 0, 0, 0.2)',
|
||||
fontSize: '18px',
|
||||
verticalAlign: 'middle',
|
||||
cursor: 'pointer',
|
||||
}
|
||||
color: "rgba(0, 0, 0, 0.2)",
|
||||
fontSize: "18px",
|
||||
verticalAlign: "middle",
|
||||
cursor: "pointer",
|
||||
};
|
||||
|
||||
export default observer(() => {
|
||||
const [form] = Form.useForm()
|
||||
const captcha = useRef<CaptchaInstance>(null)
|
||||
const items = [
|
||||
{
|
||||
label: (
|
||||
<span>
|
||||
<UserOutlined />
|
||||
账户登录
|
||||
</span>
|
||||
),
|
||||
key: 'account',
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<span>
|
||||
<MobileOutlined />
|
||||
短信登录
|
||||
</span>
|
||||
),
|
||||
key: 'phone',
|
||||
},
|
||||
]
|
||||
const [loginType, setLoginType] = useState<LoginType>('account')
|
||||
const [form] = Form.useForm();
|
||||
const captcha = useRef<CaptchaInstance>(null);
|
||||
const items = [
|
||||
{
|
||||
label: (
|
||||
<span>
|
||||
<UserOutlined />
|
||||
账户登录
|
||||
</span>
|
||||
),
|
||||
key: "account",
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<span>
|
||||
<MobileOutlined />
|
||||
短信登录
|
||||
</span>
|
||||
),
|
||||
key: "phone",
|
||||
},
|
||||
];
|
||||
const [loginType, setLoginType] = useState<LoginType>("account");
|
||||
|
||||
const onSubmit = async (formData: object) => {
|
||||
console.log(formData)
|
||||
}
|
||||
return (
|
||||
<RotateCaptcha get={get} load={load} verify={verify} limit={2} ref={captcha}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.content}>
|
||||
<Space className={styles.content_content}>
|
||||
<Space className={styles.login_content}>
|
||||
<Space align='center' className={styles.mp_code}>
|
||||
<Space direction='vertical' align='center'>
|
||||
<span className={styles.mp_code_title}>微信扫码登录</span>
|
||||
<Image
|
||||
preview={false}
|
||||
height={210}
|
||||
width={200}
|
||||
className={styles.mp_code_img}
|
||||
// src={generateMpRegCodeData.data?.qrCodeUrl}
|
||||
src={qrCode}
|
||||
/>
|
||||
<Alert
|
||||
// message={(<span>微信扫码<span>关注公众号</span></span>)}
|
||||
description={
|
||||
<div>
|
||||
<span>
|
||||
微信扫码
|
||||
<span className={styles.mp_tips}>
|
||||
关注公众号
|
||||
</span>
|
||||
</span>
|
||||
<br />
|
||||
登录更快更安全
|
||||
</div>
|
||||
}
|
||||
// type="success"
|
||||
showIcon={true}
|
||||
className={styles.alert}
|
||||
icon={<WechatOutlined />}
|
||||
/>
|
||||
</Space>
|
||||
</Space>
|
||||
<Form
|
||||
form={form}
|
||||
className={styles.login_form}
|
||||
initialValues={{
|
||||
autoLogin: true,
|
||||
}}>
|
||||
<Space direction='vertical' align='center'>
|
||||
<Space className={styles.logo}>
|
||||
<img
|
||||
alt='logo'
|
||||
src={logo}
|
||||
style={{ width: '44px', height: '44px' }}
|
||||
/>
|
||||
<span>五味子云存储</span>
|
||||
</Space>
|
||||
<div className={styles.subTitle}>随时随地分享你的美好瞬间</div>
|
||||
</Space>
|
||||
const onSubmit = async (formData: object) => {
|
||||
console.log(formData);
|
||||
};
|
||||
return (
|
||||
<RotateCaptcha get={get} load={load} verify={verify} limit={2} ref={captcha}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.content}>
|
||||
<Space className={styles.content_content}>
|
||||
<Space className={styles.login_content}>
|
||||
<Space align="center" className={styles.mp_code}>
|
||||
<Space direction="vertical" align="center">
|
||||
<span className={styles.mp_code_title}>微信扫码登录</span>
|
||||
<Image
|
||||
preview={false}
|
||||
height={210}
|
||||
width={200}
|
||||
className={styles.mp_code_img}
|
||||
// src={generateMpRegCodeData.data?.qrCodeUrl}
|
||||
src={qrCode}
|
||||
/>
|
||||
<Alert
|
||||
// message={(<span>微信扫码<span>关注公众号</span></span>)}
|
||||
description={
|
||||
<div>
|
||||
<span>
|
||||
微信扫码
|
||||
<span className={styles.mp_tips}>
|
||||
关注公众号
|
||||
</span>
|
||||
</span>
|
||||
<br />
|
||||
登录更快更安全
|
||||
</div>
|
||||
}
|
||||
// type="success"
|
||||
showIcon={true}
|
||||
className={styles.alert}
|
||||
icon={<WechatOutlined />}
|
||||
/>
|
||||
</Space>
|
||||
</Space>
|
||||
<Form
|
||||
form={form}
|
||||
className={styles.login_form}
|
||||
initialValues={{
|
||||
autoLogin: true,
|
||||
}}>
|
||||
<Space direction="vertical" align="center">
|
||||
<Space className={styles.logo}>
|
||||
<img
|
||||
alt="logo"
|
||||
src={logo}
|
||||
style={{ width: "44px", height: "44px" }}
|
||||
/>
|
||||
<span>五味子云存储</span>
|
||||
</Space>
|
||||
<div className={styles.subTitle}>随时随地分享你的美好瞬间</div>
|
||||
</Space>
|
||||
|
||||
<Tabs
|
||||
centered={true}
|
||||
items={items}
|
||||
activeKey={loginType}
|
||||
onChange={(activeKey) =>
|
||||
setLoginType(activeKey as LoginType)
|
||||
}></Tabs>
|
||||
<Tabs
|
||||
centered={true}
|
||||
items={items}
|
||||
activeKey={loginType}
|
||||
onChange={(activeKey) =>
|
||||
setLoginType(activeKey as LoginType)
|
||||
}></Tabs>
|
||||
|
||||
{loginType === 'account' && (
|
||||
<>
|
||||
<ProFormText
|
||||
name='username'
|
||||
fieldProps={{
|
||||
size: 'large',
|
||||
prefix: <UserOutlined className={'prefixIcon'} />,
|
||||
}}
|
||||
placeholder={'请输入账号/邮箱/电话号码'}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入用户名!',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText.Password
|
||||
name='password'
|
||||
fieldProps={{
|
||||
size: 'large',
|
||||
prefix: <LockOutlined className={'prefixIcon'} />,
|
||||
}}
|
||||
placeholder={'请输入密码'}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入密码！',
|
||||
},
|
||||
{
|
||||
pattern:
|
||||
/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/,
|
||||
message:
|
||||
'密码长度需在6~18位字符，且必须包含字母和数字！',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
{/*<ProFormText*/}
|
||||
{/* addonAfter={CodeImg}*/}
|
||||
{/* name='code'*/}
|
||||
{/* fieldProps={{*/}
|
||||
{/* size: 'large',*/}
|
||||
{/* prefix: <BarcodeOutlined className={'prefixIcon'} />,*/}
|
||||
{/* autoComplete: 'off',*/}
|
||||
{/* }}*/}
|
||||
{/* placeholder='请输入图形验证码'*/}
|
||||
{/* rules={[*/}
|
||||
{/* {*/}
|
||||
{/* required: true,*/}
|
||||
{/* message: '请输入图形验证码！',*/}
|
||||
{/* },*/}
|
||||
{/* {*/}
|
||||
{/* pattern: /^[a-zA-Z0-9]{5}$/,*/}
|
||||
{/* message: '图形验证码格式不正确',*/}
|
||||
{/* },*/}
|
||||
{/* ]}*/}
|
||||
{/*/>*/}
|
||||
</>
|
||||
)}
|
||||
{loginType === 'phone' && (
|
||||
<>
|
||||
<ProFormText
|
||||
fieldProps={{
|
||||
size: 'large',
|
||||
prefix: <MobileOutlined className={'prefixIcon'} />,
|
||||
autoComplete: 'off',
|
||||
}}
|
||||
name='mobile'
|
||||
placeholder={'请输入手机号'}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入手机号！',
|
||||
},
|
||||
{
|
||||
pattern: /^1\d{10}$/,
|
||||
message: '手机号格式错误！',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
{/*<ProFormText*/}
|
||||
{/* addonAfter={CodeImg}*/}
|
||||
{/* name='code'*/}
|
||||
{/* fieldProps={{*/}
|
||||
{/* size: 'large',*/}
|
||||
{/* prefix: <BarcodeOutlined className={'prefixIcon'} />,*/}
|
||||
{/* autoComplete: 'off',*/}
|
||||
{/* }}*/}
|
||||
{/* placeholder='请输入图形验证码'*/}
|
||||
{/* rules={[*/}
|
||||
{/* {*/}
|
||||
{/* required: true,*/}
|
||||
{/* message: '请输入图形验证码！',*/}
|
||||
{/* },*/}
|
||||
{/* {*/}
|
||||
{/* pattern: /^[a-zA-Z0-9]{5}$/,*/}
|
||||
{/* message: '图形验证码格式不正确',*/}
|
||||
{/* },*/}
|
||||
{/* ]}*/}
|
||||
{/*/>*/}
|
||||
<ProFormCaptcha
|
||||
fieldProps={{
|
||||
size: 'large',
|
||||
prefix: <LockOutlined className={'prefixIcon'} />,
|
||||
}}
|
||||
captchaProps={{
|
||||
size: 'large',
|
||||
}}
|
||||
placeholder={'请输入验证码'}
|
||||
captchaTextRender={(timing, count) => {
|
||||
if (timing) {
|
||||
return `${count} ${'获取验证码'}`
|
||||
}
|
||||
return '获取验证码'
|
||||
}}
|
||||
name='captcha'
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入验证码！',
|
||||
},
|
||||
]}
|
||||
onGetCaptcha={async () => {
|
||||
captcha.current!.open()
|
||||
message.success('获取验证码成功！验证码为：1234')
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<div style={{ marginBlockEnd: 14 }}>
|
||||
<ProFormCheckbox noStyle name='autoLogin'>
|
||||
自动登录
|
||||
</ProFormCheckbox>
|
||||
<a style={{ float: 'right' }}>忘记密码 </a>
|
||||
</div>
|
||||
{loginType === "account" && (
|
||||
<>
|
||||
<ProFormText
|
||||
name="username"
|
||||
fieldProps={{
|
||||
size: "large",
|
||||
prefix: <UserOutlined className={"prefixIcon"} />,
|
||||
}}
|
||||
placeholder={"请输入账号/邮箱/电话号码"}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: "请输入用户名!",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText.Password
|
||||
name="password"
|
||||
fieldProps={{
|
||||
size: "large",
|
||||
prefix: <LockOutlined className={"prefixIcon"} />,
|
||||
}}
|
||||
placeholder={"请输入密码"}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: "请输入密码！",
|
||||
},
|
||||
{
|
||||
pattern:
|
||||
/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/,
|
||||
message:
|
||||
"密码长度需在6~18位字符，且必须包含字母和数字！",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
{/*<ProFormText*/}
|
||||
{/* addonAfter={CodeImg}*/}
|
||||
{/* name='code'*/}
|
||||
{/* fieldProps={{*/}
|
||||
{/* size: 'large',*/}
|
||||
{/* prefix: <BarcodeOutlined className={'prefixIcon'} />,*/}
|
||||
{/* autoComplete: 'off',*/}
|
||||
{/* }}*/}
|
||||
{/* placeholder='请输入图形验证码'*/}
|
||||
{/* rules={[*/}
|
||||
{/* {*/}
|
||||
{/* required: true,*/}
|
||||
{/* message: '请输入图形验证码！',*/}
|
||||
{/* },*/}
|
||||
{/* {*/}
|
||||
{/* pattern: /^[a-zA-Z0-9]{5}$/,*/}
|
||||
{/* message: '图形验证码格式不正确',*/}
|
||||
{/* },*/}
|
||||
{/* ]}*/}
|
||||
{/*/>*/}
|
||||
</>
|
||||
)}
|
||||
{loginType === "phone" && (
|
||||
<>
|
||||
<ProFormText
|
||||
fieldProps={{
|
||||
size: "large",
|
||||
prefix: <MobileOutlined className={"prefixIcon"} />,
|
||||
autoComplete: "off",
|
||||
}}
|
||||
name="mobile"
|
||||
placeholder={"请输入手机号"}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: "请输入手机号！",
|
||||
},
|
||||
{
|
||||
pattern: /^1\d{10}$/,
|
||||
message: "手机号格式错误！",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
{/*<ProFormText*/}
|
||||
{/* addonAfter={CodeImg}*/}
|
||||
{/* name='code'*/}
|
||||
{/* fieldProps={{*/}
|
||||
{/* size: 'large',*/}
|
||||
{/* prefix: <BarcodeOutlined className={'prefixIcon'} />,*/}
|
||||
{/* autoComplete: 'off',*/}
|
||||
{/* }}*/}
|
||||
{/* placeholder='请输入图形验证码'*/}
|
||||
{/* rules={[*/}
|
||||
{/* {*/}
|
||||
{/* required: true,*/}
|
||||
{/* message: '请输入图形验证码！',*/}
|
||||
{/* },*/}
|
||||
{/* {*/}
|
||||
{/* pattern: /^[a-zA-Z0-9]{5}$/,*/}
|
||||
{/* message: '图形验证码格式不正确',*/}
|
||||
{/* },*/}
|
||||
{/* ]}*/}
|
||||
{/*/>*/}
|
||||
<ProFormCaptcha
|
||||
fieldProps={{
|
||||
size: "large",
|
||||
prefix: <LockOutlined className={"prefixIcon"} />,
|
||||
}}
|
||||
captchaProps={{
|
||||
size: "large",
|
||||
}}
|
||||
placeholder={"请输入验证码"}
|
||||
captchaTextRender={(timing, count) => {
|
||||
if (timing) {
|
||||
return `${count} ${"获取验证码"}`;
|
||||
}
|
||||
return "获取验证码";
|
||||
}}
|
||||
name="captcha"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: "请输入验证码！",
|
||||
},
|
||||
]}
|
||||
onGetCaptcha={async () => {
|
||||
captcha.current!.open();
|
||||
message.success("获取验证码成功！验证码为：1234");
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<div style={{ marginBlockEnd: 14 }}>
|
||||
<ProFormCheckbox noStyle name="autoLogin">
|
||||
自动登录
|
||||
</ProFormCheckbox>
|
||||
<a style={{ float: "right" }}>忘记密码 </a>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type='primary'
|
||||
block
|
||||
size='large'
|
||||
onClick={async () => {
|
||||
let validateFields
|
||||
if (loginType === 'account') {
|
||||
validateFields = ['username', 'password', 'code']
|
||||
} else {
|
||||
validateFields = ['mobile', 'captcha', 'code']
|
||||
}
|
||||
<Button
|
||||
type="primary"
|
||||
block
|
||||
size="large"
|
||||
onClick={async () => {
|
||||
let validateFields;
|
||||
if (loginType === "account") {
|
||||
validateFields = ["username", "password", "code"];
|
||||
} else {
|
||||
validateFields = ["mobile", "captcha", "code"];
|
||||
}
|
||||
|
||||
await form
|
||||
.validateFields(validateFields)
|
||||
.then(async (values) => {
|
||||
if (loginType === 'account') {
|
||||
captcha.current!.open()
|
||||
}
|
||||
await onSubmit(values as API.PhoneRegisterRequest)
|
||||
})
|
||||
.catch((errorInfo) => {
|
||||
console.error(errorInfo)
|
||||
})
|
||||
}}>
|
||||
登录
|
||||
</Button>
|
||||
await form
|
||||
.validateFields(validateFields)
|
||||
.then(async (values) => {
|
||||
if (loginType === "account") {
|
||||
captcha.current!.open();
|
||||
}
|
||||
await onSubmit(values as API.PhoneRegisterRequest);
|
||||
})
|
||||
.catch((errorInfo) => {
|
||||
console.error(errorInfo);
|
||||
});
|
||||
}}>
|
||||
登录
|
||||
</Button>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
}}>
|
||||
<Divider plain>
|
||||
<span
|
||||
style={{
|
||||
color: '#CCC',
|
||||
fontWeight: 'normal',
|
||||
fontSize: 14,
|
||||
}}>
|
||||
其他登录方式
|
||||
</span>
|
||||
</Divider>
|
||||
<Space align='center' size={24}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
height: 40,
|
||||
width: 40,
|
||||
border: '1px solid #D4D8DD',
|
||||
borderRadius: '50%',
|
||||
}}>
|
||||
<QqOutlined
|
||||
style={{ ...iconStyles, color: '#1677FF' }}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
height: 40,
|
||||
width: 40,
|
||||
border: '1px solid #D4D8DD',
|
||||
borderRadius: '50%',
|
||||
}}>
|
||||
<WechatOutlined
|
||||
style={{ ...iconStyles, color: '#08a327' }}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
height: 40,
|
||||
width: 40,
|
||||
border: '1px solid #D4D8DD',
|
||||
borderRadius: '50%',
|
||||
}}>
|
||||
<GithubOutlined
|
||||
style={{ ...iconStyles, color: '#333333' }}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
height: 40,
|
||||
width: 40,
|
||||
border: '1px solid #D4D8DD',
|
||||
borderRadius: '50%',
|
||||
}}>
|
||||
<GitlabOutlined
|
||||
style={{ ...iconStyles, color: '#FF6A10' }}
|
||||
/>
|
||||
</div>
|
||||
</Space>
|
||||
</div>
|
||||
</Form>
|
||||
<a href='/register' className={styles.go_to_register}>
|
||||
<span>注册</span>
|
||||
</a>
|
||||
</Space>
|
||||
</Space>
|
||||
</div>
|
||||
<FooterComponent></FooterComponent>
|
||||
</div>
|
||||
</RotateCaptcha>
|
||||
)
|
||||
})
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
flexDirection: "column",
|
||||
}}>
|
||||
<Divider plain>
|
||||
<span
|
||||
style={{
|
||||
color: "#CCC",
|
||||
fontWeight: "normal",
|
||||
fontSize: 14,
|
||||
}}>
|
||||
其他登录方式
|
||||
</span>
|
||||
</Divider>
|
||||
<Space align="center" size={24}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
flexDirection: "column",
|
||||
height: 40,
|
||||
width: 40,
|
||||
border: "1px solid #D4D8DD",
|
||||
borderRadius: "50%",
|
||||
}}>
|
||||
<QqOutlined
|
||||
style={{ ...iconStyles, color: "#1677FF" }}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
flexDirection: "column",
|
||||
height: 40,
|
||||
width: 40,
|
||||
border: "1px solid #D4D8DD",
|
||||
borderRadius: "50%",
|
||||
}}>
|
||||
<WechatOutlined
|
||||
style={{ ...iconStyles, color: "#08a327" }}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
flexDirection: "column",
|
||||
height: 40,
|
||||
width: 40,
|
||||
border: "1px solid #D4D8DD",
|
||||
borderRadius: "50%",
|
||||
}}>
|
||||
<GithubOutlined
|
||||
style={{ ...iconStyles, color: "#333333" }}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
flexDirection: "column",
|
||||
height: 40,
|
||||
width: 40,
|
||||
border: "1px solid #D4D8DD",
|
||||
borderRadius: "50%",
|
||||
}}>
|
||||
<GitlabOutlined
|
||||
style={{ ...iconStyles, color: "#FF6A10" }}
|
||||
/>
|
||||
</div>
|
||||
</Space>
|
||||
</div>
|
||||
</Form>
|
||||
<a href="/register" className={styles.go_to_register}>
|
||||
<span>注册</span>
|
||||
</a>
|
||||
</Space>
|
||||
</Space>
|
||||
</div>
|
||||
<FooterComponent></FooterComponent>
|
||||
</div>
|
||||
</RotateCaptcha>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -1,221 +1,223 @@
|
||||
import { LockOutlined, MobileOutlined, WechatOutlined } from '@ant-design/icons'
|
||||
import { ProFormCaptcha, ProFormText } from '@ant-design/pro-components'
|
||||
import { Space, Tabs, message, Image, Alert, Form, Button } from 'antd'
|
||||
import { useState } from 'react'
|
||||
import logo from '@/assets/icons/schisandra.svg'
|
||||
/** @format */
|
||||
|
||||
import { LockOutlined, MobileOutlined, WechatOutlined } from "@ant-design/icons";
|
||||
import { ProFormCaptcha, ProFormText } from "@ant-design/pro-components";
|
||||
import { Space, Tabs, message, Image, Alert, Form, Button } from "antd";
|
||||
import { useState } from "react";
|
||||
import logo from "@/assets/icons/schisandra.svg";
|
||||
// import background from '@/assets/images/background.png'
|
||||
import qrCode from '@/assets/images/login_qrcode-landaiqing.jpg'
|
||||
import styles from './index.module.less'
|
||||
import { observer } from 'mobx-react'
|
||||
import FooterComponent from '@/components/Footer'
|
||||
import qrCode from "@/assets/images/login_qrcode-landaiqing.jpg";
|
||||
import styles from "./index.module.less";
|
||||
import { observer } from "mobx-react";
|
||||
import FooterComponent from "@/components/Footer";
|
||||
// import useStore from '@/utils/store/useStore.tsx'
|
||||
type LoginType = 'phone'
|
||||
type LoginType = "phone";
|
||||
|
||||
export default observer(() => {
|
||||
const [form] = Form.useForm()
|
||||
const items = [
|
||||
{
|
||||
key: 'phone',
|
||||
label: (
|
||||
<span>
|
||||
<MobileOutlined />
|
||||
手机号注册
|
||||
</span>
|
||||
),
|
||||
},
|
||||
]
|
||||
const [loginType, setLoginType] = useState<LoginType>('phone')
|
||||
const [form] = Form.useForm();
|
||||
const items = [
|
||||
{
|
||||
key: "phone",
|
||||
label: (
|
||||
<span>
|
||||
<MobileOutlined />
|
||||
手机号注册
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
const [loginType, setLoginType] = useState<LoginType>("phone");
|
||||
|
||||
const onSubmit = async (formData: object) => {
|
||||
console.log(formData)
|
||||
}
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.content}>
|
||||
<Space>
|
||||
<Space className={styles.login_content}>
|
||||
<Space align='center' className={styles.mp_code}>
|
||||
<Space direction='vertical' align='center'>
|
||||
<span className={styles.mp_code_title}>微信扫码登录</span>
|
||||
<Image
|
||||
preview={false}
|
||||
height={210}
|
||||
width={200}
|
||||
className={styles.mp_code_img}
|
||||
// src={generateMpRegCodeData.data?.qrCodeUrl}
|
||||
src={qrCode}
|
||||
/>
|
||||
<Alert
|
||||
// message={(<span>微信扫码<span>关注公众号</span></span>)}
|
||||
description={
|
||||
<div>
|
||||
<span>
|
||||
微信扫码
|
||||
<span className={styles.mp_tips}>关注公众号</span>
|
||||
</span>
|
||||
<br />
|
||||
登录更快更安全
|
||||
</div>
|
||||
}
|
||||
// type="success"
|
||||
showIcon={true}
|
||||
className={styles.alert}
|
||||
icon={<WechatOutlined />}
|
||||
/>
|
||||
</Space>
|
||||
</Space>
|
||||
<Form
|
||||
form={form}
|
||||
className={styles.login_form}
|
||||
initialValues={{
|
||||
autoLogin: true,
|
||||
}}>
|
||||
<Space direction='vertical' align='center'>
|
||||
<Space className={styles.logo}>
|
||||
<img
|
||||
alt='logo'
|
||||
src={logo}
|
||||
style={{ width: '44px', height: '44px' }}
|
||||
/>
|
||||
<span>五味子云存储</span>
|
||||
</Space>
|
||||
<div className={styles.subTitle}>随时随地分享你的美好瞬间</div>
|
||||
</Space>
|
||||
const onSubmit = async (formData: object) => {
|
||||
console.log(formData);
|
||||
};
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.content}>
|
||||
<Space>
|
||||
<Space className={styles.login_content}>
|
||||
<Space align="center" className={styles.mp_code}>
|
||||
<Space direction="vertical" align="center">
|
||||
<span className={styles.mp_code_title}>微信扫码登录</span>
|
||||
<Image
|
||||
preview={false}
|
||||
height={210}
|
||||
width={200}
|
||||
className={styles.mp_code_img}
|
||||
// src={generateMpRegCodeData.data?.qrCodeUrl}
|
||||
src={qrCode}
|
||||
/>
|
||||
<Alert
|
||||
// message={(<span>微信扫码<span>关注公众号</span></span>)}
|
||||
description={
|
||||
<div>
|
||||
<span>
|
||||
微信扫码
|
||||
<span className={styles.mp_tips}>关注公众号</span>
|
||||
</span>
|
||||
<br />
|
||||
登录更快更安全
|
||||
</div>
|
||||
}
|
||||
// type="success"
|
||||
showIcon={true}
|
||||
className={styles.alert}
|
||||
icon={<WechatOutlined />}
|
||||
/>
|
||||
</Space>
|
||||
</Space>
|
||||
<Form
|
||||
form={form}
|
||||
className={styles.login_form}
|
||||
initialValues={{
|
||||
autoLogin: true,
|
||||
}}>
|
||||
<Space direction="vertical" align="center">
|
||||
<Space className={styles.logo}>
|
||||
<img
|
||||
alt="logo"
|
||||
src={logo}
|
||||
style={{ width: "44px", height: "44px" }}
|
||||
/>
|
||||
<span>五味子云存储</span>
|
||||
</Space>
|
||||
<div className={styles.subTitle}>随时随地分享你的美好瞬间</div>
|
||||
</Space>
|
||||
|
||||
<Tabs
|
||||
centered={true}
|
||||
items={items}
|
||||
activeKey={loginType}
|
||||
onChange={(activeKey) =>
|
||||
setLoginType(activeKey as LoginType)
|
||||
}></Tabs>
|
||||
<Tabs
|
||||
centered={true}
|
||||
items={items}
|
||||
activeKey={loginType}
|
||||
onChange={(activeKey) =>
|
||||
setLoginType(activeKey as LoginType)
|
||||
}></Tabs>
|
||||
|
||||
<>
|
||||
<ProFormText
|
||||
fieldProps={{
|
||||
size: 'large',
|
||||
prefix: <MobileOutlined className={'prefixIcon'} />,
|
||||
autoComplete: 'off',
|
||||
}}
|
||||
name='phone'
|
||||
placeholder='请输入手机号！'
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入手机号！',
|
||||
},
|
||||
{
|
||||
pattern: /^1\d{10}$/,
|
||||
message: '手机号格式错误！',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<>
|
||||
<ProFormText
|
||||
fieldProps={{
|
||||
size: "large",
|
||||
prefix: <MobileOutlined className={"prefixIcon"} />,
|
||||
autoComplete: "off",
|
||||
}}
|
||||
name="phone"
|
||||
placeholder="请输入手机号！"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: "请输入手机号！",
|
||||
},
|
||||
{
|
||||
pattern: /^1\d{10}$/,
|
||||
message: "手机号格式错误！",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<ProFormText.Password
|
||||
name='password'
|
||||
fieldProps={{
|
||||
size: 'large',
|
||||
prefix: <LockOutlined className={'prefixIcon'} />,
|
||||
}}
|
||||
placeholder='请输入密码'
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入密码！',
|
||||
},
|
||||
{
|
||||
pattern:
|
||||
/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/,
|
||||
message:
|
||||
'密码长度需在6~18位字符，且必须包含字母和数字！',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText.Password
|
||||
name="password"
|
||||
fieldProps={{
|
||||
size: "large",
|
||||
prefix: <LockOutlined className={"prefixIcon"} />,
|
||||
}}
|
||||
placeholder="请输入密码"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: "请输入密码！",
|
||||
},
|
||||
{
|
||||
pattern:
|
||||
/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/,
|
||||
message:
|
||||
"密码长度需在6~18位字符，且必须包含字母和数字！",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<ProFormText.Password
|
||||
name='confirmPassword'
|
||||
dependencies={['password']}
|
||||
fieldProps={{
|
||||
size: 'large',
|
||||
prefix: <LockOutlined className={'prefixIcon'} />,
|
||||
}}
|
||||
placeholder='请再次确认密码'
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请再次确认密码！',
|
||||
},
|
||||
({ getFieldValue }) => ({
|
||||
validator(_, value) {
|
||||
if (!value || getFieldValue('password') === value) {
|
||||
return Promise.resolve()
|
||||
}
|
||||
return Promise.reject(
|
||||
new Error('两次输入的密码不一致!'),
|
||||
)
|
||||
},
|
||||
}),
|
||||
]}
|
||||
/>
|
||||
<ProFormCaptcha
|
||||
fieldProps={{
|
||||
size: 'large',
|
||||
prefix: <LockOutlined className={'prefixIcon'} />,
|
||||
}}
|
||||
captchaProps={{
|
||||
size: 'large',
|
||||
}}
|
||||
placeholder={'请输入验证码'}
|
||||
captchaTextRender={(timing, count) => {
|
||||
if (timing) {
|
||||
return `${count} ${'获取验证码'}`
|
||||
}
|
||||
return '获取验证码'
|
||||
}}
|
||||
name='captcha'
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入验证码！',
|
||||
},
|
||||
]}
|
||||
onGetCaptcha={async () => {
|
||||
message.success('获取验证码成功！验证码为：1234')
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
<Button
|
||||
type='primary'
|
||||
block
|
||||
size='large'
|
||||
onClick={async () => {
|
||||
const validateFields = [
|
||||
'phone',
|
||||
'username',
|
||||
'password',
|
||||
'captcha',
|
||||
'code',
|
||||
'confirmPassword',
|
||||
]
|
||||
await form
|
||||
.validateFields(validateFields)
|
||||
.then(async (values) => {
|
||||
await onSubmit(values as API.PhoneRegisterRequest)
|
||||
})
|
||||
.catch((errorInfo) => {
|
||||
console.error(errorInfo)
|
||||
})
|
||||
}}>
|
||||
注册
|
||||
</Button>
|
||||
</Form>
|
||||
<a href='/login' className={styles.go_to_register}>
|
||||
<span>登录</span>
|
||||
</a>
|
||||
</Space>
|
||||
</Space>
|
||||
</div>
|
||||
<FooterComponent />
|
||||
</div>
|
||||
)
|
||||
})
|
||||
<ProFormText.Password
|
||||
name="confirmPassword"
|
||||
dependencies={["password"]}
|
||||
fieldProps={{
|
||||
size: "large",
|
||||
prefix: <LockOutlined className={"prefixIcon"} />,
|
||||
}}
|
||||
placeholder="请再次确认密码"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: "请再次确认密码！",
|
||||
},
|
||||
({ getFieldValue }) => ({
|
||||
validator(_, value) {
|
||||
if (!value || getFieldValue("password") === value) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.reject(
|
||||
new Error("两次输入的密码不一致!"),
|
||||
);
|
||||
},
|
||||
}),
|
||||
]}
|
||||
/>
|
||||
<ProFormCaptcha
|
||||
fieldProps={{
|
||||
size: "large",
|
||||
prefix: <LockOutlined className={"prefixIcon"} />,
|
||||
}}
|
||||
captchaProps={{
|
||||
size: "large",
|
||||
}}
|
||||
placeholder={"请输入验证码"}
|
||||
captchaTextRender={(timing, count) => {
|
||||
if (timing) {
|
||||
return `${count} ${"获取验证码"}`;
|
||||
}
|
||||
return "获取验证码";
|
||||
}}
|
||||
name="captcha"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: "请输入验证码！",
|
||||
},
|
||||
]}
|
||||
onGetCaptcha={async () => {
|
||||
message.success("获取验证码成功！验证码为：1234");
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
<Button
|
||||
type="primary"
|
||||
block
|
||||
size="large"
|
||||
onClick={async () => {
|
||||
const validateFields = [
|
||||
"phone",
|
||||
"username",
|
||||
"password",
|
||||
"captcha",
|
||||
"code",
|
||||
"confirmPassword",
|
||||
];
|
||||
await form
|
||||
.validateFields(validateFields)
|
||||
.then(async (values) => {
|
||||
await onSubmit(values as API.PhoneRegisterRequest);
|
||||
})
|
||||
.catch((errorInfo) => {
|
||||
console.error(errorInfo);
|
||||
});
|
||||
}}>
|
||||
注册
|
||||
</Button>
|
||||
</Form>
|
||||
<a href="/login" className={styles.go_to_register}>
|
||||
<span>登录</span>
|
||||
</a>
|
||||
</Space>
|
||||
</Space>
|
||||
</div>
|
||||
<FooterComponent />
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user