Skip to content

J
jinfa-platform
Commit 914242cb authored by 前端-钟卫鹏's avatar 前端-钟卫鹏
Browse files
Options

fix:登录注册相关页面

parent 596dcd9c
Show whitespace changes
Inline Side-by-side
Showing with 290 additions and 44 deletions
config/router.ts
View file @ 914242cb
...@@ -15,6 +15,10 @@ const router = [ ...@@ -15,6 +15,10 @@ const router = [
path: '/user/register', path: '/user/register',
component: '@/pages/user/register' component: '@/pages/user/register'
}, },
{
path: '/user/getBack',
component: '@/pages/user/getBack'
},
] ]
} }
] ]
......
config/theme.config.ts
View file @ 914242cb
export default { export default {
'@primary-color': '#00B37A', '@primary-color': '#00B37A',
// 公共padding变量
'@padding-lg': '24px',
'@padding-sm': '12px',
'@padding-xs': '8px',
'@padding-xss': '4px',
// 公共margin变量
'@margin-lg': '24px',
'@margin-md': '16px',
'@margin-sm': '12px',
'@margin-xs': '8px',
'@margin-xss': '4px',
} }
package.json
View file @ 914242cb
...@@ -29,12 +29,14 @@ ...@@ -29,12 +29,14 @@
"mobx": "^5.15.4", "mobx": "^5.15.4",
"mobx-react": "^6.2.2", "mobx-react": "^6.2.2",
"prettier": "^1.19.1", "prettier": "^1.19.1",
"qrcode": "^1.4.4",
"react": "^16.12.0", "react": "^16.12.0",
"react-dom": "^16.12.0", "react-dom": "^16.12.0",
"umi": "^3.2.0", "umi": "^3.2.0",
"yorkie": "^2.0.0" "yorkie": "^2.0.0"
}, },
"devDependencies": { "devDependencies": {
"@types/qrcode": "^1.3.4",
"chalk": "^4.1.0", "chalk": "^4.1.0",
"fs-extra": "^9.0.1", "fs-extra": "^9.0.1",
"gulp": "^4.0.2", "gulp": "^4.0.2",
......
src/global/styles/global.less
View file @ 914242cb
...@@ -26,3 +26,10 @@ h1, h2, h3, h4, h5, h6 { ...@@ -26,3 +26,10 @@ h1, h2, h3, h4, h5, h6 {
.center-margin; .center-margin;
width: 1024px; width: 1024px;
} }
// 通用 居中
.@{prefix}-center {
.make-center(block);
.make-center(text);
}
\ No newline at end of file
src/global/styles/mixins/layout.less
View file @ 914242cb
...@@ -47,3 +47,22 @@ ...@@ -47,3 +47,22 @@
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
// margin带上下边距居中
.make-center-space(@type: margin, @top: 0, @bottom: 0) {
.make-center(@type);
margin-top: @top;
margin-bottom: @bottom;
}
// position定位
.position-left-top(@left, @top) {
position: absolute;
left: @left;
top: @top;
}
.position-right-bottom(@right, @bottom) {
position: absolute;
right: @right;
bottom: @bottom;
}
\ No newline at end of file
src/layouts/UserLayouts.tsx
View file @ 914242cb
...@@ -4,6 +4,8 @@ import UserHeader from './components/UserHeader'; ...@@ -4,6 +4,8 @@ import UserHeader from './components/UserHeader';
import BaseFooter from './components/BaseFooter'; import BaseFooter from './components/BaseFooter';
import { Row } from 'antd'; import { Row } from 'antd';
import Logo from '../../mockStatic/logo.png'
/** /**
* 登录、注册等用户界面布局 * 登录、注册等用户界面布局
* @author xjm * @author xjm
...@@ -11,7 +13,7 @@ import { Row } from 'antd'; ...@@ -11,7 +13,7 @@ import { Row } from 'antd';
const UserLayouts:React.FC = (props) => { const UserLayouts:React.FC = (props) => {
return ( return (
<div className={styles.lingxiBusinessUserLayout}> <div className={styles.lingxiBusinessUserLayout}>
<UserHeader/> <UserHeader logo={Logo}/>
<div className={styles.lingxiBusinessUserBg}> <div className={styles.lingxiBusinessUserBg}>
{ props.children } { props.children }
<BaseFooter/> <BaseFooter/>
......
src/pages/user/components/LoginWrap.tsx
View file @ 914242cb
...@@ -8,17 +8,13 @@ import { ...@@ -8,17 +8,13 @@ import {
import styles from '../index.less' import styles from '../index.less'
const LoginWrap: React.FC = () => { const LoginWrap: React.FC = () => {
<<<<<<< HEAD
const [validFrame, setValidFrame] = useState(false) const [validFrame, setValidFrame] = useState(false)
const [validButton, setValidButton] = useState(false) const [validButton, setValidButton] = useState(false)
const finish = (value) => { const finish = (value:any) => {
=======
const isValied = true
const finish = (value: any) => {
>>>>>>> 3fcaf2ac8432e3e511d10c3073e59eb1aa99a368
console.log(value) console.log(value)
} }
return ( return (
<> <>
<p>{validFrame ? '当前手机号码：xxxxxxxxx' : '请使用平台账号登录'}</p> <p>{validFrame ? '当前手机号码：xxxxxxxxx' : '请使用平台账号登录'}</p>
...@@ -75,13 +71,11 @@ const LoginWrap: React.FC = () => { ...@@ -75,13 +71,11 @@ const LoginWrap: React.FC = () => {
<Button ghost type='primary' block size='large'>点击进行验证</Button> <Button ghost type='primary' block size='large'>点击进行验证</Button>
</Form.Item>) </Form.Item>)
} }
<Form.Item> <Form.Item>
<Button type='primary' size='large' htmlType='submit' block>点击登录</Button> <Button type='primary' size='large' htmlType='submit' block>点击登录</Button>
</Form.Item> </Form.Item>
</Form> </Form>
} }
</> </>
) )
......
src/pages/user/components/ScanLoginWrap.tsx
View file @ 914242cb
...@@ -5,14 +5,26 @@ import { ...@@ -5,14 +5,26 @@ import {
LockOutlined, LockOutlined,
ExclamationCircleFilled ExclamationCircleFilled
} from '@ant-design/icons'; } from '@ant-design/icons';
import QRCode from 'qrcode';
import styles from '../index.less' import styles from '../index.less'
const ScanLoginWrap: React.FC = () => { const ScanLoginWrap: React.FC = () => {
const [qrCode, setQrCode] = useState('')
QRCode.toDataURL('数商云是知名云计算及数据服务提供商点播互动直播技术深度投入致力以数字化未来赋能各行业全面进入数据时代。').then((url:any) => {
setQrCode(url)
console.log(url)
})
.catch((err:any) => {
console.error(err)
})
return ( return (
<div className={styles.scanLoginWrap}> <div className={styles.scanLoginWrap}>
<h2>扫码登录</h2> <h2>扫码登录</h2>
<div className={styles.qrCodeImage}>
<img src={qrCode} alt=""/>
</div>
</div> </div>
) )
} }
......
src/pages/user/getBack.tsx 0 → 100644
View file @ 914242cb
import React, { useState } from 'react';
import styles from './index.less'
import globalStyles from '@/global/styles/global.less';
import cx from 'classnames';
import { Row, Col, Form, Input, Button } from 'antd';
import TextLink from '@/components/TextLink';
import {
ExclamationCircleFilled,
} from '@ant-design/icons';
import { Link, history } from 'umi'
const GetBack: React.FC = () => {
const [validButton, setValidButton] = useState(true)
const finish = (value: any) => {
console.log(value)
}
return (
<Row className={styles.getBackBox}>
<h2>找回密码</h2>
<div className={cx(styles.getBackForm, globalStyles.lingxiBusinessMarginContent)}>
<Form
onFinish={finish}
className={styles.formBox}
>
<Form.Item
name='phonemail'
rules={
[
{
required: true,
message: <><ExclamationCircleFilled style={{marginRight: 6}}/><span>请输入正确的手机或邮箱</span></>
}
]
}
>
<Input placeholder='请输入您的邮箱/手机' size='large'/>
</Form.Item>
{ validButton && (<Form.Item
className={styles.loginVerBtn}
>
<Button ghost type='primary' block size='large'>点击进行验证</Button>
</Form.Item>)
}
<Form.Item>
<Row>
<Col span={15}>
<Form.Item
name="captcha"
noStyle
rules={[{ required: true, message: <><ExclamationCircleFilled style={{marginRight: 6}}/><span>请输入验证码</span></> }]}
>
<Input size='large' placeholder='输入验证码' />
</Form.Item>
</Col>
<Col offset={1} span={8}>
<Button type='default' size='large'>获取验证码</Button>
</Col>
</Row>
</Form.Item>
<Form.Item
name='password'
rules={
[
{
required: true,
message: <><ExclamationCircleFilled style={{marginRight: 6}}/><span>请设置你的新密码</span></>
}
]
}
>
<Input.Password placeholder='请设置你的新密码' size='large'/>
</Form.Item>
<Form.Item
name="confirm"
dependencies={['password']}
rules={[
{
required: true,
message: <><ExclamationCircleFilled style={{marginRight: 6}}/><span>请再次输入密码</span></>,
},
({ getFieldValue }) => ({
validator(rule, value) {
if (!value || getFieldValue('password') === value) {
return Promise.resolve();
}
return Promise.reject(<><ExclamationCircleFilled style={{marginRight: 6}}/><span>两次输入的密码不匹配</span></>);
},
}),
]}
>
<Input.Password placeholder='请再次输入密码' size='large'/>
</Form.Item>
<Form.Item>
<Button type='primary' size='large' htmlType='submit' block>提交</Button>
</Form.Item>
<Form.Item>
<Link to='/user/login' className={styles.back}>返回登录页</Link>
</Form.Item>
</Form>
</div>
</Row>
)
}
export default GetBack
src/pages/user/index.less
View file @ 914242cb
...@@ -20,7 +20,15 @@ ...@@ -20,7 +20,15 @@
font-size: 32px; font-size: 32px;
margin-bottom: 32px; margin-bottom: 32px;
} }
& .qrcodeLogin{ .clickUsernameLogin{
position: absolute;
right: 8px;
top: 8px;
font-size:14px;
color:rgba(107,119,140,1);
}
.clickScanLogin{
.center-text();
position: absolute; position: absolute;
right: 8px; right: 8px;
top: 8px; top: 8px;
...@@ -32,25 +40,34 @@ ...@@ -32,25 +40,34 @@
background: url("../../../mockStatic/qr_code2.png") center center no-repeat; background: url("../../../mockStatic/qr_code2.png") center center no-repeat;
} }
} }
& .scanTips{ .scanTips{
display: flex; .make-center(flex);
font-size:12px;
color:rgba(107,119,140,1);
.scanIcon{
font-size: 30px;
margin-right: @margin-sm;
}
} }
} }
.loginDesc { .loginDesc {
//background: #9f9; //background: #9f9;
background: url("../../../mockStatic/image_ad.png") center center no-repeat; background: url("../../../mockStatic/image_ad.png") center center no-repeat;
background-size: cover; background-size: cover;
& .adBox{ .adBox{
color: @white; color: @white;
text-align: center; .make-center(text);
& h2{ & h2{
color: @white; color: @white;
margin-top: 20px; margin-top: 20px;
height: 80px; height: 80px;
line-height: 80px; line-height: 80px;
font-size:32px;
letter-spacing:2px;
} }
& p{ & p{
padding: 10px 60px; padding: 10px 60px;
text-indent: 2em;
} }
} }
} }
...@@ -58,16 +75,34 @@ ...@@ -58,16 +75,34 @@
height: 64px; height: 64px;
background: #FAFBFC; background: #FAFBFC;
margin-top: 90px; margin-top: 90px;
& a{
margin-left: 6px;
.make-center(text);
vertical-align: middle;
}
} }
.loginVerBtn { .loginVerBtn {
background: #EBF7F2; background: #EBF7F2;
} }
.scanLoginWrap{ .scanLoginWrap{
text-align: center; .make-center(text);
&>h2{ &>h2{
color: #6B778C; color: #6B778C;
} }
.qrCodeImage{
.make-center(text);
margin-top: 30px;
margin-bottom: 18px;
width: 224px;
height: 224px;
.make-center(margin);
&>img{
.make-center(block);
width: 100%;
height: 100%;
}
}
} }
...@@ -75,10 +110,10 @@ ...@@ -75,10 +110,10 @@
// register // register
.register { .register {
width: 100%; // width: 100%;
&>h3 { &>h3 {
padding: 40px 0; padding: 40px 0;
text-align: center; .make-center(text);
font-size: 32px; font-size: 32px;
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -96,22 +131,23 @@ ...@@ -96,22 +131,23 @@
height: 72px; height: 72px;
background: #FAFBFC; background: #FAFBFC;
padding: 0 115px; padding: 0 115px;
display: flex; .make-center(flexAlign);
align-items: center;
} }
.formBoxStep1 { .formBoxStep1 {
width: 320px; width: 320px;
.form-box { .make-center-space(margin, 40px, 0);
width: 340px; // .form-box {
margin: 40px auto 0; // width: 340px;
// margin: 40px auto 0;
// }
} }
.formBefore { .formBefore {
width: 54px; width: 54px;
line-height: 40px; line-height: 40px;
height: 40px; height: 40px;
text-align: center; .make-center(text);
background: #F4F5F7; background: #F4F5F7;
color: #42526E; color: #42526E;
border: 1px solid #DFE1E6; border: 1px solid #DFE1E6;
...@@ -125,7 +161,7 @@ ...@@ -125,7 +161,7 @@
} }
} }
.continueButton{ .continueButton{
display: block; .make-center(block);
width: 320px; width: 320px;
height: 40px; height: 40px;
margin: 8px auto; margin: 8px auto;
...@@ -133,7 +169,7 @@ ...@@ -133,7 +169,7 @@
.identityRadio{ .identityRadio{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-align: center; .make-center(text);
& label{ & label{
width: 320px; width: 320px;
height: 48px; height: 48px;
...@@ -147,7 +183,7 @@ ...@@ -147,7 +183,7 @@
flex-wrap: wrap; flex-wrap: wrap;
width: 320px; width: 320px;
margin: 0 auto; margin: 0 auto;
text-align: center; .make-center(text);
& label{ & label{
width: 148px; width: 148px;
height: 32px; height: 32px;
...@@ -161,8 +197,8 @@ ...@@ -161,8 +197,8 @@
.formBoxStep3{ .formBoxStep3{
width: 704px; width: 704px;
margin: 0px auto 0; margin: 0px auto;
text-align: center; .make-center(text);
& .description{ & .description{
margin-bottom: 40px; margin-bottom: 40px;
& p{ & p{
...@@ -177,7 +213,6 @@ ...@@ -177,7 +213,6 @@
font-size:14px; font-size:14px;
color:rgba(107,119,140,1); color:rgba(107,119,140,1);
line-height:22px; line-height:22px;
} }
& h2{ & h2{
font-size:24px; font-size:24px;
...@@ -207,7 +242,7 @@ ...@@ -207,7 +242,7 @@
width: 148px; width: 148px;
margin-right: 24px; margin-right: 24px;
margin-bottom: 16px; margin-bottom: 16px;
text-align: center; .make-center(text);
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
&:nth-child(2n) { &:nth-child(2n) {
...@@ -217,7 +252,7 @@ ...@@ -217,7 +252,7 @@
.large { .large {
width: 320px; width: 320px;
margin-bottom: 24px; margin-bottom: 24px;
text-align: center; .make-center(text);
height: 48px; height: 48px;
line-height: 48px; line-height: 48px;
} }
...@@ -228,4 +263,31 @@ ...@@ -228,4 +263,31 @@
margin-right: auto; margin-right: auto;
display: block; display: block;
} }
// get back password
.getBackBox {
&>h2 {
width: 100%;
.make-center(text);
height:120px;
line-height:120px;
font-size:24px;
font-weight:500;
color: #172B4D;
}
.getBackForm{
background-color: @white;
.formBox{
width: 320px;
.make-center-space(margin,40px,40px);
.back{
.make-center(block);
width: 100%;
.make-center(text);
color: #6B778C;
}
}
}
} }
\ No newline at end of file
src/pages/user/index.less.d.ts
View file @ 914242cb
// This file is automatically generated. // This file is automatically generated.
// Please do not change this file! // Please do not change this file!
interface CssExports { interface CssExports {
[x: string]: string | undefined;
'adBox': string; 'adBox': string;
'businessRadio': string; 'businessRadio': string;
'commonPanelTitle': string; 'commonPanelTitle': string;
......
src/pages/user/index.tsx
View file @ 914242cb
...@@ -8,41 +8,57 @@ import { ...@@ -8,41 +8,57 @@ import {
ExclamationCircleFilled, ExclamationCircleFilled,
ScanOutlined ScanOutlined
} from '@ant-design/icons'; } from '@ant-design/icons';
import { Link, history } from 'umi'
import LoginWrap from './components/loginWrap'; import LoginWrap from './components/loginWrap';
import ScanLoginWrap from './components/ScanLoginWrap'; import ScanLoginWrap from './components/ScanLoginWrap';
// import leftPicture from '../../../mockStatic/image_ad.png' // import leftPicture from '../../../mockStatic/image_ad.png'
import wechat from '../../../mockStatic/Wechat.png'
import qq from '../../../mockStatic/QQ.png'
import alipay from '../../../mockStatic/Alipay.png'
const User: React.FC = () => { const User: React.FC = () => {
const [isScanQrCode,setIsScanQrCode] = useState(true) const [isScanQrCode,setIsScanQrCode] = useState(false)
const handleGuideLogin = (param: boolean) => {
setIsScanQrCode(param)
}
const forgetPassword = () => {
history.push('/user/getBack')
console.log('找回密码')
}
return ( return (
<Row className={cx(styles.loginWrap, globalStyles.lingxiBusinessContent1024)}> <Row className={cx(styles.loginWrap, globalStyles.lingxiBusinessContent1024)}>
<Col className={cx(styles.loginItem, styles.loginDesc)}> <Col className={cx(styles.loginItem, styles.loginDesc)}>
<div className={styles.adBox}> <div className={styles.adBox}>
{/*<img src={leftPicture} alt="数商云"/>*/} {/*<img src={leftPicture} alt="数商云"/>*/}
<h2>数商云，驱动全链数字化运营</h2> <h2>欢迎来到数商云</h2>
<p>「数商云」，是一家领先的企业全链数字化运营服务 提供商。致力于通过大数据、云计算等新技术协助企业打造渠道端—营销端—数据端等全链 数字化运营体系，全面提升企业运营效益与智慧数字化商业转型。</p> <p>数商云是知名云计算及数据服务提供商，在海量文件存储、CDN 内容分发、视频点播、互动直播及大规模异构数据的智能分析与处理等技术深度投入，致力以数据科技驱动数字化未来，赋能各行业全面进入数据时代。</p>
</div> </div>
</Col> </Col>
<Col className={cx(styles.loginItem, styles.loginCtl)}> <Col className={cx(styles.loginItem, styles.loginCtl)}>
<div className={styles.loginMain}> <div className={styles.loginMain}>
<a className={styles.qrcodeLogin} /> {/*<a className={styles.guideLogin} />*/}
<h2>欢迎您</h2> {/*{ isScanQrCode ? <></> : <h2>欢迎您</h2>}*/}
{ isScanQrCode ? ( { isScanQrCode ? (
<> <>
<a onClick={()=>handleGuideLogin(false)} className={styles.clickUsernameLogin}>使用账号密码登录</a>
<ScanLoginWrap/> <ScanLoginWrap/>
<div className={styles.scanTips}> <div className={styles.scanTips}>
<ScanOutlined style={{width:28,height:28}} /> <ScanOutlined className={styles.scanIcon} />
<span>打开 App<br />扫一扫登录</span> <span>打开 App<br />扫一扫登录</span>
</div> </div>
</> </>
) : ( ) : (
<> <>
<ScanLoginWrap/> <a onClick={()=>handleGuideLogin(true)} className={styles.clickScanLogin} />
<h2>欢迎您</h2>
<LoginWrap/>
<Row justify='end' style={{marginTop: 16}}> <Row justify='end' style={{marginTop: 16}}>
<Space size={32}> <Space size={32}>
<TextLink>免费注册</TextLink> <TextLink><Link to='/user/register' style={{color:'#6b778c'}}>免费注册</Link></TextLink>
<TextLink>忘记密码</TextLink> <TextLink><a onClick={forgetPassword} style={{color:'#6b778c'}}>忘记密码</a></TextLink>
</Space> </Space>
</Row> </Row>
</> </>
...@@ -50,7 +66,11 @@ const User: React.FC = () => { ...@@ -50,7 +66,11 @@ const User: React.FC = () => {
} }
</div> </div>
<Row className={styles.thirdLogin} align='middle' justify='center'> <Row className={styles.thirdLogin} align='middle' justify='center'>
<Col>其他方式登录</Col> <Col>其他方式登录
<a title="微信登陆"><img src={wechat} alt="微信登录"/></a>
<a title="QQ登录"><img src={qq} alt="QQ登录"/></a>
<a title="支付宝登录"><img src={alipay} alt="支付宝登录"/></a>
</Col>
</Row> </Row>
</Col> </Col>
</Row> </Row>
......
src/pages/user/register.tsx
View file @ 914242cb
...@@ -125,7 +125,7 @@ let timeChange: any; // 定时器 ...@@ -125,7 +125,7 @@ let timeChange: any; // 定时器
const UserRegistry = () => { const UserRegistry = () => {
const [identityForm1] = Form.useForm(); const [identityForm1] = Form.useForm();
const [licenseForm] = Form.useForm(); const [licenseForm] = Form.useForm();
const [current, setCurrent] = useState(1.1) const [current, setCurrent] = useState(0)
const handleOneSubmit = (values: any) => { const handleOneSubmit = (values: any) => {
console.log(values, 'values') console.log(values, 'values')
...@@ -205,7 +205,7 @@ const UserRegistry = () => { ...@@ -205,7 +205,7 @@ const UserRegistry = () => {
return ( return (
<div className={cx(styles.register, globalStyles.lingxiBusinessContent1024)}> <div className={cx(styles.register, globalStyles.lingxiBusinessContent1024)}>
<h3>欢迎您注册数商云账号</h3> <h3>欢迎您注册数商云账号</h3>
<div className={styles.registerBox}> <div className={cx(styles.registerBox, globalStyles.lingxiBusinessMarginContent)}>
<Steps current={current} className={styles.stepWrap} size='small'> <Steps current={current} className={styles.stepWrap} size='small'>
{ {
stepList.map((v,i) => <Step title={v.title} key={v.key} onClick={() => {setCurrent(i)}}/>) stepList.map((v,i) => <Step title={v.title} key={v.key} onClick={() => {setCurrent(i)}}/>)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment