Skip to content

Commit f2ed96e

Browse files
KotoriMinamiKotoriMinami
committed
feat register page
1 parent 3a07dee commit f2ed96e

File tree

6 files changed

+318
-2
lines changed

6 files changed

+318
-2
lines changed

‎.eslintrc.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ module.exports = {
205205
'no-underscore-dangle': 0, // 允许任意使用下划线
206206
'one-var': [1, 'never'], // 定义变量一行一个
207207
'padded-blocks': [0, 'never'], // 块代码上下不能留空行
208-
semi: 2, // 校验分号
208+
semi: 0, // 校验分号
209209
'semi-spacing': 2, // 分号后面留空
210210
'keyword-spacing': 2, // 关键词后面加空格
211211
'space-before-blocks': 2, // 块级代码加空格

‎.umirc.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default {
2323
history: 'hash',
2424
cssLoaderOptions: {},
2525
alias: {
26-
component: path.resolve(__dirname, './src/component'),
26+
component: path.resolve(__dirname, './src/component')
2727
},
2828
chainWebpack(config, { webpack }) {
2929
// config.plugin('analyzer').use(

‎src/component/user/Sign/index.less‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
.sign-main {
2+
flex: 1;
3+
display: flex;
4+
flex-direction: column;
5+
align-items: center;
6+
justify-content: center;
7+
height: calc(100% - 42px);
8+
box-sizing: border-box;
9+
10+
:global {
11+
.sign-container{
12+
background-color: #ffffff;
13+
width: 444px;
14+
margin: 0px auto;
15+
16+
.sign-header {
17+
margin: 30px 0px 30px 0px;
18+
p{
19+
margin: 20px auto 0px auto;
20+
font-size: 20px;
21+
font-family: "Adobe Heiti Std R";
22+
font-weight: normal;
23+
color: rgba(24, 38, 42, 1);
24+
line-height: 26px;
25+
}
26+
}
27+
28+
.sign-foot {
29+
background:rgba(246,246,246,1);
30+
padding: 38px 0px 40px 0px;
31+
color: #18262A;
32+
a {
33+
color: #40AEA8
34+
}
35+
}
36+
37+
form {
38+
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
39+
color: #FF40AEA8;
40+
font-weight: bold;
41+
}
42+
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
43+
color: #FF40AEA8;
44+
opacity: 1;
45+
font-weight: bold;
46+
}
47+
::-moz-placeholder { /* Mozilla Firefox 19+ */
48+
color: #FF40AEA8;
49+
opacity: 1;
50+
font-weight: bold;
51+
}
52+
:-ms-input-placeholder { /* Internet Explorer 10-11 */
53+
color: #FF40AEA8;
54+
font-weight: bold;
55+
}
56+
}
57+
}
58+
}
59+
}

‎src/component/user/Sign/index.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react';
2+
import style from './index.less'
3+
import Logo from 'assets/images/login/logo.png'
4+
5+
export default class Index extends React.Component<Props, State> {
6+
render() {
7+
const { header, children, footer } = this.props;
8+
return (
9+
<div className={style['sign-main']}>
10+
<div className={'sign-container'}>
11+
<div className={'sign-header'}>
12+
<img src={Logo} />
13+
<p>{header}</p>
14+
</div>
15+
{children}
16+
<div className={'sign-foot'}>
17+
{footer}
18+
</div>
19+
</div>
20+
</div>
21+
)
22+
}
23+
}

‎src/pages/user/register/form.tsx‎

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
import React from 'react'
2+
import {Input, InputAdornment, IconButton, Button, FormControl, Select, MenuItem, InputLabel} from '@material-ui/core'
3+
import { withStyles } from '@material-ui/core/styles'
4+
import {Visibility, VisibilityOff} from '@material-ui/icons'
5+
6+
export interface Props {
7+
8+
}
9+
10+
interface State {
11+
showPassword: boolean;
12+
showEnterPassword: boolean;
13+
params: object;
14+
sendCode: boolean;
15+
}
16+
17+
const StyledSelect = withStyles({
18+
icon: {
19+
display: 'none'
20+
}
21+
})(Select);
22+
23+
const styles = theme => ({
24+
form: {
25+
padding: '0px 50px 50px 50px'
26+
},
27+
formControl: {
28+
minWidth: 120,
29+
width: '100%',
30+
},
31+
formSelectControl: {
32+
width: 'calc(50% - 6px)'
33+
},
34+
formLeftSelectControl: {
35+
marginRight: 6
36+
},
37+
formRightSelectControl: {
38+
marginLeft: 6
39+
},
40+
input: {
41+
height: 60,
42+
marginTop: '0px !important',
43+
icon: {
44+
fontSize: 40
45+
}
46+
},
47+
button: {
48+
minWidth: 115,
49+
textAlign: 'right',
50+
color: '#FF40AEA8'
51+
},
52+
submitButton: {
53+
marginTop: 50,
54+
borderRadius: 0,
55+
color: '#FFFFFF',
56+
width: '100%',
57+
backgroundColor: '#40AEA8',
58+
fontSize: 20
59+
}
60+
})
61+
class RegisterForm extends React.Component<Props, State> {
62+
63+
constructor(props: Props) {
64+
super(props)
65+
this.state = {
66+
showPassword: false,
67+
showEnterPassword: false,
68+
sendCode: false,
69+
params: {
70+
exp: '',
71+
role: ''
72+
}
73+
}
74+
}
75+
76+
handleSubmit = (e) => {
77+
e.preventDefault();
78+
console.log(this.state.params)
79+
}
80+
81+
sendCode = () => {
82+
this.setState({
83+
sendCode: true
84+
})
85+
}
86+
87+
handleClickShowPassword(name: string) {
88+
this.setState({
89+
[name]: !this.state[name]
90+
})
91+
}
92+
93+
inputChange = (e) => {
94+
const {name, value} = e.target
95+
this.setState({
96+
params: Object.assign({}, this.state.params, {[name]: value})
97+
})
98+
}
99+
100+
render() {
101+
const { classes } = this.props;
102+
const { showPassword, showEnterPassword, sendCode, params } = this.state
103+
const { role, exp } = params
104+
return (
105+
<div className="register">
106+
<form onSubmit={this.handleSubmit} className={classes.form}>
107+
<FormControl className={classes.formControl}>
108+
<Input
109+
name={'phone'}
110+
className={classes.input}
111+
placeholder="请输入邮箱或手机号"
112+
onChange={this.inputChange}
113+
/>
114+
</FormControl>
115+
<FormControl className={classes.formControl}>
116+
<Input
117+
className={classes.input}
118+
name={'code'}
119+
placeholder="输入6位验证码"
120+
onChange={this.inputChange}
121+
endAdornment={
122+
<Button
123+
onClick={this.sendCode}
124+
className={classes.button}
125+
>{`${sendCode ? '重新': ''}获取验证码`}</Button>
126+
}
127+
/>
128+
</FormControl>
129+
<FormControl className={classes.formControl}>
130+
<Input
131+
className={classes.input}
132+
name={'password'}
133+
placeholder="密码"
134+
type={showPassword ? 'text' : 'password'}
135+
onChange={this.inputChange}
136+
endAdornment={
137+
<InputAdornment position="end">
138+
<IconButton
139+
onClick={this.handleClickShowPassword.bind(this, 'showPassword')}
140+
>
141+
{showPassword ? <Visibility /> : <VisibilityOff />}
142+
</IconButton>
143+
</InputAdornment>
144+
}
145+
/>
146+
</FormControl>
147+
<FormControl className={classes.formControl}>
148+
<Input
149+
className={classes.input}
150+
name={'enterpassword'}
151+
placeholder="确认密码"
152+
type={showEnterPassword ? 'text' : 'password'}
153+
onChange={this.inputChange}
154+
endAdornment={
155+
<InputAdornment position="end">
156+
<IconButton
157+
onClick={this.handleClickShowPassword.bind(this, 'showEnterPassword')}
158+
>
159+
{showEnterPassword ? <Visibility /> : <VisibilityOff />}
160+
</IconButton>
161+
</InputAdornment>
162+
}
163+
/>
164+
</FormControl>
165+
<FormControl className={classes.formControl}>
166+
<Input
167+
className={classes.input}
168+
name={'name'}
169+
placeholder="昵称"
170+
onChange={this.inputChange}
171+
/>
172+
</FormControl>
173+
<FormControl className={`${classes.formSelectControl} ${classes.formLeftSelectControl}`}>
174+
{role ? null: <InputLabel shrink={false}>选择角色</InputLabel>}
175+
<StyledSelect
176+
name={'role'}
177+
value={role}
178+
onChange={this.inputChange}
179+
displayEmpty
180+
className={classes.input}
181+
>
182+
<MenuItem value={10}>产品经理</MenuItem>
183+
<MenuItem value={20}>设计师</MenuItem>
184+
<MenuItem value={30}>前端工程师</MenuItem>
185+
<MenuItem value={40}>移动端端工程师</MenuItem>
186+
<MenuItem value={50}>小程序</MenuItem>
187+
</StyledSelect>
188+
</FormControl>
189+
<FormControl className={`${classes.formSelectControl} ${classes.formRighttSelectControl}`}>
190+
{exp ? null: <InputLabel shrink={false}>工作经验</InputLabel>}
191+
<StyledSelect
192+
name={'exp'}
193+
value={exp}
194+
onChange={this.inputChange}
195+
displayEmpty
196+
className={classes.input}
197+
>
198+
<MenuItem value={10}>0-3年</MenuItem>
199+
<MenuItem value={20}>3-5年</MenuItem>
200+
<MenuItem value={30}>5-9年</MenuItem>
201+
<MenuItem value={40}>10年以上</MenuItem>
202+
</StyledSelect>
203+
</FormControl>
204+
<Button type="submit" variant="contained" className={classes.submitButton}>
205+
注册
206+
</Button>
207+
</form>
208+
</div>
209+
)
210+
}
211+
}
212+
213+
214+
export default withStyles(styles)(RegisterForm)

‎src/pages/user/register/index.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import Sign from 'component/user/Sign'
3+
import RegisterForm from './form'
4+
5+
export default class Index extends React.Component<Props, State> {
6+
render() {
7+
const { classes } = this.props;
8+
const header = '欢迎加入CodeRiver'
9+
const footer = (
10+
<span>已有账号？<a href="#">登录</a></span>
11+
)
12+
return (
13+
<Sign
14+
header={header}
15+
footer={footer}>
16+
<RegisterForm />
17+
</Sign>
18+
)
19+
}
20+
}

0 commit comments

Comments
 (0)