aida_front/src/component/HomePage/scaleImage.vue

<template>
		<a-modal
            class="scaleImage_modal generalModel"
            v-model:visible="scaleImage"
            :footer="null"
            width="78%"
            :maskClosable="false"
            :centered="true"
            :closable="false"
            :mask="scaleImageMask"
			:keyboard="false"
			:destroyOnClose="true"
        >
		<div class="generalModel_btn">
			<div class="generalModel_closeIcon left" @click.stop="cancelDsign()">
				<i class="fi fi-rr-cross-small"></i>
			</div>
			<div class="generalModel_closeIcon" @click.stop="download()">
				<i class="fi fi-rr-down-to-line"></i>
			</div>
		</div>
		<div class="scaleImage_content">
			<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
			<div class="img_operate_block">
				<i v-if="!scaleImageList[scaleImageIndex]?.like" class="fi fi-rr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'like')"></i>
				<i v-else class="fi fi-sr-heart operate_icon" :adminLike="!!scaleImageList[scaleImageIndex]?.like" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'noLike')"></i>
			</div>
			
			
		</div>
		<div class="scaleImage_nav" @keydown="handleKeyDown">
			<div class="nav_left">
				<i class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
			</div>
			<div class="nav_list" v-mousewheel>
				<div class="nav_centent">
					<img  v-for="item,index in scaleImageList" @click="setScaleImageIndex(index)" :class="{active:index == scaleImageIndex}" :src="item?.imgUrl" :key="item.id">
				</div>
			</div>
			<div class="nav_right">
				<i class="fi fi-rr-arrow-small-right" @click.stop="nextStep()"></i>
			</div>
		</div>
	<!-- <div>
		<a-button type="primary" @click="() => setVisible(true)">show image preview</a-button>
			<a-image
			:width="200"
			:style="{ display: 'none' }"
			:preview="{
				visible,
				onVisibleChange: setVisible,
			}"
			src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
			/>
		</div> -->
	</a-modal>
</template>

<script lang="ts">
import { defineComponent, h, ref ,computed,reactive, nextTick} from "vue";
// import { Https } from "@/tool/https";
// import { getCookie } from "@/tool/cookie";
// import domTurnImg from '@/tool/domTurnImg'
import { downloadIamge } from "@/tool/util";

export default defineComponent({
    setup() {
        let scaleImage: any = ref(false);
		let loadingShow = ref(false)
		const visible = ref<boolean>(false);
		const setVisible = (value:any): void => {
			visible.value = value;
		};
		let scaleImageList:any = ref([
			
		])
		let scaleImageMask:any = ref(false)
		let scaleImageIndex:any = ref(0)

		let robotAssits:any = ref(0)
        return {
            scaleImage,
			loadingShow,
			visible,
			setVisible,
			scaleImageList,
			scaleImageMask,
			scaleImageIndex,

			robotAssits,
        };
    },
    data() {
        return {
            // moodTemplateId: "", //模板id
			
        };
    },
	directives:{
		mousewheel:{
			mounted (el) {
				el.addEventListener('wheel',(e:WheelEvent)=>{
					let num = 0
					if(e.deltaY > 0){
						num = 25
					}else{
						num = -25
					}
					el.scrollBy(num, 0);
				})
			}
		},
	},
    mounted() {
    },
    methods: {
		init(list:any,index:any,dialogueIndex:any){
			this.scaleImage = true
			this.scaleImageList = list
			this.scaleImageIndex = index
			if(dialogueIndex)this.robotAssits = dialogueIndex
			// let scaleImageList = this.store.state.UploadFilesModule.moodboard
			document.addEventListener('keydown',this.setKeydown)
		},
		cancelDsign(){
			this.scaleImage = false
			this.scaleImageList = []
			this.scaleImageIndex = 0
			document.removeEventListener('keydown',this.setKeydown)
		},
		lastStep(){
			
			if(this.scaleImageIndex <= 0){
			}else{
				this.scaleImageIndex -= 1
			}
		},
		nextStep(){
			if(this.scaleImageIndex >= this.scaleImageList.length-1){
			}else{
				this.scaleImageIndex += 1
			}
		},
		download(){
			downloadIamge(this.scaleImageList[this.scaleImageIndex].imgUrl)
		},
		setScaleImageIndex(index:any){
			this.scaleImageIndex = index
		},
		LikeFile(item:any,str:string){
			let parent:any = this.$parent
			if(this.robotAssits){
				parent.likeFile(item,this.scaleImageIndex,this.robotAssits)
			}else{
				parent.likeFile(item,str)
			}
		},
		setKeydown(event:any){
			if(event.keyCode == 37){
				this.lastStep()
			}else if(event.keyCode == 39){
				this.nextStep()
			}
		}
    },
});
</script>

<style lang="less">
.scaleImage_modal {
	.ant-modal-body {
		display: flex;
		flex-direction: column;
    }
	.scaleImage_content{
		display: flex;
		justify-content: center;
		height: 75%;
		margin: 0 auto;
		margin-top: calc(5rem*1.2);
		position: relative;
		max-width: 70rem;
		img{
			width: auto;
			height: 100%;
		}
		.img_operate_block{
			width: 3.6rem;
			height: 3.6rem;
			background: rgba(0,0,0,0.6);
			border-radius: 50%;
			text-align: center;
			line-height: 3.6rem;
			cursor: pointer;
			margin-bottom: 0.4rem;
			position: absolute;
			right: 2rem;
			top: 2rem;
			opacity: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			.operate_icon{
				font-size: 1.8rem;
				color: #fff;
				&.fi-sr-heart{
					color: red;
				}
			}
			i{
				display: flex;
				font-size: 1.8rem;
				color: #fff;
			}
		}
		
	}
	.scaleImage_content:hover{
		.img_operate_block{
			opacity: 1;
		}
	}
	.scaleImage_nav{
		flex: 1;
		margin: calc(2.5rem*1.2) calc(0rem*1.2);
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		.nav_left,.nav_right{
			cursor: pointer;
			top: 50%;
			i{
				display: flex;
				font-size: 4rem;
				transition: .3s all;
				color: rgba(0, 0, 0, .5);
			}
		}
		// .nav_left{
		// 	left: 0;
		// 	transform: translate(-200%,-50%);
		// }
		// .nav_right{
		//     right: 0;
		// 	transform: translate(200%,-50%);
		// }
		.nav_left:hover,.nav_right:hover{
			i{
				color: rgba(0, 0, 0, 1);
			}
		}
		.nav_list{
			margin: 0 calc(2rem*1.2);
			max-width:  calc(60rem*1.2);
			overflow-y: hidden;
			&.nav_list::-webkit-scrollbar {
				display: none;
			}
			.nav_centent{
				width: auto;
				display: flex;
			}
			img{
				max-width: calc(5rem*1.2);
				max-height: calc(5rem*1.2);
				object-fit: cover;
				object-position: 50%,50%;
				margin-left: calc(1rem*1.2);
				border-radius: calc(1rem*1.2);
				overflow: hidden;
				cursor: pointer;
				padding: calc(.1rem*1.2);
				flex-shrink: 0;
				&.active{
					border: 2px solid #aaaaaa;
				}
			}
			img:nth-child(1){
				margin-left: calc(0rem*1.2);
			}
		}
	}
}
</style>