286 lines
6.6 KiB
Vue
286 lines
6.6 KiB
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 v-if="isComparison" :src="scaleImageList[scaleImageIndex]?.sourceUrl">
|
|
<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
|
|
<div class="img_operate_block" v-if="isLike">
|
|
<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)
|
|
let isComparison = 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 isLike:any = ref(true)
|
|
let robotAssits:any = ref(0)
|
|
return {
|
|
scaleImage,
|
|
loadingShow,
|
|
isComparison,
|
|
visible,
|
|
setVisible,
|
|
scaleImageList,
|
|
scaleImageMask,
|
|
scaleImageIndex,
|
|
isLike,
|
|
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> |