collection.jsx 3.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. import React, { Component } from 'react';
  2. import { Button,Radio ,message,Row,Col, Spin,Pagination} from 'antd';
  3. import axios from 'axios';
  4. import './collection.less';
  5. class Collection extends Component {
  6. constructor(props) {
  7. super(props);
  8. this.state = {
  9. loading:false,
  10. current:1,
  11. nub:'3'
  12. };
  13. }
  14. loadData(page,nub){
  15. // this.setState({
  16. // loading:true,
  17. // })
  18. //https://www.apiopen.top/satinApi
  19. // axios.get('api/tic',{
  20. // params:{
  21. // type:1,
  22. // page:page
  23. // }
  24. // })
  25. // .then(data=>{
  26. // let thisdata=data.data.data;
  27. // this.setState({
  28. // loading:false,
  29. // thisdata:thisdata,
  30. // total:100
  31. // })
  32. // })
  33. // .catch(error=>{
  34. // message(error.error)
  35. // })
  36. }
  37. componentWillMount(){
  38. this.loadData()
  39. }
  40. tabFun(e){
  41. this.setState({ nub: e.target.value })
  42. this.loadData(1,e.target.value)
  43. }
  44. //分页
  45. onShowSizeChange(current, pageSize){
  46. this.setState({
  47. current:current,
  48. pageSize:pageSize
  49. })
  50. this.loadData(current);
  51. }
  52. jump(item){
  53. console.log(item);
  54. }
  55. render() {
  56. const thisdata =this.state.thisdata || [];
  57. thisdata.length=8;
  58. return <div className="user-content">
  59. <div className="title" >
  60. 我的收藏
  61. </div>
  62. <div>
  63. <Radio.Group className="btnGroup" value={this.state.nub} onChange={this.tabFun.bind(this)}>
  64. <Radio.Button value="1">需求中心</Radio.Button>
  65. <Radio.Button value="2">技术市场</Radio.Button>
  66. <Radio.Button value="3">科技服务</Radio.Button>
  67. <Radio.Button value="4">模块名称</Radio.Button>
  68. </Radio.Group>
  69. </div>
  70. <div className="imgList">
  71. <Spin spinning={this.state.loading}>
  72. {thisdata.length?<Row>
  73. {thisdata.map((item,index)=>{
  74. return<Col span={6} key={index} onClick={(e)=>{this.jump(item)}}>
  75. <div className="img">
  76. <div className="imgHeader">
  77. <img src={item.cdn_img} alt=""/>
  78. <span className="new"></span>
  79. <div><p>{item.text}</p></div>
  80. </div>
  81. <p className="txt">{item.name}</p>
  82. </div>
  83. </Col>
  84. })
  85. }
  86. </Row>:
  87. <Row>暂无数据</Row>}
  88. </Spin>
  89. {this.state.total&&<Pagination className="page" current={this.state.current} total={this.state.total} onChange={this.onShowSizeChange.bind(this)}/>}
  90. </div>
  91. </div>
  92. }
  93. }
  94. export default Collection;