index.js 3.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. import React,{Component} from 'react';
  2. import {Spin, Upload} from 'antd';
  3. import './index.less';
  4. import Viewer from 'viewerjs';
  5. import 'viewerjs/dist/viewer.css';
  6. import PropTypes from 'prop-types';
  7. // 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';
  8. // 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';
  9. class ImgList extends Component{
  10. constructor(props) {
  11. super(props);
  12. this.state={
  13. seeMore: false,
  14. gallery: null,
  15. loading: true,
  16. imgLoadNum: 0,
  17. }
  18. this.imgLoading = this.imgLoading.bind(this);
  19. }
  20. imgLoading(){
  21. let num = this.state.imgLoadNum + 1;
  22. if(num >= this.props.fileList.length){
  23. this.setState({
  24. gallery: new Viewer(document.getElementById(this.props.domId))
  25. },()=>{
  26. this.setState({
  27. loading: false
  28. })
  29. })
  30. }
  31. this.setState({
  32. imgLoadNum: num
  33. })
  34. }
  35. render() {
  36. const {fileList} = this.props;
  37. if(!fileList || !Array.isArray(fileList) || fileList.length <= 0){
  38. return null;
  39. }
  40. const list = fileList.map((v,i)=>{
  41. v.index = i;
  42. // v.url = i%2 ? url1 : url2;
  43. return v
  44. });
  45. return (
  46. <div className='ImgListComponent'>
  47. <div className='ImgList'>
  48. <Spin spinning={fileList.length === 0 ? false : this.state.loading}>
  49. <Upload
  50. className="demandDetailShow-upload"
  51. listType="picture-card"
  52. fileList={
  53. this.state.seeMore?
  54. list :
  55. list.slice(0,10)
  56. }
  57. onPreview={(file) => {
  58. this.state.gallery.view(file.index).show();
  59. }}
  60. />
  61. </Spin>
  62. </div>
  63. {fileList.length > 10 ? <div className='seeMore' onClick={()=>{this.setState({seeMore:!this.state.seeMore})}}>
  64. {this.state.seeMore ? '收起' : '查看更多'}
  65. </div> : <div/>}
  66. <ul id={this.props.domId} style={{display:'none',zIndex:-1,}}>
  67. {
  68. fileList.map((value,index)=>(
  69. <li key={index}>
  70. <img src={value.url || value.thumbUrl} onLoad={()=>{
  71. this.imgLoading();
  72. }}/>
  73. </li>
  74. ))
  75. }
  76. </ul>
  77. </div>
  78. )
  79. }
  80. }
  81. ImgList.propTypes = {
  82. domId : PropTypes.string, //如果一个界面有多个该组件,需要传入自定义id名称,用于图片列表显示
  83. fileList: PropTypes.array.isRequired, //图片文件列表
  84. }
  85. ImgList.defaultProps = {
  86. domId: 'images',
  87. fileList: [],
  88. }
  89. export default ImgList;