index.js 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. import React,{Component} from 'react';
  2. import {Button, Icon, message, Upload} from 'antd';
  3. import './index.less';
  4. // const url1 = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601012352754&di=d33308119328f5ed987bd90031f98cfa&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F27%2F81%2F01200000194677136358818023076.jpg';
  5. // const url2 = 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1601001245&di=60b5e1a42beb791524b46d7e3677f1f4&src=http://a2.att.hudong.com/13/86/01300001285722131043860050752.jpg';
  6. class ImgList extends Component{
  7. constructor(props) {
  8. super(props);
  9. this.state={
  10. seeMore: false,
  11. previewVisible: false,
  12. previewImage: '',
  13. rotateDeg: 0,
  14. fileList: props.fileList.map((v,i)=>{
  15. v.index = i;
  16. // v.url = i%2 ? url1 : url2;
  17. return v
  18. }) || [],
  19. selectImgIndex: 0, //选择的图片索引
  20. }
  21. this.handleCancel = this.handleCancel.bind(this);
  22. this.downImg = this.downImg.bind(this);
  23. this.upImg = this.upImg.bind(this);
  24. this.rotate = this.rotate.bind(this);
  25. }
  26. handleCancel(e) {
  27. e.stopPropagation();
  28. this.setState({
  29. previewVisible:false,
  30. previewImage: '',
  31. rotateDeg: 0,
  32. selectImgIndex: 0,
  33. },()=>{
  34. document.getElementsByClassName('imgBox')[0].style.backgroundSize = 'contain';
  35. })
  36. }
  37. rotate() {
  38. let rotateDeg = this.state.rotateDeg + 90;
  39. this.setState({
  40. rotateDeg,
  41. })
  42. }
  43. upImg() {
  44. const {fileList} = this.state;
  45. let index = this.state.selectImgIndex - 1;
  46. if(index < 0){
  47. message.warn('已经是第一张了哦')
  48. }else{
  49. let file = fileList[index];
  50. this.setState({
  51. previewImage: file.url || file.thumbUrl,
  52. selectImgIndex: index,
  53. rotateDeg: 0,
  54. },()=>{
  55. document.getElementsByClassName('imgBox')[0].style.backgroundSize = 'contain';
  56. })
  57. }
  58. }
  59. downImg() {
  60. const {fileList} = this.state;
  61. let index = this.state.selectImgIndex + 1;
  62. if(index >= fileList.length){
  63. message.warn('已经是最后一张了哦')
  64. }else{
  65. let file = fileList[index];
  66. this.setState({
  67. previewImage: file.url || file.thumbUrl,
  68. selectImgIndex: index,
  69. rotateDeg: 0,
  70. },()=>{
  71. document.getElementsByClassName('imgBox')[0].style.backgroundSize = 'contain';
  72. })
  73. }
  74. }
  75. render() {
  76. const {fileList} = this.state;
  77. return (
  78. <div className='ImgListComponent'>
  79. <div className='ImgList'>
  80. <Upload
  81. className="demandDetailShow-upload"
  82. listType="picture-card"
  83. fileList={
  84. this.state.seeMore?
  85. fileList :
  86. fileList.slice(0,10)
  87. }
  88. onPreview={(file) => {
  89. this.setState({
  90. previewImage: file.url || file.thumbUrl,
  91. previewVisible: true,
  92. selectImgIndex: file.index,
  93. },()=>{
  94. document.getElementsByClassName('imgBox')[0].style.backgroundSize = 'contain';
  95. })
  96. }}
  97. />
  98. </div>
  99. {fileList.length > 10 ? <div className='seeMore' onClick={()=>{this.setState({seeMore:!this.state.seeMore})}}>
  100. {this.state.seeMore ? '收起' : '查看更多'}
  101. </div> : <div/>}
  102. <div className={'imgModal'} style={{display:this.state.previewVisible ? 'flex' : 'none'}}>
  103. <div className='floatingLayer' onClick={this.handleCancel}/>
  104. <div style={{
  105. position:"absolute",
  106. zIndex:99998,
  107. width:'calc(100vh - 40px)',
  108. height:'calc(100vh - 40px)',
  109. transform: `rotate(${this.state.rotateDeg}deg)`,
  110. padding:'20px',
  111. }}>
  112. <div className='imgBox' style={{
  113. width:'100%',
  114. height:'100%',
  115. background: `rgba(0,0,0,0) url('${this.state.previewImage}') no-repeat center`,
  116. backgroundSize: 'contain',
  117. }}/>
  118. </div>
  119. <div className='actionBar'>
  120. <div
  121. style={{
  122. cursor:"pointer",
  123. background:'rgba(0,0,0,.5)',
  124. position: 'fixed',
  125. top: '30px',
  126. left: '0',
  127. right: '0',
  128. textAlign:'center',
  129. zIndex: '99999',
  130. color:'#FFFFFF',
  131. fontSize:'50px',
  132. fontWeight:"bolder",
  133. }}
  134. >
  135. {this.state.selectImgIndex + 1}/{fileList.length}
  136. </div>
  137. <div
  138. style={{
  139. cursor:"pointer",
  140. background:'rgba(0,0,0,0)',
  141. position: 'fixed',
  142. top: '60px',
  143. right: '60px',
  144. zIndex: '99999',
  145. color:'#FFFFFF',
  146. }}
  147. onClick={this.handleCancel}
  148. >
  149. <Icon
  150. type="close"
  151. style={{
  152. fontSize:'50px',
  153. color:'#FFFFFF'
  154. }}
  155. />
  156. </div>
  157. <div
  158. style={{
  159. cursor:"pointer",
  160. background:'rgba(0,0,0,0)',
  161. position: 'fixed',
  162. top: 'calc(50vh - 50px)',
  163. left: '4%',
  164. zIndex: '99999',
  165. }}
  166. onClick={this.upImg}>
  167. <Icon
  168. type="left-circle-o"
  169. style={{
  170. fontSize:'50px',
  171. color:'#FFFFFF'
  172. }}
  173. />
  174. </div>
  175. <div
  176. style={{
  177. cursor:"pointer",
  178. background:'rgba(0,0,0,0)',
  179. position: 'fixed',
  180. top: 'calc(50vh - 50px)',
  181. right: '4%',
  182. zIndex: '99999',
  183. }}
  184. onClick={this.downImg}>
  185. <Icon
  186. type="right-circle-o"
  187. style={{
  188. fontSize:'50px',
  189. color:'#FFFFFF'
  190. }}
  191. />
  192. </div>
  193. </div>
  194. <div style={{
  195. display:'flex',
  196. flexFlow:'row',
  197. marginTop:'20px',
  198. justifyContent:'center',
  199. position: 'fixed',
  200. bottom: '7px',
  201. zIndex: '99999',
  202. left:0,
  203. right:0,
  204. }}>
  205. <Button onClick={this.rotate}>
  206. 旋转
  207. </Button>
  208. </div>
  209. </div >
  210. </div>
  211. )
  212. }
  213. }
  214. export default ImgList;