fix
This commit is contained in:
@@ -10,13 +10,13 @@
|
||||
</div> -->
|
||||
<div v-show="isEditFrontBack" class="frontBack">
|
||||
<div class="label_item" @click.stop="setOperation('print')">
|
||||
<div class="title">Sharding</div>
|
||||
<div class="title">Masking :</div>
|
||||
<a-select
|
||||
v-model:value="frontBackData"
|
||||
:options="frontBackDataList"
|
||||
size="large"
|
||||
:fieldNames="{ label: 'name', value: 'value' }"
|
||||
style="width:12rem;"
|
||||
style="width:18rem;"
|
||||
@change="changeFrontBackData"
|
||||
>
|
||||
<template #suffixIcon
|
||||
@@ -28,7 +28,7 @@
|
||||
</a-select>
|
||||
</div>
|
||||
<div class="label_item">
|
||||
<div class="titile">{{ $t('exportModel.Size') }}:</div>
|
||||
<div class="title">{{ $t('exportModel.Size') }} :</div>
|
||||
<input @change="frontBackCanvas.setFontFamily" type="range" @input="frontBackCanvas.setPencilWidth" min="3" max="50" v-model="frontBackCanvas.brushwork.width[frontBackCanvas.operation]">
|
||||
|
||||
<!-- <input type="range" @input="frontBackCanvas.setPencilWidth" min="3" max="50" v-model="frontBackCanvas.brushwork.width[frontBackCanvas.operation]"> -->
|
||||
@@ -65,6 +65,17 @@
|
||||
<div v-for="item in canvasGeneral.colorHistoryList" :style="{'background':item}" @click="canvasGeneral.setColorHistory(item)"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="label_item texture" v-show="canvasGeneral.operation == 'texture'">
|
||||
<div class="title">{{ $t('exportModel.Texture') }}:</div>
|
||||
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.texture.value"
|
||||
style="width: 12rem "
|
||||
@change="canvasGeneral.textureValueChange"
|
||||
>
|
||||
<a-select-option class="label_select_item" v-for="item in canvasGeneral.texture.list" :value="item.value">
|
||||
<img :src="item.url" alt="">
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<div class="label_item" v-show="
|
||||
canvasGeneral.operation != 'movePosition' &&
|
||||
canvasGeneral.operation != 'move' &&
|
||||
@@ -80,7 +91,7 @@
|
||||
<div class="label_item" v-show="canvasGeneral.operation == 'pencil'">
|
||||
<div class="title">{{ $t('exportModel.Brushwork') }}:</div>
|
||||
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.brushwork.value"
|
||||
style="width: 12rem "
|
||||
style="width: 12rem ;height: 6rem;"
|
||||
@change="canvasGeneral.brushworkChange"
|
||||
>
|
||||
<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.brushList" :value="item.value">
|
||||
@@ -88,17 +99,7 @@
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<div class="label_item texture" v-show="canvasGeneral.operation == 'texture'">
|
||||
<div class="title">{{ $t('exportModel.Texture') }}:</div>
|
||||
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.texture.value"
|
||||
style="width: 12rem "
|
||||
@change="canvasGeneral.textureValueChange"
|
||||
>
|
||||
<a-select-option class="label_select_item" v-for="item in canvasGeneral.texture.list" :value="item.value">
|
||||
<img :src="item.url" alt="">
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
|
||||
<div class="label_item" v-show="
|
||||
canvasGeneral.operation != 'pencil' &&
|
||||
canvasGeneral.operation != 'eraser'&&
|
||||
@@ -162,13 +163,13 @@
|
||||
frontBackData:'#ff0000',
|
||||
frontBackDataList:[
|
||||
{
|
||||
name:'正面',
|
||||
name:'Front Piece',
|
||||
value:'#ff0000'
|
||||
},{
|
||||
name:'反面',
|
||||
name:'Back Piece',
|
||||
value:'#00ff00'
|
||||
},{
|
||||
name:'背景',
|
||||
name:'Surroundings',
|
||||
value:'background'
|
||||
},
|
||||
]
|
||||
@@ -190,9 +191,10 @@
|
||||
const closeModal = ()=>{
|
||||
document.removeEventListener('click',setOper)
|
||||
}
|
||||
const selectImgItem = (data:any)=>{
|
||||
data.minioUrl = data.url
|
||||
canvasGeneral.addPartImg(data,'print')
|
||||
const selectImgItem = (value:any)=>{
|
||||
value.minioUrl = value.url
|
||||
canvasGeneral.addPartImg(value,'print')
|
||||
data.operation = ''
|
||||
}
|
||||
const changeFrontBackData = (value:any)=>{
|
||||
emit('setFrontBackColor',value)
|
||||
@@ -227,7 +229,7 @@
|
||||
display: flex;
|
||||
}
|
||||
> .current{
|
||||
border-radius: 3rem;
|
||||
border-radius: 1rem;
|
||||
height: 3rem;
|
||||
width: 7rem;
|
||||
border: 1px solid #000;
|
||||
@@ -238,7 +240,7 @@
|
||||
top: 4rem;
|
||||
background: #fff;
|
||||
border: 1px solid #000;
|
||||
border-radius: 2rem;
|
||||
border-radius: 1rem;
|
||||
padding: 2.4rem;
|
||||
width: 40rem;
|
||||
height: 50rem;
|
||||
@@ -264,14 +266,7 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
input{
|
||||
height: 100%;
|
||||
border-radius: 3rem;
|
||||
width: 12rem;
|
||||
background: #fff;
|
||||
height: 3rem;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
&.wH input{
|
||||
width: 5rem;
|
||||
}
|
||||
@@ -280,23 +275,7 @@
|
||||
font-weight: 600;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
:deep(.ant-select){
|
||||
|
||||
border-radius: 3rem;
|
||||
.ant-select-selector{
|
||||
height: 100%;
|
||||
border-radius: 3rem;
|
||||
border: 1px solid;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.ant-select-selection-item{
|
||||
display: flex;
|
||||
font-size: 2rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
&.sketch{
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
const store = useStore();
|
||||
let {t} = useI18n()
|
||||
let canvasType = inject('canvasType')
|
||||
let getCanvasIfEdit:any = inject('getCanvasIfEdit')
|
||||
let canvasGeneral:any = inject('canvasObj')
|
||||
const data:any = reactive({
|
||||
canvasScaleDom:null,
|
||||
@@ -31,6 +32,9 @@
|
||||
|
||||
|
||||
})
|
||||
getCanvasIfEdit.fun = ()=>{
|
||||
return canvasGeneral.getElement()
|
||||
}
|
||||
const createCanvas = (canvasSize:any)=>{
|
||||
nextTick(async ()=>{
|
||||
let img = data.selectDetail.undividedLayer
|
||||
@@ -53,8 +57,9 @@
|
||||
width:WH.height*wScale,
|
||||
height:WH.height*hScale,
|
||||
}
|
||||
// let editGroupImg = data.selectDetail.partialDesign.partialDesignPath || data.selectDetail.partialDesign.partialDesignBase64
|
||||
let editGroupImg = data.selectDetail.partialDesign.partialDesignPath
|
||||
await canvasGeneral.canvasInit(data.canvasDom,size,img,editGroupImg)
|
||||
await canvasGeneral.canvasInit(data.canvasDom,size,img,editGroupImg,{dashedIsDetail:true})
|
||||
}
|
||||
image.src = img
|
||||
// canvasGeneral.canvasInit(data.canvasDom,canvasSize)
|
||||
|
||||
@@ -87,6 +87,7 @@ export default defineComponent({
|
||||
})
|
||||
watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
|
||||
detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
|
||||
// privewDetail(oldValue)
|
||||
},{immediate: true})
|
||||
provide('frontBackCanvasObj',detailData.frontBackCanvasObj)
|
||||
provide('canvasObj',detailData.canvasObj)
|
||||
@@ -121,9 +122,9 @@ export default defineComponent({
|
||||
detailData.frontBackCanvasObj.currentOperation = false
|
||||
}
|
||||
}
|
||||
const privewDetail = async ()=>{
|
||||
const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
|
||||
let data = await detailData.canvasObj.detailSubmit()
|
||||
detailData.selectDetail.partialDesign.partialDesignBase64 = data
|
||||
if(oldSelectDetail.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = data
|
||||
}
|
||||
const setFrontBackColor = (data:any)=>{
|
||||
detailDom.editFrontBack.setBackground(data)
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
:closable="false"
|
||||
>
|
||||
<div class="content">
|
||||
<div class="nav">
|
||||
<div class="nav" :class="{isEditPattern:isEditPattern.value}">
|
||||
<div class="back_home">
|
||||
<div class="gallery_btn" @click="closeModal()">
|
||||
<i class="fi fi-rs-house-chimney"></i>
|
||||
@@ -130,8 +130,12 @@ export default defineComponent({
|
||||
childKey:0,
|
||||
singleOveral:{
|
||||
value:'overall'
|
||||
}
|
||||
},
|
||||
getCanvasIfEdit:{
|
||||
fun:null,
|
||||
},
|
||||
})
|
||||
provide('getCanvasIfEdit',detailData.getCanvasIfEdit)
|
||||
provide('singleOveral',detailData.singleOveral)
|
||||
provide('isEditPattern',detailData.isEditPattern)
|
||||
const closeModal = ()=>{
|
||||
@@ -142,6 +146,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
const showDesignDetailModal = (data:any,str:any)=>{
|
||||
// let url = Https.httpUrls.getDesignDetail + `?designItemId=${77770}&designPythonOutfitId=${77423}`
|
||||
let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}&designPythonOutfitId=${data.design.designOutfitId}`
|
||||
detailData.loadingShow = true
|
||||
Https.axiosGet(url).then(
|
||||
@@ -154,10 +159,20 @@ export default defineComponent({
|
||||
item.layersObject[0] = item.layersObject[1]
|
||||
item.layersObject[1] = a
|
||||
}
|
||||
item.color.rgba = {
|
||||
r:item.color.r,
|
||||
g:item.color.g,
|
||||
b:item.color.b,
|
||||
if(item.color){
|
||||
item.color.rgba = {
|
||||
r:item.color.r,
|
||||
g:item.color.g,
|
||||
b:item.color.b,
|
||||
}
|
||||
}else{
|
||||
item.color = {
|
||||
rgba:{
|
||||
r:255,
|
||||
g:255,
|
||||
b:255,
|
||||
}
|
||||
}
|
||||
}
|
||||
if(item.gradient){
|
||||
item.color.gradient = item.gradient
|
||||
@@ -170,14 +185,14 @@ export default defineComponent({
|
||||
});
|
||||
})
|
||||
detailData.singleOveral.value = rv.singleOverall
|
||||
console.log(detailData.singleOveral)
|
||||
detailData.designDetailShow = true
|
||||
store.commit('DesignDetailCopy/setDesignDetail',rv)
|
||||
// this.deleteShow = false
|
||||
|
||||
setRevocation()
|
||||
detailData.loadingShow = false
|
||||
// await this.setImgSize()
|
||||
|
||||
store.commit('DesignDetailCopy/setDesignColthes',rv.clothes[0].id)
|
||||
}
|
||||
|
||||
).catch(rv=>{
|
||||
@@ -240,6 +255,7 @@ export default defineComponent({
|
||||
const setClothes = async (list:any)=>{
|
||||
let clothesList:any = []
|
||||
for(let i = 0;i<list.length;i++){
|
||||
detailData.selectDetail
|
||||
let {scale,offset,priority,maskUrl,maskMinioUrl} = (detailDom.model as any).getSubmitData(list[i])
|
||||
if(detailDom.canvasBox?.privewDetail)await (detailDom.canvasBox as any).privewDetail()
|
||||
if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
|
||||
@@ -425,13 +441,26 @@ export default defineComponent({
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
z-index: 2;
|
||||
:deep(.ant-modal-wrap){
|
||||
.ant-modal-body{
|
||||
padding: 0;
|
||||
:deep(>div){
|
||||
> .ant-modal-root{
|
||||
> .ant-modal-centered{
|
||||
> .fullScreen{
|
||||
> .ant-modal-content{
|
||||
> .ant-modal-body{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.ant-modal-wrap){
|
||||
.ant-modal-body{
|
||||
// padding: 0;
|
||||
}
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
}
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
}
|
||||
.content{
|
||||
display: flex;
|
||||
@@ -444,7 +473,7 @@ export default defineComponent({
|
||||
&.detailLeft{
|
||||
width: 34rem;
|
||||
}
|
||||
&.isEditPattern{width: 0;}
|
||||
&.isEditPattern{width: 0px;}
|
||||
&.model{
|
||||
width: 50rem;
|
||||
margin: 0 10rem;
|
||||
@@ -486,6 +515,9 @@ export default defineComponent({
|
||||
}
|
||||
> .nav{
|
||||
margin-right: 5rem;
|
||||
overflow: hidden;
|
||||
// transition: all .3s;
|
||||
&.isEditPattern{width: 0px;margin: 0;}
|
||||
> .back_home{
|
||||
width: 9rem;
|
||||
text-align: center;
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="color">
|
||||
<div class="detailText">Palette</div>
|
||||
<div class="detailText">Current color</div>
|
||||
<div class="pallet">
|
||||
<pallet :selectColor="selectColor" @selectUplpadColor="selectUplpadColor"></pallet>
|
||||
</div>
|
||||
<div class="detailText">New color</div>
|
||||
<div class="detailText">Color pelette</div>
|
||||
<div class="colorBox">
|
||||
<div v-for="item,index in colorList.list[selectDetail.id]" @click="setSelectColor(item,index)" class="colorBoxItem" :class="{active:colorList.index == index}">
|
||||
<div v-show="!item.gradient" class="background" :style="{'background-color':item.hex}"></div>
|
||||
@@ -13,7 +13,7 @@
|
||||
<div v-show="item.gradient" class="backgroundImg" :style="{'background-image':`linear-gradient(${item.gradient?.angle}deg,${setGradient(item.gradient)})`}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detailText">Upload Image</div>
|
||||
<div class="detailText">Choose color from image</div>
|
||||
<div class="uploadImage">
|
||||
<upload @selectUplpadColor="selectUplpadColor"></upload>
|
||||
</div>
|
||||
@@ -246,18 +246,19 @@ export default defineComponent({
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
> .detailText{
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
> .pallet{
|
||||
margin-bottom: 4.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
> .colorBox{
|
||||
margin-bottom: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
> .colorBoxItem{
|
||||
margin: 1rem 0;
|
||||
// margin: 1rem 0;
|
||||
margin-bottom: 1rem;
|
||||
width: 32%;
|
||||
height: 11rem;
|
||||
border-radius: .5rem;
|
||||
|
||||
@@ -272,7 +272,7 @@ export default defineComponent({
|
||||
nextTick().then(()=>{
|
||||
const backIcon = document.createElement('div');
|
||||
backIcon.classList.add('vc-sketch-color-wrap')
|
||||
let dropperDom = document.getElementsByClassName("pallet")?.[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
|
||||
let dropperDom = document.getElementsByClassName("pallet")?.[0]?.getElementsByClassName('vc-chrome-fields-wrap')[0]
|
||||
dropperDom.appendChild(backIcon);
|
||||
backIcon.addEventListener('click',async ()=>{
|
||||
try {
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
>
|
||||
<div class="upload_tip_block">
|
||||
<i class="fi fi-rr-picture"></i>
|
||||
<i class="fi fi-br-upload"></i>
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="detailLeft">
|
||||
<sketch v-show="currentDetailType == 'sketch'" @addDetail="addDetail"></sketch>
|
||||
<print v-show="currentDetailType == 'print'"></print>
|
||||
<color v-show="currentDetailType == 'color'"></color>
|
||||
<color v-if="currentDetailType == 'color'"></color>
|
||||
<element v-show="currentDetailType == 'element'"></element>
|
||||
<addDetails ref="addDetails" @setSloganData="setSloganData"></addDetails>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="libraryList">
|
||||
<div class="generalModel_state">
|
||||
<div class="generalModel_state_item">
|
||||
<div class="generalModel_state" v-if="type != 'element'">
|
||||
<div class="generalModel_state_item" style="width: 40%;">
|
||||
<a-select
|
||||
v-model:value="designType"
|
||||
:options="designTypeList"
|
||||
@@ -18,8 +18,10 @@
|
||||
></template>
|
||||
</a-select>
|
||||
</div>
|
||||
<div class="generalModel_state_item">
|
||||
<input class="search_input" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
||||
<div class="generalModel_state_item" style="width: 35%;">
|
||||
<input class="search_input" style="width: 100%;" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
||||
</div>
|
||||
<div class="generalModel_state_item" style="width: auto;">
|
||||
<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
||||
</div>
|
||||
<!-- clothesPrint -->
|
||||
@@ -84,6 +86,7 @@ export default defineComponent({
|
||||
currentPage:1,
|
||||
})
|
||||
const init = ()=>{
|
||||
console.log(123)
|
||||
detailData.designTypeList = props.catecoryList
|
||||
detailData.designType = detailData.designTypeList[0].value
|
||||
getLibraryList()
|
||||
@@ -207,13 +210,15 @@ export default defineComponent({
|
||||
flex-direction: column;
|
||||
> .generalModel_state{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
> .generalModel_state_item{
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
> .search_icon_block{
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
// position: absolute;
|
||||
// right: 5px;
|
||||
width: calc(6rem - 4px);
|
||||
height: calc(6rem - 4px);
|
||||
color: #fff;
|
||||
@@ -227,7 +232,7 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
> .generalModel_state_item:last-child{
|
||||
margin-top: 2rem;
|
||||
// margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
> .libraryList_box{
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<div class="selectList">
|
||||
<div class="switch_type_list">
|
||||
<div class="switch_type_list" v-if="type != 'element'">
|
||||
<div
|
||||
v-if="type != 'element'"
|
||||
@click.stop="openCurrent()"
|
||||
class="switch_type_item"
|
||||
:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
|
||||
@@ -28,7 +27,7 @@
|
||||
<div class="content_item" v-show="selectTitle == 'current'" v-if="type != 'element'">
|
||||
<currentList ref="currentList" :level1Type="level1Type" :type="type" @selectImgItem="selectImgItem" :catecoryList="catecoryList"></currentList>
|
||||
</div>
|
||||
<div class="content_item" v-show="selectTitle == 'upload'">
|
||||
<div class="content_item" v-show="selectTitle == 'upload'" v-if="type != 'element'">
|
||||
<uploadList @selectImgItem="selectImgItem" :level1Type="level1Type" :catecoryList="catecoryList"></uploadList>
|
||||
</div>
|
||||
<div class="content_item" v-show="selectTitle == 'library'">
|
||||
@@ -39,7 +38,7 @@
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||
import { defineComponent,computed,onMounted,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
@@ -78,7 +77,7 @@ export default defineComponent({
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const detailData = reactive({
|
||||
selectTitle: props.type == 'element'?'upload':'current',
|
||||
selectTitle: props.type == 'element'?'library':'current',
|
||||
printList:[]
|
||||
})
|
||||
const getDetailListDom = reactive({
|
||||
@@ -97,7 +96,11 @@ export default defineComponent({
|
||||
const selectImgItem = (data:any)=>{
|
||||
emit('selectImgItem',data)
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
if(props.type == 'element'){
|
||||
openLibrary()
|
||||
}
|
||||
})
|
||||
return{
|
||||
...toRefs(detailData),
|
||||
...toRefs(getDetailListDom),
|
||||
|
||||
@@ -70,7 +70,9 @@
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clearOverall" style="text-align: center; height: 6rem;">
|
||||
<div class="gallery_btn" v-show="!overallSingle && type == 'print'" style="line-height: 5rem;" @click="clearOverall">Clear</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@@ -293,7 +295,6 @@ export default defineComponent({
|
||||
let state = true
|
||||
editPrintElementData.stateOverallSingle = 'single'
|
||||
let arr:any = editPrintElementData.selectDetail.printObject.prints
|
||||
console.log(props.type)
|
||||
if(props.type == 'element'){
|
||||
arr = editPrintElementData.selectDetail.printObject.trims
|
||||
}
|
||||
@@ -496,8 +497,10 @@ export default defineComponent({
|
||||
document.removeEventListener('mouseup',mouseup)
|
||||
document.removeEventListener('touchend',mouseup)
|
||||
}
|
||||
const clearOverall = ()=>{
|
||||
editPrintElementData.printStyleList[props.type].overall = []
|
||||
}
|
||||
onMounted(()=>{
|
||||
console.log(123123)
|
||||
if(props.type == 'element'){
|
||||
editPrintElementData.stateOverallSingle = 'single'
|
||||
editPrintElementData.overallSingle = true
|
||||
@@ -516,13 +519,13 @@ export default defineComponent({
|
||||
itemSizeMousedown,
|
||||
deletePrint,
|
||||
previewDetailPrintData,
|
||||
clearOverall,
|
||||
}
|
||||
},
|
||||
directives:{
|
||||
//操作旋转
|
||||
rotote:{
|
||||
mounted(el,value:any){
|
||||
console.log(value)
|
||||
let mousedown = function(event:any){
|
||||
let e = getMousePosition(event,false)
|
||||
mouseDownOperation(e)
|
||||
@@ -680,6 +683,8 @@ export default defineComponent({
|
||||
.designOpenrtion_imgMask{
|
||||
width: auto;
|
||||
height: auto;
|
||||
min-width: 60%;
|
||||
// max-height: 80%;
|
||||
position: relative;
|
||||
>img{
|
||||
z-index: 2;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="sketchType">
|
||||
<div class="sketchType" v-show="selectDetail?.newDetail?.[currentDetailType]">
|
||||
<div class="detailText">New Apparel</div>
|
||||
<div class="sketchContent">
|
||||
<img :src="selectDetail?.newDetail?.[currentDetailType]?selectDetail.newDetail?.[currentDetailType].url:selectDetail.path" :title="selectDetail.type" alt="">
|
||||
|
||||
@@ -12,12 +12,12 @@
|
||||
<i v-show="true" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
|
||||
<!-- 编辑 -->
|
||||
<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" :class="{active:isEditPattern.value}" @click="showDesignImgDetail('edit')"></i>
|
||||
<i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" :class="{active:imgDesignImg}" @click="mousedownDesignImg"></i>
|
||||
<!-- <i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" :class="{active:imgDesignImg}" @click="mousedownDesignImg"></i> -->
|
||||
<!-- <i v-show="!body && !deleteShow" :title="$t('DesignDetail.DetailTitle')" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
|
||||
<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></i> -->
|
||||
|
||||
<!-- 层 -->
|
||||
<!-- <i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg" @touchstart="mousedownDesignImg" @touchend="mouseupDesignImg"></i> -->
|
||||
<i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" @mousedown="mousedownDesignImg" @mouseup="mousedownDesignImg" @touchstart="mousedownDesignImg" @touchend="mousedownDesignImg"></i>
|
||||
|
||||
</div>
|
||||
<position ref="position" @canvasReload="()=>$emit('canvasReload')" :imgDesignImg=imgDesignImg></position>
|
||||
@@ -31,6 +31,7 @@ import { defineComponent,computed,ref,inject,nextTick,createVNode,toRefs, reacti
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import position from './modelPosition.vue';
|
||||
import modelNav from './modelNav.vue';
|
||||
@@ -40,9 +41,10 @@ export default defineComponent({
|
||||
},
|
||||
emits:['detailEdit','canvasReload','addSketch','revocation','oppositeRevocation'],
|
||||
setup(props,{emit}) {
|
||||
const {t} = useI18n()
|
||||
const store = useStore();
|
||||
const detailData = reactive({
|
||||
|
||||
getCanvasIfEdit:inject('getCanvasIfEdit')as any,
|
||||
})
|
||||
const setRevocation:any = inject('setRevocation')
|
||||
const getDetailListData = reactive({
|
||||
@@ -58,7 +60,31 @@ export default defineComponent({
|
||||
return getDetailListDom.position.getSubmitData(value)
|
||||
}
|
||||
const showDesignImgDetail = (str:any)=>{
|
||||
emit('detailEdit',str)
|
||||
new Promise((resolve, reject) => {
|
||||
if(
|
||||
getDetailListData.isEditPattern.value&&
|
||||
detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun()?.length > 0
|
||||
){
|
||||
Modal.confirm({
|
||||
title: t('collectionModal.jsContent2'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
centered:true,
|
||||
onOk() {
|
||||
resolve(true)
|
||||
emit('detailEdit',str)
|
||||
},
|
||||
onCancel(){
|
||||
resolve(false)
|
||||
}
|
||||
});
|
||||
}else{
|
||||
resolve(true)
|
||||
emit('detailEdit',str)
|
||||
}
|
||||
})
|
||||
}
|
||||
const deleteItem = ()=>{
|
||||
setRevocation()
|
||||
|
||||
@@ -33,14 +33,19 @@ export default defineComponent({
|
||||
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
|
||||
frontBack:{} as any,
|
||||
isEditPattern:inject('isEditPattern') as any,
|
||||
singleOveral:inject('singleOveral') as any
|
||||
singleOveral:inject('singleOveral') as any,
|
||||
getCanvasIfEdit:inject('getCanvasIfEdit')as any,
|
||||
|
||||
})
|
||||
watch(()=>detailData.frontBack_,(newFollowVue)=>{
|
||||
detailData.frontBack = newFollowVue
|
||||
})
|
||||
const selectDetailItem = (item:any,index:number)=>{
|
||||
new Promise((resolve, reject) => {
|
||||
if(detailData.isEditPattern.value && detailData.selectDetail?.id){
|
||||
if(detailData.isEditPattern.value &&
|
||||
detailData.selectDetail?.id &&
|
||||
detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun()?.length > 0
|
||||
){
|
||||
Modal.confirm({
|
||||
title: t('collectionModal.jsContent2'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
@@ -58,6 +63,7 @@ export default defineComponent({
|
||||
});
|
||||
}else{
|
||||
resolve(true)
|
||||
emit('canvasReload')
|
||||
}
|
||||
}).then((rv)=>{
|
||||
if(rv)store.commit('DesignDetailCopy/setDesignColthes',item.id)
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="molepositon" :class="{active:!imgDesignImg}">
|
||||
<div class="designOpenrtion_imgMask" v-if="frontBack?.body" :style="frontBack?.body?.style">
|
||||
<div class="designOpenrtion_print" :class="{active:singleOveral.value == 'single'}" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="frontBack.front[index].style">
|
||||
<div class="designOpenrtion_imgMask" v-if="frontBack?.body?.path" :style="frontBack?.body?.style">
|
||||
<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="frontBack.front[index].style">
|
||||
<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
|
||||
</div>
|
||||
<img v-show="singleOveral.value == 'overall'" class="perview_img" v-detailBody="frontBack?.body?.path" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'" v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''">
|
||||
<div class="detail_modal_item_front" :class="{active:singleOveral.value == 'single'}" 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 class="perview_img" v-detailBody="frontBack?.body?.path" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'" v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''">
|
||||
<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" v-show="singleOveral.value != 'overall'">
|
||||
<div class="designOpenrtion_btn">
|
||||
<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>
|
||||
@@ -18,7 +18,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="designOpenrtion_imgMask" v-else>
|
||||
<!-- <img src="" alt=""> -->
|
||||
<img :src="selectDetail.undividedLayer" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="molepositon" :class="{active:imgDesignImg}">
|
||||
@@ -339,6 +339,7 @@ export default defineComponent({
|
||||
}
|
||||
return{
|
||||
...toRefs(detailData),
|
||||
...toRefs(selectItem),
|
||||
...toRefs(getDetailListDom),
|
||||
|
||||
itemSizeMousedown,
|
||||
@@ -407,9 +408,10 @@ export default defineComponent({
|
||||
>img{
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
// width: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
object-fit: contain;
|
||||
}
|
||||
>div{
|
||||
position: absolute;
|
||||
@@ -426,11 +428,6 @@ export default defineComponent({
|
||||
user-select:none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
&.active{
|
||||
> img{
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
.modal_imgItem{
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
|
||||
Reference in New Issue
Block a user