From b09b821ef36fd1ea979e9a5daa98e95732ac81d5 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 16 七月 2025 18:16:00 +0800
Subject: [PATCH] 2025-07-16
---
src/pc/components/login/normal-login/loginform.jsx | 198 +++++++++++++++++++++++++++++++++++--------------
1 files changed, 142 insertions(+), 56 deletions(-)
diff --git a/src/pc/components/login/normal-login/loginform.jsx b/src/pc/components/login/normal-login/loginform.jsx
index 5bac83d..8790dd8 100644
--- a/src/pc/components/login/normal-login/loginform.jsx
+++ b/src/pc/components/login/normal-login/loginform.jsx
@@ -1,71 +1,129 @@
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, Input, Button, Checkbox, notification } from 'antd'
+import { QrcodeOutlined, UserOutlined, LockOutlined } from '@ant-design/icons'
+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,
- loginWays: PropTypes.array,
+ wrap: PropTypes.object,
+ changeway: PropTypes.func
}
state = {
- activeKey: 'uname_pwd',
- username: '',
- password: '',
+ activeWay: null,
loginWays: [],
- smsId: '',
- verdisabled: false
+ scanWay: null
}
UNSAFE_componentWillMount () {
- const { loginWays } = this.props
+ const { 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') {
- _loginWays.push(item)
+ let scanWay = null
+
+ let loginWays = []
+ wrap.loginWays.forEach(way => {
+ if (way === 'sms_vcode') {
+ loginWays.push({
+ type: 'sms_vcode',
+ label: '鐭俊鐧诲綍',
+ tempId: wrap.tempId,
+ sort: 2
+ })
+ } else if (way === 'uname_pwd') {
+ loginWays.push({
+ type: 'uname_pwd',
+ label: '璐﹀彿鐧诲綍',
+ shortcut: wrap.shortcut,
+ sort: 1
+ })
+ } else if (way === 'app_scan') {
+ scanWay = {
+ type: 'app_scan',
+ label: '鎵爜鐧诲綍',
+ sort: 3
+ }
+ loginWays.push(scanWay)
}
})
+ loginWays.sort((a, b) => a.sort - b.sort)
+
this.setState({
- smsId: smsId,
- loginWays: _loginWays,
- activeKey: _loginWays[0].type,
+ loginWays: loginWays,
+ activeWay: loginWays[0],
+ scanWay
})
}
UNSAFE_componentWillReceiveProps (nextProps) {
- if (!is(fromJS(this.props.loginWays), fromJS(nextProps.loginWays))) {
- let smsId = ''
- let _loginWays = []
- nextProps.loginWays.forEach(item => {
- if (item.type === 'sms_vcode') {
- smsId = item.smsId
- _loginWays.push(item)
- } else if (item.type === 'uname_pwd') {
- _loginWays.push(item)
+ const { wrap } = this.props
+
+ if (!is(fromJS(wrap), fromJS(nextProps.wrap))) {
+ let scanWay = null
+ let loginWays = []
+ nextProps.wrap.loginWays.forEach(way => {
+ if (way === 'sms_vcode') {
+ loginWays.push({
+ type: 'sms_vcode',
+ label: '鐭俊鐧诲綍',
+ tempId: wrap.tempId,
+ sort: 2
+ })
+ } else if (way === 'uname_pwd') {
+ loginWays.push({
+ type: 'uname_pwd',
+ label: '璐﹀彿鐧诲綍',
+ shortcut: wrap.shortcut,
+ sort: 1
+ })
+ } else if (way === 'app_scan') {
+ scanWay = {
+ type: 'app_scan',
+ label: '鎵爜鐧诲綍',
+ sort: 3
+ }
+ loginWays.push(scanWay)
}
})
+ loginWays.sort((a, b) => a.sort - b.sort)
this.setState({
- smsId: smsId,
- loginWays: _loginWays,
- activeKey: _loginWays[0].type
+ loginWays: loginWays,
+ activeWay: loginWays[0],
+ scanWay
})
}
}
- onChangeTab = (activeKey) => {
- this.setState({activeKey})
+ onChangeTab = (activeWay) => {
+ this.setState({activeWay})
+ }
+
+ changeMenu = () => {
+ const { wrap } = this.props
+
+ if (!wrap.linkmenu) {
+ notification.warning({
+ top: 92,
+ message: '璇疯缃叧鑱旇彍鍗曪紒',
+ duration: 5
+ })
+ return
+ }
+
+ MKEmitter.emit('changeEditMenu', {
+ MenuID: wrap.linkmenu,
+ copyMenuId: '',
+ MenuNo: '',
+ MenuName: ''
+ })
}
/**
@@ -78,49 +136,77 @@
}
render() {
- const { activeKey, verdisabled, loginWays } = this.state
+ const { wrap } = this.props
+ const { activeWay, loginWays, scanWay } = this.state
+
+ let style = {}
+ if (wrap.borderRadius) {
+ style.borderRadius = wrap.borderRadius
+ }
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>
+ {wrap.topTip !== 'hidden' ? <div className="login-way-title">{activeWay.label}</div> : null}
+ {scanWay && activeWay.type !== 'app_scan' ? <div className="scan-icon" onClick={() => this.onChangeTab(scanWay)}><QrcodeOutlined /></div> : null}
+ {activeWay.type === 'uname_pwd' ? <div className={'form-item-wrap ' + (activeWay.shortcut === 'none' ? 'no-short' : '')}>
+ <Form.Item>
<Input
- prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
- placeholder="鐢ㄦ埛鍚�"
+ prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
+ placeholder="鐢ㄦ埛鍚�/鎵嬫満鍙�/閭"
autoComplete="off"
/>
+ </Form.Item>
+ <Form.Item>
+ <Input.Password placeholder="瀵嗙爜" visibilityToggle={wrap.vispwd !== 'false'} prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />} />
+ </Form.Item>
+ {!activeWay.shortcut || activeWay.shortcut === 'remember' ? <Form.Item className="minline">
+ <Checkbox>璁颁綇瀵嗙爜</Checkbox>
</Form.Item> : null}
- {activeKey === 'uname_pwd' ? <Form.Item>
- <Input.Password placeholder="瀵嗙爜" prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} />
+ {activeWay.shortcut === 'autologon' ? <Form.Item className="minline">
+ <Checkbox>鑷姩鐧诲綍</Checkbox>
</Form.Item> : null}
- {activeKey === 'sms_vcode' ? <Form.Item>
+ <Form.Item className="btn-login">
+ <Button type="primary" style={style} 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" style={style} onDoubleClick={() => this.changeMenu()} className="login-form-button">
鐧诲綍
</Button>
- </Form.Item> : null}
+ </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}
+ {wrap.classify !== 'login' ? <span className="mk-jump-way" onClick={() => this.props.changeway()}>娌℃湁璐﹀彿锛屽幓娉ㄥ唽锛�</span> : null}
+ <div className={'login-ways ' + (activeWay.type === 'app_scan' ? 'center' : '')}>
+ {loginWays.map(item => {
+ if (item.type === 'app_scan' || activeWay.type === item.type) return null
+ return (<span key={item.type} onClick={() => this.onChangeTab(item)}>{item.label}</span>)
+ })}
</div>
</Form>
)
--
Gitblit v1.8.0