kede-client/js/component/subscriberDetail/content.jsx

import React from 'react';
import { Icon, message, Row, Col, Spin, Tag, Pagination, Modal, Button } from 'antd';
import './detail.less';
import { getSearchUrl, getAchievementCategory, getDemandType, getTransferMode, getMaturity } from '../tools';
import { getProvince } from '../NewDicProvinceList';
import { getIndustryCategory } from '../DicIndustryList';
import { getTechField } from '../DicTechFieldList';
import ajax from 'jquery/src/ajax/xhr.js'
import $ from 'jquery/src/ajax';

import avatarImg from '../../../image/avatarImg.png';
import list_title_ico_1 from '../../../image/list_title_ico_1.png';
import list_title_ico_2 from '../../../image/list_title_ico_2.png';
import list_title_ico_3 from '../../../image/list_title_ico_3.png';
import demand_ico_5 from '../../../image/demand_ico_5.png';
import demand_ico_3 from '../../../image/demand_ico_3.png';
import demand_ico_2 from '../../../image/demand_ico_2.png';
import demand_ico_1 from '../../../image/demand_ico_1.png';
import achievement_ico_1 from '../../../image/achievement_ico_1.png';
import achievement_ico_2 from '../../../image/achievement_ico_2.png';
import score_ioc from '../../../image/score_ioc.png';
import demand_sup from '../../../image/demand_sup.png';

const Content = React.createClass({
    loadData () {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            url: globalConfig.context + "/api/user/partner/detail",
            data: {
                uid: this.state.uid,
                type: this.state.type
            }
        }).done(function (data) {
            if (data.error && data.error.length) {
                message.warning(data.error[0].message);
            } else {
                this.state.data = data.data || {};
                this.state.theField = this.state.type == 0 ? (data.data.engagedField ? data.data.engagedField.split(',') : []) : (data.data.field ? data.data.field.split(',') : []);
                this.state.theImgsrc = this.state.type == 0 ? (data.data.lifePhotoUrl ? data.data.lifePhotoUrl.split(',') : []) : (data.data.publicityPictureUrl ? data.data.publicityPictureUrl.split(',') : []);
            }
            this.setState({
                data: this.state.data,
                theField: this.state.theField,
                theImgsrc: this.state.theImgsrc,
                loading: false
            });
        }.bind(this));
    },
    achievementLoadData (pageNo) {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/user/partner/achievementList",
            data: {
                ownerId: this.state.uid,
                pageNo: pageNo || 1,
                pageSize: this.state.achievementPagination.pageSize
            },
            success: function (data) {
                let theArr = [];
                if (!data.data || !data.data.list) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    for (let i = 0; i < data.data.list.length; i++) {
                        let thisdata = data.data.list[i];
                        theArr.push({
                            key: i,
                            id: thisdata.id,
                            serialNumber: thisdata.serialNumber,
                            dataCategory: thisdata.dataCategory,
                            name: thisdata.name,
                            transferPrice: thisdata.transferPrice,
                            fieldA: thisdata.fieldA,
                            fieldB: thisdata.fieldB,
                            bargainingMode: thisdata.bargainingMode,
                            maturity: thisdata.maturity,
                            keyword: thisdata.keyword,
                            category: thisdata.category,
                            ownerType: thisdata.ownerType,
                            releaseDate: thisdata.releaseDate,
                            releaseDateFormattedDate: thisdata.releaseDateFormattedDate,
                        });
                    };
                }
                this.state.achievementPagination.current = data.data.pageNo;
                this.state.achievementPagination.total = data.data.totalCount;
                this.setState({
                    achievementDataSource: theArr,
                    achievementPagination: this.state.achievementPagination
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    demandLoadData (pageNo) {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/user/partner/demandList",
            data: {
                employerId: this.state.uid,
                pageNo: pageNo || 1,
                pageSize: this.state.demandPagination.pageSize
            },
            success: function (data) {
                let theArr = [];
                if (!data.data || !data.data.list) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    for (let i = 0; i < data.data.list.length; i++) {
                        let thisdata = data.data.list[i];
                        theArr.push({
                            key: i,
                            id: thisdata.id,
                            serialNumber: thisdata.serialNumber,
                            dataCategory: thisdata.dataCategory,
                            problemDes: thisdata.problemDes,
                            budgetCost: thisdata.budgetCost,
                            name: thisdata.name,
                            keyword: thisdata.keyword,
                            releaseDate: thisdata.releaseDate,
                            demandType: thisdata.demandType,
                            industryCategoryA: thisdata.industryCategoryA,
                            industryCategoryB: thisdata.industryCategoryB,
                            validityPeriod: thisdata.validityPeriod,
                            validityPeriodFormattedDate: thisdata.validityPeriodFormattedDate,
                            releaseDateFormattedDate: thisdata.releaseDateFormattedDate
                        });
                    };
                }
                this.state.demandPagination.current = data.data.pageNo;
                this.state.demandPagination.total = data.data.totalCount;
                this.setState({
                    demandDataSource: theArr,
                    demandPagination: this.state.demandPagination
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    interestClick () {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/user/interest/interestUser',
            data: {
                toUid: this.state.uid
            },
            success: function (data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                } else {
                    this.loadData();
                };
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));;
    },
    addConsultorder () {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/user/consultorder/add',
            data: {
                toUserId: this.state.uid
            },
            success: function (data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                } else {
                    this.loadData();
                };
            }.bind(this),
        }).always(function () {
            this.setState({
                visible: false,
                loading: false
            });
        }.bind(this));;
    },
    consultClick () {
        $.ajax({
            method: "get",
            dataType: "json",
            url: globalConfig.context + "/api/user/consultorder/price"
        }).done(function (data) {
            if (data.error && data.error.length) {
                message.warning(data.error[0].message);
            } else {
                this.state.consultPrice = data.data || 0;
            }
            this.setState({
                visible: true
            });
        }.bind(this));
    },
    cancelInterestClick () {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/user/interest/cancelInterest',
            data: {
                interestId: this.state.data.interestId
            },
            success: function (data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                } else {
                    this.loadData();
                };
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));;
    },
    getInitialState () {
        return {
            loading: false,
            visible: false,
            consultPrice: 0,
            theField: [],
            data: {},
            theImgsrc: [],
            achievementPagination: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            achievementDataSource: [],
            demandDataSource: [],
            demandPagination: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
        };
    },
    componentWillMount () {
        if (window.location.search) {
            let theObj = getSearchUrl(window.location.search);
            if (theObj.rid && theObj.rid != 'null') {
                this.state.uid = theObj.rid;
                this.state.type = theObj.type;
                this.loadData();
                this.achievementLoadData();
                this.demandLoadData();
            };
        };
    },
    achievementListClick (record, index) {
        window.open(globalConfig.context + '/portal/detail/achievementDetail.html?id=' + record.id + '&type=' + record.ownerType);
    },
    demandListClick (record, index) {
        window.open(globalConfig.context + '/portal/detail/demandDetail.html?id=' + record.id + '&type=' + record.dataCategory);
    },
    render () {
        const theData = this.state.data;
        return (
            <Spin spinning={this.state.loading} style={{ marginBottom: '80px' }} >
                <div className="detail-content">
                    <Row>
                        <Col span={8}>
                            <div className="avatar-box">
                                <img src={(theData.personPortraitUrl || theData.logoUrl) ?
                                    (globalConfig.avatarHost + "/upload" + (this.state.type == 0 ? theData.personPortraitUrl : theData.logoUrl))
                                    : avatarImg} alt="头像" />
                            </div>
                            <div className="interest">
                                {theData.interestId ? <a onClick={this.cancelInterestClick}><Icon type="heart" /> 不感兴趣</a>
                                    : <a onClick={this.interestClick}><Icon type="heart-o" /> 感兴趣</a>}
                            </div>
                            <div className="interest">
                                <a onClick={() => { this.consultClick() }}><Icon type="message" /> 线下咨询</a>
                            </div>
                        </Col>
                        <Col span={16} className="avatar-right">
                            <div className="user-name">{this.state.type == 0 ? theData.username : theData.unitName}</div>
                            <div>
                                Lv.
                                <span className="user-level">{theData.level}</span>
                                <span className="user-type">{this.state.type == 0 ? '个人' : '组织'}</span>
                            </div>
                            <div className="user-desc">
                                <span>简介：</span>
                                {this.state.type == 0 ? theData.personalProfile : theData.companyIntroduction}</div>
                        </Col>
                    </Row>
                    <Row className="all-row">
                        <Col span={4}>
                            <div className="column-title">所在地:</div>
                        </Col>
                        <Col span={20}>
                            <div className="column-text">{getProvince(theData.province, theData.city, theData.area)}</div>
                        </Col>
                    </Row>
                    <Row className="all-row">
                        <Col span={4}>
                            <div className="column-title">专业领域:</div>
                        </Col>
                        <Col span={20}>
                            <div className="column-text">{getTechField(this.state.theField[0], this.state.theField[1], this.state.theField[2])}</div>
                        </Col>
                    </Row>
                    <Row className="all-row">
                        <Col span={4}>
                            <div className="column-title">能力标签:</div>
                        </Col>
                        <Col span={20}>
                            <div className="column-text">
                                {theData.abilityLabel ? theData.abilityLabel.split(',').map((item) => {
                                    return <Tag key={item}>{item}</Tag>
                                }) : ''}
                            </div>
                        </Col>
                    </Row>
                </div>
                <div className="detail-list">
                    <div className="list-title">
                        <img src={list_title_ico_1} alt="" />
                        <span>用户展示</span>
                    </div>
                    <div className="column-img clearfix">
                        {this.state.theImgsrc.map((item, i) => {
                            return <div className="img-box" key={i}>
                                <img src={globalConfig.avatarHost + "/upload" + item} alt=""
                                    onClick={() => { window.open(globalConfig.avatarHost + "/upload" + item) }} />
                            </div>
                        })}
                    </div>
                </div>
                <div className="detail-list">
                    <div className="list-title">
                        <img src={list_title_ico_2} alt="" />
                        <span>技术成果</span>
                    </div>
                    <ul className="detail_interest_sub clearfix">
                        {this.state.achievementDataSource.map((item, i) => {
                            return <li key={item.id} onClick={() => { this.achievementListClick(item) }}
                                style={{ float: 'left', marginLeft: '18px', width: '48%' }}>
                                <div className="interest_list_title" style={{ paddingLeft: '20px' }}>
                                    <span>{item.name}</span>
                                </div>
                                <div className="detial_sub">
                                    <span className="detial_sub_icon">
                                        <img src={demand_ico_5} alt="成果" />
                                    </span>
                                    <span className="detial_sub_title">关键词: </span>
                                    <span className="detial_sub_text">{item.keyword}</span>
                                </div>
                                <div className="detial_sub">
                                    <span className="detial_sub_icon">
                                        <img src={demand_ico_2} alt="类型" />
                                    </span>
                                    <span className="detial_sub_title">技术类型: </span>
                                    <span className="detial_sub_text">{getAchievementCategory(item.category)}</span>
                                </div>
                                <div className="detial_sub">
                                    <span className="detial_sub_icon">
                                        <img src={demand_ico_1} alt="行业" />
                                    </span>
                                    <span className="detial_sub_title">行业分类: </span>
                                    <span className="detial_sub_text">{getIndustryCategory(item.fieldA, item.fieldB)}</span>
                                </div>
                                <div className="detial_sub">
                                    <span className="detial_sub_icon">
                                        <img src={demand_ico_3} alt="标价" />
                                    </span>
                                    <span className="detial_sub_title">标价: </span>
                                    <span className="money_text">{item.transferPrice ? (item.transferPrice + '万元') : '价格面议'}</span>
                                </div>
                                <div className="detial_sub">
                                    <span className="detial_sub_icon">
                                        <img src={achievement_ico_1} alt="交易方式" />
                                    </span>
                                    <span className="detial_sub_title">交易方式: </span>
                                    <span className="money_text">{item.bargainingMode == 1 ? '定价' : '面议'}</span>
                                </div>
                                <div className="detial_sub">
                                    <span className="detial_sub_icon">
                                        <img src={achievement_ico_2} alt="成熟度" />
                                    </span>
                                    <span className="detial_sub_title">技术成熟度: </span>
                                    <span className="detial_sub_score" >
                                        <span style={{ width: (item.maturity ? Number(item.maturity) * 20 : 0) + '%' }}>
                                            <img src={score_ioc} alt={getMaturity(item.maturity)} />
                                        </span>
                                    </span>
                                </div>
                            </li>
                        })}
                    </ul>
                    <Pagination style={{ float: 'right' }}
                        onChange={(e) => { this.achievementLoadData(e); }}
                        total={this.state.achievementPagination.total}
                        showTotal={() => { return '共' + this.state.achievementPagination.total + '条数据' }}
                        current={this.state.achievementPagination.pageNo}
                        pageSize={this.state.achievementPagination.pageSize} />
                </div>
                <div className="detail-list">
                    <div className="list-title">
                        <img src={list_title_ico_3} alt="" />
                        <span>技术需求</span>
                    </div>
                    <ul className="detail_interest_sub clearfix">
                        {this.state.demandDataSource.map((item, i) => {
                            return <li key={item.id} onClick={() => { this.demandListClick(item) }}>
                                <div className="interest_list_title">
                                    <img src={demand_sup} alt="" />
                                    <span>{item.name}</span>
                                </div>
                                <div className="detial_sub">
                                    <span className="detial_sub_icon">
                                        <img src={demand_ico_5} alt="需求" />
                                    </span>
                                    <span className="detial_sub_title">关键词: </span>
                                    <span className="detial_sub_text">{item.keyword}</span>
                                </div>
                                <div className="detial_sub">
                                    <span className="detial_sub_icon">
                                        <img src={demand_ico_5} alt="需求" />
                                    </span>
                                    <span className="detial_sub_title">需求描述: </span>
                                    <span className="detial_sub_text">{item.problemDes}</span>
                                </div>
                                <div className="detial_sub">
                                    <span className="detial_sub_icon">
                                        <img src={demand_ico_3} alt="预算" />
                                    </span>
                                    <span className="detial_sub_title">预算: </span>
                                    <span className="money_text">{item.budgetCost ? item.budgetCost + ' 元' : '价格面议'}</span>
                                </div>
                                <div className="detial_sub">
                                    <span className="detial_sub_icon">
                                        <img src={demand_ico_2} alt="类型" />
                                    </span>
                                    <span className="detial_sub_title">类型: </span>
                                    <span className="detial_sub_text">{getDemandType(item.demandType)}</span>
                                </div>
                                <div className="detial_sub">
                                    <span className="detial_sub_icon">
                                        <img src={demand_ico_1} alt="行业" />
                                    </span>
                                    <span className="detial_sub_title">行业: </span>
                                    <span className="detial_sub_text">{getIndustryCategory(item.industryCategoryA, item.industryCategoryB)}</span>
                                </div>
                            </li>
                        })}
                    </ul>
                    <Pagination style={{ float: 'right' }}
                        onChange={(e) => { this.demandLoadData(e); }}
                        total={this.state.demandPagination.total}
                        showTotal={() => { return '共' + this.state.demandPagination.total + '条数据' }}
                        current={this.state.demandPagination.pageNo}
                        pageSize={this.state.demandPagination.pageSize} />
                </div>
                <Modal title="订单确认" width={600} className="activity-modal"
                    visible={this.state.visible}
                    maskClosable={false}
                    footer={null}
                    onCancel={() => { this.setState({ visible: false }) }} >
                    <Spin spinning={this.state.loading}>
                        <div className="clearfix">
                            <div className="modal-box">
                                <span>{"预约 " + (this.state.type == 0 ? theData.username : theData.unitName) + " 的线下咨询需要支付 " + this.state.consultPrice + " 元，是否确认预约？"}</span>
                            </div>
                            <div className="modal-box" style={{ marginTop: '20px' }}>
                                <Button style={{ marginRight: '20px' }} type="primary" onClick={this.addConsultorder}>提交</Button>
                                <Button type="ghost" onClick={() => { this.setState({ visible: false }) }}>取消</Button>
                            </div>
                        </div>
                    </Spin>
                </Modal>
            </Spin>
        )
    }
});

export default Content;