From 9e0a0749233c15711fd3259afa1f19867d214df7 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期一, 22 六月 2020 16:07:35 +0800 Subject: [PATCH] 2020-06-22 --- src/mob/login/index.jsx | 83 ++++++++++++++++++++++++++--------------- 1 files changed, 52 insertions(+), 31 deletions(-) diff --git a/src/mob/login/index.jsx b/src/mob/login/index.jsx index 7be0c40..fb6441a 100644 --- a/src/mob/login/index.jsx +++ b/src/mob/login/index.jsx @@ -1,33 +1,25 @@ import React, {Component} from 'react' -// import PropTypes from 'prop-types' -// import { is, fromJS } from 'immutable' -import { InputItem, Icon, Checkbox, Picker, List, Button } from 'antd-mobile' +import PropTypes from 'prop-types' +import { is, fromJS } from 'immutable' +import { InputItem, Icon, Checkbox, List, Button } from 'antd-mobile' import { createForm } from 'rc-form' import zhCN from '@/locales/zh-CN/mob.js' import enUS from '@/locales/en-US/mob.js' -import mklogo from '@/assets/mobimg/mklogo.png' +// import mklogo from '@/assets/mobimg/mklogo.png' import './index.scss' const CheckboxItem = Checkbox.CheckboxItem -const langs = [ - { - label: 'zh-CN', - value: '涓枃绠�浣�', - }, - { - label: 'en-US', - value: 'English', - } -] class MobLogin extends Component { - // static propTpyes = { - // collapse: PropTypes.bool, - // } + static propTpyes = { + card: PropTypes.object, + triggerEdit: PropTypes.func, + onDoubleClick: PropTypes.func + } + state = { dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, - lang: ['zh-CN'], rember: true, param: { background: {color: '#000000', image: ''}, @@ -35,8 +27,17 @@ } } - onChange = () => { + UNSAFE_componentWillMount () { + + } + + shouldComponentUpdate (nextProps, nextState) { + return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) + } + + onChange = (e) => { const { rember } = this.state + e.stopPropagation() this.setState({ rember: !rember @@ -49,22 +50,40 @@ }) } + editLogo = (e) => { + e.stopPropagation() + } + + editTitle = (e) => { + e.stopPropagation() + } + + editMsg = (e) => { + e.stopPropagation() + } + + editBox = (e) => { + e.stopPropagation() + } + render () { + const { card } = this.props const { getFieldProps } = this.props.form - const { lang, rember } = this.state + const { rember } = this.state return ( - <div className="mob-login"> - <div className="logo" style={{marginTop: `calc(17vh - 10px)`}}> - <img src={mklogo} alt=""/> + <div className="mob-login" onClick={this.editBox} style={{paddingTop: `calc(17vh - 10px)`}}> + <div className="logo" onClick={this.editLogo}> + <img src={card.logo.content} alt=""/> </div> - <div className="plat-name">鏄庣鍟嗕笟鏅鸿兘寮�鏀惧钩鍙�</div> + <div className="plat-name" onClick={this.editTitle}>鏄庣鍟嗕笟鏅鸿兘寮�鏀惧钩鍙�</div> <InputItem placeholder="UserName" prefixListCls="mk-login-item am-list" {...getFieldProps('userName', { - initialValue: '8888', + initialValue: 'admin', })} + disabled={true} > <Icon type="check-circle-o" /> </InputItem> @@ -72,23 +91,25 @@ placeholder="Password" prefixListCls="mk-login-item am-list" {...getFieldProps('password', { - initialValue: '8888', + initialValue: '123456', })} type={'password'} + disabled={true} > - <Icon type="check-circle-o" /> + <Icon type="check-circle" /> </InputItem> <div className="other-setting"> <CheckboxItem checked={rember} onChange={this.onChange}> <span onClick={this.onChange}>璁颁綇瀵嗙爜</span> </CheckboxItem> - <Picker data={langs} value={lang} cols={1} onChange={this.onChangeLang} className="forss"> + {/* <Picker data={langs} value={lang} cols={1} onChange={this.onChangeLang} className="forss"> <List.Item>{lang}</List.Item> - </Picker> + </Picker> */} + <List.Item className="lang">涓枃绠�浣�</List.Item> <div className="clear-both"></div> </div> - <Button type="primary">鐧诲綍</Button> - <div className="company-msg"> + <Button type="primary" onDoubleClick={() => this.props.doubleClickCard(card.login)}>鐧诲綍</Button> + <div className="company-msg" onClick={this.editMsg}> <p>Copyright漏2017 鎵�鏈夌浉鍏崇増鏉冨綊 鍖椾含鏄庣鏅崕淇℃伅鎶�鏈湁闄愬叕鍙�</p> </div> </div> -- Gitblit v1.8.0