|
|
|
/**
|
|
|
|
* Created by misty on 2019/06/05.
|
|
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
import React, {Component} from "react";
|
|
|
|
import ReactNative ,{
|
|
|
|
Dimensions,
|
|
|
|
StyleSheet,
|
|
|
|
Text,
|
|
|
|
View,
|
|
|
|
TouchableOpacity,
|
|
|
|
TextInput,
|
|
|
|
ScrollView,
|
|
|
|
Platform,
|
|
|
|
Image,
|
|
|
|
InteractionManager,
|
|
|
|
} from "react-native";
|
|
|
|
|
|
|
|
import Prompt from "../../common/components/Prompt";
|
|
|
|
import YH_Image from "../../common/components/YH_Image";
|
|
|
|
import YH_ActionSheet from "../../common/components/YH_ActionSheet";
|
|
|
|
import ImagePicker from 'react-native-image-picker';
|
|
|
|
import LoadingIndicator from '../../common/components/LoadingIndicator';
|
|
|
|
|
|
|
|
export default class NameAuthen extends Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
|
|
|
isBack: false,
|
|
|
|
backIDCardImageUri: '',
|
|
|
|
frontIDCardImageUri: '',
|
|
|
|
}
|
|
|
|
// this.renderCell = this.renderCell.bind(this)
|
|
|
|
this.renderHeader = this.renderHeader.bind(this)
|
|
|
|
this.renderMeritCell = this.renderMeritCell.bind(this)
|
|
|
|
this.renderIDCardAddDetailCell = this.renderIDCardAddDetailCell.bind(this)
|
|
|
|
this.actionsheetItemClick = this.actionsheetItemClick.bind(this)
|
|
|
|
}
|
|
|
|
|
|
|
|
renderHeader(title) {
|
|
|
|
return <View style={styles.headerDetailContainer}>
|
|
|
|
<Text style={styles.headerTitle} numberOfLines={1}>{title}</Text>
|
|
|
|
</View>
|
|
|
|
}
|
|
|
|
|
|
|
|
renderMeritCell(title) {
|
|
|
|
return <View style={styles.meritCell}>
|
|
|
|
<View style={styles.meritAnnotation}/>
|
|
|
|
<Text style={styles.headerDetailTitle}>{title}</Text>
|
|
|
|
</View>
|
|
|
|
}
|
|
|
|
|
|
|
|
renderIDCardAddDetailCell() {
|
|
|
|
return (
|
|
|
|
<View style={styles.renderIDCardAddDetailCell}>
|
|
|
|
{this.renderIDCardAddCellImage(false)}
|
|
|
|
{this.renderIDCardAddCellImage(true)}
|
|
|
|
</View>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
renderIDCardAddCellImage(isBack) {
|
|
|
|
let title = isBack ? '反面照片' : '正面照片';
|
|
|
|
let image = isBack ? require('../images/cardBack.png') : require('../images/cardFront.png');
|
|
|
|
let imageUrl = isBack ? this.state.backIDCardImageUri : this.state.frontIDCardImageUri;
|
|
|
|
let hasImage = imageUrl.length > 0 ? true : false;
|
|
|
|
return (
|
|
|
|
<View style={styles.renderIDCardAddCellImage}>
|
|
|
|
<TouchableOpacity
|
|
|
|
activeOpacity={1.0}
|
|
|
|
onPress={() => {
|
|
|
|
if(!hasImage){
|
|
|
|
this.setState({
|
|
|
|
isBack,
|
|
|
|
})
|
|
|
|
this.refs.YH_ActionSheet.showModal();
|
|
|
|
}
|
|
|
|
}}>
|
|
|
|
{hasImage ?
|
|
|
|
<YH_Image resizeMode="contain" url={imageUrl} style={[styles.viewImage, {backgroundColor: 'transparent', borderWidth: 0,}]}/>
|
|
|
|
:
|
|
|
|
<View style={styles.viewImage}>
|
|
|
|
<Image style={styles.addImage} resizeMode={'contain'} source={require('../images/addID.png')}/>
|
|
|
|
<Text style={[styles.imageText, {marginTop: 13}]}>{title}</Text>
|
|
|
|
</View>
|
|
|
|
}
|
|
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
|
|
activeOpacity={1.0}
|
|
|
|
style={styles.addImageClose}
|
|
|
|
onPress={() => {
|
|
|
|
if(isBack){
|
|
|
|
this.setState({
|
|
|
|
backIDCardImageUri: '',
|
|
|
|
})
|
|
|
|
}else {
|
|
|
|
this.setState({
|
|
|
|
frontIDCardImageUri: '',
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}}>
|
|
|
|
{hasImage ?
|
|
|
|
<Image style={{height: 16,width: 16}} source={require('../images/imageShareClose.png')}/>
|
|
|
|
: null}
|
|
|
|
</TouchableOpacity>
|
|
|
|
|
|
|
|
<View style={styles.renderIDCardSampleCellImage}>
|
|
|
|
<Image style={styles.cardImage} source={image}/>
|
|
|
|
<Text style={styles.cardImageEGtip}>（示例）</Text>
|
|
|
|
</View>
|
|
|
|
|
|
|
|
</View>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
actionsheetItemClick(id){
|
|
|
|
this.props.showLoading && this.props.showLoading(true);
|
|
|
|
let that = this;
|
|
|
|
if(id == 1){
|
|
|
|
ReactNative.NativeModules.YH_MarketHelper.goUFOIDCardCameraVC(this.state.isBack).then(data => {
|
|
|
|
InteractionManager.runAfterInteractions(() => {
|
|
|
|
that.refs.YH_ActionSheet.cancelModal();
|
|
|
|
if(that.state.isBack){
|
|
|
|
that.setState({
|
|
|
|
backIDCardImageUri: data,
|
|
|
|
})
|
|
|
|
}else {
|
|
|
|
that.setState({
|
|
|
|
frontIDCardImageUri: data,
|
|
|
|
})
|
|
|
|
}
|
|
|
|
that.props.showLoading && that.props.showLoading(false);
|
|
|
|
});
|
|
|
|
})
|
|
|
|
.catch(error => {
|
|
|
|
that.refs.YH_ActionSheet.cancelModal();
|
|
|
|
that.props.showLoading && that.props.showLoading(false);
|
|
|
|
});
|
|
|
|
}else if(id == 2){
|
|
|
|
|
|
|
|
if(Platform.OS == 'ios'){
|
|
|
|
let options = {
|
|
|
|
storageOptions: {
|
|
|
|
skipBackup: true,
|
|
|
|
path: 'images',
|
|
|
|
},
|
|
|
|
};
|
|
|
|
ImagePicker.launchImageLibrary(options, (response) => {
|
|
|
|
InteractionManager.runAfterInteractions(() => {
|
|
|
|
console.log(response);
|
|
|
|
that.refs.YH_ActionSheet.cancelModal();
|
|
|
|
let uri = response ? response.uri : '';
|
|
|
|
if(uri){
|
|
|
|
if(that.state.isBack){
|
|
|
|
that.setState({
|
|
|
|
backIDCardImageUri: uri,
|
|
|
|
})
|
|
|
|
}else {
|
|
|
|
that.setState({
|
|
|
|
frontIDCardImageUri: uri,
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
that.props.showLoading && that.props.showLoading(false);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
else{
|
|
|
|
ReactNative.NativeModules.YH_MarketHelper.goPhotoVC().then(data => {
|
|
|
|
InteractionManager.runAfterInteractions(() => {
|
|
|
|
that.refs.YH_ActionSheet.cancelModal();
|
|
|
|
if(that.state.isBack){
|
|
|
|
that.setState({
|
|
|
|
backIDCardImageUri: data,
|
|
|
|
})
|
|
|
|
}else {
|
|
|
|
that.setState({
|
|
|
|
frontIDCardImageUri: data,
|
|
|
|
})
|
|
|
|
}
|
|
|
|
that.props.showLoading && that.props.showLoading(false);
|
|
|
|
});
|
|
|
|
})
|
|
|
|
.catch(error => {
|
|
|
|
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
let buttonDisabled = this.state.backIDCardImageUri.length == 0 || this.state.frontIDCardImageUri.length == 0
|
|
|
|
let isShowToast = this.props.isShowToast;
|
|
|
|
let toastMessage = this.props.toastMessage;
|
|
|
|
|
|
|
|
return <View style={styles.mainContainer}>
|
|
|
|
<ScrollView style={styles.mainContainer}
|
|
|
|
keyboardShouldPersistTaps={'handled'}>
|
|
|
|
|
|
|
|
{this.renderHeader('请上传身份证照片')}
|
|
|
|
{this.renderMeritCell('请上传原始比例清晰的身份证正反面。请勿进行裁剪涂改，否则无法通过审核。')}
|
|
|
|
{this.renderMeritCell('照片格式支持jpg、jpeg、png。')}
|
|
|
|
{this.renderMeritCell('身份证照片信息将加密处理，仅用于提现财务用途。')}
|
|
|
|
{this.renderMeritCell('身份证信息需与提现银行卡信息匹配，否则无法正常提现成功。')}
|
|
|
|
|
|
|
|
{this.renderIDCardAddDetailCell()}
|
|
|
|
</ScrollView>
|
|
|
|
|
|
|
|
<TouchableOpacity style={[styles.submitButton, buttonDisabled ? styles.disabledButton : {}]}
|
|
|
|
disabled={buttonDisabled}
|
|
|
|
onPress={()=> {
|
|
|
|
if (this.state.backIDCardImageUri.length > 0 && this.state.frontIDCardImageUri.length > 0) {
|
|
|
|
this.props.bindIdentityCard && this.props.bindIdentityCard(this.state.frontIDCardImageUri, this.state.backIDCardImageUri);
|
|
|
|
|
|
|
|
}
|
|
|
|
}}>
|
|
|
|
<Text style={styles.buttonText}>{'提交'}</Text>
|
|
|
|
</TouchableOpacity>
|
|
|
|
|
|
|
|
{isShowToast ? <Prompt
|
|
|
|
text={toastMessage}
|
|
|
|
duration={1500}
|
|
|
|
onPromptHidden={this.props.hideToastMessage}
|
|
|
|
/> : null}
|
|
|
|
|
|
|
|
<YH_ActionSheet
|
|
|
|
ref="YH_ActionSheet"
|
|
|
|
items={[{title:'拍照',id:'1'},{title:'从相册中选择',id:'2'}]}
|
|
|
|
actionsheetItemClick={this.actionsheetItemClick}
|
|
|
|
modalTitle={""} />
|
|
|
|
|
|
|
|
<LoadingIndicator
|
|
|
|
isVisible={this.props.isShowLoading}
|
|
|
|
/>
|
|
|
|
</View>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const { width } = Dimensions.get('window');
|
|
|
|
let styles = StyleSheet.create({
|
|
|
|
mainContainer: {
|
|
|
|
flex: 1,
|
|
|
|
backgroundColor: 'white',
|
|
|
|
},
|
|
|
|
headerDetailContainer: {
|
|
|
|
backgroundColor: 'white',
|
|
|
|
},
|
|
|
|
headerTitle: {
|
|
|
|
marginLeft: 15,
|
|
|
|
marginTop: 20,
|
|
|
|
fontFamily: 'PingFang-SC-Medium',
|
|
|
|
fontSize: 17,
|
|
|
|
color: '#444444',
|
|
|
|
letterSpacing: 0,
|
|
|
|
},
|
|
|
|
meritCell: {
|
|
|
|
marginTop: 10,
|
|
|
|
flexDirection: 'row',
|
|
|
|
paddingLeft: 15,
|
|
|
|
paddingRight: 10,
|
|
|
|
},
|
|
|
|
meritAnnotation: {
|
|
|
|
width: 3,
|
|
|
|
height: 3,
|
|
|
|
borderRadius: 1.5,
|
|
|
|
backgroundColor: '#B0B0B0',
|
|
|
|
marginTop: 8,
|
|
|
|
},
|
|
|
|
headerDetailTitle: {
|
|
|
|
fontFamily: 'PingFang-SC-Regular',
|
|
|
|
fontSize: 14,
|
|
|
|
color: '#B0B0B0',
|
|
|
|
letterSpacing: 0,
|
|
|
|
marginLeft: 5,
|
|
|
|
},
|
|
|
|
|
|
|
|
cell: {
|
|
|
|
height: 50,
|
|
|
|
alignItems: 'center',
|
|
|
|
flexDirection: 'row',
|
|
|
|
paddingLeft: 15,
|
|
|
|
paddingRight: 15,
|
|
|
|
},
|
|
|
|
cellTitle: {
|
|
|
|
fontSize: 14,
|
|
|
|
fontFamily: 'PingFang-SC-Regular',
|
|
|
|
color: '#444444',
|
|
|
|
},
|
|
|
|
textInput: {
|
|
|
|
fontSize: 14,
|
|
|
|
marginLeft: 22,
|
|
|
|
fontFamily: 'PingFang-SC-Regular',
|
|
|
|
color: '#B0B0B0',
|
|
|
|
},
|
|
|
|
imageText: {
|
|
|
|
fontFamily: 'PingFang-SC-Regular',
|
|
|
|
color: '#B0B0B0',
|
|
|
|
fontSize: 14,
|
|
|
|
},
|
|
|
|
buttonText: {
|
|
|
|
color: 'white',
|
|
|
|
fontSize: 14,
|
|
|
|
fontWeight: 'bold',
|
|
|
|
},
|
|
|
|
submitButton: {
|
|
|
|
marginLeft: 15,
|
|
|
|
marginRight: 15,
|
|
|
|
marginBottom: 33,
|
|
|
|
height: 44,
|
|
|
|
backgroundColor: '#002B47',
|
|
|
|
alignItems: 'center',
|
|
|
|
justifyContent: 'center',
|
|
|
|
},
|
|
|
|
disabledButton: {
|
|
|
|
backgroundColor: '#CCCCCC'
|
|
|
|
},
|
|
|
|
line: {backgroundColor: '#EEEEEE', left: 20, right: 20, bottom: 0, height: 1, position: 'absolute'},
|
|
|
|
|
|
|
|
renderIDCardAddDetailCell: {
|
|
|
|
flexDirection: 'row',
|
|
|
|
marginTop: 20,
|
|
|
|
marginLeft: 15,
|
|
|
|
marginRight: 15,
|
|
|
|
justifyContent: 'space-between',
|
|
|
|
alignItems: 'center',
|
|
|
|
},
|
|
|
|
renderIDCardAddCellImage: {
|
|
|
|
width: (width - 50)/2,
|
|
|
|
},
|
|
|
|
viewImage: {
|
|
|
|
height: 101,
|
|
|
|
width: (width - 50)/2,
|
|
|
|
flexDirection: 'column',
|
|
|
|
alignItems: 'center',
|
|
|
|
justifyContent: 'center',
|
|
|
|
borderRadius: 2,
|
|
|
|
borderWidth: 1,
|
|
|
|
borderStyle: 'dashed',
|
|
|
|
borderColor: '#f0f0f0',
|
|
|
|
},
|
|
|
|
addImage: {
|
|
|
|
height: 30,
|
|
|
|
width: 30,
|
|
|
|
},
|
|
|
|
addImageClose: {
|
|
|
|
position: 'absolute',
|
|
|
|
height: 16,
|
|
|
|
width: 16,
|
|
|
|
top: -4,
|
|
|
|
left: (width - 50)/2-10,
|
|
|
|
},
|
|
|
|
renderIDCardSampleCellImage: {
|
|
|
|
width: 80,
|
|
|
|
marginTop: 30,
|
|
|
|
marginLeft: ((width-50)/2-80)/2,
|
|
|
|
},
|
|
|
|
cardImage: {
|
|
|
|
width: 80,
|
|
|
|
height: 50,
|
|
|
|
},
|
|
|
|
cardImageEGtip: {
|
|
|
|
height: 13,
|
|
|
|
width: 80,
|
|
|
|
marginTop: 4,
|
|
|
|
fontFamily: 'PingFang-SC-Regular',
|
|
|
|
fontSize: 9,
|
|
|
|
color: '#999999',
|
|
|
|
letterSpacing: 0,
|
|
|
|
textAlign: 'center',
|
|
|
|
},
|
|
|
|
}) |
...
|
...
|
|
