contentUrl.jsx 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  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.contentUrl
  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 ? <div> <PicturesWall
  65. domId={this.props.domId}
  66. fileList={this.props.getContentUrl}
  67. pictureUrl={this.props.contentUrl}
  68. url="/api/admin/order/uploadOrderImg"
  69. sign=""
  70. />
  71. <p><span style={{color:"red",display:"inline-block"}}>(请将合同中的服务内容,截图上传!含服务年限,时间节点等;)</span>图片建议:要清晰。</p></div> : contentUrl ? <div><ImgList
  72. domId={this.props.imgId}
  73. fileList={this.props.contentUrl}
  74. ItemWidth={"96px"}
  75. /><Modal
  76. maskClosable={false}
  77. footer={null}
  78. width={"50%"}
  79. visible={this.state.previewVisible}
  80. onCancel={() => {
  81. this.setState({
  82. previewVisible: false,
  83. rotateDeg: 0,
  84. });
  85. }}
  86. >
  87. <img
  88. alt=""
  89. style={{
  90. width: "100%",
  91. transform: `rotate(${this.state.rotateDeg}deg)`,
  92. }}
  93. src={this.state.previewImage || ""}
  94. />
  95. <Button
  96. onClick={this.rotate}
  97. style={{
  98. position: "relative",
  99. left: "50%",
  100. transform: "translateX(-50%)",
  101. }}
  102. >
  103. 旋转
  104. </Button>
  105. <Button
  106. onClick={this.upImg}
  107. style={{
  108. position: "absolute",
  109. left: -81,
  110. top: "50%",
  111. transform: "translateY(-50%)",
  112. }}
  113. >
  114. 上一张
  115. </Button>
  116. <Button
  117. onClick={this.downImg}
  118. style={{
  119. position: "absolute",
  120. right: -81,
  121. top: "50%",
  122. transform: "translateY(-50%)",
  123. }}
  124. >
  125. 下一张
  126. </Button>
  127. </Modal> </div>
  128. :"暂无附件!"}
  129. {/* <div style={{color:"red"}}>(请将合同中的服务内容,截图上传!含服务年限,时间节点等)</div> */}
  130. </div>
  131. </div>
  132. );
  133. }
  134. }
  135. export default contentUrl;