From a757b75163d77acc5111637fbe20ec61d895a72b Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 11 八月 2021 23:15:29 +0800
Subject: [PATCH] 2021-08-11
---
src/pc/components/login/normal-login/loginform.jsx | 116 ++++++++++++++++++++++++++++++++++------------------------
1 files changed, 68 insertions(+), 48 deletions(-)
diff --git a/src/pc/components/login/normal-login/loginform.jsx b/src/pc/components/login/normal-login/loginform.jsx
index 5bac83d..2bfe6a0 100644
--- a/src/pc/components/login/normal-login/loginform.jsx
+++ b/src/pc/components/login/normal-login/loginform.jsx
@@ -1,71 +1,76 @@
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 asyncElementComponent from '@/utils/asyncComponent'
+import MKEmitter from '@/utils/events.js'
import './index.scss'
-const { TabPane } = Tabs
+const QrCode = asyncElementComponent(() => import('@/components/qrcode'))
class LoginTabForm extends Component {
static propTpyes = {
dict: PropTypes.object,
+ menuId: PropTypes.string,
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)
}
})
-
+ console.log(nextProps.wrap)
+ console.log(loginWays)
+ console.log(_loginWays)
this.setState({
- smsId: smsId,
loginWays: _loginWays,
- activeKey: _loginWays[0].type
+ activeWay: _loginWays[0],
})
}
}
- onChangeTab = (activeKey) => {
- this.setState({activeKey})
+ onChangeTab = (activeWay) => {
+ this.setState({activeWay})
+ }
+
+ changeMenu = () => {
+ const { wrap, menuId } = this.props
+
+ MKEmitter.emit('changeEditMenu', {
+ MenuID: wrap.link === 'linkmenu' ? wrap.linkmenu : menuId,
+ copyMenuId: '',
+ MenuNo: '',
+ MenuName: ''
+ })
}
/**
@@ -78,50 +83,65 @@
}
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" onDoubleClick={() => this.changeMenu()} 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">
- <Button type="primary" htmlType="submit" className="login-form-button">
+ </Form.Item>
+ <Form.Item className="btn-login">
+ <Button type="primary" onDoubleClick={() => this.changeMenu()} className="login-form-button">
鐧诲綍
</Button>
- </Form.Item> : null}
- </div>
+ </Form.Item>
+ </div> : null}
+ {activeWay.type === 'app_scan' ? <div className="form-scan-wrap">
+ <div className="qr-wrap">
+ <QrCode card={{qrWidth: 500, color: '#000000'}} value={'minkesoft'}/>
+ </div>
+ 璇蜂娇鐢ㄥ鎴风鎵竴鎵櫥褰�
+ </div> : null}
</Form>
)
}
--
Gitblit v1.8.0