xinkeaboard/xinkeaboard-seller/src/components/ImgModalChoose/ImgModalChoose.js

import { connect } from 'dva/index';
import React, {Component, Fragment} from 'react';
import {Modal,Empty} from 'antd';
import global from "@/global.less";
import {failTip, list_com_page_more} from "@/utils/utils";
import product from "@/pages/goods/models/product";

let sthis = '';

@connect(({ store,product }) => ({
  store,product
}))

export default class SldPreviewImg extends Component{
  constructor(props){
    super(props);
    this.state = {
      chooseKey:[],
    }
  }

  componentDidMount(){

  }


  //图片选择
  chooseItem = (val,index) => {
    let { chooseKey } = this.state;
    //初次选择
    let a = chooseKey.find(item=>item==index)
    if(a){
      for(let i in chooseKey){
        if(chooseKey[i] == a){
          chooseKey.splice(i,1)
        }
      }
    }else{
      chooseKey.push(index)
    }
    this.setState({chooseKey: chooseKey});
  }



  //slodon_预览关闭modal
  imgModalhandleCancel = () => {
    this.setState({
      chooseKey:[]
    });
    this.props.imgModalhandleCancel();
  }

  imgModalhandleOk = () => {
    let {chooseKey} = this.state
    let {img_data,max_length,imgModalListProps} = this.props
    let data = []
    let img_data_back = Object.assign(img_data)
    for(let i in chooseKey){
      data.push(imgModalListProps[chooseKey[i] - 1] )
    }
    //初始化图片数据
    data.some(item => {
      let img_info = {};
      img_info.uid = item.id+new Date().getTime();
      img_info.thumbUrl = item.url;//图片的url地址
      img_info.name = item.name;
      img_info.status = 'done';
      img_info.response = {};
      img_info.response.state = 200;
      img_info.response.data = {
        path: item.path,
        url: item.url,//图片的url地址
      };
      if(img_data_back.fileList.length >= max_length){
        failTip('最多上传'+ max_length +'个资源！');
        return true
      }else{
        img_data_back.fileList.push(img_info);
        this.imgModalhandleCancel()
        this.props.imgModalhandleOk(img_data_back.fileList);
      }
    });
  }

  render(){
    const { show_choose_modal,imgModalListProps,modal_width} = this.props;
    const {chooseKey} = this.state
    return  <Modal
      title="请选择资源"
      width={modal_width}
      visible={show_choose_modal}
      onOk={this.imgModalhandleOk}
      onCancel={this.imgModalhandleCancel}
    >
      {imgModalListProps.length > 0 && imgModalListProps.map((item, key) =>
        <div key={key} className={ chooseKey.find(item=>item==key+1) ?  `${global.chooseWrapActive}` : `${global.chooseWrap}`} onClick={() => this.chooseItem(item,key+1)} >

            {item.fileType == '.jpg' &&
            <div className={global.item} >
              <img src={item.url}  style={{width:'100%'}} />
            </div>
            }
            {item.fileType == 'video' &&
            <div className={global.file} >
              <a href={item.path} target={'_blank'}>{item.path}</a>
            </div>
            }
            {item.type == 'file' &&
            <div className={global.file} >
              <a>文件类型：{item.fileType}</a>
            </div>
            }

          <p className={global.file_name}>资源名称：{item.name}</p>
        </div>
      )}

      {imgModalListProps.length == 0 &&
      <Empty />
      }
      </Modal>;
  }
}