From ce2b708f61de1855771d78f35309bd77df9d3b15 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期日, 09 八月 2020 23:28:08 +0800 Subject: [PATCH] 2020-08-09 --- src/mob/components/login/mob-login-2/index.jsx | 290 +++++++++++++++++++++++++++++++++++++++++----------------- 1 files changed, 205 insertions(+), 85 deletions(-) diff --git a/src/mob/components/login/mob-login-2/index.jsx b/src/mob/components/login/mob-login-2/index.jsx index 685e6b0..37e1952 100644 --- a/src/mob/components/login/mob-login-2/index.jsx +++ b/src/mob/components/login/mob-login-2/index.jsx @@ -8,6 +8,7 @@ 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 { @@ -26,30 +27,73 @@ 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'}}, + 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', - subItems: [ - {type: 'qq', icon: 'qq', label: 'QQ'}, - {type: 'wechat', icon: 'wechat', label: '寰俊'}, - ], - content: '鍏朵粬鐧诲綍鏂瑰紡', style: {fontSize: '14px', color: '#bcbcbc', textAlign: 'center', marginTop: '30px', marginBottom: '20px'} + login: { + uuid: Utils.getuuid(), eleType: 'button', content: '鐧诲綍', + style: { + fontSize: '16px', color: '#ffffff', textAlign: 'center', lineHeight: 2.4, backgroundColor: '#44a8f2' + } }, - copyright: { uuid: Utils.getuuid(), eleType: 'textarea', content: 'Copyright漏2017 鎵�鏈夌浉鍏崇増鏉冨綊 鍖椾含鏄庣鏅崕淇℃伅鎶�鏈湁闄愬叕鍙�', style: {fontSize: '12px', textAlign: 'center'} }, + 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'} - } + 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' + } + }, } } @@ -96,7 +140,7 @@ ...fromJS(card.copyright.style).toJS(), componentId: card.uuid, uuid: card.copyright.uuid, - items: ['font'], + items: ['font', 'margin'], } this.props.triggerEdit(element) } @@ -121,7 +165,7 @@ ...fromJS(card[type].style).toJS(), componentId: card.uuid, uuid: card[type].uuid, - items: ['font', 'background', 'border'] + items: ['font', 'background', 'border', 'margin'] } this.props.triggerEdit(element) } @@ -226,77 +270,153 @@ 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 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 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.props.doubleClickCard(card.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} + 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} - {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 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} - <div style={{clear: 'both'}}></div> + {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> - {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.auth ? <div className="other-auth"> - {card.auth.subItems.map(cell => ( - <span key={cell.type}> - <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> + ) + } } } -- Gitblit v1.8.0