import React,{Component} from 'react';
import {Icon, 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';
const uploadButton = (
{
v.index = i;
// v.url = i%2 ? url1 : url2;
return v
})
) : (
this.state.seeMore?
fileList.map((v,i)=>{
v.index = i;
// v.url = i%2 ? url1 : url2;
return v
}) :
fileList.map((v,i)=>{
v.index = i;
// v.url = i%2 ? url1 : url2;
return v
}).slice(0,10)
)
}
onPreview={(file) => {
if(Object.keys(this.props.uploadConfig).length !== 0){
//TODO 上传组件,查看图片临时解决方法,无法查看下一张
let image = new Image();
image.src = file.url || file.thumbUrl;
let viewer = new Viewer(image, {
hidden: function () {
viewer.destroy();
},
});
viewer.show();
}else{
this.state.gallery.view(file.index).show();
}
}}
onChange={(infor)=>{
this.state.gallery && this.state.gallery.destroy();
this.props.onChange(infor)
}}
>
{Object.keys(this.props.uploadConfig).length === 0 ? "" : uploadButton}
{fileList.length > 10 && Object.keys(this.props.uploadConfig).length === 0 ?
{this.setState({seeMore:!this.state.seeMore})}}>
{this.state.seeMore ? '收起' : '查看更多'}
:
}
{
fileList.map((value,index)=>(
-
{
this.imgLoading();
}}/>
))
}
)
}
}
ImgList.propTypes = {
domId : PropTypes.string, //如果一个界面有多个该组件,需要传入自定义id名称,用于图片列表显示
fileList: PropTypes.array.isRequired, //图片文件列表
uploadConfig: PropTypes.object, //上传图片配置参数(需要上传图片时需要,存在与否,用于区分是否为上传或者为查看)
onChange: PropTypes.func, //选择图片
}
ImgList.defaultProps = {
domId: 'images',
fileList: [],
uploadConfig: {},
onChange:()=>{}
}
export default ImgList;