123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166 |
- import React,{Component} from 'react';
- import {Button, Icon, message, Modal, 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';
- class ImgList extends Component{
- constructor(props) {
- super(props);
- this.state={
- seeMore: false,
- previewVisible: false,
- previewImage: '',
- rotateDeg: 0,
- fileList: props.fileList.map((v,i)=>{
- v.index = i;
- // v.url = i%2 ? url1 : url2;
- return v
- }) || [],
- selectImgIndex: 0, //选择的图片索引
- }
- this.handleCancel = this.handleCancel.bind(this);
- this.downImg = this.downImg.bind(this);
- this.upImg = this.upImg.bind(this);
- this.rotate = this.rotate.bind(this);
- }
- handleCancel() {
- this.setState({
- previewVisible:false,
- previewImage: '',
- rotateDeg: 0,
- selectImgIndex: 0,
- })
- }
- rotate() {
- let rotateDeg = this.state.rotateDeg + 90;
- this.setState({
- rotateDeg,
- })
- }
- upImg() {
- const {fileList} = this.state;
- let index = this.state.selectImgIndex - 1;
- if(index < 0){
- message.info('已经是第一张了哦')
- }else{
- let file = fileList[index];
- this.setState({
- previewImage: file.url || file.thumbUrl,
- selectImgIndex: index,
- rotateDeg: 0,
- })
- }
- }
- downImg() {
- const {fileList} = this.state;
- let index = this.state.selectImgIndex + 1;
- if(index >= fileList.length){
- message.info('已经是最后一张了哦')
- }else{
- let file = fileList[index];
- this.setState({
- previewImage: file.url || file.thumbUrl,
- selectImgIndex: index,
- rotateDeg: 0,
- })
- }
- }
- render() {
- const {fileList} = this.state;
- return (
- <div className='ImgListComponent'>
- <div className='ImgList'>
- <Upload
- className="demandDetailShow-upload"
- listType="picture-card"
- fileList={
- this.state.seeMore?
- fileList :
- fileList.slice(0,10)
- }
- onPreview={(file) => {
- this.setState({
- previewImage: file.url || file.thumbUrl,
- previewVisible: true,
- selectImgIndex: file.index,
- })
- }}
- />
- </div>
- {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='actionBar'>
- <div
- style={{
- cursor:"pointer",
- background:'rgba(0,0,0,0)'
- }}
- onClick={this.upImg}>
- <Icon
- type="left-circle-o"
- style={{
- fontSize:'50px',
- marginRight:'20px'
- }}
- />
- </div>
- <div style={{
- flex:1
- }}>
- <img
- alt=""
- style={{
- width: '100%',
- marginTop: '15px',
- transform: `rotate(${this.state.rotateDeg}deg)`,
- }}
- src={this.state.previewImage || ''}
- />
- </div>
- <div
- style={{
- cursor:"pointer",
- background:'rgba(0,0,0,0)'
- }}
- onClick={this.downImg}>
- <Icon
- type="right-circle-o"
- style={{
- fontSize:'50px',
- marginLeft:'20px'
- }}
- />
- </div>
- </div>
- <div style={{
- display:'flex',
- flexFlow:'row',
- marginTop:'20px',
- justifyContent:'center'
- }}>
- <Button onClick={this.rotate}>
- 旋转
- </Button>
- </div>
- </Modal>
- </div>
- )
- }
- }
- export default ImgList;
|