123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162 |
- 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 = (
- <div>
- <Icon type="plus" />
- <div className="ant-upload-text">点击上传</div>
- </div>
- );
- class ImgList extends Component{
- constructor(props) {
- super(props);
- this.state={
- seeMore: false,
- gallery: null,
- loading: true,
- imgLoadNum: 0,
- }
- this.imgLoading = this.imgLoading.bind(this);
- this.setTimeOutObj = null;
- }
- componentDidMount() {
- this.setTimeOutObj = setTimeout(()=>{
- this.setState({
- gallery: new Viewer(document.getElementById(this.props.domId))
- },()=>{
- this.setState({
- loading: false
- })
- })
- },10000)
- }
- imgLoading(){
- if(Object.keys(this.props.uploadConfig).length !== 0){
- this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
- }else{
- let num = this.state.imgLoadNum + 1;
- if(num >= this.props.fileList.length){
- this.state.gallery && this.state.gallery.destroy();
- this.setState({
- gallery: new Viewer(document.getElementById(this.props.domId))
- },()=>{
- this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
- this.setState({
- loading: false
- })
- })
- }
- this.setState({
- imgLoadNum: num
- })
- }
- }
- componentWillUnmount() {
- this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
- }
- render() {
- const {fileList} = this.props;
- if(!fileList || !Array.isArray(fileList)){
- return null;
- }
- return (
- <div className='ImgListComponent'>
- <div className='ImgList'>
- <Spin spinning={Object.keys(this.props.uploadConfig).length !== 0 ? false : (fileList.length === 0 ? false : this.state.loading)} tip="图片加载中...">
- <Upload
- {...this.props.uploadConfig}
- className={Object.keys(this.props.uploadConfig).length !== 0 ? "" : "demandDetailShow-upload" }
- listType="picture-card"
- fileList={
- Object.keys(this.props.uploadConfig).length !== 0 ?
- (
- fileList.map((v,i)=>{
- 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}
- </Upload>
- </Spin>
- </div>
- {fileList.length > 10 && Object.keys(this.props.uploadConfig).length === 0 ? <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, //图片文件列表
- uploadConfig: PropTypes.object, //上传图片配置参数(需要上传图片时需要,存在与否,用于区分是否为上传或者为查看)
- onChange: PropTypes.func, //选择图片
- }
- ImgList.defaultProps = {
- domId: 'images',
- fileList: [],
- uploadConfig: {},
- onChange:()=>{}
- }
- export default ImgList;
|