937 lines
34 KiB
Vue
937 lines
34 KiB
Vue
<template>
|
||
<div ref="designDetailModal" class="designDetailModal" v-if="designDetailShow">
|
||
<!-- designDetailShow -->
|
||
<!-- :class="[driver__.driver?'hideEvents':'']" -->
|
||
<a-modal class="Guide_1_18 generalModel fullScreen"
|
||
v-model:visible="designDetailShow"
|
||
:footer="null"
|
||
:get-container="() => $refs.designDetailModal"
|
||
width="100%"
|
||
height="100%"
|
||
:maskClosable="false"
|
||
:mask="false"
|
||
:centered="true"
|
||
:keyboard="false"
|
||
:destroyOnClose="true"
|
||
:closable="false"
|
||
>
|
||
<div class="content">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
<div class="nav_list">
|
||
<div class="nav_item" :class="{active:currentDetailType == 'sketch'}" @click="setCurrentDetail('sketch')">
|
||
<img src="@/assets/images/icon/details_sketch.png" alt="">
|
||
<div class="detailText">{{$t('DesignPrintOperation.Apparel')}}</div>
|
||
</div>
|
||
<div class="nav_item" :class="{active:currentDetailType == 'print'}" @click="setCurrentDetail('print')">
|
||
<img src="@/assets/images/icon/details_print.png" alt="">
|
||
<div class="detailText">{{$t('DesignPrintOperation.Print')}}</div>
|
||
</div>
|
||
<div class="nav_item" :class="{active:currentDetailType == 'color'}" @click="setCurrentDetail('color')">
|
||
<img src="@/assets/images/icon/details_color.png" alt="">
|
||
<div class="detailText">{{$t('DesignPrintOperation.Color')}}</div>
|
||
</div>
|
||
<div class="nav_item" :class="{active:currentDetailType == 'element'}" @click="setCurrentDetail('element')">
|
||
<img src="@/assets/images/icon/details_elements.png" alt="">
|
||
<div class="detailText">{{$t('DesignPrintOperation.Elements')}}</div>
|
||
</div>
|
||
<!-- <div class="nav_item" :class="{active:currentDetailType == 'accessory'}" @click="setCurrentDetail('accessory')">
|
||
<img src="@/assets/images/icon/details_elements.png" alt="">
|
||
<div class="detailText">{{$t('DesignPrintOperation.Accessory')}}</div>
|
||
</div> -->
|
||
<div class="nav_item" v-if="selectObject.type == 'seriesDesign'" :class="{active:currentDetailType == 'models'}" @click="setCurrentDetail('models')">
|
||
<img src="@/assets/images/icon/details_model.svg" alt="">
|
||
<div class="detailText">{{$t('DesignPrintOperation.Model')}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item detailLeft" :class="{isEditPattern:isEditPattern.value}">
|
||
<detailLeft v-if="currentDetailType" ref="detailLeft" :detailLeftColorKey="detailLeftColorKey"></detailLeft>
|
||
<!-- <detailLeft v-if="selectDetail && selectDetail.id && currentDetailType"></detailLeft> -->
|
||
<div class="btn" style="margin: 0;" v-show="currentDetailType == 'color'">
|
||
<div class="gallery_btn" @click="previwe">{{$t('DesignPrintOperation.Preview')}}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="item model" >
|
||
<model
|
||
ref="model"
|
||
:key="positionKey"
|
||
@detailEdit="detailEdit"
|
||
@addSketch="()=>isEditPattern.value = ''"
|
||
@revocation="revocation"
|
||
@oppositeRevocation="oppositeRevocation"
|
||
@sketchSysToLibrary="sketchSysToLibrary"
|
||
></model>
|
||
<div class="btn">
|
||
<div class="gallery_btn" style="margin-right: 0;" @click="submit">{{$t('DesignPrintOperation.Submit')}}</div>
|
||
<div v-show="isEditPattern.value" style="margin-left: 2rem;" class="gallery_btn" @click="previwe">{{$t('DesignPrintOperation.Preview')}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="item detailRight" :class="{canvas:isEditPattern.value}">
|
||
<div class="submit">
|
||
</div>
|
||
<div class="contentRight" v-if="currentDetailType === 'sketch' && !selectDetail?.newDetail?.[currentDetailType] && !selectDetail.sketchString && !isEditPattern.value">
|
||
<img
|
||
style="width: 100%; height: 100%;object-fit: contain;"
|
||
:src="
|
||
'/image/toolsGuide/' +
|
||
(locale == 'ENGLISH' ? 'detailEN' : 'detailCN') +
|
||
'.png'
|
||
" alt="">
|
||
</div>
|
||
<div class="contentRight" v-else-if="currentDetailType && !isEditPattern.value">
|
||
<detailRight ref="detailRight"></detailRight>
|
||
<div class="btn"
|
||
v-show="
|
||
currentDetailType !== 'color' &&
|
||
(currentDetailType === 'element' ||
|
||
currentDetailType === 'accessory' ||
|
||
currentDetailType === 'print' ||
|
||
(currentDetailType === 'sketch' && selectDetail?.newDetail?.[currentDetailType])||
|
||
(currentDetailType === 'sketch' && selectDetail?.sketchString)||
|
||
(currentDetailType === 'models' && designDetail?.newModel))
|
||
"
|
||
>
|
||
<div class="gallery_btn" @click="previwe">{{$t('DesignPrintOperation.Preview')}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="contentRight canvas" v-if="selectDetail && selectDetail.id && currentDetailType" :class="{'active': isEditPattern.value}">
|
||
<canvasBox ref="canvasBox" :key="canvasKey" @setSloganData="setSloganData" :isEditPattern="isEditPattern.value" :updateOtherLayers="updateOtherLayers"></canvasBox>
|
||
</div>
|
||
<!-- 画布 -->
|
||
<!-- <div class="content" v-else-if="selectDetail && selectDetail.id">
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
<div class="mark_loading" v-show="loadingShow">
|
||
<a-spin size="large" />
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|
||
<script lang="ts">
|
||
import { defineComponent,computed,onBeforeUnmount,provide,nextTick,createVNode,toRefs, reactive, onMounted, watch} from 'vue'
|
||
import detailLeft from './detailLeft/index.vue'
|
||
import model from './model/index.vue'
|
||
import detailRight from './detailRight/index.vue'
|
||
import canvasBox from './canvas/index.vue'
|
||
|
||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||
import { Https } from "@/tool/https";
|
||
import { Modal,message } from 'ant-design-vue';
|
||
import {getUploadUrl,segmentImage,setGradual,rgbToHsv,rgbaToHex} from '@/tool/util'
|
||
import { useStore } from "vuex";
|
||
import { openGuide,driverObj__ } from "@/tool/guide";
|
||
import { useI18n } from 'vue-i18n'
|
||
export default defineComponent({
|
||
components:{
|
||
detailLeft,model,detailRight,canvasBox
|
||
},
|
||
emits:['destroy'],
|
||
setup(props,{emit}) {
|
||
const store = useStore();
|
||
const {locale} = useI18n()
|
||
const detailDom = reactive({
|
||
model:null,
|
||
canvasBox,
|
||
detailRight,
|
||
detailLeft:null as any,
|
||
})
|
||
const userDetail = computed(()=>{
|
||
return store.state.UserHabit.userDetail
|
||
})
|
||
const detailData = reactive({
|
||
selectObject:computed(()=>store.state.Workspace.probjects) as any,//选择的项目
|
||
designDetail:computed(()=>store.state.DesignDetail.designDetail),
|
||
currentDetailType:computed(()=>store.state.DesignDetail.currentDetailType),
|
||
frontBack:computed(()=>store.state.DesignDetail.frontBack),
|
||
selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
|
||
designDetailShow:false,
|
||
loadingShow:false,
|
||
oppositeRevocationShow:-1,
|
||
imgDomIndex:-1,
|
||
revocationShow:-1,
|
||
isEditPattern:{
|
||
value:'' as any,
|
||
},// 是否编辑图案
|
||
canvasKey:0,
|
||
singleOveral:{
|
||
value:'overall'
|
||
},
|
||
getCanvasIfEdit:{
|
||
fun:null,
|
||
},
|
||
positionKey:0,
|
||
detailLeftColorKey:0,
|
||
})
|
||
watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
|
||
detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
|
||
detailData.canvasKey += 1
|
||
// privewDetail(oldValue)
|
||
},{immediate: true})
|
||
|
||
provide('getCanvasIfEdit',detailData.getCanvasIfEdit)
|
||
provide('singleOveral',detailData.singleOveral)
|
||
provide('isEditPattern',detailData.isEditPattern)
|
||
const closeModal = ()=>{
|
||
sessionStorage.removeItem('oppositeRevocation')
|
||
sessionStorage.removeItem('revocation')
|
||
detailData.designDetailShow = false
|
||
emit('destroy')
|
||
}
|
||
|
||
const showDesignDetailModal = (data:any,str:any)=>{
|
||
return new Promise<void>((resolve, reject) => {
|
||
store.commit('DesignDetail/clearDetailData')
|
||
// 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(
|
||
async (rv: any) => {
|
||
//清除画布JSON数据
|
||
sessionStorage.removeItem('canvasList');
|
||
sessionStorage.removeItem('revocation');
|
||
sessionStorage.removeItem('oppositeRevocation');
|
||
sessionStorage.setItem('key', 'value');
|
||
store.commit('DesignDetail/setDesignDetail',rv)
|
||
rv.clothes.forEach((item:any)=>{
|
||
let a
|
||
item.designType='Library'
|
||
if(item.layersObject[0].imageCategory.indexOf("back") == -1){
|
||
a = item.layersObject[0]
|
||
item.layersObject[0] = item.layersObject[1]
|
||
item.layersObject[1] = a
|
||
}
|
||
if(item.color){
|
||
item.color.rgba = {
|
||
r:item.color.r,
|
||
g:item.color.g,
|
||
b:item.color.b,
|
||
}
|
||
}else{
|
||
item.color = {
|
||
// rgba:{
|
||
// r:undefined,
|
||
// g:undefined,
|
||
// b:undefined,
|
||
// }
|
||
}
|
||
}
|
||
if(item.gradient){
|
||
item.color.gradient = item.gradient
|
||
}
|
||
if(item.printObject.prints == null)item.printObject.prints = []
|
||
item.printObject.prints.forEach((element:any) => {
|
||
if(!element.designType){
|
||
element.designType = 'Library'
|
||
}
|
||
});
|
||
})
|
||
detailData.singleOveral.value = rv.singleOverall
|
||
detailData.designDetailShow = true
|
||
// this.deleteShow = false
|
||
setRevocation()
|
||
if(rv.singleOverall == "single"){
|
||
store.commit('DesignDetail/setDesignColthes',rv.clothes[0].id)
|
||
}
|
||
|
||
|
||
detailData.loadingShow = false
|
||
resolve(rv)
|
||
}
|
||
).catch(rv=>{
|
||
detailData.loadingShow = false
|
||
resolve(rv)
|
||
})
|
||
})
|
||
|
||
}
|
||
//撤回
|
||
const setRevocation = ()=>{//设置撤销
|
||
let itemDetail = JSON.parse(JSON.stringify(detailData.designDetail))
|
||
let revocation:any = JSON.parse((sessionStorage.getItem("revocation") as any))
|
||
if(!revocation)revocation = []
|
||
// let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
|
||
// if(revocation?.[0]?.designItemId != itemDetail.designItemId || revocation?.[0]?.designItemId == undefined){
|
||
// revocation = []
|
||
// }
|
||
revocation.push({designData:itemDetail,position:null})
|
||
detailData.revocationShow = revocation?.length
|
||
sessionStorage.setItem('revocation', JSON.stringify(revocation));
|
||
sessionStorage.setItem('oppositeRevocation',JSON.stringify([]));
|
||
}
|
||
provide('setRevocation',setRevocation)
|
||
|
||
const revocation = ()=>{//撤回
|
||
let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
|
||
let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
|
||
if(revocation.length <= 1)return
|
||
oppositeRevocation.push(revocation[revocation.length-1])
|
||
revocation.splice(revocation.length-1,1)
|
||
detailData.revocationShow = revocation.length
|
||
// store.commit("DesignDetail/setDesignDetail", revocation[revocation.length-1]);
|
||
if(revocation[revocation.length-1].designData){
|
||
store.commit('DesignDetail/setDesignDetail',revocation[revocation.length-1].designData)
|
||
}else{
|
||
store.commit('DesignDetail/setFrontBack',revocation[revocation.length-1].position)
|
||
}
|
||
store.commit('DesignDetail/setDesignColthes',detailData.selectDetail.id)
|
||
sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation));
|
||
sessionStorage.setItem('revocation', JSON.stringify(revocation));
|
||
// clearSelect()
|
||
detailData.positionKey++
|
||
}
|
||
const oppositeRevocation = ()=>{//反撤回
|
||
let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
|
||
let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
|
||
// if(!oppositeRevocation[oppositeRevocation.length-1].designData)return
|
||
if(oppositeRevocation.length < 1)return
|
||
if(oppositeRevocation[oppositeRevocation.length-1]?.designData){
|
||
store.commit('DesignDetail/setDesignDetail',oppositeRevocation[oppositeRevocation.length-1].designData)
|
||
}else if(oppositeRevocation[oppositeRevocation.length-1]?.position){
|
||
store.commit('DesignDetail/setFrontBack',oppositeRevocation[oppositeRevocation.length-1].position)
|
||
}
|
||
store.commit('DesignDetail/setDesignColthes',detailData.selectDetail.id)
|
||
revocation.push(oppositeRevocation[oppositeRevocation.length-1])
|
||
detailData.revocationShow = revocation.length
|
||
oppositeRevocation.splice(oppositeRevocation.length-1,1)
|
||
detailData.oppositeRevocationShow = oppositeRevocation.length
|
||
sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation));
|
||
sessionStorage.setItem('revocation', JSON.stringify(revocation));
|
||
// this.clearSelect()
|
||
detailData.positionKey++
|
||
}
|
||
const setCurrentDetail = (str:string)=>{
|
||
store.commit('DesignDetail/setCurrentDetailType',str)
|
||
}
|
||
const setClothes = async (list:any,str:string)=>{
|
||
let clothesList:any = []
|
||
await nextTick()
|
||
if(detailData.isEditPattern.value == 'editSketch')await detailDom.canvasBox.submitBase64Data().then((rv)=>{
|
||
detailData.selectDetail.sketchString = rv
|
||
})
|
||
for(let i = 0;i<list.length;i++){
|
||
detailData.selectDetail
|
||
let {scale,offset,priority,transpose,rotate,maskUrl,maskMinioUrl} = await (detailDom.model as any).getSubmitData(list[i])
|
||
if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
|
||
let gradient = null
|
||
let newData = list[i]?.newDetail?.[detailData.currentDetailType]
|
||
// newData[0].location=[
|
||
// -233.13985,
|
||
// 406.90964
|
||
// ]
|
||
// newData[0].scale=[
|
||
// 0.5,
|
||
// 0.35822305
|
||
// ]
|
||
let isCurrent = list[i].id == detailData?.selectDetail?.id
|
||
let color = (detailData.currentDetailType == 'color' && isCurrent && !detailData.isEditPattern.value)?
|
||
(newData?.rgba?.r?`${newData.rgba.r} ${newData.rgba.g} ${newData.rgba.b}`:''):
|
||
(list[i].color?.rgba?.r?
|
||
`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`:
|
||
'')
|
||
if(detailData.currentDetailType == 'sketch' && newData){
|
||
color = detailData.designDetail.clothes?.[0]?.color?.rgba?.r?`${detailData.designDetail.clothes?.[0].color.rgba.r} ${detailData.designDetail.clothes[0].color.rgba.g} ${detailData.designDetail.clothes[0].color.rgba.b}`:''
|
||
detailData.selectDetail.maskUrl = ''
|
||
detailData.selectDetail.maskMinioUrl = ''
|
||
}
|
||
function isNetworkPath(str) {
|
||
if (typeof str !== 'string' || str.trim() === '') {
|
||
return false;
|
||
}
|
||
const urlPatterns = [
|
||
/^https?:\/\//i, // http:// 或 https://
|
||
/^ftp:\/\//i, // ftp://
|
||
/^ws:\/\//i, // ws://
|
||
/^wss:\/\//i, // wss://
|
||
/^\/\//, // 协议相对路径 //example.com
|
||
/^data:/i, // data:image/png;base64,...（这是Base64，不是网络路径）
|
||
];
|
||
// 排除data:URL（这实际上是Base64）
|
||
if (str.startsWith('data:')) {
|
||
return false;
|
||
}
|
||
|
||
return urlPatterns.some(pattern => pattern.test(str));
|
||
}
|
||
const printObjectToJSON = (list:any)=>{
|
||
if(list?.length > 0){
|
||
list.forEach((item:any)=>{
|
||
if(item.object)item.object = JSON.stringify(item.object)
|
||
})
|
||
}
|
||
}
|
||
let data:any = {
|
||
changed:false,
|
||
color,
|
||
designType:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.designType:list[i].designType,
|
||
id:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.id:list[i].id,
|
||
maskMinioUrl:((newData && detailData.currentDetailType == 'sketch') || list[i].sketchString)?'':list[i]?.maskMinioUrl,
|
||
// maskUrl:'',
|
||
maskUrl:list[i]?.maskUrl || '',
|
||
// offset:[
|
||
// -233.13985,
|
||
// 406.90964
|
||
// ],
|
||
offset,
|
||
transpose,
|
||
rotate,
|
||
partialDesign:list[i].partialDesign,
|
||
// partialDesign:detailData.isEditPattern.value?list[i].partialDesign:{},
|
||
path:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.minIOPath:list[i].minIOPath,
|
||
printObject:(newData && detailData.currentDetailType == 'print' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].printObject?list[i].printObject:{prints:[]},
|
||
priority,
|
||
// scale:[
|
||
// 0.5,
|
||
// 0.35822305
|
||
// ],
|
||
scale:[scale[0]?scale[0]:1,scale[1]?scale[1]:1],
|
||
type:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.level2Type || newData.categoryValue:list[i].type,
|
||
sketchString:list[i].sketchString?list[i].sketchString:'',
|
||
trims:(newData && detailData.currentDetailType == 'element' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].trims?.prints?list[i].trims:{prints:[]},
|
||
accessory:(newData && detailData.currentDetailType == 'accessory' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].trims?.prints?list[i].trims:{prints:[]},
|
||
}
|
||
data.printObject.prints = printObjectToJSON(data.printObject.prints)
|
||
data.trims.prints = printObjectToJSON(data.trims.prints)
|
||
if((detailData.isEditPattern.value && list[i].color?.gradient) || (!detailData.isEditPattern.value && (list[i].newDetail?.color?.gradient || list[i].color?.gradient))){
|
||
gradient = list[i].newDetail?.color?.gradient || list[i].color.gradient
|
||
gradient.colorImg = await setGradual(gradient,320,700)
|
||
data.gradient = gradient
|
||
}
|
||
clothesList.push(data)
|
||
}
|
||
return clothesList
|
||
}
|
||
const getSubmitData = async (str:string)=>{
|
||
// return
|
||
let workspace = store.state.Workspace.probjects
|
||
if(!detailData?.selectDetail?.path && !detailData?.selectDetail?.newDetail?.sketch?.minIOPath)return
|
||
let clothes:any
|
||
if(detailData.currentDetailType == 'models'){
|
||
clothes = await setClothes(detailData.designDetail.clothes,str)
|
||
}else{
|
||
clothes = await setClothes([detailData.selectDetail],str)
|
||
}
|
||
let data = {
|
||
designItemId:detailData.designDetail.designItemId,
|
||
designSingleItemDTOList:clothes,
|
||
isPreview:str == 'sub'?false:true,
|
||
// ifSubmit:designItemDetail.isPreview,
|
||
gender:workspace?.sex,
|
||
sketchString:'',
|
||
modelId:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.id:detailData.designDetail.oldModel?detailData.designDetail.oldModel.id:'',
|
||
modelType:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.type:detailData.designDetail.oldModel?detailData.designDetail.oldModel.type:'',
|
||
designType:detailData.selectDetail.id?'merage':'default',
|
||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||
processId:userDetail.value.userId,
|
||
probjectId:store.state.Workspace.probjects.id,
|
||
}
|
||
detailData.loadingShow = true
|
||
Https.axiosPost(Https.httpUrls.designSingle, data).then((rv)=>{
|
||
let value = {
|
||
currentType : JSON.parse(JSON.stringify(detailData.currentDetailType)),
|
||
rv:rv,
|
||
fun:setRevocation
|
||
}
|
||
if(detailData?.designDetail?.newModel)detailData.designDetail.oldModel = JSON.parse(JSON.stringify(detailData.designDetail.newModel))
|
||
// delete detailData.designDetail.newModel
|
||
detailData.selectDetail.sketchString = null
|
||
store.commit('DesignDetail/setPraeview',value)
|
||
detailData.loadingShow = false
|
||
canvasReload()
|
||
// setRevocation()
|
||
}).catch(res=>{
|
||
detailData.loadingShow = false
|
||
});
|
||
}
|
||
const submit = async ()=>{
|
||
let workspace = store.state.Workspace.probjects
|
||
let clothes:any = await setClothes(detailData.designDetail.clothes,'sub')
|
||
let data = {
|
||
designItemId:detailData.designDetail.designItemId,
|
||
designSingleItemDTOList:clothes,
|
||
isPreview:false,
|
||
// ifSubmit:designItemDetail.isPreview,
|
||
gender:workspace?.sex,
|
||
sketchString:'',
|
||
modelId:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.id:detailData.designDetail.oldModel?detailData.designDetail.oldModel.id:'',
|
||
modelType:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.type:detailData.designDetail.oldModel?detailData.designDetail.oldModel.type:'',
|
||
designType:detailData.selectDetail.id?'merage':'default',
|
||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||
processId:userDetail.value.userId,
|
||
probjectId:store.state.Workspace.probjects.id,
|
||
}
|
||
detailData.loadingShow = true
|
||
Https.axiosPost(Https.httpUrls.designSingle, data).then(async (rv)=>{
|
||
saveCanvasJSONToSession()
|
||
// store.commit('DesignDetail/setPraeview',rv)
|
||
const sessionCanvasList = sessionStorage.getItem('canvasList');
|
||
const canvasList = sessionCanvasList ? JSON.parse(sessionCanvasList) : []
|
||
for (let i = 0; i < canvasList.length; i++) {
|
||
const index = detailData.designDetail.clothes.findIndex(item => item.id === canvasList[i].id);
|
||
if(index>-1)await detailDom.canvasBox.saveCanvas(canvasList[i])
|
||
}
|
||
let designCollectionList = store.state.HomeStoreModule.designCollectionList
|
||
let likeDesignCollectionList = store.state.HomeStoreModule.likeDesignCollectionList
|
||
designCollectionList.forEach((item:any) => {
|
||
if(item.designItemId == rv.designItemId){
|
||
item.designOutfitUrl = rv.designItemUrl
|
||
}
|
||
});
|
||
likeDesignCollectionList.forEach((item:any) => {
|
||
if(item.designItemId == rv.designItemId){
|
||
item.designOutfitUrl = rv.designItemUrl
|
||
}
|
||
});
|
||
store.commit('setDesignCollectionList',designCollectionList)
|
||
store.commit('setLikeDesignCollectionList',likeDesignCollectionList)
|
||
closeModal()
|
||
detailData.loadingShow = false
|
||
}).catch(res=>{
|
||
detailData.loadingShow = false
|
||
});
|
||
}
|
||
const previwe = async ()=>{
|
||
if((detailData.currentDetailType == 'sketch' && !detailData.isEditPattern.value) || detailData.isEditPattern.value == 'editSketch'){
|
||
let data = getSubmitData('preview')
|
||
store.dispatch('DesignDetail/setSubmit',data)
|
||
}else{
|
||
//走画布合成图片并且直接分割
|
||
if(detailData.isEditPattern.value !== 'canvasEditor'){
|
||
if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
|
||
let otherData = await updateOtherLayers('single')
|
||
await detailDom.canvasBox.updateOtherLayers(otherData)
|
||
}
|
||
await detailDom.canvasBox.privewDetail()
|
||
let img = new Image()
|
||
img.onload = ()=>{
|
||
let partialDesign = detailData.selectDetail.partialDesign.partialDesignBase64 || detailData.selectDetail.partialDesign.partialDesignPath
|
||
let size = {
|
||
width:img.width,
|
||
height:img.height,
|
||
}
|
||
segmentImage(detailData.selectDetail.maskUrl,partialDesign,size).then(async (rv)=>{
|
||
let front = detailData.frontBack.front[detailData.imgDomIndex]
|
||
let back = detailData.frontBack.back[detailData.imgDomIndex]
|
||
if(!front?.oldImageUrl)front.oldImageUrl = front.imageUrl
|
||
if(!front?.oldMaskUrl)front.oldMaskUrl = front.maskUrl
|
||
if(!back?.oldImageUrl)back.oldImageUrl = back.imageUrl
|
||
if(!front?.oldMaskUrl)store.commit('DesignDetail/updataDetailItem',{maskUrl:front.oldMaskUrl})
|
||
|
||
front.imageUrl = rv.targetFrontUrl
|
||
back.imageUrl = rv.targetBackUrl
|
||
store.commit('DesignDetail/canvasPreviewUpdata',{type:detailData.isEditPattern.value?'all':detailData.currentDetailType,callBack:setRevocation})
|
||
})
|
||
}
|
||
img.src = detailData.selectDetail.path
|
||
saveCanvasJSONToSession()
|
||
}
|
||
}
|
||
const saveCanvasJSONToSession = ()=>{
|
||
let canvasJSON = detailDom.canvasBox.getCanvasJSON()
|
||
const sessionCanvasList = sessionStorage.getItem('canvasList');
|
||
const list = sessionCanvasList ? JSON.parse(sessionCanvasList) : []
|
||
let index = -1
|
||
list.forEach((item:any,i:number)=>{
|
||
if(item.id == detailData.selectDetail.id){
|
||
index = i
|
||
}
|
||
})
|
||
if(index < 0){
|
||
list.push({id:detailData.selectDetail.id,canvasJSON:canvasJSON})
|
||
}else{
|
||
list[index].canvasJSON = canvasJSON
|
||
}
|
||
sessionStorage.setItem('canvasList', JSON.stringify(list));
|
||
}
|
||
const detailEdit = async (str:any)=>{
|
||
if(str){
|
||
if(detailData.isEditPattern.value && detailData.isEditPattern.value == str){
|
||
// await detailDom.canvasBox.saveCanvas()
|
||
await (detailDom.canvasBox as any).privewDetail()
|
||
if(detailData.isEditPattern.value == 'canvasEditor')await uploadElement()
|
||
detailData.isEditPattern.value = ''
|
||
}else{
|
||
// if(detailData.isEditPattern.value && (str == 'canvasEditor' || str == 'redGreenExample')){
|
||
// detailDom.canvasBox.editFront(str)
|
||
// }
|
||
detailDom.canvasBox.editFront(str)
|
||
let otherData = await updateOtherLayers('single')
|
||
await detailDom.canvasBox.updateOtherLayers(otherData)
|
||
detailData.isEditPattern.value = str
|
||
}
|
||
}else{
|
||
detailData.isEditPattern.value = ''
|
||
}
|
||
}
|
||
const getColorName = (color:any)=>{
|
||
let rgb:any = [color.r, color.g, color.b];
|
||
let hsv = rgbToHsv(rgb);
|
||
let data = [{
|
||
h: hsv[0],
|
||
s: hsv[1],
|
||
v: hsv[2],
|
||
}]
|
||
return new Promise((resolve, reject) => {
|
||
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
|
||
.then((rv) => {
|
||
if (rv) {
|
||
resolve(rv[0])
|
||
}
|
||
})
|
||
.catch((res) => {
|
||
resolve({name:'--',tcx:'--'})
|
||
});
|
||
})
|
||
}
|
||
const updateOtherLayers = async (str:any='all')=>{//更新到画布图层
|
||
let otherData:any = {}
|
||
if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
|
||
if(str == 'all'){
|
||
otherData = {
|
||
color: detailData.selectDetail.newDetail?.color.r?detailData.selectDetail.newDetail?.color:detailData.selectDetail.color,
|
||
printObject: detailData.selectDetail.newDetail?.print?.length>0?{prints:detailData.selectDetail.newDetail?.print}:detailData.selectDetail.printObject || null,
|
||
trims: detailData.selectDetail.newDetail?.element?.length>0?detailData.selectDetail.newDetail?.element:detailData.selectDetail.trims || null,
|
||
}
|
||
}else if(str == 'single'){
|
||
otherData = {
|
||
color: detailData.selectDetail.color,
|
||
printObject: detailData.selectDetail.printObject || null,
|
||
trims: detailData.selectDetail.trims || null,
|
||
}
|
||
if(detailData.currentDetailType == 'color'){
|
||
let color = detailData.selectDetail.newDetail?.color
|
||
// let colorData:any = await getColorName(color?.rgba)
|
||
if(detailData.selectDetail.newDetail?.color){
|
||
if(color.r){
|
||
color.rgba = {r:color.r,g:color.g,b:color.b,a:color.a}
|
||
}else{
|
||
color.rbga = {}
|
||
}
|
||
otherData.color = color
|
||
}
|
||
}
|
||
if(detailData.currentDetailType == 'print'){
|
||
otherData.printObject = detailData.selectDetail.newDetail?.print?.length>0?{prints:detailData.selectDetail.newDetail?.print}:detailData.selectDetail.printObject || null
|
||
}
|
||
if(detailData.currentDetailType == 'element'){
|
||
otherData.trims = detailData.selectDetail.newDetail?.element?.length>0?detailData.selectDetail.newDetail?.element:detailData.selectDetail.trims || null
|
||
}
|
||
}
|
||
console.log(otherData,'=======',detailData.selectDetail)
|
||
return otherData
|
||
}
|
||
const uploadElement = async ()=>{//取出画布数据更新到detail
|
||
if(detailData.isEditPattern.value == 'canvasEditor'){
|
||
// await detailDom.canvasBox.saveCanvas()
|
||
const allInfo = await (detailDom.canvasBox as any).getCanvasElement()
|
||
console.log(allInfo,'allInfo')
|
||
if(allInfo.trims?.length > 0){
|
||
// detailData.selectDetail.trims.prints = allInfo.trims
|
||
let value = {
|
||
data:allInfo.trims,
|
||
str:'element'
|
||
}
|
||
store.commit('DesignDetail/setNewDetail',value)
|
||
}
|
||
if(allInfo.prints?.length > 0){
|
||
// detailData.selectDetail.printObject.prints = allInfo.prints
|
||
let value = {
|
||
data:allInfo.prints,
|
||
str:'print'
|
||
}
|
||
store.commit('DesignDetail/setNewDetail',value)
|
||
}
|
||
if(allInfo.color?.color?.rgba){
|
||
let canvasColor = allInfo.color.color
|
||
let colorData:any = await getColorName(allInfo.color.color?.rgba)
|
||
let value:any = {
|
||
data:{
|
||
hsv:{
|
||
h:colorData.h,
|
||
s:colorData.s,
|
||
v:colorData.v,
|
||
},
|
||
name:colorData.name,
|
||
tcx:colorData.tcx,
|
||
rgba:canvasColor.rgba,
|
||
hex:rgbaToHex([canvasColor.rgba.r,canvasColor.rgba.g,canvasColor.rgba.b]),
|
||
},
|
||
str:'color'
|
||
}
|
||
if(canvasColor.gradient){
|
||
value.data.gradient = canvasColor.gradient
|
||
}
|
||
store.commit('DesignDetail/setNewDetail',value)
|
||
if(allInfo.color.color.gradient)detailData.selectDetail.color.gradient = allInfo.color.color.gradient
|
||
if(detailData.currentDetailType == 'color'){
|
||
detailData.detailLeftColorKey++
|
||
}
|
||
}
|
||
}
|
||
}
|
||
const canvasReload = async ()=>{
|
||
if(detailData.isEditPattern.value){
|
||
await detailDom.canvasBox.saveCanvas()
|
||
}
|
||
detailData.canvasKey += 1
|
||
}
|
||
const sketchSysToLibrary = ()=>{//系统sketch添加到library更新library
|
||
coverRevocation()
|
||
detailDom.detailLeft.sketchSysToLibrary()
|
||
}
|
||
const coverRevocation = ()=>{
|
||
let itemDetail = JSON.parse(JSON.stringify(detailData.designDetail))
|
||
let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
|
||
revocation.splice(revocation.length-1,1,{designData:itemDetail,position:null})
|
||
sessionStorage.setItem('revocation', JSON.stringify(revocation));
|
||
sessionStorage.setItem('oppositeRevocation',JSON.stringify([]));
|
||
}
|
||
const setSloganData = (data:any)=>{
|
||
detailData.selectDetail.sketchString = data
|
||
if(detailData.currentDetailType == 'sketch' && detailData.selectDetail?.newDetail?.sketch){
|
||
detailData.selectDetail.newDetail.sketch = null
|
||
}
|
||
}
|
||
onMounted(()=>{
|
||
})
|
||
onBeforeUnmount(()=>{
|
||
sessionStorage.removeItem('oppositeRevocation')
|
||
sessionStorage.removeItem('revocation')
|
||
store.commit('DesignDetail/clearDesignDetail')
|
||
|
||
})
|
||
|
||
return{
|
||
locale,
|
||
...toRefs(detailDom),
|
||
...toRefs(detailData),
|
||
closeModal,
|
||
showDesignDetailModal,
|
||
setCurrentDetail,
|
||
previwe,
|
||
submit,
|
||
revocation,
|
||
oppositeRevocation,
|
||
detailEdit,
|
||
canvasReload,
|
||
sketchSysToLibrary,
|
||
setSloganData,
|
||
updateOtherLayers,//更新到画布图层 再canvasInit中执行
|
||
}
|
||
},
|
||
|
||
provide() {
|
||
return {
|
||
}
|
||
},
|
||
mounted(){
|
||
let beforeunload = () => {
|
||
window.removeEventListener('beforeunload',beforeunload)
|
||
}
|
||
window.addEventListener('beforeunload',beforeunload)
|
||
// let url = Https.httpUrls.getDesignDetail + `?designItemId=34242&designPythonOutfitId=34004`
|
||
// this.loadingShow = true
|
||
// Https.axiosGet(url).then(
|
||
// async (rv: any) => {
|
||
// rv.clothes.forEach((item:any)=>{
|
||
// let a
|
||
// if(item.layersObject[0].imageCategory.indexOf("back") == -1){
|
||
// a = item.layersObject[0]
|
||
// item.layersObject[0] = item.layersObject[1]
|
||
// item.layersObject[1] = a
|
||
// }
|
||
// if(item.printObject.prints == null){
|
||
// item.printObject.prints = [{}]
|
||
// }
|
||
// })
|
||
// this.store.commit('setDesignItemDetail',rv)
|
||
// if(rv.others[0].printObject.path == null){
|
||
// this.body = false
|
||
// }else{
|
||
// this.body = true
|
||
// }
|
||
// this.setImgSize()
|
||
// this.generateHighDesignImg = rv.highDesignUrl
|
||
// this.designShowPrview = 1
|
||
// this.designDetailShow = true
|
||
// this.loadingShow = false
|
||
// }
|
||
// ).catch(rv=>{
|
||
// this.loadingShow = false
|
||
// })
|
||
},
|
||
|
||
})
|
||
</script>
|
||
<style lang="less" scoped>
|
||
:deep(.detailText){
|
||
font-size: 1.6rem;
|
||
font-weight: 600;
|
||
|
||
}
|
||
.designDetailModal{
|
||
position: absolute;
|
||
// top: -100%;
|
||
width: 100.5%;
|
||
height: 100.5%;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%,-50%);
|
||
z-index: 2;
|
||
:deep(>div){
|
||
> .ant-modal-root{
|
||
> .ant-modal-centered{
|
||
overflow: hidden;
|
||
> .fullScreen{
|
||
> .ant-modal-content{
|
||
box-shadow: none;
|
||
> .ant-modal-body{
|
||
padding: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
:deep(.ant-modal-wrap){
|
||
.ant-modal-body{
|
||
// padding: 0;
|
||
}
|
||
// position: absolute;
|
||
// top: 0;
|
||
// left: 0;
|
||
}
|
||
}
|
||
.content{
|
||
display: flex;
|
||
align-items: flex-start;
|
||
height: 100%;
|
||
width: 100%;
|
||
> .item{
|
||
height: 100%;
|
||
overflow: hidden;
|
||
&.detailLeft{
|
||
width: 30rem;
|
||
// width: 34rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
overflow: hidden;
|
||
}
|
||
&.isEditPattern{width: 0px;}
|
||
&.model{
|
||
flex: 1;
|
||
// width: 45rem;
|
||
// width: 50rem;
|
||
margin: 0 8rem;
|
||
// margin: 0 10rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
&.detailRight{
|
||
width: 30%;
|
||
&.canvas{
|
||
width: 60%;
|
||
}
|
||
display: flex;
|
||
flex-direction: column;
|
||
// padding-bottom: calc(6rem + 1rem);
|
||
overflow: hidden;
|
||
> .contentRight{
|
||
text-align: center;
|
||
display: flex;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
&.canvas{
|
||
opacity: 0;
|
||
position: absolute;
|
||
flex: auto;
|
||
width: 35vw;
|
||
height: 80vh;
|
||
pointer-events: none;
|
||
transform: translate(100vw,100vh);
|
||
}
|
||
&.active{
|
||
position: relative;
|
||
opacity: 1;
|
||
flex: 1;
|
||
width: auto;
|
||
height: auto;
|
||
pointer-events: auto;
|
||
transform: translate(0,0);
|
||
}
|
||
}
|
||
}
|
||
.btn{
|
||
margin-top: auto;
|
||
}
|
||
> .submit{
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-bottom: 1rem;
|
||
&.bottom{
|
||
margin-top: 1rem;
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
> .btn{
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-left: 12rem;
|
||
}
|
||
}
|
||
> .nav{
|
||
margin-right: 5rem;
|
||
overflow: hidden;
|
||
// transition: all .3s;
|
||
&.isEditPattern{width: 0px;margin: 0;}
|
||
> .back_home{
|
||
width: 9rem;
|
||
text-align: center;
|
||
> .gallery_btn{
|
||
width: 6rem;
|
||
height: 6rem;
|
||
margin-top: 2rem;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
> .nav_list{
|
||
margin-top: 2.7rem;
|
||
// height: 38rem;
|
||
width: 9rem;
|
||
background: #f4f4f4;
|
||
border-radius: 1.4rem;
|
||
padding: 1.4rem 0;
|
||
> .nav_item{
|
||
text-align: center;
|
||
width: 100%;
|
||
height: calc((38rem - 1.4rem * 2) / 4);
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
> img{
|
||
width: 4rem;
|
||
height: 3.6rem;
|
||
object-fit: contain;
|
||
}
|
||
&.active{
|
||
background: #bdbdbd;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
</style> |