574 lines
18 KiB
Vue
574 lines
18 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">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">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">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">Elements</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item detailLeft" :class="{isEditPattern:isEditPattern.value}">
|
|
<detailLeft v-if="currentDetailType"></detailLeft>
|
|
<!-- <detailLeft v-if="selectDetail && selectDetail.id && currentDetailType"></detailLeft> -->
|
|
</div>
|
|
|
|
<div class="item model">
|
|
<model
|
|
ref="model"
|
|
@canvasReload="canvasReload"
|
|
@detailEdit="detailEdit"
|
|
@addSketch="()=>isEditPattern.value=false"
|
|
@revocation="revocation"
|
|
@oppositeRevocation="oppositeRevocation"
|
|
></model>
|
|
<div class="btn">
|
|
<div class="gallery_btn" @click="submit">Submit</div>
|
|
<div class="gallery_btn" @click="previwe">Preview</div>
|
|
</div>
|
|
</div>
|
|
<div class="item detailRight">
|
|
<div class="submit">
|
|
</div>
|
|
<div class="contentRight" v-if="currentDetailType && !isEditPattern.value">
|
|
<detailRight ref="detailRight"></detailRight>
|
|
</div>
|
|
<div class="contentRight" v-if="selectDetail && selectDetail.id && currentDetailType && isEditPattern.value">
|
|
<canvasBox ref="canvasBox" :key="childKey"></canvasBox>
|
|
</div>
|
|
<!-- 画布 -->
|
|
<!-- <div class="content" v-else-if="selectDetail && selectDetail.id">
|
|
</div> -->
|
|
<div class="submit bottom">
|
|
</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} 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,isMoible,setGradual} from '@/tool/util'
|
|
import { useStore } from "vuex";
|
|
import { openGuide,driverObj__ } from "@/tool/guide";
|
|
import { useI18n } from 'vue-i18n'
|
|
import addDetails from '@/component/Detail/addDetails.vue'
|
|
export default defineComponent({
|
|
components:{
|
|
detailLeft,model,detailRight,canvasBox
|
|
},
|
|
emits:['destroy'],
|
|
setup(props,{emit}) {
|
|
const store = useStore();
|
|
|
|
const detailDom = reactive({
|
|
model:null,
|
|
canvasBox,
|
|
detailRight,
|
|
})
|
|
const userDetail = computed(()=>{
|
|
return store.state.UserHabit.userDetail
|
|
})
|
|
const detailData = reactive({
|
|
designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
|
|
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
|
|
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
|
|
designDetailShow:false,
|
|
loadingShow:false,
|
|
oppositeRevocationShow:-1,
|
|
revocationShow:-1,
|
|
isEditPattern:{
|
|
value:false,
|
|
},// 是否编辑图案
|
|
childKey:0,
|
|
singleOveral:{
|
|
value:'overall'
|
|
},
|
|
getCanvasIfEdit:{
|
|
fun:null,
|
|
},
|
|
})
|
|
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)=>{
|
|
// 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) => {
|
|
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:255,
|
|
g:255,
|
|
b:255,
|
|
}
|
|
}
|
|
}
|
|
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
|
|
store.commit('DesignDetailCopy/setDesignDetail',rv)
|
|
// this.deleteShow = false
|
|
|
|
setRevocation()
|
|
detailData.loadingShow = false
|
|
|
|
store.commit('DesignDetailCopy/setDesignColthes',rv.clothes[0].id)
|
|
}
|
|
|
|
).catch(rv=>{
|
|
detailData.loadingShow = false
|
|
})
|
|
}
|
|
const initialize = ()=>{//design后初始化
|
|
|
|
|
|
sessionStorage.removeItem('oppositeRevocation')
|
|
sessionStorage.removeItem('revocation')
|
|
}
|
|
//撤回
|
|
const setRevocation = ()=>{//设置撤销
|
|
let itemDetail = JSON.parse(JSON.stringify(detailData.designDetail))
|
|
let revocation:any = JSON.parse((sessionStorage.getItem("revocation") as any))
|
|
// let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
|
|
if(revocation?.[0]?.designItemId != itemDetail.designItemId || revocation?.[0]?.designItemId == undefined){
|
|
// sessionStorage.setItem('revocation', JSON.stringify([]));
|
|
// sessionStorage.setItem('oppositeRevocation',JSON.stringify([]));
|
|
revocation = []
|
|
}
|
|
revocation.push(itemDetail)
|
|
detailData.revocationShow = revocation?.length
|
|
detailData.oppositeRevocationShow = 0
|
|
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(detailData.revocationShow <= 1)return
|
|
oppositeRevocation.push(revocation[revocation.length-1])
|
|
detailData.oppositeRevocationShow = oppositeRevocation.length
|
|
revocation.splice(revocation.length-1,1)
|
|
detailData.revocationShow = revocation.length
|
|
store.commit("DesignDetailCopy/setDesignDetail", revocation[revocation.length-1]);
|
|
sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation));
|
|
sessionStorage.setItem('revocation', JSON.stringify(revocation));
|
|
// clearSelect()
|
|
}
|
|
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])return
|
|
store.commit("DesignDetailCopy/setDesignDetail", oppositeRevocation[oppositeRevocation.length-1]);
|
|
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()
|
|
}
|
|
const setCurrentDetail = (str:string)=>{
|
|
store.commit('DesignDetailCopy/setCurrentDetailType',str)
|
|
}
|
|
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()
|
|
let gradient = null
|
|
let newData = list[i]?.newDetail?.[detailData.currentDetailType]
|
|
let isCurrent = list[i].id == detailData?.selectDetail?.id
|
|
let data:any = {
|
|
changed:false,
|
|
color:(newData && detailData.currentDetailType == 'color' && isCurrent)?`${newData.rgba.r} ${newData.rgba.g} ${newData.rgba.b}`:`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`,
|
|
designType:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.designType:list[i].designType,
|
|
id:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.id:list[i].id,
|
|
// maskMinioUrl:'',
|
|
// maskUrl:'',
|
|
maskUrl:list[i].maskUrl,
|
|
offset,
|
|
partialDesign:list[i].partialDesign,
|
|
path:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.minIOPath:list[i].minIOPath,
|
|
printObject:(newData && detailData.currentDetailType == 'print' && isCurrent)?{prints:newData}:list[i].printObject?list[i].printObject:{prints:[]},
|
|
priority,
|
|
scale,
|
|
type:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.level2Type:list[i].type,
|
|
sketchString:list[i].sketchString?list[i].sketchString:'',
|
|
trims:(newData && detailData.currentDetailType == 'element' && isCurrent)?{prints:newData}:list[i].trims?list[i].trims:{prints:[]},
|
|
}
|
|
if((list[i].color?.gradient || list[i].newDetail?.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)=>{
|
|
let workspace = store.state.Workspace.probjects
|
|
if(!detailData.selectDetail.path && !detailData.selectDetail.newDetail?.sketch?.minIOPath)return
|
|
let clothes:any = await setClothes([detailData.selectDetail])
|
|
let data = {
|
|
designItemId:detailData.designDetail.designItemId,
|
|
designSingleItemDTOList:clothes,
|
|
isPreview:true,
|
|
// ifSubmit:designItemDetail.isPreview,
|
|
gender:workspace?.sex == 'Male'?1:0,
|
|
sketchString:'',
|
|
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
processId:userDetail.value.userId,
|
|
}
|
|
detailData.loadingShow = true
|
|
Https.axiosPost(Https.httpUrls.designSingle, data).then((rv)=>{
|
|
let value = {
|
|
currentType : JSON.parse(JSON.stringify(detailData.currentDetailType)),
|
|
rv:rv
|
|
}
|
|
store.commit('DesignDetailCopy/setPraeview',value)
|
|
detailData.loadingShow = false
|
|
}).catch(res=>{
|
|
detailData.loadingShow = false
|
|
});
|
|
}
|
|
const submit = async ()=>{
|
|
let workspace = store.state.Workspace.probjects
|
|
let clothes:any = await setClothes(detailData.designDetail.clothes)
|
|
let data = {
|
|
designItemId:detailData.designDetail.designItemId,
|
|
designSingleItemDTOList:clothes,
|
|
isPreview:false,
|
|
// ifSubmit:designItemDetail.isPreview,
|
|
gender:workspace?.sex == 'Male'?1:0,
|
|
sketchString:'',
|
|
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
processId:userDetail.value.userId,
|
|
}
|
|
detailData.loadingShow = true
|
|
Https.axiosPost(Https.httpUrls.designSingle, data).then((rv)=>{
|
|
// store.commit('DesignDetailCopy/setPraeview',rv)
|
|
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 = ()=>{
|
|
let data = getSubmitData('preview')
|
|
store.dispatch('DesignDetailCopy/setSubmit',data)
|
|
}
|
|
const detailEdit = (str:any)=>{
|
|
if(str == 'edit'){
|
|
detailData.isEditPattern.value = !detailData.isEditPattern.value
|
|
}
|
|
}
|
|
const canvasReload = ()=>{
|
|
detailData.childKey += 1
|
|
}
|
|
let time = null as any
|
|
const handleResize = ()=>{
|
|
clearTimeout(time)
|
|
time = setTimeout(()=>{
|
|
store.commit('DesignDetailCopy/setDesignDetail',detailData.designDetail)
|
|
},1000)
|
|
}
|
|
onMounted(()=>{
|
|
window.addEventListener('resize', handleResize);
|
|
})
|
|
onBeforeUnmount(()=>{
|
|
sessionStorage.removeItem('oppositeRevocation')
|
|
sessionStorage.removeItem('revocation')
|
|
store.commit('DesignDetailCopy/clearDesignDetail')
|
|
|
|
window.removeEventListener('resize', handleResize);
|
|
})
|
|
|
|
return{
|
|
...toRefs(detailDom),
|
|
...toRefs(detailData),
|
|
closeModal,
|
|
showDesignDetailModal,
|
|
setCurrentDetail,
|
|
previwe,
|
|
submit,
|
|
revocation,
|
|
oppositeRevocation,
|
|
detailEdit,
|
|
canvasReload,
|
|
}
|
|
},
|
|
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.8rem;
|
|
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{
|
|
> .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: 34rem;
|
|
}
|
|
&.isEditPattern{width: 0px;}
|
|
&.model{
|
|
width: 50rem;
|
|
margin: 0 10rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
&.detailRight{
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-bottom: calc(6rem + 1rem);
|
|
overflow: hidden;
|
|
> .contentRight{
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
> .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;
|
|
> div{
|
|
margin-right: 2rem;
|
|
}
|
|
> div:last-child{
|
|
margin-right: 0rem;
|
|
}
|
|
}
|
|
}
|
|
> .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;
|
|
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> |