From 92a9b175fda139d6608c53af62e4d8b7b1c926cf Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 09 四月 2021 18:08:51 +0800
Subject: [PATCH] 2021-04-09

---
 src/pc/components/login/normal-login/loginform.jsx |   90 +++++++++++++++++++++-----------------------
 1 files changed, 43 insertions(+), 47 deletions(-)

diff --git a/src/pc/components/login/normal-login/loginform.jsx b/src/pc/components/login/normal-login/loginform.jsx
index 5bac83d..5090a1b 100644
--- a/src/pc/components/login/normal-login/loginform.jsx
+++ b/src/pc/components/login/normal-login/loginform.jsx
@@ -1,71 +1,58 @@
 import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import { is, fromJS } from 'immutable'
-import { Form, Icon, Input, Button, Checkbox, Tabs } from 'antd'
+import { Form, Icon, Input, Button, Checkbox } from 'antd'
 
 import './index.scss'
-
-const { TabPane } = Tabs
 
 class LoginTabForm extends Component {
   static propTpyes = {
     dict: PropTypes.object,
     loginWays: PropTypes.array,
+    wrap: PropTypes.array,
   }
 
   state = {
-    activeKey: 'uname_pwd',
-    username: '',
-    password: '',
+    activeWay: null,
     loginWays: [],
-    smsId: '',
-    verdisabled: false
   }
 
   UNSAFE_componentWillMount () {
-    const { loginWays } = this.props
+    const { loginWays, wrap } = this.props
 
-    let smsId = ''
     let _loginWays = []
     loginWays.forEach(item => {
-      if (item.type === 'sms_vcode') {
-        smsId = item.smsId
-        _loginWays.push(item)
-      } else if (item.type === 'uname_pwd') {
+      if (!wrap.loginWays || wrap.loginWays.includes(item.type)) {
         _loginWays.push(item)
       }
     })
 
     this.setState({
-      smsId: smsId,
       loginWays: _loginWays,
-      activeKey: _loginWays[0].type,
+      activeWay: _loginWays[0],
     })
   }
 
   UNSAFE_componentWillReceiveProps (nextProps) {
-    if (!is(fromJS(this.props.loginWays), fromJS(nextProps.loginWays))) {
-      let smsId = ''
+    const { loginWays, wrap } = this.props
+
+    if (!is(fromJS(wrap), fromJS(nextProps.wrap))) {
       let _loginWays = []
-      nextProps.loginWays.forEach(item => {
-        if (item.type === 'sms_vcode') {
-          smsId = item.smsId
-          _loginWays.push(item)
-        } else if (item.type === 'uname_pwd') {
+      loginWays.forEach(item => {
+        if (!nextProps.wrap.loginWays || nextProps.wrap.loginWays.includes(item.type)) {
           _loginWays.push(item)
         }
       })
 
       this.setState({
-        smsId: smsId,
         loginWays: _loginWays,
-        activeKey: _loginWays[0].type
+        activeWay: _loginWays[0],
       })
     }
   }
 
-  onChangeTab = (activeKey) => {
-    this.setState({activeKey})
+  onChangeTab = (activeWay) => {
+    this.setState({activeWay})
   }
 
   /**
@@ -78,50 +65,59 @@
   }
 
   render() {
-    const { activeKey, verdisabled, loginWays } = this.state
+    const { activeWay, loginWays } = this.state
 
     return (
       <Form className="login-edit-form">
-        <Tabs type="card" activeKey={activeKey} onChange={this.onChangeTab}>
-          {loginWays.map(item => (<TabPane tab={item.label} key={item.type}></TabPane>))}
-        </Tabs>
-        <div className="form-item-wrap">
-          {activeKey === 'uname_pwd' ? <Form.Item>
+        <div className={'login-way-wrap ' + (loginWays.length === 1 ? 'simple' : '')}>
+          {loginWays.map(item => (
+            <div className={'login-way' + (activeWay.type === item.type ? ' active' : '')} onClick={() => this.onChangeTab(item)} key={item.type}>{item.label}</div>
+          ))}
+        </div>
+        {activeWay.type === 'uname_pwd' ? <div className="form-item-wrap">
+          <Form.Item>
             <Input
               prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
               placeholder="鐢ㄦ埛鍚�"
               autoComplete="off"
             />
-          </Form.Item> : null}
-          {activeKey === 'uname_pwd' ? <Form.Item>
+          </Form.Item>
+          <Form.Item>
             <Input.Password placeholder="瀵嗙爜" prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} />
-          </Form.Item> : null}
-          {activeKey === 'sms_vcode' ? <Form.Item>
+          </Form.Item>
+          <Form.Item className="minline">
+            <Checkbox>璁颁綇瀵嗙爜</Checkbox>
+          </Form.Item>
+          <Form.Item className="btn-login">
+            <Button type="primary" htmlType="submit" className="login-form-button">
+              鐧诲綍
+            </Button>
+          </Form.Item>
+        </div> : null}
+        {activeWay.type === 'sms_vcode' ? <div className="form-item-wrap">
+          <Form.Item>
             <Input
               placeholder="鎵嬫満鍙�"
               autoComplete="off"
             />
-          </Form.Item> : null}
-          {activeKey === 'sms_vcode' ? <Form.Item>
+          </Form.Item>
+          <Form.Item style={{marginBottom: '35px'}}>
             <Input
               addonAfter={
-                <Button type="link" className="vercode" size="small" disabled={verdisabled}>
+                <Button type="link" className="vercode" size="small">
                   鑾峰彇楠岃瘉鐮�
                 </Button>
               }
               placeholder="楠岃瘉鐮�"
               autoComplete="off"
             />
-          </Form.Item> : null}
-          {activeKey === 'uname_pwd' ? <Form.Item className="minline">
-            <Checkbox>璁颁綇瀵嗙爜</Checkbox>
-          </Form.Item> : null}
-          {['uname_pwd', 'sms_vcode'].includes(activeKey) ? <Form.Item className="btn-login">
+          </Form.Item>
+          <Form.Item className="btn-login">
             <Button type="primary" htmlType="submit" className="login-form-button">
               鐧诲綍
             </Button>
-          </Form.Item> : null}
-        </div>
+          </Form.Item>
+        </div> : null}
       </Form>
     )
   }

--
Gitblit v1.8.0