2023-11-8-1

src/component/Detail/DesignDetail.vue

@@ -942,6 +942,7 @@ export default defineComponent({
                 overflow-y: auto;
 				display: flex;
 				flex-direction: column;
+				overflow: hidden;
                 .clothes_detail_item{
 					// margin-bottom: 5rem;
 					flex: 1;

src/component/Detail/DesignPrintOperation.vue

@@ -878,6 +878,7 @@ export default defineComponent({
 					max-height: 50rem;
 					min-height: 30rem;
 					width: auto;
+					max-width: 60rem;
 				}
 				.designOpenrtion_sketch_mask{
 					z-index: 3;

src/component/HomePage/ExportNewCoolection.vue

@@ -42,14 +42,20 @@
             </div>
         </div>
 
-		<div class="img_block_item img_block_item_sketch">
+		<!-- <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="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?.imgUrl">
+				</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">
@@ -58,7 +64,7 @@
             </div>
         </div>
 
-        <div class="img_block_item img_block_item_sketch h50">
+        <div class="img_block_item img_block_item_sketch_like h50">
             <div class="lager_img_item"  v-for="(design) in likeDesignCollectionList" :key="design.designItemUrl">
                 <div class="all_img_item_block">
                     <img class="all_img_content" :src="design.designItemUrl"> 
@@ -69,20 +75,69 @@
     </div>
 </template>
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
+import { computed, defineComponent,ref,nextTick} from 'vue'
 import MoodTemplate from '@/component/HomePage/MoodTemplate.vue'
 import { useStore } from "vuex";
 export default defineComponent({
     components:{MoodTemplate},
     setup() {
+		let sketch:any = ref([[],[],[]])
+		let sketchList = ref([])
         const store = useStore();
         let allBoardData:any = computed(()=>{return store.state.UploadFilesModule.allBoardData})
         let likeDesignCollectionList : any = computed(()=>{return store.state.HomeStoreModule.likeDesignCollectionList})
         return {
             allBoardData,
             likeDesignCollectionList,
+			sketch,
+			sketchList,
         }
-    }
+    },
+	watch: {
+		allBoardData:{
+			handler(newVal:any,oldVal:any){
+				this.sketchList = []
+				// this.sketch = [[],[],[]]
+				console.log(111);
+				this.sketchList = this.allBoardData.sketchboardFiles
+				this.setSketch()
+			}
+		}
+	},
+	methods: {
+		setSketch(){
+			this.sketch = [[],[],[]]
+			nextTick().then(async ()=>{
+				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
+				console.log(this.sketchList);
+				for (let i = 0; i < this.sketchList.length; i++) {
+					let arr = [sketch1,sketch2,sketch3]
+					arr.sort((a,b)=>{
+						var a_num = a["height"];
+						var b_num = b["height"];
+						return a_num - b_num;
+					})
+					this.sketch[arr[0].num]?.push(this.sketchList[i])
+					await new Promise((resolve:any)=>{
+						nextTick().then(()=>{
+							sketch1 = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item0')[0]?.getBoundingClientRect()
+							sketch2 = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item1')[0]?.getBoundingClientRect()
+							sketch3 = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item2')[0]?.getBoundingClientRect()
+							sketch1.num = 0
+							sketch2.num = 1
+							sketch3.num = 2
+							resolve()
+						})
+					})
+				}
+			})
+		}
+	}
 })
 </script>
 <style lang="less" scoped>
@@ -189,6 +244,23 @@ export default defineComponent({
             }
         }
 		&.img_block_item_sketch{
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: flex-start;
+			align-items: flex-start;
+			>div{
+				width: 30%;	
+				margin-left: 2rem;
+				height: auto;
+				>div{
+					margin-bottom: 2rem;
+				}
+			}
+			>div:nth-child(1){
+				margin: 0;
+			}
+		}
+		&.img_block_item_sketch_like{
 			display: flex;
 			flex-wrap: wrap;
 			justify-content: space-between;

src/component/HomePage/Generate.vue

@@ -159,14 +159,21 @@
                 :class="{ active: item?.checked }"
             >
                 <img v-lazy="item.imgUrl" alt="" />
+
 				<div
 					class="delete_like_file_block"
 				>
 					<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
 					<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
 				</div>
+				<div class="delete_like_file_block left">
+					<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage()"></i>
+				</div>
+
             </div>
         </div>
+	<scaleImage ref="scaleImage"></scaleImage>
+
 		<div class="mark_loading" v-show="loadingShow">
 			<a-spin size="large" />
 		</div>
@@ -182,8 +189,12 @@ import GO from "@/tool/GO";
 import { getCookie } from "@/tool/cookie";
 import { getUploadUrl } from "@/tool/util";
 import { forEach } from "jszip";
+import scaleImage from "@/component/HomePage/scaleImage.vue";
 import { useI18n } from "vue-i18n";
 export default defineComponent({
+	components: {
+		scaleImage,	
+	},
     props: ["msg",'sketchCatecoryList'],
     setup() {
         // console.log(prop.msg);
@@ -548,6 +559,12 @@ export default defineComponent({
 			}
 			
 		},
+		scaleImage(){
+			let scaleImage:any = this.$refs.scaleImage
+			 console.log(this.fileList);
+			 
+			scaleImage.init(this.fileList)
+		},
         closeModal() {
             // this.myMaterialModalShow = false
             this.searchPictureName = "";
@@ -674,6 +691,9 @@ export default defineComponent({
 				text-align: center;
 				line-height: 3.2rem;
 				left: auto;
+				&.left{
+					left: .9rem;
+				}
 				i{
 					font-size: 1.6rem;
 					color: #fff;

src/component/HomePage/Material.vue

@@ -20,7 +20,7 @@
              
                 <div class="material_content_body scroll_style">
 					<div v-for="item,index in imgList" :key="item" class="content_img_item" :class="[ item?.checked ? 'active':''  , selectCode == 'Moodboard' ? 'moodb':''  ]" >
-						<img :src="item.imgUrl" @click.stop="selectImgItem(item)">
+						<img :src="item?.imgUrl" @click.stop="selectImgItem(item)">
 						<div v-if="selectCode == 'Sketchboard'" class="operate_file_block">
                             <div class="select_img_type">
                                 <div
@@ -65,7 +65,7 @@
 							<a-checkbox v-model:checked="item.pin">{{ $t('Material.PIN') }}</a-checkbox>
 						</div>
 					</div>
-					<div v-show="total > imgList.length" class="material_content_list_loding" v-observe>
+					<div v-show="total > imgList?.length" class="material_content_list_loding" v-observe>
 						<img src="@/assets/images/homePage/loading.gif" alt="">
 					</div>
                 </div>
@@ -90,8 +90,7 @@ export default defineComponent({
     props: ["msg",'disignTypeList'],
     setup(prop) {
         let myMaterialModalShow = ref(false)
-        let imgList = ref([
+        let imgList:any = ref([])
-		])
         let isShowLoading:any = ref(false)
         let selectCode:any = ref('')
         let currentPage:any = ref(1)
@@ -252,8 +251,6 @@ export default defineComponent({
         init(code:any){
             this.selectCode = code
             // this.myMaterialModalShow = true
-			if(this.imgList.length == 0){
-			}
 			this.getLibraryList()
 			
         },
@@ -284,9 +281,12 @@ export default defineComponent({
                 level1Type:this.selectCode,
                 // level2Type:this.designType,
 				modelSex:workspace?.sex,
-                page:this.currentPage,
+                page: this.imgList?.[0]?.id != undefined?this.imgList?.length / this.pageSize+1:1,
+                // page:this.currentPage,
                 pictureName:this.searchPictureName,
-                size:this.pageSize+this.imgList.length,
+                size:this.pageSize,
+                // size:this.imgList?.length + this.pageSize,
+				
             }
             this.isShowLoading = true
             Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
@@ -317,7 +317,7 @@ export default defineComponent({
 						}
 						aa.push(item)
 					});
-					this.imgList = aa
+					this.imgList.push(...aa)
                     this.total = rv.total
                     this.isShowLoading = false
                 }

src/component/HomePage/NewCollectionReview.vue

@@ -42,13 +42,20 @@
                 </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="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="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?.imgUrl">
+				</div>
+            </div>
         </div>
 
         <div class="img_block_item">
@@ -62,20 +69,70 @@
     </div>
 </template>
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
+import { computed, defineComponent ,ref, reactive, nextTick } from 'vue'
 import MoodTemplate from '@/component/HomePage/MoodTemplate.vue'
 import { useStore } from "vuex";
 export default defineComponent({
     components:{MoodTemplate},
     setup() {
         const store = useStore();
+		let sketch:any = ref([[],[],[]])
+		let sketchList = ref([])
         let allBoardData:any = computed(()=>{
 			return store.state.UploadFilesModule.allBoardData})
         return {
             allBoardData,
+			sketch,
+			sketchList,
         }
     },
+	watch: {
+		allBoardData:{
+			handler(newVal:any,oldVal:any){
+				this.sketchList = []
+				// this.sketch = [[],[],[]]
+				console.log(111);
+				this.sketchList = this.allBoardData.sketchboardFiles
+				this.setSketch()
+			}
+		}
+	},
 	mounted () {
+		
+	},
+    methods: {
+		setSketch(){
+			this.sketch = [[],[],[]]
+			nextTick().then(async ()=>{
+				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
+				console.log(this.sketchList);
+				for (let i = 0; i < this.sketchList.length; i++) {
+					let arr = [sketch1,sketch2,sketch3]
+					arr.sort((a,b)=>{
+						var a_num = a["height"];
+						var b_num = b["height"];
+						return a_num - b_num;
+					})
+					this.sketch[arr[0].num]?.push(this.sketchList[i])
+					await new Promise((resolve:any)=>{
+						nextTick().then(()=>{
+							sketch1 = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item0')[0]?.getBoundingClientRect()
+							sketch2 = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item1')[0]?.getBoundingClientRect()
+							sketch3 = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item2')[0]?.getBoundingClientRect()
+							sketch1.num = 0
+							sketch2.num = 1
+							sketch3.num = 2
+							resolve()
+						})
+					})
+				}
+			})
+		}
 	}
 })
 </script>
@@ -191,10 +248,18 @@ export default defineComponent({
 		&.img_block_item_sketch{
 			display: flex;
 			flex-wrap: wrap;
-			justify-content: space-between;
+			justify-content: flex-start;
+			align-items: flex-start;
 			>div{
-				width: 45%;	
+				width: 30%;	
-				height: 25rem;
+				margin-left: 2rem;
+				height: auto;
+				>div{
+					margin-bottom: 2rem;
+				}
+			}
+			>div:nth-child(1){
+				margin: 0;
 			}
 		}
 		&.h30{

src/component/HomePage/scaleImage.vue

@@ -0,0 +1,229 @@
+<template>
+		<a-modal
+            class="scaleImage_modal"
+            v-model:visible="scaleImage"
+            :footer="null"
+            width="65%"
+            :maskClosable="false"
+            :centered="true"
+            :closable="false"
+            :mask="false"
+			:destroyOnClose="true"
+        >
+		<div class="scaleImage_btn">
+			<div class="collection_closeIcon left" @click.stop="cancelDsign()">
+				<i class="fi fi-rr-cross-small"></i>
+			</div>
+			<div class="collection_closeIcon" @click.stop="download()">
+				<i class="fi fi-rr-down-to-line"></i>
+			</div>
+		</div>
+		<div class="scaleImage_content">
+			<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
+		</div>
+		<div class="scaleImage_nav">
+			<div class="nav_left">
+				<i class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
+			</div>
+			<div class="nav_list">
+				<img  v-for="item,index in scaleImageList" @click="setScaleImageIndex(index)" :class="{active:index == scaleImageIndex}" :src="item?.imgUrl" :key="item.id">
+			</div>
+			<div class="nav_right">
+				<i class="fi fi-rr-arrow-small-right" @click.stop="nextStep()"></i>
+			</div>
+		</div>
+	<!-- <div>
+		<a-button type="primary" @click="() => setVisible(true)">show image preview</a-button>
+			<a-image
+			:width="200"
+			:style="{ display: 'none' }"
+			:preview="{
+				visible,
+				onVisibleChange: setVisible,
+			}"
+			src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+			/>
+		</div> -->
+	</a-modal>
+</template>
+
+<script lang="ts">
+import { defineComponent, h, ref ,computed,reactive, nextTick} from "vue";
+import { Https } from "@/tool/https";
+import { getCookie } from "@/tool/cookie";
+import domTurnImg from '@/tool/domTurnImg'
+import { downloadIamge } from "@/tool/util";
+
+export default defineComponent({
+    setup() {
+        let scaleImage: any = ref(false);
+		let loadingShow = ref(false)
+		const visible = ref<boolean>(false);
+		const setVisible = (value:any): void => {
+			visible.value = value;
+		};
+		let scaleImageList:any = ref([
+			
+		])
+		let scaleImageIndex:any = ref(0)
+        return {
+            scaleImage,
+			loadingShow,
+			visible,
+			setVisible,
+			scaleImageList,
+			scaleImageIndex,
+        };
+    },
+    data() {
+        return {
+            // moodTemplateId: "", //模板id
+			
+        };
+    },
+
+    mounted() {
+    },
+    methods: {
+		init(list:any){
+			this.scaleImage = true
+			console.log(list);
+			this.scaleImageList = list
+			// let scaleImageList = this.store.state.UploadFilesModule.moodboard
+		},
+		cancelDsign(){
+			this.scaleImage = false
+			this.scaleImageList = []
+			this.scaleImageIndex = 0
+		},
+		lastStep(){
+			
+			if(this.scaleImageIndex <= 0){
+			}else{
+				this.scaleImageIndex -= 1
+			}
+		},
+		nextStep(){
+			if(this.scaleImageIndex >= this.scaleImageList.length-1){
+			}else{
+				this.scaleImageIndex += 1
+			}
+		},
+		download(){
+			downloadIamge(this.scaleImageList[this.scaleImageIndex].imgUrl)
+		},
+		setScaleImageIndex(index:any){
+			this.scaleImageIndex = index
+		},
+    },
+});
+</script>
+
+<style lang="less">
+.scaleImage_modal {
+	-moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    -khtml-user-select: none;
+    user-select: none;
+	position: relative;
+	border-radius: 1rem;
+	overflow: hidden;
+	.ant-modal-body {
+        padding: 0;
+		// height: calc(65vh - 6.4rem);
+		height: 65rem;
+		// background-color: #181818;
+		display: flex;
+		flex-direction: column;
+    }
+	.ant-modal-btn{
+		
+	}
+    .scaleImage_btn {
+		.collection_closeIcon{
+			position: absolute;
+			top: 2rem;
+			right: 2rem;
+			cursor: pointer;
+			width: 4rem;
+			height: 4rem;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			&.left{
+				left: 2rem;
+			}
+			.fi-rr-cross-small::before{
+				padding: .2rem;
+				border-radius: 5px;
+				border: solid 2px rgba(0, 0, 0, 0.22);
+				transition: .3s all;
+				color: rgba(0, 0, 0, 0.7);
+			}
+			&.collection_closeIcon:hover .fi-rr-cross-small::before{
+				border: solid 2px rgba(0, 0, 0, 5);
+				color: rgba(0, 0, 0, 1);
+			}
+			.fi-rr-down-to-line{
+				transition: .3s all;
+				color: rgba(0, 0, 0, .5);
+			}
+			.fi-rr-down-to-line:hover{
+				color: rgba(0, 0, 0, 1);
+			}
+		}
+	}
+	.scaleImage_content{
+		display: flex;
+		justify-content: center;
+		height: 100%;
+		margin-top: 5rem;
+		img{
+			width: auto;
+			max-width: 50rem;
+			height: 100%;
+		}
+	}
+	.scaleImage_nav{
+		flex: 1;
+		margin: 2.5rem 0rem;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		.nav_left,.nav_right{
+			cursor: pointer;
+			i{
+				transition: .3s all;
+				color: rgba(0, 0, 0, .5);
+			}
+		}
+		.nav_left:hover,.nav_right:hover{
+			i{
+				color: rgba(0, 0, 0, 1);
+			}
+		}
+		.nav_list{
+			margin: 0 2rem;
+			img{
+				max-width: 5rem;
+				max-height: 5rem;
+				object-fit: cover;
+				object-position: 50%,50%;
+				margin-left: 1rem;
+				border-radius: 1rem;
+				overflow: hidden;
+				cursor: pointer;
+				padding: .1rem;
+				&.active{
+					border: 1px solid #aaaaaa;
+				}
+			}
+			img:nth-child(1){
+				margin-left: 0rem;
+			}
+		}
+	}
+}
+</style>

src/component/LibraryPage/setLabel.vue

@@ -8,14 +8,11 @@
 		:centered="true"
 		@onCancel="clearSetLabel"
 	>
-	<a-cascader
+		<div>
-		v-model:value="value"
+			<ul>
-		style="width: 100%"
+				<li></li>
-		:multiple="multiple"
+			</ul>
-		max-tag-count="responsive"
+		</div>
-		:options="options"
-		placeholder="Please select"
-	></a-cascader>
 	</a-modal>
     
 </template>
@@ -110,7 +107,6 @@ export default defineComponent({
 		}else{
 			this.multiple = true
 		}
-		console.log(this.$parent?.options);
 		
 	  },
 	  clearSetLabel(){

src/tool/util.js

@@ -28,6 +28,28 @@ function blobToFile(blob, fileName){
     return blob;
 }
 
+//下载图片
+function downloadIamge (imgsrc, name) { // 下载图片地址和图片名
+	var image = new Image()
+	// 解决跨域 Canvas 污染问题
+	image.setAttribute('crossOrigin', 'anonymous')
+	image.onload = function () {
+	  var canvas = document.createElement('canvas')
+	  canvas.width = image.width
+	  canvas.height = image.height
+	  var context = canvas.getContext('2d')
+	  context.drawImage(image, 0, 0, image.width, image.height)
+	  var url = canvas.toDataURL('image/jpeg') // 得到图片的base64编码数据
+	  var a = document.createElement('a') // 生成一个a元素
+	  var event = new MouseEvent('click') // 创建一个单击事件
+	  a.download = name || 'generate' // 设置图片名称
+	  a.href = url // 将生成的URL设置为a.href属性
+	  a.target='_blank'
+	  a.dispatchEvent(event) // 触发a的单击事件
+	}
+	image.src = imgsrc
+}
+
 function dataURLtoFile(dataurl, filename){
     var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
     bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
@@ -144,4 +166,5 @@ export{
     formatTime,
     dataURLtoBlob,
     isMoible,
+	downloadIamge,
 }

src/views/LibraryPage.vue

@@ -95,6 +95,7 @@
 												v-model:value="value"
 												style="width: 60%"
 												multiple
+												@change="setLabel1"
 												max-tag-count="responsive"
 												:options="options"
 												placeholder="Please select"
@@ -1010,9 +1011,20 @@ export default defineComponent({
 					divMax.appendChild(button1)
 					divMax.appendChild(button2)
 					cascaderChild?.insertAdjacentElement("afterbegin", divMax);
+					
+					// cascader.addEventListener('click',this.cascaderClick)
 				}
 			})
 		},
+		// cascaderClick(e:Event){
+		// 	console.log(e.target)
+		// },
+		setLabel1(value:any,selectedOptions:any){
+			console.log(value,selectedOptions);
+			let myCascader:any = this.$refs.cascader
+			console.log(myCascader);
+			
+		},
 		setClick(){
 			this.labelOpen = false
 			document.removeEventListener('click',this.setClick)

vue.config.js

@@ -38,6 +38,7 @@ module.exports = defineConfig({
 			}
 		}
     },
+	// https:true,
   },
   pluginOptions: {
     "style-resources-loader": {