411 lines
12 KiB
Vue
411 lines
12 KiB
Vue
<template>
|
|
<!-- 生成collention缩略图用的 -->
|
|
<div class="collection_review">
|
|
<!-- <div class="collection_review_mark"></div> -->
|
|
<!-- <div class="img_block_item" v-if="allBoardData?.moodTemplateId">
|
|
<MoodTemplate :fileList="allBoardData?.moodboardFiles" :moodTemplateId="allBoardData?.moodTemplateId"></MoodTemplate>
|
|
</div> -->
|
|
<div class="img_block_item" v-if="allBoardData?.disposeMoodboard?.length != 0 && allBoardData?.disposeMoodboard?.[0] != null">
|
|
<div class="title">
|
|
<div>{{$t('collectionModal.Moodboard')}}</div>
|
|
<i class="fi fi-rr-edit" @click="openCollection('moodBoard')"></i>
|
|
</div>
|
|
<div v-for="(mood) in allBoardData?.disposeMoodboard" :key="mood" v-show="mood?.imgUrl != ''" class="lager_img_item lager_img_disposeMoodboard" >
|
|
<div class="all_img_item_block">
|
|
<img class="all_img_content cover_img" :src="mood?.imgUrl" >
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="img_block_item" v-else>
|
|
<div class="title">
|
|
<div>{{$t('collectionModal.Moodboard')}}</div>
|
|
<i class="fi fi-rr-edit" @click="openCollection('moodBoard')"></i>
|
|
</div>
|
|
<div v-for="(mood) in allBoardData?.moodboardFiles" :key="mood" v-show="mood?.imgUrl != ''" class="lager_img_item lager_img_moodboard" >
|
|
<div class="all_img_item_block">
|
|
<img class="all_img_content cover_img" :src="mood?.imgUrl" >
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="img_block_item">
|
|
<div class="title">
|
|
<div>{{$t('collectionModal.Printboard')}}</div>
|
|
<i class="fi fi-rr-edit" @click="openCollection('printBoard')"></i>
|
|
</div>
|
|
<div class="small_img_item" v-for="(print) in allBoardData?.printboardFiles" :key="print">
|
|
<div class="all_img_item_block">
|
|
<img class="all_img_content cover_img" :src="print?.imgUrl">
|
|
</div>
|
|
</div>
|
|
<div class="small_img_item" v-for="(generate) in allBoardData?.generatePrintFiles" :key="generate">
|
|
<div class="all_img_item_block">
|
|
<img class="all_img_content cover_img" :src="generate.imgUrl">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="img_block_item">
|
|
<div class="title">
|
|
<div>{{$t('collectionModal.Colorboard')}}</div>
|
|
<i class="fi fi-rr-edit" @click="openCollection('colorBoard')"></i>
|
|
</div>
|
|
<div class="color_item" v-for="(color,i) in allBoardData?.colorBoards" :key="color">
|
|
<div class="color_content" v-if="!color?.gradient" :style="{background:`rgb(${color?.rgbValue?.r},${color?.rgbValue?.g},${color?.rgbValue?.b},${color?.rgbValue?.a})`}"></div>
|
|
<div class="color_content" v-else :style="{height:'11rem','background-image':color?.gradient?`linear-gradient(${color?.gradient.angle}deg,${setGradient(color?.gradient)}`:'none'}"></div>
|
|
<div class="color_content_body" v-if="!color?.gradient" :style="{'text-align':color?.name?'left':'center'}">
|
|
<div class="color_des">{{color.tcx}}</div>
|
|
<div class="color_des">{{color.name}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="img_block_item mannquin" v-show="selectProbject.type != 'singleProductDesign'">
|
|
<div class="title">
|
|
<div>{{$t('collectionModal.Mannequin')}}</div>
|
|
<i class="fi fi-rr-edit" @click="openCollection('mannequin')"></i>
|
|
</div>
|
|
<div class="mannquin_img_item" v-for="(model) in selectProbject?.model" :key="model">
|
|
<div class="all_img_item_block">
|
|
<img class="all_img_content cover_img" :src="model?.url">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--
|
|
<div class="img_block_item img_block_item_sketch">
|
|
<div class="lager_img_item" v-for="(skecth) in allBoardData.sketchboardFiles" :key="skecth">
|
|
<div class="all_img_item_block">
|
|
<img class="all_img_content" :src="skecth.imgUrl">
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
<div class="img_block_item img_block_item_sketch">
|
|
<div class="title" style="width: 100%;">
|
|
<div>{{$t('collectionModal.Sketchboard')}}</div>
|
|
<i class="fi fi-rr-edit" @click="openCollection('sketchBoard')"></i>
|
|
</div>
|
|
<div class="lager_img_item" :class="'lager_img_item'+index" v-for="(item,index) in sketch" :key="item">
|
|
<div class="all_img_item_block" v-for="v in item" :key="sketch">
|
|
<img class="all_img_content" :src="v?.urlWithWhiteSide">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="img_block_item">
|
|
<div class="lager_img_item" v-for="(marketing) in allBoardData.marketingSketchFiles" :key="marketing">
|
|
<div class="all_img_item_block">
|
|
<img class="all_img_content" :src="marketing.imgUrl">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { computed, defineComponent ,ref, reactive, nextTick } from 'vue'
|
|
import MoodTemplate from '@/component/HomePage/MoodTemplate.vue'
|
|
import { useStore } from "vuex";
|
|
export default defineComponent({
|
|
components:{MoodTemplate},
|
|
emits:['openCollection'],
|
|
props:{
|
|
|
|
},
|
|
setup(props, { emit }) {
|
|
const store:any = useStore();
|
|
let sketch:any = ref([[],[],[]])
|
|
let sketchList:any = computed(()=>{
|
|
return store.state.UploadFilesModule.showSketchboard})
|
|
let allBoardData:any = computed(()=>{
|
|
return store.state.UploadFilesModule.allBoardData})
|
|
// let probjects:any = computed(()=>{
|
|
// return store.state.Workspace.probjects})
|
|
const selectProbject = computed(()=>{
|
|
return store.state.Workspace.probjects
|
|
})
|
|
const openCollection = (str:any)=>{
|
|
emit('openCollection',str)
|
|
}
|
|
return {
|
|
store,
|
|
allBoardData,
|
|
selectProbject,
|
|
sketch,
|
|
sketchList,
|
|
openCollection,
|
|
}
|
|
},
|
|
data(){
|
|
return{
|
|
imgOpen:true,
|
|
setSketchTime:null as any,
|
|
}
|
|
},
|
|
watch: {
|
|
sketchList:{
|
|
handler(newVal:any,oldVal:any){
|
|
// this.sketchList = []
|
|
// this.sketch = [[],[],[]]
|
|
// this.sketchList = this.allBoardData.sketchboardFiles
|
|
if(oldVal && oldVal?.length != 0 && newVal && newVal?.length != 0){
|
|
let oldArr:any = []
|
|
let newArr:any = []
|
|
oldVal.forEach((item:any,index:any) => {
|
|
oldArr.push(item.id?item.id:item.sketchBoardId)
|
|
newArr.push(newVal?.[index]?.id?newVal?.[index]?.id:newVal?.[index]?.sketchBoardIdd)
|
|
});
|
|
if(JSON.stringify(newArr)!=JSON.stringify(oldArr)){
|
|
clearTimeout(this.setSketchTime)
|
|
this.setSketchTime = setTimeout(()=>{
|
|
this.setSketch()
|
|
},500)
|
|
this.imgOpen = true
|
|
}
|
|
}else{
|
|
nextTick(()=>{
|
|
clearTimeout(this.setSketchTime)
|
|
this.setSketchTime = setTimeout(()=>{
|
|
this.setSketch()
|
|
},500)
|
|
this.imgOpen = true
|
|
})
|
|
}
|
|
|
|
|
|
},
|
|
immediate: true
|
|
},
|
|
|
|
},
|
|
computed: {
|
|
setGradient(){
|
|
return (gradient:any)=>{
|
|
let gradientStr = ''
|
|
gradient.gradientList.sort((a:any, b:any) => {
|
|
let aArr = a.left.split('%')[0]
|
|
let bArr = b.left.split('%')[0]
|
|
return aArr - bArr;
|
|
});
|
|
gradient.gradientList.forEach((item:any,index:any)=>{
|
|
let str = ','
|
|
if(gradient.gradientList.length == index+1)str = ''
|
|
gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}`
|
|
|
|
})
|
|
return `${gradientStr}`
|
|
}
|
|
|
|
}
|
|
},
|
|
mounted () {
|
|
},
|
|
methods: {
|
|
setSketch(){
|
|
if(!this.imgOpen){
|
|
return
|
|
}
|
|
this.imgOpen = false
|
|
this.sketch = [[],[],[]]
|
|
let sketchH = [0,0,0]
|
|
nextTick().then(async ()=>{
|
|
if(this.sketchList && this.sketchList!=null){
|
|
console.log(JSON.parse(JSON.stringify(this.sketch)),JSON.parse(JSON.stringify(this.sketchList)))
|
|
for (let i = 0; i < this.sketchList?.length; i++) {
|
|
let sketch1:any = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item0')[0]?.getBoundingClientRect()
|
|
let sketch2:any = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item1')[0]?.getBoundingClientRect()
|
|
let sketch3:any = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item2')[0]?.getBoundingClientRect()
|
|
sketch1.num = 0
|
|
sketch2.num = 1
|
|
sketch3.num = 2
|
|
let min = Math.min.apply(null, sketchH);
|
|
let index = sketchH.indexOf(min);
|
|
let arr = [sketch1,sketch2,sketch3]
|
|
let image:any = new Image()
|
|
image.src = this.sketchList[i].urlWithWhiteSide
|
|
// arr.sort((a,b)=>{
|
|
// var a_num = a["height"];
|
|
// var b_num = b["height"];
|
|
// return a_num - b_num;
|
|
// })
|
|
this.sketch[index]?.push(this.sketchList[i])
|
|
// this.sketch[arr[0].num]?.push(this.sketchList[i])
|
|
let dom = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item'+arr[0].num)[0]
|
|
let img = dom.querySelector('.element:last-child')
|
|
await new Promise((resolve:any)=>{
|
|
image.onload = ()=>{
|
|
sketchH[index]+=image.height * (300/image.width)
|
|
nextTick().then(()=>{
|
|
resolve()
|
|
image.remove()
|
|
})
|
|
}
|
|
})
|
|
}
|
|
console.log(JSON.parse(JSON.stringify(this.sketch)))
|
|
this.imgOpen = true
|
|
this.store.commit('setshowSketchList', this.sketch)
|
|
}
|
|
})
|
|
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.collection_review{
|
|
// width: 40.8rem;
|
|
width: 100%;
|
|
position: relative;
|
|
padding: 2rem;
|
|
|
|
.collection_review_mark{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.img_block_item{
|
|
margin-bottom: 1em;
|
|
// &.color_block_item{
|
|
// padding: 0 0.5rem 0 0.3rem;
|
|
// }
|
|
> .title{
|
|
display: flex;
|
|
font-size: 1.4rem;
|
|
font-weight: 900;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
> i{
|
|
font-size: 2rem;
|
|
display: flex;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.lager_img_item{
|
|
display: inline-block;
|
|
width: 20.4rem;
|
|
height: 20.4rem;
|
|
vertical-align: top;
|
|
&.lager_img_disposeMoodboard{
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
&.lager_img_moodboard{
|
|
height: 17rem;
|
|
img{
|
|
}
|
|
}
|
|
}
|
|
&.mannquin{
|
|
> .mannquin_img_item{
|
|
|
|
}
|
|
}
|
|
|
|
.sketch_img_item{
|
|
display: inline-block;
|
|
width: 20.4rem;
|
|
height: 42.2rem;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.small_img_item{
|
|
width: 6.8rem;
|
|
height: 6.8rem;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
.mannquin_img_item{
|
|
width: 6.8rem * 2;
|
|
height: 15rem * 2;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
.color_item{
|
|
display: inline-block;
|
|
// vertical-align: top;
|
|
// padding: 0 0.5rem;
|
|
// margin-right: 1.6rem;
|
|
margin-right: 4%;
|
|
margin-bottom: 0.5rem;
|
|
width: 21%;
|
|
&:nth-child(4n+1){
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
|
|
.color_content{
|
|
height:6.2rem;
|
|
width: 100%;
|
|
}
|
|
.color_content_body{
|
|
width: 100%;
|
|
padding: 0.7rem 0.2rem;
|
|
background: #FEFEFE;
|
|
border: 1px solid #E6E6E6;
|
|
|
|
.color_des{
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
color: #000;
|
|
margin-bottom: .5rem;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
|
|
&:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.all_img_item_block{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.all_img_content{
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
|
|
&.cover_img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
&.img_block_item_sketch{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
> .lager_img_item{
|
|
width: 30%;
|
|
margin-left: 1rem;
|
|
height: auto;
|
|
>div{
|
|
margin-bottom: 2rem;
|
|
img{
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
>div:nth-child(1){
|
|
margin: 0;
|
|
}
|
|
}
|
|
&.h30{
|
|
.lager_img_item{
|
|
height: 50rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|