import * as React from 'react' ; import { connect } from "react-redux" ; import "./LoginPopove.scss" ; import actionsStore from '../../../redux/actions/actions' ; import { LoginPopoveState } from 'src/components/Type/Type' ; import { ShowPopoveType } from 'src/components/Type/ReduxType' ; import { IToastMsg } from '../../Type/Type' ; const mapStateToProps = ( state ) => ( { loginType : state . loginType , showPopove : state . showPopove , } ) ; const mapDispatch = ( dispath ) => { return { changePopoveState : ( payload ) => dispath ( actionsStore . setPopoveState ( { ... payload } ) ) , changeToastState : ( payload ) => dispath ( actionsStore . setToastStatus ( payload ) ) , } ; } ; class LoginPopove extends React . Component { public state : LoginPopoveState ; public timer : NodeJS . Timeout ; constructor ( props ) { super ( props ) ; this . choseAgree = this . choseAgree . bind ( this ) ; this . closePopove = this . closePopove . bind ( this ) ; this . popoveMouseDown = this . popoveMouseDown . bind ( this ) ; this . popoveMousemove = this . popoveMousemove . bind ( this ) ; this . phoneInput = this . phoneInput . bind ( this ) ; this . passwordOutPut = this . passwordOutPut . bind ( this ) ; this . state = { choicAgree : false , close : false , isdown : false , loginType : "手机号登陆" , mouse : { disX : 0 , disY : 0 , offWindowX : 200 , offWindowY : 50 , screenX : 0 , screenY : 0 , } , password : '' , passwordIstrue : false , phoneInputs : '' , phoneIsTrue : false , } ; } public choseAgree ( ) { let choicAgree = this . state . choicAgree ; choicAgree = ! choicAgree ; this . setState ( { choicAgree } ) ; } /**
     * closePopove 关闭弹窗
     */ public closePopove ( ) { const self = this ; this . setState ( { close : true } ) ; setTimeout ( ( ) => { self . changePopoveStateStatus ( false , 'phone' ) ; } , 100 ) ; } param e public phoneInput ( e ) { e . stopPropagation ( ) ; if ( ~ this . state . loginType . indexOf ( 'phone' ) ) { const reg = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-7|9])|(?:5[0-3|5-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1|8|9]))\d{8}$/ ; if ( reg . test ( e . target . value ) ) { this . setState ( { phoneInput : String ( e . target . value ) , phoneIsTrue : true , } ) ; } else { this . setState ( { phoneInput : '' , phoneIsTrue : false , } ) ; } } } /**
     * passwordOutPut
     */ public passwordOutPut ( e ) { e . stopPropagation ( ) ; const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/ ; if ( reg . test ( e . target . value ) ) { this . setState ( { password : e . target . value , passwordIstrue : true } ) ; } else { this . setState ( { password : '' , passwordIstrue : false } ) ; } } public submit ( isLogin ) { const self = this ; const loginType = this . props [ 'showPopove' ] [ 'type' ] ; if ( ~ loginType . indexOf ( 'youxiang' ) ) { this . setState ( { loginType : 'email' } ) ; self . changeToast ( "暂不支持此登陆方式" ) ; } else { this . setState ( { loginType : 'phone' } ) ; } if ( ! isLogin ) { return ; } if ( this . state . phoneIsTrue && this . state . passwordIstrue ) { this . changeToast ( "登陆成功" ) ; this . closePopove ( ) ; } } param msg public changeToast ( msg ) { const self = this ; this . props [ 'changeToastState' ] ( { duation : 3000 , msg , show : true } ) ; this . timer = setTimeout ( ( ) => { self . props [ 'changeToastState' ] ( { duation : 3000 , msg : '' , show : false , } ) ; } , 3000 ) ; } param show param type public changePopoveStateStatus ( show , type ) { const self = this ; self . props [ "changePopoveState" ] ( { show , type } ) ; } public componentDidMount ( ) { this . submit ( false ) ; } /**
     * popoveMouseenter 鼠标摁下事件 设置距离
     */ public async popoveMouseDown ( e ) { const initState = this . state . mouse ; initState . screenX = e . pageX ; initState . screenY = e . pageY ; initState . disX = this . state . mouse . offWindowX ; initState . disY = this . state . mouse . offWindowY ; await this . setState ( { mouse : initState , } ) ; this . popoveMousemove ( e ) ; } /**
     * popoveMousemove 鼠标移动事件
     */ public popoveMousemove ( event ) { document . onmousemove = ( e ) => { const initState = this . state . mouse ; const pageX = e . pageX ; const pageY = e . pageY ; const screenX = pageX - this . state . mouse . screenX ; const screenY = pageY - this . state . mouse . screenY ; initState . offWindowX = screenX + this . state . mouse . disX ; initState . offWindowY = screenY + this . state . mouse . disY ; initState . screenX = initState . screenX ; initState . screenY = initState . screenY ; this . setState ( { mouse : initState } ) ; } ; document . onmouseup = ( ) => { document . onmousemove = null ; } ; } public UNSAFE_componentWillUpdate ( nextProps , nextState ) { if ( nextState . isdown ) { } } public componentWillUnmount ( ) { clearTimeout ( this . timer ) ; } public render ( ) { return ( < div className = { [ "loginPopoveBox" ] . join ( '' ) } > < div className = { [ "loginPopove" , this . state . close ? 'addCloseEffect' : '' ] . join ( ' ' ) } onMouseDown = { ( ) => this . popoveMouseDown ( event ) } style = { { "transform" : `translate3d(${ this . state . mouse . offWindowX }px,${ this . state . mouse . offWindowY }px,0px)` } } id = "loginPopove" > { } < div className = "showLoginBox" > < div className = "title" > < span > 手机号登陆 < /span> < span / > < /div> < i className = "iconfont icon-guanbi" onClick = { this . closePopove } / > { } < div className = "loginMsgBox" > < div className = "loginMsg" > { } < div className = { [ "loginInput iconfont" , this . state . phoneIsTrue && this . state . loginType === 'phone' ? "icon-zhengque" : "icon-guanbi" ] . join ( ' ' ) } > { this . props [ 'loginType' ] === '手机号登陆' ? < span className = "iconfont icon-xiangxia" > + 86 < /span> : null} < span > { < input type = "text" placeholder = { this . props [ 'loginType' ] } className = { [ "outPhone" ] . join ( ' ' ) } onInput = { ( ) => this . phoneInput ( event ) } / > } < /span> < /div> < div className = { [ "outPassword iconfont" , this . state . passwordIstrue ? "icon-zhengque" : "icon-guanbi" ] . join ( " " ) } > < input type = "password" placeholder = "请输入密码" onInput = { ( ) => this . passwordOutPut ( event ) } /> < /div> < div className = "rememberPassword" > < div > < span className = { [ "checkPwd iconfont" , this . state . choicAgree ? "icon-huiyishiqueren_huabanfuben" : '' ] . join ( ' ' ) } onClick = { this . choseAgree } / > < span > 记住密码 < /span> < /div> < div className = "forgetPwd" > 忘记密码 ? < /div> < /div> { } < div className = "submit" onClick = { ( ) => this . submit ( true ) } > 登陆 < /div> < /div> < /div> { } < div className = "registerOrMoreLogin" > < div className = "registerOrMoreLoginBox" > { } < span > < a href = "#" > { `< 其他登陆方式` } < /a> < /span> < span > < a href = "#" > 没有帐号 ？ 去注册 > < /a> < /span> < /div> < /div> < /div> < /div> < /div>); } } export default connect ( mapStateToProps , mapDispatch ) ( LoginPopove ) ;