index.js 9.73 KB
/**
 * 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
} from 'react-native';
import moment from 'moment';
import {zoomW,zoomH} from '../../utils/getSize';
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
        };
    };

    componentWillMount(){

    };

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

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

    //退出登录
    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)
            });
        });
    };

    render(){
        return (
            <View style={styles.background}>
                <StatusBar barStyle={'light-content'}/>
                {/*顶部信息*/}
                <View style={{width:375/zoomW,height:260/zoomH,alignItems:'center'}}>
                    <Image source={global.user.isPartyMember?require('../../img/bg_image.png'):require('../../img/myEventsBanner_unparty.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={{marginTop:27/zoomH,backgroundColor:'#efefef',borderRadius:4,padding:3/zoomW}}>
                        <Image defaultSource={global.user.isPartyMember?require('../../img/defultPartyIcon.png'):require('../../img/defultIcon.png')} source={{uri:this.state.avatar}} style={{width:74/zoomW,height:74/zoomW,}}></Image>
                    </View>
                    {/*昵称*/}
                    <Text style={{marginTop:13/zoomH,textAlign:"center",backgroundColor:'transparent',color:'#fcfcfc',fontSize:16,fontFamily:'PingFangSC-Regular'}}>{global.user.nickName?global.user.nickName:global.user.mobilePhone}</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 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>
                </View>

                {/*个人信息*/}
                <TouchableOpacity style={[styles.itemLine,{marginTop:16/zoomH}]} onPress={()=>this.props.navigation.navigate('Info')}>
                    <View style={{flex:1,flexDirection:'row',alignItems:'center',justifyContent:'space-between'}}>
                        <Image source={require('../../img/personInfo.png')} resizeMode='contain'/>
                        <Text style={{flex:1,fontSize:16,color:'#5b5b5b',paddingLeft:28/zoomW}}>个人信息</Text>
                        <Image source={require('../../img/arrow_right.png')}/>
                    </View>
                    <View style={{height:1,backgroundColor:'#f6f6f6'}}></View>
                </TouchableOpacity>

                {/*我的消息*/}
                <TouchableOpacity style={[styles.itemLine,{paddingLeft:13/zoomW,}]} onPress={()=>this.props.navigation.navigate('myMessage')}>
                    <View style={{flex:1,flexDirection:'row',alignItems:'center'}}>
                        <Image source={require('../../img/message.png')} resizeMode='contain'/>
                        <Text style={{flex:1,fontSize:16,color:'#5b5b5b',paddingLeft:26/zoomW}}>我的消息</Text>
                        <Image source={require('../../img/arrow_right.png')}/>
                    </View>
                    <View style={{height:1,backgroundColor:'#f6f6f6'}}></View>
                </TouchableOpacity>

                {/*我的贡献*/}
                <TouchableOpacity style={[styles.itemLine,{paddingLeft:14/zoomW,}]} onPress={()=>{this.props.navigation.navigate('MyContribution')}}>
                    <View style={{flex:1,flexDirection:'row',alignItems:'center'}}>
                        <Image source={require('../../img/myContribution.png')} resizeMode='contain'/>
                        <Text style={{flex:1,fontSize:16,color:'#5b5b5b',paddingLeft:26/zoomW}}>我的贡献</Text>
                        <Image source={require('../../img/arrow_right.png')}/>
                    </View>
                    <View style={{height:1,backgroundColor:'#f6f6f6'}}></View>
                </TouchableOpacity>

                {/*智能机器人*/}
                {/*<TouchableOpacity style={[styles.itemLine]}>*/}
                    {/*<View style={{flex:1,flexDirection:'row',alignItems:'center'}}>*/}
                        {/*<Image source={require('../../img/robot.png')} resizeMode='contain'/>*/}
                        {/*<Text style={{flex:1,fontSize:16,color:'#5b5b5b',paddingLeft:28/zoomW}}>智能机器人</Text>*/}
                        {/*<Image source={require('../../img/arrow_right.png')}/>*/}
                    {/*</View>*/}
                    {/*<View style={{height:1,backgroundColor:'#f6f6f6'}}></View>*/}
                {/*</TouchableOpacity>*/}

                {/*积分商城*/}
                <TouchableOpacity style={[styles.itemLine]} onPress={()=>this.props.navigation.navigate('IntegralShop')}>
                    <View style={{flex:1,flexDirection:'row',alignItems:'center'}}>
                        <Image source={require('../../img/robot.png')} resizeMode='contain'/>
                        <Text style={{flex:1,fontSize:16,color:'#5b5b5b',paddingLeft:28/zoomW}}>积分商城</Text>
                        <Image source={require('../../img/arrow_right.png')}/>
                    </View>
                    <View style={{height:1,backgroundColor:'#f6f6f6'}}></View>
                </TouchableOpacity>

                {/*关于我们*/}
                <TouchableOpacity style={styles.itemLine} onPress={()=>this.props.navigation.navigate('aboutUs')}>
                    <View style={{flex:1,flexDirection:'row',alignItems:'center'}}>
                        <Image source={require('../../img/about.png')} resizeMode='contain'/>
                        <Text style={{flex:1,fontSize:16,color:'#5b5b5b',paddingLeft:30/zoomW}}>关于我们</Text>
                        <Image source={require('../../img/arrow_right.png')}/>
                    </View>
                    <View style={{height:1,backgroundColor:'#f6f6f6'}}></View>
                </TouchableOpacity>

                {/*退出登录*/}
                <TouchableOpacity style={[styles.itemLine,{marginTop:30}]} onPress={()=>{Alert.alert(
                    '退出',
                    '您确定退出当前账号?',
                    [
                        {text: '取消', onPress: () => console.log('Cancel Pressed!')},
                        {text: '确定', onPress: () => this.logout()},
                    ]
                )}}>
                    <View style={{flex:1,flexDirection:'row',alignItems:'center'}}>
                        {/*<Image source={require('../../img/about.png')} resizeMode='contain'/>*/}
                        <Text style={{flex:1,fontSize:16,color:'red',textAlign:'center'}}>退出登录</Text>
                        {/*<Image source={require('../../img/arrow_right.png')}/>*/}
                    </View>
                    <View style={{height:1,backgroundColor:'#f6f6f6'}}></View>
                </TouchableOpacity>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    background:{
        flex:1,
        backgroundColor:'#f6f6f6',
        display:'flex',
        alignItems:'center',

    },
    itemLine:{
        height:44/zoomH,
        width:'100%',
        backgroundColor:'white',
        paddingLeft:15/zoomW,
        paddingRight:15/zoomW

    }



});

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