1198 lines
36 KiB
Vue
1198 lines
36 KiB
Vue
<template>
|
|
<div ref="layoutModal">
|
|
<a-modal
|
|
class="layout_modal generalModel"
|
|
v-model:visible="layout"
|
|
:footer="null"
|
|
:get-container="() => $refs.layoutModal"
|
|
width="78%"
|
|
:maskClosable="false"
|
|
:centered="true"
|
|
:closable="false"
|
|
:keyboard="false"
|
|
:mask="true"
|
|
:destroyOnClose="true"
|
|
>
|
|
<div class="layout_content">
|
|
<div class="collection_title">
|
|
<div class="collection_title_text">
|
|
<div class="layout_title">{{ $t('layout.MoodBoardDesign') }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="generalModel_btn">
|
|
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
|
<svg width="100%" height="100%" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
|
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
|
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="layout_nav">
|
|
<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @mousedown="setpitch(item,index)" @touchstart.passive="setpitch(item,index)">
|
|
<img :src="item.imgUrl">
|
|
</div>
|
|
</div>
|
|
<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
|
|
<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="item" @mousedown="setpitch(item,index)" @touchstart="setpitch(item,index)" ref="content" :style="{'background-image':`url(${item.imgUrl})`,'transform':`scale(${item.zoom?item.zoom:1}) rotateZ(${item.angle?item.angle:0}deg)`}">
|
|
<!-- <img crossOrigin="anonymous" :src="item.imgUrl" :style="{'transform':`translate(-50%, -50%) scale(${item.zoom?item.zoom:1}) rotateZ(${item.angle?item.angle:0}deg)`}" draggable="false" :class="moodbClassName[index]" v-modelImg> -->
|
|
<ul v-show="item.setPitch" class="layout_btn" >
|
|
<li class="layout_btn_top" v-compile.stop="'top'"></li>
|
|
<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li>
|
|
<li class="layout_btn_left" v-compile.stop="'left'"></li>
|
|
<li class="layout_btn_right" v-compile.stop="'right'"></li>
|
|
<li class="layout_rotote" v-rotote.stop='item' :style="{'transform':`translate(-50%, -50%) rotateZ(${item.angle}deg)`}"></li>
|
|
<li class="layout_translate" v-translate.stop></li>
|
|
<!-- <li class="layout_translate" v-translate.stop></li> -->
|
|
<li class="layout_angle_tr" v-angle.stop = "'top'"></li>
|
|
<li class="layout_angle_tl" v-angle.stop = "'right'"></li>
|
|
<li class="layout_angle_br" v-angle.stop = "'bottom'"></li>
|
|
<li class="layout_angle_bl" v-angle.stop = "'left'"></li>
|
|
</ul>
|
|
</div>
|
|
<!-- <img v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="item" :src="item.imgUrl"> -->
|
|
<!-- <draggable
|
|
v-model="layoutList"
|
|
group="people"
|
|
@start="drag=true"
|
|
@end="drag=false"
|
|
animation= "150"
|
|
item-key="id">
|
|
<template #item="{element,index}">
|
|
<div :data-id="element.id_" :class="moodbClassName[index]" class="modal_imgItem">
|
|
<img :src="element.imgUrl">
|
|
</div>
|
|
</template>
|
|
</draggable> -->
|
|
</div>
|
|
|
|
<div class="layout_left">
|
|
<div class="layout_left_text">
|
|
{{ $t('layout.LayerOptions') }}
|
|
</div>
|
|
<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
|
|
<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layout_right" v-show="isMobile">
|
|
<div class="layout_right_text">
|
|
{{ $t('DesignPrintOperation.Scale') }}
|
|
</div>
|
|
<a-slider
|
|
v-model:value="moodItemScale"
|
|
@change="setMoodItemScale"
|
|
>
|
|
</a-slider>
|
|
</div>
|
|
<!-- <div class="layout_right">
|
|
<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
|
|
<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
<div
|
|
class="button_second submit_button"
|
|
@click="submitTemplate()"
|
|
>
|
|
{{ $t('layout.Submit') }}
|
|
</div>
|
|
</div>
|
|
<div class="mark_loading" v-show="loadingShow">
|
|
<a-spin size="large" />
|
|
</div>
|
|
<a-upload
|
|
:capture="null"
|
|
:action="uploadUrl + '/api/element/upload'"
|
|
list-type="picture-card"
|
|
:data="{
|
|
...upload,
|
|
}"
|
|
:headers="{ Authorization: token }"
|
|
:before-upload="beforeUpload"
|
|
multiple
|
|
accept=".jpg,.png,.jpeg,.bmp"
|
|
>
|
|
</a-upload>
|
|
</a-modal>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, h, ref ,computed,reactive, nextTick} from "vue";
|
|
// import { LoadingOutlined } from "@ant-design/icons-vue";
|
|
import { useStore } from "vuex";
|
|
import GO from "@/tool/GO";
|
|
import moodb from "@/tool/moodb";
|
|
import draggable from 'vuedraggable'
|
|
import { Https } from "@/tool/https";
|
|
import { getCookie } from "@/tool/cookie";
|
|
import domTurnImg from '@/tool/domTurnImg'
|
|
import { getUploadUrl } from "@/tool/util";
|
|
import { getMousePosition } from "@/tool/mdEvent";
|
|
export default defineComponent({
|
|
props:["moodb_className",'flex_direction'],
|
|
components: {
|
|
draggable
|
|
},
|
|
setup(prop) {
|
|
let store = useStore()
|
|
let layout: any = ref(false);
|
|
let templateFileList: any = ref([]);
|
|
let openClick: any = ref(1);
|
|
let drag = false;
|
|
let layoutList:any = ref([])
|
|
const content:any = ref<HTMLElement | null>(null);
|
|
let loadingShow = ref(false)
|
|
let styleObj:any = {}
|
|
let moodItemScale = ref(0)
|
|
let domObj = {
|
|
dom:['img','ul','.layout_rotote','.layout_translate','.layout_angle_tr','.layout_angle_tl','.layout_angle_br','.layout_angle_bl'],
|
|
domStyle:['imgStyle','borStyle','rototeStyle','translateStyle','angleTRStyle','angleTLStyle','angleBRStyle','angleBLStyle'],
|
|
}
|
|
let isMobile = ref(false)
|
|
return {
|
|
layout,
|
|
templateFileList,
|
|
openClick,
|
|
drag,
|
|
layoutList,
|
|
content,
|
|
loadingShow,
|
|
moodItemScale,
|
|
styleObj,
|
|
domObj,
|
|
isMobile,
|
|
};
|
|
},
|
|
data() {
|
|
return {
|
|
// moodTemplateId: "", //模板id
|
|
store: useStore(),
|
|
|
|
moodb : moodb.moodb_,
|
|
moodbList:{},
|
|
moodbClassName:[],
|
|
setabsolute:false,
|
|
token: "",
|
|
uploadUrl: "",
|
|
moodIndex:0,
|
|
upload: {
|
|
isPin: 0,
|
|
gender:'',
|
|
level1Type: "Moodboard",
|
|
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
},
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
this.token = getCookie("token") || "";
|
|
this.uploadUrl = getUploadUrl();
|
|
},
|
|
directives:{
|
|
//操作移动
|
|
layout:{
|
|
mounted (el,layout:any,binding) {
|
|
|
|
let mousedown = function(event: MouseEvent){
|
|
let e:any = getMousePosition(event,false)
|
|
mouseDownOperation(e)
|
|
}
|
|
|
|
let touchstart = function(event: any){
|
|
let e:any = getMousePosition(event,true)
|
|
mouseDownOperation(e)
|
|
}
|
|
|
|
let mouseDownOperation = function(e: MouseEvent){
|
|
el.parentElement.children.forEach((v:any) => {
|
|
v.style.left = v.offsetLeft+'px'
|
|
v.style.top = v.offsetTop+'px'
|
|
|
|
});
|
|
el.parentElement.children.forEach((v:any) => {
|
|
v.classList.add('active')
|
|
});
|
|
el.style.zIndex = GO.zIndex++
|
|
let left = el.style.left? el.style.left.replace(/px/g,'') : 0
|
|
let top = el.style.top? el.style.top.replace(/px/g,'') : 0
|
|
let mouseX = e.offsetX //鼠标点击位置到domleft距离
|
|
let mouseY = e.offsetY
|
|
let domX = e.clientX - e.offsetX - Number(left)//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
|
|
let domY = e.clientY - e.offsetY - Number(top)
|
|
let mouse = true
|
|
let mouseMove = function(event:MouseEvent){
|
|
let e:any = getMousePosition(event,false)
|
|
mouseMoveOperation(e)
|
|
}
|
|
let touchmove = function(event:any){
|
|
let e:any = getMousePosition(event,true)
|
|
mouseMoveOperation(e)
|
|
}
|
|
let mouseMoveOperation = (e:any)=>{
|
|
if(mouse){
|
|
el.style.left = e.clientX-mouseX - domX+'px'
|
|
el.style.top = e.clientY-mouseY - domY+'px'
|
|
if(el.offsetLeft <=0){
|
|
el.style.left = 0+'px'
|
|
}
|
|
if(el.offsetTop <=0){
|
|
el.style.top = 0+'px'
|
|
}
|
|
if(el.offsetLeft+el.offsetWidth >= el.parentNode.offsetWidth){
|
|
el.style.left = el.parentNode.offsetWidth - el.offsetWidth+'px'
|
|
}
|
|
if(el.offsetTop+el.offsetHeight >= el.parentNode.offsetHeight){
|
|
el.style.top = el.parentNode.offsetHeight - el.offsetHeight+'px'
|
|
}
|
|
}
|
|
}
|
|
let mouseup = function(){
|
|
mouse = false
|
|
document.removeEventListener('mousemove',mouseMove)
|
|
document.removeEventListener('touchmove',touchmove)
|
|
document.removeEventListener('mouseup',mouseup)
|
|
document.removeEventListener('touchend',mouseup)
|
|
//移动端
|
|
}
|
|
document.addEventListener('mousemove', mouseMove);
|
|
document.addEventListener('touchmove', touchmove);
|
|
document.addEventListener('mouseup', mouseup);
|
|
document.addEventListener('touchend', mouseup);
|
|
//移动端
|
|
}
|
|
el.addEventListener('mousedown',mousedown)
|
|
el.addEventListener('touchstart',touchstart)
|
|
|
|
},
|
|
updated (el,layout) {
|
|
|
|
}
|
|
},
|
|
//操作大小
|
|
compile:{
|
|
mounted (el,compile) {
|
|
let mousedown = (event:any)=>{
|
|
let e:any = getMousePosition(event,false)
|
|
mouseDownOperation(e)
|
|
}
|
|
let touchstart = (event:any)=>{
|
|
let e:any = getMousePosition(event,true)
|
|
mouseDownOperation(e)
|
|
}
|
|
let mouseDownOperation = (e: MouseEvent)=>{
|
|
let elParent = el.parentNode.parentNode
|
|
el.parentElement.parentNode.parentNode.children.forEach((v:any) => {
|
|
v.style.left = v.offsetLeft+'px'
|
|
v.style.top = v.offsetTop+'px'
|
|
});
|
|
el.parentElement.parentNode.parentNode.children.forEach((v:any) => {
|
|
v.classList.add('active')
|
|
});
|
|
if(compile.value == 'right'){
|
|
|
|
}else if(compile.value == 'left'){
|
|
elParent.style.right = elParent.parentNode.offsetWidth - elParent.offsetWidth - elParent.offsetLeft + 'px'
|
|
elParent.style.left = 'auto'
|
|
}else if(compile.value == 'top'){
|
|
elParent.style.bottom = elParent.parentNode.offsetHeight - elParent.offsetHeight - elParent.offsetTop + 'px'
|
|
elParent.style.top = 'auto'
|
|
}else if(compile.value == 'bottom'){
|
|
|
|
}
|
|
|
|
let gpsXY:any
|
|
let parent:any
|
|
if(compile.value == 'left' || compile.value == 'right'){
|
|
gpsXY = e.clientX
|
|
parent = elParent.offsetWidth
|
|
}else{
|
|
parent = elParent.offsetHeight
|
|
gpsXY = e.clientY
|
|
}
|
|
let mouse = true
|
|
let mouseMove = function(event:MouseEvent){
|
|
let e:any = getMousePosition(event,false)
|
|
mouseMoveOperation(e)
|
|
}
|
|
let touchmove = function(event:any){
|
|
let e:any = getMousePosition(event,true)
|
|
mouseMoveOperation(e)
|
|
}
|
|
let mouseMoveOperation = function(e:MouseEvent){
|
|
if(mouse){
|
|
if(compile.value == 'left'){
|
|
elParent.style.width = parent + gpsXY - e.clientX + 'px'
|
|
}else if(compile.value == 'right'){
|
|
elParent.style.width = parent + e.clientX - gpsXY + 'px'
|
|
}else if(compile.value == 'top'){
|
|
elParent.style.height = parent + gpsXY - e.clientY + 'px'
|
|
}else if(compile.value == 'bottom'){
|
|
elParent.style.height = parent + e.clientY - gpsXY + 'px'
|
|
|
|
}
|
|
|
|
if(elParent.parentNode.offsetWidth <= elParent.offsetWidth+Number(elParent.style.right.replace(/px/g,''))){
|
|
elParent.style.width = elParent.parentNode.offsetWidth - Number(elParent.style.right.replace(/px/g,''))+'px'
|
|
}
|
|
if(elParent.offsetLeft + elParent.offsetWidth>=elParent.parentNode.offsetWidth){
|
|
elParent.style.width = elParent.parentNode.offsetWidth - elParent.offsetLeft+'px'
|
|
}
|
|
|
|
if(elParent.parentNode.offsetHeight <= elParent.offsetHeight+Number(elParent.style.bottom.replace(/px/g,''))){
|
|
elParent.style.height = elParent.parentNode.offsetHeight - Number(elParent.style.bottom.replace(/px/g,''))+'px'
|
|
}
|
|
if(elParent.offsetTop + elParent.offsetHeight>=elParent.parentNode.offsetHeight){
|
|
elParent.style.height = elParent.parentNode.offsetHeight - elParent.offsetTop+'px'
|
|
}
|
|
}
|
|
}
|
|
|
|
let mouseup = function(){
|
|
mouse = false
|
|
document.removeEventListener('mousemove',mouseMove)
|
|
document.removeEventListener('touchmove',touchmove)
|
|
document.removeEventListener('mouseup',mouseup)
|
|
document.removeEventListener('touchend',mouseup)
|
|
//移动端
|
|
}
|
|
document.addEventListener('mousemove', mouseMove);
|
|
document.addEventListener('touchmove', touchmove);
|
|
document.addEventListener('mouseup', mouseup);
|
|
document.addEventListener('touchend', mouseup);
|
|
}
|
|
el.addEventListener('mousedown',mousedown)
|
|
el.addEventListener('touchstart',touchstart)
|
|
}
|
|
},
|
|
//操作旋转
|
|
rotote:{
|
|
mounted(el,item){
|
|
let mouse = true;
|
|
let angle :any = 0
|
|
let num:any = 1
|
|
let x = 0
|
|
let y = 0
|
|
let elParent = el.parentNode.parentNode
|
|
|
|
let mousedown = function(event: MouseEvent){
|
|
let e:any = getMousePosition(event,false)
|
|
mouseDownOperation(e)
|
|
}
|
|
|
|
let touchstart = function(event: any){
|
|
let e:any = getMousePosition(event,true)
|
|
mouseDownOperation(e)
|
|
}
|
|
let mouseDownOperation = (e:any) => {
|
|
mouse = true;
|
|
var info = el.getBoundingClientRect();
|
|
let eX = info.x + info.width / 2;
|
|
let eY = info.y + info.height / 2;
|
|
num = item.value.zoom?item.value.zoom :1
|
|
angle = item.value.angle?item.value.angle:0
|
|
let mouseMove = function(event:MouseEvent){
|
|
let e:any = getMousePosition(event,false)
|
|
mouseMoveOperation(e)
|
|
}
|
|
let touchmove = function(event:any){
|
|
let e:any = getMousePosition(event,true)
|
|
mouseMoveOperation(e)
|
|
}
|
|
let mouseMoveOperation = (e:MouseEvent) => {
|
|
if (mouse) {
|
|
let X = eX
|
|
let Y = eY
|
|
let x:any = e.clientX - X
|
|
let y:any = Y - e.clientY
|
|
angle = Math.atan2(x,y)*(180 / Math.PI)
|
|
item.value.angle = angle
|
|
}
|
|
};
|
|
|
|
// 添加鼠标松开事件监听器
|
|
let mouseup = function(){
|
|
mouse = false
|
|
document.removeEventListener('mousemove',mouseMove)
|
|
document.removeEventListener('touchmove',touchmove)
|
|
document.removeEventListener('mouseup',mouseup)
|
|
document.removeEventListener('touchend',mouseup)
|
|
//移动端
|
|
}
|
|
document.addEventListener('mousemove', mouseMove);
|
|
document.addEventListener('touchmove', touchmove);
|
|
document.addEventListener('mouseup', mouseup);
|
|
document.addEventListener('touchend', mouseup);
|
|
}
|
|
el.addEventListener('mousedown',mousedown)
|
|
el.addEventListener('touchstart',touchstart)
|
|
|
|
//缩放
|
|
let timeSwitch = true
|
|
el.parentNode.addEventListener('mousemove', (e:MouseEvent) => {
|
|
el.parentNode.addEventListener('mousewheel',(e:MouseEvent) => {
|
|
num = item.value.zoom?item.value.zoom :1
|
|
angle = item.value.angle?item.value.angle:0
|
|
if(timeSwitch){
|
|
timeSwitch = false
|
|
if((e as WheelEvent).deltaY > 0){
|
|
if(num <= 1){
|
|
num -= 0.05
|
|
}else{
|
|
num -= 0.1
|
|
}
|
|
}else{
|
|
//放大
|
|
if(num <= 1){
|
|
num += 0.05
|
|
}else{
|
|
num += 0.1
|
|
}
|
|
}
|
|
if(num >= 3){
|
|
num = 3
|
|
}else if (num < .2){
|
|
num = .2
|
|
}
|
|
setTimeout(() => {
|
|
timeSwitch = true
|
|
}, 100);
|
|
let instance:any = item.instance
|
|
instance.moodItemScale = num * 100
|
|
item.value.zoom = num
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
},
|
|
angle:{
|
|
mounted(el,angle){
|
|
let mouse = false;
|
|
let mousedown = function(event: MouseEvent){
|
|
let e:any = getMousePosition(event,false)
|
|
mouseDownOperation(e)
|
|
}
|
|
|
|
let touchstart = function(event: any){
|
|
let e:any = getMousePosition(event,true)
|
|
mouseDownOperation(e)
|
|
}
|
|
let mouseDownOperation = (e:MouseEvent) => {
|
|
el.parentNode.children.forEach((v:any) =>{
|
|
v.classList.add('eventNode')
|
|
})
|
|
mouse = true;
|
|
let elParent = el.parentNode.parentNode
|
|
let eX:any
|
|
let eY:any
|
|
let elParentSide = Math.sqrt(elParent.offsetWidth/2*elParent.offsetWidth/2+elParent.offsetHeight/2*elParent.offsetHeight/2)
|
|
let mouseMove = function(event:MouseEvent){
|
|
let e:any = getMousePosition(event,false)
|
|
mouseMoveOperation(e)
|
|
}
|
|
let touchmove = function(event:any){
|
|
let e:any = getMousePosition(event,true,el.parentNode)
|
|
mouseMoveOperation(e)
|
|
}
|
|
let mouseMoveOperation = (e:MouseEvent)=>{
|
|
if (mouse) {
|
|
if(angle.value == 'right'){
|
|
eX = elParent.offsetWidth - e.offsetX
|
|
eY = elParent.offsetHeight - e.offsetY
|
|
}else if(angle.value == 'top'){
|
|
eX = elParent.offsetWidth - e.offsetX- elParent.offsetWidth
|
|
eY = elParent.offsetHeight - e.offsetY
|
|
}else if(angle.value == 'left'){
|
|
eX = elParent.offsetWidth - e.offsetX
|
|
eY = elParent.offsetHeight - e.offsetY- elParent.offsetHeight
|
|
}else if(angle.value == 'bottom'){
|
|
eX = elParent.offsetWidth - e.offsetX - elParent.offsetWidth
|
|
eY = elParent.offsetHeight - e.offsetY - elParent.offsetHeight
|
|
}
|
|
let mouseSide = Math.sqrt(eX*eX + eY *eY)/2
|
|
// el.style.left = e.offsetX /2 +'px'
|
|
// el.style.top = e.offsetY /2+'px'
|
|
if(100 - 100 * mouseSide/elParentSide <= 50){
|
|
let Xy = (100 - 100 * mouseSide/elParentSide) / 3.33-1
|
|
if(Xy<=0){
|
|
Xy = 0
|
|
}
|
|
if(angle.value == 'right'){
|
|
el.parentNode.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
|
elParent.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
|
el.style.left = Xy +'%'
|
|
el.style.top = Xy +'%'
|
|
}else if(angle.value == 'top'){
|
|
el.parentNode.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
|
elParent.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
|
el.style.right = Xy +'%'
|
|
el.style.left = 'auto'
|
|
el.style.top = Xy +'%'
|
|
}else if(angle.value == 'bottom'){
|
|
el.parentNode.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
|
elParent.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
|
el.style.right = Xy +'%'
|
|
el.style.top = 'auto'
|
|
el.style.left = 'auto'
|
|
el.style.bottom = Xy +'%'
|
|
}else if(angle.value == 'left'){
|
|
el.parentNode.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
|
elParent.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
|
el.style.left = Xy +'%'
|
|
el.style.top = 'auto'
|
|
el.style.bottom = Xy +'%'
|
|
}
|
|
}else{
|
|
if(angle.value == 'right'){
|
|
el.parentNode.style.borderTopLeftRadius = 50+'%'
|
|
elParent.style.borderTopLeftRadius = 50+'%'
|
|
}else if(angle.value == 'top'){
|
|
el.parentNode.style.borderTopRightRadius = 50+'%'
|
|
elParent.style.borderTopRightRadius = 50+'%'
|
|
}else if(angle.value == 'bottom'){
|
|
el.parentNode.style.borderBottomRightRadius = 50+'%'
|
|
elParent.style.borderBottomRightRadius = 50+'%'
|
|
}else if(angle.value == 'left'){
|
|
el.parentNode.style.borderBottomLeftRadius = 50+'%'
|
|
elParent.style.borderBottomLeftRadius = 50+'%'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
let mouseup = function(){
|
|
mouse = false
|
|
el.parentNode.children.forEach((v:any) =>{
|
|
v.classList.remove('eventNode')
|
|
})
|
|
el.parentNode.removeEventListener('mousemove',mouseMove)
|
|
el.parentNode.removeEventListener('touchmove',touchmove)
|
|
document.removeEventListener('mouseup',mouseup)
|
|
document.removeEventListener('touchend',mouseup)
|
|
//移动端
|
|
}
|
|
el.parentNode.addEventListener('mousemove', mouseMove);
|
|
el.parentNode.addEventListener('touchmove', touchmove);
|
|
document.addEventListener('mouseup', mouseup);
|
|
document.addEventListener('touchend', mouseup);
|
|
}
|
|
el.addEventListener('mousedown',mousedown)
|
|
el.addEventListener('touchstart',touchstart)
|
|
}
|
|
},
|
|
//移动图片
|
|
translate:{
|
|
mounted (el,layout:any,binding) {
|
|
let mousedown = function(event: MouseEvent){
|
|
let e:any = getMousePosition(event,false)
|
|
mouseDownOperation(e)
|
|
}
|
|
|
|
let touchstart = function(event: any){
|
|
let e:any = getMousePosition(event,true)
|
|
mouseDownOperation(e)
|
|
}
|
|
let mouseDownOperation = (e: MouseEvent)=>{
|
|
let elParent = el.parentNode.parentNode
|
|
el.style.left = (el.offsetLeft+2)/(elParent.offsetWidth)*100+'%'
|
|
el.style.top = (el.offsetTop+2)/(elParent.offsetHeight)*100+'%'
|
|
let left = el.style.left? el.style.left.replace(/%/g,'') : 0
|
|
let top = el.style.top? el.style.top.replace(/%/g,'') : 0
|
|
let mouseX = e.offsetX //鼠标点击位置到domleft距离
|
|
let mouseY = e.offsetY
|
|
let domX = e.clientX - e.offsetX - el.offsetLeft//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
|
|
let domY = e.clientY - e.offsetY - el.offsetTop
|
|
let mouse = true
|
|
let mouseMove = function(event:MouseEvent){
|
|
let e:any = getMousePosition(event,false)
|
|
mouseMoveOperation(e)
|
|
}
|
|
let touchmove = function(event:any){
|
|
let e:any = getMousePosition(event,true)
|
|
mouseMoveOperation(e)
|
|
}
|
|
let mouseMoveOperation = function(e:MouseEvent){
|
|
if(mouse){
|
|
let left = ( e.clientX-mouseX + 2 - domX )/(elParent.offsetWidth)*100+'%'
|
|
let top = (e.clientY-mouseY + 2 - domY)/(elParent.offsetHeight)*100+'%'
|
|
el.style.left = left
|
|
el.style.top = top;
|
|
el.previousSibling.style.top = top
|
|
el.previousSibling.style.left = left
|
|
elParent.firstChild.style.top = top
|
|
elParent.firstChild.style.left = left
|
|
if(el.offsetLeft <=0){
|
|
el.style.left = 0+'%'
|
|
el.previousSibling.style.left = 0+'%'
|
|
elParent.firstChild.style.left = 0+'%'
|
|
}
|
|
if(el.offsetTop <=0){
|
|
el.style.top = 0+'%'
|
|
el.previousSibling.style.top = 0+'%'
|
|
elParent.firstChild.style.top = 0+'%'
|
|
}
|
|
// if(el.offsetLeft+el.offsetWidth >= el.parentNode.offsetWidth){
|
|
// // el.style.left = el.parentNode.offsetWidth - el.offsetWidth+'%'
|
|
// console.log(2);
|
|
// }
|
|
if(el.style.left.replace(/%/g,'')>=100){
|
|
el.style.left = 100+'%'
|
|
el.previousSibling.style.left = 100+'%'
|
|
elParent.firstChild.style.left = 100+'%'
|
|
}
|
|
// if(el.offsetTop+el.offsetHeight >= el.parentNode.offsetHeight){
|
|
// el.style.top = el.parentNode.offsetHeight - el.offsetHeight+'%'
|
|
// }
|
|
if(el.style.top.replace(/%/g,'')>=100){
|
|
el.style.top = 100+'%'
|
|
el.previousSibling.style.top = 100+'%'
|
|
elParent.firstChild.style.top = 100+'%'
|
|
}
|
|
}
|
|
}
|
|
let mouseup = function(){
|
|
mouse = false
|
|
document.removeEventListener('mousemove',mouseMove)
|
|
document.removeEventListener('touchmove',touchmove)
|
|
document.removeEventListener('mouseup',mouseup)
|
|
document.removeEventListener('touchend',mouseup)
|
|
//移动端
|
|
}
|
|
document.addEventListener('mousemove', mouseMove);
|
|
document.addEventListener('touchmove', touchmove);
|
|
document.addEventListener('mouseup', mouseup);
|
|
document.addEventListener('touchend', mouseup);
|
|
}
|
|
el.addEventListener('mousedown',mousedown)
|
|
el.addEventListener('touchstart',touchstart)
|
|
},
|
|
},
|
|
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(){
|
|
let parentList:any = this.$parent
|
|
this.styleObj = this.store.state.UploadFilesModule.moodboardPosition
|
|
parentList = parentList.layoutList
|
|
this.layout = true
|
|
// let layoutList = this.store.state.UploadFilesModule.moodboard
|
|
this.layoutList.forEach((v:any)=>{
|
|
v.setPitch = false
|
|
})
|
|
this.layoutList = parentList
|
|
this.moodbList = this.moodb[parentList.length-1]
|
|
this.moodbClassName = this.styleObj?.class?this.styleObj?.class:[]
|
|
this.moodItemScale = (this.layoutList?.[0]?this.layoutList[0].zoom:1)*100
|
|
|
|
this.initDomStyle()
|
|
|
|
},
|
|
cancelDsign(){
|
|
this.layout = false
|
|
},
|
|
setpitch(item:any,index:any){
|
|
if(!item.zoom){
|
|
item.zoom = 1
|
|
}
|
|
this.moodIndex = index
|
|
this.moodItemScale = (item.zoom?item.zoom:1)*100
|
|
this.layoutList.forEach((v:any)=>{
|
|
v.setPitch = false
|
|
})
|
|
item.setPitch = true
|
|
if(this.content){
|
|
(this.content as any)[index].style.zIndex = GO.zIndex++
|
|
|
|
}
|
|
},
|
|
setMoodItemScale(value:any){
|
|
if(value > 2){
|
|
this.layoutList[this.moodIndex].zoom = value/100
|
|
}
|
|
},
|
|
setmoodb(item:any){
|
|
this.moodbClassName = item
|
|
this.$emit('setmoodbClass',this.moodbClassName)
|
|
this.styleObj.class = this.moodbClassName
|
|
if(this.content){
|
|
for (item of (this.content as any)) {
|
|
item.classList.remove('active')
|
|
item.style.top = ''
|
|
item.style.left = ''
|
|
item.style.right = ''
|
|
item.style.bottom = ''
|
|
item.style.width = ''
|
|
item.style.height = ''
|
|
}
|
|
}
|
|
},
|
|
changeTemplateModal(){
|
|
this.layout = !this.layout
|
|
},
|
|
setIndex(styleArr:any){
|
|
let arr = JSON.parse(JSON.stringify(styleArr))
|
|
const nums = arr.map((obj:any,index:any) => {
|
|
obj.num = index
|
|
return {
|
|
num: obj.num,
|
|
zIndex: obj['z-index']?obj['z-index']:1
|
|
}
|
|
});
|
|
const sortedNums = nums.sort((a:any, b:any) => a.zIndex - b.zIndex);
|
|
|
|
GO.zIndex = sortedNums.length + 1
|
|
// GO.zIndex = sortedNums[sortedNums.length - 1].zIndex + 1
|
|
sortedNums.forEach((item:any,index:any) => {
|
|
arr[item.num]['z-index'] = index + 1
|
|
});
|
|
return arr
|
|
},
|
|
initDomStyle(){
|
|
nextTick(()=>{
|
|
this.content.forEach((item:any,index:any) => {
|
|
if(this.styleObj.domStyle[index]?.left){
|
|
item.classList.add('active')
|
|
this.initStyle(item,this.styleObj.domStyle[index])
|
|
}
|
|
this.domObj.dom.forEach((domName:any,domStyle:any) => {
|
|
let dom,style
|
|
if(this.styleObj[this.domObj.domStyle[index]]){
|
|
style = this.styleObj[this.domObj.domStyle[domStyle]][index]
|
|
dom = item.querySelector(domName)
|
|
this.initStyle(dom,style)
|
|
}
|
|
})
|
|
});
|
|
})
|
|
},
|
|
clearStyleObj(){
|
|
this.styleObj.domStyle = []
|
|
this.domObj.domStyle.forEach((item:any)=>{
|
|
if(this.styleObj[item])this.styleObj[item] = []
|
|
})
|
|
},
|
|
initStyle(dom:any,style:any){
|
|
if(!style || !dom)return
|
|
for (const [property, value] of Object.entries(style)) {
|
|
|
|
dom.style.setProperty(property, value);
|
|
}
|
|
},
|
|
setDomStyle(){
|
|
this.clearStyleObj()
|
|
this.content.forEach((item:any) => {
|
|
this.styleObj.domStyle.push(this.setStyle(item.style))
|
|
this.domObj.dom.forEach((domName:any,index:any) => {
|
|
let style = this.domObj.domStyle[index]
|
|
let dom = item.querySelector(domName) || item
|
|
this.styleObj[style].push(this.setStyle(dom.style))
|
|
})
|
|
});
|
|
},
|
|
setStyle(domStyle:any){
|
|
let style:any = {}
|
|
for (let property of domStyle) {
|
|
style[property] = domStyle.getPropertyValue(property);
|
|
}
|
|
return style
|
|
},
|
|
//提交模板
|
|
submitTemplate() {
|
|
this.loadingShow = true
|
|
this.setDomStyle()
|
|
this.styleObj.domStyle = this.setIndex(this.styleObj.domStyle)//index统一排序设置值
|
|
this.store.commit("setDisposeMoodboardPosition", JSON.parse(JSON.stringify(this.styleObj)));
|
|
this.layoutList.forEach((v:any)=>{
|
|
v.setPitch = false
|
|
})
|
|
nextTick().then(async ()=>{
|
|
let layoutCentent = document.getElementById('layoutCentent')
|
|
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) => {
|
|
rv.imgUrl = rv.url
|
|
this.layout = false
|
|
this.loadingShow = false
|
|
this.store.commit("setDisposeMoodboard", rv);
|
|
|
|
|
|
}
|
|
).catch(rv=>{
|
|
this.loadingShow = false
|
|
})
|
|
})
|
|
|
|
})
|
|
|
|
},
|
|
beforeUpload(){
|
|
|
|
}
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.layout_modal {
|
|
user-select: none; /* 对现代浏览器有效 */
|
|
-webkit-user-select: none; /* Safari */
|
|
-moz-user-select: none; /* Firefox */
|
|
-ms-user-select: none; /* Internet Explorer/Edge */
|
|
.ant-modal-body {
|
|
padding: 0;
|
|
// height: calc(65vh - 6.4rem);
|
|
height: calc(65rem*1.2);
|
|
}
|
|
.ant-modal-content{
|
|
border-radius: calc(1rem*1.2);
|
|
}
|
|
|
|
.layout_content {
|
|
// background: #f2f3fb;
|
|
// padding-bottom: 2.9rem;
|
|
height: 100%;
|
|
.collection_title{
|
|
position: absolute;
|
|
top: calc(4rem*1.2);
|
|
display: flex;
|
|
font-size: calc(1.8rem*1.2);
|
|
font-weight: 900;
|
|
color: rgba(0,0,0,.65);
|
|
align-items: center;
|
|
.collection_title_text{
|
|
margin-right: calc(4rem*1.2);
|
|
}
|
|
.collection_title_text_intro{
|
|
font-size: calc(1.2rem*1.2);
|
|
font-weight: 400;
|
|
color: rgba(0,0,0,.45);
|
|
}
|
|
}
|
|
|
|
.layout_nav{
|
|
display: flex;
|
|
margin-top: calc(2rem*1.2);
|
|
justify-content: center;
|
|
max-height: 13%;
|
|
overflow: hidden;
|
|
.active{
|
|
img{
|
|
border: 2px solid;
|
|
border-radius: 2px;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
>div{
|
|
max-height: 13%;
|
|
overflow: hidden;
|
|
img{
|
|
object-fit: cover;
|
|
width:calc(5rem*1.2);
|
|
cursor: pointer;
|
|
margin: 0 calc(2rem*1.2);
|
|
max-height: 100%;
|
|
}
|
|
}
|
|
|
|
}
|
|
.layout_centent{
|
|
display: flex;
|
|
// height: 55%;
|
|
height: calc(35rem*1.2);
|
|
width: calc(57rem*1.2);
|
|
// height: 60%;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
align-content: space-around;
|
|
margin: calc(3rem*1.2) auto;
|
|
overflow: hidden;
|
|
// padding: 3rem 0;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
user-select:none
|
|
&.active{
|
|
flex-direction: row;
|
|
}
|
|
.layout_btn{
|
|
list-style: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
box-sizing: border-box;
|
|
border: 2px solid rgb(20, 188, 255);
|
|
padding: 0;
|
|
-webkit-user-drag: none;
|
|
user-select:none;
|
|
li{
|
|
cursor: pointer;
|
|
// border-radius: 50%;
|
|
width: calc(2rem*1.2);
|
|
height: calc(2rem*1.2);
|
|
background-color: rgb(20, 188, 255);
|
|
position: absolute;
|
|
z-index: 1049;
|
|
}
|
|
.layout_btn_top,.layout_btn_bottom{
|
|
left: 50%;
|
|
transform: translate(-50%,-50%) ;
|
|
cursor: n-resize;
|
|
}
|
|
.layout_btn_top{
|
|
top: 0;
|
|
}
|
|
.layout_btn_bottom{
|
|
top: 100%;
|
|
}
|
|
.layout_btn_left,.layout_btn_right{
|
|
top: 50%;
|
|
transform: translate(-50%,-50%) ;
|
|
cursor: e-resize;
|
|
}
|
|
.layout_btn_left{
|
|
left: 0;
|
|
}
|
|
.layout_btn_right{
|
|
left: 100%;
|
|
}
|
|
.layout_rotote{
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
.layout_rotote::after{
|
|
position: absolute;
|
|
content: "";
|
|
background-color: #14bcff;
|
|
width: 2px;
|
|
height: 30px;
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translateX(-50%);
|
|
}
|
|
.layout_rotote::before{
|
|
position: absolute;
|
|
content: "";
|
|
background-color: #14bcff;
|
|
top: calc(50% - 30px);
|
|
left: 50%;
|
|
transform: translate(-50%,-50%) ;
|
|
width: calc(1.5rem*1.2);
|
|
height: calc(1.5rem*1.2);
|
|
border-radius: 50%;
|
|
}
|
|
.layout_translate{
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%) ;
|
|
cursor: crosshair;
|
|
cursor: move;
|
|
}
|
|
.layout_angle_tr,.layout_angle_tl,.layout_angle_br,.layout_angle_bl{
|
|
// opacity: 0;
|
|
width: calc(2rem*1.2);
|
|
height: calc(2rem*1.2);
|
|
}
|
|
.layout_angle_tr{
|
|
right: 0%;
|
|
top: 0;
|
|
transform: translate(50%,-50%);
|
|
}
|
|
.layout_angle_tl{
|
|
left: 0%;
|
|
top: 0;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
.layout_angle_br{
|
|
right: 0%;
|
|
bottom: 0%;
|
|
transform: translate(50%,50%);
|
|
}
|
|
.layout_angle_bl{
|
|
left: 0%;
|
|
bottom: 0%;
|
|
transform: translate(-50%,50%);
|
|
}
|
|
.eventNode{
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
.layout_centent_bor{
|
|
|
|
}
|
|
.modal_imgItem{
|
|
position: relative;
|
|
// >div{
|
|
// position: absolute;
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// }
|
|
overflow: hidden;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
&.active{
|
|
position: absolute;
|
|
}
|
|
}
|
|
}
|
|
.wh1{
|
|
width: 23%;
|
|
height: 48%;
|
|
|
|
}
|
|
.wh4{
|
|
width: 48.5%;
|
|
height: 100%;
|
|
|
|
}
|
|
.wh8{
|
|
width: 100%;
|
|
height: 48.5%;
|
|
}
|
|
.w1h2{
|
|
width: 23%;
|
|
height: 100%;
|
|
|
|
}
|
|
.w2h1{
|
|
width: 48.5%;
|
|
height: 48%;
|
|
}
|
|
.layout_left{
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: calc(5rem*1.2);
|
|
overflow-x: hidden;
|
|
// background-color: #000;
|
|
width: 10%;
|
|
height: 50%;
|
|
&.layout_left::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.layout_left_text{
|
|
font-size: calc(1.6rem*1.2);
|
|
margin-bottom: calc(1rem*1.2);
|
|
color: #000;
|
|
}
|
|
.layout_left_items{
|
|
width: 100%;
|
|
height: calc(6rem*1.2);
|
|
display: flex;
|
|
align-content: space-between;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
margin-bottom: calc(2rem*1.2);
|
|
cursor: pointer;
|
|
.layout_left_item{
|
|
box-sizing: border-box;
|
|
border: 1px solid #000;
|
|
}
|
|
}
|
|
}
|
|
.layout_right{
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
right: calc(5rem*1.2);
|
|
// background-color: #000;
|
|
width: 8%;
|
|
height: 50%;
|
|
&.layout_left::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.layout_left_text{
|
|
font-size: var(--aida-fsize1-6);
|
|
margin-bottom: calc(1rem*1.2);
|
|
color: #000;
|
|
}
|
|
.layout_left_items{
|
|
width: 100%;
|
|
height: calc(6rem*1.2);
|
|
display: flex;
|
|
align-content: space-between;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
margin-bottom: calc(2rem*1.2);
|
|
cursor: pointer;
|
|
.layout_left_item{
|
|
box-sizing: border-box;
|
|
border: 1px solid #000;
|
|
}
|
|
}
|
|
.ant-slider{
|
|
margin: 0;
|
|
margin-top: calc(2rem*1.2);
|
|
padding: 0 calc(1rem*1.2);
|
|
.ant-slider-track,
|
|
.ant-slider-rail {
|
|
height: calc(.6rem*1.2);
|
|
background-color: #e1e1e1;
|
|
border-radius: calc(0.5rem*1.2);
|
|
}
|
|
.ant-slider .ant-slider-handle:not(.ant-tooltip-open),
|
|
.ant-slider-handle {
|
|
background-color: #2d2e76 !important;
|
|
border: none !important;
|
|
}
|
|
.ant-slider-handle:hover {
|
|
box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
|
|
}
|
|
|
|
.habit_System_Designer_text_max {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.habit_System_Designer_text {
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.submit_button {
|
|
margin: calc(2rem*1.2) auto 0;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
.mark_loading{
|
|
position: absolute;
|
|
}
|
|
}
|
|
</style> |