合并画布，部分样式调整
This commit is contained in:
X1627315083
@@ -51,7 +51,7 @@
|
||||
</div>
|
||||
<div class="collection_page" v-show="isNext">
|
||||
<i v-show="collectionStep > 1" class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
|
||||
<i v-if="collectionStep < 4" class="fi fi-rr-arrow-small-right Guide_1_8" @click.stop="nextStep()"></i>
|
||||
<i v-if="collectionStep < (selectObject.type == 'singleProductDesign'?4:5)" class="fi fi-rr-arrow-small-right Guide_1_8" @click.stop="nextStep()"></i>
|
||||
<i v-else class="fi fi-rr-check Guide_1_14" @click.stop="cleardata()"></i>
|
||||
|
||||
</div>
|
||||
@@ -67,7 +67,7 @@ import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
|
||||
import { rgbToHsv, setGradual } from "@/tool/util";
|
||||
import { init } from 'echarts/core';
|
||||
import MoodboardUpload from './collection/MoodboardUpload.vue';
|
||||
import PrintboardUpload from './collection/PrintboardUpload.vue';
|
||||
@@ -139,22 +139,27 @@ export default defineComponent({
|
||||
})
|
||||
})
|
||||
}
|
||||
let getPantongName = ()=>{
|
||||
let getPantongName = async ()=>{
|
||||
let colorBoards = store.state.UploadFilesModule.colorBoards;
|
||||
if(!colorBoards || colorBoards?.length == 0) return
|
||||
data.isShowMark = true
|
||||
let value: any = [];
|
||||
for (let v of colorBoards) {
|
||||
let color: any = [v.rgbValue.r, v.rgbValue.g, v.rgbValue.b];
|
||||
|
||||
}
|
||||
for (let index = 0; index < colorBoards.length; index++) {
|
||||
// if(colorBoards[index].gradient){
|
||||
// colorBoards[index].gradient.colorImg = await setGradual(colorBoards[index].gradient,320,700)
|
||||
// }
|
||||
let color: any = [colorBoards[index].rgbValue.r, colorBoards[index].rgbValue.g, colorBoards[index].rgbValue.b];
|
||||
let hsv = rgbToHsv(color);
|
||||
v.hsv = hsv[0] + hsv[1] + hsv[2];
|
||||
colorBoards[index].hsv = hsv[0] + hsv[1] + hsv[2];
|
||||
value.push({
|
||||
h: hsv[0],
|
||||
s: hsv[1],
|
||||
v: hsv[2],
|
||||
});
|
||||
}
|
||||
|
||||
return new Promise((resolve: any, reject: any) => {
|
||||
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, value)
|
||||
.then((rv: any) => {
|
||||
|
||||
@@ -784,7 +784,7 @@ export default defineComponent({
|
||||
},
|
||||
setOperate(){
|
||||
// this.colorList[this.selectIndex]
|
||||
this.selectColor.rgba = this.selectColor.rgba.r?this.selectColor.rgba:{r:0,g:0,b:0,a:1}
|
||||
this.selectColor.rgba = this.selectColor?.rgba?.r?this.selectColor?.rgba:{r:0,g:0,b:0,a:1}
|
||||
this.gradient.selectIndex = 0
|
||||
this.gradient.gradientShow = true
|
||||
this.colorList[this.selectIndex].rgba = this.selectColor.rgba
|
||||
|
||||
@@ -227,7 +227,7 @@ export default defineComponent({
|
||||
store: useStore(),
|
||||
moodb_:moodb.moodb_,
|
||||
moodboarList:computed(()=>{
|
||||
return useStore().state.UploadFilesModule.moodboard
|
||||
return useStore().state.UploadFilesModule?.moodboard
|
||||
}),
|
||||
};
|
||||
},
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
:closable="false"
|
||||
:mask="true"
|
||||
:keyboard="false"
|
||||
:destroyOnClose="true"
|
||||
:destroyOnClose="false"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
@@ -32,7 +32,7 @@
|
||||
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'Relight'">{{$t('ProductImg.relightingTool')}}</span>
|
||||
</div>
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
|
||||
<span>Selection Function</span>
|
||||
<span>{{$t('ProductImg.SelectionFunction')}}</span>
|
||||
</div>
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_Direction" style="margin-bottom: 1rem;">
|
||||
<a-select style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
|
||||
@@ -95,13 +95,17 @@
|
||||
<div class="text">Choose pose</div>
|
||||
</div>
|
||||
<div class="imgBox" v-mousewheel>
|
||||
<div class="item" v-for="item in poseList" @click="selectPose(item)">
|
||||
<div class="item" v-for="item,index in poseList" @click="setSelectPose(item,index)">
|
||||
<img :src="item.firstFrame"
|
||||
alt=""
|
||||
@mouseenter.stop="gifPlay($event,item)"
|
||||
@mouseleave.stop="gifPause($event,item)"
|
||||
>
|
||||
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
|
||||
<div class="btnBox">
|
||||
<div :class="{active:item.isChecked}">
|
||||
<i class="fi fi-br-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -110,7 +114,7 @@
|
||||
<i class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;" @click="getPrductimg()"></i>
|
||||
<div class="icon iconfont icon-xiala" v-show="scaleImageList[scaleImageIndex]?.resultType != 'Relight'" :class="{active:speedState}" @click.stop="openSpeed"></div>
|
||||
<div class="content" v-show="speedState">
|
||||
<div v-for="item in speedList" :key="item.value" :class="{active:item.value == speedData.value}" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
|
||||
<div v-for="item in speedList" :key="item.value" :class="{active:item.value == speedData.value}" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="generage_btn started_btn" v-show="generateSuccess.productimgIsProductimg && !generateSuccess.productimgRemProductimg">
|
||||
@@ -183,9 +187,9 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent, h, ref ,toRefs,createVNode,reactive, computed} from "vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { Modal } from "ant-design-vue";
|
||||
import { Modal,message } from "ant-design-vue";
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { downloadIamge,getMinioUrl } from "@/tool/util";
|
||||
import { downloadIamge,getMinioUrl,downloadVideoWithFetch } from "@/tool/util";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useStore } from "vuex";
|
||||
import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
|
||||
@@ -251,15 +255,15 @@ setup(props:any,{emit}) {
|
||||
],
|
||||
toPorductImg:[
|
||||
{
|
||||
title:'Generate with high quality',
|
||||
label:'High',
|
||||
relightLabel:'Relight',
|
||||
value:'',
|
||||
},{
|
||||
title:'',
|
||||
label:'FLUX',
|
||||
relightLabel:'Edit',
|
||||
value:'flux',
|
||||
},{
|
||||
title:'Generate with high quality',
|
||||
label:'High',
|
||||
relightLabel:'Relight',
|
||||
value:'',
|
||||
},
|
||||
]
|
||||
},
|
||||
@@ -368,7 +372,6 @@ setup(props:any,{emit}) {
|
||||
}else{
|
||||
arr.push(rv)
|
||||
}
|
||||
if(productimg.generateSuccess?.isIndex || productimg.generateSuccess?.isIndex == 0)emit('setGenerateAwait',{index:productimg.generateSuccess.isIndex,listType:productimg.generateSuccess.listType})
|
||||
setPrductimg(arr)
|
||||
productimg.isGenerate = true
|
||||
}
|
||||
@@ -413,7 +416,7 @@ setup(props:any,{emit}) {
|
||||
}
|
||||
}
|
||||
// url = Https.httpUrls.poseTransformResult
|
||||
// data = {taskId:'f785fbbf-425c-4d9b-b4d0-0f38f480c64e-83'}
|
||||
// data = {taskId: "00169296-220e-4032-bfce-ca8ff67d6468-83"}
|
||||
productimg.generateSuccess.prductimgTime = setInterval(()=>{
|
||||
if(!state)return
|
||||
state = false
|
||||
@@ -433,16 +436,23 @@ setup(props:any,{emit}) {
|
||||
rv[0].sourceUrl = productimg.generateSuccess.sourceUrl
|
||||
rv[0].designOutfitUrl = rv[0].url
|
||||
productimg.generateSuccess.newData = rv[0]
|
||||
if(productimg.generateSuccess?.scaleImage){
|
||||
console.log(productimg.generateSuccess.newData)
|
||||
if(!scaleImage.value){
|
||||
productimg.generateSuccess.status = 'add'
|
||||
setCove()
|
||||
}
|
||||
// productimg.generateSuccess.listType = listType
|
||||
isEnd = true
|
||||
clearInterval(productimg.generateSuccess.remPrductimgTime)
|
||||
}else if(rv[0].status == 'Fail'){
|
||||
message.info(t('ProductImg.jsContent3'))
|
||||
isEnd = true
|
||||
}
|
||||
generateProceedList = rv
|
||||
generateProceedList = data
|
||||
if(!scaleImage.value){
|
||||
let awaitData = {awaitId:productimg.generateSuccess.awaitId,parentId:productimg.generateSuccess.parentId,listType:productimg.generateSuccess.listType,taskId:generateProceedList[0]}
|
||||
emit('setGenerateAwait',awaitData)
|
||||
}
|
||||
if(isEnd){
|
||||
store.state.store.dispatch('getCredits')
|
||||
clearInterval(productimg.generateSuccess.prductimgTime)
|
||||
@@ -503,6 +513,7 @@ setup(props:any,{emit}) {
|
||||
...JSON.parse(JSON.stringify(productimg.generateSuccess.newData)),
|
||||
sourceUrl:productimg.generateSuccess.newData.sourceUrl || scaleImageList.value[scaleImageIndex.value].sourceUrl,
|
||||
oldId:productimg.generateSuccess.id,
|
||||
awaitId:productimg.generateSuccess.awaitId,
|
||||
status:productimg.generateSuccess.status,
|
||||
listType:productimg.generateSuccess.listType,
|
||||
isIndex:productimg.generateSuccess.isIndex,
|
||||
@@ -528,6 +539,13 @@ setup(props:any,{emit}) {
|
||||
const gifPause = (e:any,item:any)=>{
|
||||
e.target.src = item.firstFrame || item.firstFrameUrl//静态图片
|
||||
}
|
||||
const setSelectPose = (item:any,index:number)=>{
|
||||
productimg.poseList.forEach((poseItem:any)=>{
|
||||
poseItem.isChecked = false
|
||||
})
|
||||
productimg.poseList[index].isChecked = true
|
||||
productimg.selectPose = item.id
|
||||
}
|
||||
return {
|
||||
t,
|
||||
...toRefs(productimg),
|
||||
@@ -551,6 +569,8 @@ setup(props:any,{emit}) {
|
||||
getPoseList,
|
||||
gifPlay,
|
||||
gifPause,
|
||||
setSelectPose,
|
||||
generateProceedList,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@@ -589,8 +609,9 @@ methods: {
|
||||
|
||||
}
|
||||
// this.
|
||||
this.generateSuccess.awaitId = list[index].id
|
||||
this.generateSuccess.userLikeSortId = list[index].userLikeSortId
|
||||
this.generateSuccess.parentId = list[index].parentId
|
||||
this.generateSuccess.parentId = list[index].parentId || list[index].userLikeSortId
|
||||
this.generateSuccess.productimgIsProductimg = !!this.generateSuccess.productimgIsProductimg
|
||||
this.generateSuccess.productimgRemProductimg = !!this.generateSuccess.productimgRemProductimg
|
||||
this.generateSuccess.isShowMark = !!this.generateSuccess.isShowMark
|
||||
@@ -637,8 +658,12 @@ methods: {
|
||||
document.addEventListener('keydown',this.setKeydown)
|
||||
},
|
||||
async cancelDsign(){
|
||||
|
||||
document.removeEventListener('keydown',this.setKeydown)
|
||||
if(this.generateSuccess.productimgIsProductimg){
|
||||
let awaitData = {awaitId:this.generateSuccess.awaitId,parentId:this.generateSuccess.parentId,listType:this.generateSuccess.listType,taskId:this.generateProceedList[0]}
|
||||
this.$emit('setGenerateAwait',awaitData)
|
||||
}
|
||||
|
||||
// let data = {
|
||||
// ...JSON.parse(JSON.stringify(this.generateSuccess)),
|
||||
// }
|
||||
@@ -691,7 +716,7 @@ methods: {
|
||||
this.setCove()
|
||||
}
|
||||
}
|
||||
this.generateSuccess.scaleImage = true
|
||||
|
||||
this.scaleImage = false
|
||||
// this.scaleImageIndex = 0
|
||||
this.isNext = false
|
||||
@@ -720,12 +745,16 @@ methods: {
|
||||
},
|
||||
download(){
|
||||
let url
|
||||
if(this.generateSuccess.resultType == 'PoseTransfer'){
|
||||
url = this.generateSuccess.newData.videoUrl
|
||||
if(this.generateSuccess?.resultType == 'PoseTransfer' || this.generateSuccess?.newData?.resultType == 'PoseTransfer'){
|
||||
url = this.generateSuccess?.videoUrl
|
||||
if(this.generateSuccess?.newData?.videoUrl){
|
||||
url = this.generateSuccess.newData.videoUrl
|
||||
}
|
||||
downloadVideoWithFetch(url)
|
||||
}else{
|
||||
url = this.generateSuccess.newData.designOutfitUrl || this.generateSuccess?.designOutfitUrl
|
||||
url = this.generateSuccess?.newData?.designOutfitUrl || this.generateSuccess?.designOutfitUrl || this.generateSuccess?.url
|
||||
downloadIamge(url)
|
||||
}
|
||||
downloadIamge(url)
|
||||
},
|
||||
setScaleImageIndex(index:any){
|
||||
// this.scaleImageIndex = index
|
||||
@@ -849,14 +878,47 @@ overflow: visible !important;
|
||||
flex-shrink: 0;
|
||||
height: 25rem;
|
||||
position: relative;
|
||||
|
||||
:deep(.ant-checkbox-wrapper){
|
||||
> .checkbox{
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
}
|
||||
> .btnBox{
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> div{
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
display: flex;
|
||||
border: 1px solid;
|
||||
align-items: center;
|
||||
border-radius: .5rem;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
margin-bottom: 1rem;
|
||||
> i{
|
||||
display: flex;
|
||||
}
|
||||
>.fi-br-check{
|
||||
color: #fff;
|
||||
display: none;
|
||||
}
|
||||
&.active{
|
||||
background: #000;
|
||||
> i{
|
||||
display: flex;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> img{
|
||||
width: 80%;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
<div class="generage_btn_box">
|
||||
<div class="generage_btn started_btn" style="margin-left: 2rem;">
|
||||
<div class="" @click.stop="openEditTools()" style="margin-left: 1rem;">
|
||||
Tools
|
||||
{{ $t('Header.Tools') }}
|
||||
</div>
|
||||
<div class="icon iconfont icon-xiala" :class="{active:speedState}" @click.stop="openSpeed"></div>
|
||||
<div class="content" v-show="speedState">
|
||||
@@ -50,8 +50,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery_btn" @click="openCanvas()" style="margin-left: auto;">
|
||||
Canvas
|
||||
<div class="gallery_btn white" @click="openCanvas()" style="margin-left: auto;">
|
||||
{{ $t('Header.toolsCanvas') }}
|
||||
</div>
|
||||
|
||||
<!-- <div class="gallery_btn white button_margin_14 Guide_1_30" v-show="designCollectionId"
|
||||
@@ -75,9 +75,9 @@
|
||||
{{ $t('HomeView.SelectedDesign') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="generalModel_state" v-show="domHidden || !recycleDomHidden">
|
||||
<div class="generalModel_state" v-show="likeDesignTools">
|
||||
<div v-show="isUnfold" class="generalModel_state_item smail" style="margin-right: 1rem;">
|
||||
<span>Type :</span>
|
||||
<span>{{ $t('Header.Type') }} :</span>
|
||||
<a-select
|
||||
v-model:value="resultType"
|
||||
size="large"
|
||||
@@ -89,11 +89,11 @@
|
||||
</a-select>
|
||||
</div>
|
||||
<div class="generalModel_state_item smail" style="margin-right: 1rem;">
|
||||
<span>Unfold :</span>
|
||||
<span>{{ $t('Header.Unfold') }} :</span>
|
||||
<a-switch v-model:checked="isUnfold" @change="setUnfold" />
|
||||
</div>
|
||||
<div class="generalModel_state_item smail" style="margin-right: 0;">
|
||||
<span>Size :</span>
|
||||
<span>{{ $t('Header.Size') }} :</span>
|
||||
<a-select
|
||||
v-model:value="widthValue.value"
|
||||
size="large"
|
||||
@@ -124,13 +124,14 @@
|
||||
'like'
|
||||
)">
|
||||
<img class="content_img"
|
||||
v-if="design.resultType == 'PoseTransfer'"
|
||||
:src="design.firstFrameUrl" alt=""
|
||||
v-if="design?.resultType == 'PoseTransfer'"
|
||||
:src="design?.firstFrameUrl" alt=""
|
||||
@mouseenter.stop="gifPlay($event,design)"
|
||||
@mouseleave.stop="gifPause($event,design)" >
|
||||
<img class="content_img" v-show="!design?.generateAwait" :src="design.designOutfitUrl||design.url"
|
||||
:key="design.designOutfitUrl" designType="like" :index="index"/>
|
||||
<a-spin v-show="design?.generateAwait" size="large"></a-spin>
|
||||
<!-- <div :style="{'background-image': `url(${design?.designOutfitUrl||design?.url})`}" class="content_img" v-if="design?.designOutfitUrl||design?.url" :key="design?.designOutfitUrl" designType="like" :index="index"></div> -->
|
||||
<img class="content_img" v-if="design?.designOutfitUrl||design?.url" :src="design?.designOutfitUrl||design?.url"
|
||||
:key="design?.designOutfitUrl" designType="like" :index="index"/>
|
||||
<a-spin v-show="!design?.designOutfitUrl && !design?.url && !design?.firstFrameUrl" size="large"></a-spin>
|
||||
|
||||
<!-- <div class="content_img_block_child" @click.stop>
|
||||
<div class="content_img_block content_img_GetWidth active childItem"
|
||||
@@ -159,7 +160,7 @@
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="btn" v-show="!design?.generateAwait">
|
||||
<div class="btn" v-if="design?.designOutfitUrl||design?.url || design?.firstFrameUrl" v-show="!design?.generateAwait">
|
||||
<i @click.stop="openEditBtn(design,index,$event)" class="fi fi-br-menu-dots-vertical"></i>
|
||||
|
||||
</div>
|
||||
@@ -227,19 +228,19 @@
|
||||
</div>
|
||||
<div ref="designBtn" class="btnOpen" @click.stop="()=>openEditBtnId=-1" :class="{active:openEditBtnId == selectEditBtn?.designItemId||openEditBtnId == selectEditBtn?.id}">
|
||||
<div class="item" v-show="selectEditBtn?.resultType == 'Design'" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'ToProductImage','add','like')">
|
||||
<div class="text">To Product Image</div>
|
||||
<div class="text">{{$t('Header.toolsToProduct')}}</div>
|
||||
<i class="fi fi fi-ss-box-open"></i>
|
||||
</div>
|
||||
<div class="item" v-show="selectEditBtn?.resultType == 'ToProductImage' || selectEditBtn?.resultType == 'Relight'" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'Relight','add','like')">
|
||||
<div class="text">Relight</div>
|
||||
<div class="text">{{$t('Header.toolsRelight')}}</div>
|
||||
<i class="fi fi fi-br-keyboard-brightness"></i>
|
||||
</div>
|
||||
<div class="item" v-show="selectEditBtn?.resultType == 'ToProductImage' || selectEditBtn?.resultType == 'Relight'" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'PoseTransfer','add','like')">
|
||||
<div class="text">Transfer Pose</div>
|
||||
<div class="text">{{$t('Header.toolsToTransferPose')}}</div>
|
||||
<i class="fi fi fi-rr-play-alt"></i>
|
||||
</div>
|
||||
<div class="item" @click="dislikeDesignCollection(selectEditBtn,selectEditBtn?.resultType,selectEditBtnIndex)">
|
||||
<div class="text">Delete</div>
|
||||
<div class="text">{{$t('Header.Delete')}}</div>
|
||||
<i class="fi fi-rr-trash icon_delete">
|
||||
</i>
|
||||
</div>
|
||||
@@ -258,12 +259,12 @@
|
||||
<DesignDetailcopy v-if="detailDestroy" ref="designDetail" @destroy="setDetailDestroy" @finishRedesign="finishRedesign"></DesignDetailcopy>
|
||||
<editDesignType ref="editDesignType"
|
||||
@addGenerateImg="addGenerateImg"
|
||||
@setGenerateAwait="generateLoad"
|
||||
:productData="{
|
||||
upload:upload,
|
||||
RelightDirection:RelightDirection,
|
||||
RelightDirectionList:RelightDirectionList,
|
||||
}"
|
||||
@setGenerateAwait="setGenerateAwait"
|
||||
:isProductimg="true"></editDesignType>
|
||||
<designTools ref="designTools" @editToolsSuccess="editToolsSuccess"></designTools>
|
||||
</div>
|
||||
@@ -280,6 +281,7 @@ import DesignDetailcopy from "@/component/DetailCopy/designDetail.vue";
|
||||
import html2canvas from "html2canvas";
|
||||
import { message,Modal } from "ant-design-vue";
|
||||
import { useStore } from "vuex";
|
||||
import { setGradual } from "@/tool/util";
|
||||
import { Https } from "@/tool/https";
|
||||
import { openGuide,driverObj__ } from "@/tool/guide";
|
||||
import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
|
||||
@@ -312,22 +314,23 @@ export default defineComponent({
|
||||
},
|
||||
props:['isState'],
|
||||
setup(props,{emit}) {
|
||||
const {t} = useI18n()
|
||||
const store = useStore();
|
||||
const editDesignType = reactive({
|
||||
upload:{id:store.state.Workspace.probjects.id},
|
||||
RelightDirectionList:[
|
||||
{
|
||||
value:'Right Light',
|
||||
label:useI18n().t('ProductImg.RightLight')
|
||||
label:t('ProductImg.RightLight')
|
||||
},{
|
||||
value:'Left Light',
|
||||
label:useI18n().t('ProductImg.LeftLight')
|
||||
label:t('ProductImg.LeftLight')
|
||||
},{
|
||||
value:'Top Light',
|
||||
label:useI18n().t('ProductImg.TopLight')
|
||||
label:t('ProductImg.TopLight')
|
||||
},{
|
||||
value:'Bottom Light',
|
||||
label:useI18n().t('ProductImg.BottomLight')
|
||||
label:t('ProductImg.BottomLight')
|
||||
}
|
||||
],
|
||||
RelightDirection:'Right Light'
|
||||
@@ -406,20 +409,20 @@ export default defineComponent({
|
||||
let speed = reactive({
|
||||
speedList:[
|
||||
{
|
||||
label:'To Product Image',
|
||||
label:computed(()=>t('Header.toolsToProduct')),
|
||||
value:'toProduct',
|
||||
|
||||
},{
|
||||
label:'Transfer Pose',
|
||||
label:computed(()=>t('Header.toolsToTransferPose')),
|
||||
value:'poseTransfer',
|
||||
},{
|
||||
label:'Relight',
|
||||
label:computed(()=>t('Header.toolsRelight')),
|
||||
value:'relight',
|
||||
},
|
||||
],
|
||||
speedState:false,
|
||||
speedData:{
|
||||
label:'To Product Image',
|
||||
label:computed(()=>t('Header.toolsToProduct')),
|
||||
value:'toProduct',
|
||||
},
|
||||
})
|
||||
@@ -454,13 +457,13 @@ export default defineComponent({
|
||||
likeLoading: false, //喜欢防抖
|
||||
widthList:[
|
||||
{
|
||||
label:'Medium',
|
||||
label:t('Header.Small'),
|
||||
value:170,
|
||||
},{
|
||||
label:'Large',
|
||||
label:t('Header.Medium'),
|
||||
value:250,
|
||||
},{
|
||||
label:'Extra-large',
|
||||
label:t('Header.Large'),
|
||||
value:400,
|
||||
}
|
||||
],
|
||||
@@ -470,36 +473,35 @@ export default defineComponent({
|
||||
//类型
|
||||
resultTypeList:[
|
||||
{
|
||||
label:'All',
|
||||
label:t('Header.All'),
|
||||
value:'All',
|
||||
},{
|
||||
label:'Design',
|
||||
label:t('Header.Design'),
|
||||
value:'Design',
|
||||
},{
|
||||
label:'Product',
|
||||
label:t('Header.Product'),
|
||||
value:'Product',
|
||||
},
|
||||
// ,{
|
||||
// label:'To Product Image',
|
||||
// value:'ToProductImage',
|
||||
// },{
|
||||
// label:'Relight',
|
||||
// value:'Relight',
|
||||
// },
|
||||
{
|
||||
label:'Pose Transfer',
|
||||
label:t('Header.PoseTransfer'),
|
||||
value:'PoseTransfer',
|
||||
},
|
||||
],
|
||||
resultType:'All',
|
||||
oldSelectLikeDesign:null as any
|
||||
oldSelectLikeDesign:null as any,
|
||||
likeDesignTools:false,
|
||||
})
|
||||
watch(()=>likeDesignCollectionList.value.length,(val)=>{
|
||||
if(val>0)uploadLikeDom()
|
||||
if(val>0){
|
||||
uploadLikeDom()
|
||||
}else{
|
||||
designData.selectLikeDesign = []
|
||||
|
||||
}
|
||||
})
|
||||
provide('exportNav',exportNav)
|
||||
let isShowOperate = ref(false)
|
||||
let {t} = useI18n()
|
||||
let driver__:any = computed(()=>{
|
||||
return store.state.Guide.guide
|
||||
})
|
||||
@@ -853,8 +855,12 @@ export default defineComponent({
|
||||
userGroupId:data.userGroupId || data.id,
|
||||
firstFrameUrl:data.firstFrameUrl,
|
||||
gifUrl:data.gifUrl,
|
||||
awaitId:data.awaitId,
|
||||
taskId:data.taskId,
|
||||
parentId:data.parentId || data.userLikeSortId,
|
||||
videoUrl:data?.videoUrl,
|
||||
}
|
||||
|
||||
let list = []
|
||||
if(data.listType == 'disLike'){
|
||||
list = designCollectionList.value
|
||||
@@ -882,11 +888,23 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
}
|
||||
list[data.isIndex].designOutfitUrl = obj.designOutfitUrl
|
||||
list[data.isIndex].resultType = obj.resultType
|
||||
list[data.isIndex].id = obj.id
|
||||
list[data.isIndex].designItemId = obj.designItemId
|
||||
list[data.isIndex].sourceUrl = obj.sourceUrl
|
||||
list.forEach((item)=>{
|
||||
if(data.parentId == item.userLikeSortId){
|
||||
item.childList.forEach((childItem)=>{
|
||||
if(childItem.id == data.awaitId){
|
||||
childItem.designOutfitUrl = obj.designOutfitUrl
|
||||
childItem.resultType = obj.resultType
|
||||
childItem.id = obj.id
|
||||
childItem.designItemId = obj.designItemId
|
||||
childItem.sourceUrl = obj.sourceUrl
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
nextTick().then(()=>{
|
||||
uploadLikeDom()
|
||||
})
|
||||
|
||||
}
|
||||
// nextTick().then(()=>{
|
||||
// // setDesignItemStyle()
|
||||
@@ -936,10 +954,27 @@ export default defineComponent({
|
||||
Https.axiosPost(url, data,{params:params.likeOrDislike?params:''}).then(
|
||||
(rv) => {
|
||||
if(str == 'like'){
|
||||
// likeDesignCollectionList.value.forEach((item)=>{
|
||||
// if(item.userLikeSortId == designData.selectDesign.userLikeSortId){
|
||||
// // if(item?.childList.)
|
||||
// item.unshift(data)
|
||||
// }
|
||||
// })
|
||||
// if(){
|
||||
|
||||
// }else{
|
||||
|
||||
// }
|
||||
likeDesignCollectionList.value.forEach((item:any)=>{
|
||||
if(item.resultType == 'Design' && item.userLikeSortId == designData.selectDesign.userLikeSortId){
|
||||
if(!item?.childList)item.childList = []
|
||||
item.childList.push(design)
|
||||
// if(item?.childList)
|
||||
const removeIndex = item?.childList.findIndex(childItem => childItem?.taskId === design?.taskId);
|
||||
if (removeIndex !== -1) {
|
||||
item.childList[removeIndex] = design
|
||||
}else{
|
||||
item.childList.push(design)
|
||||
}
|
||||
}
|
||||
})
|
||||
}else{
|
||||
@@ -1033,14 +1068,28 @@ export default defineComponent({
|
||||
const upDataLikeListType = ()=>{
|
||||
|
||||
}
|
||||
const setGenerateAwait = (data:any)=>{
|
||||
const generateLoad = (data:any)=>{
|
||||
if(!data.taskId)return
|
||||
let list = []
|
||||
if(data.listType == 'disLike'){
|
||||
list = designCollectionList.value
|
||||
}else{
|
||||
// list = designData.selectLikeDesign
|
||||
list = likeDesignCollectionList.value
|
||||
}
|
||||
list[data.index].generateAwait = true;
|
||||
list.forEach((item)=>{
|
||||
if(data.parentId == item.userLikeSortId){
|
||||
const removeIndex = item?.childList.findIndex(childItem => childItem?.taskId === data?.taskId);
|
||||
if(removeIndex == -1){
|
||||
item.childList.push(data)
|
||||
}
|
||||
}
|
||||
})
|
||||
nextTick().then(()=>{
|
||||
designData.isUnfold = true
|
||||
uploadLikeDom()
|
||||
})
|
||||
// list[data.index].generateAwait = true;
|
||||
|
||||
}
|
||||
const gifPlay = (e:any,item:any)=>{
|
||||
@@ -1163,6 +1212,7 @@ export default defineComponent({
|
||||
openEditTools,
|
||||
openCanvas,
|
||||
editToolsSuccess,
|
||||
uploadLikeDom,
|
||||
|
||||
likeItemDom,
|
||||
collItemDom,
|
||||
@@ -1185,7 +1235,7 @@ export default defineComponent({
|
||||
addGenerateImg,
|
||||
setNoDesignLike,
|
||||
upDataLikeListType,
|
||||
setGenerateAwait,
|
||||
generateLoad,
|
||||
gifPlay,
|
||||
gifPause,
|
||||
startHover,
|
||||
@@ -1245,24 +1295,24 @@ export default defineComponent({
|
||||
this.observerData.observer.unobserve(this.$refs.rightContentBlockBox);
|
||||
},
|
||||
async mounted() {
|
||||
if(window.innerWidth < 1200){
|
||||
this.widthList = [
|
||||
{
|
||||
label:'Medium',
|
||||
value:70,
|
||||
},{
|
||||
label:'Large',
|
||||
value:150,
|
||||
},{
|
||||
label:'Extra-large',
|
||||
value:200,
|
||||
}
|
||||
]
|
||||
this.widthValue = {
|
||||
label:'Medium',
|
||||
value:70,
|
||||
}
|
||||
}
|
||||
// if(window.innerWidth < 1200){
|
||||
// this.widthList = [
|
||||
// {
|
||||
// label:'Medium',
|
||||
// value:70,
|
||||
// },{
|
||||
// label:'Large',
|
||||
// value:150,
|
||||
// },{
|
||||
// label:'Extra-large',
|
||||
// value:200,
|
||||
// }
|
||||
// ]
|
||||
// this.widthValue = {
|
||||
// label:'Medium',
|
||||
// value:70,
|
||||
// }
|
||||
// }
|
||||
window.addEventListener('beforeunload', (event)=>{
|
||||
this.store.commit("clearAllCollection");
|
||||
});
|
||||
@@ -1272,7 +1322,13 @@ export default defineComponent({
|
||||
this.observerData.observer = new ResizeObserver(entries => {
|
||||
for (let entry of entries) {
|
||||
clearTimeout(this.observerData.time)
|
||||
if(entries[0].contentRect.width > 800){
|
||||
this.likeDesignTools = true
|
||||
}else{
|
||||
this.likeDesignTools = false
|
||||
}
|
||||
this.observerData.time = setTimeout(()=>{
|
||||
|
||||
this.setSystemDesigner(0)
|
||||
this.setDesignItemStyle()
|
||||
},100)
|
||||
@@ -1359,9 +1415,9 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
//设计新的collection
|
||||
designNewCollection() {
|
||||
async designNewCollection() {
|
||||
clearTimeout(this.getDesignTime);
|
||||
let data = this.getDesignData("");
|
||||
let data = await this.getDesignData("");
|
||||
if(this.driver__.driver){
|
||||
nextTick().then(()=>{
|
||||
driverObj__.moveNext();
|
||||
@@ -1467,7 +1523,7 @@ export default defineComponent({
|
||||
}).catch(()=>this.showDesignMark = false)
|
||||
},
|
||||
//重新设计collection
|
||||
resDesignCollection() {
|
||||
async resDesignCollection() {
|
||||
if(this.driver__.driver){
|
||||
nextTick().then(()=>{
|
||||
driverObj__.moveNext();
|
||||
@@ -1475,7 +1531,7 @@ export default defineComponent({
|
||||
}
|
||||
clearTimeout(this.getDesignTime);
|
||||
this.isShowMark = true
|
||||
let data = this.getDesignData(this.designCollectionId);
|
||||
let data = await this.getDesignData(this.designCollectionId);
|
||||
Https.axiosPost(Https.httpUrls.reDesignCollection, data)
|
||||
.then((rv: any) => {
|
||||
if (rv) {
|
||||
@@ -1498,7 +1554,7 @@ export default defineComponent({
|
||||
|
||||
},
|
||||
|
||||
getDesignData(designCollectionId: any) {
|
||||
async getDesignData(designCollectionId: any) {
|
||||
let {
|
||||
moodboardFiles,
|
||||
printboardFiles,
|
||||
@@ -1521,7 +1577,7 @@ export default defineComponent({
|
||||
modelList.push(obj)
|
||||
})
|
||||
let data: any = {
|
||||
colorBoards: this.getColorBoard(colorBoards),
|
||||
colorBoards: await this.getColorBoard(colorBoards),
|
||||
// marketingSketchs: this.getBoardId(marketingSketchFiles),
|
||||
moodBoards: this.getBoardId(moodboardFiles),
|
||||
printBoards: this.getPrintId(printboardFiles),
|
||||
@@ -1603,17 +1659,25 @@ export default defineComponent({
|
||||
|
||||
getColorBoard(boardData: any) {
|
||||
boardData = boardData || []
|
||||
let colorBoards = boardData.map((v: any) => {
|
||||
let data = {
|
||||
id: v.id,
|
||||
name: v.name,
|
||||
tcx: v.tcx,
|
||||
gradient:v.gradient,
|
||||
rgbValue: "",
|
||||
};
|
||||
data.rgbValue = `${v.rgbValue.r} ${v.rgbValue.g} ${v.rgbValue.b}`;
|
||||
return data;
|
||||
});
|
||||
let colorBoards = [] as any
|
||||
for (let index = 0; index < boardData.length; index++) {
|
||||
new Promise(async (resolve,reject)=>{
|
||||
const item = boardData[index];
|
||||
if(item.gradient){
|
||||
item.gradient.colorImg = await setGradual(item.gradient,320,700)
|
||||
}
|
||||
let data = {
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
tcx: item.tcx,
|
||||
gradient:item.gradient,
|
||||
rgbValue: "",
|
||||
};
|
||||
data.rgbValue = `${item.rgbValue.r} ${item.rgbValue.g} ${item.rgbValue.b}`;
|
||||
colorBoards.push(data);
|
||||
resolve('')
|
||||
})
|
||||
}
|
||||
return colorBoards;
|
||||
},
|
||||
deleteDesignCollection(list:any,index:any){
|
||||
@@ -1870,6 +1934,7 @@ export default defineComponent({
|
||||
// let designDetail: any = this.$refs.designDetail;
|
||||
// designDetail.destroy();
|
||||
this.detailDestroy = false
|
||||
this.uploadLikeDom()
|
||||
},
|
||||
//打开图片详情
|
||||
designDetail(
|
||||
@@ -1939,7 +2004,7 @@ export default defineComponent({
|
||||
|
||||
.designPage_left_bottom{
|
||||
position: absolute;
|
||||
width: 4rem;
|
||||
width: 3rem;
|
||||
height: 7rem;
|
||||
background: #fff;
|
||||
border: 2px solid;
|
||||
@@ -1953,6 +2018,10 @@ export default defineComponent({
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
transition: width .3s;
|
||||
&:hover{
|
||||
width: 4rem;
|
||||
}
|
||||
>span{
|
||||
transition: all .3s;
|
||||
transform: rotate(90deg);
|
||||
@@ -2102,11 +2171,9 @@ export default defineComponent({
|
||||
// top: calc(50% - 10.4rem / 2);
|
||||
border: 2px solid;
|
||||
border-left: none;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
flex-direction: column;
|
||||
&.active{
|
||||
right: 53rem;
|
||||
left: 44rem;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
}
|
||||
@@ -2340,11 +2407,17 @@ export default defineComponent({
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
|
||||
color: #fff;
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.icon_like,.icon_delete {
|
||||
font-size: 1.4rem;
|
||||
cursor: pointer;
|
||||
text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
|
||||
color: #fff;
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
:closable="false"
|
||||
:mask="false"
|
||||
:keyboard="false"
|
||||
:destroyOnClose="false"
|
||||
:destroyOnClose="true"
|
||||
:zIndex="1000"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
@@ -28,7 +28,7 @@
|
||||
<!-- <div class="modal_title_text">
|
||||
<div>Setting</div>
|
||||
</div> -->
|
||||
<div class="collectionBox" :class="{editCanvas:openType == 'editCanvas'}">
|
||||
<div class="collectionBox">
|
||||
<toProductRelight ref="toProduct"
|
||||
:productimgMenu="{value:'ToProductImage',label:$t('ProductImg.ProductImage')}"
|
||||
:isDesignPage="true"
|
||||
@@ -46,9 +46,19 @@
|
||||
v-if="openType == 'relight'"
|
||||
></toProductRelight>
|
||||
<poseTransfer v-if="openType == 'poseTransfer'" :isDesignPage="true" @setLike="designLike" ref="poseTransfer"></poseTransfer>
|
||||
<div class="canvasBox" ref="canvasBox">
|
||||
<editCanvas v-if="openType == 'editCanvas'" ref="editCanvas"
|
||||
></editCanvas>
|
||||
<div v-if="openType == 'editCanvas'" class="canvasBox" :class="{editCanvas:openType == 'editCanvas'}">
|
||||
<div class="canvas" ref="canvasBox">
|
||||
<editCanvas @changeCanvas="changeCanvas" ref="editCanvas">
|
||||
<template #existsImageList>
|
||||
<ExistsImageList :list="canvasSelectList" @select="handleImageSelect" />
|
||||
</template>
|
||||
</editCanvas>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<div class="gallery_btn" @click="saveCanvas">Save</div>
|
||||
<div class="gallery_btn">Share</div>
|
||||
<div class="gallery_btn" @click="exportElement">Export</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -66,10 +76,12 @@ import { useI18n } from 'vue-i18n'
|
||||
import toProductRelight from '../tools/toProduct/index.vue'
|
||||
import poseTransfer from '../tools/poseTransfer/index.vue'
|
||||
import editCanvas from "@/component/Canvas/CanvasEditor/index.vue";
|
||||
import ExistsImageList from "@/component/Canvas/ExistsImageList/index.vue";
|
||||
import JSZip, { forEach } from "jszip";
|
||||
|
||||
export default defineComponent({
|
||||
components:{
|
||||
toProductRelight,poseTransfer,editCanvas
|
||||
toProductRelight,poseTransfer,editCanvas,ExistsImageList
|
||||
},
|
||||
props:{
|
||||
},
|
||||
@@ -83,6 +95,8 @@ export default defineComponent({
|
||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||
createProbject:inject('createProbject',()=>{}) as any,
|
||||
likeDesignList:[],
|
||||
canvasSelectList:[] as any,
|
||||
canvasDetailData:null as any,
|
||||
})
|
||||
const dataDom = reactive({
|
||||
toProduct:null as any,
|
||||
@@ -93,8 +107,10 @@ export default defineComponent({
|
||||
const init = (value:any,list:any)=>{
|
||||
data.designTools = true
|
||||
data.openType = value
|
||||
if(value == 'editCanvas')
|
||||
return
|
||||
if(value == 'editCanvas'){
|
||||
getSelectCanvasImg()
|
||||
return
|
||||
}
|
||||
data.likeDesignList = list
|
||||
nextTick(()=>{
|
||||
let fileList = [] as any
|
||||
@@ -118,13 +134,180 @@ export default defineComponent({
|
||||
dataDom[value].openSetData(fileList)
|
||||
})
|
||||
}
|
||||
|
||||
let cleardata = async ()=>{
|
||||
data.openType = ''
|
||||
data.likeDesignList = []
|
||||
data.designTools = false
|
||||
}
|
||||
const designLike = ()=>{
|
||||
|
||||
}
|
||||
|
||||
|
||||
//画布相关
|
||||
const getSelectCanvasImg = ()=>{
|
||||
let allCollection = store.state.UploadFilesModule.allBoardData
|
||||
let allCollectionStr = [
|
||||
{value:'disposeMoodboard',name:'Entirety Moodboard'},
|
||||
{value:'moodboardFiles',name:'Moodboard'},
|
||||
{value:'printboardFiles',name:'Printboard'},
|
||||
{value:'sketchboardFiles',name:'Sketchboard'},
|
||||
]
|
||||
allCollectionStr.forEach((itemStr:any)=>{
|
||||
let list = [] as any
|
||||
allCollection[itemStr.value].forEach((imgItem)=>{
|
||||
list.push({url:imgItem.url || imgItem.imgUrl})
|
||||
})
|
||||
let obj = {
|
||||
value:itemStr.value,
|
||||
type:itemStr.name,
|
||||
imgList:list,
|
||||
}
|
||||
if(list.length > 0){
|
||||
data.canvasSelectList.push(obj)
|
||||
}
|
||||
})
|
||||
let designData = store.state.HomeStoreModule.likeDesignCollectionList
|
||||
if(designData.length > 0){
|
||||
let list = [] as any
|
||||
designData.forEach((item:any)=>{
|
||||
list.push({url:item.designOutfitUrl || item.url})
|
||||
if(item.childList.length > 0){
|
||||
item.childList.forEach((childItem)=>{
|
||||
list.push({url:childItem.designOutfitUrl || childItem.url})
|
||||
})
|
||||
}
|
||||
})
|
||||
let obj = {
|
||||
value:'design',
|
||||
type:'Design',
|
||||
imgList:list
|
||||
}
|
||||
if(list.length > 0){
|
||||
data.canvasSelectList.push(obj)
|
||||
}
|
||||
}
|
||||
let mannquinList = data.selectObject.model
|
||||
let list = [] as any
|
||||
mannquinList.forEach((item:any)=>{
|
||||
list.push({url:item.url})
|
||||
})
|
||||
let obj = {
|
||||
value:'mannquin',
|
||||
type:'Mannquin',
|
||||
imgList:list
|
||||
}
|
||||
if(list.length > 0){
|
||||
data.canvasSelectList.push(obj)
|
||||
}
|
||||
console.log(mannquinList)
|
||||
}
|
||||
const handleImageSelect = (value:any)=>{
|
||||
dataDom.editCanvas.addImageToLayer(value.url)
|
||||
}
|
||||
const saveCanvas = ()=>{
|
||||
let canvasJSON = dataDom.editCanvas.getJSON()
|
||||
console.log(JSON.parse(canvasJSON))
|
||||
if(!canvasJSON)return
|
||||
let blob = new Blob([canvasJSON], { type: "application/json" });
|
||||
let formData = new FormData();
|
||||
formData.append("file", blob, "data.json");
|
||||
formData.append("module", "canvas");
|
||||
formData.append("projectId", store.state.Workspace.probjects.id)
|
||||
let config = {
|
||||
headers: { "Content-Type": "multipart/form-data", Accept: "*/*" },
|
||||
};
|
||||
Https.axiosPost(Https.httpUrls.exportSave, formData, config).then(
|
||||
(rv) => {
|
||||
console.log(rv)
|
||||
}
|
||||
);
|
||||
}
|
||||
const exportElement = async ()=>{
|
||||
//设置导出
|
||||
console.log(data.canvasDetailData)
|
||||
let img = [] as any;
|
||||
if(data.canvasDetailData.commandManager.undoStack.length > 0){
|
||||
await dataDom.editCanvas.exportImage({isContainBg:false,isContainFixed:false}).then((rv:any)=>{
|
||||
var imageDataURL = rv
|
||||
img.push({
|
||||
imgUrl: imageDataURL,
|
||||
name: "collection.png",
|
||||
});
|
||||
})
|
||||
}
|
||||
for(let i = 0; i < data.canvasSelectList.length;i++){
|
||||
let item = data.canvasSelectList[i]
|
||||
console.log(item)
|
||||
item.imgList.forEach((imgItem:any,index:any)=>{
|
||||
let nameTail = imgItem.url?.split(".").pop().split("?").shift();
|
||||
img.push({
|
||||
imgUrl:imgItem.url,
|
||||
name:`${item.type}${index}.${nameTail}`
|
||||
})
|
||||
})
|
||||
}
|
||||
console.log(img)
|
||||
if(img.length>0)downImg(img);
|
||||
}
|
||||
let getImgArrayBuffer = (url) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
//通过请求获取文件blob格式
|
||||
let xmlhttp = new XMLHttpRequest();
|
||||
xmlhttp.open("GET", url, true);
|
||||
xmlhttp.responseType = "blob";
|
||||
xmlhttp.withCredentials = false;
|
||||
xmlhttp.onload = function () {
|
||||
if (this.status == 200) {
|
||||
resolve(this.response);
|
||||
} else {
|
||||
reject(this.status);
|
||||
}
|
||||
};
|
||||
xmlhttp.send();
|
||||
});
|
||||
};
|
||||
let downImg = (imagesParams:any) => {
|
||||
let zip = new JSZip();
|
||||
let cache = {};
|
||||
let promises = [];
|
||||
for (let item of imagesParams) {
|
||||
const promise = getImgArrayBuffer(item.imgUrl).then((value) => {
|
||||
// 下载文件, 并存成ArrayBuffer对象(blob)
|
||||
zip.file(item.name, value, { binary: true }); // 逐个添加文件
|
||||
cache[item.title] = value;
|
||||
})
|
||||
promises.push(promise);
|
||||
}
|
||||
Promise.all(promises)
|
||||
.then(() => {
|
||||
function downloadBlob(blob, filename) {
|
||||
const link = document.createElement('a');
|
||||
const url = URL.createObjectURL(blob);
|
||||
link.href = url;
|
||||
link.download = filename;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
URL.revokeObjectURL(url);
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
zip.generateAsync({ type: "blob" }).then((content) => {
|
||||
// 生成二进制流
|
||||
downloadBlob(content,'DesignFiles')
|
||||
// FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件 自定义文件名
|
||||
data.isShowMark = false;
|
||||
|
||||
});
|
||||
|
||||
})
|
||||
.catch((res) => {
|
||||
// message.warning(t('HomeView.jsContent3'));
|
||||
data.isShowMark = false;
|
||||
});
|
||||
};
|
||||
const changeCanvas = (value:any)=>{
|
||||
data.canvasDetailData = value
|
||||
}
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
@@ -132,6 +315,10 @@ export default defineComponent({
|
||||
cleardata,
|
||||
init,
|
||||
designLike,
|
||||
handleImageSelect,
|
||||
saveCanvas,
|
||||
exportElement,
|
||||
changeCanvas,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
@@ -176,15 +363,27 @@ export default defineComponent({
|
||||
height: 100%;
|
||||
> .collectionBox{
|
||||
height: 100%;
|
||||
&.editCanvas{
|
||||
padding-top: 5rem;
|
||||
padding-right: 5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
> .canvasBox{
|
||||
height: 100%;
|
||||
flex:1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
&.editCanvas{
|
||||
padding-top: 5rem;
|
||||
display: flex;
|
||||
}
|
||||
> .canvas{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
> .btn{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
> div{
|
||||
margin: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user