选择颜色调整两种方式

src/component/Detail/habitSetStyle.vue

@@ -30,12 +30,12 @@
 			</div>
 		</div>
 		<div class="habitSetStyle_ok">
-			<div class="started_btn" @click="setOk()">
-				OK
-			</div>
 			<div class="started_btn" @click="setClear()">
 				{{ $t('Habit.Clear') }}
 			</div>
+			<div class="started_btn" @click="setOk()">
+				OK
+			</div>
 		</div>
 		
 	</div>

src/component/HomePage/ColorboardUpload.vue

@@ -84,7 +84,6 @@
                         <div class="clear_button" @click="clearCurrentColor()">Clear</div>
                     </div> -->
                 </div>
-
                 <div class="right_content_line right_content_line_upload">
                     <div class="upload_right_header">
 						<i class="color_edit fi fi-bs-comments" ></i>
@@ -92,7 +91,9 @@
                     </div>
 					<div class="upload_centetn">
 						<div class="upload_item Guide_1_10">
-							<div class="upload_file_item" v-for="(file) in fileList" :key="file">
+							<div class="upload_file_item upload_file_item_show">
+								<i v-show="fileList.length == 0" class="fi fi-rr-square-plus"></i>
+								<div v-show="fileList.length > 0" class="upload_file_item upload_file_item_upload" v-for="(file) in fileList" :key="file">
 									<div class="upload_file_item_content" v-show="file.status !== 'done'">
 										<a-spin  :indicator="indicator" tip="Uploading..."/>
 									</div>
@@ -101,9 +102,10 @@
 										<div class="delete_file_block" @click="deleteFile(index)">Delete</div>
 									</div>
 								</div>
+								<div class="upload_file_item_scale">
 									<a-upload
 										:capture="null"
-								v-show="fileList.length < 1"
+										:max-count="1"
 										list-type="picture-card"
 										:customRequest="function(){}"
 										@change="fileUploadChange"
@@ -111,9 +113,14 @@
 										accept=".jpg,.png,.jpeg,.bmp"
 										>
 										<div  class="upload_tip_block">
-									<i class="fi fi-rr-picture"></i>
+											<i class="fi fi-br-upload"></i>
 										</div>
 									</a-upload>
+									<div class="upload_file_item" @click="setPrintImg()">
+										<i class="fi fi-rr-picture"></i>
+									</div>
+								</div>
+							</div>
 						</div>
 						<div class="upload_color">
 							<div v-for="color,index in selectColorList" :key="color" @click="setUplpadColor(color)" class="upload_color_item" :class="[ index == 0?'Guide_1_11':'',index == 1?'Guide_1_11_2':'']">
@@ -144,6 +151,7 @@
 				</div>
             </div>
         </div>
+		<selectImgList ref="selectImgList" @setImgGetColor="setImgGetColor"></selectImgList>
     </div>
 </template>
 <script>
@@ -158,12 +166,14 @@ import {useStore} from 'vuex'
 import ColorThief from '@/tool/colorthief/colorthief'
 import { message,Upload} from 'ant-design-vue';
 import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
+import selectImgList from "@/component/HomePage/selectImgList.vue";
 import { useI18n } from 'vue-i18n';
 export default defineComponent({
     components:{
         Chrome,
         Slider,
 		Sketch,
+		selectImgList,
     },
     setup(){
 		// console.log(isMoible());
@@ -436,11 +446,16 @@ export default defineComponent({
                 }
                 file.imgUrl = data_new
                 file.status = 'done'
-                this.fileList.push(file)
+                this.fileList[0] = file
-                setTimeout(async ()=>{
+                this.getImgColor()
+            };
+            // 转化为base64S
+            reader.readAsDataURL(fileData)
+        },
+		getImgColor(){
+			setTimeout(()=>{
 				const img = new Image();
 				let colorImage = this.$refs.colorImage
-					img.src = colorImage[0].src;
 				const colorThief = new ColorThief();
 				img.onload = async () => {
 					let domImg = colorImage[0];
@@ -453,7 +468,7 @@ export default defineComponent({
 						min: 5,
 					}
 					let colorSort
-						await GO.setColor(selectColor,file.imgUrl,obj).then(
+					await GO.setColor(selectColor,this.fileList[0].imgUrl,obj).then(
 						(rv) => {
 							if(rv){
 								colorSort = rv.ratio
@@ -505,11 +520,8 @@ export default defineComponent({
 					})
 					img.remove()
 				};
-                   
+				img.src = colorImage[0].src;
 			},100)
-            };
-            // 转化为base64S
-            reader.readAsDataURL(fileData)
 		},
 		rgbaToHex(rgba) { // rgba转16进制
             let hex = '#';
@@ -759,6 +771,39 @@ export default defineComponent({
 			let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
 			this.setColorboardList(colorList)
 		},
+		setPrintImg(){
+			let printImgListData = JSON.parse(JSON.stringify(this.store?.state?.UploadFilesModule.printboard))
+			let moodImgListData = JSON.parse(JSON.stringify(this.store?.state?.UploadFilesModule.moodboard))
+			let imgListData = [...moodImgListData,...printImgListData]
+			console.log(imgListData.length);
+			if(imgListData?.length==0){
+				message.info(this.t('ColorboardUpload.jsContent6'))
+				return 
+			}
+			let selectImgList = this.$refs.selectImgList;
+			// selectImgList.selectImgListMask = true
+			// selectImgList.styleList = this.styleList
+			selectImgList.init(imgListData);
+		},
+		setImgGetColor(data){
+			data.status = 'await'
+			this.fileList[0] = data
+			fetch(data.imgUrl)
+			.then(response => response.blob())
+				.then(blob => {
+					const reader = new FileReader();
+					reader.readAsDataURL(blob);
+					reader.onloadend = () => {
+						this.fileList[0].status = 'done'
+						const base64data = reader.result;
+						this.fileList[0].imgUrl = base64data
+						nextTick(()=>{
+							this.getImgColor()
+						})
+					};
+			})
+			
+		}
     }
 })
 </script>
@@ -849,23 +894,55 @@ export default defineComponent({
 				padding-right: calc(3rem*1.2);
 				margin-right: 2.4rem;
 				.upload_centetn{
-					overflow-x: hidden;
+					// overflow-x: hidden;
 					height: calc(100% - 4.4rem*1.2);
 					padding-bottom: 4rem;
+
+				}
+				.upload_item{
+					position: relative;
 				}
 				.upload_centetn::-webkit-scrollbar {
 					display: none;
 				}
+				.upload_file_item_show{
+					position: relative;
+				}
+				.upload_file_item_scale{
+					position: absolute;
+					width: 28rem;
+					height: 14rem;
+					z-index: 2;
+					top: 100%;
+					left: 50%;
+					display: none;
+					transform: translateX(-50%);
+					border-radius: 4px;
+					box-shadow: 0 0px 4px 0px rgba(0, 0, 0, 0.3);
+					overflow: hidden;
+					background: #fff;
+				}
+				.upload_file_item_show:hover{
+					border-bottom: none;
+					.upload_file_item_scale{
+						display: flex;
+					}
+				} 
+				.fi-rr-square-plus,.fi-rr-picture{
+					zoom: 4;
+				}
                 .upload_file_item{
                     // margin: 0 2rem 2rem 0;
 					margin: 0;
-                    display: inline-block;
                     // width: 16.5rem;
                     // height: 16.5rem;
 					width: calc(12rem*1.2);
 					height: calc(12rem*1.2);
                     border: 1px solid #F5F5F5;
                     vertical-align: top;
+					display: flex;
+					align-items: center;
+					justify-content: center;
 					
                      .upload_file_item_content{
                         display: flex;
@@ -911,6 +988,11 @@ export default defineComponent({
 					width: calc(12rem*1.2);
 					flex-wrap: wrap;
 					justify-content: space-between;
+					height: 25rem;
+					overflow-y: auto;
+					&.upload_color::-webkit-scrollbar {
+						display: none;
+					}
 					.upload_color_item{
 						width: calc(5rem*1.2);
 						height: calc(5rem*1.2);

src/component/HomePage/selectImgList.vue

@@ -0,0 +1,182 @@
+<template>
+	<a-modal
+		class="selectImgList_modal generalModel"
+		v-model:visible="selectImgList"
+		:footer="null"
+		width="50%"
+		:maskClosable="false"
+		:centered="true"
+		:closable="false"
+		:mask="selectImgListMask"
+		:keyboard="false"
+		:destroyOnClose="true"
+		:zIndex="1050"
+	>
+	<div class="generalModel_btn">
+		<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+			<i class="fi fi-rr-cross-small"></i>
+		</div>
+	</div>
+	<div class="selectImgList_content">
+		<div class="modal_title_text">
+			<div>{{ $t('selectImgList.SelectImg') }}</div>
+			<div class="modal_title_text_intro"></div>
+		</div>
+		<div class="selectImgList_content_bottom">
+			<div class="content_bottom_item" v-for="item in imgList" @click="setItemSelect(item)">
+				<img :src="item.imgUrl" alt="" :class="{active:item.isChecked}">
+			</div>
+		</div>
+		<div class="selectImgList_ok">
+			<div class="started_btn" @click="setClear()">
+				{{ $t('selectImgList.Clear') }}
+			</div>
+			<div class="started_btn" @click="setOk()">
+				OK
+			</div>
+		</div>
+		
+	</div>
+	<div class="mark_loading" v-show="isShowMark">
+		<a-spin size="large" />
+	</div>
+</a-modal>
+</template>
+
+<script lang="ts">
+import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
+// import { getCookie } from "@/tool/cookie";
+import { message,Modal } from "ant-design-vue";
+import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
+
+import { Https } from "@/tool/https";
+import { getCookie,setCookie } from "@/tool/cookie";
+// import domTurnImg from '@/tool/domTurnImg'
+import { downloadIamge } from "@/tool/util";
+import { useI18n } from "vue-i18n";
+export default defineComponent({
+emits:['setImgGetColor'],
+
+setup(props,{emit}) {
+	let selectImgList: any = ref(false);//弹窗
+	let selectImgListMask:any = ref(false)//弹窗遮罩
+	let oldDataId = ''
+	let selectImgListData:any = reactive({
+		imgList:[],
+		selectStyle:{
+			name:'',
+			id:'',
+		},
+		selectStyleName:'',
+		isShowMark:false,
+	})
+	const {t} = useI18n()
+	let init = (data:any)=>{
+		selectImgList.value = true
+		selectImgListData.imgList = data
+		// selectImgListData.selectStyleId = 'feng2'
+	}
+	let cleardata = ()=>{
+		selectImgList.value = false
+		selectImgListData.isShowMark = false
+		// setParentData()
+	
+	}
+	let cancelDsign = ()=>{
+		cleardata()
+	}
+	let setOk= ()=>{
+		let data = selectImgListData.imgList.filter((item:any)=>item.isChecked);
+		if(data.legnth > 0){
+			emit('setImgGetColor',data[0])
+		}
+		cleardata()
+	}
+	let setClear = ()=>{
+		selectImgListData.selectStyle.id = ''
+		selectImgListData.selectStyle.name = ''
+		selectImgListData.selectStyle.value = ''
+	}
+	let setItemSelect = (item:any)=>{
+		selectImgListData.imgList.forEach((item:any) => {
+			item.isChecked = false
+		});
+		item.isChecked = true
+	}
+	return {
+		selectImgList,
+		selectImgListMask,
+		...toRefs(selectImgListData),
+		init,
+		cancelDsign,
+		setItemSelect,
+		setOk,
+		setClear,
+	};
+},
+data() {
+	return {
+		// moodTemplateId: "", //模板id
+		
+	};
+},
+mounted() {
+	
+},
+methods: {
+},
+});
+</script>
+
+<style lang="less">
+.selectImgList_modal {
+	&.generalModel{
+		.ant-modal-body {
+			height: calc(55rem*1.2);
+		}
+	}
+	
+	.selectImgList_content{
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		.selectImgList_content_bottom{
+			--border-color: #c4c4c4;
+			display: flex;
+			flex: 1;
+			flex-wrap: wrap;
+			align-content: flex-start;
+			overflow-y: auto;
+			.content_bottom_item{
+				img{
+					width: 16rem;
+					height: 16rem;
+					object-fit: contain;
+					margin: 2rem;
+					cursor: pointer;
+				}
+			}
+			.content_bottom_item:nth-child(4n){
+				margin-right: 0rem;
+			}
+			
+			.content_bottom_item .active{
+				opacity: .5;
+				transform: scale(.8);
+			}
+		}
+		.selectImgList_ok{
+			width: 60%;
+			text-align: center;
+			margin: 0 auto;
+			padding-top: 1rem;
+			display: flex;
+			justify-content: space-around;
+			>div{
+				width: 40%;
+			}
+		}
+	}
+	
+}
+</style>

src/component/LibraryPage/ModelPlacement.vue

@@ -730,6 +730,7 @@ export default defineComponent({
                 models = {
                     libraryId:this.printObject.relationId || null,
                     templateId:this.printObject.templateId || null,
+					sex:this.sex,
                     timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
                     ...await this.getPrintLocation()
                 }

src/component/LibraryPage/ModelPlacementMobile.vue

@@ -718,6 +718,7 @@ export default defineComponent({
                     libraryId:this.printObject.relationId || null,
                     templateId:this.printObject.templateId || null,
                     timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+					sex:this.sex,
                     ...this.getPrintLocation()
                 }
 				let cropper:any = this.$refs.cropper
@@ -730,7 +731,7 @@ export default defineComponent({
 				if(this.isShowMark){
 					return
 				}
-				this.isShowMark = true
+				// this.isShowMark = true
 				Https.axiosPost(Https.httpUrls.libraryModelsDot, formData,{headers:{'Content-Type': 'multipart/form-data'}}).then(
 					(rv: any) => {
 						this.perviewUrl = rv

src/component/LibraryPage/ModelPlacementUpdata.vue

@@ -1,6 +1,6 @@
 <template>
     <div  v-show="placementShow">
-        <a-modal class="models_placement_component" 
+        <a-modal class="models_placement_component1" 
             v-model:visible="placementShow" 
             :footer="null" 
             width="111.5rem"
@@ -531,7 +531,7 @@ export default defineComponent({
 })
 </script>
 <style lang="less">
-.models_placement_component{
+.models_placement_component1{
 
     .ant-modal-close{
         width: 3.6rem;
@@ -782,6 +782,8 @@ export default defineComponent({
                     -ms-overflow-style: none;
                     overflow: -moz-scrollbars-none;
                     position: relative;
+					width: 100%;
+					height: auto;
 
                     &::-webkit-scrollbar { width: 0 !important }
                 }

src/lang/cn.ts

@@ -322,6 +322,11 @@ export default {
 		jsContent3:"您只能上传图片文件！",
 		jsContent4:'图片必须小于5MB',
 		jsContent5:"请输入正确的TCX值",
+		jsContent6:"请至少选择一个情绪版或者印花",
+	},
+	selectImgList:{
+		SelectImg:'选择图片',
+		Clear:'关闭',
 	},
 	MoodboardUpload:{
 		Upload:'上传',

src/lang/en.ts

@@ -322,6 +322,11 @@ export default {
 		jsContent3:"You can only upload Image file!",
 		jsContent4:'Image must smaller than 5MB!',
 		jsContent5:"Please enter the correct TCX value",
+		jsContent6:"Please select at least one mood plate or print",
+	},
+	selectImgList:{
+		SelectImg:' Select Image',
+		Clear:'Close',
 	},
 	MoodboardUpload:{
 		Upload:'Upload',

src/views/HomeMain.vue

@@ -19,7 +19,6 @@
                    
                 </div>
 				<div
-					v-if="isTest"
 					class="trialApproval button_second credits hideChecked"
                 >
 					{{$t('Header.Credits')}}:&nbsp;

src/views/HomeView/HomeView.vue

@@ -533,7 +533,7 @@ export default defineComponent({
 				
 				this.workspacePosition.forEach((positionItem:any) => {
 
-					if(positionItem.value == sketchItem.category){
+					if(positionItem.value == sketchItem.categoryValue){
 						num ++ 
 						// console.log(num,this.allBoardData?.sketchboardFiles.length);
 					}
@@ -815,7 +815,7 @@ export default defineComponent({
 				let data: any = {
 					id: v.resData.id,
 					designType: v.resData.designType,
-					level2Type: v.category,
+					level2Type: v.categoryValue,
 					isPin: v.pin ? 1 : 0,
 				};
 				return data;
@@ -828,7 +828,7 @@ export default defineComponent({
 				let data = {
 					designType: v.resData.designType,
 					isPin: v.pin ? 1 : 0,
-					level2Type: v.category,
+					level2Type: v.categoryValue,
 					sketchBoardId: v.resData.id,
 				};
 				return data;
@@ -1034,12 +1034,13 @@ export default defineComponent({
 				};
 				if (v.level1Type === "Sketchboard") {
 					newData.pin = v.isPin;
-					newData.category = v.level2Type;
+					newData.categoryValue = v.level2Type;
 					newData.level2Type = v.level2Type;
 				}
 				if (v.level1Type === "Printboard") {
 					newData.pin = v.isPin;
 					newData.level2Type = v.level2Type;
+					newData.categoryValue = v.level2Type;
 				}
 				return newData;
 			});

src/views/HomeView/Works.vue

@@ -131,6 +131,7 @@ export default defineComponent({
 			}
 			filter.getListDate.page = 0
 			fall.value.clearData()
+			filter.isNoData = false
 			// getPorfolio()
 		}
 		let likeFile = (item:any,type:string) => {

src/views/HomeView/library.vue

@@ -1340,7 +1340,7 @@ export default defineComponent({
 								clearInterval(this.remGenerateTime[str])
 								this.remGenerate[str] = false
 								this.isGenerate[str] = false
-								this.generateLevel2 = ''
+								this.generateLevel2[str] = ''
 							}
 						}
 					}