123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145 |
- import React, { Component } from "react";
- import { Table, Modal, Button } from "antd";
- import PicturesWall from "./changeComponent/picturesWall.js";
- import ImgList from "../../../common/imgList";
- import $ from "jquery/src/ajax";
- 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 = [] } = this.props
- return (
- <div class="clearfix" style={{ display: "flex", margin: "0 0 10px 80px" }}>
- <div style={{ marginRight: "6px" }}>
- <div style={{ display: "flex" }}><span style={{ color: 'red' }}>*</span><span style={{ color: "#333" }}>服务内容:</span></div>
- </div>
- <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"}
- />
- <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>
- : ""}
- </div>
- </div>
- );
- }
- }
- export default contentUrl;
|