ItemCourse.js 6.17 KB
import React, { Component } from "react";
import { Image, StyleSheet, Text, TouchableOpacity, View, DeviceEventEmitter } from "react-native";

import _ from "lodash";
import { width, zoomH, zoomW } from "../../utils/getSize";
import { NoDoublePress } from "../../utils/utils";
import ItemHeaderInfo from '../../pages/component/ItemHeaderInfo';
import ItemBottomOperate from '../../pages/component/ItemBottomOperate';


export default class ItemCourse extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: "",
            threadData:{}
        };
    }

    componentDidMount() {
        this.dataHandle(this.props.item);
    }

    /**
     * 接口返回数据处理
     * @param {*} data
     */
    dataHandle(data) {
        // console.log('-------data-------',data);
        if (!!!data) {
            // xnToast("暂无数据!!!");
            return;
        }
        let attachmentList = [];
        let singleItem = {
            id: "",
            name: "",
            pictureUrl: [],
            description: ""
        };
        let urls = {
            url: ""
        };
        if (data.attachmentList !=undefined && data.attachmentList.length >0){
            urls.url = data.attachmentList[0].filePath || "";
            attachmentList.push(urls);
        }
        if ( !! data.threadDetail){
            singleItem.description = data.threadDetail.content;
        }
        singleItem.id = data.id;
        singleItem.name = data.title;
        singleItem.pictureUrl = attachmentList;

        this.setState({
            data: singleItem,
            threadData:data
        });
    }

    _detailClick = id => {
        //详情
        // this.props.nav.navigate("QuestionList", {
        //   id: id,
        //   userId: this.state.data.userId
        // });
        this.props.nav.navigate("ClassGrade", {id: id});
    };

    renderView() {
        return (
            <TouchableOpacity
                style={styles.itemBackground}
                activeOpacity={0.8}
                onPress={() => {
                    NoDoublePress.onPress(() => {
                        this._detailClick(this.state.data.id);
                    });
                }}
            >
                <View>
                    {/*个人信息*/}
                    <ItemHeaderInfo  itemList = {this.state.threadData} nav = {this.props.nav} showType = {this.props.showType}
                                     showReport = {this.props.showReport|| false}
                                     reportCallback = {()=>{
                                         if (this.props.reportCallback !=undefined){
                                             this.props.reportCallback();
                                         }
                                     }}/>
                    {/*文字*/}
                    <Text
                        style={{
                            marginTop: 14 / zoomH,
                            marginLeft: 15 / zoomW,
                            marginRight:15/zoomW,
                            fontSize: 17,
                            flex:1,
                            color: "rgba(0,0,0,0.85)" ,
                        }}
                        numberOfLines={2}
                    >
                        {this.state.data.name}
                    </Text>

                    {/*图片*/}
                    {!!this.state.data.pictureUrl &&
                    this.state.data.pictureUrl.length > 0 && (
                        <View
                            style={{
                                flexDirection: "row",
                                alignItems: "center",
                                flexWrap: "wrap",
                                marginTop: 14
                            }}
                        >
                            {this.state.data.pictureUrl
                                ? this.state.data.pictureUrl.map((v, i) =>
                                    this.renderImageItem(v, i)
                                )
                                : null}
                        </View>
                    )}
                    <ItemBottomOperate
                        itemList={this.state.threadData}
                        nav={this.props.nav}
                        hideForward={true}
                    />
                </View>
                {/*<TouchableOpacity activeOpacity={0.8} style={styles.starItem}>*/}
                    {/*<Text*/}
                        {/*style={{*/}
                            {/*fontSize: 12,*/}
                            {/*color: "#000000",*/}
                            {/*marginTop: 12 / zoomH,*/}
                            {/*marginBottom: 14 / zoomH,*/}
                            {/*marginLeft: 15 / zoomW,*/}
                            {/*opacity: 0.45*/}
                        {/*}}*/}
                    {/*>*/}
                        {/*{this.state.data.description}*/}
                    {/*</Text>*/}
                {/*</TouchableOpacity>*/}
                <View style={{ height: 6/zoomH, backgroundColor: "#F3F5F6" }} />

            </TouchableOpacity>
        );
    }

    //渲染图片列表item
    renderImageItem(item, i) {
        let itemWidth = width ;
        return (
            <View
                key={i}
                style={[
                    {
                        width: itemWidth,
                        height: itemWidth,

                        backgroundColor: "#FFFFFF"
                    }
                ]}
            >
                <Image
                    style={{ width: "100%", height: "100%" }}
                    source={{
                        uri: item.url,
                        cache: "force-cache"
                    }}
                    resizeMode="cover"
                />
            </View>
        );
    }

    render() {
        return (
            <View>
                {_.isEmpty(this.state.data) ? null : <View>{this.renderView()}</View>}
            </View>
        );
    }
}

const styles = StyleSheet.create({
  itemBackground: {
    backgroundColor: "#FFFFFF"
  },
  starItem: {
    flex: 1,
    justifyContent: "flex-start",
      alignItems:'center',
    flexDirection: "row"
  }
});