myMessage.js 9.01 KB
/**
 * Created by tdzl2003 on 12/18/16.
 */
import React, {Component, PropTypes} from "react";
import {
    Dimensions,
    Image,
    ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
    Platform,
    FlatList,
    BackHandler,
    ActivityIndicator,
    StatusBar
} from "react-native";
import Toast from 'react-native-root-toast';
import {zoomW,zoomH} from '../../utils/getSize';
const noResult = require('../../img/noResult.png');
const submitLog = require('../../img/submitLog.png');
import AppService from '../../service/AppService';
function isIphoneX() {
    let dimen = Dimensions.get('window');
    return (
        Platform.OS === 'ios' &&
        !Platform.isPad &&
        !Platform.isTVOS &&
        (dimen.height === 812 || dimen.width === 812)
    );
}


var options = {
    title: '选择头像',
    storageOptions: {
        skipBackup: true,
        path: 'images',

        waitUntilSaved:true
    },
    cancelButtonTitle:'取消',
    takePhotoButtonTitle:'拍照',
    chooseFromLibraryButtonTitle:'选择相册',
    quality:1,
    noData:true,
    maxWidth: 200,
    maxHeight: 200

};

export default class myMessage extends Component {
    static navigationOptions = ({navigation}) => ({
        headerTitle:'我的消息',
        headerLeft:(
            <TouchableOpacity style={styles.backWrap} onPress={() => navigation.goBack()}>
                <Image source={require('../../img/back_gray.png')} resizeMode="contain" />
            </TouchableOpacity>
        ),
        headerRight:(
            <View></View>
        )
    });



    constructor(props){
        super(props);
        this.state = {
            loadMore:false,
            isLoading: false,
            isAll: false,
            loading:false,
            list:[{messageTitle:"1111",
                messageContent:"dfdsfasfasfas"},{messageTitle:"1111",
                messageContent:"dfdsfasfasfas"}],
            totalCount:0
        };
    }

    /*页面初始化*/
    componentWillMount(){
        let message = {
            messageTitle:"1111",
            messageContent:"dfdsfasfasfas"
        }
        let messageList=[];
        messageList.push(message);
        this.setState({
            list: messageList,
            totalCount:1
        });
        this.search();
    };

    componentWillUnmount(){

    }

    componentDidMount(){

    }

    //搜索
    search() {
        console.warn("===========");
        this.setState({
            isLoading: false,
            isAll: false
        }, () => {
            let _this = this;
            let params = {};
            _this.setState({
                isLoading: true,
                loading:true,
            }, () => {
                // console.log(params, 'params');
                AppService.getUnreadMessageList(params).then((data) => {
                    if (data.message) {
                        Toast.show(data.message);
                        return;
                    }
                    if (!!data.errors === true && !!data.errors.length > 0) {
                        Toast.show(data.errors[0].message);
                    } else {
                        console.warn(data.result);
                        this.setState({
                            list:data.result,
                            totalCount:data.totalCount
                        });
                    }
                    _this.setState({
                        loading:false,
                        isLoading: false,
                    });
                });
            });

        });
    }

    // 加载更多
    addList() {
        let _this = this;
        let params = {};
        if (_this.state.isAll) {
            return;
        }
        if (_this.state.isLoading) {
            return;
        }
        const length = this.state.list.length;
        if (length % 10 === 0 && !this.state.isLoading) {
            _this.setState({
                isLoading: true,
                loading:true,
            }, () => {
                AppService.getUnreadMessageList(params).then((data) => {
                    if (data.message) {
                        Toast.show(data.message);
                        return;
                    }
                    if (!!data.errors === true && !!data.errors.length > 0) {
                        Toast.show(data.errors[0].message);
                    } else {
                        if (data.result.length === 0) {
                            _this.setState({
                                isAll: true,
                            });
                        } else {
                            _this.setState({
                                list: _this.state.list.concat(data.result),
                            });
                        }
                        _this.setState({
                            loading:false,
                            isLoading: false,
                        });
                        console.log(this.state.list);
                    }
                });
            });
        }
    }
    //已读
    read(id) {
        // console.log(params, 'params');
        let params = {
            ids:[]
        };
        params.ids.push(id);
        AppService.readMessage(params).then((data) => {
            if (data.message) {
                Toast.show(data.message);
                return;
            }
            if (!!data.errors === true && !!data.errors.length > 0) {
                Toast.show(data.errors[0].message);
            } else {
                console.log(data.result);
                Toast.show("消息已读");
            }
        });
    }

    /* 渲染列表*/
    keyExtractor = (item, index) => index;
    renderItem({ item, index }) {
        return (
            <TouchableOpacity style={[styles.row,{marginTop:10},{borderBottomWidth:1}]}  key={index}
                              onPress={()=>{}}>
                <View style={[styles.tableLine, { flex: 1 }]}>
                    <Image source={submitLog} resizeMode="contain" style={styles.submitLogIcon} />
                    <Text style={styles.time}>事件上报  上午 9:00</Text>
                </View>
                <View style={[styles.tableLine, { flex: 1 }]}>
                    <Text style={styles.title}>{item.messageTitle}</Text>
                </View>
                <View style={[styles.tableLine, { flex: 1 }]}>
                    <Text style={styles.text}>{item.messageContent}</Text>
                </View>

                {/*<Image style={styles.icon} source={require('../../img/arrow_right.png')} resizeMode={'contain'}/>*/}
            </TouchableOpacity>
        );
    }
    render(){
        return(
            <View style={styles.bg}>
                <StatusBar barStyle={'default'}/>
                {this.state.totalcount !=0 &&
                <FlatList
                    onEndReachedThreshold={0.05}
                    onEndReached={this.addList.bind(this)}
                    data={this.state.list}
                    renderItem={this.renderItem.bind(this)}
                    keyExtractor={this.keyExtractor}
                />}
                {this.state.totalcount ==0 && <View style={{display:'flex',alignItems:'center',justifyContent:'center'}}>
                    <Image source={noResult} resizeMode="contain" style={styles.noResult} />
                    <Text style={{fontSize:16,color:'#b2b2b2'}}>暂无数据~</Text>
                </View>}
                {this.state.loadMore && <ActivityIndicator />}
                {this.state.loading && <View style={styles.loadingBg}>
                    <ActivityIndicator size="large" />
                </View>}
            </View>
        )
    }
}
const styles = StyleSheet.create({
    backWrap: {
        justifyContent: 'center',
        paddingLeft: 18.5/zoomW,
        paddingRight: 18.5/zoomW,
        height: 44/zoomH,
    },
    back: {
        width: 8.5/zoomW,
        height: 15/zoomH,
    },
    bg:{
        flex:1,
        backgroundColor:'#f6f6f6',
    },
    row:{
        height:118/zoomH,
        flexDirection:'column',
        paddingHorizontal:15/zoomW,
        // alignItems:'center',
        borderBottomColor:'#dddddd',
        backgroundColor:'white',
        justifyContent: 'center',
    },
    title:{
        fontSize:16,
        color:'#4b4b4b',
        flex:1,
        marginLeft:44/zoomW
    },
    text:{
        color:'#A9A9A9',
        fontSize:14,
        marginLeft:44/zoomW
    },
    time:{
        color:'#A9A9A9',
        fontSize:14,
        marginLeft:17/zoomW
    },
    img:{
        width:31/zoomW,
        height:31/zoomW,

    },
    noResult: {
        width: (300 / zoomW),
        height: (138 / zoomH),
        marginTop: (150 / zoomH),
        marginBottom: (30 / zoomH),
    },
    tableLine:{
        marginTop: (5 / zoomH),
        flexDirection:'row',
    },
    submitLogIcon:{
        // backgroundColor: "#3E6DB7",
        width: (27 / zoomW),
        height: (20 / zoomH),
    },
    loadingBg:{
        width:'100%',
        height:'100%',
        position:'absolute',
        display:'flex',
        alignItems:'center',
        justifyContent:'center'
    },
});