import React from 'react'; import { Rate, Icon, message, Row, Col, Radio, Checkbox, Input, InputNumber, Button, Pagination, Spin } from 'antd'; import '../portal.less'; import logoImg from 'img/logo.png'; import searchImg from 'img/search.png'; import demand_ico_5 from 'img/demand_ico_5.png'; import demand_ico_3 from 'img/demand_ico_3.png'; import demand_ico_2 from 'img/demand_ico_2.png'; import demand_ico_1 from 'img/demand_ico_1.png'; import achievement_ico_1 from 'img/achievement_ico_1.png'; import achievement_ico_2 from 'img/achievement_ico_2.png'; import uncertify from 'img/demand_ico_6.png'; import certify from 'img/demand_ico_6_atv.png'; import score_ioc from 'img/score_ioc.png'; import { IndustryObject, getIndustryCategory } from '@/DicIndustryList'; import { achievementCategoryList, transferModeList, maturityList } from '@/dataDic'; import { getAchievementCategory, getTransferMode, getMaturity } from '@/tools'; import ajax from 'jquery/src/ajax/xhr.js' import $ from 'jquery/src/ajax'; const Content = React.createClass({ loadData(pageNo) { this.setState({ loading: true }); switch (this.state.transferPrice) { case 1: this.state.transferPriceLower = 1; this.state.transferPriceUpper = 10; break; case 2: this.state.transferPriceLower = 10; this.state.transferPriceUpper = 50; break; case 3: this.state.transferPriceLower = 50; this.state.transferPriceUpper = 100; break; case 4: this.state.transferPriceLower = 100; this.state.transferPriceUpper = 500; break; case 5: this.state.transferPriceLower = 500; this.state.transferPriceUpper = 1000; break; case 6: this.state.bargainingMode = 0; break; case 999: this.state.transferPriceLower = null; this.state.transferPriceUpper = null; this.state.bargainingMode = null; break; } $.ajax({ method: "get", dataType: "json", url: globalConfig.context + "/portal/search/achievementList", data: { pageNo: pageNo || 1, pageSize: this.state.pagination.pageSize, category: this.state.category == 999 ? null : this.state.category, //技术类型 keyword: this.state.keyword, maturity: this.state.maturity == 999 ? null : this.state.maturity, //成熟度 transferPriceLower: this.state.transferPriceLower, //交易金额下限 transferPriceUpper: this.state.transferPriceUpper, //交易金额上限 bargainingMode: this.state.bargainingMode, transferMode: this.state.transferMode == 999 ? null : this.state.transferMode, //交易方式 fieldA: this.state.fieldA, //技术领域(行业类别A) fieldB: this.state.fieldB == 999 ? null : this.state.fieldB, //技术领域(行业类别B) }, 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, keyword: thisdata.keyword, level: thisdata.level, name: thisdata.name, dataCategory: thisdata.dataCategory, category: thisdata.category, ownerName: thisdata.ownerName, releaseDate: thisdata.releaseDate, ownerType: thisdata.ownerType, fieldA: thisdata.fieldA, fieldB: thisdata.fieldB, field: [thisdata.fieldA, thisdata.fieldB], transferPrice: thisdata.transferPrice, maturity: thisdata.maturity, transferMode: thisdata.transferMode, releaseDateFormattedDate: thisdata.releaseDateFormattedDate }); }; }; this.state.pagination.pageNo = data.data.pageNo; this.state.pagination.total = data.data.totalCount; this.setState({ dataSource: theArr, pagination: this.state.pagination }); }.bind(this), }).done(function (data) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; this.setState({ loading: false }); this.state.bargainingMode = 1; }.bind(this)); }, getInitialState() { return { loading: false, showDesc: false, industryRadioB: [], transferPrice: 999, pagination: { pageNo: 1, pageSize: 12, total: 0 }, dataSource: [] }; }, componentWillMount() { let theArr = []; let theCategoryArr = [], theTransferModeArr = [], theMaturityArr = []; //行业分类单选项 theArr.push( <Radio.Button key={999} value={999}>不限</Radio.Button> ); IndustryObject.map(function (item) { theArr.push( <Radio.Button key={item.value} value={item.value}>{item.label}</Radio.Button> ); }); //技术类型单选项目 theCategoryArr.push( <Radio.Button key={999} value={999}>不限</Radio.Button> ); achievementCategoryList.map(function (item) { theCategoryArr.push( <Radio.Button key={item.value} value={item.value}>{item.key}</Radio.Button> ); }); //交易方式单选项目 theTransferModeArr.push( <Radio.Button key={999} value={999}>不限</Radio.Button> ); transferModeList.map(function (item) { theTransferModeArr.push( <Radio.Button key={item.value} value={item.value}>{item.key}</Radio.Button> ); }); //成熟度单选项目 theMaturityArr.push( <Radio.Button key={999} value={999}>不限</Radio.Button> ); maturityList.map(function (item) { theMaturityArr.push( <Radio.Button key={item.value} value={item.value}>{item.key}</Radio.Button> ); }); this.state.industryRadioA = theArr; this.state.categoryRadio = theCategoryArr; this.state.transferModeRadio = theTransferModeArr; this.state.maturityRadio = theMaturityArr; if (window.location.search) { let theUrl = window.location.search this.state.keyword = theUrl.substring(1, theUrl.length); this.state.keyword = decodeURIComponent(this.state.keyword); }; this.loadData(); }, industryChange(e) { let theArr = []; if (e.target.value !== 999) { theArr.push( <Radio.Button key={999} value={999}>不限</Radio.Button> ); IndustryObject.map(function (item1) { if (item1.value == e.target.value) { item1.children.map(function (item2) { theArr.push( <Radio.Button key={item2.value} value={item2.value}>{item2.label}</Radio.Button> ); }); } }); this.state.fieldA = e.target.value; } else { this.state.fieldA = null; this.state.fieldB = null; }; this.loadData(); this.setState({ industryRadioB: theArr }); }, tableRowClick(record, index) { window.open(globalConfig.context + '/portal/detail/achievementDetail.html?id=' + record.id + '&type=' + record.ownerType); }, closeDesc(e) { this.setState({ showDesc: e }); }, render() { const { pageNo, pageSize, total } = this.state.pagination; const _me = this; return ( <div className="portal-body"> <div className="portal-content"> <Row className="search-criteria"> <Col className="search-title" span={2}> <span>行业分类</span> </Col> <Col className="search-select" span={22}> <Radio.Group defaultValue={999} onChange={this.industryChange}> {this.state.industryRadioA} </Radio.Group> </Col> </Row> {this.state.industryRadioB.length > 1 ? <Row className="search-criteria"> <Col className="search-title" span={2}> <span>行业子分类</span> </Col> <Col className="search-select" span={22}> <Radio.Group defaultValue={999} onChange={(e) => { this.state.fieldB = e.target.value; this.loadData() }}> {this.state.industryRadioB} </Radio.Group> </Col> </Row> : <div></div>} <Row className="search-criteria"> <Col className="search-title" span={2}> <span>交易方式</span> </Col> <Col className="search-select" span={12}> <Radio.Group defaultValue={999} onChange={(e) => { this.setState({ transferMode: e.target.value }); this.state.transferMode = e.target.value this.loadData(); }}> {this.state.transferModeRadio} </Radio.Group> </Col> <Col span={10}> <div className="nav-search"> <Input value={this.state.keyword} placeholder="请输入关键词" onChange={(e) => { this.setState({ keyword: e.target.value }); }} /> <Button onClick={() => { this.loadData() }}> <img src={searchImg} alt="" /> </Button> </div> </Col> </Row> <Spin spinning={this.state.loading} style={{ marginBottom: '40px' }}> <ul className='detail_interest_sub clearfix' > {this.state.dataSource.map((item) => { return <li key={item.id} onClick={() => { this.tableRowClick(item) }}> <div className="interest_list_title" style={{ paddingLeft: '20px' }}> <p title={item.name}>{item.name}</p> </div> <div className="interest_list_name" style={{ paddingLeft: '20px' }}> <p>{item.ownerName}</p> <div className="interest_list_confirm"> <span>{item.level ? '身份已验证' : '身份未验证'}</span> <img src={item.level ? certify : uncertify} alt="" /> </div> </div> <div className="detail_sub"> <span className="detail_sub_icon"> <img src={demand_ico_5} alt="成果" /> </span> <span className="detail_sub_title">关键词: </span> <span className="detail_sub_text">{item.keyword}</span> </div> <div className="detail_sub"> <span className="detail_sub_icon"> <img src={demand_ico_2} alt="类型" /> </span> <span className="detail_sub_title">技术类型: </span> <span className="detail_sub_text">{getAchievementCategory(item.category)}</span> </div> <div className="detail_sub"> <span className="detail_sub_icon"> <img src={demand_ico_1} alt="行业" /> </span> <span className="detail_sub_title">行业分类: </span> <span className="detail_sub_text">{getIndustryCategory(item.fieldA, item.fieldB)}</span> </div> <div className="detail_sub"> <span className="detail_sub_icon"> <img src={demand_ico_3} alt="标价" /> </span> <span className="detail_sub_title">标价: </span> <span className="money_text">{item.transferPrice ? (item.transferPrice + '万元') : '价格面议'}</span> </div> <div className="detail_sub"> <span className="detail_sub_icon"> <img src={achievement_ico_1} alt="交易方式" /> </span> <span className="detail_sub_title">交易方式: </span> <span className="money_text">{getTransferMode(item.transferMode)}</span> </div> <div className="detail_sub"> <span className="detail_sub_icon"> <img src={achievement_ico_2} alt="成熟度" /> </span> <span className="detail_sub_title">技术成熟度: </span> <span className="detail_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.loadData(e); }} total={total} showTotal={() => { return '共' + total + '条数据' }} current={pageNo} pageSize={pageSize} /> </Spin> </div > </div> ) } }); export default Content; // <Row className="search-criteria"> // <Col className="search-title" span={2}> // <span>交易价格</span> // </Col> // <Col className="search-select" span={13}> // <Radio.Group value={this.state.transferPrice} // onChange={(e) => { // this.setState({ // transferPrice: e.target.value // }); // this.state.transferPrice = e.target.value; // this.loadData(); // }}> // <Radio.Button value={999}>不限</Radio.Button> // <Radio.Button value={1}>1-10万元</Radio.Button> // <Radio.Button value={2}>10-50万元</Radio.Button> // <Radio.Button value={3}>50-100万元</Radio.Button> // <Radio.Button value={4}>100-500万元</Radio.Button> // <Radio.Button value={5}>500-1000万元</Radio.Button> // <Radio.Button value={6}>面议</Radio.Button> // </Radio.Group> // </Col> // <Col span={9}> // <Checkbox checked={!this.state.transferPrice} onChange={(e) => { if (e.target.checked) { this.setState({ transferPrice: null }) } }}>自定义金额</Checkbox> // <InputNumber style={{ width: 80 }} // disabled={Boolean(this.state.transferPrice)} // onChange={(e) => { this.state.transferPriceLower = e; }} /> // <span> 到 </span> // <InputNumber style={{ width: 80 }} // disabled={Boolean(this.state.transferPrice)} // onChange={(e) => { this.state.transferPriceUpper = e; }} /> // <span> 万元</span> // <Button style={{ marginLeft: '20px' }} disabled={Boolean(this.state.transferPrice)} onClick={() => { this.loadData() }}>确定</Button> // </Col> // </Row> // <Row className="search-criteria"> // <Col className="search-title" span={2}> // <span>技术类型</span> // </Col> // <Col className="search-select" span={22}> // <Radio.Group defaultValue={999} onChange={(e) => { // this.setState({ // category: e.target.value // }); // this.state.category = e.target.value; // this.loadData(); // }}> // {this.state.categoryRadio} // </Radio.Group> // </Col> // </Row> // <Row className="search-criteria"> // <Col className="search-title" span={2}> // <span>交易方式</span> // </Col> // <Col className="search-select" span={22}> // <Radio.Group defaultValue={999} onChange={(e) => { // this.setState({ // transferMode: e.target.value // }); // this.state.transferMode = e.target.value // this.loadData(); // }}> // {this.state.transferModeRadio} // </Radio.Group> // </Col> // </Row> // <Row className="search-criteria"> // <Col className="search-title" span={2}> // <span>成熟度</span> // </Col> // <Col className="search-select" span={12}> // <Radio.Group defaultValue={999} onChange={(e) => { // this.setState({ // maturity: e.target.value // }); // this.state.maturity = e.target.value // this.loadData(); // }}> // {this.state.maturityRadio} // </Radio.Group> // </Col> // <Col span={10}> // <div className="nav-search"> // <Input onChange={(e) => { this.state.keyword = e.target.value; }} /> // <Button onClick={() => { this.loadData() }}> // <img src={searchImg} alt="" /> // </Button> // </div> // </Col> // </Row>