customer / shanghai-railway-rnapp

/**
 * Created by Cassie on 2018/03/21
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Image,
    TextInput,
    Animated,
    ActivityIndicator,
    NativeModules,
    NativeEventEmitter,
    DeviceEventEmitter,
    Alert,
    Modal,
    Platform,
    AsyncStorage,
    StatusBar,
    Dimensions,
    ScrollView
} from 'react-native';
import moment from 'moment';
import {zoomW,zoomH} from '../../utils/getSize';
import AppService from "../../service/AppService";
import {clock,xnToast,timeReduce,timePlus,timeEvery,getDay} from '../../utils/utils';
import { NavigationActions } from 'react-navigation';
const StatusHeight = Platform.OS == 'ios' ?isIphoneX()?44+10/zoomH:20+10/zoomH:StatusBar.currentHeight;

export default class PersonCenter extends Component {
    static navigationOptions = ({navigation}) => ({
        header:null,

    });

    constructor(props){
        super(props);
        this.state = {
            avatar:global.user.avatar,
            nickName:global.user.nickName?global.user.nickName:global.user.mobilePhone,
            todayHasSignUp: global.todayHasSignUp,
            signUpDay: global.signUpDay,
            loading: false
        };
    };

    componentWillMount(){
        if(!this.state.todayHasSignUp) {
            this.getSignUpRecord();
        }
    };

    componentDidMount(){
        this.subscription = DeviceEventEmitter.addListener('updateAvatar',()=>{
            this.setState({
                avatar:global.user.avatar,
                nickName:global.user.nickName?global.user.nickName:global.user.mobilePhone

            })
        })
    }

    componentWillUnmount(){
        this.subscription.remove();
    }

    // 判断是否是当天
    checkIsToday(data){
        var date = String(data);
        var year = date.substring(0,4);
        var month = date.substring(4,6);
        var day = date.substring(6);
        var d1 = new Date(year+'/'+month+'/'+day);

        var today = new Date();
        var y = today.getFullYear();
        var m = today.getMonth()+1;
        var d = today.getDate();
        var d2 = new Date(y+'/'+m+'/'+d);

        var iday = parseInt(d2-d1)/1000/60/60/24;
        if(iday === 0) {
            return true;
        } else {
            return false;
        }
    }

    // 获取签到记录
    getSignUpRecord() {
        let _this = this;
        this.setState({
            loading: true,
        });
        AppService.getSignUpRecord({id: global.user.id}).then((data) => {
            _this.setState({
                loading: false,
            });
            if (data.message) {
                xnToast(data.message);
                return;
            }
            if (!!data.errors === true && !!data.errors.length > 0) {
                xnToast(data.errors[0].message);
            } else {
                _this.setState({
                    todayHasSignUp: data.signPoints ? (data.signPoints.dateId ? _this.checkIsToday(data.signPoints.dateId) : false) : false,
                    signUpDay: data.signPoints ? (data.signPoints.dayNum ? data.signPoints.dayNum : 0) : 0
                },()=>{
                    global.todayHasSignUp = _this.state.todayHasSignUp;
                    global.signUpDay = _this.state.signUpDay;
                });
            }
        });
    }

    //退出登录
    logout = () => {
        let that= this;
        AsyncStorage.clear().then(function () {
            AsyncStorage.setItem('autoLogin', 'no',(error)=>{
                xnToast("退出成功");
                NativeModules.BlueToolManage.stopTimer();
                const resetAction = NavigationActions.reset({
                    index: 0,
                    actions: [
                        NavigationActions.navigate({ routeName: 'SignIn'})
                    ]
                })
                that.props.navigation.dispatch(resetAction)
            });
        });
    };

    // 签到
    signUp() {
        let _this = this;
        this.setState({
            loading: true,
        });
        AppService.createPointsSignUp({userId: global.user.id,}).then((data) => {
            _this.setState({
                loading: false,
            });
            if (data.message) {
                xnToast(data.message);
                return;
            }
            if (!!data.errors === true && !!data.errors.length > 0) {
                xnToast(data.errors[0].message);
            } else {
                _this.setState({
                    todayHasSignUp: true,
                    signUpDay: data.dayNum || 0
                },()=>{
                    global.todayHasSignUp = _this.state.todayHasSignUp;
                    global.signUpDay = _this.state.signUpDay;
                });
                xnToast('签到成功');
            }
        });
    }

    render(){
        return (
            <View style={styles.background}>
                <Modal
                    animationType="none"
                    transparent
                    visible={this.state.loading}
                    onRequestClose={() => {}}
                >
                    <View style={styles.loadingBg}>
                        <ActivityIndicator size="large" />
                    </View>
                </Modal>
                <StatusBar barStyle={'light-content'}/>
                {/*顶部信息*/}
                <View style={{width:375/zoomW,height:260/zoomH,alignItems:'center'}}>
                    <Image source={global.user.politicalStatus == 1?require('../../img/bg_image.png'):require('../../img/personalCenter.png')} style={{width:'100%',height:'100%',position:'absolute', top:0, left:0}} resizeMode="cover" />
                    <Text style={{marginTop:StatusHeight,textAlign:"center",backgroundColor:'transparent',color:'white',fontSize:17,fontFamily:'PingFangSC-Medium'}}>个人中心</Text>
                    {/*头像*/}
                    <View style={styles.avatarWrap}>
                        {this.state.avatar ?
                            <Image source={{ uri: this.state.avatar }} style={{ width: 74 / zoomW, height: 74 / zoomW }} resizeMode="cover" /> :
                            <Image source={global.user.politicalStatus == 1 ? require('../../img/defultPartyIcon.png') : require('../../img/defultIcon.png')} style={{ width: 74 / zoomW, height: 74 / zoomW }} resizeMode="cover" />
                        }
                    </View>
                    {/*昵称*/}
                    <Text style={{marginTop:13/zoomH,textAlign:"center",backgroundColor:'transparent',color:'#fcfcfc',fontSize:16,fontFamily:'PingFangSC-Regular'}}>{this.state.nickName}</Text>
                    {/*等级|头衔*/}
                    {/*<View style={{flexDirection:'row',justifyContent:'center',alignItems:'center'}}>*/}
                        {/*<Text style={{flex:1,textAlign:"right",marginRight:25/zoomW,backgroundColor:'transparent',color:'#fcfcfc'}}>等级：12</Text>*/}
                        {/*<View style={{width:1,height:14/zoomH,backgroundColor:'#f6f6f6'}} />*/}
                        {/*<Text style={{flex:1,textAlign:"left",marginLeft:25/zoomW,backgroundColor:'transparent',color:'#fcfcfc'}}>头衔：头衔名</Text>*/}
                    {/*</View>*/}
                    <TouchableOpacity activeOpacity={0.8} style={{width:20,height:20,position:'absolute',left:20,top:StatusHeight}} onPress={()=>this.props.navigation.goBack()}>
                        <Image style={{flex:1,width:18/zoomW,height:26/zoomH}} source={require('../../img/back.png')} resizeMode='contain'></Image>
                    </TouchableOpacity>
                    {!this.state.todayHasSignUp ? <TouchableOpacity activeOpacity={0.8} style={styles.signUpBtn} onPress={() => this.signUp()}>
                        <Text style={{ fontSize: 14, color: '#fff' }}>签到</Text>
                    </TouchableOpacity> :
                    <View style={[styles.signUpBtn,{paddingLeft: 8 / zoomW, paddingRight: 8 / zoomW}]}>
                        <Text style={{ fontSize: 14, color: '#fff' }}>您已连续签到<Text style={{ color: '#F4BB34' }}>{this.state.signUpDay}</Text>天</Text>
                    </View>}
                </View>

                <ScrollView
                    style={{ width: '100%',marginTop:16/zoomH }}
                    showsVerticalScrollIndicator={false}
                    alwaysBounceVertical={false}
                >
                    {/*个人信息*/}
                    <View style={{ width: '100%', backgroundColor:'#fff',paddingLeft: 15/zoomW, paddingRight: 15/zoomW }}>
                        <TouchableOpacity style={styles.itemLine} onPress={()=>this.props.navigation.navigate('Info')}>
                            <View style={{flexDirection:'row',alignItems:'center'}}>
                                <Image source={require('../../img/personInfo.png')} resizeMode='contain'/>
                                <Text style={{fontSize:16,color:'#5B5B5B',marginLeft:28/zoomW}}>个人信息</Text>
                            </View>
                            <Image source={require('../../img/arrow_right.png')}/>
                        </TouchableOpacity>
                    </View>

                    {/*我的消息*/}
                    <View style={{ width: '100%', backgroundColor:'#fff',paddingLeft: 15/zoomW, paddingRight: 15/zoomW }}>
                        <TouchableOpacity style={styles.itemLine} onPress={()=>this.props.navigation.navigate('myMessage')}>
                            <View style={{flexDirection:'row',alignItems:'center'}}>
                                <Image source={require('../../img/message.png')} resizeMode='contain'/>
                                <Text style={{fontSize:16,color:'#5B5B5B',marginLeft:26/zoomW}}>我的消息</Text>
                            </View>
                            <Image source={require('../../img/arrow_right.png')}/>
                        </TouchableOpacity>
                    </View>

                    {/*我的贡献*/}
                    <View style={{ width: '100%', backgroundColor:'#fff',paddingLeft: 15/zoomW, paddingRight: 15/zoomW }}>
                        <TouchableOpacity style={styles.itemLine} onPress={()=>{this.props.navigation.navigate('MyContribution')}}>
                            <View style={{flexDirection:'row',alignItems:'center'}}>
                                <Image source={require('../../img/myContribution.png')} resizeMode='contain'/>
                                <Text style={{fontSize:16,color:'#5B5B5B',marginLeft:26/zoomW}}>我的贡献</Text>
                            </View>
                            <Image source={require('../../img/arrow_right.png')}/>
                        </TouchableOpacity>
                    </View>

                    {/*智能机器人*/}
                    {/*<View style={{ width: '100%', backgroundColor:'#fff',paddingLeft: 15/zoomW, paddingRight: 15/zoomW }}>*/}
                    {/*<TouchableOpacity style={styles.itemLine}>*/}
                    {/*<View style={{flexDirection:'row',alignItems:'center'}}>*/}
                    {/*<Image source={require('../../img/robot.png')} resizeMode='contain'/>*/}
                    {/*<Text style={{fontSize:16,color:'#5B5B5B',marginLeft:28/zoomW}}>智能机器人</Text>*/}
                    {/*</View>*/}
                    {/*<Image source={require('../../img/arrow_right.png')}/>*/}
                    {/*</TouchableOpacity>*/}
                    {/*</View>*/}

                    {/*积分商城*/}
                    <View style={{ width: '100%', backgroundColor:'#fff',paddingLeft: 15/zoomW, paddingRight: 15/zoomW }}>
                        <TouchableOpacity style={styles.itemLine} onPress={()=>this.props.navigation.navigate('IntegralShop')}>
                            <View style={{flexDirection:'row',alignItems:'center'}}>
                                <Image source={require('../../img/robot.png')} resizeMode='contain'/>
                                <Text style={{fontSize:16,color:'#5B5B5B',marginLeft:28/zoomW}}>积分商城</Text>
                            </View>
                            <Image source={require('../../img/arrow_right.png')}/>
                        </TouchableOpacity>
                    </View>

                    {/*关于我们*/}
                    <View style={{ width: '100%', backgroundColor:'#fff',paddingLeft: 15/zoomW, paddingRight: 15/zoomW }}>
                        <TouchableOpacity style={[styles.itemLine,{borderBottomWidth:0}]} onPress={()=>this.props.navigation.navigate('aboutUs')}>
                            <View style={{flexDirection:'row',alignItems:'center'}}>
                                <Image source={require('../../img/about.png')} resizeMode='contain'/>
                                <Text style={{fontSize:16,color:'#5B5B5B',marginLeft:30/zoomW}}>关于我们</Text>
                            </View>
                            <Image source={require('../../img/arrow_right.png')}/>
                        </TouchableOpacity>
                    </View>

                    {/*退出登录*/}
                    <TouchableOpacity style={styles.exitWrap} onPress={()=>{Alert.alert(
                        '退出',
                        '您确定退出当前账号?',
                        [
                            {text: '取消', onPress: () => console.log('Cancel Pressed!')},
                            {text: '确定', onPress: () => this.logout()},
                        ]
                    )}}>
                        <Text style={{fontSize:16,color:'red'}}>退出登录</Text>
                    </TouchableOpacity>
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    background:{
        flex:1,
        backgroundColor:'#f6f6f6',
        display:'flex',
        alignItems:'center',
    },
    itemLine:{
        width:'100%',
        height:44/zoomH,
        borderBottomWidth:1,
        borderBottomColor:'#F6F6F6',
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center',
    },
    exitWrap:{
        width:'100%',
        height:44/zoomH,
        backgroundColor:'#fff',
        justifyContent:'center',
        alignItems:'center',
        marginTop:30/zoomH
    },
    avatarWrap: {
        width: 80 / zoomW,
        height: 80 / zoomW,
        backgroundColor: '#EFEFEF',
        borderRadius: 4 / zoomW,
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 27 / zoomH
    },
    signUpBtn: {
        height: 22 / zoomH,
        paddingLeft: 11 / zoomW,
        paddingRight: 11 / zoomW,
        borderRadius: 11 / zoomH,
        borderColor: '#A0A0A0',
        borderWidth: 1,
        justifyContent: 'center',
        marginTop: 16 / zoomH,
        backgroundColor: 'transparent'
    },
    loadingBg: {
        width: '100%',
        height: '100%',
        position: 'absolute',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

// 是否 isIphoneX
export function isIphoneX() {
    const dimen = Dimensions.get('window');
    return (
        Platform.OS === 'ios' &&
        !Platform.isPad &&
        !Platform.isTVOS &&
        (dimen.height === 812 || dimen.width === 812)
    );
}