1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495 |
- import React,{Component} from 'react';
- import {Spin, Upload} from 'antd';
- import './index.less';
- import Viewer from 'viewerjs';
- import 'viewerjs/dist/viewer.css';
- import PropTypes from 'prop-types';
- // 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';
- // 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';
- class ImgList extends Component{
- constructor(props) {
- super(props);
- this.state={
- seeMore: false,
- gallery: null,
- loading: true,
- imgLoadNum: 0,
- }
- this.imgLoading = this.imgLoading.bind(this);
- }
- imgLoading(){
- let num = this.state.imgLoadNum + 1;
- if(num >= this.props.fileList.length){
- this.setState({
- gallery: new Viewer(document.getElementById(this.props.domId))
- },()=>{
- this.setState({
- loading: false
- })
- })
- }
- this.setState({
- imgLoadNum: num
- })
- }
- render() {
- const {fileList} = this.props;
- if(!fileList || !Array.isArray(fileList) || fileList.length <= 0){
- return null;
- }
- const list = fileList.map((v,i)=>{
- v.index = i;
- // v.url = i%2 ? url1 : url2;
- return v
- });
- return (
- <div className='ImgListComponent'>
- <div className='ImgList'>
- <Spin spinning={fileList.length === 0 ? false : this.state.loading}>
- <Upload
- className="demandDetailShow-upload"
- listType="picture-card"
- fileList={
- this.state.seeMore?
- list :
- list.slice(0,10)
- }
- onPreview={(file) => {
- this.state.gallery.view(file.index).show();
- }}
- />
- </Spin>
- </div>
- {fileList.length > 10 ? <div className='seeMore' onClick={()=>{this.setState({seeMore:!this.state.seeMore})}}>
- {this.state.seeMore ? '收起' : '查看更多'}
- </div> : <div/>}
- <ul id={this.props.domId} style={{display:'none',zIndex:-1,}}>
- {
- fileList.map((value,index)=>(
- <li key={index}>
- <img src={value.url || value.thumbUrl} onLoad={()=>{
- this.imgLoading();
- }}/>
- </li>
- ))
- }
- </ul>
- </div>
- )
- }
- }
- ImgList.propTypes = {
- domId : PropTypes.string, //如果一个界面有多个该组件,需要传入自定义id名称,用于图片列表显示
- fileList: PropTypes.array.isRequired, //图片文件列表
- }
- ImgList.defaultProps = {
- domId: 'images',
- fileList: [],
- }
- export default ImgList;
|