feat: 注册登录界面框架搭建完成
This commit is contained in:
landaiqing
2
src/assets/icons/corner_markers.svg
Normal file
2
src/assets/icons/corner_markers.svg
Normal file
@@ -0,0 +1,2 @@
|
||||
|
||||
<svg width="70" height="70" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient x1="17.621%" y1="50%" x2="100%" y2="50%" id="a"><stop stop-color="#FFE2B8" offset="0%"/><stop stop-color="#FFCA7C" offset="100%"/></linearGradient><filter x="-10.7%" y="-10.7%" width="121.4%" height="121.4%" filterUnits="objectBoundingBox" id="c"><feGaussianBlur stdDeviation="6" in="SourceAlpha" result="shadowBlurInner1"/><feOffset dx="3" in="shadowBlurInner1" result="shadowOffsetInner1"/><feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" in="shadowInnerInner1"/></filter><path id="b" d="m1291 377 70 70v-70z"/></defs><g transform="translate(-1291 -377)" fill="none" fill-rule="evenodd"><use fill="url(#a)" xlink:href="#b"/><use fill="#000" filter="url(#c)" xlink:href="#b"/></g></svg>
|
||||
|
After Width: | Height: | Size: 955 B |
@@ -1,5 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
|
||||
class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228">
|
||||
<path fill="#00D8FF"
|
||||
d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.0 KiB |
BIN
src/assets/images/login_qrcode-landaiqing.jpg
Normal file
BIN
src/assets/images/login_qrcode-landaiqing.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
@@ -1,7 +1,8 @@
|
||||
import type { RouteObject } from 'react-router-dom'
|
||||
|
||||
import NoFound from '@/views/404/404'
|
||||
import Login from '@/views/Login'
|
||||
import Login from '@/views/User/Login'
|
||||
import Register from '@/views/User/Register'
|
||||
const routes: RouteObject[] = [
|
||||
{
|
||||
path: '/',
|
||||
@@ -11,6 +12,10 @@ const routes: RouteObject[] = [
|
||||
path: '*',
|
||||
Component: NoFound,
|
||||
},
|
||||
{
|
||||
path: '/register',
|
||||
Component: Register,
|
||||
},
|
||||
]
|
||||
|
||||
export default routes
|
||||
|
||||
253
src/types/user/user.d.ts
vendored
253
src/types/user/user.d.ts
vendored
@@ -1,13 +1,242 @@
|
||||
declare namespace user {
|
||||
interface userInfo {
|
||||
name: string
|
||||
avatar: string
|
||||
userid: string
|
||||
role: string
|
||||
email: string
|
||||
telephone: string
|
||||
status: string
|
||||
token: string
|
||||
}
|
||||
// @ts-ignore
|
||||
/* eslint-disable */
|
||||
|
||||
declare namespace API {
|
||||
type ApiResponse<T> = {
|
||||
success?: boolean;
|
||||
code?: number;
|
||||
codeMessage?: string;
|
||||
errorMessage?: Map<string, string>;
|
||||
showType?: ErrorShowType;
|
||||
data: T
|
||||
}
|
||||
type CurrentUser = {
|
||||
name?: string;
|
||||
avatar?: string;
|
||||
userid?: string;
|
||||
email?: string;
|
||||
signature?: string;
|
||||
title?: string;
|
||||
group?: string;
|
||||
tags?: { key?: string; label?: string }[];
|
||||
notifyCount?: number;
|
||||
unreadCount?: number;
|
||||
country?: string;
|
||||
access?: string;
|
||||
geographic?: {
|
||||
province?: { label?: string; key?: string };
|
||||
city?: { label?: string; key?: string };
|
||||
};
|
||||
address?: string;
|
||||
phone?: string;
|
||||
};
|
||||
|
||||
type LoginResult = ResponseStructure & {
|
||||
data?: {
|
||||
token?: string;
|
||||
expireDateTime?: number;
|
||||
expire?: number;
|
||||
timeUnit?: any;
|
||||
}
|
||||
};
|
||||
|
||||
type PageParams = {
|
||||
pageNum?: number;
|
||||
pageSize?: number;
|
||||
};
|
||||
|
||||
type RuleListItem = {
|
||||
key?: number;
|
||||
disabled?: boolean;
|
||||
href?: string;
|
||||
avatar?: string;
|
||||
name?: string;
|
||||
owner?: string;
|
||||
desc?: string;
|
||||
callNo?: number;
|
||||
status?: number;
|
||||
updatedAt?: string;
|
||||
createdAt?: string;
|
||||
progress?: number;
|
||||
};
|
||||
|
||||
type RuleList = {
|
||||
data?: RuleListItem[];
|
||||
/** 列表的内容总数 */
|
||||
total?: number;
|
||||
success?: boolean;
|
||||
};
|
||||
interface ResponseStructure {
|
||||
success?: boolean;
|
||||
code?: number;
|
||||
codeMessage?: string;
|
||||
errorMessage?: Map<string, string>;
|
||||
showType?: ErrorShowType;
|
||||
}
|
||||
type
|
||||
FakeCaptcha = ResponseStructure & {
|
||||
data?: boolean;
|
||||
};
|
||||
|
||||
type PhonePasswordLoginParams = {
|
||||
clientId?: string;
|
||||
phone?: string;
|
||||
password?: string;
|
||||
code?: string;
|
||||
autoLogin?: boolean;
|
||||
};
|
||||
|
||||
type PhoneSmsCodeLoginParams = {
|
||||
clientId?: string;
|
||||
phone?: string;
|
||||
smsCode?: string;
|
||||
autoLogin?: boolean;
|
||||
};
|
||||
|
||||
type ErrorResponse = {
|
||||
/** 业务约定的错误码 */
|
||||
errorCode: string;
|
||||
/** 业务上的错误信息 */
|
||||
errorMessage?: Map<string, string>;
|
||||
/** 业务上的请求是否成功 */
|
||||
success?: boolean;
|
||||
};
|
||||
|
||||
type NoticeIconList = {
|
||||
data?: NoticeIconItem[];
|
||||
/** 列表的内容总数 */
|
||||
total?: number;
|
||||
success?: boolean;
|
||||
};
|
||||
|
||||
type NoticeIconItemType = 'notification' | 'message' | 'event';
|
||||
|
||||
type NoticeIconItem = {
|
||||
id?: string;
|
||||
extra?: string;
|
||||
key?: string;
|
||||
read?: boolean;
|
||||
avatar?: string;
|
||||
title?: string;
|
||||
status?: string;
|
||||
datetime?: string;
|
||||
description?: string;
|
||||
type?: NoticeIconItemType;
|
||||
};
|
||||
|
||||
type GenerateMpRegCode = {
|
||||
data?: {
|
||||
regCode?: string;
|
||||
qrCodeUrl?: string;
|
||||
expireSeconds?: number;
|
||||
ticket?: string;
|
||||
url?: string;
|
||||
};
|
||||
}
|
||||
|
||||
type GetClientId = {
|
||||
data?: string;
|
||||
}
|
||||
|
||||
type GenerateBase64Code = {
|
||||
data?: string;
|
||||
}
|
||||
|
||||
type GetClientToken = {
|
||||
data?: {
|
||||
token?: string;
|
||||
expireDateTime?: number;
|
||||
expire?: number;
|
||||
};
|
||||
}
|
||||
|
||||
type PhoneRegisterRequest = {
|
||||
clientId?: string;
|
||||
phone?: string;
|
||||
password?: string;
|
||||
confirmPassword?: string;
|
||||
smsCode?: number;
|
||||
}
|
||||
|
||||
type PhoneRegisterResponse = ResponseStructure & {
|
||||
data?: number;
|
||||
}
|
||||
|
||||
type CustomValidate = {
|
||||
validateStatus?: boolean;
|
||||
msg?: string;
|
||||
formValue?: any;
|
||||
code?: number;
|
||||
codeMessage?: string;
|
||||
errors?: Map<string, string>;
|
||||
validateFields: ValidateFields<Values>;
|
||||
}
|
||||
|
||||
type ListAccountBookVo = ResponseStructure & {
|
||||
data?: {
|
||||
total?: number;
|
||||
list?: ListAccountBookVoItem[]
|
||||
}
|
||||
}
|
||||
type ListAccountBookVoItem = {
|
||||
id: number;
|
||||
companyName?: string;
|
||||
valueAddedTaxCate?: string;
|
||||
accountingStandard?: string;
|
||||
startTime?: Date;
|
||||
createTime?: Date;
|
||||
enableVoucherVerify?: boolean;
|
||||
disable?: boolean;
|
||||
}
|
||||
type GetAccountBookVo = {
|
||||
id?: number;
|
||||
companyName?: string;
|
||||
unifiedSocialCreditCode?: string;
|
||||
industryId?: number;
|
||||
valueAddedTaxCate?: number;
|
||||
enableVoucherVerify?: boolean;
|
||||
startTime?: Date;
|
||||
accountingStandard?: number;
|
||||
enableFixedAssets?: boolean;
|
||||
enableCapital?: boolean;
|
||||
enablePsi?: boolean;
|
||||
}
|
||||
type DataDictionaryVo = {
|
||||
dataCode?: string;
|
||||
dataValue?: string;
|
||||
}
|
||||
|
||||
type ListTreeMenuVo = {
|
||||
id?: number;
|
||||
key?: string;
|
||||
title?: any;
|
||||
icon?: string;
|
||||
checked?: boolean;
|
||||
children?: ListTreeMenuVo[];
|
||||
level?: number;
|
||||
};
|
||||
|
||||
type ListTreeSelectMenuVo = {
|
||||
id?: number;
|
||||
value?: string;
|
||||
title?: any;
|
||||
children?: ListTreeMenuVo[];
|
||||
}
|
||||
|
||||
type ListRoleVo = {
|
||||
id: number;
|
||||
roleName?: string;
|
||||
disable?: boolean;
|
||||
}
|
||||
|
||||
type ListSubject = {
|
||||
id: number;
|
||||
pid?: number;
|
||||
valueAddedTaxCate?: string;
|
||||
accountingStandard?: string;
|
||||
startTime?: Date;
|
||||
createTime?: Date;
|
||||
enableVoucherVerify?: boolean;
|
||||
disable?: boolean;
|
||||
}
|
||||
}
|
||||
export { user }
|
||||
|
||||
@@ -1,85 +1,85 @@
|
||||
/** 配置 */
|
||||
interface Options {
|
||||
/** key前缀 */
|
||||
prefix?: string;
|
||||
/** key前缀 */
|
||||
prefix?: string
|
||||
}
|
||||
/** 默认配置 */
|
||||
const defaultOptions: Options = {
|
||||
prefix: ""
|
||||
};
|
||||
|
||||
class CookieStorage {
|
||||
private prefix: string;
|
||||
|
||||
constructor(options: Options = defaultOptions) {
|
||||
const { prefix } = options;
|
||||
this.prefix = prefix ?? "";
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 设置cookie
|
||||
* @param {string} key 键
|
||||
* @param {any} value 值
|
||||
* @param {number} expires 过期时间s毫秒，不传默认2年有效
|
||||
* @Date: 2023-05-17 18:10:34
|
||||
* @Author: mulingyuer
|
||||
*/
|
||||
public setItem(key: string, value: string | number, expires?: number): void {
|
||||
const timestamp = Date.now();
|
||||
if (typeof expires === "number") {
|
||||
expires = timestamp + expires;
|
||||
} else {
|
||||
expires = timestamp + 2 * 365 * 24 * 60 * 60 * 1000;
|
||||
}
|
||||
document.cookie = `${this.prefix}${key}=${value};expires=${new Date(expires).toUTCString()}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 获取cookie
|
||||
* @param {string} key 键
|
||||
* @Date: 2023-05-17 18:31:50
|
||||
* @Author: mulingyuer
|
||||
*/
|
||||
public getItem(key: string): string | undefined {
|
||||
const cookies = document.cookie.split("; ");
|
||||
let val: string | undefined = undefined;
|
||||
cookies.find((item) => {
|
||||
const [k, v] = item.split("=");
|
||||
if (k === `${this.prefix}${key}`) {
|
||||
val = v;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
return val;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 删除指定key的cookie
|
||||
* @param {string} key 键
|
||||
* @Date: 2023-05-17 18:32:56
|
||||
* @Author: mulingyuer
|
||||
*/
|
||||
public removeItem(key: string): void {
|
||||
this.setItem(key, "", -1);
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 清空所有cookie
|
||||
* @Date: 2023-05-17 23:13:04
|
||||
* @Author: mulingyuer
|
||||
*/
|
||||
public clear(): void {
|
||||
const cookies = document.cookie.split("; ");
|
||||
cookies.forEach((item) => {
|
||||
const [k] = item.split("=");
|
||||
this.removeItem(k);
|
||||
});
|
||||
}
|
||||
prefix: '',
|
||||
}
|
||||
|
||||
const cookieStorage = new CookieStorage();
|
||||
class CookieStorage {
|
||||
private prefix: string
|
||||
|
||||
export default cookieStorage;
|
||||
export { CookieStorage };
|
||||
constructor(options: Options = defaultOptions) {
|
||||
const { prefix } = options
|
||||
this.prefix = prefix ?? ''
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 设置cookie
|
||||
* @param {string} key 键
|
||||
* @param {any} value 值
|
||||
* @param {number} expires 过期时间s毫秒，不传默认2年有效
|
||||
* @Date: 2023-05-17 18:10:34
|
||||
* @Author: mulingyuer
|
||||
*/
|
||||
public setItem(key: string, value: string | number, expires?: number): void {
|
||||
const timestamp = Date.now()
|
||||
if (typeof expires === 'number') {
|
||||
expires = timestamp + expires
|
||||
} else {
|
||||
expires = timestamp + 2 * 365 * 24 * 60 * 60 * 1000
|
||||
}
|
||||
document.cookie = `${this.prefix}${key}=${value};expires=${new Date(expires).toUTCString()}`
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 获取cookie
|
||||
* @param {string} key 键
|
||||
* @Date: 2023-05-17 18:31:50
|
||||
* @Author: mulingyuer
|
||||
*/
|
||||
public getItem(key: string): string | undefined {
|
||||
const cookies = document.cookie.split('; ')
|
||||
let val: string | undefined = undefined
|
||||
cookies.find((item) => {
|
||||
const [k, v] = item.split('=')
|
||||
if (k === `${this.prefix}${key}`) {
|
||||
val = v
|
||||
return true
|
||||
}
|
||||
return false
|
||||
})
|
||||
|
||||
return val
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 删除指定key的cookie
|
||||
* @param {string} key 键
|
||||
* @Date: 2023-05-17 18:32:56
|
||||
* @Author: mulingyuer
|
||||
*/
|
||||
public removeItem(key: string): void {
|
||||
this.setItem(key, '', -1)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 清空所有cookie
|
||||
* @Date: 2023-05-17 23:13:04
|
||||
* @Author: mulingyuer
|
||||
*/
|
||||
public clear(): void {
|
||||
const cookies = document.cookie.split('; ')
|
||||
cookies.forEach((item) => {
|
||||
const [k] = item.split('=')
|
||||
this.removeItem(k)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const cookieStorage = new CookieStorage()
|
||||
|
||||
export default cookieStorage
|
||||
export { CookieStorage }
|
||||
|
||||
@@ -1,243 +0,0 @@
|
||||
import {
|
||||
GithubOutlined,
|
||||
GitlabOutlined,
|
||||
LockOutlined,
|
||||
MobileOutlined,
|
||||
QqOutlined,
|
||||
UserOutlined,
|
||||
WechatOutlined,
|
||||
} from '@ant-design/icons'
|
||||
import {
|
||||
LoginFormPage,
|
||||
ProFormCaptcha,
|
||||
ProFormCheckbox,
|
||||
ProFormText,
|
||||
} from '@ant-design/pro-components'
|
||||
import { Divider, Space, Tabs, message, Button } from 'antd'
|
||||
import { CSSProperties } from 'react'
|
||||
import { useState } from 'react'
|
||||
import logo from '@/assets/icons/schisandra.svg'
|
||||
import background from '@/assets/images/background.png'
|
||||
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 store = useStore('user')
|
||||
|
||||
const items = [
|
||||
{ label: '账户密码登录', key: 'account' },
|
||||
{ label: '手机号登录', key: 'phone' },
|
||||
]
|
||||
const [loginType, setLoginType] = useState<LoginType>('account')
|
||||
|
||||
const onSubmit = async (formData: object) => {
|
||||
console.log(formData)
|
||||
}
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'white',
|
||||
height: '100vh',
|
||||
width: '100vw',
|
||||
}}>
|
||||
<LoginFormPage
|
||||
onFinish={onSubmit}
|
||||
backgroundImageUrl={background}
|
||||
logo={logo}
|
||||
title='五味子云相册'
|
||||
subTitle='随时随地分享你的美好瞬间'
|
||||
activityConfig={{
|
||||
style: {
|
||||
boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.2)',
|
||||
color: '#fff',
|
||||
borderRadius: 8,
|
||||
backgroundColor: '#1677FF',
|
||||
},
|
||||
title: '活动标题，可配置图片',
|
||||
subTitle: '活动介绍说明文字',
|
||||
action: (
|
||||
<Button
|
||||
size='large'
|
||||
style={{
|
||||
borderRadius: 20,
|
||||
background: '#fff',
|
||||
color: '#1677FF',
|
||||
width: 120,
|
||||
}}>
|
||||
去看看
|
||||
</Button>
|
||||
),
|
||||
}}
|
||||
actions={
|
||||
<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>
|
||||
}>
|
||||
<Tabs
|
||||
centered
|
||||
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: '请输入密码！',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{loginType === 'phone' && (
|
||||
<>
|
||||
<ProFormText
|
||||
fieldProps={{
|
||||
size: 'large',
|
||||
prefix: <MobileOutlined className={'prefixIcon'} />,
|
||||
}}
|
||||
name='mobile'
|
||||
placeholder={'手机号'}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入手机号！',
|
||||
},
|
||||
{
|
||||
pattern: /^1\d{10}$/,
|
||||
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: 24 }}>
|
||||
<ProFormCheckbox noStyle name='autoLogin'>
|
||||
自动登录
|
||||
</ProFormCheckbox>
|
||||
<a style={{ float: 'right' }}>忘记密码 </a>
|
||||
</div>
|
||||
</LoginFormPage>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
154
src/views/User/Login/index.less
Normal file
154
src/views/User/Login/index.less
Normal file
@@ -0,0 +1,154 @@
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.login_content {
|
||||
// margin-top: 40px;
|
||||
// position: relative;
|
||||
width: 782px;
|
||||
background-color: rgb(255, 255, 255);
|
||||
// height: 100%;
|
||||
overflow: hidden;
|
||||
box-shadow: rgb(0 0 0 / 15%) 0px 2px 15px;
|
||||
//float: right;
|
||||
//height: 538px;
|
||||
position: relative;
|
||||
padding: 30px 0 30px 0;
|
||||
|
||||
}
|
||||
|
||||
.go_to_register {
|
||||
cursor: pointer;
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
background-image: url('@/assets/icons/corner_markers.svg');
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.go_to_register span {
|
||||
font-size: 14px;
|
||||
color: rgb(255, 255, 255);
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
top: 10px;
|
||||
right: 7px;
|
||||
}
|
||||
|
||||
.lang {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 44px;
|
||||
text-align: right;
|
||||
|
||||
:global(.ant-dropdown-trigger) {
|
||||
margin-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
//flex: 1;
|
||||
//padding: 32px 0;
|
||||
|
||||
//box-sizing: border-box;
|
||||
//margin: 60px auto;
|
||||
//display: flex;
|
||||
//align-items: center;
|
||||
//justify-content: center;
|
||||
//flex-direction: column;
|
||||
//height: 100vh;
|
||||
//overflow: auto;
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
background-image: url('@/assets/images/background.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 32px 0 24px;
|
||||
}
|
||||
|
||||
.content img {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-left: 8px;
|
||||
color: rgba(0, 0, 0, 0.2);
|
||||
font-size: 24px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: aquamarine;
|
||||
}
|
||||
}
|
||||
|
||||
.mp_code {
|
||||
padding: 0px 60px;
|
||||
width: 361px;
|
||||
height: 490px;
|
||||
background-color: rgb(255, 255, 255);
|
||||
border-right: 0.5px solid rgb(196, 203, 215);
|
||||
}
|
||||
|
||||
.mp_code_title {
|
||||
margin-top: 50px;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
color: rgb(24, 24, 24)
|
||||
}
|
||||
|
||||
.mp_code_img {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.alert {
|
||||
margin-top: 25px;
|
||||
width: 250px;
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.login_form {
|
||||
// height: 100%;
|
||||
// float: left;
|
||||
margin: 0;
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.mp_tips {
|
||||
font-weight: bold;
|
||||
color: rgb(7, 221, 7);
|
||||
}
|
||||
|
||||
.logo span {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
color: rgba(0, 0, 0, .85);
|
||||
font-weight: 600;
|
||||
font-size: 33px;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 10px;
|
||||
color: rgba(0, 0, 0, .45);
|
||||
font-size: 14px;
|
||||
}
|
||||
377
src/views/User/Login/index.tsx
Normal file
377
src/views/User/Login/index.tsx
Normal file
@@ -0,0 +1,377 @@
|
||||
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>
|
||||
)
|
||||
})
|
||||
154
src/views/User/Register/index.less
Normal file
154
src/views/User/Register/index.less
Normal file
@@ -0,0 +1,154 @@
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.login_content {
|
||||
// margin-top: 40px;
|
||||
// position: relative;
|
||||
width: 782px;
|
||||
background-color: rgb(255, 255, 255);
|
||||
// height: 100%;
|
||||
overflow: hidden;
|
||||
box-shadow: rgb(0 0 0 / 15%) 0px 2px 15px;
|
||||
//float: right;
|
||||
//height: 538px;
|
||||
position: relative;
|
||||
padding: 30px 0 30px 0;
|
||||
|
||||
}
|
||||
|
||||
.go_to_register {
|
||||
cursor: pointer;
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
background-image: url('@/assets/icons/corner_markers.svg');
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.go_to_register span {
|
||||
font-size: 14px;
|
||||
color: rgb(255, 255, 255);
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
top: 10px;
|
||||
right: 7px;
|
||||
}
|
||||
|
||||
.lang {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 44px;
|
||||
text-align: right;
|
||||
|
||||
:global(.ant-dropdown-trigger) {
|
||||
margin-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
//flex: 1;
|
||||
//padding: 32px 0;
|
||||
|
||||
//box-sizing: border-box;
|
||||
//margin: 60px auto;
|
||||
//display: flex;
|
||||
//align-items: center;
|
||||
//justify-content: center;
|
||||
//flex-direction: column;
|
||||
//height: 100vh;
|
||||
//overflow: auto;
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
background-image: url('@/assets/images/background.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 32px 0 24px;
|
||||
}
|
||||
|
||||
.content img {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-left: 8px;
|
||||
color: rgba(0, 0, 0, 0.2);
|
||||
font-size: 24px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: aquamarine;
|
||||
}
|
||||
}
|
||||
|
||||
.mp_code {
|
||||
padding: 0px 60px;
|
||||
width: 361px;
|
||||
height: 490px;
|
||||
background-color: rgb(255, 255, 255);
|
||||
border-right: 0.5px solid rgb(196, 203, 215);
|
||||
}
|
||||
|
||||
.mp_code_title {
|
||||
margin-top: 50px;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
color: rgb(24, 24, 24)
|
||||
}
|
||||
|
||||
.mp_code_img {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.alert {
|
||||
margin-top: 25px;
|
||||
width: 250px;
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.login_form {
|
||||
// height: 100%;
|
||||
// float: left;
|
||||
margin: 0;
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.mp_tips {
|
||||
font-weight: bold;
|
||||
color: rgb(7, 221, 7);
|
||||
}
|
||||
|
||||
.logo span {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
color: rgba(0, 0, 0, .85);
|
||||
font-weight: 600;
|
||||
font-size: 33px;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 10px;
|
||||
color: rgba(0, 0, 0, .45);
|
||||
font-size: 14px;
|
||||
}
|
||||
256
src/views/User/Register/index.tsx
Normal file
256
src/views/User/Register/index.tsx
Normal file
@@ -0,0 +1,256 @@
|
||||
import { BarcodeOutlined, 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 './index.less'
|
||||
import { observer } from 'mobx-react'
|
||||
// import useStore from '@/utils/store/useStore.tsx'
|
||||
type LoginType = 'phone'
|
||||
|
||||
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 = [
|
||||
{
|
||||
key: 'phone',
|
||||
label: (
|
||||
<span>
|
||||
<MobileOutlined />
|
||||
手机号注册
|
||||
</span>
|
||||
),
|
||||
},
|
||||
]
|
||||
const [loginType, setLoginType] = useState<LoginType>('phone')
|
||||
|
||||
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>
|
||||
|
||||
<>
|
||||
<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='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('两次输入的密码不一致!'),
|
||||
)
|
||||
},
|
||||
}),
|
||||
]}
|
||||
/>
|
||||
|
||||
<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')
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
<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='/' className={'go_to_register'}>
|
||||
<span>登录</span>
|
||||
</a>
|
||||
</Space>
|
||||
</Space>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
4
src/vite-env.d.ts
vendored
4
src/vite-env.d.ts
vendored
@@ -15,6 +15,10 @@ declare module '*.svg' {
|
||||
const content: any
|
||||
export default content
|
||||
}
|
||||
declare module '.*' {
|
||||
const value: any
|
||||
export default value
|
||||
}
|
||||
declare module '*.tsx'
|
||||
declare module '*.svg'
|
||||
declare module '*.png'
|
||||
|
||||
Reference in New Issue
Block a user