import React from 'react';
import {
Text,
View,
StyleSheet,
TouchableOpacity,
// SafeAreaView,
// ScrollView
} from 'react-native';
import PropTypes from 'prop-types';
import { GapCommon, ColorCommon } from '../../../assets/publicConsts';
import {
FaceStart,
FaceSlow,
FaceLight,
FacePhone,
CommonButton,
LoginChecked,
LoginUnChecked,
FaceError,
// Toast
} from '../../../components';
import { Px2Dp } from '../../../utils/Tool';
const FaceRecType = {
identity: '1', // 实名认证
enterprise: '2', // 添加企业
eSign: '3', // 电子签约
// authorization: '4'// 征信授权
};
export default class FaceDetect extends React.Component {
static navigationOptions = ({ navigation }) => ({
title: navigation.getParam('title', '人脸识别') || '人脸识别',
// headerRight: navigation.getParam('btnComplete')
// ? (
// <TouchableOpacity onPress={navigation.getParam('btnComplete')}>
// <Text style={{
// fontSize: FontCommon.fontSize16,
// color: ColorCommon.primary,
// marginRight: GapCommon.gapBase * 4
// }}
// >
// 完成
// </Text>
// </TouchableOpacity>
// ) : null
})
static propTypes = {
navigation: PropTypes.object.isRequired
};
state = {
times: 0,
checked: false
}
renderLastTimesText = (times, certType) => {
if (times === 0) {
return (
<View style={styles.svgWrap}>
<View style={{ alignItems: 'center' }}>
<FacePhone width="41" height="41" />
<Text style={styles.faceText}>正对手机</Text>
</View>
<View style={{ alignItems: 'center' }}>
<FaceLight width="41" height="41" />
<Text style={styles.faceText}>光线充足</Text>
</View>
<View style={{ alignItems: 'center' }}>
<FaceSlow width="41" height="41" />
<Text style={styles.faceText}>动作缓慢</Text>
</View>
</View>
);
}
let curttext = null;
if (times < 6) {
curttext = (
<Text style={styles.lastTimesText}>
还剩
<Text style={{ color: ColorCommon.primary }}>{6 - times}</Text>
次机会进行人脸识别验证
</Text>
);
} else if (certType === FaceRecType.identity || certType === FaceRecType.eSign) {
curttext = (<Text style={styles.lastTimesText}>您的人脸识别验证次数已达上限，请选择线下面签或2h后继续人脸识别验证</Text>);
} else if (certType === FaceRecType.enterprise) {
curttext = (<Text style={styles.lastTimesText}>您的人脸识别验证次数已达上限，请选择视频面审或2h后继续人脸识别验证</Text>);
}
return <View style={styles.lastTimesWrap}>{curttext}</View>;
}
renderLastTimesButtons = (times, certType) => {
const { checked } = this.state;
const curbuttons = [];
if (times === 0) {
curbuttons.push(
<View key="View2" style={styles.tipsWrap}>
<Text style={[styles.fontCaption, { textAlign: 'center', lineHeight: 20 }]}>
请尽量选择简单背景，确保环境光线充足、摘掉帽子、眼镜等
</Text>
</View>
);
curbuttons.push(
<View key="View3" style={[styles.verifyButton, { marginTop: GapCommon.gapBase * 15, flexDirection: 'row', alignItems: 'center' }]}>
<TouchableOpacity
style={{ flexDirection: 'row', flex: 1 }}
activeOpacity={1}
onPress={() => this.setState({ checked: !checked })}
>
{checked
? <LoginChecked width={Px2Dp(16)} height={Px2Dp(16)} marginTop={Px2Dp(2)} />
: <LoginUnChecked width={Px2Dp(16)} height={Px2Dp(16)} marginTop={Px2Dp(2)} />
}
<Text style={[styles.fontCaption, {
textAlign: 'left', lineHeight: Px2Dp(20), paddingLeft: GapCommon.gapBase * 2,
}]}
>
同意本服务提供商"深圳壹账通智能科技有限公司"按照
<Text
style={{ color: ColorCommon.blue }}
// onPress={() => {
// const { navigation } = this.props;
// navigation.navigate('ThirdpartyService', { uri: `${(CONFIG.privacyPolicy)}?timestamp=${(new Date()).getTime().toString()}` });
// }}
>
《隐私政策》
</Text>
使用数据用于身份核验
</Text>
</TouchableOpacity>
</View>
);
curbuttons.push(
<View key="View1" style={styles.verifyButton}>
<CommonButton
text="开始验证"
// onPressButton={() => {
// if (checked) this.launchFaceCheck();
// else Toast.show('请同意并勾选');
// }}
/>
</View>
);
} else if (times < 6) {
curbuttons.push(
<View key="View1" style={styles.verifyButton}>
<CommonButton
text="人脸识别"
// invalidFlag={false}
// onPressButton={this.launchFaceCheck}
/>
</View>
);
if (times >= 3) {
if (certType === FaceRecType.enterprise) {
curbuttons.push(
<View key="View2" style={[styles.verifyButton, { marginTop: GapCommon.gapBase * 4 }]}>
<CommonButton
text="人脸识别"
// invalidFlag={false}
// onPressButton={this.gotoVideo}
// gradientFlag={false}
/>
</View>
);
}
// if (certType === FaceRecType.eSign) {
// curbuttons.push(
// <TouchableOpacity
// key="View3"
// onPress={() => {
// Actionsheet.show({
// items: [{ title: '视频面审', id: '1' }, { title: '跳过验证（线下验证）', id: '2' }],
// onConfirm: this.actionsheetItemClick
// });
// }}
// >
// <Text style={styles.others}>换个方式</Text>
// </TouchableOpacity>
// );
// }
}
} else if (times > 6) {
if (certType === FaceRecType.identity || certType === FaceRecType.eSign) {
curbuttons.push(
<View key="View1" style={styles.verifyButton}>
<CommonButton
text="线下面签"
// invalidFlag={false}
// onPressButton={this.gotoVideo}
/>
</View>
);
}
if (certType === FaceRecType.enterprise) {
curbuttons.push(
<View key="View1" style={styles.verifyButton}>
<CommonButton
text="视频面审"
// invalidFlag={false}
// onPressButton={this.gotoVideo}
/>
</View>
);
}
}
// (certType === FaceRecType.identity
// || certType === FaceRecType.enterprise
// || certType === FaceRecType.eSign) {
// curbuttons.push(
// <View key="View1" style={styles.verifyButton}>
// <CommonButton
// displayText="视频面审"
// invalidFlag={false}
// onPressCommonButton={this.gotoVideo}
// />
// </View>
// );
// if (certType === FaceRecType.eSign) {
// curbuttons.push(
// <View key="View2" style={[styles.verifyButton, { marginTop: GapCommon.gapBase * 4 }]}>
// <CommonButton
// displayText="跳过验证（线下面签）"
// invalidFlag={false}
// onPressCommonButton={this.gotoNext}
// gradientFlag={false}
// />
// </View>
// );
// }
// }
return curbuttons;
}
render() {
const { times } = this.state;
// const { navigation } = this.props;
return (
<View style={styles.container}>
{times === 0 ? (
<View>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Text style={styles.fontCaptionDark}>请确保是</Text>
<Text style={[styles.fontCaptionDark, { color: ColorCommon.primary }]}>
{/* {new Array(userName.length).join('*') + userName.substr(-1)} */}
**松
</Text>
<Text style={styles.fontCaptionDark}>本人操作</Text>
</View>
</View>
) : null}
<View style={styles.faceImageContainer}>
<FaceStart width="188" height="170" />
{times > 0 ? (<FaceError width={Px2Dp(40)} height={Px2Dp(40)} position="absolute" bottom={Px2Dp(21)} right={Px2Dp(-14)} />) : null}
</View>
{/* {this.renderLastTimesText(times, navigation.getParam('certType', FaceRecType.identity))}
{this.renderLastTimesButtons(times, navigation.getParam('certType', FaceRecType.identity))} */}
{this.renderLastTimesText(times, FaceRecType.identity)}
{this.renderLastTimesButtons(times, FaceRecType.identity)}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: ColorCommon.white,
alignItems: 'center',
paddingTop: GapCommon.gapBase * 5,
},
fontCaptionDark: {
fontSize: 14,
color: ColorCommon.dark
},
faceImageContainer: {
position: 'relative',
marginTop: GapCommon.gapBase * 10
},
svgWrap: {
flexDirection: 'row',
justifyContent: 'space-between',
width: '100%',
marginTop: GapCommon.gapBase * 4,
paddingLeft: GapCommon.gapBase * 12,
paddingRight: GapCommon.gapBase * 12
},
faceText: {
fontSize: 12,
color: ColorCommon.dark,
marginTop: GapCommon.gapBase * 2
},
lastTimesText: {
fontSize: 16,
color: ColorCommon.dark,
fontWeight: '700',
lineHeight: 16 * Px2Dp(1.40625),
marginTop: GapCommon.gapBase * 10,
textAlign: 'center'
},
lastTimesWrap: {
paddingLeft: GapCommon.gapBase * 14,
paddingRight: GapCommon.gapBase * 14
},
fontCaption: {
fontSize: 14,
color: ColorCommon.lightGray
},
tipsWrap: {
marginTop: GapCommon.gapBase * 3,
paddingLeft: GapCommon.gapBase * 12,
paddingRight: GapCommon.gapBase * 12
},
verifyButton: {
width: '100%',
height: Px2Dp(44),
paddingLeft: GapCommon.gapBase * 4,
paddingRight: GapCommon.gapBase * 4,
marginBottom: 4 * GapCommon.gapBase,
flex: 1,
justifyContent: 'flex-end'
// marginTop: GapCommon.gapBase * 20,
}
});
