kede-client/js/component/manageCenter/order/orderNew/contentUrl.jsx

import React, { Component } from "react";
import { Table, Modal, Button, Form } from "antd";
import PicturesWall from "./changeComponent/picturesWall.js";
import ImgList from "../../../common/imgList";
import $ from "jquery/src/ajax";
import FormItem from "antd/lib/form/FormItem.js";

class contentUrl extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataView: null,
      rotateDeg: 0,

    };
    this.formRef = {};
    this.downImg = this.downImg.bind(this);
    this.upImg = this.upImg.bind(this);
    this.rotate = this.rotate.bind(this);
  }

  downImg() {
    let num = 0;
    for (let i = 0; i < this.props.contentUrl.length; i++) {
      if (this.props.contentUrl[i].url == this.state.previewImage) {
        num = i;
      }
    }
    if (num == this.props.contentUrl.length - 1) {
      return message.warning("已经是最后一张了哦");
    }
    this.state.previewImage = this.props.contentUrl[num + 1].url;
    this.setState({
      previewImage: this.state.previewImage,
      rotateDeg: 0,
    });
  }
  upImg() {
    let num = 0;
    for (let i = 0; i < this.props.contentUrl.length; i++) {
      if (this.props.contentUrl[i].url == this.state.previewImage) {
        num = i;
      }
    }
    if (num == 0) {
      return message.warning("已经是第一张了哦");
    }
    this.state.previewImage = this.props.contentUrl[num - 1].url;
    this.setState({
      previewImage: this.state.previewImage,
      rotateDeg: 0,
    });
  }
  rotate() {
    let rotateDeg = this.state.rotateDeg + 90;
    this.setState({
      rotateDeg,
    });
  }
  render() {
    const { contentUrl = [], labelCol = 5, wrapperCol = 19 } = this.props
    const FormItem = Form.Item;
    return (
      <div class="clearfix">
        <FormItem
          labelCol={{ span: labelCol }}
          wrapperCol={{ span: wrapperCol }}
          label={
            <span>
              <strong style={{ color: "#f00" }}>*</strong>
              服务内容
            </span>
          }
        >
          <div>
            {this.props.processStatus == 0 ?
              <div>
                <PicturesWall
                  domId={this.props.domId}
                  fileList={this.props.getContentUrl}
                  pictureUrl={this.props.contentUrl}
                  url="/api/admin/order/uploadOrderImg"
                  sign=""
                />
                <p><span style={{ color: "red", display: "inline-block" }}>(请将合同中的服务内容,截图上传!含服务年限,时间节点等;)</span>图片建议:要清晰。</p>
              </div> :
              !!contentUrl && contentUrl.length > 0 ?
                <div>
                  <ImgList
                    domId={this.props.imgId}
                    fileList={this.props.contentUrl}
                    ItemWidth={"96px"}
                  />
                </div>
                : ""}
          </div>
        </FormItem>
      </div>
    );
  }
}

export default contentUrl;