kede-HN-officialWeb-client/js/component/account/index/collection.jsx

import React, { Component } from 'react';
import { Button,Radio ,message,Row,Col, Spin,Pagination} from 'antd';
import axios from 'axios';
import './collection.less';

class Collection extends Component {
	constructor(props) {
		super(props);
		this.state = {
            loading:false,
            current:1,
            nub:'1'
        };
    }
    //服务
    loadDataService(page){
        this.setState({
            loading:true,
        })
        let url = globalConfig.context +  '/api/user/portal/listProjectIInterestedIn' 
        axios.get(url,{
            params:{
                pageNo:page||1,
                pageSize:(this.props.nub)?4:8
            }
        })
        .then(data=>{
            let theData=data.data.data,
                theArr = [],
                times = new Date().getTime(),
                days = parseInt(times / (1000 * 60 * 60 * 24));
            if (!data.data || !data.data.data.list) {
                if (data.data.error && data.data.error.length) {
                    message.warning(data.data.error[0].message);
                };
            } else {
                for (let i = 0; i < theData.list.length; i++) {
                    let thisdata = theData.list[i],
                        create = parseInt(thisdata.createTime / (1000 * 60 * 60 * 24));
                    let newState = (days-create)<7?true:false;
                    var introd=thisdata.introduce?(thisdata.introduce).replace(/<\/?.+?>/g,""):thisdata.introduce;
                    theArr.push({
                        key: i,
                        id: thisdata.id,
                        newState:newState,
                        name:thisdata.name,
                        introduce:introd&&introd.length>40?introd.substr(0,40)+'...':introd,
                        img: thisdata.maxImgUrl, //编号
                    });
                };
            };
            this.setState({
                loading:false,
                dataList:theArr,
                total:data.data.data.totalCount
            })
        })
    }
    //成果
    loadDataAchievement(page){
        this.setState({
            loading:true,
        })
        let url = globalConfig.context +  '/api/user/portal/listAchievementIInterestedIn' 
        axios.get(url,{
            params:{
                pageNo:page||1,
                pageSize:(this.props.nub)?4:8
            }
        })
        .then(data=>{
            let theData=data.data.data,
                theArr = [],
                times = new Date().getTime(),
                days = parseInt(times / (1000 * 60 * 60 * 24));
            if (!data.data || !data.data.data.list) {
                if (data.data.error && data.data.error.length) {
                    message.warning(data.data.error[0].message);
                };
            } else {
                for (let i = 0; i < theData.list.length; i++) {
                    let thisdata = theData.list[i],
                        create = parseInt(thisdata.releaseDate / (1000 * 60 * 60 * 24));
                    let newState = (days-create)<7?true:false;
                    theArr.push({
                        key: i,
                        id: thisdata.id,
                        newState:newState,
                        name:thisdata.name,
                        introduce:thisdata.introduction&&thisdata.introduction.length>40?thisdata.introduction.substr(0,40)+'...':thisdata.introduction,
                        img: thisdata.firstPicture, //编号
                    });
                };
            };
            this.setState({
                loading:false,
                dataList:theArr,
                total:data.data.data.totalCount
            })
        })
    }
    //需求
    loadDataDemand(page){
        this.setState({
            loading:true,
        })
        let url = globalConfig.context +  '/api/user/portal/listDemandIInterestedIn' 
        axios.get(url,{
            params:{
                pageNo:page||1,
                pageSize:(this.props.nub)?4:8
            }
        })
        .then(data=>{
            let theData=data.data.data,
                theArr = [],
                times = new Date().getTime(),
                days = parseInt(times / (1000 * 60 * 60 * 24));
            if (!data.data || !data.data.data.list) {
                if (data.data.error && data.data.error.length) {
                    message.warning(data.data.error[0].message);
                };
            } else {
                for (let i = 0; i < theData.list.length; i++) {
                    let thisdata = theData.list[i],
                        create = parseInt(thisdata.releaseDate / (1000 * 60 * 60 * 24));
                    let newState = (days-create)<7?true:false;
                    theArr.push({
                        key: i,
                        id: thisdata.id,
                        newState:newState,
                        name:thisdata.name,
                        introduce:thisdata.problemDes&&thisdata.problemDes.length>40?thisdata.problemDes.substr(0,40)+'...':thisdata.problemDes,
                        img: thisdata.firstPic, //编号
                    });
                };
            };
            this.setState({
                loading:false,
                dataList:theArr,
                total:data.data.data.totalCount
            })
        })
    }
    componentWillMount(){
        this.loadDataService(1)
    }
    tabFun(e){
       this.setState({ nub: e.target.value,current:1})
       switch(e.target.value){
           case '1':
                this.loadDataService(1)
                break;
           case '2':
                this.loadDataDemand(1)
                 break;
           case '3':
                this.loadDataAchievement(1)
                break;
       }
    }
    //分页
    onShowSizeChange(current, pageSize){
        this.setState({
            current:current,
            pageSize:pageSize
        })
        switch(this.state.nub){
            case '1':
                 this.loadDataService(current)
                 break;
            case '2':
                 this.loadDataDemand(current)
                  break;
            case '3':
                 this.loadDataAchievement(current)
                 break;
        }
    }
    jump(item){
        let url='';
        switch(this.state.nub){
            case '1':
                url = globalConfig.context+`/portal/service/serviceDetail?id=${item.id}`;
            break;
            case '2':
                url=globalConfig.context+`/portal/technologyTrading/demandDetail?id=${item.id}&type=0`;
            break;
            case '3':
                url=globalConfig.context+`/portal/technologyTrading/achievementDetail?id=${item.id}&type=1`;
            break;
        }
        window.open(url);
    }
	render() {
        const dataList =this.state.dataList || [];
		return <div className="user-content">
            <div className="title" >
                我的收藏
            </div>
            <div>
                <Radio.Group className="btnGroup" value={this.state.nub} onChange={this.tabFun.bind(this)}>
                    <Radio.Button value="1">运用</Radio.Button>
                    <Radio.Button value="2">需求</Radio.Button>
                    <Radio.Button value="3">成果</Radio.Button>
                </Radio.Group>
            </div>
            <div className="imgList">
                <Spin spinning={this.state.loading}>
                    {dataList.length?<Row>
                        {dataList.map((item,index)=>{
                            return<Col span={5} key={index} onClick={(e)=>{this.jump(item)}}>
                                    <div className="img">
                                        <div className="imgHeader">
                                            <div className="imgBj">
                                                 {item.img?<img src={globalConfig.avatarHost+'/upload'+item.img}  alt=""/>:''}
                                            </div>
                                            {item.newState&&<span className="new"></span>}
                                            <div className="divP"><p>{item.introduce?item.introduce:'暂无'}</p></div>
                                        </div>  
                                        <p className="txt">{item.name}</p>
                                    </div>
                                </Col>
                        })
                        }   
                    </Row>:
                    <Row style={{color:'#333'}}>暂无数据</Row>}
                </Spin>
                {this.state.total?<Pagination className="page" pageSize={this.props.nub?4:8} current={this.state.current} total={this.state.total} onChange={(e,pageSize)=>{this.onShowSizeChange(e,pageSize)}}/>:''}
            </div>
        </div>
	}
}

export default Collection;