contentUrl.jsx 4.7 KB

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