import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { InputItem, Button } from 'antd-mobile'
|
import { Icon } from 'antd'
|
|
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 ContentDelete from '@/mob/contdelete'
|
import './index.scss'
|
|
class MobLogin2 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,
|
view: 'account',
|
param: {
|
type: 'login',
|
subtype: 'mob-login-2',
|
box: { uuid: Utils.getuuid(), eleType: 'box', style: {}},
|
title: {
|
uuid: Utils.getuuid(), eleType: 'text', content: '登录',
|
style: {
|
fontSize: '18px', fontWeight: 'bold', color: '#000000', textAlign: 'center', marginTop: '10vh', marginBottom: '10vh'
|
}
|
},
|
user: { uuid: Utils.getuuid(), eleType: 'input', content: '邮箱/手机', style: {}},
|
password: { uuid: Utils.getuuid(), eleType: 'input', content: '密码', style: {}},
|
login: {
|
uuid: Utils.getuuid(), eleType: 'button', content: '登录',
|
style: {
|
fontSize: '16px', color: '#ffffff', textAlign: 'center', lineHeight: 2.4, backgroundColor: '#44a8f2'
|
}
|
},
|
phone: {
|
uuid: Utils.getuuid(), eleType: 'button', content: '手机短信登录',
|
style: {
|
fontSize: '16px', color: '#44a8f2', textAlign: 'center', lineHeight: 2.4, border: '1px solid #44a8f2'
|
}
|
},
|
register: {
|
uuid: Utils.getuuid(), eleType: 'text', content: '注册',
|
style: {
|
fontSize: '14px', color: '#44a8f2', textAlign: 'left'
|
}
|
},
|
lose: {
|
uuid: Utils.getuuid(), eleType: 'text', content: '忘记密码？',
|
style: {
|
fontSize: '14px', color: '#44a8f2', textAlign: 'right', textDecoration: 'underline'
|
}
|
},
|
auth: {
|
uuid: Utils.getuuid(), eleType: 'text', content: '其他登录方式',
|
style: {
|
fontSize: '14px', color: '#bcbcbc', textAlign: 'center', marginTop: '30px', marginBottom: '20px'
|
}
|
},
|
authlist: {
|
uuid: Utils.getuuid(),
|
subItems: [
|
{uuid: 'qq', type: 'qq', icon: 'qq', label: 'QQ'},
|
{uuid: 'wechat', type: 'wechat', icon: 'wechat', label: '微信'},
|
],
|
},
|
copyright: {
|
uuid: Utils.getuuid(), eleType: 'textarea', content: 'Copyright©2017 所有相关版权归 北京明科普华信息技术有限公司',
|
style: {
|
fontSize: '12px', textAlign: 'center', color: 'rgba(0, 0, 0, 0.65)'
|
}
|
},
|
links: {
|
uuid: Utils.getuuid(), eleType: 'link', substyle: false,
|
subItems: [
|
{eleType: 'link', content: '隐私政策', url: '', uuid: Utils.getuuid()},
|
{eleType: 'link', content: '使用条款', url: '', uuid: Utils.getuuid()},
|
],
|
style: {
|
fontSize: '12px', textAlign: 'center', color: '#44a8f2', textDecoration: 'underline'
|
}
|
},
|
account: {
|
uuid: Utils.getuuid(), eleType: 'button', content: '账号密码登录',
|
style: {
|
fontSize: '16px', color: '#44a8f2', textAlign: 'center', lineHeight: 2.4, border: '1px solid #44a8f2'
|
}
|
},
|
}
|
}
|
|
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))
|
}
|
|
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)
|
}
|
|
editPlaceholder = (e, type) => {
|
const { card } = this.props
|
e.stopPropagation()
|
let element = {
|
componentId: card.uuid,
|
uuid: card[type].uuid,
|
items: [''],
|
}
|
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', 'margin'],
|
}
|
this.props.triggerEdit(element)
|
}
|
|
editLinks = (e, item) => {
|
const { card } = this.props
|
e.stopPropagation()
|
let element = {
|
...fromJS(card.links.style).toJS(),
|
componentId: card.uuid,
|
classId: card.links.uuid,
|
uuid: item.uuid,
|
items: ['font'],
|
}
|
this.props.triggerEdit(element)
|
}
|
|
editLogin = (e, type) => {
|
const { card } = this.props
|
e.stopPropagation()
|
let element = {
|
...fromJS(card[type].style).toJS(),
|
componentId: card.uuid,
|
uuid: card[type].uuid,
|
items: ['font', 'background', 'border', 'margin']
|
}
|
this.props.triggerEdit(element)
|
}
|
|
editLose = (e) => {
|
const { card } = this.props
|
e.stopPropagation()
|
let element = {
|
...fromJS(card.lose.style).toJS(),
|
componentId: card.uuid,
|
uuid: card.lose.uuid,
|
items: ['font'],
|
}
|
this.props.triggerEdit(element)
|
}
|
|
editRegister = (e) => {
|
const { card } = this.props
|
e.stopPropagation()
|
let element = {
|
...fromJS(card.register.style).toJS(),
|
componentId: card.uuid,
|
uuid: card.register.uuid,
|
items: ['font'],
|
}
|
this.props.triggerEdit(element)
|
}
|
|
editAuth = (e) => {
|
const { card } = this.props
|
e.stopPropagation()
|
let element = {
|
...fromJS(card.auth.style).toJS(),
|
componentId: card.uuid,
|
uuid: card.auth.uuid,
|
items: ['font', '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)
|
}
|
|
linkItemAdd = (e) => {
|
let card = fromJS(this.props.card).toJS()
|
e.stopPropagation()
|
|
card.links.subItems.push({
|
eleType: 'link',
|
content: 'link',
|
url: '',
|
uuid: Utils.getuuid()
|
})
|
|
this.props.updateConfig(card)
|
}
|
|
updateContent = (card) => {
|
this.props.updateConfig(card)
|
}
|
|
updateLinkItem = (val, item) => {
|
let card = fromJS(this.props.card).toJS()
|
|
if (!val) {
|
card.links.subItems = card.links.subItems.filter(cell => cell.uuid !== item.uuid)
|
} else {
|
card.links.subItems = card.links.subItems.map(cell => {
|
if (cell.uuid === item.uuid) {
|
return val
|
} else {
|
return cell
|
}
|
})
|
}
|
|
this.props.updateConfig(card)
|
}
|
|
render () {
|
const { card, editId } = this.props
|
const { view } = this.state
|
|
if (!card.box) return null
|
|
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)`
|
}
|
|
if (view === 'account') {
|
return (
|
<div className="mob-login-2" onClick={this.editBox} style={card.box.style}>
|
{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}
|
|
<div className={`mk-login-input ${editId === card.user.uuid ? 'editing' : ''}`} onClick={(e) => this.editPlaceholder(e, 'user')}>
|
<ContentUpdate element={card.user} deletable={false} updateContent={(ele) => this.updateContent({...card, user: ele})}/>
|
<InputItem disabled={true} placeholder={card.user.content}></InputItem>
|
</div>
|
<div className={`mk-login-input ${editId === card.password.uuid ? 'editing' : ''}`} onClick={(e) => this.editPlaceholder(e, 'password')}>
|
<ContentUpdate element={card.password} deletable={false} updateContent={(ele) => this.updateContent({...card, password: ele})}/>
|
<InputItem disabled={true} placeholder={card.password.content}></InputItem>
|
</div>
|
<Button
|
className={'login ' + (editId === card.login.uuid ? 'editing' : '')}
|
onDoubleClick={() => this.props.doubleClickCard(card.login)}
|
style={card.login.style}
|
onClick={(e) => this.editLogin(e, 'login')}
|
>
|
<ContentUpdate element={card.login} deletable={false} updateContent={(ele) => this.updateContent({...card, login: ele})}/>
|
{card.login.content}
|
</Button>
|
<Button
|
className={'login ' + (editId === card.phone.uuid ? 'editing' : '')}
|
onDoubleClick={() => this.setState({view: 'phone'})}
|
style={card.phone.style}
|
onClick={(e) => this.editLogin(e, 'phone')}
|
>
|
<ContentUpdate element={card.phone} updateContent={(ele) => this.updateContent({...card, phone: ele})}/>
|
{card.phone.content}
|
</Button>
|
<div className="row-box">
|
{card.register ? <div className={'col-item ' + (editId === card.register.uuid ? 'editing' : '')} style={card.register.style} onClick={this.editRegister}>
|
<ContentUpdate element={card.register} updateContent={(ele) => this.updateContent({...card, register: ele})}/>
|
{card.register.content}
|
</div> : null}
|
{card.lose ? <div className={'col-item right ' + (editId === card.lose.uuid ? 'editing' : '')} style={card.lose.style} onClick={this.editLose}>
|
<ContentUpdate element={card.lose} updateContent={(ele) => this.updateContent({...card, lose: ele})}/>
|
{card.lose.content}
|
</div> : null}
|
<div style={{clear: 'both'}}></div>
|
</div>
|
{card.auth ? <div className={'plat-name ' + (editId === card.auth.uuid ? 'editing' : '')} style={card.auth.style} onClick={this.editAuth}>
|
<ContentUpdate element={card.auth} updateContent={(ele) => this.updateContent({...card, auth: ele})}/>
|
{card.auth.content}
|
</div> : null}
|
{card.authlist ? <div className="other-auth">
|
{card.authlist.subItems.map(cell => (
|
<span className="deletable-item" key={cell.type}>
|
<ContentDelete element={cell} list={card.authlist} updateContent={(ele) => this.updateContent({...card, authlist: ele})}/>
|
<Icon type={cell.icon} />
|
<p>{cell.label}</p>
|
</span>
|
))}
|
</div> : null}
|
{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}
|
{card.links ? <div className="links" style={card.links.style}>
|
{card.links.subItems.map(item => (
|
<span className={(editId === item.uuid ? 'editing' : '')} key={item.uuid} onClick={(e) => this.editLinks(e, item)}>
|
<ContentUpdate element={item} updateContent={(val) => this.updateLinkItem(val, item)}/>
|
{item.content}
|
</span>
|
))}
|
<Icon type="plus" onClick={this.linkItemAdd} />
|
</div> : null}
|
</div>
|
)
|
} else if (view === 'phone') {
|
return (
|
<div className="mob-login-2" onClick={this.editBox} style={card.box.style}>
|
{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}
|
|
<div className={`mk-login-input ${editId === card.user.uuid ? 'editing' : ''}`} onClick={(e) => this.editPlaceholder(e, 'user')}>
|
<ContentUpdate element={card.user} deletable={false} updateContent={(ele) => this.updateContent({...card, user: ele})}/>
|
<InputItem disabled={true} placeholder={card.user.content}></InputItem>
|
</div>
|
<div className={`mk-login-input ${editId === card.password.uuid ? 'editing' : ''}`} onClick={(e) => this.editPlaceholder(e, 'password')}>
|
<ContentUpdate element={card.password} deletable={false} updateContent={(ele) => this.updateContent({...card, password: ele})}/>
|
<InputItem disabled={true} placeholder={card.password.content}></InputItem>
|
</div>
|
<Button
|
className={'login ' + (editId === card.login.uuid ? 'editing' : '')}
|
onDoubleClick={() => this.props.doubleClickCard(card.login)}
|
style={card.login.style}
|
onClick={(e) => this.editLogin(e, 'login')}
|
>
|
<ContentUpdate element={card.login} deletable={false} updateContent={(ele) => this.updateContent({...card, login: ele})}/>
|
{card.login.content}
|
</Button>
|
<Button
|
className={'login ' + (editId === card.account.uuid ? 'editing' : '')}
|
onDoubleClick={() => this.setState({view: 'account'})}
|
style={card.account.style}
|
onClick={(e) => this.editLogin(e, 'account')}
|
>
|
<ContentUpdate element={card.account} updateContent={(ele) => this.updateContent({...card, account: ele})}/>
|
{card.account.content}
|
</Button>
|
<div className="row-box">
|
{card.register ? <div className={'col-item ' + (editId === card.register.uuid ? 'editing' : '')} style={card.register.style} onClick={this.editRegister}>
|
<ContentUpdate element={card.register} updateContent={(ele) => this.updateContent({...card, register: ele})}/>
|
{card.register.content}
|
</div> : null}
|
{card.lose ? <div className={'col-item right ' + (editId === card.lose.uuid ? 'editing' : '')} style={card.lose.style} onClick={this.editLose}>
|
<ContentUpdate element={card.lose} updateContent={(ele) => this.updateContent({...card, lose: ele})}/>
|
{card.lose.content}
|
</div> : null}
|
<div style={{clear: 'both'}}></div>
|
</div>
|
{card.auth ? <div className={'plat-name ' + (editId === card.auth.uuid ? 'editing' : '')} style={card.auth.style} onClick={this.editAuth}>
|
<ContentUpdate element={card.auth} updateContent={(ele) => this.updateContent({...card, auth: ele})}/>
|
{card.auth.content}
|
</div> : null}
|
{card.authlist ? <div className="other-auth">
|
{card.authlist.subItems.map(cell => (
|
<span className="deletable-item" key={cell.type}>
|
<ContentDelete element={cell} list={card.authlist} updateContent={(ele) => this.updateContent({...card, authlist: ele})}/>
|
<Icon type={cell.icon} />
|
<p>{cell.label}</p>
|
</span>
|
))}
|
</div> : null}
|
{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}
|
{card.links ? <div className="links" style={card.links.style}>
|
{card.links.subItems.map(item => (
|
<span className={(editId === item.uuid ? 'editing' : '')} key={item.uuid} onClick={(e) => this.editLinks(e, item)}>
|
<ContentUpdate element={item} updateContent={(val) => this.updateLinkItem(val, item)}/>
|
{item.content}
|
</span>
|
))}
|
<Icon type="plus" onClick={this.linkItemAdd} />
|
</div> : null}
|
</div>
|
)
|
}
|
}
|
}
|
|
export default MobLogin2
|
