首页和library布局调整

src/views/HomeView/HomeView.vue

@@ -57,7 +57,7 @@
 							</div>
 							<!-- 有图状态 end-->
 						</div>
-						<div class="home_page_left_bottom" @click="()=>domHidden = !domHidden" v-show="designCollectionId">
+						<div class="home_page_left_bottom" @click="setShowHide('domHidden')" v-show="designCollectionId">
 							<span class="icon iconfont icon-xiala" :class="{'active':domHidden}"></span>
 						</div>
 					</div>
@@ -89,127 +89,120 @@
 								</div>
 							</div>
 						</div>
-
-						<div class="right_content_block">
-							<div class="right_content_header">
-								<div class="content_header_left">
-									<i class="fi fi-rs-comments"></i><span class="content_header_des">
-										{{ $t('HomeView.GeneratedDesign') }}
-										</span>
+						<div class="right_content_block_box">
+							<div class="right_content_block">
+								<div class="right_content_header">
+									<div class="content_header_left">
+										<i class="fi fi-rs-comments"></i><span class="content_header_des">
+											{{ $t('HomeView.GeneratedDesign') }}
+											</span>
+									</div>
 								</div>
-							</div>
 
-							<div class="right_content_body">
-								<div class="right_content_img_block scroll_style Guide_1_17 active" :class="[driver__.driver?'showEvents':'']">
-									<div class="right_content_img_item" ref="designImg">
-										<!-- <draggable 
-											group="people" > -->
+								<div class="right_content_body">
+									<div class="right_content_img_block scroll_style Guide_1_17 active" :class="[driver__.driver?'showEvents':'']">
+										<div class="right_content_img_item" ref="designImg">
 										
-										<div class="content_img_block active" :style="collStyle" draggable
-											v-for="(design, index) in likeDesignCollectionList" :key="design.id"
-											@click="designDetail(
-													design,
-													index,
-													likeDesignCollectionList,
-													'like'
-												)"
-											@dragstart="dragstart($event, index)"
-											@dragover.prevent 
-											@drop="dragDrop($event, index,likeDesignCollectionList)">
-											<div class="content_img_flex">
-												<img class="content_img" :src="design.designOutfitUrl"
-													:key="design.designOutfitUrl" />
-											</div>
-											<div class="icon iconfont icon-jushoucanggift icon_like" @click.stop="
-												dislikeDesignCollection(
-													design,
-													index
-												)">
-											</div>
-										</div>
-										<div class="content_img_block" v-show="showDesignMark" :style="collStyle">
-											<a-spin size="large"></a-spin>
-										</div>
-										<!-- </draggable> -->
-										<div class="content_img_block" :style="collStyle" draggable v-for="(
-												design, index
-											) in designCollectionList" :key="design?.designItemId">
-												<div class="content_img_flex" 
-												:class="[(driver__.driver && driver__.index == 32)?'hideEvents':'']"
-													@click="
-													designDetail(
+											<div class="content_img_block active" :style="collStyle"  @mousedown.stop="designMousedown(getMousePosition($event,false))" @touchstart.passive="designMousedown(getMousePosition($event,true))"
+												v-for="(design, index) in likeDesignCollectionList" :key="design.id"
+												@click="designDetail(
 														design,
 														index,
-														designCollectionList,
-														'dislike'
-													)"
-												@dragstart="dragstart($event, index)"
-												@dragover.prevent 
-												@drop="dragDrop($event, index,designCollectionList)">
-													<img class="content_img" :src="design.designOutfitUrl" />
-												</div> 
-												<div class="icon iconfont icon-jushoucang icon_like" :class="[driver__.driver?index == 0?driver__.index == 32?'Guide_img showEvents':'':'':'']" @click.stop="
-													likeDesignCollection(
+														likeDesignCollectionList,
+														'like'
+													)">
+												<div class="content_img_flex">
+													<img class="content_img" :src="design.designOutfitUrl"
+														:key="design.designOutfitUrl" designType="like" :index="index"/>
+												</div>
+												<div class="icon iconfont icon-jushoucanggift icon_like" @click.stop="
+													dislikeDesignCollection(
 														design,
 														index
-													)
-													">
+													)">
 												</div>
-												<i class="fi fi-rr-trash icon_delete" @click.stop="
-													deleteDesignCollection(
-														designCollectionList,
-														index
-													)
-													">
-												</i>
+											</div>
+											<div class="content_img_block" v-show="showDesignMark" :style="collStyle">
+												<a-spin size="large" class="content_img_flex"></a-spin>
+											</div>
+											<div class="content_img_block" :style="collStyle" v-for="(
+													design, index
+												) in designCollectionList" :key="design?.designItemId" @mousedown.stop="designMousedown(getMousePosition($event,false))" @touchstart.passive="designMousedown(getMousePosition($event,true))">
+													<div class="content_img_flex" 
+													:class="[(driver__.driver && driver__.index == 32)?'hideEvents':'']"
+														@click="
+														designDetail(
+															design,
+															index,
+															designCollectionList,
+															'dislike'
+														)">
+														<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>
+													<i class="fi fi-rr-trash icon_delete" @click.stop="
+														setDeleteDesign(index)">
+													</i>
+											</div>
+										
 										</div>
-									
 									</div>
 								</div>
 							</div>
-
-							<!-- <div class="right_content_header">
-								<div class="content_header_left">
-									<i class="fi fi-rs-comments"></i><span class="content_header_des">{{ $t('HomeView.SelectedDesign') }}</span>
+							<div class="right_content_block recycleBin" :class="{recycleBinShow:recycleDomHidden && designCollectionId}">
+								<div class="right_content_header">
+									<div class="content_header_left">
+										<i class="fi fi-rs-comments"></i><span class="content_header_des">
+											{{ $t('HomeView.recycleBin') }}
+											</span>
+									</div>
 								</div>
-								<div class="right_content_export" v-show="likeDesignCollectionList.length">
+
+								<div class="right_content_body">
+									<div class="right_content_img_block scroll_style">
+										<div class="right_content_img_item">
+											<div class="content_img_block" v-for="(
+													design, index
+												) in deleteDesignCollectionList" :key="design?.designItemId">
+													<div class="content_img_flex" 
+														@click="
+														designDetail(
+															design,
+															index,
+															designCollectionList,
+															'dislike'
+														)">
+														<img class="content_img" :src="design.designOutfitUrl" />
+													</div> 
+													<div class="Dustbin" @click.stop="
+														cancelDeleteDesign(index)">
+														Dustbin
+													</div>
+											</div>
+										
+										</div>
+									</div>
 								</div>
 								
 							</div>
-
-							<div class="right_content_body">
-								<div class="right_content_img_block scroll_style" :class="{active:likeDesignCollectionList.length != 0}">
-									<div class="right_content_img_item" id="right_content_img_block">
-										<div class="content_img_block" draggable
-											v-for="(design, index) in likeDesignCollectionList" :key="design.id"
-											@click="designDetail(
-													design,
-													index,
-													likeDesignCollectionList,
-													'like'
-												)"
-											@dragstart="dragstart($event, index)"
-											@dragover.prevent 
-											@drop="dragDrop($event, index)">
-											<div class="content_img_flex">
-												<img class="content_img" :src="design.designOutfitUrl"
-													:key="design.designOutfitUrl" />
-											</div>
-											<div class="icon iconfont icon-jushoucanggift icon_like" @click.stop="
-												dislikeDesignCollection(
-													design,
-													index
-												)
-												"></div>
-										</div>
-									</div>
-								</div>
-							</div> -->
+							<div class="home_page_left_bottom" :class="{active:recycleDomHidden}" @click="setShowHide('recycleDomHidden')" v-show="designCollectionId">
+								<span class="icon iconfont icon-xiala" :class="{'active':recycleDomHidden}"></span>
+							</div>
 						</div>
+						
 					</div>
 				</div>
 			</div>
 		</div>
+		<teleport to="body">
+			<img class="moveDataImg" v-if="moveDataImg" :style="moveDataStyle" :src="moveDataImg" alt="">
+		</teleport>
 		<KeepAlive>
 			<CollectionModal :getDesignData="getDesignData" ref="collectionModal" @finishCollection="finishCollection()"></CollectionModal>
 		</KeepAlive>
@@ -241,7 +234,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, h, ref, computed, reactive, toRefs, inject,provide,nextTick,createVNode,onBeforeUnmount} from "vue";
+import { defineComponent, h, ref, computed, reactive, toRefs, inject,provide,nextTick,createVNode,onBeforeUnmount, toRef} from "vue";
 // import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 // import HeaderComponent from "@/component/HomePage/Header.vue";
 import CollectionModal from "@/component/HomePage/collectionModal.vue";
@@ -258,11 +251,11 @@ import { useStore } from "vuex";
 import { Https } from "@/tool/https";
 import { openGuide,driverObj__ } from "@/tool/guide";
 import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
-import draggable from 'vuedraggable'
 // import JSZip, { forEach } from "jszip";
 import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
 import i18n from "@/lang";
 import { useI18n } from "vue-i18n";
+import { getMousePosition } from "@/tool/mdEvent";
 const FileSaver = require("file-saver");
 
 export default defineComponent({
@@ -275,7 +268,6 @@ export default defineComponent({
 		DesignDetail,
 		ExportNewCoolection,
 		affiche,
-		draggable,
 		productImg,
 		generalCanvas
 	},
@@ -293,6 +285,9 @@ export default defineComponent({
 		let likeDesignCollectionList: any = computed(() => {
 			return store.state.HomeStoreModule.likeDesignCollectionList;
 		});
+		let deleteDesignCollectionList: any = computed(() => {
+			return store.state.HomeStoreModule.deleteDesignCollectionList;
+		});
 		let designCollectionList: any = computed(() => {
 			return store.state.HomeStoreModule.designCollectionList;
 		});
@@ -375,6 +370,9 @@ export default defineComponent({
 			collTime:null as any,
 		})
 		let designImg = ref()
+		let domHidden = ref(JSON.parse(sessionStorage.getItem('domHidden') as any) || false);
+		let recycleDomHidden = ref(JSON.parse(sessionStorage.getItem('recycleDomHidden') as any) || false);
+		let getDesignTime = null as any;
 		const setSystemDesigner = (time:any)=>{
 			clearTimeout(collItemSize.collTime)
 			collItemSize.collTime = setTimeout(()=>{
@@ -390,18 +388,91 @@ export default defineComponent({
 		const setDesignImgWidth = ()=>{
 			nextTick(()=>{
 				let width = designImg.value.parentElement.offsetWidth
-				let sonDom = designImg.value.querySelectorAll('div')[0]
+				let sonDom = designImg.value.querySelectorAll('.content_img_block')[designImg.value.querySelectorAll('.content_img_block').length - 1]
 				if(Math.floor(width / (sonDom.offsetWidth+10 + 1)) > (likeDesignCollectionList.value.length + designCollectionList.value.length)){
 					designImg.value.style.width = 100+'%'
 				}else{
-					designImg.value.style.width = Math.floor(width / (sonDom.offsetWidth+10 + 1)) * (sonDom.offsetWidth + 10 + 1) + 'px'
+					// let recycleBinW = recycleDomHidden.value?'53rem':0
+					designImg.value.style.width = Math.floor(width / (sonDom.offsetWidth+10 + 1)) * (sonDom.offsetWidth + 10 + 1)+ 'px'
+					// designImg.value.style.width = `calc(${Math.floor(width / (sonDom.offsetWidth+10 + 1)) * (sonDom.offsetWidth + 10 + 1)}px - ${recycleBinW})`
 				}
 			})
 		}
+		const setDeleteDesign = (index:any)=>{
+			store.commit("setDeleteDesignCollectionList",index);
+		}
+		const cancelDeleteDesign = (index:any)=>{
+			store.commit("cancelDeleteDesignCollectionList",index);
+		}
 		setSystemDesigner(0)
+
+		let moveData = reactive({
+			moveDataImg:'',
+			moveDataImg_:'',
+			moveDataStyle:{
+				position: 'absolute',
+				top: '0',
+				left: '0',
+				width:'',
+				height:'',
+				zIndex: 9,
+				opacity:.5,
+				pointerEvents:'none'
+			},
+			downIndex:-1,
+			downXy:{x:0,y:0},
+		})
+		const designMousedown = (e:any)=>{
+			if(e.target.getAttribute('index')){
+				moveData.downIndex = e.target.getAttribute('index');
+			    moveData.moveDataImg_ = e.target.src
+				moveData.downXy.x = e.clientX
+				moveData.downXy.y = e.clientY
+				moveData.moveDataStyle.width = e.target.offsetWidth + 'px'
+				moveData.moveDataStyle.height = e.target.offsetHeight + 'px'
+				
+				window.addEventListener('mousemove', mouseMove);
+				window.addEventListener('touchmove', touchmove);
+				window.addEventListener('mouseup', designMouseup);
+				window.addEventListener('touchend', designMouseup);
+			}
+		}
+		let mouseMove = function(event:any){
+			let e = getMousePosition(event,false)
+			desingMousemove(e)
+		}
+		let touchmove = function(event:any){
+			let e = getMousePosition(event,true)
+			desingMousemove(e)
+		}
+		const designMouseup = (e:any)=>{
+			document.removeEventListener('mousemove',mouseMove)
+			document.removeEventListener('touchmove',touchmove)
+			document.removeEventListener('mouseup',designMouseup) 
+			document.removeEventListener('touchend',designMouseup) 
+			moveData.moveDataImg = ''
+			moveData.moveDataImg_ = ''
+			moveData.downXy = {x:0,y:0}
+			var type = e.target.getAttribute('designType');
+			var index = e.target.getAttribute('index');
+			if(index){
+				let arr = type == 'like'?likeDesignCollectionList.value:designCollectionList.value
+				// arr[index]
+				let item = arr.splice(moveData.downIndex, 1)
+				arr.splice(index, 0, ...item) 
+			}
+		}
+		const desingMousemove = (e:any)=>{
+			if(!moveData.moveDataImg)moveData.moveDataImg = moveData.moveDataImg_
+			let width = moveData.moveDataStyle.width.split('px')[0]
+			let height = moveData.moveDataStyle.height.split('px')[0]
+			moveData.moveDataStyle.left = e.clientX - Number(width)/2+'px'
+			moveData.moveDataStyle.top = e.clientY - Number(height)/2+'px'
+		}
 		return {
 			store,
 			likeDesignCollectionList,
+			deleteDesignCollectionList,
 			designCollectionList,
 			userGroupId,
 			userDetail,
@@ -423,7 +494,16 @@ export default defineComponent({
 			setSystemDesigner,
 			...toRefs(collItemSize),
 			designImg,
+			domHidden,
+			recycleDomHidden,
+			getDesignTime,
+
 			setDesignImgWidth,
+			setDeleteDesign,
+			cancelDeleteDesign,
+			...toRefs(moveData),
+			designMousedown,
+			getMousePosition,
 		};
 	},
 	data() {
@@ -446,9 +526,7 @@ export default defineComponent({
 			likeLoading: false, //喜欢防抖
 			dragIdx:0,
 			designRandom:'',
-			domHidden:JSON.parse(sessionStorage.getItem('domHidden') as any) || false,
-
-			getDesignTime:null as any,
+			
 		};
 	},
 	watch: {
@@ -467,6 +545,7 @@ export default defineComponent({
 	beforeUnmount(){
 		clearTimeout(this.getDesignTime);
 		sessionStorage.setItem('domHidden',JSON.stringify(this.domHidden))
+		sessionStorage.setItem('recycleDomHidden',JSON.stringify(this.recycleDomHidden))
 		sessionStorage.setItem('collValue',JSON.stringify(this.collValue))
 	},
 	async mounted() {
@@ -614,17 +693,6 @@ export default defineComponent({
 			
 			// affiche.afficheMask = true
 		},
-		dragstart (e:any, index:any) {
-			
-		this.dragIdx = index
-		},
-		dragDrop (e:any, index:any,list:any) {
-		let _teams = list  //将hotteams存起来
-		let _dragitem = _teams[this.dragIdx]  //将被拖拽的那条数据存起来
-		if(!_dragitem)return
-		_teams.splice(this.dragIdx, 1)      //删除被拖拽的那条数据
-		_teams.splice(index, 0, _dragitem)  //将被拖拽的那条数据放到数组中指定的位置
-		},
 		
 		//判断模特和当前start的sketch是否匹配
 		isMannequin(){
@@ -1264,6 +1332,11 @@ export default defineComponent({
 			this.$emit('setTask',data)
 			// this.exportModel()
 		},
+		setShowHide(str:string){
+			if(str == 'recycleDomHidden')this.recycleDomHidden = !this.recycleDomHidden
+			if(str == 'domHidden')this.domHidden = !this.domHidden
+			this.setDesignImgWidth()
+		}
 	},
 });
 </script>
@@ -1278,8 +1351,10 @@ export default defineComponent({
 	// left: 50%;
 	// margin-left: -50%;
 	// transform: translateX(-50%);
+	
 	.page_content {
 		position: relative;
+		
 		.userSystem{
 			position: absolute;
 			width: 100%;
@@ -1293,6 +1368,31 @@ export default defineComponent({
 			font-weight: 600;
 			font-size: 4rem;
 		}
+		.home_page_left_bottom{
+			position: absolute;
+			width: 4rem;
+			height: 7rem;
+			background: #fff;
+			border: 2px solid;
+			border-right: none;
+			border-radius: 2rem 0 0 2rem;
+			top: 50%;
+			transform: translate(-100%,-50%);
+			left: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			z-index: 2;
+			cursor: pointer;
+			>span{
+				transition: all .3s;
+				transform: rotate(90deg);
+				&.active{
+					transform: rotate(270deg);
+				}
+			}
+			
+		}
 		.page_content_body {
 			position: absolute;
 			width: 100%;
@@ -1316,31 +1416,7 @@ export default defineComponent({
 					position: relative;
 					// overflow: hidden;
 					
-					.home_page_left_bottom{
-						position: absolute;
-						width: 4rem;
-						height: 7rem;
-						background: #fff;
-						border: 2px solid;
-						border-right: none;
-						border-radius: 2rem 0 0 2rem;
-						top: 50%;
-						transform: translate(-100%,-50%);
-						left: 100%;
-						display: flex;
-						align-items: center;
-						justify-content: center;
-						z-index: 2;
-						cursor: pointer;
-						>span{
-							transition: all .3s;
-							transform: rotate(90deg);
-							&.active{
-								transform: rotate(270deg);
-							}
-						}
-						
-					}
+					
 					.home_page_left_content {
 						height: 100%;
 						width: 55rem;
@@ -1439,10 +1515,27 @@ export default defineComponent({
 					// width: calc(100% - 44.4rem);
 					flex: 1;
 					height: 100%;
-					overflow: hidden;
+					width: 100%;
+					// overflow: hidden;
 					display: flex;
 					flex-direction: column;
 					justify-content: space-between;
+					position: relative;
+					.home_page_left_bottom{
+						border-radius: 0 2rem 2rem 0rem;
+						left: 2rem;
+						top: 50%;
+						left: auto;
+						right: 0;
+						transform: translate(100%, -50%);
+						// top: calc(50% - 10.4rem / 2);
+						border: 2px solid;
+						border-left: none;
+						&.active{
+							right: 53rem;
+							transform: translate(0, -50%);
+						}
+					}
 					.right_top {
 						padding: 2rem 3.2rem 2rem 1.2rem;
 						display: flex;
@@ -1477,12 +1570,35 @@ export default defineComponent({
 							}
 						}
 					}
-
-					.right_content_block {
-						overflow-y: auto;
+					.right_content_block_box{
 						flex: 1;
 						display: flex;
+						overflow: hidden;
+					}
+					.right_content_block {
+						flex: 1;
+						display: flex;
+						width: 0;
 						flex-direction: column;
+						&.recycleBin{
+							flex: none;
+							margin-left: 0;
+							width: 0;
+							overflow: hidden;
+							&.recycleBinShow{
+								width: auto;
+								margin-left: 2rem;
+							}
+							.right_content_body {
+								width: 55rem;
+								.right_content_img_block{
+									.content_img_block{
+										width: 16rem;
+										height: 23rem;
+									}
+								}
+							}
+						}
 						&.right_content_block::-webkit-scrollbar{display: none;}
 						&.active{
 							overflow: hidden;
@@ -1616,7 +1732,7 @@ export default defineComponent({
 									display: flex;
 									align-items: center;
 									justify-content: center;
-									&:hover .icon_like,&:hover .icon_delete {
+									&:hover .icon_like,&:hover .icon_delete,&:hover .Dustbin {
 										display: block;
 									}
 
@@ -1631,7 +1747,7 @@ export default defineComponent({
 										width: 100%;
 										height: 100%;
 										border-radius: 2rem;
-										
+										border: 2px solid #E0E0E0;
 									}
 									&.active{
 										.icon_like,.icon_delete{
@@ -1648,7 +1764,19 @@ 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;
 										top: 1rem;