提交修改

src/component/home/design/index.vue

@@ -45,17 +45,29 @@
 									{{ $t('HomeView.Redesign') }}
 								</div> -->
 								<div class="silder button_margin_14" v-show="likeDesignCollectionList?.length > 0">
-									<div class="text">Small</div>
-										<a-slider
-											class="system_silder"
-											v-model:value="elementWidth"
-											:min="minCollValue"
-											:max="maxCollValue-1"
-											@afterChange="setSystemDesigner(500)"
-											:tooltipVisible="false"
+									
+								</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)"
 										>
-										</a-slider>
-									<div class="text">Big</div>
+										<!-- <template #option="{ value: val, label, icon }">
+											<span role="img" :aria-label="val">{{ icon }}</span>
+											{{ label }}
+										</template> -->
+										</a-select>
+									</div>
 								</div>
 							</div>
 						</div>
@@ -84,14 +96,36 @@
 														'like'
 													)">
 												<div class="content_img_flex">
-													<img class="content_img" :src="design.designOutfitUrl"
+													<img class="content_img" :src="design.designOutfitUrl||design.url"
 														:key="design.designOutfitUrl" designType="like" :index="index"/>
 												</div>
-												<div class="icon iconfont icon-jushoucanggift icon_like" @click.stop="
-													dislikeDesignCollection(
-														design,
-														index
-													)">
+												<div class="btn">
+													<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)">
+															<div class="text">On Like</div>
+															<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="text">Transfer Pose</div>
+															<div class="icon iconfont icon-jushoucanggift icon_like"></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>
+														</div>
+														<div class="item" v-show="design.resultType == 'Design'" @click="setEditDesignType(likeDesignCollectionList,index,'ToProductImage','add','like')">
+															<div class="text">To Product Image</div>
+															<i class="fi fi fi-ss-box-open"></i>
+														</div>
+														<!-- <div class="item" @click="setDeleteDesign(design,index)">
+															<div class="text">Delete</div>
+															<i class="fi fi-rr-trash icon_delete">
+															</i>
+														</div> -->
+													</div>
+													
 												</div>
 											</div>
 										</div>
@@ -128,16 +162,33 @@
 														)">
 														<img class="content_img" :src="design.designOutfitUrl" designType="dislike" :index="index"/>
 													</div> 
-													<div class="icon iconfont icon-jushoucang icon_like" :class="[driver__.driver?index == 0?driver__.index == 32?'Guide_img showEvents':'':'':'']" @click.stop="
-														likeDesignCollection(
-															design,
-															index
-														)
-														">
+													<div class="btn">
+														<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="likeDesignCollection(design,index,design.resultType)">
+																<div class="text">Like</div>
+																<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="text">Transfer Pose</div>
+																<div class="icon iconfont icon-jushoucanggift icon_like"></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>
+															</div>
+															<div class="item" v-show="design.resultType == 'Design'" @click="setEditDesignType(designCollectionList,index,'ToProductImage','add','disLike')">
+																<div class="text">To Product Image</div>
+																<i class="fi fi fi-ss-box-open"></i>
+															</div>
+															<div class="item" @click="setDeleteDesign(design,index)">
+																<div class="text">Delete</div>
+																<i class="fi fi-rr-trash icon_delete">
+																</i>
+															</div>
+														</div>
 													</div>
-													<i class="fi fi-rr-trash icon_delete" @click.stop="
-														setDeleteDesign(design,index)">
-													</i>
 											</div>
 											
 										</div>
@@ -165,13 +216,20 @@
 		<!-- design collection的进度蒙层  end-->
 		<affiche ref="affiche"></affiche>
 		<DesignDetailcopy v-if="detailDestroy" ref="designDetail" @destroy="setDetailDestroy" @finishRedesign="finishRedesign"></DesignDetailcopy>
-
+		<editDesignType ref="editDesignType"
+			@addGenerateImg="addGenerateImg"
+			:productData="{
+				upload:upload,
+				RelightDirection:RelightDirection,
+				RelightDirectionList:RelightDirectionList,
+			}" 
+			:isProductimg="true"></editDesignType>
 	</div>
 
 </template>
 
 <script lang="ts">
-import { defineComponent, h, ref, computed, reactive, toRefs, inject,provide,nextTick,createVNode,onBeforeUnmount, toRef} from "vue";
+import { defineComponent, h, ref, computed, toRefs, inject,provide,nextTick,reactive,onBeforeUnmount, toRef} from "vue";
 // import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
 import generalCanvas from "@/component/modules/generalCanvas.vue";
@@ -183,6 +241,7 @@ import { useStore } from "vuex";
 import { Https } from "@/tool/https";
 import { openGuide,driverObj__ } from "@/tool/guide";
 import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
+import editDesignType from './editDesignType/index.vue'
 // import JSZip, { forEach } from "jszip";
 import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
 import i18n from "@/lang";
@@ -200,7 +259,8 @@ export default defineComponent({
 		NewCollectionReview,
 		affiche,
 		generalCanvas,
-		DesignDetailcopy
+		DesignDetailcopy,
+		editDesignType,
 	},
 	emits:['setTask'],
 	 activated() {
@@ -210,6 +270,25 @@ export default defineComponent({
   props:['isState'],
 	setup(props,{emit}) {
 		const store = useStore();
+		const editDesignType = reactive({
+			upload:{id:store.state.Workspace.probjects.id},
+			RelightDirectionList:[
+				{
+					value:'Right Light',
+					label:useI18n().t('ProductImg.RightLight')
+				},{
+					value:'Left Light',
+					label:useI18n().t('ProductImg.LeftLight')
+				},{
+					value:'Top Light',
+					label:useI18n().t('ProductImg.TopLight')
+				},{
+					value:'Bottom Light',
+					label:useI18n().t('ProductImg.BottomLight')
+				}
+			],
+			RelightDirection:'Right Light'
+		})
 		let likeDesignCollectionList: any = computed(() => {
 			return store.state.HomeStoreModule.likeDesignCollectionList;
 		});
@@ -276,6 +355,23 @@ export default defineComponent({
 		])
 		const dataDom = reactive({
 			collectionModal:null as any,
+			editDesignType:null as any,
+		})
+		const designData = reactive({
+			openEditBtnId:-1,
+			likeLoading: false, //喜欢防抖
+			widthList:[
+				{
+					label:'Medium',
+					value:170,
+				},{
+					label:'Large',
+					value:250,
+				},{
+					label:'Extra-large',
+					value:400,
+				}
+			],
 		})
 		provide('exportNav',exportNav)
 		let isShowOperate = ref(false)
@@ -298,10 +394,8 @@ export default defineComponent({
 		let sessionStorageCollValue = JSON.parse(sessionStorage.getItem('collValue') as any)
 		
 		const collItemSize = reactive({
+			widthValue:150,
 			collValue:6,
-			elementWidth:100,
-			minCollValue:100,
-			maxCollValue:999,
 			padding:60,
 			likeStyle:{
 				width:'240px',
@@ -340,10 +434,10 @@ export default defineComponent({
 			collItemSize.collTime = setTimeout(()=>{
 			nextTick(()=>{
 				let parentWidth = likeItemDom.value.parentElement.offsetWidth
-				collItemSize.elementWidth = collItemSize.elementWidth == -1?100:collItemSize.elementWidth
-				collItemSize.maxCollValue = parentWidth / 2
-				collItemSize.collValue = Math.floor(parentWidth / collItemSize.elementWidth)
-				collItemSize.padding = Math.floor(parentWidth - (collItemSize.collValue * collItemSize.elementWidth))
+				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))
 				let value = collItemSize.collValue
 
 				collItemSize.itemStyle.width = (parentWidth - collItemSize.padding - (value * 10)) / value
@@ -508,6 +602,7 @@ 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({
@@ -517,8 +612,8 @@ export default defineComponent({
 						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
@@ -565,8 +660,178 @@ export default defineComponent({
 		const openCollection = (str:string)=>{
 			dataDom.collectionModal.init(str)
 		}
+		const openEditBtn = (id:number)=>{
+			designData.openEditBtnId = id
+			let removeEditBtnId = ()=>{
+				designData.openEditBtnId = -1
+				document.removeEventListener('click',removeEditBtnId)
+			}
+			document.addEventListener('click',removeEditBtnId)
+
+		}
+		let setEditDesignType = (arr:any,index:any,type:any,status:any,listType:string)=>{
+			arr = JSON.parse(JSON.stringify(arr))
+			let item = arr[index]
+			if(status == 'add'){
+				item.sourceUrl = item.designOutfitUrl || item.url
+			}else{
+				
+			}
+			arr[index].resultType = type
+			// dataDom.editDesignType.isProductimg = isLike
+			dataDom.editDesignType.isProductimg = true
+			dataDom.editDesignType.init(arr,index,null,status,listType)
+			dataDom.editDesignType.isLike = false
+			dataDom.editDesignType.productimgRelightDirection = editDesignType.RelightDirection
+			dataDom.editDesignType.isComparison = true
+		}
+		const addGenerateImg = (data:any)=>{
+			if(!data.id)return
+			let obj = {
+				id:data.id,
+				designItemId:data.id,
+				// designItemId:data.elementId,
+				designOutfitId:'',
+				designOutfitUrl:data.url,
+				sourceUrl:data.sourceUrl,
+				resultType:data.resultType,
+				elementId:data.elementId,
+				elementType:data.elementType,
+				sort:data.sort,
+			}
+			let list = []
+			if(data.listType == 'disLike'){
+				list = designCollectionList.value
+			}else{
+				list = likeDesignCollectionList.value
+			}
+			if(data.isIndex == -1){
+				if(data.listType == 'like'){
+					likeDesignCollection(obj,-1,data.resultType)
+				}else{
+					list.unshift(obj)
+					nextTick().then(()=>{
+						setDesignItemStyle()
+						moveItem('disLike')
+					})
+				}
+			}else{
+				// collectionLikeUpdate
+				// Https
+				if(data.listType == 'like'){
+					let value = {
+						"oldRelationId": data.oldId,
+						"relationId": data.id,
+						"relationType": data.resultType,
+					}
+					Https.axiosPost(Https.httpUrls.collectionLikeUpdate,value).then((rv:any)=>{
+						if(rv){
+						}
+					})
+				}
+				list[data.isIndex].designOutfitUrl = obj.designOutfitUrl
+				list[data.isIndex].resultType = obj.resultType
+				list[data.isIndex].id = obj.id
+				list[data.isIndex].designItemId = obj.designItemId
+				list[data.isIndex].sourceUrl = obj.sourceUrl
+			}
+		}
+		const setNoDesignLike = (design:any,index:any,type:any,str:string) => {
+			let url
+			let data = {
+				toProductImageResultId:[(design.designItemId || design.id)],
+				projectId: store.state.Workspace.probjects.id,
+			}
+			if(type == 'ToProductImage' || type == 'Relight'){
+				if(str == 'like'){
+					url = Https.httpUrls.productImageLike
+				}else{
+					url = Https.httpUrls.productImageUnLike
+				}
+			}else{
+				if(str == 'like'){
+					url = Https.httpUrls.productImageLike
+				}else{
+					url = Https.httpUrls.productImageUnLike
+				}
+			}
+			designData.likeLoading = true;
+			Https.axiosPost(url, data).then(
+				(rv) => {
+					if(str == 'like'){
+						let value:any = {
+							...design,
+							sort:likeDesignCollectionList.value.length + 1,
+						}
+						design.groupDetailId = rv.groupDetailId;
+						store.commit(
+							"addLikeDesignCollectionList",
+							value
+						);
+						setLikeDislLike('like',value)
+						if(index != -1)store.commit("deleteDesignCollectionList", index);
+					}else{
+						if(index != -1)store.commit("deleteLikeDesignCollectionList", index);
+						store.commit("addDesignCollectionList", [design]);
+						likeDesignCollectionList.value.forEach((item:any)=>{
+							if(item.sort > design.sort){
+								item.sort-=1
+							}
+						})
+					}
+					designData.likeLoading = false;
+				}
+			).catch(res=>{
+				designData.likeLoading = false;
+			});
+		}
+		let likeDesignCollection = (design:any,index:any,type:any) => {
+			if (designData.likeLoading) {
+				return;
+			}
+			if(type != 'Design'){
+				setNoDesignLike(design,index,type,'like')
+				return
+			}
+			let data = {
+				designItemId: design.designItemId,
+				userGroupId: store.state.HomeStoreModule.userGroupId,
+				projectId: store.state.Workspace.probjects.id,
+				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+				designPythonOutfitId:design.designOutfitId?design.designOutfitId:design.designPythonOutfitId
+			};
+			
+			
+			designData.likeLoading = true;
+			Https.axiosPost(Https.httpUrls.designLike, data)
+				.then((rv: any) => {
+					if (rv) {
+						let value:any = {
+							...design,
+							id:rv.userLikeId,
+							groupDetailId:rv.userLikeId,
+							userLikeSortId:rv.userLikeSortId,
+							userLikeGroupId:rv.userGroupId,
+							sort:rv.sort,
+						}
+						store.commit("setUserGroupId", rv.userGroupId);
+						design.groupDetailId = rv.groupDetailId;
+						store.commit(
+							"addLikeDesignCollectionList",
+							value
+						);
+						setLikeDislLike('like',value)
+						if(index != -1)store.commit("deleteDesignCollectionList", index);
+					}
+					designData.likeLoading = false;
+				})
+				.catch((rv) => {
+					designData.likeLoading = false;
+				});
+		}
 		return {
 			store,
+			...toRefs(editDesignType),
 			likeDesignCollectionList,
 			deleteDesignCollectionList,
 			designCollectionList,
@@ -592,6 +857,7 @@ export default defineComponent({
 			setDesignItemStyle,
 			showDesignMark,
 			...toRefs(collItemSize),
+			...toRefs(designData),
 			...toRefs(dataDom),
 			likeItemDom,
 			collItemDom,
@@ -609,6 +875,10 @@ export default defineComponent({
 			posiitonData,
 			moveItem,
 			openCollection,
+			setEditDesignType,
+			openEditBtn,
+			addGenerateImg,
+			setNoDesignLike,
 		};
 	},
 	data() {
@@ -626,7 +896,6 @@ export default defineComponent({
 			designProgress: 0,
 			startDesignType: "design", //设计类型 design 和 resdesign
 			disLikeLoading: false, //不喜欢防抖
-			likeLoading: false, //喜欢防抖
 			dragIdx:0,
 			designRandom:'',
 			detailDestroy:false,//销毁detail
@@ -996,7 +1265,15 @@ export default defineComponent({
 		deleteDesignCollection(list:any,index:any){
 			list.splice(index,1)
 		},
-		likeDesignCollection(design: any, index: any) {
+		
+		likeDesignCollection(design: any, index: any,type:any) {
+			if (this.likeLoading) {
+				return;
+			}
+			if(type != 'Design'){
+				this.setNoDesignLike(design,index,type,'like')
+				return
+			}
 			let data = {
 				designItemId: design.designItemId,
 				userGroupId: this.store.state.HomeStoreModule.userGroupId,
@@ -1004,9 +1281,7 @@ export default defineComponent({
 				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
 				designPythonOutfitId:design.designOutfitId?design.designOutfitId:design.designPythonOutfitId
 			};
-			if (this.likeLoading) {
-				return;
-			}
+			
 			
 			this.likeLoading = true;
 			Https.axiosPost(Https.httpUrls.designLike, data)
@@ -1027,15 +1302,12 @@ export default defineComponent({
 							value
 						);
 						this.setLikeDislLike('like',value)
-						this.store.commit("deleteDesignCollectionList", index);
+						if(index != -1)this.store.commit("deleteDesignCollectionList", index);
 						if (this.startDesignType === "resDesign") {
 							this.getHistoryChoose(this.userGroupId, "like");
 						}
 					}
 					this.likeLoading = false;
-					if(this.driver__.driver){
-						driverObj__.moveNext();
-					}
 				})
 				.catch((rv) => {
 					this.likeLoading = false;
@@ -1043,13 +1315,18 @@ export default defineComponent({
 		},
 
 		//不喜欢设计
-		dislikeDesignCollection(design: any, index: any) {
+		dislikeDesignCollection(design:any,type:string, index: any) {
 			let data = {
 				designId: design.designId || this.designId,
 				designPythonOutfitId:design.designOutfitId,
 				groupDetailId: design.groupDetailId || design.id,
 				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
 			};
+			console.log(type)
+			if(type != 'Design'){
+				this.setNoDesignLike(design,index,type,'disLike')
+				return
+			}
 			if (this.disLikeLoading) {
 				return;
 			}
@@ -1237,20 +1514,6 @@ export default defineComponent({
 			});
 			return colorList;
 		},
- //点击下拉图标出现操作
-		changeShowOperateContent() {
-            this.isShowOperate = !this.isShowOperate;
-            document.addEventListener(
-                "click",
-                this.closeShowOperateContent,
-                false
-            );
-        }, 
-		//关闭下拉图标
-        closeShowOperateContent() {
-            this.isShowOperate = false;
-            document.removeEventListener("click", this.closeShowOperateContent);
-        },
 	
 		//销毁图片详情
 		setDetailDestroy() {
@@ -1265,7 +1528,12 @@ export default defineComponent({
 			collectionList: any,
 			type: string
 		) {
+			// if()
 			if(this.isMove)return
+			if(design.resultType != "Design"){
+				this.setEditDesignType(collectionList,index,design.resultType,'edit',type)
+				return
+			}
 			design.designOutfitId = design.designPythonOutfitId?design.designPythonOutfitId:design.designOutfitId
 			let data = {
 				design: design,
@@ -1644,14 +1912,9 @@ export default defineComponent({
 									justify-content: center;
 									position: absolute;
 									transition: top,left .3s;
-									&:hover .icon_like,&:hover .icon_delete,&:hover .Dustbin {
-										display: block;
+									&:hover .btn{
+										display: flex;
 									}
-
-									// &:nth-child(4n) {
-									// 	margin-right: 0;
-									// }
-
 									.content_img_flex {
 										display: flex;
 										justify-content: center;
@@ -1660,6 +1923,7 @@ export default defineComponent({
 										height: 100%;
 										border-radius: 2rem;
 										border: 2px solid #E0E0E0;
+										overflow: hidden;
 										background: #fff;
 									}
 									&.active{
@@ -1677,27 +1941,61 @@ export default defineComponent({
 										// max-height: 100%;
 										object-fit: contain;
 									}
-									.Dustbin{
-										position: absolute;
-										top: 50%;
-										left: 50%;
-										transform: translate(-50%,-50%);
-										cursor: pointer;
-										color: #fff;
-										border-radius: 4rem;
-										font-size: 1.8rem;
-										padding: 1rem 1.5rem;
-										background: rgba(0, 0, 0, 0.7);
-										display: none;
-									}
-									.icon_like,.icon_delete {
-										font-size: 2.4rem;
+									
+									.btn{
 										top: 1rem;
 										right: 1rem;
+										display: flex;
 										position: absolute;
-										cursor: pointer;
-										display: none;
+										flex-direction: column;
+										align-items: center;
+										> i{
+											cursor: pointer;
+											width: 3rem;
+											height: 3rem;
+											display: flex;
+											align-items: center;
+											justify-content: center;
+										}
+										> .btnOpen{
+											position: absolute;
+											width: max-content;
+											left: 3rem;
+											top: 3rem;
+											transform: translateX(-100%);
+											background: #e4e4e7;
+											padding: 1.2rem;
+											border-radius: 1.2rem;
+											display: none;
+											z-index: 99;
+											&.active{
+												display: block;
+											}
+											> .item{
+												display: flex;
+												align-items: center;
+												margin-bottom: .8rem;
+												padding: .8rem;
+												border-radius: .8rem;
+												cursor: pointer;
+												&:last-child{
+													margin: 0;
+												}
+												> .text{
+													font-size: 1.2rem;
+													margin-right: 1rem;
+												}
+												&:hover{
+													background: #efeff1;
+												}
+											}
+										}
+										.icon_like,.icon_delete {
+											font-size: 1.4rem;
+											cursor: pointer;
+										}
 									}
+									
 									.icon_delete{
 										top: 5rem;
 									}