新增 删除 衣服

src/component/Detail/DesignDetail.vue

@@ -33,7 +33,7 @@
 								<img :src="item?.path" alt="">
 								<i v-show="deleteShow" class="fi fi-br-cross" @click.stop="setDelete(index)"></i>
 							</div>
-							<div class="detail_modal_body_Set" @click="setClothesOpen()">
+							<div v-show="designItemDetailNum < 5" class="detail_modal_body_Set" @click="setClothesOpen()">
 								+
 							</div>
 						</div>
@@ -172,7 +172,7 @@ export default defineComponent({
 		// 	return store.state.DesignDetailModule.designItemDetail
 		// })
 		let designItemDetail :any = computed(()=>{
-			console.log(123);
+			console.log(store.state.DesignDetailModule.designItemDetail,'-=-=--==--==-');
 			
 			return store.state.DesignDetailModule.designItemDetail
 		})
@@ -211,6 +211,8 @@ export default defineComponent({
 		let setClothes:any = ref()
 		//点击删除按钮
 		let deleteShow:any = ref(false)
+		let designItemDetailNum:any = ref(0)
+		
         return{
             designItemDetail,
             store,
@@ -233,6 +235,7 @@ export default defineComponent({
 			t,
 			setClothes,
 			deleteShow,
+			designItemDetailNum,
         }
     },
     data(){
@@ -248,7 +251,6 @@ export default defineComponent({
 	watch:{
 		designItemDetail:{
 			handler: async function(newVal,oldVal) {
-				console.log(1123);
 				let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
 				this.ifSubmit = designItemDetail.ifSubmit?designItemDetail.ifSubmit:false
 				this.current = JSON?.parse(JSON?.stringify(designItemDetail?.clothes?.[this?.currentIndex]))
@@ -257,12 +259,23 @@ export default defineComponent({
 				}else{
 					this.body = true
 				}
+				let num = 0
+				newVal.clothes.forEach((item:any) => {
+					if(item.id){
+						num++
+					}
+				});
+				this.designItemDetailNum = num
 				await this.setImgSize()
-				this.designItemDetailUrl = designItemDetail.currentFullBodyView?designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
-			}
-		},
-		currentIndex:{
-			handler: function(newval) {
+				let url = ''
+				if(designItemDetail.currentFullBodyView){
+					url = designItemDetail.currentFullBodyView
+				}else{
+					url = designItemDetail.designItemUrl
+				}
+				this.designItemDetailUrl = url
+				// console.log(designItemDetail.currentFullBodyView,designItemDetail.designItemUrl);
+				
 			}
 		},
 		designDetailShow:{
@@ -346,7 +359,8 @@ export default defineComponent({
 			this.moible = isMoible()
 			this.designItemId = data.design.designItemId
 			this.designOutfitId = data.design.designOutfitId
-            let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}&designPythonOutfitId=${data.design.designOutfitId}`
+            // let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}&designPythonOutfitId=${data.design.designOutfitId}`
+            let url = Https.httpUrls.getDesignDetail + `?designItemId=45192&designPythonOutfitId=44898`
             this.parentData = data
             this.loadingShow = true
             Https.axiosGet(url).then(
@@ -362,6 +376,7 @@ export default defineComponent({
 							item.printObject.prints = [{}]
 						}
 					})
+					this.currentIndex = 0
                     this.store.commit('setDesignItemDetail',rv)
 					this.removeRevocation()
 					this.setRevocation(rv,'')
@@ -418,7 +433,6 @@ export default defineComponent({
 				let frontIndex = 6
 				let backIndex = 3
 				designItemDetail.clothes.forEach((v:any,index:any)=>{
-					
 					for (let i = v.layersObject.length-1; i >= 0; i--) {
 						v.layersObject[i].style = {
 							top:v.layersObject[i].position?.[0]*ratio+'px',
@@ -434,10 +448,10 @@ export default defineComponent({
 						v.layersObject[i].designOpenrtionBtn = false
 						if(v.layersObject[i].imageCategory.indexOf("back") == -1){
 							front[index] = v.layersObject[i]
-							front[index].style.zIndex = frontIndex-=1
+							front[index].style.zIndex = v.priority
 						}else{
 							back[index] = v.layersObject[i]
-							back[index].style.zIndex = backIndex-=1
+							back[index].style.zIndex = v.priority
 							// back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++
 						}
 					}
@@ -537,11 +551,14 @@ export default defineComponent({
 			sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation));
 			sessionStorage.setItem('revocation', JSON.stringify(revocation));
 		},
-		setSubmitItem(str:any){
+		setSubmitItem(str:any,sub:any){
+			//sub判断是不是点击新增图层又直接点击删除
 			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
 			let clothes:any = []
-			
-			designItemDetail.clothes.forEach((item:any) => {
+			let num = -1
+			// let zIndex = 10
+			designItemDetail.clothes.forEach((item:any,index:number) => {
+				
 				let clothesItem = {
 					color: `${item.color.r} ${item.color.g} ${item.color.b}`,
 					id:item.id,
@@ -553,11 +570,20 @@ export default defineComponent({
 						// path:item.printObject.path?item.printObject.path :'',
 						prints:item?.printObject?.prints[0]?.minIOPath?item?.printObject?.prints:[]
 					},
+					priority:item.priority,
 					type:item.type,
 				}
-				clothes.push(clothesItem)
-				
+				if(!item.id && sub){
+					num = index
+				}else{
+					clothes.push(clothesItem)
+				}
 			});
+			if(num != -1){
+				designItemDetail.clothes.splice(num,1)
+				this.store.commit("setDesignItemDetail", designItemDetail);
+			}
+			this.currentIndex = 0
 			let data = {
                 designItemId:designItemDetail.designItemId,
 				// designItemId:designItemDetail.designItemId,
@@ -573,17 +599,17 @@ export default defineComponent({
 				data.isPreview = false
 				delete data.ifSubmit
 			}
-			this.store.commit('setDesignPreviewData',data)
+			// this.store.commit('setDesignPreviewData',data)
 			return data
 		},
 		async setSubmit(str:any){
 			let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
-			let data = this.setSubmitItem(str)
+			let data = this.setSubmitItem(str,true)
             this.loadingShow = true
 			await setDesignItem.setPreview(data)
 		},
 		async submit(){
-			let data = this.setSubmitItem('')
+			let data = this.setSubmitItem('',true)
             this.loadingShow = true
             Https.axiosPost(Https.httpUrls.designSingle, data).then(
                 (rv: any) => {
@@ -625,6 +651,9 @@ export default defineComponent({
 			// nextTick().then(()=>{
 			// })
 			console.log(modal_body);
+			if(modal_body == undefined){
+				this.setPostition(url)
+			}
 			function loadImage(url:any) {
 				return new Promise((resolve, reject) => {
 					const img = new Image();
@@ -695,12 +724,13 @@ export default defineComponent({
 				DesignDetailAlter.changePlace()
 			}else{
 				this.deleteShow = false
-				let data = this.setSubmitItem('preview')
+				this.loadingShow = true
+				let data = this.setSubmitItem('preview',true)
 				Https.axiosPost(Https.httpUrls.designSingle, data).then(
 				(rv) => {
 					let designItemDetail = JSON.parse(JSON.stringify(this.designItemDetail))
+					designItemDetail.ifSubmit = true
 					this.loadingShow = false
-					console.log(rv);
 					this.store.commit("setDesignItemDetail", designItemDetail);
 					this.store.commit("setDesignPreviewData", data);
 					this.setRevocation(designItemDetail,data)
@@ -757,6 +787,7 @@ export default defineComponent({
 			// this.designOrder = true
 			// let DesignDetailAlter:any = this.$refs.DesignDetailAlter
 			// DesignDetailAlter.changePlace()
+			this.designOrder = true
 			if(this.designItemDetail.clothes[this.designItemDetail.clothes.length-1].id){
 				this.designItemDetail.clothes.push(aa)
 				this.clothesDetail(aa,this.designItemDetail.clothes.length-1)
@@ -772,15 +803,21 @@ export default defineComponent({
         clothesDetail(clothes:any, index:number){
 			
 			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
-			this.currentIndex = index?index:0
 			this.designOrder = true
-			this.current = designItemDetail.clothes[this.currentIndex]
-			let data:any = this.setSubmitItem('preview')
+			this.current = designItemDetail.clothes[index]
+			if(this.current.id && !designItemDetail.clothes[designItemDetail.clothes.length-1].id){
+				designItemDetail.clothes.splice(designItemDetail.clothes.length-1,1)
+				this.store.commit('setDesignItemDetail',designItemDetail)
+			}
+			let data:any = this.setSubmitItem('preview',false)
+			this.currentIndex = index?index:0
+
 			data.designSingleItemDTOList[this.currentIndex] = {
 				color:`${this.current.color.r} ${this.current.color.g} ${this.current.color.b}`,
 				id:this.current.id?this.current.id:'',
 				path:this.current.minIOPath?this.current.minIOPath:'',
 				offset:this.current.layersObject?.[1]?.offset?this.current.layersObject[1].offset:[0,0],
+				priority:this.current.priority,
 				scale:this.current.layersObject?.[1]?.scale?this.current.layersObject[1].scale:1,
 				printObject:{
 					ifSingle:this.current?.printObject?.ifSingle == null ? false : this.current?.printObject?.ifSingle,
@@ -945,6 +982,7 @@ export default defineComponent({
 						height: 4rem;
 						cursor: pointer;
 						text-align: center;
+						margin-left: .3rem;
 						img{
 							// width: 100%;
 							height: 100%;
@@ -960,11 +998,11 @@ export default defineComponent({
 						}
 					}
 					>div:nth-child(1){
-						margin-right: 1rem;
+						margin-left: 0rem;
 					}
 				}
 				.detail_modal_item_front:last-child{ 
-					z-index: 1 !important;
+					// z-index: 1 !important;
 				}
 				>img{
 					width: 100%;