aida_front/src/component/HomePage/scaleImage.vue

<template>
		<a-modal
            class="scaleImage_modal"
            v-model:visible="scaleImage"
            :footer="null"
            width="65%"
            :maskClosable="false"
            :centered="true"
            :closable="false"
            :mask="false"
			:destroyOnClose="true"
        >
		<div class="scaleImage_btn">
			<div class="collection_closeIcon left" @click.stop="cancelDsign()">
				<i class="fi fi-rr-cross-small"></i>
			</div>
			<div class="collection_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>
		<div class="scaleImage_nav">
			<div class="nav_left">
				<i class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
			</div>
			<div class="nav_list">
				<img  v-for="item,index in scaleImageList" @click="setScaleImageIndex(index)" :class="{active:index == scaleImageIndex}" :src="item?.imgUrl" :key="item.id">
			</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 scaleImageIndex:any = ref(0)
        return {
            scaleImage,
			loadingShow,
			visible,
			setVisible,
			scaleImageList,
			scaleImageIndex,
        };
    },
    data() {
        return {
            // moodTemplateId: "", //模板id
			
        };
    },

    mounted() {
    },
    methods: {
		init(list:any){
			this.scaleImage = true
			this.scaleImageList = list
			// let scaleImageList = this.store.state.UploadFilesModule.moodboard
		},
		cancelDsign(){
			this.scaleImage = false
			this.scaleImageList = []
			this.scaleImageIndex = 0
		},
		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
		},
    },
});
</script>

<style lang="less">
.scaleImage_modal {
	-moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
	position: relative;
	border-radius: 1rem;
	overflow: hidden;
	.ant-modal-body {
        padding: 0;
		// height: calc(65vh - 6.4rem);
		height: 65rem;
		// background-color: #181818;
		display: flex;
		flex-direction: column;
    }
	.ant-modal-btn{
		
	}
    .scaleImage_btn {
		.collection_closeIcon{
			position: absolute;
			top: 2rem;
			right: 2rem;
			cursor: pointer;
			width: 4rem;
			height: 4rem;
			display: flex;
			align-items: center;
			justify-content: center;
			&.left{
				left: 2rem;
			}
			.fi-rr-cross-small::before{
				padding: .2rem;
				border-radius: 5px;
				border: solid 2px rgba(0, 0, 0, 0.22);
				transition: .3s all;
				color: rgba(0, 0, 0, 0.7);
			}
			&.collection_closeIcon:hover .fi-rr-cross-small::before{
				border: solid 2px rgba(0, 0, 0, 5);
				color: rgba(0, 0, 0, 1);
			}
			.fi-rr-down-to-line{
				transition: .3s all;
				color: rgba(0, 0, 0, .5);
			}
			.fi-rr-down-to-line:hover{
				color: rgba(0, 0, 0, 1);
			}
		}
	}
	.scaleImage_content{
		display: flex;
		justify-content: center;
		height: 100%;
		margin-top: 5rem;
		img{
			width: auto;
			max-width: 50rem;
			height: 100%;
		}
	}
	.scaleImage_nav{
		flex: 1;
		margin: 2.5rem 0rem;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		.nav_left,.nav_right{
			cursor: pointer;
			i{
				transition: .3s all;
				color: rgba(0, 0, 0, .5);
			}
		}
		.nav_left:hover,.nav_right:hover{
			i{
				color: rgba(0, 0, 0, 1);
			}
		}
		.nav_list{
			margin: 0 2rem;
			img{
				max-width: 5rem;
				max-height: 5rem;
				object-fit: cover;
				object-position: 50%,50%;
				margin-left: 1rem;
				border-radius: 1rem;
				overflow: hidden;
				cursor: pointer;
				padding: .1rem;
				&.active{
					border: 1px solid #aaaaaa;
				}
			}
			img:nth-child(1){
				margin-left: 0rem;
			}
		}
	}
}
</style>