import * as React from 'react' ; import "./Login.scss" ; import { ILoginListType , ILoginState , IToastMsg } from '../Type/Type' ; import { connect } from "react-redux" ; import actionsStore from "../../redux/actions/actions" ; const mapStateToProps = ( state ) => ( { showPopove : state . showPopove , } ) ; const mapDispatch = ( dispatch ) => { return { changeLoginTypeState : ( payload ) => dispatch ( actionsStore . setLoginType ( payload ) ) , changePopoveState : ( payload ) => { return dispatch ( actionsStore . setPopoveState ( payload ) ) ; } , changeToastState : ( payload ) => dispatch ( actionsStore . setToastStatus ( payload ) ) , } ; } ; class Login extends React . Component { public state : ILoginState ; constructor ( props ) { super ( props ) ; this . state = { loginTypeList : [ { icon : 'icon-shouji' , name : '手机号登陆' } , { icon : 'icon-weixin' , name : '微信登陆' } , { icon : 'icon-qq' , name : 'QQ登陆' } , { icon : 'icon-weibo' , name : '新浪微博登陆' } , { icon : 'icon-youxiang' , name : '网易邮箱登陆' } , ] , showList : false , toastMsg : { duation : 3000 , msg : '暂不支持此登陆类型' , show : true } } ; this . mouseLoginShow = this . mouseLoginShow . bind ( this ) ; this . mouseLoginLeave = this . mouseLoginLeave . bind ( this ) ; } public mouseLoginShow ( ) { this . setState ( { showList : true } ) ; } public mouseLoginLeave ( ) { this . setState ( { showList : false } ) ; } public async goLogin ( icon , name ) { const self = this ; if ( ~ icon . indexOf ( "shouji" ) || ~ icon . indexOf ( "youxiang" ) ) { await this . props [ 'changePopoveState' ] ( { show : true , type : icon } ) ; await this . props [ 'changeLoginTypeState' ] ( name ) ; } else { await this . props [ 'changeToastState' ] ( this . state . toastMsg ) ; setTimeout ( ( ) => { self . props [ 'changeToastState' ] ( { duation : 3000 , msg : '暂不支持此登陆类型' , show : false } ) ; } , 3000 ) ; } } public render ( ) { const loginTypeList = this . state . loginTypeList . map ( ( item , index ) => { return ( < li key = { index } onClick = { this . goLogin . bind ( this , item . icon , item . name ) } > < span className = { [ 'iconfont' , item . icon ] . join ( ' ' ) } /> < span className = { item . name } > { item . name } < /span> < /li>); } ) ; return ( < div className = "login" > < em onMouseEnter = { this . mouseLoginShow } > 登陆 < /em> { } < div className = { [ "loginType" , this . state . showList ? 'loginTypeShow' : 'loginTypeHide' ] . join ( ' ' ) } onMouseLeave = { this . mouseLoginLeave } > < ul > { loginTypeList } < /ul> < /div> < /div>); } } export default connect ( mapStateToProps , mapDispatch ) ( Login ) ;