378 lines
18 KiB
TypeScript
378 lines
18 KiB
TypeScript
import {
|
||
BarcodeOutlined,
|
||
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 } from 'react'
|
||
import { useState } from 'react'
|
||
import logo from '@/assets/icons/schisandra.svg'
|
||
import qrCode from '@/assets/images/login_qrcode-landaiqing.jpg'
|
||
import './index.less'
|
||
import { observer } from 'mobx-react'
|
||
// import useStore from '@/utils/store/useStore.tsx'
|
||
type LoginType = 'account' | 'phone'
|
||
|
||
const iconStyles: CSSProperties = {
|
||
color: 'rgba(0, 0, 0, 0.2)',
|
||
fontSize: '18px',
|
||
verticalAlign: 'middle',
|
||
cursor: 'pointer',
|
||
}
|
||
|
||
export default observer(() => {
|
||
const [generateMpRegCodeData, setGenerateMpRegCodeData] = useState<API.GenerateMpRegCode>({})
|
||
const [form] = Form.useForm()
|
||
const [base64Code, setBase64Code] = useState<API.GenerateBase64Code>({ data: '' })
|
||
const clickGetBase64CodeMethod = async () => {
|
||
await getBase64CodeMethod()
|
||
}
|
||
const CodeImg = (
|
||
<img
|
||
src={'data:image/jpg;base64,' + base64Code.data}
|
||
onClick={clickGetBase64CodeMethod}
|
||
title='点击刷新'
|
||
style={{ cursor: 'pointer', height: 40, width: 90 }}
|
||
/>
|
||
)
|
||
const getBase64CodeMethod = async () => {}
|
||
|
||
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 (
|
||
<div className={'container'}>
|
||
<div className={'content'}>
|
||
<Space>
|
||
<Space className={'login_content'}>
|
||
<Space align='center' className={'mp_code'}>
|
||
<Space direction='vertical' align='center'>
|
||
<span className={'mp_code_title'}>微信扫码登录</span>
|
||
<Image
|
||
preview={false}
|
||
height={210}
|
||
width={200}
|
||
className={'mp_code_img'}
|
||
// src={generateMpRegCodeData.data?.qrCodeUrl}
|
||
src={qrCode}
|
||
/>
|
||
<Alert
|
||
// message={(<span>微信扫码<span>关注公众号</span></span>)}
|
||
description={
|
||
<div>
|
||
<span>
|
||
微信扫码
|
||
<span className={'mp_tips'}>关注公众号</span>
|
||
</span>
|
||
<br />
|
||
登录更快更安全
|
||
</div>
|
||
}
|
||
// type="success"
|
||
showIcon={true}
|
||
className={'alert'}
|
||
icon={<WechatOutlined />}
|
||
/>
|
||
</Space>
|
||
</Space>
|
||
<Form
|
||
form={form}
|
||
className={'login_form'}
|
||
initialValues={{
|
||
autoLogin: true,
|
||
}}>
|
||
<Space direction='vertical' align='center'>
|
||
<Space className={'logo'}>
|
||
<img
|
||
alt='logo'
|
||
src={logo}
|
||
style={{ width: '44px', height: '44px' }}
|
||
/>
|
||
<span>五味子云相册</span>
|
||
</Space>
|
||
<div className={'subTitle'}>随时随地分享你的美好瞬间</div>
|
||
</Space>
|
||
|
||
<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 () => {
|
||
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']
|
||
}
|
||
|
||
await form
|
||
.validateFields(validateFields)
|
||
.then(async (values) => {
|
||
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={'go_to_register'}>
|
||
<span>注册</span>
|
||
</a>
|
||
</Space>
|
||
</Space>
|
||
</div>
|
||
</div>
|
||
)
|
||
})
|