| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162 | import React from "react";import {  Spin,  Button,  Tabs,  Table,  message,  Modal,  Upload,  Tooltip,} from "antd";import { splitUrl } from "@/tools";import "./remove.less"const PicModal = React.createClass({  getInitialState() {    return {      newVisible: false,      rotateDeg: 0,    };  },  componentWillReceiveProps(nextProps) {    this.setState({      newVisible: nextProps.ShowModal,    });  },  handleOk() {    this.setState({      newVisible: false,    });    // window.setTimeout( () => {    //   this.setState({    //     newVisible: true    //   });    // },)  },  downImg() {    let num = 0;    for (let i = 0; i < this.props.picUrl.length; i++) {      if (globalConfig.avatarHost + "/upload" + this.props.picUrl[i] == this.state.previewImage) {        num = i;      }    }    if (num == this.props.picUrl.length - 1) {      return message.warning("已经是最后一张了哦");    }    this.state.previewImage = globalConfig.avatarHost + "/upload" + this.props.picUrl[num + 1];    this.setState({      previewImage: this.state.previewImage,      rotateDeg: 0    });  },  upImg() {    let num = 0;    for (let i = 0; i < this.props.picUrl.length; i++) {      if (globalConfig.avatarHost + "/upload" + this.props.picUrl[i] == this.state.previewImage) {        num = i;      }    }    if (num == 0) {      return message.warning("已经是第一张了哦");    }    this.state.previewImage = globalConfig.avatarHost + "/upload" + this.props.picUrl[num - 1];    this.setState({      previewImage: this.state.previewImage,      rotateDeg: 0    });  },  rotate() {    let rotateDeg = this.state.rotateDeg + 90;    this.setState({      rotateDeg    });  },  render() {    return (      <div>        {this.props.picUrl.map((item, index) => {          return (            <div style={{ display: "inline-block" }}>              <Upload                className="demandDetailShow-upload"                listType="picture-card"                onChange={this.props.remove}                fileList={                  item                    ? splitUrl(item, ",", globalConfig.avatarHost + "/upload")                    : []                }                onPreview={(file) => {                  this.setState({                    previewImage: file.url || file.thumbUrl,                    previewVisible: true,                  });                }}              />              <Tooltip placement="top" title={this.props.remarks[index]}>                <div style={{ textAlign: "center" }}>                  {this.props.remarks[index].length > 7 ? this.props.remarks[index].substring(0,7) + "..." : this.props.remarks[index]}                </div>              </Tooltip>            </div>          );        })}        <Modal          maskClosable={false}          footer={null}          width={"50%"}          visible={this.state.previewVisible}          onCancel={() => {            this.setState({ previewVisible: false, rotateDeg: 0 }, () => {            });          }}        >          <img            alt=""            style={{              width: "100%",              transform: `rotate(${this.state.rotateDeg}deg)`,            }}            src={this.state.previewImage || ""}          />          <Button            onClick={this.rotate}            style={{              position: "relative",              left: "50%",              transform: "translateX(-50%)",            }}          >            旋转          </Button>          <Button            onClick={this.upImg}            style={{              position: "absolute",              left: -81,              top: "50%",              transform: "translateY(-50%)",            }}          >            上一张          </Button>          <Button            onClick={this.downImg}            style={{              position: "absolute",              right: -81,              top: "50%",              transform: "translateY(-50%)",            }}          >            下一张          </Button>        </Modal>      </div>    );  },});export default PicModal;
 |