import React, { Component } from 'react'
|
import { is, fromJS } from 'immutable'
|
import { Input, Button, message } from 'antd'
|
import md5 from 'md5'
|
import moment from 'moment'
|
|
import Api from '@/api'
|
import MKEmitter from '@/utils/events.js'
|
|
// import './index.scss'
|
|
/**
|
* @description 自定义文本输入
|
*/
|
class MkVercode extends Component {
|
constructor(props) {
|
super(props)
|
|
this.state = {
|
value: ''
|
}
|
}
|
|
inputRef = React.createRef()
|
timer = null
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
handleChange = (e) => {
|
let val = e.target.value
|
val = val.replace(/\n/g, '')
|
|
this.props.onChange(val)
|
this.setState({value: val})
|
|
if (val.length === 6) {
|
setTimeout(() => {
|
this.handleInputSubmit()
|
}, 50)
|
}
|
}
|
|
handleInputSubmit = () => {
|
const { config } = this.props
|
|
if (config.enter === 'false') return
|
if (config.enter === 'tab') {
|
MKEmitter.emit('mkFC', 'focus', config.tabUuid)
|
} else {
|
MKEmitter.emit('mkFC', 'focus', config.tabUuid)
|
this.props.onSubmit()
|
}
|
}
|
|
getvercode = () => {
|
const { record, config } = this.props
|
let _phone = record[config.phoneField] || ''
|
|
if (!_phone) {
|
message.warning('请输入手机号！')
|
return
|
} else if (!/^1[3456789]\d{9}$/.test(_phone)) {
|
message.warning('手机号格式错误，请重填！')
|
return
|
}
|
|
let timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
|
let send_type = 'web_no'
|
let n_id = (() => {
|
let uuid = []
|
let timestamp = new Date().getTime()
|
let _options = '0123456789abcdefghigklmnopqrstuv'
|
for (let i = 0; i < 19; i++) {
|
uuid.push(_options.substr(Math.floor(Math.random() * 0x20), 1))
|
}
|
uuid = timestamp + uuid.join('')
|
return uuid
|
})()
|
|
this.setState({
|
verdisabled: true,
|
delay: 60
|
})
|
this.timer = setTimeout(this.resetVerCodeDelay, 1000)
|
|
if (config.sendType === 'sso') {
|
send_type = 'web'
|
n_id = ''
|
|
let _param = {
|
func: 'mes_sms_send_code_sso',
|
send_type: send_type,
|
mob: _phone,
|
ID: config.smsId,
|
LText: 'minke',
|
timestamp: timestamp,
|
}
|
|
_param.secretkey = md5(`${_param.LText}mingke${_param.timestamp}`)
|
|
Api.getSystemConfig(_param).then(res => {
|
if (!res.status || !res.n_id) {
|
clearTimeout(this.timer)
|
this.setState({
|
verdisabled: false,
|
delay: null
|
})
|
message.warning(res.message || '验证码获取失败！')
|
return
|
}
|
|
n_id = res.n_id
|
|
let param = {
|
func: 'MSN_sms_send_code',
|
send_type: send_type,
|
mob: _phone,
|
timestamp: timestamp,
|
ID: config.smsId,
|
n_id: res.n_id
|
}
|
|
param.LText = md5(`${_phone}mingke${window.GLOB.appkey}${param.timestamp}`)
|
param.secretkey = md5(`${param.LText}mingke${param.timestamp}`)
|
|
param.rduri = 'https://sso.mk9h.cn/webapi/dostars'
|
param.userid = 'bh0bapabtd45epsgra79segbch6c1ibk'
|
param.LoginUID = 'bh0bapabtd45epsgra79segbch6c1ibk'
|
|
Api.genericInterface(param).then(res => {
|
if (!res.status) {
|
clearTimeout(this.timer)
|
this.setState({
|
verdisabled: false,
|
delay: null
|
})
|
message.warning(res.message)
|
} else {
|
this.props.onSend(send_type, timestamp, n_id)
|
}
|
}, () => {
|
clearTimeout(this.timer)
|
this.setState({
|
verdisabled: false,
|
delay: null
|
})
|
})
|
})
|
} else {
|
let param = {
|
func: 'MSN_sms_send_code',
|
send_type: send_type,
|
mob: _phone,
|
timestamp: timestamp,
|
ID: config.smsId,
|
n_id: n_id
|
}
|
|
param.LText = md5(`${_phone}mingke${window.GLOB.appkey}${param.timestamp}`)
|
param.secretkey = md5(`${param.LText}mingke${param.timestamp}`)
|
|
param.rduri = 'https://sso.mk9h.cn/webapi/dostars'
|
param.userid = 'bh0bapabtd45epsgra79segbch6c1ibk'
|
param.LoginUID = 'bh0bapabtd45epsgra79segbch6c1ibk'
|
|
Api.genericInterface(param).then(res => {
|
if (!res.status) {
|
clearTimeout(this.timer)
|
this.setState({
|
verdisabled: false,
|
delay: null
|
})
|
message.warning(res.message)
|
} else {
|
this.props.onSend(send_type, timestamp, n_id)
|
}
|
}, () => {
|
clearTimeout(this.timer)
|
this.setState({
|
verdisabled: false,
|
delay: null
|
})
|
})
|
}
|
}
|
|
resetVerCodeDelay = () => {
|
const { delay } = this.state
|
if (delay && delay > 1) {
|
this.setState({delay: delay - 1})
|
this.timer = setTimeout(this.resetVerCodeDelay, 1000)
|
} else {
|
this.setState({
|
verdisabled: false,
|
delay: null
|
})
|
}
|
}
|
|
render() {
|
const { config } = this.props
|
const { value, verdisabled, delay } = this.state
|
|
return <Input ref={this.inputRef} className="mk-form-input" allowClear placeholder={config.placeholder || ''} value={value} autoComplete="off" disabled={config.readonly} onChange={this.handleChange} onPressEnter={this.handleInputSubmit} addonAfter={
|
<Button type="link" disabled={verdisabled} style={{padding: 0, minWidth: '70px'}} size="small" onClick={this.getvercode}>
|
{delay ? `${delay}s` : '获取验证码'}
|
</Button>
|
}/>
|
}
|
}
|
|
export default MkVercode
|
