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