import React from 'react';
import {
View,
StyleSheet,
TextInput,
Text,
TouchableOpacity
} from 'react-native';
import PropTypes from 'prop-types';
import {
Cell,
CommonButton,
Toast,
LoginChecked,
LoginUnChecked
} from '../../../components';
import GlobalStyles from '../../../assets/globalStyles';
import { ColorCommon, GapCommon } from '../../../assets/publicConsts';
// 添加企业
export default class AddEnterprise extends React.Component {
static propTypes = {
navigation: PropTypes.object.isRequired,
// dispatch: PropTypes.func.isRequired,
};
state = {
disableButton: true, // 按钮禁用
phoneValue: '', // 手机号
protocolChecked: false, // 勾选协议
codeValue: '', // 统一社会信用代码
companyName: '' // 公司名称
}
// 监听手机号
handlePhoneInputChange = (phoneValue) => {
const { protocolChecked, codeValue, companyName } = this.state;
if (protocolChecked
&& companyName
&& companyName.length > 0
&& codeValue
&& codeValue.length === 18
&& phoneValue
&& phoneValue.length === 11
) {
this.setState({ disableButton: false });
} else {
this.setState({ disableButton: true });
}
this.setState({ phoneValue });
}
// 监听统一社会代码
handleCodeInputChange = (codeValue) => {
const { protocolChecked, phoneValue, companyName } = this.state;
if (protocolChecked
&& companyName
&& companyName.length > 0
&& codeValue
&& codeValue.length === 18
&& phoneValue
&& phoneValue.length === 11) {
this.setState({ disableButton: false });
} else {
this.setState({ disableButton: true });
}
this.setState({ codeValue });
}
// 监听公司名称
handleCompanyInputChange = (companyName) => {
const { protocolChecked, phoneValue, codeValue } = this.state;
if (protocolChecked
&& companyName
&& companyName.length > 0
&& codeValue
&& codeValue.length === 18
&& phoneValue
&& phoneValue.length === 11) {
this.setState({ disableButton: false });
} else {
this.setState({ disableButton: true });
}
this.setState({ companyName });
}
// 确定信息
handleSubmit = async () => {
const { navigation } = this.props;
const { phoneValue, codeValue } = this.state;
if (!(/^1[3456789]\d{9}$/.test(phoneValue))) {
Toast.show('请输入正确的手机号码!');
return;
}
if (!(/^[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g.test(codeValue))) {
Toast.show('请输入正确的手机号码!');
return;
}
navigation.navigate('Home');
}
// 勾选
handleChecked = () => {
const { protocolChecked } = this.state;
this.setState({ protocolChecked: !protocolChecked });
this.setState({ disableButton: true });
}
// 未勾选
handleUnChecked = () => {
const {
protocolChecked, phoneValue, codeValue, companyName
} = this.state;
this.setState({ protocolChecked: !protocolChecked });
if (phoneValue
&& phoneValue.length === 11
&& companyName
&& companyName.length > 0
&& codeValue
&& codeValue.length === 18) {
this.setState({ disableButton: false });
}
}
render() {
const { disableButton, protocolChecked } = this.state;
return (
<View style={GlobalStyles.container}>
<View style={styles.headerStyle}>
{/* {`请绑定法定代表人${certName.replace(certName.substr(0, certName.length - 1), '**')}的企业`} */}
<Text style={styles.headerTextStyle}>请绑定法定代表人张小经的企业</Text>
</View>
<View>
<Cell label="企业名称">
<TextInput
placeholder="请输入企业名称"
style={{ fontSize: 16 }}
onChangeText={this.handleCompanyInputChange}
/>
</Cell>
<Cell label="统一社会信用代码">
<TextInput
placeholder="请输入企业信用代码"
maxLength={18}
style={{ fontSize: 16 }}
onChangeText={this.handleCodeInputChange}
/>
</Cell>
<Cell label="手机号">
<TextInput
placeholder="请输入法人代表手机号"
maxLength={11}
keyboardType="numeric"
style={{ fontSize: 16 }}
onChangeText={this.handlePhoneInputChange}
/>
</Cell>
</View>
<View style={[styles.protocolWrap, { flexDirection: 'row' }]}>
{
protocolChecked
? (
<TouchableOpacity
onPress={this.handleChecked}
>
<LoginChecked width={17} height={17} />
</TouchableOpacity>
)
: (
<TouchableOpacity
onPress={this.handleUnChecked}
>
<LoginUnChecked width={17} height={17} />
</TouchableOpacity>
)
}
<View style={styles.protocolTextWrap}>
<Text style={[styles.agreeText, { lineHeight: 18 }]}>我已阅读并同意</Text>
<TouchableOpacity>
<Text style={[styles.protocolText, { lineHeight: 18 }]}>《电子平台签约服务协议》</Text>
</TouchableOpacity>
</View>
</View>
<View style={styles.addButton}>
<CommonButton
text="确定"
disable={disableButton}
onPressButton={this.handleSubmit}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
addButton: {
flex: 1,
justifyContent: 'flex-end',
marginBottom: 4 * GapCommon.gapBase,
paddingLeft: 4 * GapCommon.gapBase,
paddingRight: 4 * GapCommon.gapBase
},
headerStyle: {
paddingLeft: 4 * GapCommon.gapBase,
paddingTop: 3 * GapCommon.gapBase,
paddingBottom: 3 * GapCommon.gapBase,
},
headerTextStyle: {
fontSize: 14,
color: ColorCommon.dark
},
protocolWrap: {
marginTop: 6 * GapCommon.gapBase,
paddingLeft: 4 * GapCommon.gapBase,
paddingRight: 4 * GapCommon.gapBase
},
protocolTextWrap: {
marginLeft: 2 * GapCommon.gapBase,
flexWrap: 'wrap',
flexDirection: 'row'
},
protocolText: {
fontSize: 12,
color: '#4269BA'
},
agreeText: {
fontSize: 12,
color: ColorCommon.dark
}
});