topicInfo.js 5.26 KB
import React, {Component} from 'react';
import {DeviceEventEmitter, Image, StyleSheet, Text, View} from 'react-native';
import {zoomH, zoomW} from '../../utils/getSize';
import {xnToast} from "../../utils/utils";
import AppService from "../../service/AppService";
//图片资源
const defaultIcon = require('../../img/defaultIcon.png');
const vIcon = require('../../img/v.png');

// 变量定义
{
    var parm_topicId = 0
}

/**
 * 话题信息
 * 调用者需要传入的参数 topicInfoData : 话题信息数据源
 */
export default class topicInfo extends Component {

    static navigationOptions = ({ navigation, screenProps }) => ({
        header:null,
    });

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            data:[]
            // data:{
            //     name:"最爱精油榜",
            //     description:"你心中最喜欢日常使用的精油是哪一款呢!快来bo出图片吧!",
            //     iconFileUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541419615088&di=95ba0882b456756b2cf34708043a62ec&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01067f55454cbf0000019ae993a3c1.jpg%403000w_1l_2o_100sh.jpg",
            //     readCount:1398,
            //     replyCount:1334
            // }
        }
    }

    componentWillMount(){
        parm_topicId = this.props.id;
        // 查询话题信息
        this.getTopic(parm_topicId);
    };

    getTopic(id){
        if (!global.isConnected){
            xnToast('暂无网络连接,请稍后重试!');
            return;
        }
        let params = {
            id: id,
        };
        //console.log(params);
        AppService.getTopic(params).then((data) => {
            //console.log(data);
            if (data.message) {
                DeviceEventEmitter.emit('getTopicInfo', {});
                xnToast(data.message);
                return;
            }
            if (data.errors.length > 0) {
                DeviceEventEmitter.emit('getTopicInfo', {});
                xnToast(data.errors[0].message);
            } else {
                // ”万“”处理
                //data.topic.topicStatistics.readNum = 123456;
                data.topic.topicStatistics.readNum_str = data.topic.topicStatistics.readNum;
                if (data.topic.topicStatistics.readNum > 100000) {
                    data.topic.topicStatistics.readNum_str = Math.floor(data.topic.topicStatistics.readNum/100000 * 10) / 10 + "万";
                    //var temp =Math.floor(data.topic.topicStatistics.readNum/100000 * 10) / 10
                }
                // ”万“”处理
                //data.topic.topicStatistics.replyNum = 654321;
                data.topic.topicStatistics.forumNum_str = data.topic.topicStatistics.forumNum;
                if (data.topic.topicStatistics.forumNum > 100000) {
                    data.topic.topicStatistics.forumNum_str = Math.floor(data.topic.topicStatistics.forumNum/100000 * 10) / 10 + "万";
                    //var temp =Math.floor(data.topic.topicStatistics.readNum/100000 * 10) / 10
                }
                this.setState({
                    data:data.topic
                })
                DeviceEventEmitter.emit('getTopicInfo', data.topic.iconFileUrl);
            }
        }).catch((error) => {
            this.setState({
                loading: false
            });
            DeviceEventEmitter.emit('getTopicInfo', {});
            xnToast(error)
        })
    }

    // 话题信息
    render() {
        return (
            <View style = {styles.background} >
                <Image  style={styles.img} source={{uri: this.state.data.iconFileUrl}} resizeMode="cover" />
                <View style = {styles.textArea}>
                    <Text style = {styles.title} numberOfLines = {1}>#{this.state.data.name?this.state.data.name:""}#</Text>
                    <Text style = {styles.readAndDiscussion} numberOfLines = {1}>{this.state.data.topicStatistics?this.state.data.topicStatistics.readNum_str:"0"}阅读 {this.state.data.topicStatistics?this.state.data.topicStatistics.forumNum_str:"0"}讨论</Text>
                    <Text style = {styles.intro} numberOfLines = {2}>{this.state.data.description?this.state.data.description:""}</Text>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    background:{
        flex:1,
        width:'100%',
        height:'100%',
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'flex-start',
        justifyContent: 'flex-start'
    },

    img : {
        height:86/zoomW,
        width:86/zoomW,
        display: 'flex',
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
        flexDirection: 'column'
    },

    textArea : {
        flex:1,
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
        marginLeft: 15 / zoomW,
        marginTop: 0,
        marginBottom: 0
    },

    title : {
        height: 28 / zoomH,
        fontSize:20,
        color:'white'
    },

    readAndDiscussion:{
        height: 17 / zoomH,
        fontSize:12,
        color:'white'
    },

    intro:{
        fontSize:12,
        color:'white'
    },
});