demand.jsx 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333
  1. import React from 'react';
  2. import { Carousel, Pagination, Icon, message, Row, Col, Radio, Checkbox, Input, InputNumber, Button, Table, Spin } from 'antd';
  3. import '../portal.less';
  4. import logoImg from '../../../../image/logo.png';
  5. import searchImg from '../../../../image/search.png';
  6. import slideImg from '../../../../image/slide_img_1.png';
  7. import demand_sup from '../../../../image/demand_sup.png';
  8. import demand_ico_5 from '../../../../image/demand_ico_5.png';
  9. import demand_ico_3 from '../../../../image/demand_ico_3.png';
  10. import demand_ico_2 from '../../../../image/demand_ico_2.png';
  11. import demand_ico_1 from '../../../../image/demand_ico_1.png';
  12. import uncertify from '../../../../image/demand_ico_6.png';
  13. import certify from '../../../../image/demand_ico_6_atv.png';
  14. import { IndustryObject, getIndustryCategory } from '../../DicIndustryList';
  15. import { demandTypeList } from '../../dataDic';
  16. import { getDemandType } from '../../tools';
  17. import ajax from 'jquery/src/ajax/xhr.js'
  18. import $ from 'jquery/src/ajax';
  19. const Content = React.createClass({
  20. loadData(pageNo) {
  21. this.setState({
  22. loading: true
  23. });
  24. switch (this.state.budgetCost) {
  25. case 1:
  26. this.state.budgetCostLower = 1;
  27. this.state.budgetCostUpper = 10;
  28. break;
  29. case 2:
  30. this.state.budgetCostLower = 10;
  31. this.state.budgetCostUpper = 50;
  32. break;
  33. case 3:
  34. this.state.budgetCostLower = 50;
  35. this.state.budgetCostUpper = 100;
  36. break;
  37. case 4:
  38. this.state.budgetCostLower = 100;
  39. this.state.budgetCostUpper = 500;
  40. break;
  41. case 5:
  42. this.state.budgetCostLower = 500;
  43. this.state.budgetCostUpper = 1000;
  44. break;
  45. case 999:
  46. this.state.budgetCostLower = null;
  47. this.state.budgetCostUpper = null;
  48. break;
  49. }
  50. $.ajax({
  51. method: "get",
  52. dataType: "json",
  53. url: globalConfig.context + "/portal/search/demandList",
  54. data: {
  55. pageNo: pageNo || 1,
  56. pageSize: this.state.pagination.pageSize,
  57. keyword: this.state.keyword,
  58. demandType: this.state.demandType == 999 ? null : this.state.demandType,
  59. budgetCostLower: this.state.budgetCostLower, //交易金额下限
  60. budgetCostUpper: this.state.budgetCostUpper, //交易金额上限
  61. industryCategoryA: this.state.fieldA, //技术领域(行业类别A)
  62. industryCategoryB: this.state.fieldB == 999 ? null : this.state.fieldB, //技术领域(行业类别B)
  63. },
  64. success: function (data) {
  65. let theArr = [];
  66. if (!data.data || !data.data.list) {
  67. if (data.error && data.error.length) {
  68. message.warning(data.error[0].message);
  69. };
  70. } else {
  71. for (let i = 0; i < data.data.list.length; i++) {
  72. let thisdata = data.data.list[i];
  73. theArr.push({
  74. key: i,
  75. id: thisdata.id,
  76. serialNumber: thisdata.serialNumber,
  77. keyword: thisdata.keyword,
  78. dataCategory: thisdata.dataCategory,
  79. name: thisdata.name,
  80. level: thisdata.level,
  81. industryCategory: [thisdata.industryCategoryA, thisdata.industryCategoryB],
  82. industryCategoryA: thisdata.industryCategoryA,
  83. industryCategoryB: thisdata.industryCategoryB,
  84. demandType: thisdata.demandType,
  85. budgetCost: thisdata.budgetCost,
  86. problemDes: thisdata.problemDes,
  87. releaseDate: thisdata.releaseDate,
  88. employerName: thisdata.username || thisdata.unitName,
  89. releaseDateFormattedDate: thisdata.releaseDateFormattedDate
  90. });
  91. };
  92. };
  93. this.state.pagination.defaultCurrent = data.data.pageNo;
  94. this.state.pagination.total = data.data.totalCount;
  95. this.setState({
  96. dataSource: theArr,
  97. pagination: this.state.pagination
  98. });
  99. }.bind(this),
  100. }).done(function (data) {
  101. if (data.error && data.error.length) {
  102. message.warning(data.error[0].message);
  103. };
  104. this.setState({
  105. loading: false
  106. });
  107. }.bind(this));
  108. },
  109. getInitialState() {
  110. return {
  111. loading: false,
  112. showDesc: false,
  113. industryRadioB: [],
  114. budgetCost: 999,
  115. pagination: {
  116. pageNo: 1,
  117. pageSize: 15,
  118. total: 0
  119. },
  120. dataSource: []
  121. };
  122. },
  123. componentWillMount() {
  124. let theArr = [];
  125. let demandArr = [];
  126. //行业分类单选项
  127. theArr.push(
  128. <Radio.Button key={999} value={999}>不限</Radio.Button>
  129. );
  130. IndustryObject.map(function (item) {
  131. theArr.push(
  132. <Radio.Button key={item.value} value={item.value}>{item.label}</Radio.Button>
  133. );
  134. });
  135. //技术类型单选项目
  136. demandArr.push(
  137. <Radio.Button key={999} value={999}>不限</Radio.Button>
  138. );
  139. demandTypeList.map(function (item) {
  140. demandArr.push(
  141. <Radio.Button key={item.value} value={item.value}>{item.key}</Radio.Button>
  142. );
  143. });
  144. this.state.industryRadioA = theArr;
  145. this.state.demandTypeRadio = demandArr;
  146. this.loadData();
  147. },
  148. industryChange(e) {
  149. let theArr = [];
  150. if (e.target.value !== 999) {
  151. theArr.push(
  152. <Radio.Button key={999} value={999}>不限</Radio.Button>
  153. );
  154. IndustryObject.map(function (item1) {
  155. if (item1.value == e.target.value) {
  156. item1.children.map(function (item2) {
  157. theArr.push(
  158. <Radio.Button key={item2.value} value={item2.value}>{item2.label}</Radio.Button>
  159. );
  160. });
  161. }
  162. });
  163. this.state.fieldA = e.target.value;
  164. } else {
  165. this.state.fieldA = null;
  166. };
  167. this.loadData();
  168. this.setState({ industryRadioB: theArr });
  169. },
  170. tableRowClick(record, index) {
  171. window.open(globalConfig.context + '/portal/detail/demandDetail.html?id=' + record.id + '&type=' + record.dataCategory);
  172. },
  173. closeDesc(e) {
  174. this.setState({
  175. showDesc: e
  176. });
  177. },
  178. render() {
  179. const { pageNo, pageSize, total } = this.state.pagination;
  180. const _me = this;
  181. return (
  182. <div className="portal-body">
  183. <div className="portal-nav clearfix">
  184. <div className="nav-logoBox">
  185. <img src={logoImg} alt="" />
  186. </div>
  187. <ul className="nav-list clearfix">
  188. <li className={this.props.searchType == 'achievement' ? 'active' : ''}><a href={"/portal/search/achievement.html"}>科技成果</a></li>
  189. <li className={this.props.searchType == 'demand' ? 'active' : ''}><a href={"/portal/search/demand.html"}>科技需求</a></li>
  190. <li className={this.props.searchType == 'subscriber' ? 'active' : ''}><a href={"/portal/search/subscriber.html"}>伙伴/行家</a></li>
  191. </ul>
  192. <div className="nav-search">
  193. <Input onChange={(e) => { this.state.keyword = e.target.value; }} />
  194. <Button onClick={() => { this.loadData() }}>
  195. <img src={searchImg} alt="" />
  196. </Button>
  197. </div>
  198. </div>
  199. <Carousel autoplay className="portal-carousel">
  200. <div className="slide-box"><img src={slideImg} alt="" /></div>
  201. <div className="slide-box"><img src={slideImg} alt="" /></div>
  202. <div className="slide-box"><img src={slideImg} alt="" /></div>
  203. <div className="slide-box"><img src={slideImg} alt="" /></div>
  204. </Carousel>
  205. <div className="portal-content">
  206. <Row className="search-criteria">
  207. <Col className="search-title" span={2}>
  208. <span>行业分类</span>
  209. </Col>
  210. <Col className="search-select" span={22}>
  211. <Radio.Group defaultValue={999} onChange={this.industryChange}>
  212. {this.state.industryRadioA}
  213. </Radio.Group>
  214. </Col>
  215. </Row>
  216. {this.state.industryRadioB.length > 1 ? <Row className="search-criteria">
  217. <Col className="search-title" span={2}>
  218. <span>行业子分类</span>
  219. </Col>
  220. <Col className="search-select" span={22}>
  221. <Radio.Group defaultValue={999} onChange={(e) => { this.state.fieldB = e.target.value; this.loadData() }}>
  222. {this.state.industryRadioB}
  223. </Radio.Group>
  224. </Col>
  225. </Row> : <div></div>}
  226. <Row className="search-criteria">
  227. <Col className="search-title" span={2}>
  228. <span>预算价格</span>
  229. </Col>
  230. <Col className="search-select" span={12}>
  231. <Radio.Group value={this.state.budgetCost}
  232. onChange={(e) => {
  233. this.setState({
  234. budgetCost: e.target.value
  235. });
  236. this.state.budgetCost = e.target.value;
  237. this.loadData();
  238. }}>
  239. <Radio.Button value={999}>不限</Radio.Button>
  240. <Radio.Button value={1}>1-10万元</Radio.Button>
  241. <Radio.Button value={2}>10-50万元</Radio.Button>
  242. <Radio.Button value={3}>50-100万元</Radio.Button>
  243. <Radio.Button value={4}>100-500万元</Radio.Button>
  244. <Radio.Button value={5}>500-1000万元</Radio.Button>
  245. </Radio.Group>
  246. </Col>
  247. <Col span={10}>
  248. <Checkbox checked={!this.state.budgetCost} onChange={(e) => { if (e.target.checked) { this.setState({ budgetCost: null }) } }}>自定义金额</Checkbox>
  249. <InputNumber style={{ width: 80 }} disabled={Boolean(this.state.budgetCost)} onChange={(e) => { this.state.budgetCostLower = e.target.value; }} />
  250. <span> 到 </span>
  251. <InputNumber style={{ width: 80 }} disabled={Boolean(this.state.budgetCost)} onChange={(e) => { this.state.budgetCostUpper = e.target.value; }} />
  252. <span> 万元</span>
  253. <Button style={{ marginLeft: '20px' }} disabled={Boolean(this.state.budgetCost)} onClick={this.loadData}>确定</Button>
  254. </Col>
  255. </Row>
  256. <Row className="search-criteria">
  257. <Col className="search-title" span={2}>
  258. <span>技术类型</span>
  259. </Col>
  260. <Col className="search-select" span={22}>
  261. <Radio.Group defaultValue={999} onChange={(e) => {
  262. this.setState({
  263. demandType: e.target.value
  264. });
  265. this.state.demandType = e.target.value;
  266. this.loadData();
  267. }}>
  268. {this.state.demandTypeRadio}
  269. </Radio.Group>
  270. </Col>
  271. </Row>
  272. <Spin spinning={this.state.loading} style={{ marginBottom: '40px' }}>
  273. <ul className='detail_interest_sub'>
  274. {this.state.dataSource.map((item) => {
  275. return <li key={item.id} onClick={() => { this.tableRowClick(item) }}>
  276. <div className="interest_list_title">
  277. <img src={demand_sup} alt="" />
  278. <span>{item.name}</span>
  279. <div className="interest_list_confirm">
  280. <span>{item.level ? '身份已验证' : '身份未验证'}</span>
  281. <img src={item.level ? certify : uncertify} alt="" />
  282. </div>
  283. </div>
  284. <div className="detial_sub">
  285. <span className="detial_sub_icon">
  286. <img src={demand_ico_5} alt="需求" />
  287. </span>
  288. <span className="detial_sub_title">需求: </span>
  289. <span className="detial_sub_text">{item.problemDes}</span>
  290. </div>
  291. <div className="detial_sub">
  292. <span className="detial_sub_icon">
  293. <img src={demand_ico_3} alt="预算" />
  294. </span>
  295. <span className="detial_sub_title">预算: </span>
  296. <span className="money_text">{item.budgetCost ? item.budgetCost + ' 元' : '价格面议'}</span>
  297. </div>
  298. <div className="detial_sub">
  299. <span className="detial_sub_icon">
  300. <img src={demand_ico_2} alt="类型" />
  301. </span>
  302. <span className="detial_sub_title">类型: </span>
  303. <span className="detial_sub_text">{getDemandType(item.demandType)}</span>
  304. </div>
  305. <div className="detial_sub">
  306. <span className="detial_sub_icon">
  307. <img src={demand_ico_1} alt="行业" />
  308. </span>
  309. <span className="detial_sub_title">行业: </span>
  310. <span className="detial_sub_text">{getIndustryCategory(item.industryCategoryA, item.industryCategoryB)}</span>
  311. </div>
  312. </li>
  313. })}
  314. </ul>
  315. <Pagination style={{ float: 'right' }}
  316. onChange={(e) => { this.loadData(e); }}
  317. total={total}
  318. showTotal={() => { return '共' + total + '条数据' }}
  319. current={pageNo}
  320. pageSize={pageSize} />
  321. </Spin>
  322. </div >
  323. </div>
  324. )
  325. }
  326. });
  327. export default Content;