Mine.js 9.61 KB
import React, {Component} from 'react';
import {Image, NativeModules, NetInfo, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {zoomH, zoomW} from '../../utils/getSize';
import AppService from "../../service/AppService";
import {xnToast} from "../../utils/utils";

export default class Mine extends Component {
    static navigationOptions = ({ navigation, screenProps }) => ({
        header: null
    });
    constructor(props) {
        super(props);
        this.state = {
            network: false,
            userInfo: '',         // 用户信息
            userName: '',         // 用户姓名
            publishNum: '',       // 发布数量
            followNum: '',        // 关注数量
            fansNum: '',          // 粉丝数量
        }
    }

    componentWillMount(){
        const _this = this;
        // 获取网络状态
        NetInfo.addEventListener('change',function(isConnected){
            if(isConnected.toLocaleLowerCase() != 'none'){
                global.isConnected = true;
            }else{
                global.isConnected = false;
            }
        });
        const params = {id:global.passport.id};
        AppService.getPassport(params).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 {
                // global.tenantId=data.passport.tenantId;
                // global.userId=data.passport.userId;
                global.tenantName=data.passport.tenantName;
                global.userName = data.passport.userName;
                // 调用获取用户信息方法
                _this.getInfo();
            }
        });

        // NativeModules.security.getPassportId().then((result) => {
        //
        // }).catch((error) => {
        //     xnToast(error);
        // });
    };


    // 获取用户信息
    getInfo=()=> {
        const _this = this;
        if (global.isConnected) {
            const params = {
                forumId: global.forumId,
                id:global.userId
            };
            AppService.getUserInfo(params).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 {
                    if (!!data.userExtend) {
                        let userInfo = data.userExtend;
                        // console.log(userInfo);
                        _this.setState({
                            userInfo: userInfo,
                            userName: userInfo.name,
                            publishNum: userInfo.forumNum,
                            followNum: userInfo.attentionNum,
                            fansNum: userInfo.beAttentionNum,
                        })
                    }
                }
            });
        } else {
            xnToast('请检查网络!');
        }

    };

    // 跳转关注
    goAttention = () => {
        this.props.navigation.navigate('Attention',{id: 1,name: 'Attention',userId: global.userId});
    }

    goFans = () => {
        this.props.navigation.navigate('Attention',{id: 2,name: 'Attention',userId: global.userId});
    }

    goMyPage = () => {
        this.props.navigation.navigate('MyPage',{name: 'MyPage',userInfo: this.state.userInfo});
        // console.log(this.stste.userInfo)
    };

    goCollect = () => {
        this.props.navigation.navigate('Collection',{name: 'Collection'});
    };

    // 跳转系统设置
    goSetting =()=> {

    };

    render() {
        return(
            <View style={styles.background}>
                <View style={{backgroundColor: '#393939'}}>
                    <View style={styles.mineInfo}>
                        <View style={styles.mineInfoLeft}>
                            <TouchableOpacity onPress={() => this.goMyPage()}>
                                <View style={styles.headImage}></View>
                            </TouchableOpacity>
                        </View>
                        <View style={styles.mineInfoRight}>
                            <Text style={{color: '#fff', fontSize: 16}}>{this.state.userName}</Text>
                            <Text style={{color: '#fff'}}>25芳币</Text>
                        </View>
                    </View>
                    <View style={styles.upText}>
                        <View>
                            <View><Text style={styles.upTextCount}>{this.state.publishNum}</Text></View>
                            <View><Text style={styles.upTextFont}>发布</Text></View>
                        </View>
                        <View>
                            <TouchableOpacity onPress={() => this.goAttention()}>
                                <View><Text style={styles.upTextCount}>{this.state.followNum}</Text></View>
                                <View><Text style={styles.upTextFont}>关注</Text></View>
                            </TouchableOpacity>
                        </View>
                        <View>
                            <TouchableOpacity onPress={() => this.goFans()}>
                                <View><Text style={styles.upTextCount}>{this.state.fansNum}</Text></View>
                                <View><Text style={styles.upTextFont}>粉丝</Text></View>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
                <View style={styles.container}>
                    <View>
                        <TouchableOpacity onPress={() => this.goCollect()}>
                            <Image source={require('../../img/collect_me.png')}/>
                            <Text style={styles.textContent}>收藏</Text>
                        </TouchableOpacity>
                    </View>
                    <View>
                        <Image source={require('../../img/history.png')}/>
                        <Text style={styles.textContent}>历史</Text>
                    </View>
                    <View>
                        <Image source={require('../../img/night.png')}/>
                        <Text style={styles.textContent}>夜间</Text>
                    </View>
                </View>
                <View>
                    <View style={styles.mall}>
                        <Text style={{marginLeft: 20 / zoomW}}>积分商城</Text>
                        <Image style={{width:6 / zoomW,height:12 / zoomH, marginRight: 20 / zoomW, marginTop: 4 / zoomH}} source={require('../../img/arrow_right.png')}/>
                    </View>
                    <View style={styles.myWallet}>
                        <Text style={{marginLeft: 20 / zoomW}}>我的钱包</Text>
                        <Image style={{width:6 / zoomW,height:12 / zoomH, marginRight: 20 / zoomW, marginTop: 4 / zoomH}} source={require('../../img/arrow_right.png')}/>
                    </View>
                    <View>
                        <TouchableOpacity onPress={() => NativeModules.system.GotoSysSet()}>
                            <View style={styles.systemSet}>
                                <Text style={{marginLeft: 20 / zoomW}}>系统设置</Text>
                                <Image style={{width:6 / zoomW,height:12 / zoomH, marginRight: 20 / zoomW, marginTop: 4 / zoomH}} source={require('../../img/arrow_right.png')}/>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    background:{
        flex:1,
        backgroundColor:'#f0f4f3',
        display:'flex',
    },
    mineInfo: {
        display:'flex',
        flexDirection: 'row',
        marginTop: 64 / zoomH,
    },
    mineInfoLeft: {
        marginLeft: 15 / zoomW,
    },
    headImage: {
        height: 80 / zoomH,
        width: 80 / zoomW,
        backgroundColor: '#ccc'
    },
    mineInfoRight: {
        marginLeft: 20 / zoomW,
        flex: 1,
    },
    upText: {
        display:'flex',
        flexDirection: 'row',
        justifyContent: 'space-around',
        marginTop: 20 / zoomH,
        paddingBottom: 20 / zoomH,
    },
    upTextCount: {
        textAlign: 'center',
        color: '#ffffff',
        fontSize: 18
    },
    upTextFont: {
        fontSize: 12,
        color: '#ffffff',
        opacity: 0.45
    },
    container: {
        paddingTop: 20,
        display:'flex',
        flexDirection: 'row',
        backgroundColor: '#fff',
        justifyContent: 'space-around',
        paddingBottom: 20 / zoomH,
    },
    textContent: {
        marginTop: 4 / zoomH,
    },
    mall: {
        marginTop: 20 / zoomH,
        backgroundColor: '#ffffff',
        display:'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingBottom: 8 / zoomH,
        paddingTop: 8 / zoomH,
    },
    myWallet: {
        marginTop: 20 / zoomH,
        backgroundColor: '#ffffff',
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingBottom: 8 / zoomH,
        paddingTop: 8 / zoomH,
    },
    systemSet: {
        marginTop: 20 / zoomH,
        backgroundColor: '#ffffff',
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingBottom: 8 / zoomH,
        paddingTop: 8 / zoomH,
    }
});