index.js 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. import React,{Component} from 'react';
  2. import {Upload} from 'antd';
  3. import './index.less';
  4. import Viewer from 'viewerjs';
  5. import 'viewerjs/dist/viewer.css'
  6. //const url1 = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601012352754&di=d33308119328f5ed987bd90031f98cfa&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F27%2F81%2F01200000194677136358818023076.jpg';
  7. //const url2 = 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1601001245&di=60b5e1a42beb791524b46d7e3677f1f4&src=http://a2.att.hudong.com/13/86/01300001285722131043860050752.jpg';
  8. class ImgList extends Component{
  9. constructor(props) {
  10. super(props);
  11. this.state={
  12. seeMore: false,
  13. fileList: props.fileList.map((v,i)=>{
  14. v.index = i;
  15. // v.url = i%2 ? url1 : url2;
  16. return v
  17. }) || [],
  18. }
  19. }
  20. componentDidMount() {
  21. this.gallery = new Viewer(document.getElementById('images'));
  22. }
  23. render() {
  24. const {fileList} = this.state;
  25. return (
  26. <div className='ImgListComponent'>
  27. <div className='ImgList'>
  28. <Upload
  29. className="demandDetailShow-upload"
  30. listType="picture-card"
  31. fileList={
  32. this.state.seeMore?
  33. fileList :
  34. fileList.slice(0,10)
  35. }
  36. onPreview={(file) => {
  37. this.gallery.view(file.index).show();
  38. }}
  39. />
  40. </div>
  41. {fileList.length > 10 ? <div className='seeMore' onClick={()=>{this.setState({seeMore:!this.state.seeMore})}}>
  42. {this.state.seeMore ? '收起' : '查看更多'}
  43. </div> : <div/>}
  44. <ul id="images" style={{display:'none',zIndex:-1,}}>
  45. {
  46. fileList.map((value,index)=>(
  47. <li key={index}>
  48. <img src={value.url || value.thumbUrl}/>
  49. </li>
  50. ))
  51. }
  52. </ul>
  53. </div>
  54. )
  55. }
  56. }
  57. export default ImgList;