1231 lines
38 KiB
Vue
1231 lines
38 KiB
Vue
<template>
|
|
<div>
|
|
<!-- designDetailShow -->
|
|
<a-modal class="design_detail_modal_component Guide_1_18"
|
|
:class="[driver__.driver?'hideEvents':'']"
|
|
v-model:visible="designDetailShow"
|
|
:footer="null"
|
|
width="65%"
|
|
:maskClosable="false"
|
|
:centered="true"
|
|
:keyboard="false"
|
|
:closable="false"
|
|
>
|
|
<div class="design_title_text">
|
|
<div>{{ $t('DesignDetail.Details') }}</div>
|
|
<div class="design_title_text_intro">{{ $t('DesignDetail.EditDetails') }}</div>
|
|
</div>
|
|
<div class="design_closeIcon" @click.stop="closeModal()">
|
|
<i class="fi fi-rr-cross-small"></i>
|
|
</div>
|
|
<div class="turn_button turn_left_button" v-show="designShowPrview == 1" @click="changeDesignItem('last')"><span class="icon iconfont icon_turn icon-shangyibu"></span></div>
|
|
<div class="turn_button turn_right_button" v-show="designShowPrview == 1" @click="changeDesignItem('next')"><span class="icon iconfont icon_turn icon-xiayibu"></span></div>
|
|
<!-- <div class="design_centent">
|
|
</div> -->
|
|
<div class="design_detail_modal_body" v-show="designShowPrview == 1">
|
|
|
|
<div class="detail_modal_body_img">
|
|
<!-- <img class="detial_img" :src="designItemDetail.designItemUrl"> -->
|
|
|
|
<div v-show="imgDesignImg" class="detail_modal_body">
|
|
<div class="detail_modal_body_nav">
|
|
<div v-for="item,index in designItemDetail?.clothes" :class="{active:item.clothesOpen}" @click="clothesOpen(index)">
|
|
<img :src="item?.path" alt="">
|
|
</div>
|
|
<div>
|
|
+
|
|
</div>
|
|
</div>
|
|
<div class="detail_modal_model_content">
|
|
<div class="detail_modal_item_back" :class="{active:body}" v-for="item,index in frontBack.back" :style="item.style">
|
|
<img :src="item.imageUrl" alt="">
|
|
</div>
|
|
<img class="detail_modal_model" :src="frontBack.body?.layersObject[0]?.imageUrl" alt="">
|
|
<div class="detail_modal_item_front Guide_1_19" :class="{active:body}" v-for="item,index in frontBack.front" :style="item.style" @click.stop="clothesDetail(item,index)">
|
|
<img :src="item.imageUrl" alt="">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- <div v-else class="detial_img detial_img1" v-for="item,index in frontBack.front" :style="item.style" @click.stop="clothesDetail(item,index)">
|
|
<img :src="item.imageUrl" alt="">
|
|
</div> -->
|
|
<!-- <img v-show="!imgDesignImg" class="detial_img" src="../../assets/images/homePage/111111.png"> -->
|
|
|
|
<img v-show="!imgDesignImg" class="detial_img" :src="designItemDetail.designItemUrl">
|
|
<div class="detail_btn">
|
|
<!-- 全屏 -->
|
|
<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></i>
|
|
<!-- 编辑 -->
|
|
<i v-show="!body" class="fi fi-rr-edit" @click="showDesignImgDetail(3)"></i>
|
|
<!-- 层 -->
|
|
<i class="fi fi-rr-copy" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg" @touchstart="mousedownDesignImg" @touchend="mouseupDesignImg"></i>
|
|
<i v-show="revocationShow>1" class="icon iconfont icon-chehui" @click="revocation"></i>
|
|
<i v-show="oppositeRevocationShow>=1" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
|
|
</div>
|
|
<div v-show="ifSubmit" class="subitOkPreviewBtn Guide_1_26" @click="submit">
|
|
{{ $t('DesignDetail.Submit') }}
|
|
</div>
|
|
</div>
|
|
<div class="detail_modal_body_category">
|
|
<div v-show="designOrder" class="detail_modal_right_top scroll_style">
|
|
<div class="clothes_detail_item clothes_detail_item_apparel">
|
|
<div class="clothes_item_header">
|
|
<i class="fi fi-rs-comments"></i>
|
|
<div>{{ $t('DesignDetail.CurrentApparel') }}</div>
|
|
<i class="fi fi-rr-edit" @click.stop="openCurrent(1)"></i>
|
|
</div>
|
|
<img :src="designItemDetail?.clothes?.[currentIndex]?.path" alt="" class="centent" @click="openCurrent(1)">
|
|
</div>
|
|
<div class="clothes_detail_item clothes_detail_item_print">
|
|
<div class="clothes_item_header">
|
|
<i class="fi fi-rs-comments"></i>
|
|
<div>{{ $t('DesignDetail.CurrentPrint') }}</div>
|
|
<i class="fi fi-rr-edit" @click.stop="openCurrent(2)"></i>
|
|
</div>
|
|
<div class="Guide_1_20" :class="[driver__.driver?'showEvents':'']">
|
|
<div class="centent_div" v-if="designItemDetail?.clothes?.[currentIndex]?.printObject?.prints[0]?.path" @click="openCurrent(2)">
|
|
<img :src="designItemDetail?.clothes?.[currentIndex]?.printObject?.prints[0]?.path" alt="">
|
|
</div>
|
|
<i v-else class="fi fi-rr-picture centent" @click="openCurrent(2)"></i>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="clothes_detail_item clothes_detail_item_color">
|
|
<div class="clothes_item_header">
|
|
<i class="fi fi-rs-comments"></i>
|
|
<div>{{ $t('DesignDetail.CurrentColor') }}</div>
|
|
<i class="fi fi-rr-edit" @click.stop="openCurrent(3)"></i>
|
|
</div>
|
|
<div class="img_block_item centent" @click.stop="openCurrent(3)">
|
|
<div class="color_item">
|
|
<div class="color_content" :style="{background:`rgba(${designItemDetail?.clothes?.[currentIndex].color?.r},${designItemDetail?.clothes?.[currentIndex].color?.g},${designItemDetail?.clothes?.[currentIndex].color?.b},${designItemDetail?.clothes?.[currentIndex].color?.a?designItemDetail?.clothes?.[currentIndex].color.a:1})`}"></div>
|
|
<div class="color_content_body">
|
|
<div class="color_des">{{designItemDetail?.clothes?.[currentIndex]?.color?.tcx}}</div>
|
|
<div class="color_des">{{designItemDetail?.clothes?.[currentIndex]?.color?.name}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<DesignDetailAlter ref="DesignDetailAlter"></DesignDetailAlter>
|
|
|
|
</div>
|
|
<div class="design_detail_perview" v-show="designShowPrview == 2">
|
|
<div class="design_detail_perview_content" >
|
|
<magnifyingGlass ref="magnifyingGlass" :designItemDetailUrl='designItemDetailUrl'></magnifyingGlass>
|
|
<!-- <img class="perview_img" v-lazy="designItemDetail.currentFullBodyView?designItemDetail.currentFullBodyView:designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl"> -->
|
|
<!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="design_detail_perview" v-show="designShowPrview == 3">
|
|
|
|
<div class="design_detail_perview_content" >
|
|
<!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
|
|
<setDesignItem v-if="!moible" ref="setDesignItem" @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItem>
|
|
<setDesignItemMobile v-else ref="setDesignItemMobile" @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItemMobile>
|
|
</div>
|
|
|
|
</div>
|
|
</a-modal>
|
|
<div class="mark_loading" v-show="loadingShow">
|
|
<a-spin size="large" />
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent,computed,ref,provide,nextTick } from 'vue'
|
|
import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue'
|
|
import magnifyingGlass from '@/component/Detail/magnifyingGlass.vue'
|
|
import setDesignItem from '@/component/Detail/setDesignItem.vue'
|
|
import setDesignItemMobile from '@/component/Detail/setDesignItemMobile.vue'
|
|
import Draggable from 'vuedraggable'
|
|
import { Https } from "@/tool/https";
|
|
import {getUploadUrl,isMoible} from '@/tool/util'
|
|
import { useStore } from "vuex";
|
|
import { openGuide,driverObj__ } from "@/tool/guide";
|
|
import GO from '@/tool/GO';
|
|
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
|
import { useI18n } from 'vue-i18n'
|
|
export default defineComponent({
|
|
components:{
|
|
Draggable,
|
|
DesignDetailAlter,
|
|
setDesignItem,
|
|
magnifyingGlass,
|
|
setDesignItemMobile,
|
|
},
|
|
setup() {
|
|
const store = useStore();
|
|
// let designItemDetail :any = computed(()=>{
|
|
// return store.state.DesignDetailModule.designItemDetail
|
|
// })
|
|
let designItemDetail :any = computed(()=>{
|
|
return store.state.DesignDetailModule.designItemDetail
|
|
})
|
|
let parentData:any = ref({
|
|
design:{},
|
|
index:0,
|
|
collectionList:[],
|
|
type:'',
|
|
|
|
})//父组件传过来的数据
|
|
let others:any = ref({
|
|
left:200+'px',
|
|
top:100+'px',
|
|
})
|
|
let currentIndex:any = ref(0)
|
|
let current:any = ref({})//点击上衣或者下衣
|
|
provide('current',current)
|
|
let frontBack:any = ref({})
|
|
let body = ref(false)
|
|
let designItemId = ref()
|
|
let designOutfitId = ref()
|
|
let userInfo:any = {}
|
|
let ifSubmit = ref(false)
|
|
let designItemDetailUrl = ref({})
|
|
let setRevocationShow = ref(false)//判断是不是第一次进来和切换下一张
|
|
let oppositeRevocationShow:any = ref()
|
|
let revocationShow:any = ref()
|
|
let driver__:any = computed(()=>{
|
|
return store.state.Guide.guide
|
|
})
|
|
provide('driver__',driver__)
|
|
let moible:any = isMoible()
|
|
provide('moible',moible)
|
|
let {t} = useI18n()
|
|
return{
|
|
designItemDetail,
|
|
store,
|
|
parentData,
|
|
others,
|
|
currentIndex,
|
|
current,
|
|
frontBack,
|
|
body,
|
|
designItemId,
|
|
designOutfitId,
|
|
userInfo,
|
|
ifSubmit,
|
|
designItemDetailUrl,
|
|
setRevocationShow,
|
|
oppositeRevocationShow,
|
|
revocationShow,
|
|
driver__,
|
|
moible,
|
|
t,
|
|
}
|
|
},
|
|
data(){
|
|
return{
|
|
loadingShow:false,//加载中
|
|
designDetailShow:false,
|
|
designShowPrview:1, //展示图片预览步骤
|
|
generateHighDesignImg:'',//点击generate按钮生成的高级设计图
|
|
imgDesignImg:true,
|
|
designOrder:false,
|
|
}
|
|
},
|
|
watch:{
|
|
designItemDetail:{
|
|
handler: async function(newVal,oldVal) {
|
|
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
|
this.ifSubmit = designItemDetail.ifSubmit?designItemDetail.ifSubmit:false
|
|
this.current = JSON?.parse(JSON?.stringify(designItemDetail?.clothes?.[this?.currentIndex]))
|
|
if(designItemDetail.others[0].layersObject.length != 0){
|
|
this.body = false
|
|
}else{
|
|
this.body = true
|
|
}
|
|
await this.setImgSize()
|
|
this.designItemDetailUrl = designItemDetail.currentFullBodyView?designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
|
|
}
|
|
},
|
|
currentIndex:{
|
|
handler: function(newval) {
|
|
}
|
|
},
|
|
designDetailShow:{
|
|
handler: function(newval) {
|
|
// this.removeRevocation()
|
|
}
|
|
}
|
|
},
|
|
provide() {
|
|
return {
|
|
setRevocation:this.setRevocation
|
|
}
|
|
},
|
|
mounted(){
|
|
let beforeunload = () => {
|
|
this.removeRevocation()
|
|
window.removeEventListener('beforeunload',beforeunload)
|
|
}
|
|
window.addEventListener('beforeunload',beforeunload)
|
|
let userInfo:any = getCookie("userInfo")
|
|
this.userInfo = JSON.parse(userInfo);
|
|
// 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
|
|
// })
|
|
},
|
|
methods:{
|
|
openCurrent(num: Number) {
|
|
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
|
|
DesignDetailAlter.init(num)
|
|
if(num ==2 ){
|
|
if(this.driver__.driver){
|
|
nextTick().then(()=>{
|
|
driverObj__.moveNext();
|
|
})
|
|
}
|
|
}
|
|
},
|
|
|
|
closeModal(){
|
|
if(this.designShowPrview == 1){
|
|
this.designDetailShow = false
|
|
this.designOrder = false
|
|
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
|
|
DesignDetailAlter.terminate()
|
|
// this.designItemDetail = {}
|
|
this.frontBack = {}
|
|
}else{
|
|
this.designShowPrview = 1;
|
|
// this.designItemDetailUrl = {}
|
|
}
|
|
},
|
|
|
|
showDesignDetailModal(data:any,str:string){
|
|
this.moible = isMoible()
|
|
this.designItemId = data.design.designItemId
|
|
this.designOutfitId = data.design.designOutfitId
|
|
let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}&designPythonOutfitId=${data.design.designOutfitId}`
|
|
this.parentData = data
|
|
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)
|
|
this.removeRevocation()
|
|
this.setRevocation(rv,'')
|
|
if(rv.others[0].layersObject.length != 0){
|
|
this.body = false
|
|
}else{
|
|
this.body = true
|
|
}
|
|
if(str == 'setDesignItem'){
|
|
|
|
}else{
|
|
this.designShowPrview = 1
|
|
}
|
|
await this.setImgSize()
|
|
this.generateHighDesignImg = rv.highDesignUrl
|
|
this.designDetailShow = true
|
|
this.loadingShow = false
|
|
if(this.driver__.driver){
|
|
nextTick().then(()=>{
|
|
// driverObj__.moveNext();
|
|
driverObj__.moveTo(42);
|
|
})
|
|
}
|
|
}
|
|
|
|
).catch(rv=>{
|
|
this.loadingShow = false
|
|
})
|
|
|
|
},
|
|
async setImgSize(){
|
|
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
|
let front:any = []
|
|
let back:any = []
|
|
let body:any
|
|
if(this.body){
|
|
designItemDetail.clothes.forEach((v:any,index:number)=>{
|
|
let zIndex = 3
|
|
for (let i = v.layersObject.length-1; i >= 0; i--) {
|
|
if(v.layersObject[i].imageCategory.indexOf("back") == -1){
|
|
front[index] = v.layersObject[i]
|
|
}else{
|
|
back[index] = v.layersObject[i]
|
|
}
|
|
}
|
|
})
|
|
}else{
|
|
designItemDetail?.others?.forEach((item:any) => {
|
|
if(item.type == 'Body'){
|
|
body = item
|
|
}
|
|
});
|
|
let ratio:any = await this?.setPostition(body?.layersObject?.[0]?.imageUrl)
|
|
let frontIndex = 6
|
|
let backIndex = 3
|
|
designItemDetail.clothes.forEach((v:any,index:any)=>{
|
|
|
|
for (let i = v.layersObject.length-1; i >= 0; i--) {
|
|
v.layersObject[i].style = {
|
|
top:v.layersObject[i].position?.[0]*ratio+'px',
|
|
left:v.layersObject[i].position?.[1]*ratio+'px',
|
|
width:v.layersObject[i].imageSize?.[0]*ratio+'px',
|
|
height:v.layersObject[i].imageSize?.[1]*ratio+'px',
|
|
// zIndex:zIndex-=1
|
|
}
|
|
v.layersObject[i].centers={
|
|
left:0,
|
|
top:0,
|
|
}
|
|
v.layersObject[i].designOpenrtionBtn = false
|
|
if(v.layersObject[i].imageCategory.indexOf("back") == -1){
|
|
front[index] = v.layersObject[i]
|
|
front[index].style.zIndex = frontIndex-=1
|
|
}else{
|
|
back[index] = v.layersObject[i]
|
|
back[index].style.zIndex = backIndex-=1
|
|
// back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++
|
|
}
|
|
}
|
|
})
|
|
body.style = {
|
|
width:body.layersObject[0].imageSize?.[0]*ratio+'px',
|
|
height:body.layersObject[0].imageSize?.[1]*ratio+'px',
|
|
}
|
|
}
|
|
let onresizeTime:any
|
|
let this_ = this
|
|
window.onresize = () => {
|
|
return (() => {
|
|
clearTimeout(onresizeTime)
|
|
onresizeTime = setTimeout(async ()=>{
|
|
await this_.setImgSize()
|
|
|
|
},500)
|
|
|
|
})()
|
|
}
|
|
// console.log(this.frontBack);
|
|
|
|
this.frontBack = {
|
|
front:front,
|
|
back:back,
|
|
body:body,
|
|
}
|
|
},
|
|
setDesignCoverage(str:string){
|
|
let {design,index,collectionList} = this.parentData
|
|
let newIndex = 0
|
|
let newDesign = {}
|
|
collectionList.forEach((item:any,index:number) => {
|
|
if(item.designItemId === this.designItemId){
|
|
newIndex = index
|
|
}
|
|
});
|
|
newDesign = collectionList[newIndex]
|
|
newIndex = this.parentData.index
|
|
let data = {
|
|
design:newDesign,
|
|
index:newIndex,
|
|
collectionList:collectionList
|
|
}
|
|
this.designShowPrview = 1
|
|
// this.showDesignDetailModal(data,str)
|
|
this.loadingShow = false
|
|
},
|
|
removeRevocation(){
|
|
sessionStorage.removeItem('oppositeRevocation')
|
|
sessionStorage.removeItem('revocation')
|
|
this.setRevocationShow = false
|
|
},
|
|
setRevocation(designItemDetail:any,data:any){//设置撤销
|
|
let itemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
|
// let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
|
|
let revocation:any = JSON.parse((sessionStorage.getItem("revocation") as any))
|
|
let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
|
|
if(revocation?.[0]?.designItemDetail.designItemId != itemDetail.designItemId || revocation?.[0]?.designItemDetail.designItemId == undefined){
|
|
// sessionStorage.setItem('revocation', JSON.stringify([]));
|
|
// sessionStorage.setItem('oppositeRevocation',JSON.stringify([]));
|
|
revocation = []
|
|
}
|
|
let detail = {
|
|
designItemDetail:designItemDetail,
|
|
data:data?data:''
|
|
}
|
|
revocation.push(detail)
|
|
|
|
this.revocationShow = revocation?.length
|
|
this.oppositeRevocationShow = 0
|
|
sessionStorage.setItem('revocation', JSON.stringify(revocation));
|
|
sessionStorage.setItem('oppositeRevocation',JSON.stringify([]));
|
|
},
|
|
revocation(){//撤回
|
|
let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
|
|
let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
|
|
oppositeRevocation.push(revocation[revocation.length-1])
|
|
this.oppositeRevocationShow = oppositeRevocation.length
|
|
revocation.splice(revocation.length-1,1)
|
|
this.revocationShow = revocation.length
|
|
if(this.revocationShow > 1){
|
|
this.store.commit('setDesignPreviewData',revocation[revocation.length-1].data)
|
|
}
|
|
this.store.commit("setDesignItemDetail", revocation[revocation.length-1].designItemDetail);
|
|
sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation));
|
|
sessionStorage.setItem('revocation', JSON.stringify(revocation));
|
|
},
|
|
oppositeRevocation(){//反撤回
|
|
let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
|
|
let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
|
|
this.store.commit('setDesignPreviewData',oppositeRevocation[oppositeRevocation.length-1].data)
|
|
this.store.commit("setDesignItemDetail", oppositeRevocation[oppositeRevocation.length-1].designItemDetail);
|
|
revocation.push(oppositeRevocation[oppositeRevocation.length-1])
|
|
this.revocationShow = revocation.length
|
|
oppositeRevocation.splice(oppositeRevocation.length-1,1)
|
|
this.oppositeRevocationShow = oppositeRevocation.length
|
|
sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation));
|
|
sessionStorage.setItem('revocation', JSON.stringify(revocation));
|
|
},
|
|
setSubmitItem(str:any){
|
|
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
|
let clothes:any = []
|
|
|
|
designItemDetail.clothes.forEach((item:any) => {
|
|
let clothesItem = {
|
|
color: `${item.color.r} ${item.color.g} ${item.color.b}`,
|
|
id:item.id,
|
|
path:item.minIOPath,
|
|
offset:item.layersObject[1].offset == null?[0,0]:item.layersObject[1].offset,
|
|
scale:item.layersObject[1].scale?item.layersObject[1].scale:1,
|
|
printObject:{
|
|
ifSingle:item.printObject.ifSingle == null ? false : item.printObject.ifSingle,
|
|
// path:item.printObject.path?item.printObject.path :'',
|
|
prints:item?.printObject?.prints[0]?.minIOPath?item?.printObject?.prints:[]
|
|
},
|
|
type:item.type,
|
|
}
|
|
clothes.push(clothesItem)
|
|
|
|
});
|
|
let data = {
|
|
designItemId:designItemDetail.designItemId,
|
|
// designItemId:designItemDetail.designItemId,
|
|
designSingleItemDTOList:clothes,
|
|
isPreview:false,
|
|
ifSubmit:designItemDetail.isPreview,
|
|
processId:String(this.userInfo?.userId),
|
|
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
}
|
|
if(str == 'preview'){
|
|
data.isPreview = true
|
|
}else{
|
|
data.isPreview = false
|
|
delete data.ifSubmit
|
|
}
|
|
this.store.commit('setDesignPreviewData',data)
|
|
return data
|
|
},
|
|
async setSubmit(str:any){
|
|
let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
|
|
let data = this.setSubmitItem(str)
|
|
this.loadingShow = true
|
|
await setDesignItem.setPreview(data)
|
|
},
|
|
async submit(){
|
|
let data = this.setSubmitItem('')
|
|
this.loadingShow = true
|
|
Https.axiosPost(Https.httpUrls.designSingle, data).then(
|
|
(rv: any) => {
|
|
this.loadingShow = false
|
|
let designCollectionList = this.store.state.HomeStoreModule.designCollectionList
|
|
let likeDesignCollectionList = this.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
|
|
}
|
|
});
|
|
this.closeModal()
|
|
this.store.commit('setDesignCollectionList',designCollectionList)
|
|
this.store.commit('setLikeDesignCollectionList',likeDesignCollectionList)
|
|
if(this.driver__.driver){
|
|
nextTick().then(()=>{
|
|
driverObj__.moveNext();
|
|
})
|
|
}
|
|
}
|
|
).catch(res=>{
|
|
this.loadingShow = false
|
|
});
|
|
|
|
},
|
|
//按比设置单件衣服宽高位置
|
|
async setPostition(url:any){
|
|
let img:any = await loadImage(url)
|
|
let modal_body = <HTMLImageElement>document.getElementsByClassName('detail_modal_model')[0]
|
|
const num = modal_body?.offsetWidth / img.width;
|
|
function loadImage(url:any) {
|
|
return new Promise((resolve, reject) => {
|
|
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
resolve(img)
|
|
};
|
|
img.onerror = reject;
|
|
img.src = url;
|
|
});
|
|
}
|
|
return num
|
|
},
|
|
//切换上一张或下一张图的详情
|
|
changeDesignItem(type:string){
|
|
let {design,index,collectionList} = this.parentData
|
|
let newDesign = {}
|
|
let newIndex = 0
|
|
this.designOrder = false
|
|
this.removeRevocation()
|
|
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
|
|
DesignDetailAlter.terminate()
|
|
if(type === 'last'){
|
|
if(index>0){
|
|
newIndex = this.parentData.index - 1
|
|
}else{
|
|
newIndex = this.parentData.collectionList.length - 1
|
|
}
|
|
}else{
|
|
if(index < this.parentData.collectionList.length - 1){
|
|
newIndex = this.parentData.index + 1
|
|
}else{
|
|
newIndex = 0
|
|
}
|
|
}
|
|
newDesign = collectionList[newIndex]
|
|
let data = {
|
|
design:newDesign,
|
|
index:newIndex,
|
|
collectionList:collectionList
|
|
}
|
|
this.showDesignDetailModal(data,'')
|
|
},
|
|
|
|
//显示图片详情
|
|
showDesignImgDetail(num:any){
|
|
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
|
this.designShowPrview = num
|
|
let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
|
|
if(this.designShowPrview == 3){
|
|
setDesignItem.init()
|
|
}
|
|
// this.others = designItemDetail.others
|
|
|
|
// if(this.generateHighDesignImg){
|
|
// this.designShowPrview = 3
|
|
// }else{
|
|
// this.designShowPrview = 2
|
|
// }
|
|
},
|
|
//图片按下样子
|
|
mousedownDesignImg(){
|
|
this.imgDesignImg = false
|
|
},
|
|
//图片抬起样子
|
|
mouseupDesignImg(){
|
|
this.imgDesignImg = true
|
|
},
|
|
clothesOpen(index:any){
|
|
this.clothesDetail('',index)
|
|
|
|
},
|
|
clothesOpenActive(index:any){
|
|
this.designItemDetail.clothes.forEach((item:any)=>{
|
|
item.clothesOpen = false
|
|
})
|
|
this.designItemDetail.clothes[index].clothesOpen = true
|
|
},
|
|
//元素替换
|
|
clothesDetail(clothes:any, index:number){
|
|
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
|
this.currentIndex = index
|
|
this.designOrder = true
|
|
this.current = designItemDetail.clothes[this.currentIndex]
|
|
this.clothesOpenActive(index)
|
|
let data:any = this.setSubmitItem('preview')
|
|
data.designSingleItemDTOList[this.currentIndex] = {
|
|
color:`${this.current.color.r} ${this.current.color.g} ${this.current.color.b}`,
|
|
id:this.current.id,
|
|
path:this.current.minIOPath?this.current.minIOPath:'',
|
|
offset:this.current.layersObject[1].offset?this.current.layersObject[1].offset:[0,0],
|
|
scale:this.current.layersObject[1].scale?this.current.layersObject[1].scale:1,
|
|
printObject:{
|
|
ifSingle:this.current?.printObject?.ifSingle == null ? false : this.current?.printObject?.ifSingle,
|
|
// prints:this.current?.printObject[0]?.path == null ? [] : [{
|
|
// location:[0,0],
|
|
// angle:0,
|
|
// priority:1,
|
|
// path:this.current?.printObject?.path?this.current.printObject.path :'',
|
|
// minIOPath:this.current?.printObject?.minIOPath?this.current.printObject.minIOPath :'',
|
|
// }],
|
|
prints:this.current?.printObject?.prints[0]?.minIOPath?this.current?.printObject?.prints:[]
|
|
},
|
|
type:this.current.type,
|
|
}
|
|
this.store.commit('setDesignPreviewData',data)
|
|
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
|
|
DesignDetailAlter.changePlace()
|
|
if(this.driver__.driver){
|
|
nextTick().then(()=>{
|
|
driverObj__.moveNext();
|
|
})
|
|
}
|
|
},
|
|
//重新设计
|
|
redesignItem(){
|
|
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
|
delete designItemDetail.designItemUrl
|
|
let priority = designItemDetail.clothes.map((v:any)=>{
|
|
return v.type
|
|
})
|
|
let data = {
|
|
...designItemDetail,
|
|
priority:priority,
|
|
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
}
|
|
this.loadingShow = true
|
|
Https.axiosPost(Https.httpUrls.designSingle, data).then(
|
|
(rv: any) => {
|
|
this.parentData.design.designItemUrl = rv.designItemUrl
|
|
this.$emit('finishRedesign',this.parentData)
|
|
this.closeModal()
|
|
this.loadingShow = false
|
|
}
|
|
).catch(res=>{
|
|
this.loadingShow = false
|
|
});
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
})
|
|
</script>
|
|
<style lang="less">
|
|
.design_detail_modal_component{
|
|
color: #000;
|
|
// max-width: 1440px ;
|
|
|
|
.ant-modal-content{
|
|
border-radius: 1rem;
|
|
// overflow: hidden;
|
|
.ant-modal-header{
|
|
background-color: #fff;
|
|
border-bottom: none;
|
|
}
|
|
.ant-modal-body{
|
|
padding: 4rem 5rem 0rem!important;
|
|
// height: calc(65vh - 6.4rem);
|
|
height: 65rem;
|
|
display: flex;
|
|
overflow-y: hidden;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
.ant-modal-close{
|
|
width: 3.6rem;
|
|
height: 3.6rem;
|
|
position: absolute;
|
|
top: -1.8rem;
|
|
right: -1.8rem;
|
|
}
|
|
|
|
.ant-modal-header{
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
.turn_button{
|
|
width: 3.6rem;
|
|
height: 3.6rem;
|
|
background: #000000;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: calc(50% - 1.8rem);
|
|
cursor: pointer;
|
|
line-height: 3.6rem;
|
|
text-align: center;
|
|
|
|
&.turn_left_button{
|
|
left: -8rem;
|
|
}
|
|
|
|
&.turn_right_button{
|
|
right: -8rem;
|
|
}
|
|
|
|
.icon_turn{
|
|
font-size: 2.4rem;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.design_detail_modal_body{
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
// padding: 1.5rem 1rem 2.5rem;
|
|
box-sizing: border-box;
|
|
.detail_modal_body_img{
|
|
overflow: hidden;
|
|
// width: 43.3rem;
|
|
width: 23%;
|
|
height: 100%;
|
|
background: #FFFFFF;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
flex-direction: column;
|
|
// height: 50%;
|
|
.detail_modal_body{
|
|
position: relative;
|
|
// max-width: 245px;
|
|
width: 100%;
|
|
height: 100%;
|
|
.detail_modal_body_nav{
|
|
display: flex;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
z-index: 999;
|
|
transform: translate(-50%,-120%);
|
|
transition: all .3s;
|
|
>div{
|
|
width: 4rem;
|
|
height: 4rem;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
img{
|
|
// width: 100%;
|
|
height: 100%;
|
|
max-width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
&.active{
|
|
border: 2px solid rgba(0,0,0,0.4);
|
|
img{
|
|
transform: scale(.8);
|
|
opacity: .8;
|
|
}
|
|
}
|
|
}
|
|
>div:nth-child(1){
|
|
margin-right: 1rem;
|
|
}
|
|
}
|
|
.detail_modal_item_front:last-child{
|
|
z-index: 1 !important;
|
|
}
|
|
>img{
|
|
width: 100%;
|
|
}
|
|
.detail_modal_model_content{
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
left: 50%;
|
|
position: relative;
|
|
height: 80%;
|
|
display: inline-block;
|
|
// display: block;
|
|
overflow: initial !important;
|
|
// width: 100%;
|
|
.detail_modal_model{
|
|
z-index: 1;
|
|
position: relative;
|
|
width: auto;
|
|
max-height: 100%;
|
|
}
|
|
.detail_modal_item_front,.detail_modal_item_back{
|
|
cursor: pointer;
|
|
position: absolute;
|
|
img{
|
|
// width: 100%;
|
|
max-height: 100%;
|
|
width: auto;
|
|
}
|
|
&.active{
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
}
|
|
.detail_modal_item_back{
|
|
z-index: 1 !important;
|
|
}
|
|
.detail_modal_item_front{
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
.subitOkPreviewBtn{
|
|
bottom: 2rem;
|
|
z-index: 999;
|
|
}
|
|
.clothes_item_img_block{
|
|
display: flex;
|
|
}
|
|
.detial_img{
|
|
max-width: 100%;
|
|
max-height: 80%;
|
|
}
|
|
.detail_btn{
|
|
z-index: 9999;
|
|
}
|
|
.detial_img1{
|
|
position: absolute;
|
|
}
|
|
div{
|
|
i{
|
|
position: absolute;
|
|
cursor: pointer;
|
|
zoom: 1.2;
|
|
transition: all .3s;
|
|
&.fi-bs-expand-arrows-alt{
|
|
top: 0;
|
|
left: 0;
|
|
transform: translateX(-120%);
|
|
}
|
|
&.fi-rr-edit{
|
|
left: 0;
|
|
top: 3rem;
|
|
transform: translateX(-120%);
|
|
}
|
|
&.fi-rr-copy{
|
|
top: 0;
|
|
right: 0;
|
|
transform: translateX(120%);
|
|
}
|
|
&.icon-fanchehui{
|
|
top: 6rem;
|
|
right: 0;
|
|
transform: translateX(120%);
|
|
}
|
|
&.icon-chehui{
|
|
top: 3rem;
|
|
right: 0;
|
|
transform: translateX(120%);
|
|
}
|
|
}
|
|
i:hover{
|
|
|
|
}
|
|
}
|
|
&.detail_modal_body_img:hover{
|
|
.detail_modal_body{
|
|
.detail_modal_body_nav{
|
|
transform: translate(-50%,0%);
|
|
}
|
|
}
|
|
div{
|
|
i{
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.detail_modal_body_category{
|
|
width: 17%;
|
|
height: 100%;
|
|
position: relative;
|
|
.detail_modal_right_top{
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #fff;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
.clothes_detail_item{
|
|
// margin-bottom: 5rem;
|
|
flex: 1;
|
|
.centent_div{
|
|
display: flex;
|
|
cursor: pointer;
|
|
justify-content: center;
|
|
}
|
|
.centent{
|
|
cursor: pointer;
|
|
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
.clothes_item_header{
|
|
// height: 6.4rem;
|
|
margin-bottom: 1rem;
|
|
display: flex;
|
|
font-size: var(--aida-fsize1-8);
|
|
color: #000000;
|
|
justify-content: space-between;
|
|
.icon-dangqianweizhi{
|
|
font-size: 1.8rem;
|
|
color: #000000;
|
|
margin-right: 1rem;
|
|
}
|
|
i{
|
|
font-size: var(--aida-fsize1-8);
|
|
display: flex;
|
|
align-items: center;
|
|
&.fi-rr-edit{
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
img{
|
|
width: 10rem;
|
|
height: 10rem;
|
|
}
|
|
&.clothes_detail_item_apparel{
|
|
img{
|
|
max-height: 100%;
|
|
width: auto;
|
|
}
|
|
}
|
|
.color_item{
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
border: 1px solid #ebe9e9;
|
|
.color_content{
|
|
width: 8rem;
|
|
height: 4rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.color_content_body{
|
|
.color_des{
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
width: 8rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
&:nth-child(4n){
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
&.clothes_detail_item_print{
|
|
.fi-rr-picture{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
zoom: 3;
|
|
margin: 1rem 0;
|
|
}
|
|
}
|
|
&.subitOkPreviewBtn{
|
|
position: relative;
|
|
margin-top: 2rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.detail_modal_body_select{
|
|
width: 20%;
|
|
.switch_type_list {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
justify-content: space-around;
|
|
|
|
.switch_type_item {
|
|
display: flex;
|
|
align-items: center;
|
|
// padding: 0 2rem;
|
|
height: 4rem;
|
|
background: #fff;
|
|
border-radius: 0.8rem;
|
|
line-height: 4rem;
|
|
font-size: var(--aida-fsize1-8);
|
|
// margin-right: 2.2rem;
|
|
color: #000;
|
|
cursor: pointer;
|
|
position: relative;
|
|
text-align: center;
|
|
transform-origin: left;
|
|
transform: scale(1);
|
|
transition: 0.3s all;
|
|
&.switch_type_item::before {
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
background: #000;
|
|
height: .4rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: .6rem;
|
|
width: 0px;
|
|
transition: 0.3s all;
|
|
}
|
|
&.select_swtich {
|
|
color: #000;
|
|
font-weight: 600;
|
|
transform: scale(1.15);
|
|
}
|
|
&.select_swtich::before {
|
|
width: 100%;
|
|
}
|
|
|
|
.switch_icon {
|
|
font-size: 1.8rem;
|
|
margin-right: 0.8rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.design_detail_perview{
|
|
width: 100%;
|
|
height: 100%;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
&.design_detail_perview_second{
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0.7rem 9.1rem 0.6rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.design_detail_perview_content{
|
|
height: 100%;
|
|
background: #fff;
|
|
position: relative;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.perview_img{
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
.generate_button{
|
|
position: absolute;
|
|
top: 0;
|
|
right: -20.2rem;
|
|
padding: 0 1.5rem;
|
|
text-align: center;
|
|
height: 3.6rem;
|
|
line-height: 3.6rem;
|
|
background: #343579;
|
|
font-size: 1.4rem;
|
|
font-family: Roboto;
|
|
color: #FFFFFF;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:hover .img_item_hover{
|
|
display: block;
|
|
}
|
|
|
|
.img_item_hover{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top:0;
|
|
background: rgba(0,0,0,0.4);
|
|
display: none;
|
|
|
|
.img_operate_block{
|
|
width: 3.6rem;
|
|
height: 3.6rem;
|
|
background: rgba(0,0,0,0.6);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
right: 2.2rem;
|
|
text-align: center;
|
|
line-height: 3.6rem;
|
|
cursor: pointer;
|
|
|
|
&.delete_img_block{
|
|
top: 2rem;
|
|
}
|
|
|
|
.operate_icon{
|
|
font-size: 1.8rem;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
</style>
|
|
<style lang="less">
|
|
.design_detail_modal_component{
|
|
.mark_loading{
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
</style> |