123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408 |
- import React from 'react';
- import { Carousel, Icon, message, Row, Col, Select, Radio, Checkbox, Input, InputNumber, Button, Table, Spin, Pagination } from 'antd';
- import '../portal.less';
- import logoImg from '../../../../image/logo.png';
- import searchImg from '../../../../image/search.png';
- import slideImg from '../../../../image/slide_img_1.png';
- import { techFieldList, getTechField } from '../../DicTechFieldList';
- import { provinceList, getProvince } from '../../NewDicProvinceList';
- import { companySearch } from '../../tools';
- import ajax from 'jquery/src/ajax/xhr.js';
- import $ from 'jquery/src/ajax';
- import avatarImg from '../../../../image/avatarImg.png';
- const SubContent = React.createClass({
- loadData(pageNo) {
- this.setState({
- loading: true
- });
- $.ajax({
- method: "get",
- dataType: "json",
- url: globalConfig.context + "/portal/search/subscriberList",
- data: {
- "level": this.state.level, //认证状态 (0--未认证,1--认证)
- "type": this.state.type, //用户类型 (0--个人用户,1--组织用户)
- "field": this.state.firstField ? ((this.state.firstField || '') + ',' + (this.state.secondField || '') + ',' + (this.state.thirdField || '')) : null,
- "province": this.state.province,
- "city": this.state.city,
- "area": this.state.area,
- "name": this.state.searchName,
- "pageNo": pageNo || 1,
- "pageSize": this.state.pagination.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,
- uid: thisdata.uid, //用户ID
- identityId: thisdata.identityId, //认证ID (详情接口传入ID)
- username: thisdata.username,// 用户名称
- unitName: thisdata.unitName,
- type: this.state.type,
- personPortraitUrl: thisdata.personPortraitUrl,//用户头像URL
- logoUrl: thisdata.logoUrl,
- achievementNum: thisdata.achievementNum, //科技成果数量
- demandNum: thisdata.demandNum, //科技需求数量
- province: thisdata.province
- });
- };
- };
- 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
- });
- }.bind(this));
- },
- getInitialState() {
- return {
- loading: false,
- type: 0,
- pagination: {
- pageNo: 1,
- pageSize: 15,
- total: 0
- },
- dataSource: []
- };
- },
- componentWillMount() {
- let theFieldArr = [], theProvinceArr = [];
- techFieldList.map((item) => {
- theFieldArr.push(
- <Select.Option key={item.value}>{item.label}</Select.Option>
- )
- });
- provinceList.map((item) => {
- theProvinceArr.push(
- <Select.Option key={item.id}>{item.name}</Select.Option>
- )
- });
- this.state.fieldFirstOption = theFieldArr;
- this.state.provinceOption = theProvinceArr;
- this.loadData();
- },
- fieldFirstChange(e) {
- let theArr = [];
- techFieldList.map((item) => {
- if (item.value == e) {
- item.children.map((children) => {
- theArr.push(
- <Select.Option key={children.value}>{children.label}</Select.Option>
- )
- });
- }
- });
- this.setState({
- fieldSecondOption: theArr,
- firstField: e,
- secondField: undefined,
- thirdField: undefined
- })
- },
- fieldSecondChange(e) {
- let theArr = [], _me = this;
- techFieldList.map((item) => {
- if (item.value == _me.state.firstField) {
- item.children.map((children) => {
- if (children.value == e) {
- children.children.map((third) => {
- theArr.push(
- <Select.Option key={third.value}>{third.label}</Select.Option>
- )
- })
- }
- });
- }
- });
- this.setState({
- fieldThirdOption: theArr,
- secondField: e,
- thirdField: undefined
- })
- },
- provinceChange(e) {
- let theArr = [];
- provinceList.map((item) => {
- if (item.id == e) {
- item.cityList.map((city) => {
- theArr.push(
- <Select.Option key={city.id}>{city.name}</Select.Option>
- )
- });
- }
- });
- this.setState({
- cityOption: theArr,
- province: e,
- city: undefined,
- area: undefined
- })
- },
- cityChange(e) {
- let theArr = [], _me = this;
- provinceList.map((item) => {
- if (item.id == _me.state.province) {
- item.cityList.map((city) => {
- if (city.id == e) {
- city.areaList.map((area) => {
- theArr.push(
- <Select.Option key={area.id}>{area.name}</Select.Option>
- )
- });
- };
- });
- };
- });
- this.setState({
- areaOption: theArr,
- city: e,
- area: undefined
- })
- },
- tableRowClick(record, index) {
- window.open(globalConfig.context + '/user/subscriberDetail.html?rid=' + record.uid + '&type=' + record.type);
- },
- interest(e) {
- this.setState({
- loading: true
- });
- $.ajax({
- method: "POST",
- dataType: "json",
- url: globalConfig.context + "/api/user/interest/interestUser",
- data: {
- toUid: e
- }
- }).done(function (data) {
- if (data.error && data.error.length) {
- message.warning(data.error[0].message);
- };
- this.setState({
- loading: false
- });
- }.bind(this));
- },
- cancelInterest(e) {
- this.setState({
- loading: true
- });
- $.ajax({
- method: "POST",
- dataType: "json",
- url: globalConfig.context + "/api/user/interest/cancelInterest",
- data: {
- interestId: e
- }
- }).done(function (data) {
- if (data.error && data.error.length) {
- message.warning(data.error[0].message);
- };
- this.setState({
- loading: false
- });
- }.bind(this));
- },
- render() {
- const { pageNo, pageSize, total } = this.state.pagination;
- const _me = this;
- return (
- <div className="portal-body">
- <div className="portal-nav clearfix">
- <div className="nav-logoBox">
- <img src={logoImg} alt="" />
- </div>
- <ul className="nav-list clearfix">
- <li className={this.props.searchType == 'achievement' ? 'active' : ''}><a href={"/portal/search/achievement.html"}>科技成果</a></li>
- <li className={this.props.searchType == 'demand' ? 'active' : ''}><a href={"/portal/search/demand.html"}>科技需求</a></li>
- <li className={this.props.searchType == 'subscriber' ? 'active' : ''}><a href={"/portal/search/subscriber.html"}>伙伴/行家</a></li>
- </ul>
- <div className="nav-search">
- <Input onChange={(e) => { this.state.searchName = e.target.value; }} />
- <Button onClick={() => { this.loadData() }}>
- <img src={searchImg} alt="" />
- </Button>
- </div>
- </div>
- <Carousel autoplay className="portal-carousel">
- <div className="slide-box"><img src={slideImg} alt="" /></div>
- <div className="slide-box"><img src={slideImg} alt="" /></div>
- <div className="slide-box"><img src={slideImg} alt="" /></div>
- <div className="slide-box"><img src={slideImg} alt="" /></div>
- </Carousel>
- <div className="portal-content clearfix" >
- <Row className="search-criteria">
- <Col className="search-title" span={2}>
- <span>行业分类</span>
- </Col>
- <Col className="search-select" span={22}>
- <Select style={{ width: 160, marginRight: '10px', marginBottom: '10px' }}
- value={this.state.firstField}
- placeholder="请选择行业一级分类"
- notFoundContent="未获取到行业分类"
- showSearch
- filterOption={companySearch}
- onChange={this.fieldFirstChange}>
- {this.state.fieldFirstOption}
- </Select>
- <Select style={{ width: 200, marginRight: '10px', marginBottom: '10px' }}
- value={this.state.secondField}
- placeholder="请选择行业二级分类"
- notFoundContent="未获取到行业分类"
- showSearch
- filterOption={companySearch}
- onChange={this.fieldSecondChange}>
- {this.state.fieldSecondOption}
- </Select>
- <Select style={{ width: 240, marginRight: '10px', marginBottom: '10px' }}
- value={this.state.thirdField}
- placeholder="请选择行业三级分类"
- notFoundContent="未获取到行业分类"
- showSearch
- filterOption={companySearch}
- onChange={(e) => { this.setState({ thirdField: e }) }}>
- {this.state.fieldThirdOption}
- </Select>
- <Button type="ghost" style={{ marginLeft: '20px' }}
- onClick={() => {
- this.setState({
- firstField: undefined,
- secondField: undefined,
- thirdField: undefined
- });
- this.state.firstField = undefined;
- this.state.secondField = undefined;
- this.state.thirdField = undefined;
- this.loadData();
- }}>不限</Button>
- </Col>
- </Row>
- <Row className="search-criteria">
- <Col className="search-title" span={2}>
- <span>地区</span>
- </Col>
- <Col className="search-select" span={22}>
- <Select style={{ width: 100, marginRight: '10px', marginBottom: '10px' }}
- value={this.state.province}
- placeholder="请选择省份"
- notFoundContent="未获取到省份列表"
- showSearch
- filterOption={companySearch}
- onChange={this.provinceChange}>
- {this.state.provinceOption}
- </Select>
- <Select style={{ width: 160, marginRight: '10px', marginBottom: '10px' }}
- value={this.state.city}
- placeholder="请选择行业城市"
- notFoundContent="未获取到城市列表"
- showSearch
- filterOption={companySearch}
- onChange={this.cityChange}>
- {this.state.cityOption}
- </Select>
- <Select style={{ width: 160, marginRight: '10px', marginBottom: '10px' }}
- value={this.state.area}
- placeholder="请选择行政区"
- notFoundContent="未获取到行政区列表"
- showSearch
- filterOption={companySearch}
- onChange={(e) => { this.setState({ area: e }) }}>
- {this.state.areaOption}
- </Select>
- <Button type="ghost" style={{ marginLeft: '20px' }}
- onClick={() => {
- this.setState({
- province: undefined,
- city: undefined,
- area: undefined
- });
- this.state.province = undefined;
- this.state.city = undefined;
- this.state.area = undefined;
- this.loadData();
- }}>不限</Button>
- </Col>
- </Row>
- <Row className="search-criteria">
- <Col className="search-title" span={2}>
- <span>用户类型</span>
- </Col>
- <Col className="search-select" span={6}>
- <Radio.Group defaultValue={0} onChange={(e) => {
- this.setState({
- type: e.target.value
- });
- this.state.type = e.target.value;
- this.loadData();
- }}>
- <Radio.Button value={0}>个人</Radio.Button>
- <Radio.Button value={1}>组织</Radio.Button>
- </Radio.Group>
- </Col>
- </Row>
- <Spin spinning={this.state.loading}>
- <ul className="clearfix">
- {this.state.dataSource.map((item, i) => {
- return <li key={i} className="user-detail" onClick={() => { _me.tableRowClick(item); }}>
- <div className="logo">
- <img src={(item.personPortraitUrl || item.logoUrl) ?
- (globalConfig.avatarHost + "/upload" + (_me.state.type == 0 ? item.personPortraitUrl : item.logoUrl))
- : avatarImg} alt="头像" />
- </div>
- <div className="name">
- {_me.state.type == 0 ? item.username : item.unitName}
- </div>
- <div className="province">
- <span style={{ letterSpacing: '32px' }}>地</span>
- <span>区: </span>
- <span className="address"> {getProvince(item.province)}</span>
- </div>
- <div className="text">
- <span style={{ letterSpacing: '32px' }}>需</span>
- <span>求: </span>
- <span className="text-Number"> {item.demandNum} </span>
- <span className="text-unit"> 条</span>
- </div>
- <div className="text">
- <span>技术成果: </span>
- <span className="text-Number"> {item.achievementNum} </span>
- <span className="text-unit"> 条</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 SubContent;
|