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

Merge remote-tracking branch 'origin/StableVersion' into develop

Browse Source
This commit is contained in:
X1627315083
2024-09-25 11:07:49 +08:00
parent f840b03c0d
commit 309cdf16a9
33 changed files with 3462 additions and 748 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/component/Detail/DesignDetail.vue
View File

@@ -152,7 +152,7 @@
<div class="design_detail_perview_content" >
<!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
<setDesignItem ref="setDesignItem" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItem>
<setDesignItem ref="setDesignItem" :isBody="body" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItem>
<!-- <setDesignItemMobile v-else ref="setDesignItemMobile" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItemMobile> -->
</div>
@@ -507,15 +507,12 @@ export default defineComponent({
item.layersObject[0] = item.layersObject[1]
item.layersObject[1] = a
}
if(item.printObject.prints == null){
item.printObject.prints = []
}else{
item.printObject.prints.forEach((element:any) => {
if(!element.designType){
element.designType = 'Library'
}
});
}
if(item.printObject.prints == null)item.printObject.prints = []
item.printObject.prints.forEach((element:any) => {
if(!element.designType){
element.designType = 'Library'
}
});
})
this.currentIndex = 0
this.store.commit('setDesignItemDetail',rv)

12
src/component/Detail/DesignDetailEnd.vue
View File

@@ -94,10 +94,8 @@
<div v-if="type_ == 2 && (current?.printObject?.prints?.length != 0 || printsList.length != 0 || exhibitionList.print.length != 0)" @click.stop="setPrint" class="subitOkPreviewBtn Guide_1_23">{{ $t('DesignDetailEnd.Layout') }}</div>
<!-- <div v-else-if="type_ == 2 && designItemDetail?.clothes?.[currentIndex]?.printObject?.prints?.[0]?.path != null && current?.printObject?.prints?.[0]?.path == null" @click.stop="setPreview" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.preview') }}</div> -->
<div v-if="type_ == 4 && (elementsList.length != 0 || exhibitionList.elements.length != 0)" @click.stop="setElemets" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.Layout') }}</div>
<DesignPrintOperation v-if="!moible" ref="DesignPrintOperation"></DesignPrintOperation>
<DesignPrintOperationMobile v-else ref="DesignPrintOperationMobile"></DesignPrintOperationMobile>
<DesignElementsOperation v-if="!moible" ref="DesignElementsOperation"></DesignElementsOperation>
<DesignPrintMobile v-else ref="DesignPrintMobile"></DesignPrintMobile>
<DesignPrintOperation ref="DesignPrintOperation"></DesignPrintOperation>
<DesignElementsOperation ref="DesignElementsOperation"></DesignElementsOperation>
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
@@ -112,7 +110,6 @@ import { Sketch} from '@ans1998/vue3-color'
import DesignPrintOperation from './DesignPrintOperation.vue';
import DesignPrintOperationMobile from './DesignPrintOperationMobile.vue';
import DesignElementsOperation from './DesignElements.vue';
import DesignPrintMobile from './DesignElementsMobile.vue';
import { message,Upload} from 'ant-design-vue';
import { openGuide,driverObj__ } from "@/tool/guide";
import {isMoible,setGradual} from '@/tool/util'
@@ -123,7 +120,7 @@ export default defineComponent({
props: ["msg"],
components:{
Draggable,Sketch,DesignPrintOperation,DesignPrintOperationMobile,
DesignElementsOperation,DesignPrintMobile,sketchCategory
DesignElementsOperation,sketchCategory
},
setup(prop) {
const store = useStore();
@@ -262,7 +259,8 @@ export default defineComponent({
setPrint(){
// if(this.current?.printObject?.prints?.[0]?.path){
let DesignPrintOperation = isMoible() ? this.$refs.DesignPrintOperationMobile : this.$refs.DesignPrintOperation
let DesignPrintOperation = this.$refs.DesignPrintOperation
// let DesignPrintOperation = isMoible() ? this.$refs.DesignPrintOperationMobile : this.$refs.DesignPrintOperation
DesignPrintOperation.init()
if(this.driver__.driver){
nextTick().then(()=>{

5
src/component/Detail/DesignPrintOperation.vue
View File

@@ -99,7 +99,7 @@
</div>
<img :src="operationCurrent?.undividedLayer?operationCurrent.undividedLayer:operationCurrent.path" alt="" class="designOpenrtion_sketch">
<div class="designOpenrtion_btn">
<ul v-if="overallSingle" v-for="item,index in printStyleList[stateOverallSingle]" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
<ul v-if="overallSingle" v-for="item,index in printStyleList[stateOverallSingle]" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('left',getMousePosition($event,true))"></li>
@@ -110,7 +110,7 @@
</li>
</ul>
<div v-show="!overallSingle"></div>
<ul v-if="!overallSingle && printStyleList[stateOverallSingle][0]" class="designOpenrtion_Mouoverall active" :style="'left:'+printStyleList[stateOverallSingle][0]?.style?.left+';top:'+printStyleList[stateOverallSingle][0]?.style?.top+';'" @mousedown.stop="itemMoveMousedown(0,$event)">
<ul v-if="!overallSingle && printStyleList[stateOverallSingle][0]" class="designOpenrtion_Mouoverall active" :style="'left:'+printStyleList[stateOverallSingle][0]?.style?.left+';top:'+printStyleList[stateOverallSingle][0]?.style?.top+';'" @mousedown.stop="itemMoveMousedown(0,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(0,getMousePosition($event,true))">
<i class="fi fi-rr-arrows animtion1"></i>
<i class="fi fi-rr-arrows animtion2"></i>
<li class="designOpenrtion_rotote" v-rotote.stop="[0,printStyleList[stateOverallSingle][0].transform]"></li>
@@ -294,7 +294,6 @@ export default defineComponent({
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
}
}
document.addEventListener('mousemove', mousemove);
// 添加鼠标松开事件监听器
let mouseup = () => {
value.instance.printStyleList[value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.rotateZ = angle

86
src/component/Detail/addDetails.vue
View File

@@ -34,7 +34,12 @@
<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
<!-- <div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div> -->
</div>
<div class="exportCanvasBox_center">
<div class="exportCanvasBox_center_box">
<div class="exportCanvasBox_center">
<!-- <div class="editFrontBack_bgImg" v-show="loadingShow">
<img :src="imgData?.undividedLayer" alt="">
</div> -->
</div>
<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div>
</div>
</div>
@@ -63,6 +68,7 @@ import allOrder from "@/component/Pay/allOrder.vue";
import creditsDetail from "@/component/Pay/creditsDetail.vue";
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
import { useI18n } from "vue-i18n";
import { getMousePosition } from "@/tool/mdEvent";
export default defineComponent({
components: {
creditsDetail,
@@ -110,15 +116,8 @@ export default defineComponent({
exportWH = 512
nextTick(()=>{
let canvasBox = document.querySelector(".addDetails_modal .exportCanvasBox_center");
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
let oldCanvasDom1 = canvasBox.querySelector('canvas')
var canvasDom = document.createElement("canvas");
document.addEventListener("keydown", canvasKeyDown);
document.addEventListener("keyup", canvasKeyUp);
if(oldCanvasDom)oldCanvasDom.remove()
if(oldCanvasDom)loadingShow.value = false
if(oldCanvasDom1)oldCanvasDom1.remove()
canvasBox.appendChild(canvasDom);
document.removeEventListener('mousemove', mouseMove);
document.removeEventListener('touchmove', touchmove);
let img = new Image();
img.onload = function(){
@@ -136,13 +135,11 @@ export default defineComponent({
exportWH = img.height
}
ratio = [wScale,hScale]
canvas = new fabric.Canvas(canvasDom, {
width: canvasWH.value * wScale,
height: canvasWH.value * hScale,
isDrawingMode: false, // 开启绘图模式
});
canvas = canvasGeneral.canvasInit(canvasBox,{
width:canvasWH.value * wScale,
height:canvasWH.value * hScale,
})
scale = img.height/canvas.height
JSchangeType(canvas,'init')
pencilbtnStyle.value.background = rgba
fabric.Object.prototype.cornerSize = 10
@@ -174,7 +171,8 @@ export default defineComponent({
});
//画布上移动
canvas.on("mouse:move", event =>setCanvasMove(event));
document.addEventListener('mousemove', mouseMove);
document.addEventListener('touchmove', touchmove);
setOperation('pencil')
img.remove()
}
@@ -206,20 +204,24 @@ export default defineComponent({
document.removeEventListener("keyup", canvasKeyUp);
}
let rgba = 'rgba(0, 0, 0, 1)'
let mouseMove = (event)=>{
let e = getMousePosition(event,false)
setCanvasMove(e)
}
let touchmove = (event)=>{
let e = getMousePosition(event,true)
setCanvasMove(e)
}
let setCanvasMove = (event)=>{
var pointer = canvas.getPointer(event.e);
if(canvas.isDrawingMode){
canvas.setCursor('none');
}
let canvasBox = document.querySelector(".addDetails_canvasCenter .canvas-container");
const rect = canvasBox.getBoundingClientRect();
const parentRect = canvasBox.parentElement.getBoundingClientRect();
let parentX = rect.left - parentRect.left
let parentY = rect.top - parentRect.top
pencilbtnStyle.value.left = parentX + pointer.x+'px'
pencilbtnStyle.value.top = parentY + pointer.y+'px'
canvas.requestRenderAll()
let canvasCenterBox = document.querySelector(".addDetails_modal .exportCanvasBox_center_box");
if(!canvasCenterBox)return
let parentX = event.clientX - canvasCenterBox.getBoundingClientRect().left
let parentY = event.clientY - canvasCenterBox.getBoundingClientRect().top
pencilbtnStyle.value.left = parentX + "px"
pencilbtnStyle.value.top = parentY+'px'
}
let setOperation = (str)=>{
canvasBtn.canvasState = str
@@ -339,26 +341,17 @@ export default defineComponent({
}
)
exportCanvas.add(obj)
// if(allObjects.length-1 == index){
// let data = exportCanvas.toDataURL('jpg')
// cancelDsign()
// clearCanvas()
// emit('setSloganData',data)
// }
})
let data = exportCanvas.toDataURL('jpg')
cancelDsign()
clearCanvas()
emit('setSloganData',data)
})
}
let cancelDsign = ()=>{
canvas.dispose();
showPayOrder.value = false
document.removeEventListener('keydown',canvasKeyDown);
document.removeEventListener('keyup', canvasKeyUp);
showPayOrder.value = false
}
return {
presentState,
@@ -473,6 +466,25 @@ export default defineComponent({
position: relative;
margin: 0 auto;
}
.exportCanvasBox_center_box{
padding: 3rem;
height: 100%;
flex: 1;
position: relative;
width: 100%;
background: #e6e6e6;
&:hover{
cursor: none;
}
.editFrontBack_pencilbtn{
position: absolute;
z-index: 1;
border-radius: 50%;
border: 1px solid #000;
pointer-events: none;
transform: translate(-50%,-50%);
}
}
.exportCanvasBox_center{
height: 100%;
flex: 1;

97
src/component/Detail/editFrontBack.vue
View File

@@ -6,7 +6,7 @@
</div> -->
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i>
<!-- <i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i> -->
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
<div class="editFrontBack_center_btn_colorRed" @click="setOperationColor('rgb(255,0,0)')" :class="{active:rgba == 'rgb(255,0,0)'}" title="front"></div>
@@ -14,9 +14,11 @@
<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
<!-- <div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div> -->
</div>
<div class="exportCanvasBox_center">
<div class="editFrontBack_bgImg" v-show="loadingShow">
<img :src="imgData?.undividedLayer" alt="">
<div class="exportCanvasBox_center_box">
<div class="exportCanvasBox_center">
<div class="editFrontBack_bgImg" v-show="loadingShow">
<img :src="imgData?.undividedLayer" alt="">
</div>
</div>
<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div>
</div>
@@ -32,6 +34,7 @@ import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import allOrder from "@/component/Pay/allOrder.vue";
import creditsDetail from "@/component/Pay/creditsDetail.vue";
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
import { getMousePosition } from "@/tool/mdEvent";
import { useI18n } from "vue-i18n";
export default defineComponent({
components: {
@@ -92,18 +95,14 @@ export default defineComponent({
var canvasDom = document.createElement("canvas");
document.addEventListener("keydown", canvasKeyDown);
document.addEventListener("keyup", canvasKeyUp);
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
let oldCanvasDom1 = canvasBox.querySelector('canvas')
if(oldCanvasDom)oldCanvasDom.remove()
if(oldCanvasDom)loadingShow.value = false
if(oldCanvasDom1)oldCanvasDom1.remove()
document.removeEventListener('mousemove', mouseMove);
document.removeEventListener('touchmove', touchmove);
canvasBox.appendChild(canvasDom);
let img = new Image();
img.onload = function(){
loadingShow.value = true
let height = canvasBox.offsetHeight;
canvasWH.value = height
console.log(canvasBox.offsetHeight);
canvasBox.style.width = height+'px'
let wScale = 1
let hScale = 1
@@ -117,13 +116,10 @@ export default defineComponent({
exportWH = img.height
}
ratio = [wScale,hScale]
canvas = new fabric.Canvas(canvasDom, {
width: canvasWH.value * wScale,
height: canvasWH.value * hScale,
isDrawingMode: false, // 开启绘图模式
});
JSchangeType(canvas,'init')
console.log(rgba.value);
canvas = canvasGeneral.canvasInit(canvasBox,{
width:canvasWH.value * wScale,
height:canvasWH.value * hScale,
})
pencilbtnStyle.value.background = rgba.value
fabric.Object.prototype.cornerSize = 10
fabric.Object.prototype.transparentCorners = false
@@ -159,7 +155,9 @@ export default defineComponent({
});
//画布上移动
canvas.on("mouse:move", event =>setCanvasMove(event));
// canvas.on("mouse:move", event =>setCanvasMove(event));
document.addEventListener('mousemove', mouseMove);
document.addEventListener('touchmove', touchmove);
setOperation('pencil')
createSetTimeSubmit()
img.remove()
@@ -186,8 +184,7 @@ export default defineComponent({
}
let setClone = ()=>{
// canvasBtn.canvasState = 'move'
// canvasBtn.spreadState = false
let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
let oldCanvasDom1 = canvasBox.querySelector('canvas')
@@ -200,22 +197,24 @@ export default defineComponent({
document.removeEventListener("keyup", canvasKeyUp);
}
let rgba = ref('rgb(255,0,0)')
let mouseMove = (event)=>{
let e = getMousePosition(event,false)
setCanvasMove(e)
}
let touchmove = (event)=>{
let e = getMousePosition(event,true)
setCanvasMove(e)
}
let setCanvasMove = (event)=>{
var pointer = canvas.getPointer(event.e);
if(canvas.isDrawingMode){
canvas.setCursor('none');
// brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2 });
}
let canvasBox = document.querySelector(".editFrontBack_center .canvas-container");
const rect = canvasBox.getBoundingClientRect();
const parentRect = canvasBox.parentElement.getBoundingClientRect();
let parentX = rect.left - parentRect.left
let parentY = rect.top - parentRect.top
// brushIndicator.set({ left: x, top: y, visible: true,radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2 });
pencilbtnStyle.value.left = parentX + pointer.x+'px'
pencilbtnStyle.value.top = parentY + pointer.y+'px'
canvas.requestRenderAll()
let canvasCenterBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center_box");
if(!canvasCenterBox)return
let parentX = event.clientX - canvasCenterBox.getBoundingClientRect().left
let parentY = event.clientY - canvasCenterBox.getBoundingClientRect().top
pencilbtnStyle.value.left = parentX + "px"
pencilbtnStyle.value.top = parentY+'px'
}
let setOperation = (str)=>{
canvasBtn.canvasState = str
@@ -227,7 +226,7 @@ export default defineComponent({
pencilbtnStyle.value.display = `block`
}else if(str == 'eraser'){
setEraser()
rgba.value = 'rgb(255,255,255)'
// rgba.value = 'rgb(255,255,255)'
pencilbtnStyle.value.display = `block`
}
}
@@ -373,6 +372,7 @@ export default defineComponent({
})
}
let cancelDsign = ()=>{
document.removeEventListener('keydown',canvasKeyDown);
document.removeEventListener('keyup', canvasKeyUp);
}
@@ -410,6 +410,7 @@ export default defineComponent({
// width: calc(512px / 2);
// width: 256px;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
// height: calc(512px / 2);
@@ -499,13 +500,30 @@ export default defineComponent({
transform: translate(-50%,0);
}
}
.exportCanvasBox_center{
.exportCanvasBox_center_box{
padding: 3rem;
height: 100%;
flex: 1;
position: relative;
width: 100%;
background: #e6e6e6;
&:hover{
cursor: none;
}
.editFrontBack_pencilbtn{
position: absolute;
z-index: 1;
border-radius: 50%;
border: 1px solid #000;
pointer-events: none;
transform: translate(-50%,-50%);
}
}
.exportCanvasBox_center{
margin: 0 auto;
overflow: hidden;
background: #e6e6e6;
height: 100%;
position: relative;
// overflow: scroll;
:deep(.canvas-container){
@@ -531,14 +549,7 @@ export default defineComponent({
object-fit: contain;
}
}
.editFrontBack_pencilbtn{
position: absolute;
z-index: 1;
border-radius: 50%;
border: 1px solid #000;
pointer-events: none;
transform: translate(-50%,-50%);
}
}
.exportCanvasBox_center:hover{
.editFrontBack_center_btn{

141
src/component/Detail/oldHistoryDetail.vue
View File

@@ -1,141 +0,0 @@
<template>
<a-modal class="oldHsitory_detail_modal_component"
v-model:visible="hsitoryDetailShow"
:footer="null"
:title="collectionName"
width="80%"
:maskClosable="false"
:keyboard="false"
:centered="true"
>
<template #closeIcon>
<div class="close_icon" @click.stop="changeDetailShow()"><span class="icon iconfont icon-guanbi"></span></div>
</template>
<!-- <div class="history_detail_content scroll_style">
<div class="history_img_block" v-for="img in groupDetails" :key="img">
<div class="history_img_item" >
<img class="element_img" :src="img.url">
</div>
</div>
</div> -->
<OldExportNewCoolection ref="OldExportNewCoolection"></OldExportNewCoolection>
</a-modal>
</template>
<script lang="ts">
import OldExportNewCoolection from "@/component/HomePage/OldExportNewCoolection.vue";
import { defineComponent, ref, nextTick } from 'vue'
export default defineComponent({
components: {
OldExportNewCoolection
},
props:{
groupDetails:{
default:{},
},
collectionName:{
default:''
}
},
setup() {
let hsitoryDetailShow = ref(false)
return{
hsitoryDetailShow
}
},
data(){
return{
}
},
methods:{
init(data:any){
this.hsitoryDetailShow = true
nextTick().then(()=>{
let OldExportNewCoolection:any = this.$refs.OldExportNewCoolection
OldExportNewCoolection.init(data)
})
},
changeDetailShow(){
this.hsitoryDetailShow = !this.hsitoryDetailShow
}
}
})
</script>
<style lang="less">
.oldHsitory_detail_modal_component{
.ant-modal-body{
overflow-y: initial !important;
overflow-x: auto;
}
.export_new_collection_review{
position: relative;
left: 50%;
transform: translateX(-50%) scale(2);
transform-origin: top center;
top: 0;
}
.ant-modal-close{
width: 3.6rem;
height: 3.6rem;
position: absolute;
top: -1.8rem;
right: -1.8rem;
}
.ant-modal-header{
background: #F7F7F7;
}
.ant-modal-body{
background: #F2F3FB;
height: 80vh;
min-height: 72rem;
overflow-y: hidden;
padding: 0;
}
.close_icon{
width: 3.6rem;
height: 3.6rem;
background: #000000;
border-radius: 50%;
line-height: 3.6rem;
text-align: center;
.icon-guanbi{
font-size: 2rem;
color: #ffffff;
}
}
.history_detail_content{
padding: 2.6rem 2.0rem 2.6rem 3.7rem;
height: 100%;
width: 100%;
overflow-y:auto;
background: #FFFFFF;
.history_img_block{
width: 16.5rem;
height: 16.5rem;
border: 0.1rem solid #343579;
margin: 0 1.7rem 1.7rem 0;
display: inline-block;
.history_img_item{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.element_img{
max-width: 100%;
max-height: 100%;
}
}
}
}
</style>

21
src/component/Detail/setDesignItem.vue
View File

@@ -8,7 +8,6 @@
</div>
</div>
</div>
<div class="designOpenrtion_imgMask" :style="frontBack?.body?.style">
<!-- <div
v-for="item,index in frontBack.back"
@@ -26,7 +25,7 @@
<div class="detail_modal_item_front" v-for="item,index in frontBack.front" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="item.style">
<img :src="item.imageUrl" alt="">
</div>
<div class="designOpenrtion_btn">
<div class="designOpenrtion_btn" v-if="!isBody">
<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
@@ -56,7 +55,7 @@ import { Https } from "@/tool/https";
import editFrontBack from '@/component/Detail/editFrontBack.vue'
import { getMousePosition } from "@/tool/mdEvent";
export default defineComponent({
// props: ["frontBack"],
props: ["isBody"],
emits:['setParentLoadingShow','setDesignCoverage','setSubmit'],
components:{editFrontBack},
setup(prop) {
@@ -160,11 +159,18 @@ export default defineComponent({
let front = []
let back = []
let body = {}
designItemDetail.others.forEach((item) => {
if(item.type == 'Body'){
if(designItemDetail.others.length > 0){
designItemDetail.others.forEach((item) => {
if(item.type == 'Body'){
body = item
}
});
}else{
designItemDetail.clothes.forEach((item) => {
body = item
}
});
});
}
let ratio = await this.setPostition(body.layersObject[0]?.imageUrl)
let frontIndex = 6
let backIndex = 3
@@ -243,7 +249,6 @@ export default defineComponent({
},
clear(){
this.imgDomIndex = -1
console.log(this.editFrontBack);
this.clothesOpenActive(-1)
this.editFrontBack.setClone()
window.removeEventListener('resize', this.setImgSizeTime);