Browse Source

修改图片查看

mentoswzq 4 years ago
parent
commit
a9f7869a53
2 changed files with 113 additions and 31 deletions
  1. 86 31
      js/component/common/imgList/index.js
  2. 27 0
      js/component/common/imgList/index.less

+ 86 - 31
js/component/common/imgList/index.js

@@ -1,10 +1,9 @@
 import React,{Component} from 'react';
-import {Button, Icon, message, Modal, Upload} from 'antd';
+import {Button, Icon, message, Upload} from 'antd';
 import './index.less';
-import $ from "jquery";
 
-// 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';
-// 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';
+// 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';
+// 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';
 class ImgList extends Component{
     constructor(props) {
         super(props);
@@ -26,12 +25,15 @@ class ImgList extends Component{
         this.rotate = this.rotate.bind(this);
     }
 
-    handleCancel() {
+    handleCancel(e) {
+        e.stopPropagation();
         this.setState({
             previewVisible:false,
             previewImage: '',
             rotateDeg: 0,
             selectImgIndex: 0,
+        },()=>{
+            document.getElementsByClassName('imgBox')[0].style.backgroundSize = 'contain';
         })
     }
 
@@ -46,13 +48,15 @@ class ImgList extends Component{
         const {fileList} = this.state;
         let index = this.state.selectImgIndex - 1;
         if(index < 0){
-            message.info('已经是第一张了哦')
+            message.warn('已经是第一张了哦')
         }else{
             let file = fileList[index];
             this.setState({
                 previewImage: file.url || file.thumbUrl,
                 selectImgIndex: index,
                 rotateDeg: 0,
+            },()=>{
+                document.getElementsByClassName('imgBox')[0].style.backgroundSize = 'contain';
             })
         }
     }
@@ -61,13 +65,15 @@ class ImgList extends Component{
         const {fileList} = this.state;
         let index = this.state.selectImgIndex + 1;
         if(index >= fileList.length){
-            message.info('已经是最后一张了哦')
+            message.warn('已经是最后一张了哦')
         }else{
             let file = fileList[index];
             this.setState({
                 previewImage: file.url || file.thumbUrl,
                 selectImgIndex: index,
                 rotateDeg: 0,
+            },()=>{
+                document.getElementsByClassName('imgBox')[0].style.backgroundSize = 'contain';
             })
         }
     }
@@ -90,6 +96,8 @@ class ImgList extends Component{
                             previewImage: file.url || file.thumbUrl,
                             previewVisible: true,
                             selectImgIndex: file.index,
+                        },()=>{
+                            document.getElementsByClassName('imgBox')[0].style.backgroundSize = 'contain';
                         })
                       }}
                     />
@@ -97,52 +105,94 @@ class ImgList extends Component{
                 {fileList.length > 10 ? <div className='seeMore' onClick={()=>{this.setState({seeMore:!this.state.seeMore})}}>
                     {this.state.seeMore ? '收起' : '查看更多'}
                 </div> : <div/>}
-                <Modal
-                    maskClosable={false}
-                    footer={null}
-                    width={'80%'}
-                    visible={this.state.previewVisible}
-                    onCancel={this.handleCancel}
-                >
+                <div className={'imgModal'} style={{display:this.state.previewVisible ? 'flex' : 'none'}}>
+                    <div className='floatingLayer' onClick={this.handleCancel}/>
+                    <div style={{
+                        position:"absolute",
+                        zIndex:99998,
+                        width:'calc(100vh - 40px)',
+                        height:'calc(100vh - 40px)',
+                        transform: `rotate(${this.state.rotateDeg}deg)`,
+                        padding:'20px',
+                    }}>
+                        <div className='imgBox' style={{
+                            width:'100%',
+                            height:'100%',
+                            background: `rgba(0,0,0,0) url('${this.state.previewImage}') no-repeat center`,
+                            backgroundSize: 'contain',
+                        }}/>
+                    </div>
                     <div className='actionBar'>
                         <div
                             style={{
                                 cursor:"pointer",
-                                background:'rgba(0,0,0,0)'
+                                background:'rgba(0,0,0,.5)',
+                                position: 'fixed',
+                                top: '30px',
+                                left: '0',
+                                right: '0',
+                                textAlign:'center',
+                                zIndex: '99999',
+                                color:'#FFFFFF',
+                                fontSize:'50px',
+                                fontWeight:"bolder",
                             }}
-                            onClick={this.upImg}>
+                        >
+                            {this.state.selectImgIndex + 1}/{fileList.length}
+                        </div>
+                        <div
+                            style={{
+                                cursor:"pointer",
+                                background:'rgba(0,0,0,0)',
+                                position: 'fixed',
+                                top: '60px',
+                                right: '60px',
+                                zIndex: '99999',
+                                color:'#FFFFFF',
+                            }}
+                            onClick={this.handleCancel}
+                        >
                             <Icon
-                                type="left-circle-o"
+                                type="close"
                                 style={{
                                     fontSize:'50px',
-                                    marginRight:'20px'
+                                    color:'#FFFFFF'
                                 }}
                             />
                         </div>
-                        <div style={{
-                            flex:1
-                        }}>
-                            <img
-                                alt=""
+                        <div
+                            style={{
+                                cursor:"pointer",
+                                background:'rgba(0,0,0,0)',
+                                position: 'fixed',
+                                top: 'calc(50vh - 50px)',
+                                left: '4%',
+                                zIndex: '99999',
+                            }}
+                            onClick={this.upImg}>
+                            <Icon
+                                type="left-circle-o"
                                 style={{
-                                    width: '100%',
-                                    marginTop: '15px',
-                                    transform: `rotate(${this.state.rotateDeg}deg)`,
+                                    fontSize:'50px',
+                                    color:'#FFFFFF'
                                 }}
-                                src={this.state.previewImage || ''}
                             />
                         </div>
                         <div
                             style={{
                                 cursor:"pointer",
-                                background:'rgba(0,0,0,0)'
+                                background:'rgba(0,0,0,0)',
+                                position: 'fixed',
+                                top: 'calc(50vh - 50px)',
+                                right: '4%',
+                                zIndex: '99999',
                             }}
                             onClick={this.downImg}>
                             <Icon
                                 type="right-circle-o"
                                 style={{
                                     fontSize:'50px',
-                                    marginLeft:'20px'
+                                    color:'#FFFFFF'
                                 }}
                             />
                         </div>
@@ -151,13 +201,18 @@ class ImgList extends Component{
                         display:'flex',
                         flexFlow:'row',
                         marginTop:'20px',
-                        justifyContent:'center'
+                        justifyContent:'center',
+                        position: 'fixed',
+                        bottom: '7px',
+                        zIndex: '99999',
+                        left:0,
+                        right:0,
                     }}>
                         <Button onClick={this.rotate}>
                             旋转
                         </Button>
                     </div>
-                </Modal>
+                </div >
             </div>
         )
     }

+ 27 - 0
js/component/common/imgList/index.less

@@ -44,7 +44,34 @@
   }
 }
 .actionBar{
+  position: relative;
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
+}
+.imgModal{
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 99999;
+  .floatingLayer{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 99997;
+    background: rgba(0,0,0,.5);
+  }
+  .ant-modal-content{
+    background:rgba(0,0,0,0) !important;
+  }
+  .ant-modal-content{
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0);
+  }
 }