接入画布

src/component/home/design/index.vue

@@ -49,30 +49,11 @@
 								</div>
 							</div>
 							<div class="right_top_right">
-								<div class="generalModel_state">
-									<div class="generalModel_state_item smail">
-										<span>Size :</span>
-										<a-select
-											v-model:value="widthValue"
-											show-search
-											size="large"
-											allowClear
-											style="width: 150px"
-											placeholder="Please select"
-											:options="widthList"
-											@change="setSystemDesigner(500)"
-										>
-										<!-- <template #option="{ value: val, label, icon }">
-											<span role="img" :aria-label="val">{{ icon }}</span>
-											{{ label }}
-										</template> -->
-										</a-select>
-									</div>
-								</div>
+								
 							</div>
 						</div>
 						<div class="right_content_block_box">
-							<div class="right_content_block" @mouseenter="mouseenter($event,'like')">
+							<div class="right_content_block" ref="rightContentBlockBox" @mouseenter="mouseenter($event,'like')">
 								
 
 								<div class="right_content_body">
@@ -82,24 +63,51 @@
 												{{ $t('HomeView.SelectedDesign') }}
 												</span>
 										</div>
+										<div class="generalModel_state">
+											<!-- <div class="generalModel_state_item smail" style="margin-right: 0;">
+												<span>Type :</span>
+												<a-select
+													v-model:value="widthValue.value"
+													size="large"
+													style="width: 15rem"
+													placeholder="Please select"
+													:options="widthList"
+													@change="upDataLikeListType(500)"
+												>
+												</a-select>
+											</div> -->
+											<div class="generalModel_state_item smail" style="margin-right: 0;">
+												<span>Size :</span>
+												<a-select
+													v-model:value="widthValue.value"
+													size="large"
+													style="width: 15rem"
+													placeholder="Please select"
+													:options="widthList"
+													@change="setSystemDesigner(500)"
+												>
+												</a-select>
+											</div>
+										</div>
 									</div>
 									<div class="right_content_img_block scroll_style active">
 										<div class="right_content_img_item" ref="likeItemDom" designType="like" :index="0">
 											<div class="content_img_block content_img_GetWidth active" :style="likeStyle"
-												v-for="(design, index) in likeDesignCollectionList" :key="design.id"
-												@mousedown.stop="designMousedown(getMousePosition($event,false),design.userLikeSortId,'like')" 
-												@touchstart.passive="designMousedown(getMousePosition($event,true),design.userLikeSortId,'like')"
+												v-for="(design, index) in likeDesignCollectionList" :key="design.id || design.designItemId">
+												<div class="content_img_flex"
+												@mousedown.stop="designMousedown(getMousePosition($event,false),design.userLikeSortId || design.id,'like')" 
+												@touchstart.passive="designMousedown(getMousePosition($event,true),design.userLikeSortId || design.id,'like')"
 												@click="designDetail(
 														design,
 														index,
 														likeDesignCollectionList,
 														'like'
 													)">
-												<div class="content_img_flex">
-													<img class="content_img" :src="design.designOutfitUrl||design.url"
+													<img class="content_img" v-show="!design?.generateAwait" :src="design.designOutfitUrl||design.url"
 														:key="design.designOutfitUrl" designType="like" :index="index"/>
+													<a-spin v-show="design?.generateAwait" size="large"></a-spin>
 												</div>
-												<div class="btn">
+												<div class="btn" v-show="!design?.generateAwait">
 													<i @click.stop="openEditBtn(design.designItemId||design.id)" class="fi fi-br-menu-dots-vertical"></i>
 													<div class="btnOpen" @click.stop="()=>openEditBtnId=-1" :class="{active:openEditBtnId == design.designItemId||openEditBtnId == design.id}">
 														<div class="item" @click="dislikeDesignCollection(design,design.resultType,index)">
@@ -107,10 +115,10 @@
 															<div class="icon iconfont icon-jushoucanggift icon_like">
 															</div>
 														</div>
-														<!-- <div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(likeDesignCollectionList,index,'TransferPose','add','like')">
+														<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(likeDesignCollectionList,index,'TransferPose','add','like')">
 															<div class="text">Transfer Pose</div>
 															<div class="icon iconfont icon-jushoucanggift icon_like"></div>
-														</div> -->
+														</div>
 														<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(likeDesignCollectionList,index,'Relight','add','like')">
 															<div class="text">Relight</div>
 															<i class="fi fi fi-br-keyboard-brightness"></i>
@@ -142,7 +150,7 @@
 										</div>
 									</div>
 									<div class="right_content_img_block scroll_style Guide_1_17"  :class="[driver__.driver?'showEvents':'']">
-										<div class="right_content_img_item" ref="collItemDom" designType="dislike" :index="0">
+										<div class="right_content_img_item" ref="collItemDom" designType="disLike" :index="0">
 											<div class="content_img_block" v-show="showDesignMark" :style="collStyle">
 												<a-spin size="large" class="content_img_flex"></a-spin>
 											</div>
@@ -151,16 +159,17 @@
 												) in designCollectionList" :key="design?.designItemId" :style="collStyle">
 													<div class="content_img_flex" 
 													:class="[(driver__.driver && driver__.index == 32)?'hideEvents':'']"
-													@mousedown.stop="designMousedown(getMousePosition($event,false),design.designItemId,'disLike')" 
-													@touchstart.passive="designMousedown(getMousePosition($event,true),design.designItemId,'disLike')"
+													@mousedown.stop="designMousedown(getMousePosition($event,false),design.designItemId || design.id,'disLike')" 
+													@touchstart.passive="designMousedown(getMousePosition($event,true),design.designItemId || design.id,'disLike')"
 														@click="
 														designDetail(
 															design,
 															index,
 															designCollectionList,
-															'dislike'
+															'disLike'
 														)">
-														<img class="content_img" :src="design.designOutfitUrl" designType="dislike" :index="index"/>
+														<img class="content_img" v-show="!design?.generateAwait" :src="design.designOutfitUrl || design.url" designType="disLike" :index="index"/>
+														<a-spin v-show="design?.generateAwait" size="large"></a-spin>
 													</div> 
 													<div class="btn">
 														<i @click.stop="openEditBtn(design.designItemId||design.id)" class="fi fi-br-menu-dots-vertical"></i>
@@ -170,10 +179,10 @@
 																<div class="icon iconfont icon-jushoucang icon_like">
 																</div>
 															</div>
-															<!-- <div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(designCollectionList,index,'TransferPose','add','disLike')">
+															<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(designCollectionList,index,'TransferPose','add','disLike')">
 																<div class="text">Transfer Pose</div>
 																<div class="icon iconfont icon-jushoucanggift icon_like"></div>
-															</div> -->
+															</div>
 															<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(designCollectionList,index,'Relight','add','disLike')">
 																<div class="text">Relight</div>
 																<i class="fi fi fi-br-keyboard-brightness"></i>
@@ -223,6 +232,7 @@
 				RelightDirection:RelightDirection,
 				RelightDirectionList:RelightDirectionList,
 			}" 
+			@setGenerateAwait="setGenerateAwait"
 			:isProductimg="true"></editDesignType>
 	</div>
 
@@ -394,7 +404,10 @@ export default defineComponent({
 		let sessionStorageCollValue = JSON.parse(sessionStorage.getItem('collValue') as any)
 		
 		const collItemSize = reactive({
-			widthValue:150,
+			widthValue:{
+					label:'Medium',
+					value:170,
+				},
 			collValue:6,
 			padding:60,
 			likeStyle:{
@@ -434,10 +447,10 @@ export default defineComponent({
 			collItemSize.collTime = setTimeout(()=>{
 			nextTick(()=>{
 				let parentWidth = likeItemDom.value.parentElement.offsetWidth
-				collItemSize.widthValue = collItemSize.widthValue == -1?100:collItemSize.widthValue
-				collItemSize.widthValue = collItemSize.widthValue > parentWidth?parentWidth:collItemSize.widthValue
-				collItemSize.collValue = Math.floor(parentWidth / collItemSize.widthValue)
-				collItemSize.padding = Math.floor(parentWidth - (collItemSize.collValue * collItemSize.widthValue))
+				collItemSize.widthValue.value = collItemSize.widthValue.value == -1?100:collItemSize.widthValue.value
+				collItemSize.widthValue.value = collItemSize.widthValue.value > parentWidth?parentWidth:collItemSize.widthValue.value
+				collItemSize.collValue = Math.floor(parentWidth / collItemSize.widthValue.value)
+				collItemSize.padding = Math.floor(parentWidth - (collItemSize.collValue * collItemSize.widthValue.value))
 				let value = collItemSize.collValue
 
 				collItemSize.itemStyle.width = (parentWidth - collItemSize.padding - (value * 10)) / value
@@ -455,7 +468,7 @@ export default defineComponent({
 						el: elArr[i], 
 						sort: likeDesignCollectionList.value[i].sort - 1, 
 						index: i,
-						userLikeSortId:likeDesignCollectionList.value[i].userLikeSortId
+						userLikeSortId:likeDesignCollectionList.value[i].userLikeSortId || likeDesignCollectionList.value[i].id
 					});
 				}
 				moveItem('like')
@@ -470,7 +483,7 @@ export default defineComponent({
 					el: elArr[index], 
 					sort: designCollectionList.value.length - index - 1, 
 					index: designCollectionList.value.length - index - 1,
-					userLikeSortId:item.designItemId
+					userLikeSortId:item.designItemId || item.id
 				});
 			})
 		}
@@ -540,10 +553,10 @@ export default defineComponent({
 			let arrData:any = []
 			if(!likeDesignCollectionList.value)return
 			likeDesignCollectionList.value.forEach((likeItem:any)=>{
-			    let item = posiitonData.value.likeElList.filter((item:any)=>item.userLikeSortId == likeItem.userLikeSortId)[0]
+			    let item = posiitonData.value.likeElList.filter((item:any)=>item.userLikeSortId == likeItem.userLikeSortId || item.userLikeSortId == likeItem.id)[0]
 				likeItem.sort = item.sort + 1
 				let obj = {
-					id:likeItem.userLikeSortId,
+					id:likeItem.userLikeSortId || likeItem.id,
 					"sort": item.sort + 1,
 					"userLikeGroupId": likeItem.userLikeGroupId,
 					"userLikeId": likeItem.id
@@ -565,7 +578,7 @@ export default defineComponent({
 			let value = collItemSize.collValue
 			let width,height,num
 			if(str == 'like'){
-				num = value
+				num = value 
 				width = collItemSize.itemStyle.width
 				height = collItemSize.itemStyle.height
 			}else{
@@ -573,7 +586,8 @@ export default defineComponent({
 				width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0]
 				height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1]
 			}
-			let moveIndex = Math.round(x / (width + 10)) + Math.round(y / (height + 10)) * num;
+			let padding = str == 'like'?collItemSize.padding/2:0
+			let moveIndex = Math.round((x-padding) / (width + 10)) + Math.round(y / (height + 10)) * num;
 			moveIndex = elList.length - 1 - moveIndex
 			moveIndex = moveIndex < 0 ? 0 : moveIndex;
 			moveIndex = moveIndex > elList.length - 1 ? elList.length - 1 : moveIndex;
@@ -602,7 +616,6 @@ export default defineComponent({
 		const setLikeDislLike = (str:string,value:any)=>{
 			posiitonData.value.likeSelectIndex = 0
 			nextTick(()=>{
-				console.log(posiitonData.value.likeElList)
 				if(str == 'like'){
 					let elArr = likeItemDom.value.children
 					posiitonData.value.likeElList.push({
@@ -611,14 +624,15 @@ export default defineComponent({
 						index: value.sort - 1,
 						userLikeSortId:value.userLikeSortId
 					});
-					let collItem = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId == value.designItemId)[0]
-					console.log(collItem)
-					posiitonData.value.generateElList = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId != value.designItemId)
-					posiitonData.value.generateElList.forEach((item:any)=>{
-						if(item.sort > collItem.sort){
-							item.sort-=1
-						}
-					})
+					let collItem = posiitonData.value.generateElList.filter((item:any)=>(item.userLikeSortId == value.designItemId || item.userLikeSortId == value.id))[0]
+					if(collItem){
+						posiitonData.value.generateElList = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId != value.designItemId)
+						posiitonData.value.generateElList.forEach((item:any)=>{
+							if(item.sort > collItem.sort){
+								item.sort-=1
+							}
+						})
+					}
 				}else if(str == 'disLike'){
 					let elArr = collItemDom.value.querySelectorAll('.content_img_GetWidth')
 					posiitonData.value.likeElList = posiitonData.value.likeElList.filter((item:any)=>(item.sort + 1) != value.sort)
@@ -631,10 +645,11 @@ export default defineComponent({
 						el: elArr[elArr.length-1], 
 						sort: posiitonData.value.generateElList.length, 
 						index: posiitonData.value.generateElList.length,
-						userLikeSortId:value.designItemId
+						userLikeSortId:value.designItemId||value.id
 					});
+					setDesignItemStyle()
 				}
-				moveItem('like');
+				setSystemDesigner(100)
 				// moveItem('disLike');
 			})
 		}
@@ -643,19 +658,22 @@ export default defineComponent({
 			let elLikeList = posiitonData.value.likeElList
 			let generateElList = posiitonData.value.generateElList
 			let value = collItemSize.collValue
-			let width,height
+			let width:any,height:any
 			width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0]
 			height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1]
-			 
+			  
 			// let num = str == 'like'?value:3
-			for(let i = 0;i < elLikeList.length;i++){
-				elLikeList[i].el.style.left = (elLikeList.length - 1 - elLikeList[i].sort) % value * (collItemSize.itemStyle.width +10) + collItemSize.padding/2 + 'px';
-				elLikeList[i].el.style.top = parseInt(String((elLikeList.length - 1 - elLikeList[i].sort) / value)) * (collItemSize.itemStyle.height +10) + 'px';
-			}
-			for(let i = 0;i < generateElList.length;i++){
-				generateElList[i].el.style.left = (generateElList.length - 1 - generateElList[i].sort) % 3 * (width +10) + 'px';
-				generateElList[i].el.style.top = parseInt(String((generateElList.length - 1 - generateElList[i].sort) / 3)) * (height +10) + 'px';
-			}
+			nextTick(()=>{
+				for(let i = 0;i < elLikeList.length;i++){
+					elLikeList[i].el.style.left = (elLikeList.length - 1 - elLikeList[i].sort) % value * (collItemSize.itemStyle.width +10) + collItemSize.padding/2 + 'px';
+					elLikeList[i].el.style.top = parseInt(String((elLikeList.length - 1 - elLikeList[i].sort) / value)) * (collItemSize.itemStyle.height +10) + 'px';
+				}
+				for(let i = 0;i < generateElList.length;i++){
+					generateElList[i].el.style.left = (generateElList.length - 1 - generateElList[i].sort) % 3 * (width +10) + 'px';
+					generateElList[i].el.style.top = parseInt(String((generateElList.length - 1 - generateElList[i].sort) / 3)) * (height +10) + 'px';
+				}
+			})
+			
 		}
 		const openCollection = (str:string)=>{
 			dataDom.collectionModal.init(str)
@@ -692,12 +710,12 @@ export default defineComponent({
 				designItemId:data.id,
 				// designItemId:data.elementId,
 				designOutfitId:'',
-				designOutfitUrl:data.url,
+				designOutfitUrl:data.designOutfitUrl,
 				sourceUrl:data.sourceUrl,
 				resultType:data.resultType,
 				elementId:data.elementId,
 				elementType:data.elementType,
-				sort:data.sort,
+				userGroupId:data.userGroupId || data.id,
 			}
 			let list = []
 			if(data.listType == 'disLike'){
@@ -705,17 +723,14 @@ export default defineComponent({
 			}else{
 				list = likeDesignCollectionList.value
 			}
-			if(data.isIndex == -1){
+			if(list[data.isIndex]?.generateAwait)list[data.isIndex].generateAwait = false;
+			if(data.status == 'add'){
 				if(data.listType == 'like'){
 					likeDesignCollection(obj,-1,data.resultType)
 				}else{
 					list.unshift(obj)
-					nextTick().then(()=>{
-						setDesignItemStyle()
-						moveItem('disLike')
-					})
 				}
-			}else{
+			}else if(data.status == 'cove'){
 				// collectionLikeUpdate
 				// Https
 				if(data.listType == 'like'){
@@ -735,6 +750,10 @@ export default defineComponent({
 				list[data.isIndex].designItemId = obj.designItemId
 				list[data.isIndex].sourceUrl = obj.sourceUrl
 			}
+			nextTick().then(()=>{
+				setDesignItemStyle()
+				setSystemDesigner(100)
+			})
 		}
 		const setNoDesignLike = (design:any,index:any,type:any,str:string) => {
 			let url
@@ -762,6 +781,7 @@ export default defineComponent({
 						let value:any = {
 							...design,
 							sort:likeDesignCollectionList.value.length + 1,
+							userLikeGroupId:design.id,
 						}
 						design.groupDetailId = rv.groupDetailId;
 						store.commit(
@@ -778,6 +798,7 @@ export default defineComponent({
 								item.sort-=1
 							}
 						})
+						setLikeDislLike('disLike',design)
 					}
 					designData.likeLoading = false;
 				}
@@ -829,6 +850,19 @@ export default defineComponent({
 					designData.likeLoading = false;
 				});
 		}
+		const upDataLikeListType = ()=>{
+
+		}
+		const setGenerateAwait = (data:any)=>{
+			let list = []
+			if(data.listType == 'disLike'){
+				list = designCollectionList.value
+			}else{
+				list = likeDesignCollectionList.value
+			}
+			list[data.index].generateAwait = true;
+
+		}
 		return {
 			store,
 			...toRefs(editDesignType),
@@ -879,6 +913,8 @@ export default defineComponent({
 			openEditBtn,
 			addGenerateImg,
 			setNoDesignLike,
+			upDataLikeListType,
+			setGenerateAwait,
 		};
 	},
 	data() {
@@ -903,7 +939,10 @@ export default defineComponent({
 				num:0,
 				currentNum:0,
 			},//获取20次都为空的话就停止获取
-			
+			observerData:{
+				time:false as any,
+				observer:null as any,
+			},
 		};
 	},
 	watch: {
@@ -925,15 +964,27 @@ export default defineComponent({
 		sessionStorage.setItem('recycleDomHidden',JSON.stringify(this.recycleDomHidden))
 		sessionStorage.setItem('collValue',JSON.stringify(this.collValue))
 		if(this.$props.isState)this.sortDesignCollection()
-		window.removeEventListener('resize', this.setItemPosition)
+		// window.removeEventListener('resize', this.setItemPosition)
+		this.observerData.observer.unobserve(this.$refs.rightContentBlockBox);
 	},
 	async mounted() {
 		window.addEventListener('beforeunload', (event)=>{
 			this.store.commit("clearAllCollection");
 		});
-		window.addEventListener('resize', this.setItemPosition)
-		this.setSystemDesigner(0)
-		this.setDesignItemStyle()
+		// window.addEventListener('resize', this.setItemPosition)
+		
+		this.$refs.rightContentBlockBox
+		this.observerData.observer = new ResizeObserver(entries => {
+			for (let entry of entries) {
+				clearTimeout(this.observerData.time)
+				this.observerData.time = setTimeout(()=>{
+					this.setSystemDesigner(0)
+					this.setDesignItemStyle()
+				},100)
+				// const { width } = entry.contentRect;
+			}
+		});
+		this.observerData.observer.observe(this.$refs.rightContentBlockBox);
 	},
 	directives:{
 		mousewheel:{
@@ -1322,7 +1373,6 @@ export default defineComponent({
 				groupDetailId: design.groupDetailId || design.id,
 				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
 			};
-			console.log(type)
 			if(type != 'Design'){
 				this.setNoDesignLike(design,index,type,'disLike')
 				return
@@ -1551,7 +1601,7 @@ export default defineComponent({
 		//完成单个图片设计
 		finishRedesign(event: any) {
 			let { design, index, type } = event;
-			if (type === "dislike") {
+			if (type === "disLike") {
 				this.store.commit("setSingleDesignCollectionList", {
 					index: index,
 					design: design,
@@ -1571,7 +1621,7 @@ export default defineComponent({
 		setShowHide(str:string){
 			if(str == 'recycleDomHidden')this.recycleDomHidden = !this.recycleDomHidden
 			if(str == 'domHidden')this.domHidden = !this.domHidden
-			this.setSystemDesigner(0)
+			// this.setSystemDesigner(0)
 		}
 	},
 });
@@ -1622,7 +1672,7 @@ export default defineComponent({
 			.right_content_header {
 				display: flex;
 				justify-content: space-between;
-				height: 4.5rem;
+				height: 6.5rem;
 				align-items: center;
 				padding: 0 3.2rem 0 1.9rem;
 				background: rgba(255, 255, 255, 0.2);
@@ -1754,7 +1804,7 @@ export default defineComponent({
 						color: #fff;
 						flex-direction: column;
 						&.active{
-							right: 53rem;
+							right: 43rem;
 							transform: translate(0, -50%);
 						}
 					}
@@ -1812,7 +1862,8 @@ export default defineComponent({
 								margin-left: 2rem;
 							}
 							.right_content_body {
-								width: 55rem;
+								width: 45rem;
+								// width: 55rem;
 								.right_content_img_block{
 									
 									.content_img_block{
@@ -1960,12 +2011,12 @@ export default defineComponent({
 										> .btnOpen{
 											position: absolute;
 											width: max-content;
-											left: 3rem;
-											top: 3rem;
+											left: 30px;
+											top: 30px;
 											transform: translateX(-100%);
 											background: #e4e4e7;
-											padding: 1.2rem;
-											border-radius: 1.2rem;
+											padding: 12px;
+											border-radius: 12px;
 											display: none;
 											z-index: 99;
 											&.active{
@@ -1974,16 +2025,16 @@ export default defineComponent({
 											> .item{
 												display: flex;
 												align-items: center;
-												margin-bottom: .8rem;
-												padding: .8rem;
-												border-radius: .8rem;
+												margin-bottom: 8px;
+												padding: 8px;
+												border-radius: 8px;
 												cursor: pointer;
 												&:last-child{
 													margin: 0;
 												}
 												> .text{
-													font-size: 1.2rem;
-													margin-right: 1rem;
+													font-size: 12px;
+													margin-right: 10px;
 												}
 												&:hover{
 													background: #efeff1;