index.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. import React,{Component} from 'react';
  2. import {Icon, 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. const uploadButton = (
  10. <div>
  11. <Icon type="plus" />
  12. <div className="ant-upload-text">点击上传</div>
  13. </div>
  14. );
  15. class ImgList extends Component{
  16. constructor(props) {
  17. super(props);
  18. this.state={
  19. seeMore: false,
  20. gallery: null,
  21. loading: true,
  22. imgLoadNum: 0,
  23. }
  24. this.imgLoading = this.imgLoading.bind(this);
  25. this.setTimeOutObj = null;
  26. }
  27. componentDidMount() {
  28. this.setTimeOutObj = setTimeout(()=>{
  29. this.setState({
  30. gallery: new Viewer(document.getElementById(this.props.domId))
  31. },()=>{
  32. this.setState({
  33. loading: false
  34. })
  35. })
  36. },10000)
  37. }
  38. imgLoading(){
  39. if(Object.keys(this.props.uploadConfig).length !== 0){
  40. this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
  41. }else{
  42. let num = this.state.imgLoadNum + 1;
  43. if(num >= this.props.fileList.length){
  44. this.state.gallery && this.state.gallery.destroy();
  45. this.setState({
  46. gallery: new Viewer(document.getElementById(this.props.domId))
  47. },()=>{
  48. this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
  49. this.setState({
  50. loading: false
  51. })
  52. })
  53. }
  54. this.setState({
  55. imgLoadNum: num
  56. })
  57. }
  58. }
  59. componentWillUnmount() {
  60. this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
  61. }
  62. render() {
  63. const {fileList} = this.props;
  64. if(!fileList || !Array.isArray(fileList)){
  65. return null;
  66. }
  67. return (
  68. <div className='ImgListComponent'>
  69. <div className='ImgList'>
  70. <Spin spinning={Object.keys(this.props.uploadConfig).length !== 0 ? false : (fileList.length === 0 ? false : this.state.loading)} tip="图片加载中...">
  71. <Upload
  72. {...this.props.uploadConfig}
  73. className={Object.keys(this.props.uploadConfig).length !== 0 ? "" : "demandDetailShow-upload" }
  74. listType="picture-card"
  75. fileList={
  76. Object.keys(this.props.uploadConfig).length !== 0 ?
  77. (
  78. fileList.map((v,i)=>{
  79. v.index = i;
  80. // v.url = i%2 ? url1 : url2;
  81. return v
  82. })
  83. ) : (
  84. this.state.seeMore?
  85. fileList.map((v,i)=>{
  86. v.index = i;
  87. // v.url = i%2 ? url1 : url2;
  88. return v
  89. }) :
  90. fileList.map((v,i)=>{
  91. v.index = i;
  92. // v.url = i%2 ? url1 : url2;
  93. return v
  94. }).slice(0,10)
  95. )
  96. }
  97. onPreview={(file) => {
  98. if(Object.keys(this.props.uploadConfig).length !== 0){
  99. //TODO 上传组件,查看图片临时解决方法,无法查看下一张
  100. let image = new Image();
  101. image.src = file.url || file.thumbUrl;
  102. let viewer = new Viewer(image, {
  103. hidden: function () {
  104. viewer.destroy();
  105. },
  106. });
  107. viewer.show();
  108. }else{
  109. this.state.gallery.view(file.index).show();
  110. }
  111. }}
  112. onChange={(infor)=>{
  113. this.state.gallery && this.state.gallery.destroy();
  114. this.props.onChange(infor)
  115. }}
  116. >
  117. {Object.keys(this.props.uploadConfig).length === 0 ? "" : uploadButton}
  118. </Upload>
  119. </Spin>
  120. </div>
  121. {fileList.length > 10 && Object.keys(this.props.uploadConfig).length === 0 ? <div className='seeMore' onClick={()=>{this.setState({seeMore:!this.state.seeMore})}}>
  122. {this.state.seeMore ? '收起' : '查看更多'}
  123. </div> : <div/>}
  124. <ul id={this.props.domId} style={{display:'none',zIndex:-1,}}>
  125. {
  126. fileList.map((value,index)=>(
  127. <li key={index}>
  128. <img src={value.url || value.thumbUrl} onLoad={()=>{
  129. this.imgLoading();
  130. }}/>
  131. </li>
  132. ))
  133. }
  134. </ul>
  135. </div>
  136. )
  137. }
  138. }
  139. ImgList.propTypes = {
  140. domId : PropTypes.string, //如果一个界面有多个该组件,需要传入自定义id名称,用于图片列表显示
  141. fileList: PropTypes.array.isRequired, //图片文件列表
  142. uploadConfig: PropTypes.object, //上传图片配置参数(需要上传图片时需要,存在与否,用于区分是否为上传或者为查看)
  143. onChange: PropTypes.func, //选择图片
  144. }
  145. ImgList.defaultProps = {
  146. domId: 'images',
  147. fileList: [],
  148. uploadConfig: {},
  149. onChange:()=>{}
  150. }
  151. export default ImgList;