From 22800929560e600c6cf67d7f30e04d86a0630e16 Mon Sep 17 00:00:00 2001 From: X1627315083 Date: Mon, 30 Oct 2023 10:03:49 +0800 Subject: [PATCH] 2023-10-30-1 --- src/component/Detail/DesignDetail.vue | 5 +- src/component/Detail/habit.vue | 5 +- src/component/HomePage/ColorboardUpload.vue | 53 ++----- src/component/LibraryPage/ModelPlacement.vue | 156 ++++++++++++++----- src/views/HistoryPage.vue | 2 - src/views/HomeView.vue | 31 +++- src/views/LibraryPage.vue | 2 - 7 files changed, 160 insertions(+), 94 deletions(-) diff --git a/src/component/Detail/DesignDetail.vue b/src/component/Detail/DesignDetail.vue index 98f12212..26b724f3 100644 --- a/src/component/Detail/DesignDetail.vue +++ b/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 diff --git a/src/component/Detail/habit.vue b/src/component/Detail/habit.vue index 3c9f9b2b..94938354 100644 --- a/src/component/Detail/habit.vue +++ b/src/component/Detail/habit.vue @@ -123,7 +123,7 @@ > System - +
+
+ Clear +
@@ -45,16 +48,11 @@
{{getSelectRGB(selectColor).b}}
- - -
@@ -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; diff --git a/src/component/LibraryPage/ModelPlacement.vue b/src/component/LibraryPage/ModelPlacement.vue index ebf75548..cf33cb9c 100644 --- a/src/component/LibraryPage/ModelPlacement.vue +++ b/src/component/LibraryPage/ModelPlacement.vue @@ -43,16 +43,6 @@ Library
-
-
- - Female -
-
- - Male -
-
@@ -76,6 +66,9 @@
+
+ Point +
@@ -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{ diff --git a/src/views/HistoryPage.vue b/src/views/HistoryPage.vue index 13717434..e2828dab 100644 --- a/src/views/HistoryPage.vue +++ b/src/views/HistoryPage.vue @@ -230,8 +230,6 @@ export default defineComponent({ overflow: hidden; min-width: 1024px; position: relative; - left: 50%; - transform: translateX(-50%); .page_content { position: relative; diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 2976cde5..fd8d9f54 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -141,7 +141,7 @@ @dragover.prevent @drop="dragDrop($event, index)">
-