From 6ca240a14ccf55d4e0a94fff77e95f64db2cdfcc Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 11 十月 2024 17:34:25 +0800
Subject: [PATCH] 2024-10-11
---
src/views/login/loginform.jsx | 333 ++++++++++++-------------------------------------------
1 files changed, 72 insertions(+), 261 deletions(-)
diff --git a/src/views/login/loginform.jsx b/src/views/login/loginform.jsx
index 057d84b..067b948 100644
--- a/src/views/login/loginform.jsx
+++ b/src/views/login/loginform.jsx
@@ -1,37 +1,28 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
-import { Form, Input, Button, Checkbox, Select, Modal, message, AutoComplete } from 'antd'
-import { UserOutlined, LockOutlined, QrcodeOutlined, RedoOutlined, CloseCircleOutlined } from '@ant-design/icons'
+import { Form, Input, Button, Checkbox, Modal, message, AutoComplete, Select } from 'antd'
+import { UserOutlined, LockOutlined, CloseCircleOutlined } from '@ant-design/icons'
import md5 from 'md5'
import moment from 'moment'
import Api from '@/api'
-import Utils from '@/utils/utils.js'
-import options from '@/store/options.js'
-import asyncLoadComponent from '@/utils/asyncLoadComponent'
import './index.scss'
const { warning } = Modal
let LoginVerCodeTimer = null
-const QrCode = asyncLoadComponent(() => import('@/components/qrcode'))
class LoginTabForm extends Component {
static propTpyes = {
isDisabled: PropTypes.bool,
handleSubmit: PropTypes.func,
authLogin: PropTypes.func,
- dict: PropTypes.object,
auth: PropTypes.bool,
authError: PropTypes.string,
- touristLogin: PropTypes.bool,
- lang: PropTypes.string,
langList: PropTypes.array,
loginWays: PropTypes.array
}
state = {
- activeKey: 'uname_pwd',
- scanId: '',
username: '',
password: '',
remember: true,
@@ -41,18 +32,23 @@
verdisabled: false,
hasScan: false,
timeout: false,
- users: []
+ vispwd: window.GLOB.vispwd,
+ wayLabels: {},
+ dict: window.GLOB.dict,
+ users: [],
+ lang: sessionStorage.getItem('lang')
}
- timer = null
- splitTime = 0
-
UNSAFE_componentWillMount () {
- const { loginWays } = this.props
let remember = true
- let _url = window.location.href.split('#')[0]
+
+ if (localStorage.getItem(window.location.href.split('#')[0] + 'users')) { // 杩囨浮
+ localStorage.setItem(window.GLOB.sysSign + 'users', localStorage.getItem(window.location.href.split('#')[0] + 'users'))
+ localStorage.setItem(window.GLOB.sysSign + 'remember', localStorage.getItem(window.location.href.split('#')[0] + 'remember'))
+ localStorage.removeItem(window.location.href.split('#')[0] + 'users')
+ }
- if (localStorage.getItem(_url + 'remember') === 'false') {
+ if (localStorage.getItem(window.GLOB.sysSign + 'remember') === 'false') {
remember = false
}
if (!window.GLOB.keepKey) {
@@ -60,25 +56,26 @@
}
let smsId = ''
- let hasScan = false
- let _loginWays = []
- loginWays.forEach(item => {
- if (item.type === 'sms_vcode') {
- item.label = '鐭俊鐧诲綍'
- smsId = item.smsId
- _loginWays.push(item)
- } else if (item.type === 'uname_pwd') {
- item.label = '璐﹀彿鐧诲綍'
- _loginWays.push(item)
- } else if (item.type === 'app_scan') {
- _loginWays.push(item)
- hasScan = true
- }
- })
+ // let wayLabels = {app_scan: 'APP鎵爜', weixin_scan: '寰俊鎵爜', uname_pwd: '璐﹀彿鐧诲綍', sms_vcode: '鐭俊鐧诲綍'}
- let activeKey = _loginWays[0].type
+ // loginWays.forEach(item => {
+ // item.label = window.GLOB.dict[item.type] || wayLabels[item.type]
+ // wayLabels[item.type] = item.label
+ // if (item.type === 'sms_vcode') {
+ // smsId = item.smsId
+ // _loginWays.push(item)
+ // } else if (item.type === 'uname_pwd') {
+ // _loginWays.push(item)
+ // } else if (item.type === 'app_scan') {
+ // _loginWays.push(item)
+ // hasScan = true
+ // } else if (item.type === 'weixin_scan') {
+ // _loginWays.push(item)
+ // hasScan = true
+ // }
+ // })
- let users = localStorage.getItem(_url + 'users')
+ let users = localStorage.getItem(window.GLOB.sysSign + 'users')
let _user = null
if (users) {
@@ -91,81 +88,24 @@
users = []
}
- if (users[0]) {
- _user = users[0]
- }
-
this.setState({
users: users,
- username: activeKey === 'uname_pwd' && _user ? _user.username : '',
- password: activeKey === 'uname_pwd' && _user ? _user.password : '',
+ username: _user ? _user.username : '',
+ password: _user ? _user.password : '',
smsId: smsId,
- loginWays: _loginWays,
- activeKey,
- scanId: activeKey === 'app_scan' ? Utils.getuuid() : '',
- timeout: false,
- remember,
- hasScan
- })
-
- if (activeKey === 'app_scan') {
- this.splitTime = 0
- this.timer = setTimeout(() => {
- this.checkResult()
- }, 10000)
- }
- }
-
- checkResult = () => {
- const { scanId } = this.state
-
- this.splitTime += 10000
-
- let _param = {
- func: 'webapi_get_binding_key',
- scan_type: 'pc',
- id: scanId,
- UserName: ''
- }
-
- _param.userid = sessionStorage.getItem('visitorUserID')
- _param.LoginUID = sessionStorage.getItem('visitorLoginUID')
-
- if (this.splitTime >= 180000) {
- this.setState({
- timeout: true
- })
- return
- }
-
- Api.getSystemConfig(_param).then(res => {
- if (!res.status) {
- message.warning(res.message)
- return
- } else if (res.thd_party_appid && res.thd_party_member_id && res.thd_party_openid) {
- this.props.authLogin(res.thd_party_appid, res.thd_party_openid, res.thd_party_member_id, scanId)
- } else {
- this.timer = setTimeout(() => {
- this.checkResult()
- }, 10000)
- }
+ remember
})
}
handleConfirm = () => {
- const { activeKey } = this.state
// 琛ㄥ崟鎻愪氦鏃舵鏌ヨ緭鍏ュ�兼槸鍚︽纭�
return new Promise((resolve, reject) => {
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
- if (activeKey === 'uname_pwd') {
- values.username = values.username.replace(/\t+|\v+|\s+/g, '')
- values.password = values.password.replace(/\t+|\v+|\s+/g, '')
- } else if (activeKey === 'sms_vcode') {
- values.phone = values.phone.replace(/\t+|\v+|\s+/g, '')
- values.vercode = values.vercode.replace(/\t+|\v+|\s+/g, '')
- }
- resolve({type: activeKey, ...values})
+ values.username = values.username.replace(/\t+|\v+|\s+/g, '')
+ values.password = values.password.replace(/\t+|\v+|\s+/g, '')
+
+ resolve({type: 'uname_pwd', ...values})
} else {
reject(err)
}
@@ -174,57 +114,39 @@
}
changelang = (val) => {
- const _href = window.location.href.split('#')[0]
- localStorage.setItem(_href + 'lang', val)
+ localStorage.setItem(window.location.href.split('#')[0] + 'lang', val)
sessionStorage.setItem('lang', val)
window.location.reload()
}
handleSubmit = e => {
- const { activeKey } = this.state
+ const { dict } = this.state
// 鐧诲綍鍙傛暟妫�楠�
e && e.preventDefault()
if (!this.props.auth) {
warning({
- title: this.props.authError || this.props.dict['login.auth.tip'],
- okText: this.props.dict['login.ok'],
- cancelText: this.props.dict['login.cancel'],
+ title: this.props.authError || dict['auth_tip'] || '绯荤粺鏈巿鏉冿紝璇疯仈绯荤鐞嗗憳銆�',
+ okText: dict['got_it'] || '鐭ラ亾浜�',
onOk() {},
onCancel() {}
})
return
}
- if (activeKey === 'uname_pwd') {
- if (!this.props.form.getFieldValue('username')) {
- const wrap = document.getElementById('username')
- const input = wrap ? wrap.getElementsByTagName('input')[0] : null
- if (input) {
- input.focus()
- }
- } else if (!this.props.form.getFieldValue('password')) {
- const input = document.getElementById('password')
- if (input) {
- input.focus()
- }
- } else {
- this.props.handleSubmit()
+ if (!this.props.form.getFieldValue('username')) {
+ const wrap = document.getElementById('username')
+ const input = wrap ? wrap.getElementsByTagName('input')[0] : null
+ if (input) {
+ input.focus()
}
- } else if (activeKey === 'sms_vcode') {
- if (!this.props.form.getFieldValue('phone')) {
- const input = document.getElementById('phone')
- if (input) {
- input.focus()
- }
- } else if (!this.props.form.getFieldValue('vercode')) {
- const input = document.getElementById('vercode')
- if (input) {
- input.focus()
- }
- } else {
- this.props.handleSubmit()
+ } else if (!this.props.form.getFieldValue('password')) {
+ const input = document.getElementById('password')
+ if (input) {
+ input.focus()
}
+ } else {
+ this.props.handleSubmit()
}
}
@@ -236,43 +158,17 @@
}
}
- onChangeTab = (activeKey) => {
- this.setState({activeKey, scanId: activeKey === 'app_scan' ? Utils.getuuid() : ''})
-
- if (this.state.activeKey === 'app_scan') {
- this.timer && clearTimeout(this.timer)
- }
-
- if (activeKey === 'app_scan') {
- this.splitTime = 0
- this.setState({timeout: false})
- this.timer = setTimeout(() => {
- this.checkResult()
- }, 10000)
- }
- }
-
- reCode = () => {
- this.splitTime = 0
-
- this.setState({timeout: false, scanId: Utils.getuuid()})
-
- this.timer = setTimeout(() => {
- this.checkResult()
- }, 10000)
- }
-
getvercode = () => {
- const { smsId } = this.state
+ const { smsId, dict } = this.state
let _phone = this.props.form.getFieldValue('phone')
if (!_phone) {
- message.warning('璇疯緭鍏ユ墜鏈哄彿锛�')
+ message.warning(dict['phone_no_required'] || '璇疯緭鍏ユ墜鏈哄彿锛�')
return
} else if (!/^1[3456789]\d{9}$/.test(_phone)) {
- message.warning('鎵嬫満鍙锋牸寮忛敊璇紝璇烽噸濉紒')
+ message.warning(dict['phone_error'] || '鎵嬫満鍙锋牸寮忛敊璇紝璇烽噸濉紒')
return
- } else if (!this.props.touristLogin) {
- message.warning('鏈幏鍙栭獙璇佺爜璁剧疆锛岃绋嶅悗鎴栧埛鏂伴噸璇曪紒')
+ } else if (!sessionStorage.getItem('visitorUserID') || !sessionStorage.getItem('visitorLoginUID')) {
+ message.warning(dict['vercode_error'] || '鏈幏鍙栭獙璇佺爜璁剧疆锛岃绋嶅悗鎴栧埛鏂伴噸璇曪紒')
return
}
@@ -380,9 +276,8 @@
rememberChange = (e) => {
let val = e.target.checked
- let _url = window.location.href.split('#')[0]
- localStorage.setItem(_url + 'remember', val)
+ localStorage.setItem(window.GLOB.sysSign + 'remember', val)
}
complete = (val) => {
@@ -410,9 +305,7 @@
this.setState({users: _users})
- let _url = window.location.href.split('#')[0]
-
- localStorage.setItem(_url + 'users', window.btoa(window.encodeURIComponent(JSON.stringify(_users))))
+ localStorage.setItem(window.GLOB.sysSign + 'users', window.btoa(window.encodeURIComponent(JSON.stringify(_users))))
}
/**
@@ -422,23 +315,20 @@
this.setState = () => {
return
}
- this.timer && clearTimeout(this.timer)
}
render() {
const { langList } = this.props
const { getFieldDecorator } = this.props.form
- const { activeKey, verdisabled, delay, loginWays, remember, scanId, timeout, hasScan, users } = this.state
- const wayLabels = {app_scan: '鎵爜鐧诲綍', uname_pwd: '璐﹀彿鐧诲綍', sms_vcode: '鐭俊鐧诲綍'}
+ const { remember, users, dict, lang, vispwd } = this.state
return (
- <Form className="login-form" id="login-form" onSubmit={this.handleSubmit}>
- <div className="login-way-title">{wayLabels[activeKey]}</div>
- {hasScan && activeKey !== 'app_scan' ? <div className="scan-icon" onClick={() => this.onChangeTab('app_scan')}><QrcodeOutlined /></div> : null}
- {activeKey === 'uname_pwd' ? <div className="form-item-wrap">
+ <Form className={`login-form login-form-1`} id="login-form" onSubmit={this.handleSubmit}>
+ <p className="title">{this.props.platName}</p>
+ <div className="form-item-wrap">
<Form.Item>
{getFieldDecorator('username', {
- rules: [{ required: true, message: this.props.dict['login.username.empty'] }],
+ rules: [{ required: true, message: dict['username_required'] || '璇疯緭鍏ョ敤鎴峰悕' }],
initialValue: this.state.username || '',
})(
<AutoComplete
@@ -455,7 +345,7 @@
>
<Input
prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
- placeholder={this.props.dict['login.username']}
+ placeholder={dict['username'] || '鐢ㄦ埛鍚�'}
autoComplete="off"
/>
</AutoComplete>
@@ -467,20 +357,20 @@
rules: [
{
required: true,
- message: this.props.dict['login.password.empty'],
+ message: dict['password_required'] || '璇疯緭鍏ュ瘑鐮�',
}
]
- })(<Input.Password placeholder={this.props.dict['login.password']} prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />} />)}
+ })(<Input.Password placeholder={dict['password'] || '瀵嗙爜'} visibilityToggle={vispwd} prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />} />)}
</Form.Item>
{window.GLOB.keepKey ? <Form.Item className="minline">
{getFieldDecorator('remember', {
valuePropName: 'checked',
initialValue: remember,
- })(<Checkbox onChange={this.rememberChange}>{this.props.dict['login.remember']}</Checkbox>)}
+ })(<Checkbox onChange={this.rememberChange}>{dict['remember_me'] || '璁颁綇瀵嗙爜'}</Checkbox>)}
</Form.Item> : <div style={{height: '30px', float: 'left'}}></div>}
{langList && langList.length > 0 ? <Form.Item className="minline right">
{getFieldDecorator('lang', {
- initialValue: this.props.lang,
+ initialValue: lang,
})(
<Select
onChange={(value) => {this.changelang(value)}}
@@ -494,88 +384,9 @@
</Form.Item> : null}
<Form.Item className="btn-login">
<Button type="primary" htmlType="submit" className="login-form-button" disabled={this.props.isDisabled} loading={this.props.isDisabled}>
- {this.props.dict['login.submit']}
+ {dict['log_in'] || '鐧诲綍'}
</Button>
</Form.Item>
- {window.GLOB.sysType === 'cloud' && options.cdomain.indexOf('mk9h') > -1 ? <Form.Item className="register-line">
- <a href="http://www.minkesoft.com/signup" target="_blank" rel="noopener noreferrer" className="register">娉ㄥ唽</a>
- <a href="http://www.minkesoft.com/forgotPwd" target="_blank" rel="noopener noreferrer" className="forgot">蹇樿瀵嗙爜锛�</a>
- </Form.Item> : null}
- </div> : null}
- {activeKey === 'sms_vcode' ? <div className="form-item-wrap">
- <Form.Item>
- {getFieldDecorator('phone', {
- rules: [{ required: true, message: this.props.dict['login.phone.empty'] }],
- initialValue: '',
- })(
- <Input
- placeholder={this.props.dict['login.phone']}
- autoComplete="off"
- />
- )}
- </Form.Item>
- <Form.Item className="vercode">
- {getFieldDecorator('vercode', {
- initialValue: '',
- rules: [
- {
- required: true,
- message: this.props.dict['login.vercode.empty'],
- }
- ]
- })(
- <Input
- addonAfter={
- <Button type="link" className="vercode" size="small" disabled={verdisabled} onClick={this.getvercode}>
- {delay ? `${delay}s鍚庨噸鏂拌幏鍙朻 : '鑾峰彇楠岃瘉鐮�'}
- </Button>
- }
- placeholder={this.props.dict['login.vercode']}
- autoComplete="off"
- />
- )}
- </Form.Item>
- {langList && langList.length > 0 ? <Form.Item className="minline right">
- {getFieldDecorator('lang', {
- initialValue: this.props.lang,
- })(
- <Select
- onChange={(value) => {this.changelang(value)}}
- getPopupContainer={() => document.getElementById('login-form')}
- >
- {langList.map((item, index) => {
- return <Select.Option key={index} value={item.Lang}>{item.LangName}</Select.Option>
- })}
- </Select>
- )}
- </Form.Item> : null}
- <Form.Item className="btn-login">
- <Button type="primary" htmlType="submit" className="login-form-button" disabled={this.props.isDisabled} loading={this.props.isDisabled}>
- {this.props.dict['login.submit']}
- </Button>
- </Form.Item>
- {window.GLOB.sysType === 'cloud' && options.cdomain.indexOf('mk9h') > -1 ? <Form.Item className="register-line">
- <a href="http://www.minkesoft.com/signup" target="_blank" rel="noopener noreferrer" className="register">娉ㄥ唽</a>
- <a href="http://www.minkesoft.com/forgotPwd" target="_blank" rel="noopener noreferrer" className="forgot">蹇樿瀵嗙爜锛�</a>
- </Form.Item> : null}
- </div> : null}
- {activeKey === 'app_scan' ? <div className="form-item-wrap">
- <div className="form-scan-wrap">
- <div className="qr-wrap">
- {scanId ? <QrCode card={{qrWidth: 500, color: '#000000'}} value={`mkpcscan,${window.GLOB.appkey},${scanId}`}/> : null}
- {timeout ? <div className="qrcode-out">
- <RedoOutlined onClick={this.reCode} />
- 浜岀淮鐮佸凡澶辨晥銆�
- </div> : null}
- </div>
- 璇蜂娇鐢ㄥ鎴风鎵竴鎵櫥褰�
- </div>
- </div> : null}
- <div className={'login-ways ' + (activeKey === 'app_scan' ? 'center' : '')}>
- {loginWays.map(item => {
- if (item.type === 'app_scan' || activeKey === item.type) return null
- return (<span key={item.type} onClick={() => this.onChangeTab(item.type)}>{item.label}</span>)
- })}
</div>
</Form>
)
--
Gitblit v1.8.0