From 400fee62fb40006a9839f1c3a8244b82566b5057 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期四, 08 五月 2025 16:30:39 +0800 Subject: [PATCH] Merge branch 'develop' --- src/views/login/loginform.jsx | 245 +++++++++++++++++++++++++++++++++--------------- 1 files changed, 169 insertions(+), 76 deletions(-) diff --git a/src/views/login/loginform.jsx b/src/views/login/loginform.jsx index 1645257..508acd3 100644 --- a/src/views/login/loginform.jsx +++ b/src/views/login/loginform.jsx @@ -1,6 +1,6 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { Form, Input, Button, Checkbox, Select, Modal, message, AutoComplete } from 'antd' +import { Form, Input, Button, Checkbox, Select, Modal, message, AutoComplete, Tooltip } from 'antd' import { UserOutlined, LockOutlined, QrcodeOutlined, RedoOutlined, CloseCircleOutlined } from '@ant-design/icons' import md5 from 'md5' import moment from 'moment' @@ -9,26 +9,39 @@ import Utils from '@/utils/utils.js' import options from '@/store/options.js' import asyncLoadComponent from '@/utils/asyncLoadComponent' +import wxicon from '@/assets/img/wx-icon.png' import './index.scss' const { warning } = Modal let LoginVerCodeTimer = null const QrCode = asyncLoadComponent(() => import('@/components/qrcode')) +const CheckWrap = ({checked, prolType, onChange, prolCont}) => { + const change = (e) => { + onChange(e.target.checked) + + if (prolType === 'once') { + localStorage.setItem(window.GLOB.sysSign + 'protocol', e.target.checked) + } + } + + return ( + <> + <Checkbox defaultChecked={checked} onChange={change} style={{marginRight: '8px'}}></Checkbox> + <span dangerouslySetInnerHTML={{__html: prolCont}}></span> + </> + ) +} + 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 = { @@ -37,24 +50,38 @@ username: '', password: '', remember: true, + protocol: null, delay: null, loginWays: [], smsId: '', 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 + scanParam = null UNSAFE_componentWillMount () { - const { loginWays } = this.props + const { loginWays, prolType } = this.props + + let protocol = null + + if (prolType === 'once') { + protocol = localStorage.getItem(window.GLOB.sysSign + 'protocol') === 'true' + } else if (prolType === 'every_time') { + protocol = false + } + 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) { @@ -64,23 +91,28 @@ let smsId = '' let hasScan = false let _loginWays = [] + let wayLabels = {app_scan: 'APP鎵爜', weixin_scan: '寰俊鎵爜', uname_pwd: '璐﹀彿鐧诲綍', sms_vcode: '鐭俊鐧诲綍'} + loginWays.forEach(item => { + item.label = window.GLOB.dict[item.type] || wayLabels[item.type] + wayLabels[item.type] = item.label 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 + } else if (item.type === 'weixin_scan') { _loginWays.push(item) hasScan = true } }) let activeKey = _loginWays[0].type - - let users = localStorage.getItem(_url + 'users') + + let users = localStorage.getItem(window.GLOB.sysSign + 'users') let _user = null if (users) { @@ -93,24 +125,26 @@ users = [] } - if (users[0]) { + if (users[0] && activeKey === 'uname_pwd') { _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() : '', + scanId: activeKey === 'app_scan' || activeKey === 'weixin_scan' ? Utils.getuuid() : '', timeout: false, remember, + protocol, + wayLabels, hasScan }) - if (activeKey === 'app_scan') { + if (activeKey === 'app_scan' || activeKey === 'weixin_scan') { this.splitTime = 0 this.timer = setTimeout(() => { this.checkResult() @@ -119,9 +153,10 @@ } checkResult = () => { - const { scanId } = this.state + const { scanId, protocol, dict } = this.state this.splitTime += 10000 + this.scanParam = null let _param = { func: 'webapi_get_binding_key', @@ -145,6 +180,14 @@ message.warning(res.message) return } else if (res.thd_party_appid && res.thd_party_member_id && res.thd_party_openid) { + if (protocol === false) { + this.scanParam = { + ...res, + scanId + } + message.warning(dict['protocol_check'] || '璇烽槄璇诲苟鍚屾剰鍗忚锛�') + return + } this.props.authLogin(res.thd_party_appid, res.thd_party_openid, res.thd_party_member_id, scanId) } else { this.timer = setTimeout(() => { @@ -155,17 +198,20 @@ } handleConfirm = () => { - const { activeKey } = this.state + const { activeKey, protocol } = this.state + + if (protocol === false) return Promise.reject() + // 琛ㄥ崟鎻愪氦鏃舵鏌ヨ緭鍏ュ�兼槸鍚︽纭� 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, '') + 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, '') + values.phone = values.phone.replace(/\t+|\v+|\s+/g, '') + values.vercode = values.vercode.replace(/\t+|\v+|\s+/g, '') } resolve({type: activeKey, ...values}) } else { @@ -175,19 +221,21 @@ }) } - 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 { activeKey, 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() {} }) @@ -234,14 +282,20 @@ } } - onChangeTab = (activeKey) => { - this.setState({activeKey, scanId: activeKey === 'app_scan' ? Utils.getuuid() : ''}) + onChangeTab = (key) => { + const { activeKey, loginWays } = this.state - if (this.state.activeKey === 'app_scan') { + if (key === 'scan') { + key = loginWays.filter(item => item.type === 'app_scan' || item.type === 'weixin_scan')[0].type + } + + this.setState({activeKey: key, scanId: key === 'app_scan' || key === 'weixin_scan' ? Utils.getuuid() : ''}) + + if (activeKey === 'app_scan' || activeKey === 'weixin_scan') { this.timer && clearTimeout(this.timer) } - if (activeKey === 'app_scan') { + if (key === 'app_scan' || key === 'weixin_scan') { this.splitTime = 0 this.setState({timeout: false}) this.timer = setTimeout(() => { @@ -261,16 +315,16 @@ } 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 } @@ -378,9 +432,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) => { @@ -408,9 +461,15 @@ this.setState({users: _users}) - let _url = window.location.href.split('#')[0] + localStorage.setItem(window.GLOB.sysSign + 'users', window.btoa(window.encodeURIComponent(JSON.stringify(_users)))) + } - localStorage.setItem(_url + '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) + } } /** @@ -424,18 +483,18 @@ } render() { + const { langList, isDisabled, prolType, prolCont } = 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 { activeKey, verdisabled, delay, loginWays, remember, scanId, timeout, hasScan, users, wayLabels, dict, lang, vispwd, protocol } = 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} + {hasScan && activeKey !== 'app_scan' && activeKey !== 'weixin_scan' ? <div className="scan-icon" onClick={() => this.onChangeTab('scan')}><QrcodeOutlined /></div> : null} {activeKey === 'uname_pwd' ? <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 @@ -452,7 +511,7 @@ > <Input prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />} - placeholder={this.props.dict['login.username']} + placeholder={dict['username'] || '鐢ㄦ埛鍚�'} autoComplete="off" /> </AutoComplete> @@ -464,37 +523,44 @@ 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>} - {this.props.langList && this.props.langList.length > 0 ? <Form.Item className="minline right"> + {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} + {prolType ? <Form.Item className="proline"> + <CheckWrap checked={protocol} onChange={(val) => this.setState({protocol: val})} prolCont={prolCont} prolType={prolType}/> + </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> + {protocol === false ? <Tooltip overlayStyle={{maxWidth: 500}} placement="top" trigger="click" title={dict['protocol_check'] || '璇烽槄璇诲苟鍚屾剰鍗忚锛�'}> + <Button type="primary" htmlType="submit" className="login-form-button disabled"> + {dict['log_in'] || '鐧诲綍'} + </Button> + </Tooltip> : <Button type="primary" htmlType="submit" className="login-form-button" disabled={isDisabled} loading={isDisabled}> + {dict['log_in'] || '鐧诲綍'} + </Button>} </Form.Item> - {options.sysType === 'cloud' && options.cdomain.indexOf('mk9h') > -1 ? <Form.Item className="register-line"> + {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} @@ -502,11 +568,11 @@ {activeKey === 'sms_vcode' ? <div className="form-item-wrap"> <Form.Item> {getFieldDecorator('phone', { - rules: [{ required: true, message: this.props.dict['login.phone.empty'] }], + rules: [{ required: true, message: dict['phone_no_required'] || '璇疯緭鍏ユ墜鏈哄彿' }], initialValue: '', })( <Input - placeholder={this.props.dict['login.phone']} + placeholder={dict['phone_no'] || '鎵嬫満鍙�'} autoComplete="off" /> )} @@ -517,43 +583,65 @@ rules: [ { required: true, - message: this.props.dict['login.vercode.empty'], + message: dict['vercode_required'] || '璇疯緭鍏ラ獙璇佺爜', } ] })( <Input addonAfter={ <Button type="link" className="vercode" size="small" disabled={verdisabled} onClick={this.getvercode}> - {delay ? `${delay}s鍚庨噸鏂拌幏鍙朻 : '鑾峰彇楠岃瘉鐮�'} + {delay ? `${delay}s` : dict['query_vercode'] || '鑾峰彇楠岃瘉鐮�'} </Button> } - placeholder={this.props.dict['login.vercode']} + placeholder={dict['vercode'] || '楠岃瘉鐮�'} autoComplete="off" /> )} </Form.Item> - {this.props.langList && this.props.langList.length > 0 ? <Form.Item className="minline right"> + {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} + {prolType ? <Form.Item className="proline"> + <CheckWrap checked={protocol} onChange={(val) => this.setState({protocol: val})} prolCont={prolCont} prolType={prolType}/> + </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> + {protocol === false ? <Tooltip overlayStyle={{maxWidth: 500}} placement="top" trigger="click" title={dict['protocol_check'] || '璇烽槄璇诲苟鍚屾剰鍗忚锛�'}> + <Button type="primary" htmlType="submit" className="login-form-button disabled"> + {dict['log_in'] || '鐧诲綍'} + </Button> + </Tooltip> : <Button type="primary" htmlType="submit" className="login-form-button" disabled={isDisabled} loading={isDisabled}> + {dict['log_in'] || '鐧诲綍'} + </Button>} </Form.Item> - {options.sysType === 'cloud' && options.cdomain.indexOf('mk9h') > -1 ? <Form.Item className="register-line"> + {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 === 'weixin_scan' ? <div className="form-item-wrap"> + <div className="form-scan-wrap"> + <div className="qr-wrap"> + {scanId ? <QrCode card={{qrWidth: 500, color: '#000000'}} value={`https://cloud.mk9h.cn/mob/mknotice.html?originurl=${window.btoa(window.GLOB.baseurl + 'mob/index.html#/wx/' + scanId)}`}/> : null} + {timeout ? <div className="qrcode-out"> + <RedoOutlined onClick={this.reCode} /> + {dict['code_expired'] || '浜岀淮鐮佸凡澶辨晥銆�'} + </div> : null} + </div> + <img src={wxicon} alt=""/>{dict['wechat_scan'] || '璇蜂娇鐢ㄥ井淇℃壂涓�鎵櫥褰�'} + </div> + {prolType ? <Form.Item className="proline"> + <CheckWrap checked={protocol} onChange={this.changeAgree} prolCont={prolCont} prolType={prolType}/> </Form.Item> : null} </div> : null} {activeKey === 'app_scan' ? <div className="form-item-wrap"> @@ -562,15 +650,20 @@ {scanId ? <QrCode card={{qrWidth: 500, color: '#000000'}} value={`mkpcscan,${window.GLOB.appkey},${scanId}`}/> : null} {timeout ? <div className="qrcode-out"> <RedoOutlined onClick={this.reCode} /> - 浜岀淮鐮佸凡澶辨晥銆� + {dict['code_expired'] || '浜岀淮鐮佸凡澶辨晥銆�'} </div> : null} </div> - 璇蜂娇鐢ㄥ鎴风鎵竴鎵櫥褰� + {dict['client_scan'] || '璇蜂娇鐢ㄥ鎴风鎵竴鎵櫥褰�'} </div> + {prolType ? <Form.Item className="proline"> + <CheckWrap checked={protocol} onChange={this.changeAgree} prolCont={prolCont} prolType={prolType}/> + </Form.Item> : null} </div> : null} - <div className={'login-ways ' + (activeKey === 'app_scan' ? 'center' : '')}> + <div className={'login-ways ' + (activeKey === 'app_scan' || activeKey === 'weixin_scan' ? 'center' : '')}> {loginWays.map(item => { - if (item.type === 'app_scan' || activeKey === item.type) return null + if (activeKey === item.type) return null + if (item.type === 'app_scan' && activeKey !== 'weixin_scan') return null + if (item.type === 'weixin_scan' && activeKey !== 'app_scan') return null return (<span key={item.type} onClick={() => this.onChangeTab(item.type)}>{item.label}</span>) })} </div> -- Gitblit v1.8.0