picModal.jsx 3.9 KB

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