From 026e71c0a43f9a102419ed8830ae4fed6103b2ed Mon Sep 17 00:00:00 2001 From: wxd <1627315083@qq.com> Date: Fri, 4 Oct 2024 11:29:50 +0800 Subject: [PATCH] fix --- src/component/HomePage/MoodboardUpload.vue | 4 +- src/component/HomePage/layout.vue | 4 +- .../LibraryPage/ModelPlacementMobile.vue | 236 +++++++++++------- src/component/WorksPage/publish.vue | 87 ++++++- src/lang/cn.ts | 1 + src/lang/en.ts | 1 + src/views/HomeView/HomeView.vue | 2 +- 7 files changed, 221 insertions(+), 114 deletions(-) diff --git a/src/component/HomePage/MoodboardUpload.vue b/src/component/HomePage/MoodboardUpload.vue index ca3ee6e0..609cd5dc 100644 --- a/src/component/HomePage/MoodboardUpload.vue +++ b/src/component/HomePage/MoodboardUpload.vue @@ -266,7 +266,7 @@ export default defineComponent({ modelImg:{ mounted(el) { let parentNode = el.parentNode - if(parentNode.offsetHeight > parentNode.offsetWidth){ + if(parentNode.offsetHeight >= parentNode.offsetWidth){ el.style.height = 100+'%' el.style.width = 'auto' }else{ @@ -276,7 +276,7 @@ export default defineComponent({ }, updated (el) { let parentNode = el.parentNode - if(parentNode.offsetHeight > parentNode.offsetWidth){ + if(parentNode.offsetHeight >= parentNode.offsetWidth){ el.style.height = 100+'%' el.style.width = 'auto' }else{ diff --git a/src/component/HomePage/layout.vue b/src/component/HomePage/layout.vue index c5616b24..e4514f34 100644 --- a/src/component/HomePage/layout.vue +++ b/src/component/HomePage/layout.vue @@ -667,7 +667,7 @@ export default defineComponent({ modelImg:{ mounted(el) { let parentNode = el.parentNode - if(parentNode.offsetHeight > parentNode.offsetWidth){ + if(parentNode.offsetHeight >= parentNode.offsetWidth){ el.style.height = 100+'%' el.style.width = 'auto' }else{ @@ -677,7 +677,7 @@ export default defineComponent({ }, updated (el) { let parentNode = el.parentNode - if(parentNode.offsetHeight > parentNode.offsetWidth){ + if(parentNode.offsetHeight >= parentNode.offsetWidth){ el.style.height = 100+'%' el.style.width = 'auto' }else{ diff --git a/src/component/LibraryPage/ModelPlacementMobile.vue b/src/component/LibraryPage/ModelPlacementMobile.vue index 560d76dc..a3d6a2e5 100644 --- a/src/component/LibraryPage/ModelPlacementMobile.vue +++ b/src/component/LibraryPage/ModelPlacementMobile.vue @@ -48,7 +48,7 @@
- - + --> +
{{ sex.label }}
-
+
{{point.title}}
-
+
@@ -92,7 +93,7 @@
-
+
@@ -145,6 +146,7 @@ import { VueCropper } from "vue-cropper"; import { useStore } from "vuex"; import { Modal,message } from 'ant-design-vue'; import { ExclamationCircleOutlined } from '@ant-design/icons-vue'; +import { getMousePosition } from "@/tool/mdEvent"; import { useI18n } from 'vue-i18n'; export default defineComponent({ components:{ @@ -168,32 +170,7 @@ export default defineComponent({ ]) let cropperTime:any = ref() - let option:any = ref({ - img: '', //裁剪图片的地址 - outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1) - outputType: 'png', //裁剪生成图片的格式（jpeg || png || webp） - info: false, //图片大小信息 - canScale: true, //图片是否允许滚轮缩放 - autoCrop: true, //是否默认生成截图框 - autoCropWidth: '0', //默认生成截图框宽度 - autoCropHeight: '0', //默认生成截图框高度 - fixed: true, //是否开启截图框宽高固定比例 - fixedBox: true, //固定截图框大小，不允许改变 - fixedNumber: [1, 2.125], //截图框的宽高比例 - full: false, //false按原比例裁切图片，不失真 - canMove: true, //上传图片是否可以移动 - canMoveBox: false, //截图框能否拖动 - original: false, //上传图片按照原始比例渲染 - centerBox: false, //截图框是否被限制在图片里面 - height: true, //是否按照设备的dpr 输出等比例图片 - infoTrue: true, //true为展示真实输出图片宽高，false展示看到的截图框宽高 - maxImgSize:'2000', //限制图片最大宽度和高度 - enlarge: 7, //图片根据截图框输出比例倍数 - mode: 'auto 90%', //图片默认渲染方式 - limitMinSize:'100%', - imgLoad:()=>{ - } - }) + let {t} = useI18n() return { store, @@ -211,8 +188,9 @@ export default defineComponent({ sex, sexList, cropperTime, - option, - t + + t, + getMousePosition } }, data(){ @@ -226,21 +204,48 @@ export default defineComponent({ perviewUrl:'',//预览的图片地址 isShowMark:false, modelType:'Library', + + option:{ + img: '', //裁剪图片的地址 + outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1) + outputType: 'png', //裁剪生成图片的格式（jpeg || png || webp） + info: false, //图片大小信息 + canScale: true, //图片是否允许滚轮缩放 + autoCrop: true, //是否默认生成截图框 + autoCropWidth: '0', //默认生成截图框宽度 + autoCropHeight: '0', //默认生成截图框高度 + fixed: true, //是否开启截图框宽高固定比例 + // fixedBox: false, //固定截图框大小，不允许改变//上传系统模特使用 + fixedBox: true, //固定截图框大小，不允许改变 + fixedNumber: [1, 2.125], //截图框的宽高比例 + full: false, //false按原比例裁切图片，不失真 + // canMove: false, //上传图片是否可以移动//上传系统模特使用 + canMove: true, //上传图片是否可以移动 + canMoveBox: false, //截图框能否拖动 + original: false, //上传图片按照原始比例渲染 + centerBox: false, //截图框是否被限制在图片里面 + height: true, //是否按照设备的dpr 输出等比例图片 + infoTrue: true, //true为展示真实输出图片宽高，false展示看到的截图框宽高 + maxImgSize:'2000', //限制图片最大宽度和高度 + enlarge: 7, //图片根据截图框输出比例倍数 + mode: 'auto 90%', //图片默认渲染方式 + limitMinSize:'100%', + imgLoad:()=>{ + } + }, } }, mounted(){ let userInfo:any = getCookie("userInfo") this.userInfo = JSON.parse(userInfo); // this.getSex() - this.option.imgLoad = ()=>{ - this.setImageSize() - } }, methods:{ formatter(value:number){ return `${value}%`; }, showPlacementModal(data:any,sex:any){ + // this.sex = arr[0].value this.sex = sex this.placementShow = true this.printObject = { @@ -250,6 +255,8 @@ export default defineComponent({ setTimeout(()=>{ nextTick().then(()=>{ + let image:any = new Image() + image.src = this.option.img let imgbox:any = this.$refs.imgbox let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0] let imgBoxSizeBG = imgbox.getElementsByClassName('cropper-view-box')[0] @@ -272,7 +279,8 @@ export default defineComponent({ } // imgBoxSize.style.backgroundImage = 'url('+require('@assets/images/library/lemaleBG.png')')' - imgBoxSize.addEventListener('touchmove',this.startMove) + imgBoxSize.addEventListener('mousemove',this.mouseMove) + imgBoxSize.addEventListener('touchmove',this.touchmove) this.setImageSize() }) },800) @@ -288,26 +296,32 @@ export default defineComponent({ cropper.cropOffsertX = cropper.getImgAxis().x1+(cropper.scale*cropper.trueWidth/2-cropper.cropW/2) cropper.cropOffsertY = cropper.getImgAxis().y1 } + }, realTime(data:any) { - this.cropperTime = setTimeout(()=>{ - this.setImageSize() - clearTimeout(this.cropperTime) - },100) + let cropper:any = this.$refs.cropper + // if(cropper.h == cropper.cropH){ + this.cropperTime = setTimeout(()=>{ + this.setImageSize() + clearTimeout(this.cropperTime) + + },100) + // } + }, setImageSize(){ this.setCropperWH() let imgbox:any = this.$refs.imgbox - let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')?.[0] + let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0] let position = imgBoxSize.getBoundingClientRect() let position1 = imgbox.getBoundingClientRect() let cropper:any = this.$refs.cropper this.imgBox = { width:cropper.cropW, height:cropper.cropH, - left : position.left, - top:position.top, + left : position1.left, + top:position1.top, scrollTop:imgBoxSize.scrollTop || 0, x:cropper.getCropAxis().x1, y:cropper.getCropAxis().y1, @@ -323,7 +337,6 @@ export default defineComponent({ label:item.value, }) }); - // this.sex = arr[0].value this.sexList = arr } }) @@ -425,31 +438,40 @@ export default defineComponent({ changeRemoveStatus(){ this.isRemoveStatus = true }, - + mouseMove(event:any){ + let e = getMousePosition(event,false) + this.startMove(e) + }, + touchmove(event:any){ + let e = getMousePosition(event,true) + this.startMove(e) + }, startMove(event:any){ - if(this.isRemoveStatus){ + if(this.isRemoveStatus){ return } let imgbox:any = this.$refs.imgbox - let scrollTop = imgbox.scrollTop; - if(event.targetTouches[0].pageX > this.imgBox.left){ - if(this.intObj){ - this.currentSign.left = event.targetTouches[0].pageX - this.imgBox.left - this.currentSign.top = event.targetTouches[0].pageY + scrollTop - this.imgBox.top - this.currentSign.color = this.intObj.color - this.currentSign.type= this.intObj.type - this.currentSign.field = this.intObj.field - this.locationList.push(this.currentSign) - this.intObj.show = false - this.intObj = null - }else{ - if(this.startDian){ - this.currentSign.left = event.targetTouches[0].pageX - this.imgBox.left -12 - this.currentSign.top = event.targetTouches[0].pageY + scrollTop - this.imgBox.top -12 - document.addEventListener('touchend', this.getMouseOver); - this.$forceUpdate() - this.setBoundarySign() - } + let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0] + let scrollTop = imgBoxSize.scrollTop; + if(this.intObj){ + this.currentSign.left = event.clientX - this.imgBox.left + this.currentSign.top = event.clientY + scrollTop - this.imgBox.top + this.currentSign.color = this.intObj.color + this.currentSign.type= this.intObj.type + this.currentSign.field = this.intObj.field + this.locationList.push(this.currentSign) + this.intObj.show = false + this.intObj = null + }else{ + //鼠标移动 + if(this.startDian){ + this.currentSign.left = event.clientX - this.imgBox.left - this.imgBox.x - this.moveOriginal.posX -12 + this.currentSign.top = event.clientY + scrollTop - this.imgBox.top - this.imgBox.y -this.moveOriginal.posY -12 + document.addEventListener('mouseup', this.getMouseOver); + document.addEventListener('touchend', this.getMouseOver); + this.$forceUpdate() + this.setBoundarySign() + } } }, @@ -496,8 +518,9 @@ export default defineComponent({ // 计算出鼠标在签名域上的偏移 // this.moveOriginal.posX = event.offsetX // this.moveOriginal.posY = event.offsetY // 1为边框 - this.moveOriginal.posX = event.targetTouches[0].pageX - this.imgBox.left - this.currentSign.left - this.moveOriginal.posY = event.targetTouches[0].pageY - this.imgBox.top- this.currentSign.top // 1为边框 + this.moveOriginal.posX = 0 + this.moveOriginal.posY = 0 // 1为边框 + this.startDian = true } @@ -506,7 +529,10 @@ export default defineComponent({ getMouseOver(){//鼠标抬起 this.startDian = false this.currentSign = {} - document.removeEventListener('touchend', this.getMouseOver); + document.removeEventListener('mouseup', this.getMouseOver); + document.removeEventListener('touchend', this.getMouseOver); + document.removeEventListener('mousemove',this.mouseMove) + document.removeEventListener('touchmove',this.touchmove) }, closeModal(){ @@ -546,6 +572,7 @@ export default defineComponent({ this.locationList = [] this.pointList = JSON.parse(JSON.stringify(this.oldPointList)) this.locationList = JSON.parse(JSON.stringify(this.oldLocationList)) + // this.locationList = JSON.parse(JSON.stringify(this.locationList)) }, submitPlacement(){ @@ -558,7 +585,7 @@ export default defineComponent({ // this.$emit('handleCropperSuccess',{file:file, fileData:this.cropperFileData}) // }) let cropper:any = this.$refs.cropper, - that = this + that = this if((this.modelType == 'System' && this.userInfo.userId == 88) || (this.modelType == 'System' &&this.userInfo.userId == 83)){ if(this.printObject.templateId){ this.printObject.id = this.printObject.relationId @@ -599,20 +626,20 @@ export default defineComponent({ let cropper:any = this.$refs.cropper cropper.changeScale(num); }, - confrimSubmit(){ - + async confrimSubmit(){ + let modelType = 'Library' + if(this.userInfo.userId == 88 || this.userInfo.userId == 83){ + modelType = this.modelType + } let param = { libraryId:this.printObject.id, templateId:this.printObject.templateId || null, - modelType:'Library', + modelType:modelType, modelSex:this.sex, checkMd5:1, timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone, - ...this.getPrintLocation() + ...await this.getPrintLocation() } - if(this.userInfo.userId == 88 || this.userInfo.userId == 83){ - param.modelType = this.modelType - } this.isShowMark = true Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then( @@ -628,19 +655,19 @@ export default defineComponent({ }, customRequest(){ + let modelType = 'Library' + if(this.userInfo.userId == 88 || this.userInfo.userId == 83){ + modelType = this.modelType + } let new_data = { file:this.printObject.file, level1Type:'Models', level2Type:'', checkMd5:1, sex:this.sex, - modelType:'Library', + modelType:modelType, timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone, } - if(this.userInfo.userId == 88 || this.userInfo.userId == 83){ - new_data.modelType = this.modelType - new_data.sex = this.sex - } this.isShowMark = true return new Promise((resolve,reject)=>{ Https.axiosPost(Https.httpUrls.libraryUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then( @@ -684,11 +711,26 @@ export default defineComponent({ }); }) }, - getPrintLocation(){ + async getPrintLocation(){ let {width , height} = this.imgBox + console.log(width,height); + + // if(this.modelType == 'System'){ + // await new Promise((resolve, reject) => { + // let img = new Image() + // img.src = this.option.img + // img.onload = () => { + // width = img.width + // height = img.height + // resolve(true) + // } + // }) + // } + let locationData:any = {} let returnData:any = {} let newLocationList = JSON.parse(JSON.stringify(this.locationList)) + //进行字段归类 for(let item of newLocationList){ locationData[item.field] = locationData[item.field] || [] @@ -703,6 +745,8 @@ export default defineComponent({ returnData[v.type] = [v.left, v.top] }); } + console.log(returnData); + return returnData }, @@ -712,17 +756,17 @@ export default defineComponent({ } }, - printPreview(){ + async printPreview(){ let file = this.printObject.templateId ? null :this.printObject.file, models = { libraryId:this.printObject.relationId || null, templateId:this.printObject.templateId || null, - timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone, sex:this.sex, - ...this.getPrintLocation() + timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone, + ...await this.getPrintLocation() } - let cropper:any = this.$refs.cropper - cropper.getCropData((value:any)=>{ + let cropper:any = this.$refs.cropper + await cropper.getCropData((value:any)=>{ file = base64toFile(value,this.printObject.name); file.uid = this.printObject.file?.uid?this.printObject.file.uid:'' let formData = new FormData(); @@ -731,7 +775,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 @@ -741,6 +785,8 @@ export default defineComponent({ this.isShowMark = false }); }) + + }, backPreview(){ @@ -788,7 +834,7 @@ export default defineComponent({ .models_placement_body{ width: 100%; height: 100%; - overflow: hidden; + .palcement_modal_header{ position: relative; height: 6.6rem; @@ -850,7 +896,6 @@ export default defineComponent({ padding: 3rem 2.7rem 0 1.4rem; .select_block{ // background: #FFFFFF; - overflow: hidden; margin-bottom: 3rem; color: #1A1A1A !important; .ant-select{ @@ -881,7 +926,6 @@ export default defineComponent({ color: #1A1A1A !important; } } - .placement_point_item{ display: flex; justify-content: space-between; @@ -959,7 +1003,7 @@ export default defineComponent({ position: absolute; right: 0; top:18.4rem; - + .placement_content_operate_item{ padding: 1.5rem 0; text-align: center; @@ -1021,7 +1065,7 @@ export default defineComponent({ -moz-user-select:none; position: relative; height: 57.6rem; - .img_content_block{ + .img_content_block{ width: 40.8rem; height: 100%; max-height: 63.2rem; @@ -1075,7 +1119,7 @@ export default defineComponent({ .vue-cropper{ .cropper-crop-box{ background: #fff; - + pointer-events: none; } } } @@ -1095,7 +1139,7 @@ export default defineComponent({ } .placement_img{ - height: 100%; + height: 100%; width: auto; position: relative; left: 50%; diff --git a/src/component/WorksPage/publish.vue b/src/component/WorksPage/publish.vue index 228e77f7..9f0fd111 100644 --- a/src/component/WorksPage/publish.vue +++ b/src/component/WorksPage/publish.vue @@ -33,11 +33,30 @@
{{$t('Publish.CollectionTitle')}}
+ + +
+
+
{{$t('Publish.topic')}}
- - #RCAworkshop_2024 +
+ + + {{ item.tag }} + + + + {{ item.tag }} + +
+
+
+
+ {{ item.tag }} +
- #RCAworkshop_2024
{{$t('Publish.Description')}}
@@ -127,6 +146,8 @@ export default defineComponent({ isSecondaryCreation:true, } }) + let tagList = ref([{tag:'RCAworkshop_2024'}]) + let selectTagList:any = ref([]) // let textarea: any = ref(null) // let setCopy = ()=>{ // textarea.value.select() @@ -178,6 +199,7 @@ export default defineComponent({ publish.value = false publishData.isShowMark = false publishData.subPublishDate = {} + selectTagList.value = [] } let cancelDsign = ()=>{ Modal.confirm({ @@ -237,13 +259,25 @@ export default defineComponent({ }); } - + let handleClose = (tag:any,index:number)=>{ + let selectTag = selectTagList.value.splice(index,1)[0] + tagList.value.push(selectTag) + } + let pushTag = (tag:any,index:number)=>{ + let selectTag = tagList.value.splice(index,1)[0] + selectTagList.value.push(selectTag) + if(tag.tag == 'RCAworkshop_2024'){ + publishData.subPublishDate.portfolioName = 'AiDA x RCA workshop' + } + } return { publish, publishMask, ...toRefs(publishData), // textarea, // setCopy, + tagList, + selectTagList, init, setPermissionsItem, setPermissions, @@ -253,6 +287,8 @@ export default defineComponent({ setCover, cancelDsign, setPublish, + handleClose, + pushTag, }; }, data() { @@ -287,15 +323,15 @@ export default defineComponent({ // top: 50%; // transform: translateY(-50%); } - .publidh_content_item_tag{ - position: relative; - .ant-tag{ - position: absolute; - left: 10px; - top: 50%; - transform: translateY(-50%); - } - } + // .publidh_content_item_tag{ + // position: relative; + // .ant-tag{ + // position: absolute; + // left: 10px; + // top: 50%; + // transform: translateY(-50%); + // } + // } .publish_content_bottom{ --border-color: #c4c4c4; display: flex; @@ -313,6 +349,31 @@ export default defineComponent({ font-size: 1.8rem; margin-bottom: 1rem; + } + .publidh_content_item_tagList,.publidh_content_item_tag{ + // height: 4rem; + border-radius: 1rem; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .publidh_content_item_tagList{ + margin-top: 1rem; + .ant-tag{ + cursor: pointer; + margin-bottom: 8px; + } + } + .publidh_content_item_tag{ + border: .2rem solid var(--border-color); + // height: 4rem; + padding: 2rem; + padding-right: 0rem; + .ant-tag{ + cursor: pointer; + margin-bottom: 8px; + } + } .publidh_content_item_intro{ font-size: 1.4rem; diff --git a/src/lang/cn.ts b/src/lang/cn.ts index 6f650daf..1249e933 100644 --- a/src/lang/cn.ts +++ b/src/lang/cn.ts @@ -530,6 +530,7 @@ export default { Publish:'发布', CoverPicture:'封面图', CollectionTitle:'系列名字', + topic:'话题', Description:'描述', Permissions:'权限', PermissionsItem1:'允许其他用户进行二次创作。', diff --git a/src/lang/en.ts b/src/lang/en.ts index 6a4787a0..cdb2c6cb 100644 --- a/src/lang/en.ts +++ b/src/lang/en.ts @@ -530,6 +530,7 @@ export default { Publish:'Publish', CoverPicture:'Cover Picture', CollectionTitle:'Collection Title', + topic:'Topic', Description:'Description', Permissions:'Permissions', PermissionsItem1:'Allow other users to perform secondary creation.', diff --git a/src/views/HomeView/HomeView.vue b/src/views/HomeView/HomeView.vue index 9afe0719..d7403b44 100644 --- a/src/views/HomeView/HomeView.vue +++ b/src/views/HomeView/HomeView.vue @@ -968,7 +968,7 @@ export default defineComponent({ name:data.collection.moodTemplateName, } }]:[], - moodboardPosition:data.collection.moodboardPosition?JSON.parse(data.collection.moodboardPosition):{}, + moodboardPosition:data.collection.moodboardPosition?JSON.parse(data.collection.moodboardPosition):JSON.stringify({}), moodboardFiles: this.dealViewChooseData( data.collection.moodBoards,"Moodboard" ),