detail submit preview完善
This commit is contained in:
X1627315083
@@ -5,13 +5,12 @@
|
||||
<div class="canvasContent" ref="canvasContent">
|
||||
<div class="content-bottom" ref="canvasContent">
|
||||
<div class="contet">
|
||||
<!-- :clothingImageUrl="selectDetail?.undividedLayerWithSinglePrint || selectDetail.undividedLayer || selectDetail.path" -->
|
||||
<div class="canvas" :class="{'active': currentView === 'canvasEditor'}"@click.stop>
|
||||
<editCanvas v-if="canvasLoad" :config="canvasConfig"
|
||||
@canvasInit="canvasInit"
|
||||
@canvasInit="editSketchCanvasInit"
|
||||
is-edit
|
||||
:clothingImageUrl="selectDetail.path"
|
||||
:clothingImageUrl2="selectDetail.undividedLayer_"
|
||||
:clothingImageUrl2="selectDetail.layersObject[0].maskUrl"
|
||||
showFixedLayer
|
||||
:canvasJSON="canvasJSON"
|
||||
@canvasLoadJsonSuccess="canvasLoadJsonSuccess"
|
||||
@@ -25,7 +24,7 @@
|
||||
</div>
|
||||
<div class="editFrontBack" v-if="currentView === 'redGreenExample'" @click.stop>
|
||||
<editCanvas v-if="canvasLoad" :config="canvasConfig"
|
||||
@canvasInit="canvasInit"
|
||||
@canvasInit="editFrontBackCanvasInit"
|
||||
:enabledRedGreenMode="true"
|
||||
:clothingImageUrl="selectDetail.path"
|
||||
:redGreenImageUrl="frontBack.front[imgDomIndex].maskUrl"
|
||||
@@ -150,7 +149,7 @@ export default defineComponent({
|
||||
}else{
|
||||
if(detailData.currentView === 'redGreenExample'){
|
||||
nextTick(()=>{
|
||||
setCanvas(detailData.selectDetail?.undividedLayerWithSinglePrint || detailData.selectDetail.undividedLayer || detailData.selectDetail.path).then(()=>{
|
||||
setCanvas(detailData.selectDetail.path).then(()=>{
|
||||
// detailData.canvasLoad = true
|
||||
})
|
||||
})
|
||||
@@ -166,18 +165,25 @@ export default defineComponent({
|
||||
const updateOtherLayers = (obj:any)=>{
|
||||
if(!detailDom.editCanvas)return
|
||||
return new Promise(async (res,reject)=>{
|
||||
console.log(obj,'====')
|
||||
await detailDom?.editCanvas.updateOtherLayers(obj)
|
||||
res('')
|
||||
})
|
||||
}
|
||||
const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
|
||||
// if(!detailDom.editCanvas)return
|
||||
return new Promise((res,reject)=>{
|
||||
detailDom.editCanvas.exportImage({isContainFixedOther:true,isContainFixed:true}).then((rv)=>{
|
||||
return new Promise(async (res,reject)=>{
|
||||
await detailDom.editCanvas.exportImage({isContainFixed:true}).then((rv)=>{
|
||||
if(oldSelectDetail?.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = rv
|
||||
res('')
|
||||
})
|
||||
//包含平铺图层 single+overall模式的图
|
||||
await detailDom.editCanvas.exportImage({isContainFixed:true,isPrintTrimsNoRepeat:true,isPrintTrimsRepeat:true,isContainNormalLayer:false}).then((rv)=>{
|
||||
oldSelectDetail.undividedLayerWithSinglePrint = rv
|
||||
})
|
||||
//不包含平铺图层overall模式的图
|
||||
await detailDom.editCanvas.exportImage({isContainFixed:true,isPrintTrimsNoRepeat:false,isPrintTrimsRepeat:true,isContainNormalLayer:false}).then((rv)=>{
|
||||
oldSelectDetail.undividedLayer = rv
|
||||
})
|
||||
res('')
|
||||
})
|
||||
}
|
||||
const getCanvasElement = ()=>{
|
||||
@@ -246,7 +252,7 @@ export default defineComponent({
|
||||
|
||||
|
||||
const frontBackChange = (value:any)=>{
|
||||
let full = detailData.frontBack.front[detailData.imgDomIndex]?.undividedLayerWithSinglePrint || detailData.frontBack.front[detailData.imgDomIndex].undividedLayer || detailData.selectDetail.path
|
||||
let full = detailData.selectDetail.partialDesign.partialDesignBase64 || detailData.selectDetail.path
|
||||
let size = {
|
||||
...detailData.canvasConfig,
|
||||
}
|
||||
@@ -267,7 +273,13 @@ export default defineComponent({
|
||||
})
|
||||
|
||||
}
|
||||
const canvasInit = (value:any)=>{
|
||||
const editSketchCanvasInit = (value:any)=>{
|
||||
detailData.canvasInstance = value
|
||||
detailData.getCanvasIfEdit.fun = getCanvasLength
|
||||
detailData.isShowMark = false
|
||||
console.log('初始化完成')
|
||||
}
|
||||
const editFrontBackCanvasInit = (value:any)=>{
|
||||
detailData.canvasInstance = value
|
||||
detailData.getCanvasIfEdit.fun = getCanvasLength
|
||||
detailData.isShowMark = false
|
||||
@@ -276,20 +288,19 @@ export default defineComponent({
|
||||
const getCanvasLength = ()=>{
|
||||
return detailData.canvasInstance?.commandManager?.undoStack?.length
|
||||
}
|
||||
const saveCanvas = async (type:string = '')=>{
|
||||
if(type !== 'auto'){
|
||||
detailData.isShowMark = true
|
||||
}
|
||||
const index = detailData.designDetail.clothes.findIndex(item => item.id === detailData.selectDetail.id);
|
||||
const getCanvasJSON = ()=>{
|
||||
if(!detailDom?.editCanvas)return ''
|
||||
return detailDom?.editCanvas?.getJSON()
|
||||
}
|
||||
const saveCanvas = async (canvasData:any)=>{
|
||||
const index = detailData.designDetail.clothes.findIndex(item => item.id === canvasData.id);
|
||||
await new Promise<void>((resolve, reject) => {
|
||||
if(!detailDom?.editCanvas)return resolve()
|
||||
let canvasJSON = detailDom?.editCanvas?.getJSON()
|
||||
let canvasData = JSON.parse(canvasJSON)
|
||||
if(!canvasData)return resolve()
|
||||
canvasData.canvas.objects.forEach((objectsItem:any) => {
|
||||
if(objectsItem.type == 'image')objectsItem.minioUrl = getMinioUrl(objectsItem.src)
|
||||
});
|
||||
let blob = new Blob([JSON.stringify(canvasData)], { type: "application/json" });
|
||||
let canvasJSON = JSON.parse(canvasData.canvasJSON)
|
||||
if(!canvasJSON)return resolve()
|
||||
// canvasData.canvas.objects.forEach((objectsItem:any) => {
|
||||
// if(objectsItem.type == 'image')objectsItem.minioUrl = getMinioUrl(objectsItem.src)
|
||||
// });
|
||||
let blob = new Blob([JSON.stringify(canvasJSON)], { type: "application/json" });
|
||||
let formData = new FormData();
|
||||
formData.append("file", blob, "data.json");
|
||||
formData.append("designItemDetailId", detailData.selectDetail.id);
|
||||
@@ -320,6 +331,11 @@ export default defineComponent({
|
||||
const canvasLoadJsonSuccess = async ()=>{
|
||||
let otherData = await props.updateOtherLayers()
|
||||
updateOtherLayers(otherData)
|
||||
if(detailData.selectDetail.undividedLayerColor){
|
||||
await detailDom.editCanvas.exportImage({isContainFixed:true,isPrintTrimsRepeat:false,isPrintTrimsNoRepeat:false,isContainNormalLayer:false}).then((rv)=>{
|
||||
detailData.selectDetail.undividedLayerColor = rv
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const submitBase64Data = ()=>{
|
||||
@@ -342,6 +358,12 @@ export default defineComponent({
|
||||
onMounted(()=>{
|
||||
nextTick(async ()=>{
|
||||
// detailData.currentView = 'canvasEditor'
|
||||
const sessionCanvasList = sessionStorage.getItem('canvasList');
|
||||
const canvasList = sessionCanvasList ? JSON.parse(sessionCanvasList) : []
|
||||
let canvasIndex = canvasList.findIndex(item => item.id === detailData.selectDetail.id);
|
||||
if(canvasIndex>1){
|
||||
detailData.canvasJSON = canvasList[canvasIndex].canvasJSON
|
||||
}
|
||||
if(detailData.selectDetail.canvasId){
|
||||
detailData.isShowMark = true
|
||||
await new Promise((resolve, reject) => {
|
||||
@@ -359,7 +381,7 @@ export default defineComponent({
|
||||
});
|
||||
})
|
||||
}
|
||||
setCanvas(detailData.selectDetail?.undividedLayerWithSinglePrint || detailData.selectDetail.undividedLayer || detailData.selectDetail.path).then(()=>{
|
||||
setCanvas(detailData.selectDetail.path).then(()=>{
|
||||
detailData.canvasLoad = true
|
||||
})
|
||||
})
|
||||
@@ -371,12 +393,14 @@ export default defineComponent({
|
||||
privewDetail,
|
||||
setFrontBackColor,
|
||||
frontBackChange,
|
||||
canvasInit,
|
||||
editSketchCanvasInit,
|
||||
editFrontBackCanvasInit,
|
||||
saveCanvas,
|
||||
getCanvasElement,
|
||||
updateOtherLayers,
|
||||
canvasLoadJsonSuccess,
|
||||
submitBase64Data,
|
||||
getCanvasJSON,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
|
||||
Reference in New Issue
Block a user