content.jsx 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440
  1. import React from 'react';
  2. import { Icon, message, Row, Col, Spin, Tag, Pagination } from 'antd';
  3. import './detail.less';
  4. import { getSearchUrl, getAchievementCategory, getDemandType, getTransferMode, getMaturity } from '../tools';
  5. import { getProvince } from '../NewDicProvinceList';
  6. import { getIndustryCategory } from '../DicIndustryList';
  7. import { getTechField } from '../DicTechFieldList';
  8. import ajax from 'jquery/src/ajax/xhr.js'
  9. import $ from 'jquery/src/ajax';
  10. import avatarImg from '../../../image/avatarImg.png';
  11. import list_title_ico_1 from '../../../image/list_title_ico_1.png';
  12. import list_title_ico_2 from '../../../image/list_title_ico_2.png';
  13. import list_title_ico_3 from '../../../image/list_title_ico_3.png';
  14. import demand_ico_5 from '../../../image/demand_ico_5.png';
  15. import demand_ico_3 from '../../../image/demand_ico_3.png';
  16. import demand_ico_2 from '../../../image/demand_ico_2.png';
  17. import demand_ico_1 from '../../../image/demand_ico_1.png';
  18. import achievement_ico_1 from '../../../image/achievement_ico_1.png';
  19. import achievement_ico_2 from '../../../image/achievement_ico_2.png';
  20. import score_ioc from '../../../image/score_ioc.png';
  21. import demand_sup from '../../../image/demand_sup.png';
  22. const Content = React.createClass({
  23. loadData() {
  24. this.setState({
  25. loading: true
  26. });
  27. $.ajax({
  28. method: "get",
  29. dataType: "json",
  30. url: globalConfig.context + "/api/user/partner/detail",
  31. data: {
  32. uid: this.state.uid,
  33. type: this.state.type
  34. }
  35. }).done(function (data) {
  36. if (data.error && data.error.length) {
  37. message.warning(data.error[0].message);
  38. } else {
  39. this.state.data = data.data || {};
  40. this.state.theField = this.state.type == 0 ? (data.data.engagedField ? data.data.engagedField.split(',') : []) : (data.data.field ? data.data.field.split(',') : []);
  41. this.state.theImgsrc = this.state.type == 0 ? (data.data.lifePhotoUrl ? data.data.lifePhotoUrl.split(',') : []) : (data.data.publicityPictureUrl ? data.data.publicityPictureUrl.split(',') : []);
  42. }
  43. this.setState({
  44. data: this.state.data,
  45. theField: this.state.theField,
  46. theImgsrc: this.state.theImgsrc,
  47. loading: false
  48. });
  49. }.bind(this));
  50. },
  51. achievementLoadData(pageNo) {
  52. this.setState({
  53. loading: true
  54. });
  55. $.ajax({
  56. method: "get",
  57. dataType: "json",
  58. crossDomain: false,
  59. url: globalConfig.context + "/api/user/partner/achievementList",
  60. data: {
  61. ownerId: this.state.uid,
  62. pageNo: pageNo || 1,
  63. pageSize: this.state.achievementPagination.pageSize
  64. },
  65. success: function (data) {
  66. let theArr = [];
  67. if (!data.data || !data.data.list) {
  68. if (data.error && data.error.length) {
  69. message.warning(data.error[0].message);
  70. };
  71. } else {
  72. for (let i = 0; i < data.data.list.length; i++) {
  73. let thisdata = data.data.list[i];
  74. theArr.push({
  75. key: i,
  76. id: thisdata.id,
  77. serialNumber: thisdata.serialNumber,
  78. dataCategory: thisdata.dataCategory,
  79. name: thisdata.name,
  80. fieldA: thisdata.fieldA,
  81. fieldB: thisdata.fieldB,
  82. bargainingMode: thisdata.bargainingMode,
  83. maturity: thisdata.maturity,
  84. keyword: thisdata.keyword,
  85. category: thisdata.category,
  86. ownerType: thisdata.ownerType,
  87. releaseDate: thisdata.releaseDate,
  88. releaseDateFormattedDate: thisdata.releaseDateFormattedDate,
  89. });
  90. };
  91. }
  92. this.state.achievementPagination.current = data.data.pageNo;
  93. this.state.achievementPagination.total = data.data.totalCount;
  94. this.setState({
  95. achievementDataSource: theArr,
  96. achievementPagination: this.state.achievementPagination
  97. });
  98. }.bind(this),
  99. }).always(function () {
  100. this.setState({
  101. loading: false
  102. });
  103. }.bind(this));
  104. },
  105. demandLoadData(pageNo) {
  106. this.setState({
  107. loading: true
  108. });
  109. $.ajax({
  110. method: "get",
  111. dataType: "json",
  112. crossDomain: false,
  113. url: globalConfig.context + "/api/user/partner/demandList",
  114. data: {
  115. employerId: this.state.uid,
  116. pageNo: pageNo || 1,
  117. pageSize: this.state.demandPagination.pageSize
  118. },
  119. success: function (data) {
  120. let theArr = [];
  121. if (!data.data || !data.data.list) {
  122. if (data.error && data.error.length) {
  123. message.warning(data.error[0].message);
  124. };
  125. } else {
  126. for (let i = 0; i < data.data.list.length; i++) {
  127. let thisdata = data.data.list[i];
  128. theArr.push({
  129. key: i,
  130. id: thisdata.id,
  131. serialNumber: thisdata.serialNumber,
  132. dataCategory: thisdata.dataCategory,
  133. name: thisdata.name,
  134. keyword: thisdata.keyword,
  135. releaseDate: thisdata.releaseDate,
  136. demandType: thisdata.demandType,
  137. validityPeriod: thisdata.validityPeriod,
  138. validityPeriodFormattedDate: thisdata.validityPeriodFormattedDate,
  139. releaseDateFormattedDate: thisdata.releaseDateFormattedDate
  140. });
  141. };
  142. }
  143. this.state.demandPagination.current = data.data.pageNo;
  144. this.state.demandPagination.total = data.data.totalCount;
  145. this.setState({
  146. demandDataSource: theArr,
  147. demandPagination: this.state.demandPagination
  148. });
  149. }.bind(this),
  150. }).always(function () {
  151. this.setState({
  152. loading: false
  153. });
  154. }.bind(this));
  155. },
  156. interestClick() {
  157. this.setState({
  158. loading: true
  159. });
  160. $.ajax({
  161. method: "post",
  162. dataType: "json",
  163. crossDomain: false,
  164. url: globalConfig.context + '/api/user/interest/interestUser',
  165. data: {
  166. toUid: this.state.uid
  167. },
  168. success: function (data) {
  169. if (data.error && data.error.length) {
  170. message.warning(data.error[0].message);
  171. } else {
  172. this.loadData();
  173. };
  174. }.bind(this),
  175. }).always(function () {
  176. this.setState({
  177. loading: false
  178. });
  179. }.bind(this));;
  180. },
  181. cancelInterestClick() {
  182. this.setState({
  183. loading: true
  184. });
  185. $.ajax({
  186. method: "post",
  187. dataType: "json",
  188. crossDomain: false,
  189. url: globalConfig.context + '/api/user/interest/cancelInterest',
  190. data: {
  191. interestId: this.state.data.interestId
  192. },
  193. success: function (data) {
  194. if (data.error && data.error.length) {
  195. message.warning(data.error[0].message);
  196. } else {
  197. this.loadData();
  198. };
  199. }.bind(this),
  200. }).always(function () {
  201. this.setState({
  202. loading: false
  203. });
  204. }.bind(this));;
  205. },
  206. getInitialState() {
  207. return {
  208. loading: false,
  209. theField: [],
  210. data: {},
  211. theImgsrc: [],
  212. achievementPagination: {
  213. pageNo: 1,
  214. pageSize: 10,
  215. total: 0
  216. },
  217. achievementDataSource: [],
  218. demandDataSource: [],
  219. demandPagination: {
  220. pageNo: 1,
  221. pageSize: 10,
  222. total: 0
  223. },
  224. };
  225. },
  226. componentWillMount() {
  227. if (window.location.search) {
  228. let theObj = getSearchUrl(window.location.search);
  229. if (theObj.rid && theObj.rid != 'null') {
  230. this.state.uid = theObj.rid;
  231. this.state.type = theObj.type;
  232. this.loadData();
  233. this.achievementLoadData();
  234. this.demandLoadData();
  235. };
  236. };
  237. },
  238. achievementListClick(record, index) {
  239. window.open(globalConfig.context + '/portal/detail/achievementDetail.html?id=' + record.id + '&type=' + record.ownerType);
  240. },
  241. demandListClick(record, index) {
  242. window.open(globalConfig.context + '/portal/detail/demandDetail.html?id=' + record.id + '&type=' + record.dataCategory);
  243. },
  244. render() {
  245. const theData = this.state.data;
  246. return (
  247. <Spin spinning={this.state.loading} style={{ marginBottom: '80px' }} >
  248. <div className="detail-content">
  249. <Row>
  250. <Col span={8}>
  251. <div className="avatar-box">
  252. <img src={(theData.personPortraitUrl || theData.logoUrl) ?
  253. (globalConfig.avatarHost + "/upload" + (this.state.type == 0 ? theData.personPortraitUrl : theData.logoUrl))
  254. : avatarImg} alt="头像" />
  255. </div>
  256. <div className="interest">
  257. {theData.interestId ? <a onClick={this.cancelInterestClick}><Icon type="heart" /> 不感兴趣</a>
  258. : <a onClick={this.interestClick}><Icon type="heart-o" /> 感兴趣</a>}
  259. </div>
  260. </Col>
  261. <Col span={16} className="avatar-right">
  262. <div className="user-name">{this.state.type == 0 ? theData.username : theData.unitName}</div>
  263. <div>
  264. Lv.
  265. <span className="user-level">{theData.level}</span>
  266. <span className="user-type">{this.state.type == 0 ? '个人' : '组织'}</span>
  267. </div>
  268. <div className="user-desc">
  269. <span>简介:</span>
  270. {this.state.type == 0 ? theData.personalProfile : theData.companyIntroduction}</div>
  271. </Col>
  272. </Row>
  273. <Row className="all-row">
  274. <Col span={4}>
  275. <div className="column-title">所在地:</div>
  276. </Col>
  277. <Col span={20}>
  278. <div className="column-text">{getProvince(theData.province, theData.city, theData.area)}</div>
  279. </Col>
  280. </Row>
  281. <Row className="all-row">
  282. <Col span={4}>
  283. <div className="column-title">专业领域:</div>
  284. </Col>
  285. <Col span={20}>
  286. <div className="column-text">{getTechField(this.state.theField[0], this.state.theField[1], this.state.theField[2])}</div>
  287. </Col>
  288. </Row>
  289. <Row className="all-row">
  290. <Col span={4}>
  291. <div className="column-title">能力标签:</div>
  292. </Col>
  293. <Col span={20}>
  294. <div className="column-text">
  295. {theData.abilityLabel ? theData.abilityLabel.split(',').map((item) => {
  296. return <Tag key={item}>{item}</Tag>
  297. }) : ''}
  298. </div>
  299. </Col>
  300. </Row>
  301. </div>
  302. <div className="detail-list">
  303. <div className="list-title">
  304. <img src={list_title_ico_1} alt="" />
  305. <span>用户展示</span>
  306. </div>
  307. <div className="column-img clearfix">
  308. {this.state.theImgsrc.map((item, i) => {
  309. return <div className="img-box" key={i}>
  310. <img src={globalConfig.avatarHost + "/upload" + item} alt="" />
  311. </div>
  312. })}
  313. </div>
  314. </div>
  315. <div className="detail-list">
  316. <div className="list-title">
  317. <img src={list_title_ico_2} alt="" />
  318. <span>技术成果</span>
  319. </div>
  320. <ul className="detail_interest_sub clearfix">
  321. {this.state.achievementDataSource.map((item, i) => {
  322. return <li key={item.id} onClick={() => { this.achievementListClick(item) }}
  323. style={{ float: 'left', marginLeft: '18px', width: '48%' }}>
  324. <div className="interest_list_title" style={{ paddingLeft: '20px' }}>
  325. <span>{item.name}</span>
  326. </div>
  327. <div className="detial_sub">
  328. <span className="detial_sub_icon">
  329. <img src={demand_ico_5} alt="成果" />
  330. </span>
  331. <span className="detial_sub_title">关键词: </span>
  332. <span className="detial_sub_text">{item.keyword}</span>
  333. </div>
  334. <div className="detial_sub">
  335. <span className="detial_sub_icon">
  336. <img src={demand_ico_2} alt="类型" />
  337. </span>
  338. <span className="detial_sub_title">技术类型: </span>
  339. <span className="detial_sub_text">{getAchievementCategory(item.category)}</span>
  340. </div>
  341. <div className="detial_sub">
  342. <span className="detial_sub_icon">
  343. <img src={demand_ico_1} alt="行业" />
  344. </span>
  345. <span className="detial_sub_title">行业分类: </span>
  346. <span className="detial_sub_text">{getIndustryCategory(item.fieldA, item.fieldB)}</span>
  347. </div>
  348. <div className="detial_sub">
  349. <span className="detial_sub_icon">
  350. <img src={demand_ico_3} alt="标价" />
  351. </span>
  352. <span className="detial_sub_title">标价: </span>
  353. <span className="money_text">{item.transferPrice ? (item.transferPrice + '万元') : '价格面议'}</span>
  354. </div>
  355. <div className="detial_sub">
  356. <span className="detial_sub_icon">
  357. <img src={achievement_ico_1} alt="交易方式" />
  358. </span>
  359. <span className="detial_sub_title">交易方式: </span>
  360. <span className="money_text">{getTransferMode(item.transferMode)}</span>
  361. </div>
  362. <div className="detial_sub">
  363. <span className="detial_sub_icon">
  364. <img src={achievement_ico_2} alt="成熟度" />
  365. </span>
  366. <span className="detial_sub_title">技术成熟度: </span>
  367. <span className="detial_sub_score" >
  368. <span style={{ width: (item.maturity ? Number(item.maturity) * 20 : 0) + '%' }}>
  369. <img src={score_ioc} alt={getMaturity(item.maturity)} />
  370. </span>
  371. </span>
  372. </div>
  373. </li>
  374. })}
  375. </ul>
  376. <Pagination style={{ float: 'right' }}
  377. onChange={(e) => { this.achievementLoadData(e); }}
  378. total={this.state.achievementPagination.total}
  379. showTotal={() => { return '共' + this.state.achievementPagination.total + '条数据' }}
  380. current={this.state.achievementPagination.pageNo}
  381. pageSize={this.state.achievementPagination.pageSize} />
  382. </div>
  383. <div className="detail-list">
  384. <div className="list-title">
  385. <img src={list_title_ico_3} alt="" />
  386. <span>技术需求</span>
  387. </div>
  388. <ul className="detail_interest_sub clearfix">
  389. {this.state.demandDataSource.map((item, i) => {
  390. return <li key={item.id} onClick={() => { this.demandListClick(item) }}>
  391. <div className="interest_list_title">
  392. <img src={demand_sup} alt="" />
  393. <span>{item.name}</span>
  394. </div>
  395. <div className="detial_sub">
  396. <span className="detial_sub_icon">
  397. <img src={demand_ico_5} alt="需求" />
  398. </span>
  399. <span className="detial_sub_title">需求: </span>
  400. <span className="detial_sub_text">{item.problemDes}</span>
  401. </div>
  402. <div className="detial_sub">
  403. <span className="detial_sub_icon">
  404. <img src={demand_ico_3} alt="预算" />
  405. </span>
  406. <span className="detial_sub_title">预算: </span>
  407. <span className="money_text">{item.budgetCost ? item.budgetCost + ' 元' : '价格面议'}</span>
  408. </div>
  409. <div className="detial_sub">
  410. <span className="detial_sub_icon">
  411. <img src={demand_ico_2} alt="类型" />
  412. </span>
  413. <span className="detial_sub_title">类型: </span>
  414. <span className="detial_sub_text">{getDemandType(item.demandType)}</span>
  415. </div>
  416. <div className="detial_sub">
  417. <span className="detial_sub_icon">
  418. <img src={demand_ico_1} alt="行业" />
  419. </span>
  420. <span className="detial_sub_title">行业: </span>
  421. <span className="detial_sub_text">{getIndustryCategory(item.industryCategoryA, item.industryCategoryB)}</span>
  422. </div>
  423. </li>
  424. })}
  425. </ul>
  426. <Pagination style={{ float: 'right' }}
  427. onChange={(e) => { this.demandLoadData(e); }}
  428. total={this.state.demandPagination.total}
  429. showTotal={() => { return '共' + this.state.demandPagination.total + '条数据' }}
  430. current={this.state.demandPagination.pageNo}
  431. pageSize={this.state.demandPagination.pageSize} />
  432. </div>
  433. </Spin>
  434. )
  435. }
  436. });
  437. export default Content;