2023-11-13-dist
This commit is contained in:
@@ -183,17 +183,18 @@ export default defineComponent({
|
||||
//操作旋转
|
||||
rotote:{
|
||||
mounted(el,value){
|
||||
|
||||
el.addEventListener('mousedown', (e) => {
|
||||
let elParent = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
|
||||
let mouse = true;
|
||||
let angle = 0
|
||||
let num = 1
|
||||
let x = 0
|
||||
let y = 0
|
||||
num = value.value[1].scale
|
||||
angle = value.value[1].rotateZ
|
||||
let elParent = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName('modal_imgItem')[value.value[0]]
|
||||
num = value.instance.printStyleList[value.instance.imgDomIndex].transform.scale
|
||||
angle = value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ
|
||||
// 添加鼠标按下事件监听器
|
||||
el.style.transform = "rotateZ("+ angle + "deg)"
|
||||
el.addEventListener('mousedown', (e) => {
|
||||
// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
|
||||
// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
||||
e.stopPropagation()
|
||||
@@ -215,8 +216,7 @@ export default defineComponent({
|
||||
document.addEventListener('mousemove', mousemove);
|
||||
// 添加鼠标松开事件监听器
|
||||
let mouseup = () => {
|
||||
value.instance.printStyleList[value?.value[0]].transform.rotateZ = angle
|
||||
// console.log(value.instance.printStyleList);
|
||||
value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle
|
||||
mouse = false;
|
||||
document.removeEventListener('mouseup',mouseup)
|
||||
document.removeEventListener('mousemove',mousemove)
|
||||
@@ -365,18 +365,18 @@ export default defineComponent({
|
||||
let y = ( e.y - this.printStyleList[this.imgDomIndex].centers.top)+'px'
|
||||
this.printStyleList[this.imgDomIndex].style.left = x
|
||||
this.printStyleList[this.imgDomIndex].style.top = y
|
||||
if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
|
||||
this.printStyleList[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
|
||||
}
|
||||
if(x.replace(/px/g,'') <= 0){
|
||||
this.printStyleList[this.imgDomIndex].style.left = 0+'px'
|
||||
}
|
||||
if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
|
||||
this.printStyleList[this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
|
||||
}
|
||||
if(y.replace(/px/g,'') <= 0){
|
||||
this.printStyleList[this.imgDomIndex].style.top = 0+'px'
|
||||
}
|
||||
// if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
|
||||
// this.printStyleList[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
|
||||
// }
|
||||
// if(x.replace(/px/g,'') <= 0){
|
||||
// this.printStyleList[this.imgDomIndex].style.left = 0+'px'
|
||||
// }
|
||||
// if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
|
||||
// this.printStyleList[this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
|
||||
// }
|
||||
// if(y.replace(/px/g,'') <= 0){
|
||||
// this.printStyleList[this.imgDomIndex].style.top = 0+'px'
|
||||
// }
|
||||
},
|
||||
|
||||
sizeMousemove(e) {
|
||||
@@ -452,7 +452,7 @@ export default defineComponent({
|
||||
if(this.printAmount>this.printStyleList.length){
|
||||
let num = this.printAmount - this.printStyleList.length
|
||||
for (let index = 0; index < num; index++) {
|
||||
this.printStyleList.push(this.printStyleList[this.printStyleList.length-1])
|
||||
this.printStyleList.push(JSON.parse(JSON.stringify(this.printStyleList[this.printStyleList.length-1])))
|
||||
this.printStyleList[this.printStyleList.length-1].transform.rotateZ = 0
|
||||
this.refetchTemplate(this.printStyleList.length-1)
|
||||
this.designOpenrtionList.push(this.current.printObject.prints[this.current.printObject.prints.length-1])
|
||||
@@ -487,12 +487,14 @@ export default defineComponent({
|
||||
let rotateZ1 = Math.trunc(Math.random()*360)+1
|
||||
let rotateZ2 = Math.trunc(Math.random()*360)+1
|
||||
let sketch = document.getElementsByClassName("designOpenrtion_modal")[0]?.getElementsByClassName('designOpenrtion_sketch')[0]
|
||||
let width = Math.trunc(Math.random()*(sketch?.width-sketch?.width/3))+1+sketch?.width/3
|
||||
let width
|
||||
let scale
|
||||
if(this.print.width - this.print.height > 0 || this.print.width - this.print.height == 0){
|
||||
if(this.print.width>this.print.height){
|
||||
width = Math.trunc(Math.random()*(sketch?.width-sketch?.width/2))+sketch?.width/3
|
||||
scale = width / this.print.width.replace(/px/g,'')
|
||||
}else{
|
||||
scale = width / this.print.width.replace(/px/g,'')
|
||||
width = Math.trunc(Math.random()*(sketch?.height-sketch?.height/2))+sketch?.height/3
|
||||
scale = width / this.print.height.replace(/px/g,'')
|
||||
}
|
||||
// let x = sketch.width-Number(this.print.width.replace(/px/g,''))
|
||||
// let y = sketch.height-Number(this.print.height.replace(/px/g,''))
|
||||
|
||||
@@ -4,14 +4,14 @@
|
||||
<!-- <div class="img_block_item" v-if="allBoardData?.moodTemplateId">
|
||||
<MoodTemplate :fileList="allBoardData?.moodboardFiles" :moodTemplateId="allBoardData?.moodTemplateId"></MoodTemplate>
|
||||
</div> -->
|
||||
<div class="img_block_item" v-if="allBoardData?.disposeMoodboard?.length != 0 && allBoardData?.disposeMoodboard?.[0] != null">
|
||||
<div v-show="exportNav[0].change" class="img_block_item" v-if="allBoardData?.disposeMoodboard?.length != 0 && allBoardData?.disposeMoodboard?.[0] != null">
|
||||
<div v-for="(mood) in allBoardData?.disposeMoodboard" :key="mood" v-show="mood?.imgUrl != ''" class="lager_img_item lager_img_disposeMoodboard" >
|
||||
<div class="all_img_item_block">
|
||||
<img class="all_img_content cover_img" :src="mood?.imgUrl" >
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="img_block_item" v-else>
|
||||
<div v-show="exportNav[0].change" class="img_block_item" v-else>
|
||||
<div v-for="(mood) in allBoardData?.moodboardFiles" :key="mood" v-show="mood?.imgUrl != ''" class="lager_img_item lager_img_moodboard" >
|
||||
<div class="all_img_item_block">
|
||||
<img class="all_img_content cover_img" :src="mood?.imgUrl" >
|
||||
@@ -19,7 +19,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="img_block_item">
|
||||
<div v-show="exportNav[1].change" class="img_block_item">
|
||||
<div class="small_img_item" v-for="(print) in allBoardData.printboardFiles" :key="print">
|
||||
<div class="all_img_item_block">
|
||||
<img class="all_img_content cover_img" :src="print.imgUrl">
|
||||
@@ -32,7 +32,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="img_block_item">
|
||||
<div v-show="exportNav[2].change" class="img_block_item">
|
||||
<div class="color_item" v-for="(color) in allBoardData.colorBoards" :key="color">
|
||||
<div class="color_content" :style="{background:`rgb(${color?.rgbValue?.r},${color?.rgbValue?.g},${color?.rgbValue?.b})`}"></div>
|
||||
<div class="color_content_body">
|
||||
@@ -49,7 +49,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="img_block_item img_block_item_sketch">
|
||||
<div v-show="exportNav[3].change" class="img_block_item img_block_item_sketch">
|
||||
<div class="lager_img_item" :class="'lager_img_item'+index" v-for="(item,index) in sketch" :key="item">
|
||||
<div class="all_img_item_block" v-for="v in item" :key="sketch">
|
||||
<img class="all_img_content" :src="v?.imgUrl">
|
||||
@@ -63,19 +63,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="img_block_item img_block_item_sketch_like h50">
|
||||
<div v-show="exportNav[4].change" class="img_block_item img_block_item_sketch_like h50">
|
||||
<div class="lager_img_item" v-for="(design) in likeDesignCollectionList" :key="design.designItemUrl">
|
||||
<div class="all_img_item_block">
|
||||
<img class="all_img_content" :src="design.designItemUrl">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent,ref,nextTick} from 'vue'
|
||||
import { computed, defineComponent,ref,nextTick, inject} from 'vue'
|
||||
import MoodTemplate from '@/component/HomePage/MoodTemplate.vue'
|
||||
import { useStore } from "vuex";
|
||||
export default defineComponent({
|
||||
@@ -86,11 +84,13 @@ export default defineComponent({
|
||||
const store = useStore();
|
||||
let allBoardData:any = computed(()=>{return store.state.UploadFilesModule.allBoardData})
|
||||
let likeDesignCollectionList : any = computed(()=>{return store.state.HomeStoreModule.likeDesignCollectionList})
|
||||
let exportNav = inject('exportNav')
|
||||
return {
|
||||
allBoardData,
|
||||
likeDesignCollectionList,
|
||||
sketch,
|
||||
sketchList,
|
||||
exportNav,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -103,6 +103,18 @@ export default defineComponent({
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
// 'exportNav[3].change':{
|
||||
// handler(newVal:any,oldVal:any){
|
||||
// console.log(1111);
|
||||
// if(newVal){
|
||||
// this.sketchList = []
|
||||
// this.sketchList = this.allBoardData.sketchboardFiles
|
||||
// this.setSketch()
|
||||
// }
|
||||
|
||||
// },
|
||||
// immediate: true
|
||||
// },
|
||||
},
|
||||
methods: {
|
||||
setSketch(){
|
||||
@@ -111,6 +123,9 @@ export default defineComponent({
|
||||
let sketch1:any = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item0')[0]?.getBoundingClientRect()
|
||||
let sketch2:any = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item1')[0]?.getBoundingClientRect()
|
||||
let sketch3:any = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item2')[0]?.getBoundingClientRect()
|
||||
sketch1 = sketch1?sketch1:{}
|
||||
sketch2 = sketch2?sketch2:{}
|
||||
sketch3 = sketch3?sketch3:{}
|
||||
sketch1.num = 0
|
||||
sketch2.num = 1
|
||||
sketch3.num = 2
|
||||
@@ -265,17 +280,21 @@ export default defineComponent({
|
||||
&.img_block_item_sketch_like{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
>div{
|
||||
width: 45%;
|
||||
height: 25rem;
|
||||
}
|
||||
}
|
||||
&.h50{
|
||||
.lager_img_item{
|
||||
height: 50rem;
|
||||
// width: 45%;
|
||||
width: calc(100%/4.5);
|
||||
margin-right: 2.5%;
|
||||
margin-bottom: 2.5%;
|
||||
height: auto;
|
||||
// height: 25rem;
|
||||
}
|
||||
}
|
||||
// &.h50{
|
||||
// .lager_img_item{
|
||||
// height: 50rem;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -376,7 +376,7 @@ export default defineComponent({
|
||||
setprintModel(num:any){
|
||||
if(num == 3){
|
||||
this.printModel = {
|
||||
num : this.t('Generate.Generate'),
|
||||
num : 'Generate',
|
||||
optype:false,
|
||||
name:this.t('Generate.Generate')
|
||||
}
|
||||
|
||||
@@ -526,6 +526,7 @@ export default defineComponent({
|
||||
.icon-xiala {
|
||||
font-size: 1.4rem;
|
||||
cursor: pointer;
|
||||
transition: .3s all;
|
||||
}
|
||||
|
||||
.icon_rotate {
|
||||
|
||||
@@ -9,36 +9,38 @@
|
||||
@cancel="clearSetLabel"
|
||||
>
|
||||
<div class="setLabel_centent">
|
||||
<div class="started_btn" @click="removeLabel(options)">删除</div>
|
||||
<ul class="optionsItem">
|
||||
<li class="optionsItem_title" v-for="optionsItem,optionsIndex in options" :key="optionsItem.id">
|
||||
<div class="setLabel_text">
|
||||
<a-checkbox v-model:checked="optionsItem.checkAll" @change="onCheckAllChange(optionsItem)"></a-checkbox>
|
||||
<span v-show="!optionsItem.openType">{{ optionsItem.classificationName }}</span>
|
||||
<span v-show="!optionsItem.openType" :title="optionsItem.classificationName">{{ optionsItem.classificationName }}</span>
|
||||
<input v-show="optionsItem.openType" type="text" v-model="itemName">
|
||||
<i v-show="optionsItem.openType" @click.stop="putName(index,'affirm',optionsItem)" class="fi fi-br-check"></i>
|
||||
<i v-show="optionsItem.openType" @click.stop="putName(optionsIndex,'affirm',optionsItem)" class="fi fi-br-check"></i>
|
||||
<i v-show="!optionsItem.openType" @click.stop="putName(optionsIndex,'put',optionsItem)" class="fi fi-rr-edit"></i>
|
||||
</div>
|
||||
|
||||
<ul class="childrenItem active" v-mousewheel>
|
||||
<li class="childrenItem_title setLabel_text" v-for="childrenItem,childrenIndex in optionsItem.childList" :key="childrenItem.id">
|
||||
<a-checkbox v-model:checked="childrenItem.checkAll" @change="onCheckAllchildrenItem(optionsItem)"></a-checkbox>
|
||||
<span v-show="!childrenItem.openType">{{ childrenItem.classificationName }}</span>
|
||||
<span v-show="!childrenItem.openType" :title="childrenItem.classificationName">{{ childrenItem.classificationName }}</span>
|
||||
<input v-show="childrenItem.openType" type="text" v-model="itemName">
|
||||
<i v-show="childrenItem.openType" @click.stop="putName(index,'affirm',childrenItem)" class="fi fi-br-check"></i>
|
||||
<i v-show="childrenItem.openType" @click.stop="putName(childrenIndex,'affirm',childrenItem)" class="fi fi-br-check"></i>
|
||||
<i v-show="!childrenItem.openType" @click.stop="putName(childrenIndex,'put',childrenItem)" class="fi fi-rr-edit"></i>
|
||||
</li>
|
||||
<li class="newLabel setLabel_text">
|
||||
<input v-show="optionsItem.addOpenType" type="text" v-model="itemName">
|
||||
<i @click.stop="putName(-1,'affirm',optionsItem)" v-show="optionsItem.addOpenType" class="fi fi-br-check"></i>
|
||||
<div v-show="!optionsItem.addOpenType" @click="newLabel(optionsItem,optionsItem.id)">+</div>
|
||||
<div class="addLabel" v-show="!optionsItem.addOpenType" @click="newLabel(optionsItem,optionsItem.id)">+</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="newLabel setLabel_text optionsItem_title">
|
||||
<input v-show="openType" type="text" v-model="itemName">
|
||||
<i @click.stop="putName(-1,'affirm','')" v-show="openType" class="fi fi-br-check"></i>
|
||||
<div v-show="!openType" @click="newLabel('')">+</div>
|
||||
<div>
|
||||
<input v-show="openType" type="text" v-model="itemName">
|
||||
<i @click.stop="putName(-1,'affirm','')" v-show="openType" class="fi fi-br-check"></i>
|
||||
<div class="addLabel" v-show="!openType" @click="newLabel('','')">+</div>
|
||||
</div>
|
||||
<div class="started_btn" @click="removeLabel(options)">删除</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -299,19 +301,13 @@ export default defineComponent({
|
||||
max-height: 65rem;
|
||||
overflow-y: auto;
|
||||
// border-radius: ;
|
||||
position: relative;
|
||||
&.setLabel_centent::-webkit-scrollbar{display: none;}
|
||||
|
||||
&.active{
|
||||
overflow: hidden;
|
||||
}
|
||||
.started_btn{
|
||||
position: absolute;
|
||||
width: auto;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
ul{
|
||||
display: flex;
|
||||
li{
|
||||
@@ -328,6 +324,7 @@ export default defineComponent({
|
||||
width: 80%;
|
||||
background: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
}
|
||||
.setLabel_text{
|
||||
display: flex;
|
||||
@@ -335,25 +332,35 @@ export default defineComponent({
|
||||
align-items: center;
|
||||
padding: .5rem 1rem;
|
||||
width: 16rem;
|
||||
margin: 1rem 1rem;
|
||||
margin: 2rem 2rem;
|
||||
border-radius: 1rem;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 900;
|
||||
i{
|
||||
display: flex;
|
||||
}
|
||||
>span{
|
||||
max-width: 60%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.setLabel_text:hover{
|
||||
background: #efefef;
|
||||
}
|
||||
|
||||
}
|
||||
.optionsItem{
|
||||
flex-direction: column;
|
||||
|
||||
padding: 1rem;
|
||||
.optionsItem_title{
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
border-radius: 1rem;
|
||||
align-items: flex-start;
|
||||
background-color: #f9f9f9;
|
||||
border: 0.1rem solid #ebebeb;
|
||||
// border-bottom: 2px solid rgba(0,0,0,.2);
|
||||
box-shadow: 0px 0px 5px 0px rgba(0,0,0,.3);
|
||||
>label{
|
||||
align-items: center;
|
||||
}
|
||||
@@ -361,7 +368,27 @@ export default defineComponent({
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 2rem;
|
||||
// padding-bottom: 2rem;
|
||||
.setLabel_text{
|
||||
font-weight: 300;
|
||||
margin: 1rem 1rem;
|
||||
background: #f0f0f0;
|
||||
// background: #d5d5d5;
|
||||
font-size: 1.4rem;
|
||||
label{
|
||||
transform: scale(.8);
|
||||
}
|
||||
.fi-rr-edit{
|
||||
opacity: 0;
|
||||
transition: .3s all;
|
||||
}
|
||||
}
|
||||
.setLabel_text:hover{
|
||||
// background: #efefef;
|
||||
.fi-rr-edit{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.active::-webkit-scrollbar-button:single-button{
|
||||
display: none;
|
||||
}
|
||||
@@ -401,8 +428,30 @@ export default defineComponent({
|
||||
&.optionsItem_title{
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
justify-content: space-around;
|
||||
border: none;
|
||||
background: none;
|
||||
position: sticky;
|
||||
background: #fff;
|
||||
border: none;
|
||||
>div{
|
||||
}
|
||||
.started_btn{
|
||||
width: auto;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
// margin-right: auto;
|
||||
}
|
||||
}
|
||||
div{
|
||||
>div{
|
||||
display: flex;
|
||||
width: 16rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.addLabel{
|
||||
border-radius: 50%;
|
||||
border: 1px solid #000;
|
||||
display: inline-block;
|
||||
|
||||
Reference in New Issue
Block a user