2023-10-30-1

src/component/Detail/DesignDetail.vue

@@ -373,7 +373,9 @@ export default defineComponent({
 						body = item
 					}
 				});
-				let ratio:any = await this.setPostition(body.layersObject[0]?.imageUrl)
+				console.log(body?.layersObject?.[0]?.imageUrl);
+				
+				let ratio:any = await this?.setPostition(body?.layersObject?.[0]?.imageUrl)
 				let frontIndex = 6
 				let backIndex = 3
 				designItemDetail.clothes.forEach((v:any,index:any)=>{
@@ -411,7 +413,6 @@ export default defineComponent({
 				back:back,
 				body:body,
 			}
-			
 		},
 		setDesignCoverage(str:string){
 			let {design,index,collectionList} = this.parentData

src/component/Detail/habit.vue

@@ -123,7 +123,7 @@
 						>
 							System
 						</div>
-						<a-switch v-model:checked="systemSeleves" />
+						<a-switch :disabled="mannequins?.[0]==null?true:false" v-model:checked="systemSeleves" />
 						<div
 							class="habit_System_Seleves_text"
 							:class="{ active: systemSeleves }"
@@ -390,6 +390,9 @@ export default defineComponent({
 						rv[1] = a
 					}
 					this.mannequins = rv
+					if(this.mannequins?.[0]==null){
+						this.systemSeleves = false
+					}
 				}
 			})
 			

src/component/HomePage/ColorboardUpload.vue

@@ -9,6 +9,9 @@
 					<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`}">
 					</div>
 				</div>
+				<div>
+					<span class="started_btn" @click="clearCurrentColor">Clear</span>
+				</div>
 			</div>
 		</div>
         <div class="colorboard_upload_right">
@@ -45,16 +48,11 @@
 									<div class="rgb_item">{{getSelectRGB(selectColor).b}}</div>
 								</div>
 							</div>
-							
 						</div>
                     </div>
-
                     <!-- <div class="color_review_block">
-                        <div class="color_review_content" :style="{background: reviewColor?.r || reviewColor?.r===0 ?`rgb(${reviewColor?.r},${reviewColor?.g},${reviewColor?.b})` : 'none'}"></div>
-                        <div class="pantong_name" v-show="pantongName">{{pantongName}}</div>
                         <div class="clear_button" @click="clearCurrentColor()">Clear</div>
                     </div> -->
-                   
                 </div>
 
                 <div class="right_content_line right_content_line_upload">
@@ -235,7 +233,7 @@ export default defineComponent({
         //选择不同的色块
         selectColorItem(index,color){
 			let hex
-			if(color.r){
+			if(color?.r){
 				hex = this.rgbaToHex([color.r,color.g,color.b,color.a?color.a:1])
 			}else{
 				hex = '#FFFFFF'
@@ -276,10 +274,10 @@ export default defineComponent({
         //清除当前的颜色
         clearCurrentColor(){
             this.selectColor = {}
-            this.fileList = []
+            // this.fileList = []
 			this.reviewColor={}
             this.pantongName = ''
-            this.pantongNameList = []
+            // this.pantongNameList = []
             this.tcxColor = ''
         },
 
@@ -485,17 +483,19 @@ export default defineComponent({
 			justify-content: space-between;
 		}
 		.modal_img{
-			width: 40rem;
+			width: 45rem;
+			// width: 40rem;
 			height: 5rem;
 			overflow-x: hidden;
 			display: flex;
+			align-items: center;
 			&.modal_img::-webkit-scrollbar {
 				display: none;
 			}
 			.modal_img_item{
 				width: 4rem;
 				height: 4rem;
-				margin: 0 1rem 1rem 0;
+				margin: 0 1rem 0 0;
 				position: relative;
 				cursor: pointer;
 				border: 0.1rem solid #DCDCEC;
@@ -553,39 +553,6 @@ export default defineComponent({
 				.upload_centetn::-webkit-scrollbar {
 					display: none;
 				}
-                .color_review_block{
-                    margin-right: 4rem;
-
-                    .color_review_content{
-                        width: 16.5rem;
-                        height: 16.5rem;
-                        background: #FFFFFF;
-                        border: 0.1rem solid #DCDCEC;
-                    }
-
-                    .pantong_name{
-                        margin-top: 1rem;
-                        font-size: 1.6rem;
-                        font-weight: 400;
-                        color: #030303;
-                        text-align: left;
-                        font-weight: bold;
-                    }
-
-                    .clear_button{
-                        padding:  0 2.8rem;
-                        height: 3.2rem;
-                        line-height: 3.2rem;
-                        background: #EFEEFF;
-                        font-size: 1.2rem;
-                        font-family: Roboto;
-                        color: #343579;
-                        display: inline-block;
-                        margin-top: 1rem;
-                        cursor: pointer;
-                    }
-                }
-
                 .upload_file_item{
                     // margin: 0 2rem 2rem 0;
 					margin: 0;

src/component/LibraryPage/ModelPlacement.vue

@@ -43,16 +43,6 @@
 							Library
 						</div>
 					</div>
-					<div style="display: flex;   align-items: center;">
-						<div style="display: flex;   align-items: center;">
-							<input type="checkbox" model="false" @click="()=>{sex = 'Female'}">
-							Female
-						</div>
-						<div style="display: flex;   align-items: center;">
-							<input type="checkbox" model="false" @click="()=>{sex = 'Male'}">
-							Male
-						</div>
-					</div>
 				</div>
                 <div class="models_placement_content">
                     <div class="plcaement_point_content">
@@ -76,6 +66,9 @@
                                 <div class="point_item" v-for="item in point.pointList" :key="item.color" :style="{borderColor:item.color,visibility:item.show?'inherit':'hidden'}" @mousedown="AddDian(item)"><div class="point_block" :style="{background:item.color}"></div></div>
                             </div>
                         </div>
+						<div class="placement_point_item placement_point_item_btn">
+							<span class="started_btn" @click="setPoint">Point</span>
+						</div>
                     </div>
 					
                     <div class="placement_content_operate_list">
@@ -207,11 +200,11 @@ export default defineComponent({
 				autoCropWidth: '0',  //默认生成截图框宽度
 				autoCropHeight: '0', //默认生成截图框高度
 				fixed: true,         //是否开启截图框宽高固定比例
-				fixedBox: false,      //固定截图框大小，不允许改变
+				fixedBox: true,      //固定截图框大小，不允许改变
 				fixedNumber: [1, 2.125], //截图框的宽高比例
 				full: false,         //false按原比例裁切图片，不失真
 				canMove: true,      //上传图片是否可以移动
-				canMoveBox: true,    //截图框能否拖动
+				canMoveBox: false,    //截图框能否拖动
 				original: false,     //上传图片按照原始比例渲染
 				centerBox: false,    //截图框是否被限制在图片里面
 				height: true,        //是否按照设备的dpr 输出等比例图片
@@ -231,15 +224,15 @@ export default defineComponent({
 	watch: {
 		sex:{
 			handler(newVal:any,oldVal:any){
-				let imgbox:any = this.$refs.imgbox
-				let imgBoxSizeBG = imgbox?.getElementsByClassName('cropper-view-box-BG')?.[0]
-				if(imgBoxSizeBG){
-					if(newVal == 'Male'){
-						imgBoxSizeBG.style.background = `url(./image/maleBG.png) no-repeat 0 0 / 100% 100%`
-					}else{
-						imgBoxSizeBG.style.background = `url(./image/femaleBG.png) no-repeat 0 0 / 100% 100%`
-					}
-				}
+				// let imgbox:any = this.$refs.imgbox
+				// let imgBoxSizeBG = imgbox?.getElementsByClassName('cropper-view-box-BG')?.[0]
+				// if(imgBoxSizeBG){
+				// 	if(newVal == 'Male'){
+				// 		imgBoxSizeBG.style.background = `url(./image/maleBG.png) no-repeat 0 0 / 100% 100%`
+				// 	}else{
+				// 		imgBoxSizeBG.style.background = `url(./image/femaleBG.png) no-repeat 0 0 / 100% 100%`
+				// 	}
+				// }
 
 			},
 		},
@@ -261,23 +254,38 @@ export default defineComponent({
 
 				let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
 				let imgBoxSizeBG = imgbox.getElementsByClassName('cropper-view-box')[0]
+				let divTop:any = document.createElement('div');
+				let divBottom:any = document.createElement('div');
+				let divCenter:any = document.createElement('div');
 				let div:any = document.createElement('div');
-				if(imgbox.getElementsByClassName('cropper-view-box-BG').length >= 1){
+				if(imgbox.getElementsByClassName('cropper-view-box-Bg').length >= 1){
 				}else{
-					div.classList.add('cropper-view-box-BG')
+					div.classList.add('cropper-view-box-Bg')
+					divTop.classList.add('cropper-view-box-Bg')
+					divBottom.classList.add('cropper-view-box-Bg')
+					divCenter.classList.add('cropper-view-box-Bg')
+					
+					div.classList.add('cropper-view-box-Mask')
+					divTop.classList.add('cropper-view-box-Top')
+					divBottom.classList.add('cropper-view-box-Bottom')
+					divCenter.classList.add('cropper-view-box-Center')
+
 					div.style.background = `url(./image/femaleBG.png) no-repeat 0 0 / 100% 100%`
-					div.style.width = '100%'
-					div.style.height = '100%'
-					div.style.position = `absolute`
-					div.style.top = `0`
-					imgBoxSizeBG.appendChild(div)
+					imgBoxSizeBG.appendChild(divTop)
+					// imgBoxSizeBG.appendChild(div)
+					imgBoxSizeBG.appendChild(divBottom)
+					imgBoxSizeBG.appendChild(divCenter)
 				}
 				// imgBoxSize.style.backgroundImage = 'url('+require('@assets/images/library/lemaleBG.png')')'
 
 				let cropper:any = this.$refs.cropper
+				console.log(cropper);
+				
 				cropper.cropH = cropper.scale*cropper.trueHeight
 				cropper.cropW = cropper.cropH/2.125
-				cropper.cropOffsertX = cropper.getImgAxis().x1
+				cropper.cropOffsertX = cropper.getImgAxis().x1+(cropper.scale*cropper.trueWidth/2-cropper.cropW/2)
+				console.log(cropper.getImgAxis().x1,cropper.scale*cropper.trueWidth/2,cropper.cropW/2);
+				
 				cropper.cropOffsertY = cropper.getImgAxis().y1
 				imgBoxSize.addEventListener('mousemove',this.startMove)
                 this.setImageSize()
@@ -347,12 +355,12 @@ export default defineComponent({
                     pointList:[{type:'handLeft',color:'#d88e8e',show:true,field:'hand'},{type:'handRight',color:'#d88e8e',show:true,field:'hand'}]
                 },
             ]
-            if(this.printObject.templateId){//编辑
+            if(this.printObject.shoulderLeft?.length >1){//编辑
+				console.log(this.printObject);
+				
                 this.isSubmit = true
-				this.option.canScale = false
-				this.option.fixedBox = true
-				this.option.canMove = false
-				this.option.canMoveBox = false
+				// this.option.canScale = false
+				// this.option.canMove = false
                 for(let ponit of this.pointList){
                     for(let pointItem of ponit.pointList){
                         if(this.printObject[pointItem.type]?.length){
@@ -371,20 +379,51 @@ export default defineComponent({
                 this.oldLocationList = JSON.parse(JSON.stringify(this.locationList))
             }else{
 				this.option.canScale = true
-				this.option.fixedBox = false
+				// this.option.fixedBox = false
 				this.option.canMove = true
-				this.option.canMoveBox = true
+				// this.option.canMoveBox = true
 			}
             
             this.oldPointList = JSON.parse(JSON.stringify(this.pointList))
         },
-
-
+		setPoint(){
+			console.log();
+			let printObject = JSON.parse(JSON.stringify(this.printObject))
+			this.printObject = {
+				"shoulderLeft": [
+					0.3338,
+					0.1858
+				],
+				"shoulderRight": [
+					0.6644,
+					0.1858
+				],
+				"waistbandLeft": [
+					0.3758,
+					0.364
+				],
+				"waistbandRight": [
+					0.6103,
+					0.364
+				],
+				"handLeft": [
+					0.3277,
+					0.4687
+				],
+				"handRight": [
+					0.6764,
+					0.4715
+				],
+				file:printObject.file,
+				url:printObject.url
+			}
+			this.getDefaultPointList(this.imgBox)
+		},
         AddDian(point:any){
             if(!point.show){
                 return
             }
-            this.startDian = true
+            this.startDian = true 
             this.isRemoveStatus = false
             this.intObj = point
         },
@@ -866,6 +905,13 @@ export default defineComponent({
                             }
                         }
                     }
+					&.placement_point_item_btn{
+						display: flex;
+						justify-content: center;
+						.started_btn{
+						}
+					}
+					
                 }
             }
 
@@ -947,6 +993,38 @@ export default defineComponent({
                     position: relative;
 
                     &::-webkit-scrollbar { width: 0 !important }
+					.cropper-view-box-Bg{
+						width: 100%;
+						position: absolute;
+					}
+					.cropper-view-box-Mask{
+						top: 0;
+						height: 100%;
+					}
+					.cropper-view-box-Top{
+						// border-top: 1px dashed;
+						/*虚线2 css*/
+						background: linear-gradient(to left,transparent 0%,transparent 50%,#646464 50%,#646464 100%);background-size: 10px 1px;background-repeat: repeat-x;
+						height: 1rem;
+						opacity: .4;
+						top: 6%;
+					}
+					.cropper-view-box-Bottom{
+						bottom: 6%;
+						// border-top: 1px dashed;
+						height: 1rem;
+						opacity: .4;
+						background: linear-gradient(to left,transparent 0%,transparent 50%,#646464 50%,#646464 100%);background-size: 10px 1px;background-repeat: repeat-x;
+					}
+					.cropper-view-box-Center{
+						// border-left: 1px dashed;
+						left: 50%;
+						opacity: .4;
+						background: linear-gradient(to bottom,transparent 0%,transparent 50%,#646464 50%,#646464 100%);background-size: 1px 10px;background-repeat: repeat-y;
+						top: 0;
+						width: 1rem;
+						height: 100%;
+					}
                 }
 
                 .perview_mark_loading{