From ae214b7d160c55b846873ab70eccfbff28473be8 Mon Sep 17 00:00:00 2001 From: wangriyu Date: Sat, 21 Oct 2017 16:57:18 +0800 Subject: [PATCH] add register #4 --- UserUI/src/models/login.js | 14 +++++ UserUI/src/routes/login/canvas.js | 45 +++---------- UserUI/src/routes/login/index.js | 44 ++++++++++--- UserUI/src/routes/login/register.js | 98 +++++++++++++++++++++++++++++ 4 files changed, 156 insertions(+), 45 deletions(-) create mode 100644 UserUI/src/routes/login/register.js diff --git a/UserUI/src/models/login.js b/UserUI/src/models/login.js index f65675c..94e328e 100644 --- a/UserUI/src/models/login.js +++ b/UserUI/src/models/login.js @@ -10,6 +10,7 @@ export default { state: { loginLoading: false, + visible: false, }, effects: { @@ -17,5 +18,18 @@ export default { }, reducers: { + showModal (state) { + return { + ...state, + visible: true + } + }, + + hideModal (state) { + return { + ...state, + visible: false + } + } } } diff --git a/UserUI/src/routes/login/canvas.js b/UserUI/src/routes/login/canvas.js index 902458d..147514b 100644 --- a/UserUI/src/routes/login/canvas.js +++ b/UserUI/src/routes/login/canvas.js @@ -12,16 +12,9 @@ class Canvas extends React.Component { componentDidMount () { var w = c.width = window.innerWidth, h = c.height = window.innerHeight, ctx = c.getContext( '2d' ), - minDist = 10, - maxDist = 30, - initialWidth = 10, - maxLines = 100, - initialLines = 4, - speed = 3, + minDist = 10, maxDist = 30, initialWidth = 10, maxLines = 100, initialLines = 4, speed = 3, - lines = [], - frame = 0, - timeSinceLast = 0, + lines = [], frame = 0, timeSinceLast = 0, dirs = [ // straight x, y velocity @@ -35,8 +28,8 @@ class Canvas extends React.Component { [ -.7, .7 ], [ -.7, -.7] ], - starter = { // starting parent line, just a pseudo line + starter = { x: w / 2, y: h / 2, vx: 0, @@ -45,50 +38,38 @@ class Canvas extends React.Component { }; function init() { - lines.length = 0; for( var i = 0; i < initialLines; ++i ) lines.push( new Line( starter ) ); - ctx.fillStyle = '#222'; + ctx.fillStyle = '#eee'; ctx.fillRect( 0, 0, w, h ); - - // if you want a cookie ;) - // ctx.lineCap = 'round'; } function getColor( x ) { - return 'hsl( hue, 80%, 50% )'.replace( 'hue', x / w * 360 + frame ); } function anim() { - window.requestAnimationFrame( anim ); ++frame; ctx.shadowBlur = 0; - ctx.fillStyle = 'rgba(0,0,0,.02)'; + ctx.fillStyle = 'rgba(220,220,220,.02)'; ctx.fillRect( 0, 0, w, h ); ctx.shadowBlur = .5; for( var i = 0; i < lines.length; ++i ) - - if( lines[ i ].step() ) { // if true it's dead - + if( lines[ i ].step() ) { lines.splice( i, 1 ); --i; - } - // spawn new - ++timeSinceLast if( lines.length < maxLines && timeSinceLast > 10 && Math.random() < .5 ) { - timeSinceLast = 0; lines.push( new Line( starter ) ); @@ -102,32 +83,24 @@ class Canvas extends React.Component { } function Line( parent ) { - this.x = parent.x | 0; this.y = parent.y | 0; this.width = parent.width / 1.25; do { - var dir = dirs[ ( Math.random() * dirs.length ) |0 ]; this.vx = dir[ 0 ]; this.vy = dir[ 1 ]; - } while ( ( this.vx === -parent.vx && this.vy === -parent.vy ) || ( this.vx === parent.vx && this.vy === parent.vy) ); - this.vx *= speed; this.vy *= speed; - this.dist = ( Math.random() * ( maxDist - minDist ) + minDist ); - } - Line.prototype.step = function() { + Line.prototype.step = function() { var dead = false; - - var prevX = this.x, - prevY = this.y; + var prevX = this.x, prevY = this.y; this.x += this.vx; this.y += this.vy; @@ -177,7 +150,7 @@ class Canvas extends React.Component { render () { return ( - + ) } } diff --git a/UserUI/src/routes/login/index.js b/UserUI/src/routes/login/index.js index 3d7be8e..da23e6c 100644 --- a/UserUI/src/routes/login/index.js +++ b/UserUI/src/routes/login/index.js @@ -8,17 +8,20 @@ import PropTypes from 'prop-types'; import { connect } from 'dva'; import Styles from './index.less'; import Canvas from './canvas'; +import Register from './register'; import { Button, Form, Input, + Row, + Col, Spin } from 'antd'; const FormItem = Form.Item; const Login = ({ login, dispatch, form: { getFieldDecorator, validateFieldsAndScroll } }) => { - const { loginLoading } = login; + const { loginLoading, visible } = login; function handleOk () { validateFieldsAndScroll((errors, values) => { @@ -31,10 +34,19 @@ const Login = ({ login, dispatch, form: { getFieldDecorator, validateFieldsAndSc }) } + const RegisterProps = { + visible, + onCancel () { + dispatch({ + type: 'login/hideModal' + }) + } + } + return (
- TechTree + TechTree
@@ -74,15 +86,29 @@ const Login = ({ login, dispatch, form: { getFieldDecorator, validateFieldsAndSc ) } - + + + + + + + +
+
) } diff --git a/UserUI/src/routes/login/register.js b/UserUI/src/routes/login/register.js new file mode 100644 index 0000000..2114357 --- /dev/null +++ b/UserUI/src/routes/login/register.js @@ -0,0 +1,98 @@ +/* + * Revision History: + * Initial: 2017/10/21 Wang RiYu + */ + +import React from 'react' +import { + Modal, + Form, + Input, +} from 'antd' + +const FormItem = Form.Item +const formItemLayout = { + labelCol: { span: 6 }, + wrapperCol: { span: 14 } +} + +const register = ( + { + visible, + onCancel, + form: { + getFieldDecorator, + validateFieldsAndScroll, + }, + } +) => { + const register = () => { + validateFieldsAndScroll((errors, values) => { + if (errors) { return } + console.log(values) + onCancel() + }) + } + + const modalProps = { + title: '注册', + visible, + onOk: register, + onCancel, + okText: '注册', + wrapClassName: 'vertical-center-modal', + } + + return ( + +
+ + { + getFieldDecorator('account', { + initialValue: '', + rules: [ + { + required: true, + message: '不超过15位，最少一位', + min: 1, + max: 15, + }, + ], + })() + } + + + { + getFieldDecorator('phone', { + initialValue: '', + rules: [ + { + required: true, + message: '请输入手机号', + len: 11 + }, + ], + })() + } + + + { + getFieldDecorator('pass', { + initialValue: '', + rules: [ + { + required: true, + message: '最短6位，最长15位', + min: 6, + max: 15, + }, + ], + })() + } + +
+ + ) +} + +export default Form.create()(register)