import React from 'react'; import { Icon, message, Row, Col, Spin, Tag, Pagination } 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));; }, 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, 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> </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="" /> </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">{getTransferMode(item.transferMode)}</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> </Spin> ) } }); export default Content;