volunteer.js 11.5 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,
    BackHandler,
    AsyncStorage,StatusBar,
    Dimensions,
    ScrollView
} from 'react-native';
import { NavigationActions } from 'react-navigation';
import {zoomW,zoomH} from '../../utils/getSize';
import {clock,xnToast,timeReduce,timePlus,timeEvery,getDay} from '../../utils/utils';
import moment from 'moment';

const StatusHeight = Platform.OS == 'ios' ?isIphoneX()?44+10/zoomH:20+10/zoomH:StatusBar.currentHeight;;

const nativeBridge = NativeModules.BlueToolManage;
const NativeModule = new NativeEventEmitter(nativeBridge);

export default class volunteer extends Component {
    static navigationOptions = ({navigation}) => ({
        title:'个人信息',
        header:null,
        // headerTitle:'平安地铁',
        tabBarIcon: ({ tintColor }) => (
            <Image
                source={require('../../img/root_volunteer.png')}
                style={[styles.icon, {tintColor: tintColor}]}
            />
        )
    });

    constructor(props){
        super(props);
        this.state = {
            avatar:global.user.avatar,
            nickName:global.user.nickName?global.user.nickName:global.user.mobilePhone

        };
    };

    componentWillMount(){

    };

    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();
    }

    //退出登录
    logout = () => {
        let that= this;
        AsyncStorage.clear().then(function () {
            AsyncStorage.setItem('autoLogin', 'no',(error)=>{
                xnToast("退出成功");
                NativeModules.BlueToolManage.stopTimer();
                // that.props.navigation.navigate('SignIn')
                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.politicalStatus == 1?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={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>*/}
                    {/*                        onPress={()=>this.props.navigation.goBack()}
                     */}
                    <TouchableOpacity style={{width:20,height:20,position:'absolute',left:20,top:StatusHeight}} >
                        {/*<Image style={{flex:1,width:18/zoomW,height:26/zoomH}}  source={require('../../img/back.png')} resizeMode='contain'></Image>*/}
                    </TouchableOpacity>
                </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
    },
});

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