| 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;
 
 
  |