From 1a176e4bdba485301385caac1a29102e598d25cc Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期二, 13 五月 2025 11:32:02 +0800 Subject: [PATCH] 2025-05-13 --- src/views/login/loginform.jsx | 436 ++++++++++++++++++++++------------------------------- 1 files changed, 183 insertions(+), 253 deletions(-) diff --git a/src/views/login/loginform.jsx b/src/views/login/loginform.jsx index 068518f..c6a0824 100644 --- a/src/views/login/loginform.jsx +++ b/src/views/login/loginform.jsx @@ -1,135 +1,106 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { Form, Icon, Input, Button, Checkbox, Select, Modal, message } from 'antd' +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, - changelang: PropTypes.func, 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, - platName: PropTypes.string + loginWays: PropTypes.array } state = { - activeKey: 'uname_pwd', - scanId: '', username: '', password: '', remember: true, + protocol: null, delay: null, loginWays: [], smsId: '', verdisabled: false, - timeout: false + hasScan: false, + timeout: false, + 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(_url + 'remember') === 'false') { + if (localStorage.getItem(window.GLOB.sysSign + 'remember') === 'false') { + remember = false + } + if (!window.GLOB.keepKey) { remember = false } 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) - } else if (item.type === 'app_scan') { - _loginWays.push(item) - } - }) + // 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(window.GLOB.sysSign + 'users') + let _user = null + + if (users) { + try { + users = JSON.parse(window.decodeURIComponent(window.atob(users))) + } catch (e) { + users = [] + } + } else { + users = [] + } this.setState({ + users: users, + username: _user ? _user.username : '', + password: _user ? _user.password : '', smsId: smsId, - loginWays: _loginWays, - activeKey, - scanId: activeKey === 'app_scan' ? Utils.getuuid() : '', - timeout: false, remember - }) - - 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) - } }) } handleConfirm = () => { - const { activeKey } = this.state // 琛ㄥ崟鎻愪氦鏃舵鏌ヨ緭鍏ュ�兼槸鍚︽纭� return new Promise((resolve, reject) => { this.props.form.validateFieldsAndScroll((err, values) => { if (!err) { - 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) } @@ -137,124 +108,62 @@ }) } - changelang = (item) => { - this.props.changelang(item) + changelang = (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.preventDefault() + 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 input = document.getElementById('username') - 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() } } componentDidMount () { - let _url = window.location.href.split('#')[0] - let _user = localStorage.getItem(_url) - - if (_user) { - try { - _user = JSON.parse(window.decodeURIComponent(window.atob(_user))) - } catch (e) { - console.warn('Parse Failure') - _user = '' - } + const wrap = document.getElementById('username') + const input = wrap ? wrap.getElementsByTagName('input')[0] : null + if (input) { + input.focus() } - - if (_user) { - this.setState({ - username: _user.username, - password: _user.password - }, () => { - const input = document.getElementById('username') - if (input) { - input.focus() - } - }) - } else { - const input = document.getElementById('username') - if (input) { - input.focus() - } - } - } - - 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 } @@ -289,7 +198,7 @@ param.LText = md5(`${_phone}mingke${window.GLOB.appkey}${param.timestamp}`) param.secretkey = md5(`${param.LText}mingke${param.timestamp}`) - param.rduri = 'http://sso.mk9h.cn/webapi/dostars' + param.rduri = 'https://sso.mk9h.cn/webapi/dostars' param.userid = 'bh0bapabtd45epsgra79segbch6c1ibk' param.LoginUID = 'bh0bapabtd45epsgra79segbch6c1ibk' @@ -299,7 +208,7 @@ }) LoginVerCodeTimer = setTimeout(this.resetVerCodeDelay, 1000) - Api.getLocalConfig(param).then(res => { + Api.genericInterface(param).then(res => { if (res.status) { } else { @@ -312,7 +221,30 @@ }) message.warning(res.message) } - }, () => { + }, (error) => { + if (error && error.ErrCode === 'LoginError') { + let param = { + func: 's_visitor_login', + timestamp: moment().format('YYYY-MM-DD HH:mm:ss'), + SessionUid: 'bh0bapabtd45epsgra79segbch6c1ibk', + TypeCharOne: 'pc', + appkey: '202004041613277377A6A2456D34A4948AE84' + } + + param.LText = md5(window.btoa('bh0bapabtd45epsgra79segbch6c1ibk' + param.timestamp)) + param.secretkey = md5(param.LText + 'mingke' + param.timestamp) + + let params = { + url: 'https://sso.mk9h.cn/webapi/dologon', + method: 'post', + data: JSON.stringify(param) + } + + Api.directRequest(params) + + return + } + if (LoginVerCodeTimer) { clearTimeout(LoginVerCodeTimer) } @@ -339,9 +271,44 @@ 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) => { + const { users } = this.state + + let user = users.filter(m => m.username === val)[0] + let password = user && user.password ? user.password : '' + + this.props.form.setFieldsValue({password: password}) + + if (!password) { + const input = document.getElementById('password') + if (input) { + input.focus() + } + } + } + + deleteUser = (e, val) => { + const { users } = this.state + + e.stopPropagation() + + let _users = users.filter(m => m.username !== val) + + this.setState({users: _users}) + + localStorage.setItem(window.GLOB.sysSign + 'users', window.btoa(window.encodeURIComponent(JSON.stringify(_users)))) + } + + changeAgree = (val) => { + this.setState({protocol: val}) + + if (this.scanParam && val) { + this.props.authLogin(this.scanParam.thd_party_appid, this.scanParam.thd_party_openid, this.scanParam.thd_party_member_id, this.scanParam.scanId) + } } /** @@ -351,115 +318,78 @@ this.setState = () => { return } - this.timer && clearTimeout(this.timer) } render() { + const { langList, isDisabled } = this.props const { getFieldDecorator } = this.props.form - const { activeKey, verdisabled, delay, loginWays, remember, scanId, timeout } = this.state + const { remember, users, dict, lang, vispwd } = this.state return ( - <Form className="login-form" id="login-form" onSubmit={this.handleSubmit}> - <div className={'login-way-wrap ' + (loginWays.length === 1 ? 'simple' : '')}> - {loginWays.map(item => ( - <div className={'login-way' + (activeKey === item.type ? ' active' : '')} onClick={() => this.onChangeTab(item.type)} key={item.type}>{item.label}</div> - ))} - </div> + <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"> - {activeKey === 'uname_pwd' ? <Form.Item> + <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 || '', })( - <Input - prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} - placeholder={this.props.dict['login.username']} - autoComplete="off" - />, + <AutoComplete + className + dataSource={users.map((cell, i) => <AutoComplete.Option className="mk-user-option" value={cell.username} key={i}> + {cell.username} + <CloseCircleOutlined onClick={(e) => this.deleteUser(e, cell.username)}/> + </AutoComplete.Option>)} + filterOption={false} + onSelect={this.complete} + defaultActiveFirstOption={false} + defaultOpen={false} + optionLabelProp="value" + > + <Input + prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />} + placeholder={dict['username'] || '鐢ㄦ埛鍚�'} + autoComplete="off" + /> + </AutoComplete> )} - </Form.Item> : null} - {activeKey === 'uname_pwd' ? <Form.Item> + </Form.Item> + <Form.Item> {getFieldDecorator('password', { initialValue: this.state.password || '', rules: [ { required: true, - message: this.props.dict['login.password.empty'], + message: dict['password_required'] || '璇疯緭鍏ュ瘑鐮�', } ] - })(<Input.Password placeholder={this.props.dict['login.password']} prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} />)} - </Form.Item> : null} - {activeKey === 'sms_vcode' ? <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> : null} - {activeKey === 'sms_vcode' ? <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 ? this.props.dict['login.vercode.queryagain'].replace('@', delay) : this.props.dict['login.vercode.query']} - </Button> - } - placeholder={this.props.dict['login.vercode']} - autoComplete="off" - /> - )} - </Form.Item> : null} - {activeKey === 'uname_pwd' ? <Form.Item className="minline"> + })(<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>)} - </Form.Item> : null} - {activeKey !== 'app_scan' && this.props.langList && this.props.langList.length > 0 ? <Form.Item className="minline right"> + })(<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)}} getPopupContainer={() => document.getElementById('login-form')} > - {this.props.langList.map((item, index) => { + {langList.map((item, index) => { return <Select.Option key={index} value={item.Lang}>{item.LangName}</Select.Option> })} </Select> )} </Form.Item> : null} - {['uname_pwd', 'sms_vcode'].includes(activeKey) ? <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']} + <Form.Item className="btn-login"> + <Button type="primary" htmlType="submit" className="login-form-button" disabled={isDisabled} loading={isDisabled}> + {dict['log_in'] || '鐧诲綍'} </Button> - </Form.Item> : null} - {activeKey === 'app_scan' ? <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"> - <Icon onClick={this.reCode} type="redo" /> - 浜岀淮鐮佸凡澶辨晥銆� - </div> : null} - </div> - 璇蜂娇鐢ㄥ鎴风鎵竴鎵櫥褰� - </div> : null} - {options.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} + </Form.Item> </div> </Form> ) -- Gitblit v1.8.0