index.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. import React,{Component} from 'react';
  2. import {Button, Icon, message, Modal, Upload} from 'antd';
  3. import './index.less';
  4. import $ from "jquery";
  5. // const url1 = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600944413153&di=0b64017df8b86076cdba052010ee7516&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F70%2F91%2F01300000261284122542917592865.jpg';
  6. // const url2 = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600944610499&di=e72ee8d92fa8ce27c09abb2a50aa5f9d&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F22%2F59%2F19300001325156131228593878903.jpg';
  7. class ImgList extends Component{
  8. constructor(props) {
  9. super(props);
  10. this.state={
  11. seeMore: false,
  12. previewVisible: false,
  13. previewImage: '',
  14. rotateDeg: 0,
  15. fileList: props.fileList.map((v,i)=>{
  16. v.index = i;
  17. // v.url = i%2 ? url1 : url2;
  18. return v
  19. }) || [],
  20. selectImgIndex: 0, //选择的图片索引
  21. }
  22. this.handleCancel = this.handleCancel.bind(this);
  23. this.downImg = this.downImg.bind(this);
  24. this.upImg = this.upImg.bind(this);
  25. this.rotate = this.rotate.bind(this);
  26. }
  27. handleCancel() {
  28. this.setState({
  29. previewVisible:false,
  30. previewImage: '',
  31. rotateDeg: 0,
  32. selectImgIndex: 0,
  33. })
  34. }
  35. rotate() {
  36. let rotateDeg = this.state.rotateDeg + 90;
  37. this.setState({
  38. rotateDeg,
  39. })
  40. }
  41. upImg() {
  42. const {fileList} = this.state;
  43. let index = this.state.selectImgIndex - 1;
  44. if(index < 0){
  45. message.info('已经是第一张了哦')
  46. }else{
  47. let file = fileList[index];
  48. this.setState({
  49. previewImage: file.url || file.thumbUrl,
  50. selectImgIndex: index,
  51. rotateDeg: 0,
  52. })
  53. }
  54. }
  55. downImg() {
  56. const {fileList} = this.state;
  57. let index = this.state.selectImgIndex + 1;
  58. if(index >= fileList.length){
  59. message.info('已经是最后一张了哦')
  60. }else{
  61. let file = fileList[index];
  62. this.setState({
  63. previewImage: file.url || file.thumbUrl,
  64. selectImgIndex: index,
  65. rotateDeg: 0,
  66. })
  67. }
  68. }
  69. render() {
  70. const {fileList} = this.state;
  71. return (
  72. <div className='ImgListComponent'>
  73. <div className='ImgList'>
  74. <Upload
  75. className="demandDetailShow-upload"
  76. listType="picture-card"
  77. fileList={
  78. this.state.seeMore?
  79. fileList :
  80. fileList.slice(0,10)
  81. }
  82. onPreview={(file) => {
  83. this.setState({
  84. previewImage: file.url || file.thumbUrl,
  85. previewVisible: true,
  86. selectImgIndex: file.index,
  87. })
  88. }}
  89. />
  90. </div>
  91. {fileList.length > 10 ? <div className='seeMore' onClick={()=>{this.setState({seeMore:!this.state.seeMore})}}>
  92. {this.state.seeMore ? '收起' : '查看更多'}
  93. </div> : <div/>}
  94. <Modal
  95. maskClosable={false}
  96. footer={null}
  97. width={'80%'}
  98. visible={this.state.previewVisible}
  99. onCancel={this.handleCancel}
  100. >
  101. <div className='actionBar'>
  102. <div
  103. style={{
  104. cursor:"pointer",
  105. background:'rgba(0,0,0,0)'
  106. }}
  107. onClick={this.upImg}>
  108. <Icon
  109. type="left-circle-o"
  110. style={{
  111. fontSize:'50px',
  112. marginRight:'20px'
  113. }}
  114. />
  115. </div>
  116. <div style={{
  117. flex:1
  118. }}>
  119. <img
  120. alt=""
  121. style={{
  122. width: '100%',
  123. marginTop: '15px',
  124. transform: `rotate(${this.state.rotateDeg}deg)`,
  125. }}
  126. src={this.state.previewImage || ''}
  127. />
  128. </div>
  129. <div
  130. style={{
  131. cursor:"pointer",
  132. background:'rgba(0,0,0,0)'
  133. }}
  134. onClick={this.downImg}>
  135. <Icon
  136. type="right-circle-o"
  137. style={{
  138. fontSize:'50px',
  139. marginLeft:'20px'
  140. }}
  141. />
  142. </div>
  143. </div>
  144. <div style={{
  145. display:'flex',
  146. flexFlow:'row',
  147. marginTop:'20px',
  148. justifyContent:'center'
  149. }}>
  150. <Button onClick={this.rotate}>
  151. 旋转
  152. </Button>
  153. </div>
  154. </Modal>
  155. </div>
  156. )
  157. }
  158. }
  159. export default ImgList;