notification.js 5.68 KB
/**
 * Created by Cassie on 2018/05/14
 * 通知人员
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Image,
    ScrollView,
    Text,
    TextInput,
    FlatList,
    TouchableOpacity,
    InteractionManager
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import ScrollableTabView, {DefaultTabBar} from 'react-native-scrollable-tab-view';
import {width, height, zoomW, zoomH} from '../../utils/getSize';
import {xnToast, xnBorderWidth} from '../../utils/utils';
import AppService from "../../service/AppService";
import NotificationList from './notificationList';
/*import { observable, useStrict, action } from 'mobx';*/
const back = require('../../img/returnB.png');
const search = require('../../img/search.png');
const allDel = require('../../img/allDel.png');
const bread = require('../../img/bread.png');
const avatar = require('../../img/avatar.png');
const addTarget = require('../../img/addTarget.png');
const withdraw = require('../../img/withdraw.png');

/*class sendState {
    @observable ajaxNumber = 0;
    @action sendAjax = () => {
        this.ajaxNumber++;
    };
    @action backAjax = () => {
        this.ajaxNumber--;
    };
}

const newState = new sendState();*/

export default class Notifications extends Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        title: "通知人员",
        headerLeft: (<View style={{display: 'flex', flexDirection: 'row'}}>
            <TouchableOpacity style={styles.topIcon}
                              onPress={navigation.state.params ? navigation.state.params.back : null}>
                <Image source={back} style={{width: (16 / zoomH), height: (16 / zoomH)}} resizeMode="contain"/>
            </TouchableOpacity>
        </View>),
        headerRight: (
            <View></View>)
    });

    constructor(props) {
        super(props);
        this.state = {
            confirmUserCount:0,
            unConfirmUserCount:0,
            sheetList: [1, 2, 3],
            unconfirmedList: [],
            confirmedList: [],
        };

    }
    componentWillMount() {
        this.getUserList(false);
    }

    getUserList = (isConfirm) => {
        let _this = this;
        let vm = {
            pageSize:0,
            announcementId:this.props.navigation.state.params.id,
            isConfirm:isConfirm
        };
        // newState.sendAjax();
        console.log(vm.announcementId);
        AppService.findAnnouncementUserList(vm).then(data => {
            // newState.backAjax();
            if (data.errors == null || data.errors.length > 0) {
                xnToast(data.errors[0].message);
                return
            }
            if(isConfirm){
                _this.setState({
                    confirmUserCount:data.confirmUserCount?data.confirmUserCount:0,
                    unConfirmUserCount:data.unConfirmUserCount,
                    confirmedList:data.result
                });
            }else{
                _this.setState({
                    confirmUserCount:data.confirmUserCount?data.confirmUserCount:0,
                    unConfirmUserCount:data.unConfirmUserCount,
                    unconfirmedList:data.result
                });
            }
            console.log(_this);
        })
    };
    componentDidMount() {
        this.props.navigation.setParams({
            addNotice: () => {
                InteractionManager.runAfterInteractions(() => {
                    this.props.navigation.navigate('AddNotice');
                })
            },
            back: () => {
                this.props.navigation.goBack();
            }
        });
    };

    render() {
        return (
            <View style={styles.background}>
                <View style={{height: xnBorderWidth()}}></View>
                <View style={{height: (10 / zoomW), backgroundColor: '#ffffff'}}></View>

                <ScrollableTabView renderTabBar={() => <DefaultTabBar style={styles.tabStyle}/>}
                                   tabBarUnderlineStyle={styles.tabBarLine}
                                   tabBarActiveTextColor="#000000"
                                   tabBarInactiveTextColor="#000000"
                                   tabBarTextStyle={{fontSize: 14}}
                                       onChangeTab={(obj) => {
                                       if (obj.i === 1) {
                                           this.getUserList(true);
                                       } else {
                                           this.getUserList(false);
                                       }
                                   }}
                >
                    <NotificationList tabLabel={this.state.unConfirmUserCount+'人未确认'} unconfirmedList={this.state.unconfirmedList}
                                      navigation={this.props.navigation}
                                     />
                    <NotificationList tabLabel={this.state.confirmUserCount+'人已确认'} confirmedList={this.state.confirmedList}
                                      navigation={this.props.navigation}/>
                </ScrollableTabView>
            </View>


        );
    }
}

const styles = StyleSheet.create({
    topIcon: {
        paddingLeft: (10 / zoomW),
        paddingRight: (10 / zoomW),
        height: '100%',
        display: 'flex',
        alignItems: 'center'
    },

    background: {
        width: '100%',
        height: '100%',
        backgroundColor: '#ececf1',
    },

    tabStyle: {
        height: (40 / zoomH),
        backgroundColor: '#ffffff',
        elevation: 0
    },
    tabBarLine: {
        width: (40 / zoomW),
        backgroundColor: '#00BE3C',
        height: 3,
        borderRadius: 8,
        left: '20%',
    },
})