aida_front/src/component/HomePage/NewCollectionReview.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="probjects.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 probjects?.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'],
    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 openCollection = (str:any)=>{
			emit('openCollection',str)
		}
        return {
			store,
            allBoardData,
			probjects,
			sketch,
			sketchList,
			openCollection,
        }
    },
	data(){
		return{
			imgOpen:true,

		}
	},
	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)){
						this.setSketch()
						this.imgOpen = true
					}
				}else{
					nextTick(()=>{
						this.setSketch()
						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){
					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()
								})
							}
						})
					}
					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>