import React, {Component} from 'react'
|
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 Utils from '@/utils/utils.js'
|
import ContentUpdate from '@/mob/contupdate'
|
import mklogo from '@/assets/mobimg/mklogo.png'
|
import './index.scss'
|
|
const CheckboxItem = Checkbox.CheckboxItem
|
|
class MobLogin extends Component {
|
static propTpyes = {
|
card: PropTypes.object,
|
editId: PropTypes.any,
|
triggerEdit: PropTypes.func,
|
updateConfig: PropTypes.func,
|
onDoubleClick: PropTypes.func
|
}
|
|
state = {
|
dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
|
rember: true,
|
param: {
|
type: 'login',
|
subtype: 'mob-login-1',
|
box: { uuid: Utils.getuuid(), eleType: 'box', style: {color: '#ffffff', backgroundImage: 'linear-gradient(#378DBE, #46C29E, #48A9D6)'}},
|
logo: { uuid: Utils.getuuid(), eleType: 'img', content: mklogo, style: {marginTop: '17vh', marginBottom: '15px'} },
|
title: { uuid: Utils.getuuid(), eleType: 'text', content: '明科商业智能开放平台', style: {fontSize: '20px', fontWeight: 'bold', color: '#ffffff', textAlign: 'center', marginTop: '15px', marginBottom: '30px'}},
|
login: { uuid: Utils.getuuid(), eleType: 'button', content: '登录', style: {fontSize: '18px', color: '#ffffff', textAlign: 'center', lineHeight: 2.4, borderRadius: '25px', marginBottom: '15vh'}},
|
copyright: { uuid: Utils.getuuid(), eleType: 'textarea', content: 'Copyright©2017 所有相关版权归 北京明科普华信息技术有限公司', style: {fontSize: '12px', color: '#ffffff', textAlign: 'center'} }
|
}
|
}
|
|
UNSAFE_componentWillMount () {
|
const { card } = this.props
|
const { param } = this.state
|
|
if (!card.box) {
|
this.props.updateConfig({...param, ...card})
|
}
|
}
|
|
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
|
})
|
}
|
|
onChangeLang = (value) => {
|
this.setState({
|
lang: value
|
})
|
}
|
|
editLogo = (e) => {
|
const { card } = this.props
|
e.stopPropagation()
|
let element = {
|
...fromJS(card.logo.style).toJS(),
|
componentId: card.uuid,
|
uuid: card.logo.uuid,
|
items: ['margin']
|
}
|
this.props.triggerEdit(element)
|
}
|
|
editTitle = (e) => {
|
const { card } = this.props
|
e.stopPropagation()
|
let element = {
|
...fromJS(card.title.style).toJS(),
|
componentId: card.uuid,
|
uuid: card.title.uuid,
|
items: ['font', 'margin'],
|
}
|
this.props.triggerEdit(element)
|
}
|
|
editMsg = (e) => {
|
const { card } = this.props
|
e.stopPropagation()
|
let element = {
|
...fromJS(card.copyright.style).toJS(),
|
componentId: card.uuid,
|
uuid: card.copyright.uuid,
|
items: ['font'],
|
}
|
this.props.triggerEdit(element)
|
}
|
|
editLogin = (e) => {
|
const { card } = this.props
|
e.stopPropagation()
|
let element = {
|
...fromJS(card.login.style).toJS(),
|
componentId: card.uuid,
|
uuid: card.login.uuid,
|
items: ['font', 'background', 'border', 'margin']
|
}
|
this.props.triggerEdit(element)
|
}
|
|
editBox = (e) => {
|
const { card } = this.props
|
e.stopPropagation()
|
let element = {
|
...fromJS(card.box.style).toJS(),
|
componentId: card.uuid,
|
uuid: card.box.uuid,
|
items: ['font', 'padding', 'background'],
|
}
|
this.props.triggerEdit(element)
|
}
|
|
updateContent = (card) => {
|
Object.keys(card).forEach(key => {
|
if (card[key] === null) {
|
delete card[key]
|
}
|
})
|
this.props.updateConfig(card)
|
}
|
|
render () {
|
const { card, editId } = this.props
|
// const { getFieldProps } = this.props.form
|
const { rember } = this.state
|
|
if (!card.box) return null
|
|
let logoStyle = card.logo && card.logo.style ? fromJS(card.logo.style).toJS() : null
|
if (logoStyle && logoStyle.marginTop && /vh$/ig.test(logoStyle.marginTop)) {
|
let percent = parseInt(logoStyle.marginTop)
|
logoStyle.marginTop = `calc(${(percent / 100) * 615}px)`
|
}
|
if (logoStyle && logoStyle.marginBottom && /vh$/ig.test(logoStyle.marginBottom)) {
|
let percent = parseInt(logoStyle.marginBottom)
|
logoStyle.marginBottom = `calc(${(percent / 100) * 625}px)`
|
}
|
|
let titleStyle = card.title && card.title.style ? fromJS(card.title.style).toJS() : null
|
if (titleStyle && titleStyle.marginTop && /vh$/ig.test(titleStyle.marginTop)) {
|
let percent = parseInt(titleStyle.marginTop)
|
titleStyle.marginTop = `calc(${(percent / 100) * 615}px)`
|
}
|
if (titleStyle && titleStyle.marginBottom && /vh$/ig.test(titleStyle.marginBottom)) {
|
let percent = parseInt(titleStyle.marginBottom)
|
titleStyle.marginBottom = `calc(${(percent / 100) * 615}px)`
|
}
|
|
let loginStyle = fromJS(card.login.style).toJS()
|
if (loginStyle.marginTop && /vh$/ig.test(loginStyle.marginTop)) {
|
let percent = parseInt(loginStyle.marginTop)
|
loginStyle.marginTop = `calc(${(percent / 100) * 615}px)`
|
}
|
if (loginStyle.marginBottom && /vh$/ig.test(loginStyle.marginBottom)) {
|
let percent = parseInt(loginStyle.marginBottom)
|
loginStyle.marginBottom = `calc(${(percent / 100) * 615}px)`
|
}
|
|
return (
|
<div className="mob-login-1" onClick={this.editBox} style={card.box.style}>
|
{card.logo ? <div className={'logo ' + (editId === card.logo.uuid ? 'editing' : '')} style={logoStyle} onClick={this.editLogo}>
|
<ContentUpdate element={card.logo} updateContent={(ele) => this.updateContent({...card, logo: ele})}/>
|
<img src={card.logo.content} alt=""/>
|
</div> : null}
|
{card.title ? <div className={'plat-name ' + (editId === card.title.uuid ? 'editing' : '')} style={titleStyle} onClick={this.editTitle}>
|
<ContentUpdate element={card.title} updateContent={(ele) => this.updateContent({...card, title: ele})}/>
|
{card.title.content}
|
</div> : null}
|
<InputItem
|
placeholder={"UserName"}
|
prefixListCls="mk-login-item am-list"
|
disabled={true}
|
>
|
<Icon type="check-circle-o" />
|
</InputItem>
|
<InputItem
|
placeholder="Password"
|
prefixListCls="mk-login-item am-list"
|
type={'password'}
|
disabled={true}
|
>
|
<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">
|
<List.Item>{lang}</List.Item>
|
</Picker> */}
|
<List.Item className="lang">中文简体</List.Item>
|
<div className="clear-both"></div>
|
</div>
|
<Button
|
type="primary"
|
className={'login ' + (editId === card.login.uuid ? 'editing' : '')}
|
onDoubleClick={() => this.props.doubleClickCard(card.login)}
|
style={loginStyle}
|
onClick={this.editLogin}
|
>
|
<ContentUpdate element={card.login} deletable={false} updateContent={(ele) => this.updateContent({...card, login: ele})}/>
|
{card.login.content}
|
</Button>
|
{card.copyright ? <div className={'company-msg ' + (editId === card.copyright.uuid ? 'editing' : '')} style={card.copyright.style} onClick={this.editMsg}>
|
<ContentUpdate element={card.copyright} updateContent={(ele) => this.updateContent({...card, copyright: ele})}/>
|
{card.copyright.content}
|
</div> : null}
|
</div>
|
)
|
}
|
}
|
|
// export default createForm()(MobLogin)
|
export default MobLogin
|
