contentUrl.jsx 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. import React, { Component } from "react";
  2. import { Table, Modal, Button } from "antd";
  3. import PicturesWall from "./changeComponent/picturesWall.js";
  4. import ImgList from "../../../common/imgList";
  5. import $ from "jquery/src/ajax";
  6. class contentUrl extends Component {
  7. constructor(props) {
  8. super(props);
  9. this.state = {
  10. dataView: null,
  11. rotateDeg: 0,
  12. };
  13. this.formRef = {};
  14. this.downImg = this.downImg.bind(this);
  15. this.upImg = this.upImg.bind(this);
  16. this.rotate = this.rotate.bind(this);
  17. }
  18. downImg() {
  19. let num = 0;
  20. for (let i = 0; i < this.props.contentUrl.length; i++) {
  21. if (this.props.contentUrl[i].url == this.state.previewImage) {
  22. num = i;
  23. }
  24. }
  25. if (num == this.props.contentUrl.length - 1) {
  26. return message.warning("已经是最后一张了哦");
  27. }
  28. this.state.previewImage = this.props.contentUrl[num + 1].url;
  29. this.setState({
  30. previewImage: this.state.previewImage,
  31. rotateDeg: 0,
  32. });
  33. }
  34. upImg() {
  35. let num = 0;
  36. for (let i = 0; i < this.props.contentUrl.length; i++) {
  37. if (this.props.contentUrl[i].url == this.state.previewImage) {
  38. num = i;
  39. }
  40. }
  41. if (num == 0) {
  42. return message.warning("已经是第一张了哦");
  43. }
  44. this.state.previewImage = this.props.contentUrl[num - 1].url;
  45. this.setState({
  46. previewImage: this.state.previewImage,
  47. rotateDeg: 0,
  48. });
  49. }
  50. rotate() {
  51. let rotateDeg = this.state.rotateDeg + 90;
  52. this.setState({
  53. rotateDeg,
  54. });
  55. }
  56. render() {
  57. const { contentUrl = [] } = this.props
  58. return (
  59. <div class="clearfix" style={{ display: "flex", margin: "0 0 10px 80px" }}>
  60. <div style={{ marginRight: "6px" }}>
  61. <div style={{ display: "flex" }}><span style={{ color: 'red' }}>*</span><span style={{ color: "#333" }}>服务内容:</span></div>
  62. </div>
  63. <div>
  64. {this.props.processStatus == 0 ?
  65. <div>
  66. <PicturesWall
  67. domId={this.props.domId}
  68. fileList={this.props.getContentUrl}
  69. pictureUrl={this.props.contentUrl}
  70. url="/api/admin/order/uploadOrderImg"
  71. sign=""
  72. />
  73. <p><span style={{ color: "red", display: "inline-block" }}>(请将合同中的服务内容,截图上传!含服务年限,时间节点等;)</span>图片建议:要清晰。</p>
  74. </div> :
  75. !!contentUrl && contentUrl.length > 0 ?
  76. <div>
  77. <ImgList
  78. domId={this.props.imgId}
  79. fileList={this.props.contentUrl}
  80. ItemWidth={"96px"}
  81. />
  82. <Modal
  83. maskClosable={false}
  84. footer={null}
  85. width={"50%"}
  86. visible={this.state.previewVisible}
  87. onCancel={() => {
  88. this.setState({
  89. previewVisible: false,
  90. rotateDeg: 0,
  91. });
  92. }}
  93. >
  94. <img
  95. alt=""
  96. style={{
  97. width: "100%",
  98. transform: `rotate(${this.state.rotateDeg}deg)`,
  99. }}
  100. src={this.state.previewImage || ""}
  101. />
  102. <Button
  103. onClick={this.rotate}
  104. style={{
  105. position: "relative",
  106. left: "50%",
  107. transform: "translateX(-50%)",
  108. }}
  109. >
  110. 旋转
  111. </Button>
  112. <Button
  113. onClick={this.upImg}
  114. style={{
  115. position: "absolute",
  116. left: -81,
  117. top: "50%",
  118. transform: "translateY(-50%)",
  119. }}
  120. >
  121. 上一张
  122. </Button>
  123. <Button
  124. onClick={this.downImg}
  125. style={{
  126. position: "absolute",
  127. right: -81,
  128. top: "50%",
  129. transform: "translateY(-50%)",
  130. }}
  131. >
  132. 下一张
  133. </Button>
  134. </Modal>
  135. </div>
  136. : ""}
  137. </div>
  138. </div>
  139. );
  140. }
  141. }
  142. export default contentUrl;