From 785bb8b70ea320214ac7617bd21bac8ad95c4ec8 Mon Sep 17 00:00:00 2001 From: X1627315083 <1627315083@qq.com> Date: Thu, 23 May 2024 13:25:19 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4layout=E9=80=9F=E5=BA=A6?= =?UTF-8?q?=E6=85=A2=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/Detail/habit.vue | 18 +++-- src/component/HomePage/MoodboardUpload.vue | 56 ++++++------- src/component/HomePage/SketchboardUpload.vue | 1 + src/component/HomePage/layout.vue | 37 +++++---- src/component/HomePage/layoutMobile.vue | 83 ++++++++++---------- src/tool/domTurnImg.js | 81 ++++++++++--------- 6 files changed, 148 insertions(+), 128 deletions(-) diff --git a/src/component/Detail/habit.vue b/src/component/Detail/habit.vue index 0cc378d1..15e9dc5e 100644 --- a/src/component/Detail/habit.vue +++ b/src/component/Detail/habit.vue @@ -89,18 +89,19 @@
- {{ $t('Habit.System') }}(100%) + {{ $t('Habit.System') }}({{systemDesigner.system}}%)
- {{ $t('Habit.Designer') }}(100%) + {{ $t('Habit.Designer') }}({{systemDesigner.designer}}%)
@@ -191,6 +192,10 @@ export default defineComponent({ mannequinType:'', mannequinId:'', }) + let systemDesigner:any = ref({ + system:0, + designer:0, + }) let mannequins:any = ref([{},{}]) let systemSeleves= ref(false); let total= ref(0); @@ -228,6 +233,7 @@ export default defineComponent({ return{ systemSeleves, mannequins, + systemDesigner, openType, total, driver__, @@ -624,10 +630,12 @@ export default defineComponent({ } }, //设置系统设计占比 - systemDesigner(num: number) { + setSystemDesigner(num: number) { this.workspaceItem.systemDesignerPercentage = num }, formatter(value: number) { + this.systemDesigner.system = 100 - value + this.systemDesigner.designer = value let num = Math.abs((value-50)*2) return `${num}%`; }, @@ -908,7 +916,7 @@ export default defineComponent({ } .habit_System_Designer { - margin-top: calc(8rem*1.2); + // margin-top: calc(8rem*1.2); :deep(.ant-slider-track), :deep(.ant-slider-rail) { diff --git a/src/component/HomePage/MoodboardUpload.vue b/src/component/HomePage/MoodboardUpload.vue index b4a57975..9c3af979 100644 --- a/src/component/HomePage/MoodboardUpload.vue +++ b/src/component/HomePage/MoodboardUpload.vue @@ -443,8 +443,9 @@ export default defineComponent({ } }, - layout(){ - + async layout(){ + if(this.loadingShow)return + this.loadingShow = true this.store.commit("setDisposeMoodboard", []); let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard)) this.layoutList = arr @@ -457,51 +458,52 @@ export default defineComponent({ } if(this.moodb_[arr.length-1].length != 1){ if(JSON.stringify(this.moodb_className) == JSON.stringify(this.moodb_[arr.length-1][random])){ + this.loadingShow = false this.layout() return } } - if(this.loadingShow){ - return - } - this.loadingShow = true this.edieShow = true if(this.moodb_[arr.length-1].length == 2){ this.moodb_className = this.moodb_[arr.length-1][0] }else{ this.moodb_className = this.moodb_[arr.length-1][random] } + this.layoutOpen = true //提交模板 // this.loadingShow = true this.layoutList.forEach((v:any)=>{ v.setPitch = false }) - nextTick().then(async ()=>{ + nextTick().then(()=>{ let layoutCentent = document.getElementById('modal_img') - let file = await domTurnImg(layoutCentent) - let param = new FormData(); - param.append('inPin','0') - param.append('level1Type','Moodboard') - param.append('gender','') - param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone) - param.append('file',file); - let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }} - Https.axiosPost(Https.httpUrls.elementUpload,param,config) - .then((rv: any) => { - let img:any = rv - img.imgUrl = rv.url - img.resData = JSON.parse(JSON.stringify(img)) - this.store.commit("setDisposeMoodboard", img); + domTurnImg(layoutCentent).then((rv)=>{ + let file = rv + let param = new FormData(); + param.append('inPin','0') + param.append('level1Type','Moodboard') + param.append('gender','') + param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone) + param.append('file',file); + let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }} + Https.axiosPost(Https.httpUrls.elementUpload,param,config) + .then((rv: any) => { + let img:any = rv + img.imgUrl = rv.url + img.resData = JSON.parse(JSON.stringify(img)) + this.store.commit("setDisposeMoodboard", img); + this.loadingShow = false + } + ).catch(rv=>{ this.loadingShow = false + }) + if(this.driver__.driver){ + driverObj__.moveNext() } - ).catch(rv=>{ - this.loadingShow = false }) - if(this.driver__.driver){ - driverObj__.moveNext() - } - }) + + }) }, setmoodbClass(val:any){ this.moodb_className = val diff --git a/src/component/HomePage/SketchboardUpload.vue b/src/component/HomePage/SketchboardUpload.vue index a25a3ab3..ae5100e6 100644 --- a/src/component/HomePage/SketchboardUpload.vue +++ b/src/component/HomePage/SketchboardUpload.vue @@ -1107,6 +1107,7 @@ export default defineComponent({ cursor: pointer; &:hover .delete_like_file_block{ display: block; + opacity: 1; } img{ object-fit: cover; diff --git a/src/component/HomePage/layout.vue b/src/component/HomePage/layout.vue index e7ea718a..f9ebdb2b 100644 --- a/src/component/HomePage/layout.vue +++ b/src/component/HomePage/layout.vue @@ -610,25 +610,28 @@ export default defineComponent({ }) nextTick().then(async ()=>{ let layoutCentent = document.getElementById('layoutCentent') - let file = await domTurnImg(layoutCentent) - let param = new FormData(); - param.append('inPin','0') - param.append('gender','') - param.append('level1Type','Moodboard') - param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone) - param.append('file',file); - let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }} - Https.axiosPost(Https.httpUrls.elementUpload,param,config) - .then((rv: any) => { - // console.log(rv); - rv.imgUrl = rv.url - this.layout = false + domTurnImg(layoutCentent).then((rv)=>{ + let file =rv + let param = new FormData(); + param.append('inPin','0') + param.append('gender','') + param.append('level1Type','Moodboard') + param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone) + param.append('file',file); + let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }} + Https.axiosPost(Https.httpUrls.elementUpload,param,config) + .then((rv: any) => { + // console.log(rv); + rv.imgUrl = rv.url + this.layout = false + this.loadingShow = false + this.store.commit("setDisposeMoodboard", rv); + } + ).catch(rv=>{ this.loadingShow = false - this.store.commit("setDisposeMoodboard", rv); - } - ).catch(rv=>{ - this.loadingShow = false + }) }) + }) }, diff --git a/src/component/HomePage/layoutMobile.vue b/src/component/HomePage/layoutMobile.vue index bc23fe20..b1498662 100644 --- a/src/component/HomePage/layoutMobile.vue +++ b/src/component/HomePage/layoutMobile.vue @@ -180,6 +180,28 @@ export default defineComponent({ this.uploadUrl = getUploadUrl(); }, directives:{ + modelImg:{ + mounted(el) { + let parentNode = el.parentNode + if(parentNode.offsetHeight > parentNode.offsetWidth){ + el.style.height = 100+'%' + el.style.width = 'auto' + }else{ + el.style.width = 100+'%' + el.style.height = 'auto' + } + }, + updated (el) { + let parentNode = el.parentNode + if(parentNode.offsetHeight > parentNode.offsetWidth){ + el.style.height = 100+'%' + el.style.width = 'auto' + }else{ + el.style.width = 100+'%' + el.style.height = 'auto' + } + } + }, //操作移动 layout:{ mounted (el,layout:any,binding) { @@ -541,28 +563,6 @@ export default defineComponent({ }) }, }, - modelImg:{ - // mounted(el) { - // let parentNode = el.parentNode - // if(parentNode.offsetHeight > parentNode.offsetWidth){ - // el.style.height = 100+'%' - // el.style.width = 'auto' - // }else{ - // el.style.width = 100+'%' - // el.style.height = 'auto' - // } - // }, - // updated (el) { - // let parentNode = el.parentNode - // if(parentNode.offsetHeight > parentNode.offsetWidth){ - // el.style.height = 100+'%' - // el.style.width = 'auto' - // }else{ - // el.style.width = 100+'%' - // el.style.height = 'auto' - // } - // } - } }, methods: { init(){ @@ -641,27 +641,28 @@ export default defineComponent({ }) nextTick().then(async ()=>{ let layoutCentent = document.getElementById('layoutCentent') - let file = await domTurnImg(layoutCentent) - let param = new FormData(); - param.append('inPin','0') - param.append('gender','') - param.append('level1Type','Moodboard') - param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone) - param.append('file',file); - let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }} - Https.axiosPost(Https.httpUrls.elementUpload,param,config) - .then((rv: any) => { - // console.log(rv); - rv.imgUrl = rv.url - this.layout = false + domTurnImg(layoutCentent).then((rv)=>{ + let file = rv + let param = new FormData(); + param.append('inPin','0') + param.append('gender','') + param.append('level1Type','Moodboard') + param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone) + param.append('file',file); + let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }} + Https.axiosPost(Https.httpUrls.elementUpload,param,config) + .then((rv: any) => { + // console.log(rv); + rv.imgUrl = rv.url + this.layout = false + this.loadingShow = false + this.store.commit("setDisposeMoodboard", rv); + } + ).catch(rv=>{ this.loadingShow = false - this.store.commit("setDisposeMoodboard", rv); - } - ).catch(rv=>{ - this.loadingShow = false + }) }) }) - }, beforeUpload(){ @@ -900,6 +901,8 @@ export default defineComponent({ // object-fit: cover; // width: 100%; // height: 100%; + height: 100%; + width: auto; pointer-events: none; float: left; user-select:none; diff --git a/src/tool/domTurnImg.js b/src/tool/domTurnImg.js index 018967a3..a392f7e9 100644 --- a/src/tool/domTurnImg.js +++ b/src/tool/domTurnImg.js @@ -1,45 +1,48 @@ import html2canvas from "html2canvas"; const getJpeg = dom =>{ - return new Promise(resolve =>{ - html2canvas(dom,{useCORS: true,}).then(canvas =>{ - let base64 = canvas.toDataURL('image/jpeg',.9); - let quality = 0.9 // 压缩系数0-1之间 - let newImage = new Image() - newImage.src = base64 - newImage.setAttribute('crossOrigin', 'Anonymous') // url为外域时需要 - let imgWidth, - imgHeight - let w = undefined - newImage.onload = function () { - w = this.width * 1 - imgWidth = this.width - imgHeight = this.height - let canvas = document.createElement('canvas') - let ctx = canvas.getContext('2d') - if (Math.max(imgWidth, imgHeight) > w) { - if (imgWidth > imgHeight) { - canvas.width = w - canvas.height = w * (imgHeight / imgWidth) - } else { - canvas.height = w - canvas.width = w * (imgWidth / imgHeight) - } - } else { - canvas.width = imgWidth - canvas.height = imgHeight - quality = 0.6 - } - ctx.clearRect(0, 0, canvas.width, canvas.height) - ctx.drawImage(this, 0, 0, canvas.width, canvas.height) // // 这里面的 this 指向 newImage - let smallBase64 = canvas.toDataURL('image/jpeg', quality) // 压缩语句 - let fileData = dataURLtoFile(smallBase64); - let fileOfBlob = new File([fileData], new Date() + ".jpg"); // 命名图片名 - // console.log(smallBase64); - // resolve(base64ToFile(fileOfBlob)) - resolve(fileOfBlob) - } + return new Promise(resolve =>{ + setTimeout(() => { + html2canvas(dom,{useCORS: true,}).then(canvas =>{ + let base64 = canvas.toDataURL('image/jpeg',.9); + // let quality = 0.9 // 压缩系数0-1之间 + let newImage = new Image() + newImage.src = base64 + newImage.setAttribute('crossOrigin', 'Anonymous') // url为外域时需要 + // let imgWidth, + // imgHeight + // let w = undefined + newImage.onload = function () { + // w = this.width * 1 + // imgWidth = this.width + // imgHeight = this.height + // let canvas = document.createElement('canvas') + // let ctx = canvas.getContext('2d') + // if (Math.max(imgWidth, imgHeight) > w) { + // if (imgWidth > imgHeight) { + // canvas.width = w + // canvas.height = w * (imgHeight / imgWidth) + // } else { + // canvas.height = w + // canvas.width = w * (imgWidth / imgHeight) + // } + // } else { + // canvas.width = imgWidth + // canvas.height = imgHeight + // quality = 0.6 + // } + // ctx.clearRect(0, 0, canvas.width, canvas.height) + // ctx.drawImage(this, 0, 0, canvas.width, canvas.height) // // 这里面的 this 指向 newImage + // let smallBase64 = canvas.toDataURL('image/jpeg', quality) // 压缩语句 + let fileData = dataURLtoFile(base64); + let fileOfBlob = new File([fileData], new Date() + ".jpg"); // 命名图片名 + // console.log(smallBase64); + // resolve(base64ToFile(fileOfBlob)) + resolve(fileOfBlob) + } + }) + }, 100); }) - }) + } //base64转成blob function dataURLtoFile(dataURI, type) {