2020-08-09

king

2020-08-09 ce2b708f61de1855771d78f35309bd77df9d3b15

 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>
      )
    }
  }
}