targetAbout.js 5.48 KB
/**
 * Created by Cassie on 2018/05/14
 */
import React, {Component} from "react";
import {StyleSheet, View, StatusBar,Text, TouchableOpacity, Image, ScrollView} from "react-native";
import moment from "moment";
import {zoomW, zoomH} from "../../utils/getSize";
import {NoDoublePress} from "../../utils/utils";

const back = require('../../img/returnB.png');
const avatar = require('../../img/avatar.png');

export default class TargetAbout extends Component {
    constructor(props) {
        super(props);
        this.state = {
            title:this.props.navigation.state.params.from,
            sheetList: [],
        };
    };

    componentWillMount() {
        this.setState({
            sheetList: this.props.navigation.state.params.list
        })
    };

    componentDidMount() {
        this.props.navigation.setParams({
            title:this.state.title,
            backgroundColor:'white',
            titleColor:'black',
            isBack:true,
        });

    };

    /*渲染列表*/
    renderItem(item, index) {
        return (
            this.props.navigation.state.params.from == '关联任务' ?
                <TouchableOpacity activeOpacity={0.8} key={index} style={styles.targetItem} onPress={() => {
                    NoDoublePress.onPress(() => this.props.navigation.navigate('TargetDetail', {
                        targetId: item.objectId,
                        isAbort: item.isAbort,
                        isDone: item.isDone,
                        from: 'targetAbout'
                    }))
                }}>
                    <View style={{
                        borderRadius: (30 / zoomH),
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        borderStyle: 'solid',
                        borderColor: '#ddd',
                        borderWidth: StyleSheet.hairlineWidth
                    }}>
                        <Image
                            source={item.avarUrl ? {uri: item.avarUrl + '?x-oss-process=image/resize,w_500'} : avatar}
                            style={{width: (52 / zoomH), height: (52 / zoomH), borderRadius: (26 / zoomH)}}
                            resizeMode="cover"/>
                    </View>
                    <View style={{flex: 1, paddingLeft: (10 / zoomW)}}>
                        <Text style={{fontSize: 17, color: '#000'}} numberOfLines={1}>{item.objectName}</Text>
                        <Text style={{fontSize: 14, color: '#666'}}
                              numberOfLines={1}>{'结束时间:' + moment(Number(item.endTime)).format('YYYY-MM-DD HH:mm')}</Text>
                        {item.objectDescription && <Text style={{fontSize: 14, color: '#666'}}
                                                         numberOfLines={1}>{'任务详情:' + item.objectDescription}</Text>}
                    </View>
                </TouchableOpacity>
                :
                <View key={index} style={styles.targetItem}>
                    <View style={{
                        width: (50 / zoomH),
                        height: (50 / zoomH),
                        borderRadius: (25 / zoomH),
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        borderStyle: 'solid',
                        borderColor: '#ddd',
                        borderWidth: StyleSheet.hairlineWidth
                    }}>
                        <Image source={item.avatar ? {uri: item.avatar + '?x-oss-process=image/resize,w_500'} : avatar}
                               style={{width: (50 / zoomH), height: (50 / zoomH), borderRadius: (25 / zoomH)}}
                               resizeMode="cover"/>
                    </View>
                    <View style={{flex: 1, paddingLeft: (10 / zoomW), display: 'flex', justifyContent: 'center'}}>
                        <Text style={{fontSize: 17, color: '#000'}} numberOfLines={1}>{item.userName}</Text>
                    </View>
                </View>
        )
    };

    componentWillUnmount() {
        this.setState = (state, callback) => {
            return;
        };
    };

    render() {
        return (
            <View style={styles.background}>
                <StatusBar
                    backgroundColor={'#FFFFFF'}
                    barStyle={"dark-content"}
                    networkActivityIndicatorVisible
                />
                <ScrollView style={{width: '100%'}}>
                    <View style={{width: '100%', height: (18 / zoomH)}}/>
                    {this.state.sheetList && this.state.sheetList.map((item, index) => this.renderItem(item, index))}
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    topIcon: {
        paddingLeft: (10 / zoomW),
        paddingRight: (10 / zoomW),
        height: '100%',
        display: 'flex',
        justifyContent: 'center'
    },
    background: {
        flex: 1,
        backgroundColor: '#ececf1',
        display: 'flex',
        alignItems: 'center'
    },
    targetItem: {
        flex: 1,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        borderStyle: 'solid',
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBottomColor: '#eee',
        paddingLeft: (15 / zoomW),
        paddingRight: (15 / zoomW),
        paddingTop: (10 / zoomH),
        paddingBottom: (10 / zoomH),
        backgroundColor: '#fff'
    }
});