aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
wxd
2024-10-04 11:29:50 +08:00
parent 12b9dbdfbf
commit 026e71c0a4
7 changed files with 221 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/component/HomePage/MoodboardUpload.vue
View File

@@ -266,7 +266,7 @@ export default defineComponent({
modelImg:{ modelImg:{
mounted(el) { mounted(el) {
let parentNode = el.parentNode let parentNode = el.parentNode
if(parentNode.offsetHeight > parentNode.offsetWidth){ if(parentNode.offsetHeight >= parentNode.offsetWidth){
el.style.height = 100+'%' el.style.height = 100+'%'
el.style.width = 'auto' el.style.width = 'auto'
}else{ }else{
@@ -276,7 +276,7 @@ export default defineComponent({
}, },
updated (el) { updated (el) {
let parentNode = el.parentNode let parentNode = el.parentNode
if(parentNode.offsetHeight > parentNode.offsetWidth){ if(parentNode.offsetHeight >= parentNode.offsetWidth){
el.style.height = 100+'%' el.style.height = 100+'%'
el.style.width = 'auto' el.style.width = 'auto'
}else{ }else{

4
src/component/HomePage/layout.vue
View File

@@ -667,7 +667,7 @@ export default defineComponent({
modelImg:{ modelImg:{
mounted(el) { mounted(el) {
let parentNode = el.parentNode let parentNode = el.parentNode
if(parentNode.offsetHeight > parentNode.offsetWidth){ if(parentNode.offsetHeight >= parentNode.offsetWidth){
el.style.height = 100+'%' el.style.height = 100+'%'
el.style.width = 'auto' el.style.width = 'auto'
}else{ }else{
@@ -677,7 +677,7 @@ export default defineComponent({
}, },
updated (el) { updated (el) {
let parentNode = el.parentNode let parentNode = el.parentNode
if(parentNode.offsetHeight > parentNode.offsetWidth){ if(parentNode.offsetHeight >= parentNode.offsetWidth){
el.style.height = 100+'%' el.style.height = 100+'%'
el.style.width = 'auto' el.style.width = 'auto'
}else{ }else{

236
src/component/LibraryPage/ModelPlacementMobile.vue
View File

@@ -48,7 +48,7 @@
<div class="models_placement_content"> <div class="models_placement_content">
<div class="plcaement_point_content"> <div class="plcaement_point_content">
<div class="select_block"> <div class="select_block">
<a-select <!-- <a-select
ref="select" ref="select"
v-model:value="sex.value" v-model:value="sex.value"
:options="sexList" :options="sexList"
@@ -59,12 +59,13 @@
style="color: #343579" style="color: #343579"
></span ></span
></template> ></template>
</a-select> </a-select> -->
<div>{{ sex.label }}</div>
</div> </div>
<div class="placement_point_item" v-for="(point,index) in pointList" :key="index" @touchmove="startMove($event)"> <div class="placement_point_item" v-for="(point,index) in pointList" :key="index" @touchmove="touchmove($event)">
<div class="ponit_title">{{point.title}}</div> <div class="ponit_title">{{point.title}}</div>
<div class="point_list"> <div class="point_list">
<div class="point_item" v-for="item in point.pointList" :key="item.color" :style="{borderColor:item.color,visibility:item.show?'inherit':'hidden'}" @touchstart="AddDian(item)"><div class="point_block" :style="{background:item.color}"></div></div> <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)" @touchstart="AddDian(item)"><div class="point_block" :style="{background:item.color}"></div></div>
</div> </div>
</div> </div>
<div class="placement_point_item placement_point_scale"> <div class="placement_point_item placement_point_scale">
@@ -92,7 +93,7 @@
<div class="img_content_block" ref="imgbox"> <div class="img_content_block" ref="imgbox">
<div :style="{width: imgBox.width+'px', height:imgBox.height +'px',top:imgBox.y+'px',left:imgBox.x+'px',position:'absolute'}"> <div :style="{width: imgBox.width+'px', height:imgBox.height +'px',top:imgBox.y+'px',left:imgBox.x+'px',position:'absolute'}">
<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @touchstart="getMouseDown($event,item,index)" @touchmove="startMove($event)"> <div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @mousedown="getMouseDown($event,item,index)" @touchstart="getMouseDown(getMousePosition($event),item,index)" @mousemove="mouseMove($event)" @touchmove="touchmove($event)">
<div class="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div> <div class="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div> <div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
</div> </div>
@@ -145,6 +146,7 @@ import { VueCropper } from "vue-cropper";
import { useStore } from "vuex"; import { useStore } from "vuex";
import { Modal,message } from 'ant-design-vue'; import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'; import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { getMousePosition } from "@/tool/mdEvent";
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
export default defineComponent({ export default defineComponent({
components:{ components:{
@@ -168,32 +170,7 @@ export default defineComponent({
]) ])
let cropperTime:any = ref() 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() let {t} = useI18n()
return { return {
store, store,
@@ -211,8 +188,9 @@ export default defineComponent({
sex, sex,
sexList, sexList,
cropperTime, cropperTime,
option,
t t,
getMousePosition
} }
}, },
data(){ data(){
@@ -226,21 +204,48 @@ export default defineComponent({
perviewUrl:'',//预览的图片地址 perviewUrl:'',//预览的图片地址
isShowMark:false, isShowMark:false,
modelType:'Library', 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(){ mounted(){
let userInfo:any = getCookie("userInfo") let userInfo:any = getCookie("userInfo")
this.userInfo = JSON.parse(userInfo); this.userInfo = JSON.parse(userInfo);
// this.getSex() // this.getSex()
this.option.imgLoad = ()=>{
this.setImageSize()
}
}, },
methods:{ methods:{
formatter(value:number){ formatter(value:number){
return `${value}%`; return `${value}%`;
}, },
showPlacementModal(data:any,sex:any){ showPlacementModal(data:any,sex:any){
// this.sex = arr[0].value
this.sex = sex this.sex = sex
this.placementShow = true this.placementShow = true
this.printObject = { this.printObject = {
@@ -250,6 +255,8 @@ export default defineComponent({
setTimeout(()=>{ setTimeout(()=>{
nextTick().then(()=>{ nextTick().then(()=>{
let image:any = new Image()
image.src = this.option.img
let imgbox:any = this.$refs.imgbox let imgbox:any = this.$refs.imgbox
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0] let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
let imgBoxSizeBG = imgbox.getElementsByClassName('cropper-view-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.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() this.setImageSize()
}) })
},800) },800)
@@ -288,26 +296,32 @@ export default defineComponent({
cropper.cropOffsertX = cropper.getImgAxis().x1+(cropper.scale*cropper.trueWidth/2-cropper.cropW/2) cropper.cropOffsertX = cropper.getImgAxis().x1+(cropper.scale*cropper.trueWidth/2-cropper.cropW/2)
cropper.cropOffsertY = cropper.getImgAxis().y1 cropper.cropOffsertY = cropper.getImgAxis().y1
} }
}, },
realTime(data:any) { realTime(data:any) {
this.cropperTime = setTimeout(()=>{ let cropper:any = this.$refs.cropper
this.setImageSize() // if(cropper.h == cropper.cropH){
clearTimeout(this.cropperTime) this.cropperTime = setTimeout(()=>{
},100) this.setImageSize()
clearTimeout(this.cropperTime)
},100)
// }
}, },
setImageSize(){ setImageSize(){
this.setCropperWH() this.setCropperWH()
let imgbox:any = this.$refs.imgbox 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 position = imgBoxSize.getBoundingClientRect()
let position1 = imgbox.getBoundingClientRect() let position1 = imgbox.getBoundingClientRect()
let cropper:any = this.$refs.cropper let cropper:any = this.$refs.cropper
this.imgBox = { this.imgBox = {
width:cropper.cropW, width:cropper.cropW,
height:cropper.cropH, height:cropper.cropH,
left : position.left, left : position1.left,
top:position.top, top:position1.top,
scrollTop:imgBoxSize.scrollTop || 0, scrollTop:imgBoxSize.scrollTop || 0,
x:cropper.getCropAxis().x1, x:cropper.getCropAxis().x1,
y:cropper.getCropAxis().y1, y:cropper.getCropAxis().y1,
@@ -323,7 +337,6 @@ export default defineComponent({
label:item.value, label:item.value,
}) })
}); });
// this.sex = arr[0].value
this.sexList = arr this.sexList = arr
} }
}) })
@@ -425,31 +438,40 @@ export default defineComponent({
changeRemoveStatus(){ changeRemoveStatus(){
this.isRemoveStatus = true 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){ startMove(event:any){
if(this.isRemoveStatus){ if(this.isRemoveStatus){
return return
} }
let imgbox:any = this.$refs.imgbox let imgbox:any = this.$refs.imgbox
let scrollTop = imgbox.scrollTop; let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
if(event.targetTouches[0].pageX > this.imgBox.left){ let scrollTop = imgBoxSize.scrollTop;
if(this.intObj){ if(this.intObj){
this.currentSign.left = event.targetTouches[0].pageX - this.imgBox.left this.currentSign.left = event.clientX - this.imgBox.left
this.currentSign.top = event.targetTouches[0].pageY + scrollTop - this.imgBox.top this.currentSign.top = event.clientY + scrollTop - this.imgBox.top
this.currentSign.color = this.intObj.color this.currentSign.color = this.intObj.color
this.currentSign.type= this.intObj.type this.currentSign.type= this.intObj.type
this.currentSign.field = this.intObj.field this.currentSign.field = this.intObj.field
this.locationList.push(this.currentSign) this.locationList.push(this.currentSign)
this.intObj.show = false this.intObj.show = false
this.intObj = null this.intObj = null
}else{ }else{
if(this.startDian){ //鼠标移动
this.currentSign.left = event.targetTouches[0].pageX - this.imgBox.left -12 if(this.startDian){
this.currentSign.top = event.targetTouches[0].pageY + scrollTop - this.imgBox.top -12 this.currentSign.left = event.clientX - this.imgBox.left - this.imgBox.x - this.moveOriginal.posX -12
document.addEventListener('touchend', this.getMouseOver); this.currentSign.top = event.clientY + scrollTop - this.imgBox.top - this.imgBox.y -this.moveOriginal.posY -12
this.$forceUpdate() document.addEventListener('mouseup', this.getMouseOver);
this.setBoundarySign() document.addEventListener('touchend', this.getMouseOver);
} this.$forceUpdate()
this.setBoundarySign()
} }
} }
}, },
@@ -496,8 +518,9 @@ export default defineComponent({
// 计算出鼠标在签名域上的偏移 // 计算出鼠标在签名域上的偏移
// this.moveOriginal.posX = event.offsetX // this.moveOriginal.posX = event.offsetX
// this.moveOriginal.posY = event.offsetY // 1为边框 // this.moveOriginal.posY = event.offsetY // 1为边框
this.moveOriginal.posX = event.targetTouches[0].pageX - this.imgBox.left - this.currentSign.left this.moveOriginal.posX = 0
this.moveOriginal.posY = event.targetTouches[0].pageY - this.imgBox.top- this.currentSign.top // 1为边框 this.moveOriginal.posY = 0 // 1为边框
this.startDian = true this.startDian = true
} }
@@ -506,7 +529,10 @@ export default defineComponent({
getMouseOver(){//鼠标抬起 getMouseOver(){//鼠标抬起
this.startDian = false this.startDian = false
this.currentSign = {} 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(){ closeModal(){
@@ -546,6 +572,7 @@ export default defineComponent({
this.locationList = [] this.locationList = []
this.pointList = JSON.parse(JSON.stringify(this.oldPointList)) this.pointList = JSON.parse(JSON.stringify(this.oldPointList))
this.locationList = JSON.parse(JSON.stringify(this.oldLocationList)) this.locationList = JSON.parse(JSON.stringify(this.oldLocationList))
// this.locationList = JSON.parse(JSON.stringify(this.locationList))
}, },
submitPlacement(){ submitPlacement(){
@@ -558,7 +585,7 @@ export default defineComponent({
// this.$emit('handleCropperSuccess',{file:file, fileData:this.cropperFileData}) // this.$emit('handleCropperSuccess',{file:file, fileData:this.cropperFileData})
// }) // })
let cropper:any = this.$refs.cropper, 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.modelType == 'System' && this.userInfo.userId == 88) || (this.modelType == 'System' &&this.userInfo.userId == 83)){
if(this.printObject.templateId){ if(this.printObject.templateId){
this.printObject.id = this.printObject.relationId this.printObject.id = this.printObject.relationId
@@ -599,20 +626,20 @@ export default defineComponent({
let cropper:any = this.$refs.cropper let cropper:any = this.$refs.cropper
cropper.changeScale(num); cropper.changeScale(num);
}, },
confrimSubmit(){ async confrimSubmit(){
let modelType = 'Library'
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
modelType = this.modelType
}
let param = { let param = {
libraryId:this.printObject.id, libraryId:this.printObject.id,
templateId:this.printObject.templateId || null, templateId:this.printObject.templateId || null,
modelType:'Library', modelType:modelType,
modelSex:this.sex, modelSex:this.sex,
checkMd5:1, checkMd5:1,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone, 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 this.isShowMark = true
Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then( Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then(
@@ -628,19 +655,19 @@ export default defineComponent({
}, },
customRequest(){ customRequest(){
let modelType = 'Library'
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
modelType = this.modelType
}
let new_data = { let new_data = {
file:this.printObject.file, file:this.printObject.file,
level1Type:'Models', level1Type:'Models',
level2Type:'', level2Type:'',
checkMd5:1, checkMd5:1,
sex:this.sex, sex:this.sex,
modelType:'Library', modelType:modelType,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone, 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 this.isShowMark = true
return new Promise((resolve,reject)=>{ return new Promise((resolve,reject)=>{
Https.axiosPost(Https.httpUrls.libraryUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then( 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 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 locationData:any = {}
let returnData:any = {} let returnData:any = {}
let newLocationList = JSON.parse(JSON.stringify(this.locationList)) let newLocationList = JSON.parse(JSON.stringify(this.locationList))
//进行字段归类 //进行字段归类
for(let item of newLocationList){ for(let item of newLocationList){
locationData[item.field] = locationData[item.field] || [] locationData[item.field] = locationData[item.field] || []
@@ -703,6 +745,8 @@ export default defineComponent({
returnData[v.type] = [v.left, v.top] returnData[v.type] = [v.left, v.top]
}); });
} }
console.log(returnData);
return returnData return returnData
}, },
@@ -712,17 +756,17 @@ export default defineComponent({
} }
}, },
printPreview(){ async printPreview(){
let file = this.printObject.templateId ? null :this.printObject.file, let file = this.printObject.templateId ? null :this.printObject.file,
models = { models = {
libraryId:this.printObject.relationId || null, libraryId:this.printObject.relationId || null,
templateId:this.printObject.templateId || null, templateId:this.printObject.templateId || null,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
sex:this.sex, sex:this.sex,
...this.getPrintLocation() timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
...await this.getPrintLocation()
} }
let cropper:any = this.$refs.cropper let cropper:any = this.$refs.cropper
cropper.getCropData((value:any)=>{ await cropper.getCropData((value:any)=>{
file = base64toFile(value,this.printObject.name); file = base64toFile(value,this.printObject.name);
file.uid = this.printObject.file?.uid?this.printObject.file.uid:'' file.uid = this.printObject.file?.uid?this.printObject.file.uid:''
let formData = new FormData(); let formData = new FormData();
@@ -731,7 +775,7 @@ export default defineComponent({
if(this.isShowMark){ if(this.isShowMark){
return return
} }
// this.isShowMark = true this.isShowMark = true
Https.axiosPost(Https.httpUrls.libraryModelsDot, formData,{headers:{'Content-Type': 'multipart/form-data'}}).then( Https.axiosPost(Https.httpUrls.libraryModelsDot, formData,{headers:{'Content-Type': 'multipart/form-data'}}).then(
(rv: any) => { (rv: any) => {
this.perviewUrl = rv this.perviewUrl = rv
@@ -741,6 +785,8 @@ export default defineComponent({
this.isShowMark = false this.isShowMark = false
}); });
}) })
}, },
backPreview(){ backPreview(){
@@ -788,7 +834,7 @@ export default defineComponent({
.models_placement_body{ .models_placement_body{
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden;
.palcement_modal_header{ .palcement_modal_header{
position: relative; position: relative;
height: 6.6rem; height: 6.6rem;
@@ -850,7 +896,6 @@ export default defineComponent({
padding: 3rem 2.7rem 0 1.4rem; padding: 3rem 2.7rem 0 1.4rem;
.select_block{ .select_block{
// background: #FFFFFF; // background: #FFFFFF;
overflow: hidden;
margin-bottom: 3rem; margin-bottom: 3rem;
color: #1A1A1A !important; color: #1A1A1A !important;
.ant-select{ .ant-select{
@@ -881,7 +926,6 @@ export default defineComponent({
color: #1A1A1A !important; color: #1A1A1A !important;
} }
} }
.placement_point_item{ .placement_point_item{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -959,7 +1003,7 @@ export default defineComponent({
position: absolute; position: absolute;
right: 0; right: 0;
top:18.4rem; top:18.4rem;
.placement_content_operate_item{ .placement_content_operate_item{
padding: 1.5rem 0; padding: 1.5rem 0;
text-align: center; text-align: center;
@@ -1021,7 +1065,7 @@ export default defineComponent({
-moz-user-select:none; -moz-user-select:none;
position: relative; position: relative;
height: 57.6rem; height: 57.6rem;
.img_content_block{ .img_content_block{
width: 40.8rem; width: 40.8rem;
height: 100%; height: 100%;
max-height: 63.2rem; max-height: 63.2rem;
@@ -1075,7 +1119,7 @@ export default defineComponent({
.vue-cropper{ .vue-cropper{
.cropper-crop-box{ .cropper-crop-box{
background: #fff; background: #fff;
pointer-events: none;
} }
} }
} }
@@ -1095,7 +1139,7 @@ export default defineComponent({
} }
.placement_img{ .placement_img{
height: 100%; height: 100%;
width: auto; width: auto;
position: relative; position: relative;
left: 50%; left: 50%;

87
src/component/WorksPage/publish.vue
View File

@@ -33,11 +33,30 @@
<div class="publidh_right"> <div class="publidh_right">
<div class="publidh_right_name publidh_content_item"> <div class="publidh_right_name publidh_content_item">
<div class="publidh_content_item_title">{{$t('Publish.CollectionTitle')}}</div> <div class="publidh_content_item_title">{{$t('Publish.CollectionTitle')}}</div>
<input type="text" :disabled="selectTagList.length > 0" v-model="subPublishDate.portfolioName">
<!-- <div class="publidh_content_item_tag">
<a-tag closable color="purple">#RCAworkshop_2024</a-tag>
</div> -->
</div>
<div class="publidh_right_name publidh_content_item">
<div class="publidh_content_item_title">{{$t('Publish.topic')}}</div>
<div class="publidh_content_item_tag"> <div class="publidh_content_item_tag">
<input type="text" v-model="subPublishDate.portfolioName"> <div v-for="item,index in selectTagList">
<a-tag closable color="purple">#RCAworkshop_2024</a-tag> <a-tooltip v-if="index > 4" :title="+'+'+selectTagList.length - 4">
<a-tag closable color="purple" @close="handleClose(item,index)">
{{ item.tag }}
</a-tag>
</a-tooltip>
<a-tag v-else closable color="purple" @close="handleClose(item,index)">
{{ item.tag }}
</a-tag>
</div>
</div>
<div class="publidh_content_item_tagList">
<div v-for="item,index in tagList" @click="pushTag(item,index)">
<a-tag color="purple">{{ item.tag }}</a-tag>
</div>
</div> </div>
<a-tag color="purple">#RCAworkshop_2024</a-tag>
</div> </div>
<div class="publidh_right_name publidh_content_item"> <div class="publidh_right_name publidh_content_item">
<div class="publidh_content_item_title">{{$t('Publish.Description')}}</div> <div class="publidh_content_item_title">{{$t('Publish.Description')}}</div>
@@ -127,6 +146,8 @@ export default defineComponent({
isSecondaryCreation:true, isSecondaryCreation:true,
} }
}) })
let tagList = ref([{tag:'RCAworkshop_2024'}])
let selectTagList:any = ref([])
// let textarea: any = ref(null) // let textarea: any = ref(null)
// let setCopy = ()=>{ // let setCopy = ()=>{
// textarea.value.select() // textarea.value.select()
@@ -178,6 +199,7 @@ export default defineComponent({
publish.value = false publish.value = false
publishData.isShowMark = false publishData.isShowMark = false
publishData.subPublishDate = {} publishData.subPublishDate = {}
selectTagList.value = []
} }
let cancelDsign = ()=>{ let cancelDsign = ()=>{
Modal.confirm({ 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 { return {
publish, publish,
publishMask, publishMask,
...toRefs(publishData), ...toRefs(publishData),
// textarea, // textarea,
// setCopy, // setCopy,
tagList,
selectTagList,
init, init,
setPermissionsItem, setPermissionsItem,
setPermissions, setPermissions,
@@ -253,6 +287,8 @@ export default defineComponent({
setCover, setCover,
cancelDsign, cancelDsign,
setPublish, setPublish,
handleClose,
pushTag,
}; };
}, },
data() { data() {
@@ -287,15 +323,15 @@ export default defineComponent({
// top: 50%; // top: 50%;
// transform: translateY(-50%); // transform: translateY(-50%);
} }
.publidh_content_item_tag{ // .publidh_content_item_tag{
position: relative; // position: relative;
.ant-tag{ // .ant-tag{
position: absolute; // position: absolute;
left: 10px; // left: 10px;
top: 50%; // top: 50%;
transform: translateY(-50%); // transform: translateY(-50%);
} // }
} // }
.publish_content_bottom{ .publish_content_bottom{
--border-color: #c4c4c4; --border-color: #c4c4c4;
display: flex; display: flex;
@@ -313,6 +349,31 @@ export default defineComponent({
font-size: 1.8rem; font-size: 1.8rem;
margin-bottom: 1rem; 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{ .publidh_content_item_intro{
font-size: 1.4rem; font-size: 1.4rem;

1
src/lang/cn.ts
View File

@@ -530,6 +530,7 @@ export default {
Publish:'发布', Publish:'发布',
CoverPicture:'封面图', CoverPicture:'封面图',
CollectionTitle:'系列名字', CollectionTitle:'系列名字',
topic:'话题',
Description:'描述', Description:'描述',
Permissions:'权限', Permissions:'权限',
PermissionsItem1:'允许其他用户进行二次创作。', PermissionsItem1:'允许其他用户进行二次创作。',

1
src/lang/en.ts
View File

@@ -530,6 +530,7 @@ export default {
Publish:'Publish', Publish:'Publish',
CoverPicture:'Cover Picture', CoverPicture:'Cover Picture',
CollectionTitle:'Collection Title', CollectionTitle:'Collection Title',
topic:'Topic',
Description:'Description', Description:'Description',
Permissions:'Permissions', Permissions:'Permissions',
PermissionsItem1:'Allow other users to perform secondary creation.', PermissionsItem1:'Allow other users to perform secondary creation.',

2
src/views/HomeView/HomeView.vue
View File

@@ -968,7 +968,7 @@ export default defineComponent({
name:data.collection.moodTemplateName, 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( moodboardFiles: this.dealViewChooseData(
data.collection.moodBoards,"Moodboard" data.collection.moodBoards,"Moodboard"
), ),