picModal.jsx 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. import React from "react";
  2. import { Spin, Button, Tabs, Table, message, Modal, Upload } from "antd";
  3. import { splitUrl } from "@/tools";
  4. const ShowModal = React.createClass({
  5. getInitialState() {
  6. return {
  7. newVisible: false,
  8. rotateDeg: 0,
  9. };
  10. },
  11. componentWillReceiveProps(nextProps) {
  12. this.setState({
  13. newVisible: nextProps.ShowModal,
  14. });
  15. },
  16. handleOk() {
  17. this.setState({
  18. newVisible: false,
  19. });
  20. // window.setTimeout( () => {
  21. // this.setState({
  22. // newVisible: true
  23. // });
  24. // },)
  25. },
  26. downImg() {
  27. let num = 0;
  28. for (let i = 0; i < this.props.pictureUrl.length; i++) {
  29. if (this.props.pictureUrl[i].url == this.state.previewImage) {
  30. num = i;
  31. }
  32. }
  33. if (num == this.props.pictureUrl.length - 1) {
  34. return message.warning("已经是最后一张了哦");
  35. }
  36. this.state.previewImage = this.props.pictureUrl[num + 1].url;
  37. this.setState({
  38. previewImage: this.state.previewImage,
  39. rotateDeg: 0
  40. });
  41. },
  42. upImg() {
  43. let num = 0;
  44. for (let i = 0; i < this.props.pictureUrl.length; i++) {
  45. if (this.props.pictureUrl[i].url == this.state.previewImage) {
  46. num = i;
  47. }
  48. }
  49. if (num == 0) {
  50. return message.warning("已经是第一张了哦");
  51. }
  52. this.state.previewImage = this.props.pictureUrl[num - 1].url;
  53. this.setState({
  54. previewImage: this.state.previewImage,
  55. rotateDeg: 0
  56. });
  57. },
  58. rotate() {
  59. let rotateDeg = this.state.rotateDeg + 90;
  60. this.setState({
  61. rotateDeg
  62. });
  63. },
  64. render() {
  65. return (
  66. <div>
  67. {this.props.picUrl.map((item, index) => {
  68. return (
  69. <div style={{ display: "inline-block" }}>
  70. <Upload
  71. className="demandDetailShow-upload"
  72. listType="picture-card"
  73. fileList={
  74. item
  75. ? splitUrl(item, ",", globalConfig.avatarHost + "/upload")
  76. : []
  77. }
  78. onPreview={(file) => {
  79. this.setState({
  80. previewImage: file.url || file.thumbUrl,
  81. previewVisible: true,
  82. });
  83. }}
  84. />
  85. <div style={{ textAlign: "center" }}>{this.props.remarks[index]}</div>
  86. </div>
  87. );
  88. })}
  89. <Modal
  90. maskClosable={false}
  91. footer={null}
  92. visible={this.state.previewVisible}
  93. onCancel={() => {
  94. this.setState({ previewVisible: false, rotateDeg: 0 }, () => {
  95. });
  96. }}
  97. >
  98. <img
  99. alt=""
  100. style={{
  101. width: "100%",
  102. transform: `rotate(${this.state.rotateDeg}deg)`,
  103. }}
  104. src={this.state.previewImage || ""}
  105. />
  106. <Button
  107. onClick={this.rotate}
  108. style={{
  109. position: "relative",
  110. left: "50%",
  111. transform: "translateX(-50%)",
  112. }}
  113. >
  114. 旋转
  115. </Button>
  116. <Button
  117. onClick={this.upImg}
  118. style={{
  119. position: "absolute",
  120. left: -81,
  121. top: "50%",
  122. transform: "translateY(-50%)",
  123. }}
  124. >
  125. 上一张
  126. </Button>
  127. <Button
  128. onClick={this.downImg}
  129. style={{
  130. position: "absolute",
  131. right: -81,
  132. top: "50%",
  133. transform: "translateY(-50%)",
  134. }}
  135. >
  136. 下一张
  137. </Button>
  138. </Modal>
  139. </div>
  140. );
  141. },
  142. });
  143. export default ShowModal;