xntalk / xntalk-rnapp

/**
 * Created by Cassie on 2017/12/04
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    InteractionManager,
    Image,
    TextInput,
    Platform,
    Dimensions,
    Alert,
    Modal,
    ActivityIndicator,
    AsyncStorage,
    NativeModules
} from 'react-native';
import AppService from './../service/AppService';
import Camera from 'react-native-camera';
import { getHeaderHeight, getHeaderPadding } from './../utils/utils';
import {width,height,zoomW,zoomH} from '../utils/getSize';
import {xnToast,NoDoublePress} from '../utils/utils';
const back = require("../img/back.png");

const  brushFace=require('../img/brushFace.png');

export default class CreateFaceBrush extends Component{
    static navigationOptions = ({ navigation, screenProps }) => ({
        headerStyle:{
            paddingTop: getHeaderPadding(),
            elevation: 0,   // 去掉阴影
            height: getHeaderHeight(),
            backgroundColor: '#fff',
            borderBottomWidth: 0,
        },
        title: null,
        headerLeft: (
            <TouchableOpacity style={styles.backWrap} onPress = {navigation.state.params?navigation.state.params.close:null}>
                <Image source={back} resizeMode="contain" style={{width:(17/zoomW),height:(17/zoomW)}} />
            </TouchableOpacity>
        )
    });

    constructor(props) {
        super(props);

        this.state = {
            btnShow:true,
            ImageData:"",
            visible:false,
        };


    };

    componentDidMount() {
        this.props.navigation.setParams({
            close: () => {
                InteractionManager.runAfterInteractions(() => {
                    NativeModules.system.navTo("BACK");
                })
            },
        });
    }

    render(){
        return(
            <View style={styles.background}>
                <View style={styles.brushFaceLayout} >
                    <Camera ref={(cam) => {  this.camera = cam; }} style={styles.brushFace} orientation={Camera.constants.Orientation.portrait} mirrorImage={true}  aspect={Camera.constants.Aspect.fill}
                            type={Camera.constants.Type.front} fixOrientation={true}  playSoundOnCapture={false} captureTarget={Camera.constants.CaptureTarget.memory}
                            captureQuality={Camera.constants.CaptureQuality['720p']}>
                        <View ></View>
                    </Camera>
                    <View style={styles.brushFaceMaskingBtnShow}>
                        {!this.state.btnShow&&<Image   source={{uri:"data:image/png;base64,"+this.state.ImageData, scale: 3}}  style={styles.brushFaceMaskingImg} resizeMode="cover"/>}
                    </View>
                    <View style={styles.brushFaceMasking}>
                        <Image  source={brushFace}   style={styles.brushFaceMaskingImg} resizeMode="contain"/>
                    </View>
                </View>
                {this.state.btnShow&& <TouchableOpacity  style={styles.info} onPress={this.takePicture.bind(this)}><Text style={styles.infoText} >拍照</Text></TouchableOpacity >}
                {!this.state.btnShow&& <View style={{flexDirection:"row"}} >
                    <TouchableOpacity  style={styles.info} onPress={this.reTakePicture.bind(this)}><Text style={styles.infoText} >重新拍照</Text></TouchableOpacity >
                    <TouchableOpacity  style={styles.info} onPress={this.apiUnionFaceCreate.bind(this)}><Text style={styles.infoText} >上传图片</Text></TouchableOpacity >
                </View>}
                <Modal visible={this.state.visible} transparent onRequestClose={()=>{}}>
                    <View key="spinner" style={styles.container}>
                        <View style={styles.loading}>
                            <ActivityIndicator   />
                            <Text style={styles.loadingText}>上传中...</Text>
                        </View>
                    </View>
                </Modal>
            </View>
        )
    }

    takePicture() {
        let  _this=this;
        const options = {

        };

        this.camera.capture({metadata: options, jpegQuality:80})
            .then((data) =>{
                _this.setState({
                    btnShow:false,
                    ImageData:data.data
                })
            } )
            .catch(err => console.error(err));
    }
    reTakePicture(){
        let  _this=this;
        _this.setState({
            btnShow:true
        })
    }

    apiUnionFaceCreate(){
        let  _this=this;
        let ImageData=_this.state.ImageData;
        let  vm={
            facePlatform:"ALIYUN",
            faceFileData:ImageData.replace(/\+/g, "%2B")
        };
        _this.setState({
            visible:true
        });
        let fId=0;
        AppService.apiUnionFaceCreate(vm).then((data) => {
            let  _this=this;
            _this.setState({
                visible:false
            });
            if(data.firstErrorMessage){
                xnToast(data.firstErrorMessage+",设置失败，请重新上传！");
                _this.setState({
                    btnShow:true
                })

            }else{
                fId = data.id;
                NativeModules.security.getUnionId().then((result) => {
                    console.log("result"+result);
                    //faceid与union绑定
                    let  vm={
                        unionId:result,
                        faceId:data.id
                    };


                    AppService.apiUnionFaceBind(vm).then((data) => {
                        if(data.firstErrorMessage){
                            xnToast(data.firstErrorMessage+",设置失败，请重新上传！");
                            _this.setState({
                                btnShow:true
                            })

                        }else {
                            xnToast('设置成功');
                            InteractionManager.runAfterInteractions(() => {
                                NativeModules.system.faceUploadResult(fId);
                                NativeModules.system.navTo("BACK");
                            });
                        }
                    });
                });

            }
        });
    }


    /*页面销毁前操作*/
    componentWillUnmount(){
        clearInterval(this.timer);
        this.camera.stopCapture();
    };

}

const styles = StyleSheet.create({
    backWrap: {
        justifyContent: 'center',
        paddingLeft: 18.5,
        paddingRight: 18.5,
        height: 44,
    },
    background:{
        width:'100%',
        height:'100%',
        backgroundColor:'#fff',
        flexDirection:"column",
        alignItems:"center",
    },
    brushFaceLayout:{
        marginTop:70,
        width:260,
        height:260,
    },
    brushFace:{
        width:260,
        height:260,
    },
    brushFaceImg:{
        width:260,
        height:260,
    },
    brushFaceMaskingBtnShow:{
        width:260,
        height:260,
        position:"absolute",
        zIndex:1,
        top:0,
        left:0,
        right:0,
        bottom:0,
    },
    brushFaceMasking:{
        width:260,
        height:260,
        position:"absolute",
        zIndex:10,
        top:0,
        left:0,
        right:0,
        bottom:0,
    },
    brushFaceMaskingImg:{
        width:260,
        height:260
    },
    brushFaceMaskingImgTip:{
        position:"absolute",
        zIndex:1,
        top:12,
        left:28,
        bottom:0,
        height:60,
        width:205,
        backgroundColor:"rgba(0,0,0,0.3)"
    },
    brushFaceTipText:{
        fontSize:18,
        color:"#fff",
        textAlign:"center",
        position:"absolute",
        zIndex:10,
        top:38,
        left:0,
        right:0,
        bottom:0,
    },
    info:{
        marginTop:75,
        marginLeft:10,
        marginRight:10,
        backgroundColor:"#00BE3C",
        height:40,
        width:100,
        paddingLeft:10,
        paddingRight:10,
        alignItems:"center",
        justifyContent:"center",
        borderRadius:4,
    },
    infoText:{
        fontSize:18,
        color:"#fff",
    },
    container: {
        flex: 1,
        backgroundColor: 'transparent',
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        justifyContent: 'center',
        alignItems: 'center'
    },

    loading: {
        alignItems: 'center',
        justifyContent: 'center',
        width: Dimensions.get('window').width / 2.5,
        height: Dimensions.get('window').width / 2.5,
        borderRadius: 10,
        backgroundColor: 'rgba(0, 0, 0, 0.25)'
    },
    loadingText: {
        marginTop: 10,
        textAlign: 'center',
        color: '#fcfcfc'
    }



});