1609 lines
50 KiB
Vue
1609 lines
50 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="78%"
|
|
:maskClosable="false"
|
|
:centered="true"
|
|
:keyboard="false"
|
|
:closable="false"
|
|
>
|
|
<div class="modal_title_text">
|
|
<div>{{ $t('DesignDetail.Details') }}</div>
|
|
<div class="modal_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" v-show="item.id" :class="{active:item.clothesOpen}" @click="clothesOpen(index)">
|
|
<img :src="item?.path" alt="">
|
|
<i v-show="deleteShow" class="fi fi-br-cross" @click.stop="setDelete(index)"></i>
|
|
</div>
|
|
<div v-show="designItemDetailNum < 5 && !body" class="detail_modal_body_Set" @click="setClothesOpen()">
|
|
+
|
|
</div>
|
|
</div>
|
|
<div class="detail_modal_model_content" :class="{active:body}">
|
|
<img class="detail_modal_model" :src="designItemDetail.currentFullBodyView?designItemDetail.currentFullBodyView:designItemDetail.designItemUrl" alt="">
|
|
<!-- <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="clothesOpen(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 v-show="!body && !deleteShow" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
|
|
<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></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>
|
|
<div class="centent_div" v-if="current?.id" @click="openCurrent(1)">
|
|
<img :src="current?.path" alt="" class="" @click="openCurrent(1)">
|
|
</div>
|
|
<i v-else class="fi fi-rr-picture centent clothes_item_icon" @click="openCurrent(1)"></i>
|
|
|
|
</div>
|
|
<div class="clothes_detail_item clothes_detail_item_print" :class="[current?.id?'':'hideCursor']">
|
|
<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 clothes_item_icon" :class="[driver__.driver?'showEvents':'']">
|
|
<div class="centent_div" v-if="current?.printObject?.prints?.[0]?.path" @click="openCurrent(2)">
|
|
<img :src="current?.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" :class="[current?.id?'':'hideCursor']">
|
|
<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 v-if="!current?.gradient" class="color_content" :style="{background:`rgba(${current?.color?.r},${current?.color?.g},${current?.color?.b},${current?.color?.a?current?.color.a:1})`}"></div>
|
|
<div class="color_content" v-else :style="{height:'10rem','background-image':current?.gradient?`linear-gradient(${current?.gradient.angle}deg,${setGradient(current?.gradient)}`:'none'}"></div>
|
|
<div v-if="!current?.gradient" class="color_content_body">
|
|
<div class="color_des">{{current?.color?.tcx}}</div>
|
|
<div class="color_des">{{current?.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" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItem>
|
|
<setDesignItemMobile v-else ref="setDesignItemMobile" @setParentLoadingShow=setParentLoadingShow @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,createVNode} from 'vue'
|
|
import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue'
|
|
import magnifyingGlass from '@/component/Detail/magnifyingGlass.vue'
|
|
import setDesignItem from '@/component/Detail/setDesignItem.vue'
|
|
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
|
import setDesignItemMobile from '@/component/Detail/setDesignItemMobile.vue'
|
|
import Draggable from 'vuedraggable'
|
|
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 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)
|
|
provide('designItemDetail',designItemDetail)
|
|
provide('currentIndex',currentIndex)
|
|
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__)
|
|
provide('body',body)
|
|
let moible:any = isMoible()
|
|
provide('moible',moible)
|
|
let {t} = useI18n()
|
|
//创建单件衣服
|
|
let setClothes:any = ref()
|
|
//点击删除按钮
|
|
let deleteShow:any = ref(false)
|
|
let deleteItemShow:any = ref(false)
|
|
let designItemDetailNum:any = ref(0)
|
|
|
|
return{
|
|
designItemDetail,
|
|
store,
|
|
parentData,
|
|
others,
|
|
currentIndex,
|
|
current,
|
|
frontBack,
|
|
body,
|
|
designItemId,
|
|
designOutfitId,
|
|
userInfo,
|
|
ifSubmit,
|
|
designItemDetailUrl,
|
|
setRevocationShow,
|
|
oppositeRevocationShow,
|
|
revocationShow,
|
|
driver__,
|
|
moible,
|
|
t,
|
|
setClothes,
|
|
deleteShow,
|
|
deleteItemShow,
|
|
designItemDetailNum,
|
|
}
|
|
},
|
|
data(){
|
|
return{
|
|
loadingShow:false,//加载中
|
|
designDetailShow:false,
|
|
designShowPrview:1, //展示图片预览步骤
|
|
generateHighDesignImg:'',//点击generate按钮生成的高级设计图
|
|
imgDesignImg:true,
|
|
designOrder:false,
|
|
}
|
|
},
|
|
computed:{
|
|
setGradient(){
|
|
return (gradient:any)=>{
|
|
let gradientStr = ''
|
|
gradient.gradientList.sort((a:any, b:any) => {
|
|
let aArr = a.left.split('%')[0]
|
|
let bArr = b.left.split('%')[0]
|
|
return aArr - bArr;
|
|
});
|
|
gradient.gradientList.forEach((item:any,index:any)=>{
|
|
let str = ','
|
|
if(gradient.gradientList.length == index+1)str = ''
|
|
gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}`
|
|
|
|
})
|
|
return `${gradientStr}`
|
|
}
|
|
},
|
|
},
|
|
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
|
|
if(newVal.clothes.length == 0){
|
|
this.current = ''
|
|
}else{
|
|
if(newVal.clothes.length-1 < this.currentIndex){
|
|
this.currentIndex = newVal.clothes.length-1
|
|
|
|
}
|
|
this.current = JSON?.parse(JSON?.stringify(designItemDetail?.clothes?.[this?.currentIndex]))
|
|
}
|
|
// if(designItemDetail.others?.[0]?.layersObject?.length != 0){
|
|
// this.body = false
|
|
// }else{
|
|
// this.body = true
|
|
// }
|
|
if(designItemDetail.singleOverall == 'overall'){
|
|
this.body = false
|
|
}else{
|
|
this.body = true
|
|
}
|
|
let num = 0
|
|
newVal.clothes.forEach((item:any) => {
|
|
if(item.id){
|
|
num++
|
|
}
|
|
});
|
|
|
|
this.designItemDetailNum = num
|
|
await this.setImgSize()
|
|
let url = ''
|
|
if(designItemDetail.currentFullBodyView){
|
|
url = designItemDetail.currentFullBodyView
|
|
}else{
|
|
url = designItemDetail.designItemUrl
|
|
}
|
|
this.designItemDetailUrl = url
|
|
// console.log(designItemDetail.currentFullBodyView,designItemDetail.designItemUrl);
|
|
|
|
}
|
|
},
|
|
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
|
|
if(num == 2 || num == 3){
|
|
if(!this.current.id){
|
|
return
|
|
}
|
|
}
|
|
DesignDetailAlter.init(num)
|
|
if(num ==2 ){
|
|
if(this.driver__.driver){
|
|
nextTick().then(()=>{
|
|
driverObj__.moveNext();
|
|
})
|
|
}
|
|
}
|
|
},
|
|
|
|
closeModal(submit:any){
|
|
if(this.designShowPrview == 1){
|
|
if(this.ifSubmit && submit == ''){
|
|
let _this = this
|
|
Modal.confirm({
|
|
title: this.t('DesignPrintOperation.jsContent1'),
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
okText: 'Yes',
|
|
cancelText: 'No',
|
|
mask:false,
|
|
centered:true,
|
|
onOk() {
|
|
_this.designDetailShow = false
|
|
_this.designOrder = false
|
|
let DesignDetailAlter:any = _this.$refs.DesignDetailAlter
|
|
DesignDetailAlter.terminate()
|
|
// _this.designItemDetail = {}
|
|
_this.frontBack = {}
|
|
}
|
|
});
|
|
}else{
|
|
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}`
|
|
// let url = Https.httpUrls.getDesignDetail + `?designItemId=40660&designPythonOutfitId=40366`
|
|
this.parentData = data
|
|
this.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.printObject.prints == null){
|
|
item.printObject.prints = [{}]
|
|
}else{
|
|
item.printObject.prints.forEach((element:any) => {
|
|
if(!element.designType){
|
|
element.designType = 'Library'
|
|
}
|
|
});
|
|
}
|
|
})
|
|
this.currentIndex = 0
|
|
this.store.commit('setDesignItemDetail',rv)
|
|
this.removeRevocation()
|
|
this.deleteShow = false
|
|
|
|
this.setRevocation(rv,'')
|
|
// if(rv.others[0].layersObject.length != 0){
|
|
// this.body = false
|
|
// }else{
|
|
// this.body = true
|
|
// }
|
|
if(rv.singleOverall == 'overall'){
|
|
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
|
|
await this.setImgSize()
|
|
if(this.driver__.driver){
|
|
nextTick().then(()=>{
|
|
// driverObj__.moveNext();
|
|
driverObj__.moveTo(41);
|
|
})
|
|
}
|
|
}
|
|
|
|
).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
|
|
this.frontBack.body = item
|
|
}
|
|
});
|
|
let ratio:any = await this?.setPostition(body?.layersObject?.[0]?.imageUrl)
|
|
if(Number.isNaN(ratio) || ratio == 0){
|
|
this.setImgSize()
|
|
return
|
|
}
|
|
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',
|
|
}
|
|
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 = v.priority
|
|
}else{
|
|
back[index] = v.layersObject[i]
|
|
back[index].style.zIndex = v.priority
|
|
// 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
|
|
this.frontBack = {
|
|
front:front,
|
|
back:back,
|
|
body:body,
|
|
}
|
|
await new Promise((resolve, reject) => {
|
|
nextTick().then(()=>{
|
|
resolve('')
|
|
})
|
|
});
|
|
window.onresize = () => {
|
|
return (() => {
|
|
clearTimeout(onresizeTime)
|
|
onresizeTime = setTimeout(async ()=>{
|
|
await this_.setImgSize()
|
|
|
|
},500)
|
|
|
|
})()
|
|
}
|
|
|
|
|
|
},
|
|
setParentLoadingShow(){
|
|
this.loadingShow=false
|
|
},
|
|
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
|
|
this.clearSelect()
|
|
},
|
|
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([]));
|
|
},
|
|
clearSelect(){//清除选中
|
|
this.designOrder = false
|
|
this.designItemDetail.clothes.forEach((item:any)=>{
|
|
item.clothesOpen = false
|
|
})
|
|
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
|
|
DesignDetailAlter.changePlace()
|
|
DesignDetailAlter.terminate()
|
|
},
|
|
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));
|
|
this.clearSelect()
|
|
},
|
|
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));
|
|
this.clearSelect()
|
|
},
|
|
setSubmitItem(str:any,sub:any){
|
|
//sub判断是不是点击新增图层又直接点击删除
|
|
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
|
let clothes:any = []
|
|
let num = -1
|
|
// let zIndex = 10
|
|
designItemDetail.clothes.forEach((item:any,index:number) => {
|
|
let clothesItem:any = {
|
|
color: `${item.color.r} ${item.color.g} ${item.color.b}`,
|
|
id:item.id,
|
|
path:item.minIOPath,
|
|
gradient:{},
|
|
changed:item.changed?item.changed:false,
|
|
designType:item.designType?item.designType:"Library",
|
|
offset:item.layersObject?.[1]?.offset == null?[0,0]:item.layersObject[1].offset,
|
|
scale:item.layersObject?.[1]?.scale?item.layersObject[1].scale:[1,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:[]
|
|
},
|
|
priority:item.priority,
|
|
type:item.type,
|
|
}
|
|
if(item.gradient){
|
|
let gradient = item.gradient
|
|
gradient.colorImg = setGradual(item.gradient,320,700)
|
|
clothesItem.gradient = item.gradient
|
|
}else{
|
|
delete clothesItem.gradient
|
|
}
|
|
if(!item.id && sub){
|
|
num = index
|
|
}else{
|
|
clothes.push(clothesItem)
|
|
}
|
|
});
|
|
if(num != -1){
|
|
designItemDetail.clothes.splice(num,1)
|
|
this.store.commit("setDesignItemDetail", designItemDetail);
|
|
}
|
|
this.currentIndex = 0
|
|
let workspace = this.store.state.Workspace.workspace
|
|
let data = {
|
|
designItemId:designItemDetail.designItemId,
|
|
// designItemId:designItemDetail.designItemId,
|
|
gender:workspace?.sex,
|
|
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
|
|
}
|
|
return data
|
|
},
|
|
async setSubmit(str:any){
|
|
let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
|
|
let data = this.setSubmitItem(str,true)
|
|
this.loadingShow = true
|
|
await setDesignItem.setPreview(data)
|
|
},
|
|
async submit(){
|
|
let data = this.setSubmitItem('',true)
|
|
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('submit')
|
|
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 num:any
|
|
await nextTick().then(async ()=>{
|
|
let modal_body:any= document.getElementsByClassName('detail_modal_model')[0]
|
|
let imgWidth:any
|
|
await new Promise((resolve, reject) => {
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
imgWidth = img.width
|
|
resolve(img)
|
|
};
|
|
img.onerror = reject;
|
|
img.src = url;
|
|
});
|
|
// await loadImage(url).then((img:any)=>{
|
|
// console.log(2);
|
|
// // modal_body = document.getElementsByClassName('detail_modal_model')[0]
|
|
// if(modal_body == undefined){
|
|
// this.setPostition(url)
|
|
// }
|
|
// console.log( modal_body?.offsetWidth,imgWidth, img.width);
|
|
// return num
|
|
// })
|
|
num = modal_body?.offsetWidth / imgWidth;
|
|
})
|
|
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.setImgSize()
|
|
}else if(this.designShowPrview == 2){
|
|
let magnifyingGlass:any = this.$refs.magnifyingGlass
|
|
// magnifyingGlass.showGlass = true
|
|
magnifyingGlass.imageUrl = this.designItemDetailUrl
|
|
|
|
}
|
|
// this.others = designItemDetail.others
|
|
|
|
// if(this.generateHighDesignImg){
|
|
// this.designShowPrview = 3
|
|
// }else{
|
|
// this.designShowPrview = 2
|
|
// }
|
|
},
|
|
deleteNav(num:number){
|
|
if(num == 0){
|
|
this.deleteShow = true
|
|
this.designItemDetail.clothes.forEach((item:any)=>{
|
|
item.clothesOpen = false
|
|
})
|
|
this.designOrder = false
|
|
|
|
}else{
|
|
this.deleteShow = false
|
|
|
|
let designItemDetail = JSON.parse(JSON.stringify(this.designItemDetail))
|
|
|
|
let data:any = this.setSubmitItem('preview',true)
|
|
if(!this.deleteItemShow){
|
|
return
|
|
}
|
|
this.loadingShow = true
|
|
Https.axiosPost(Https.httpUrls.designSingle, data).then(
|
|
(rv) => {
|
|
this.designItemDetail.currentFullBodyView = rv.currentFullBodyView
|
|
this.designItemDetail.ifSubmit = true
|
|
this.loadingShow = false
|
|
// if(this.designItemDetail.clothes[this.designItemDetail.clothes.legnth-1] && !this.designItemDetail.clothes[this.designItemDetail.clothes.legnth-1].id){
|
|
// this.designItemDetail.clothes.split(this.designItemDetail.clothes.legnth-1,1)
|
|
// }
|
|
if(data.designSingleItemDTOList[data.designSingleItemDTOList.legnth-1] && !data.designSingleItemDTOList[data.designSingleItemDTOList.legnth-1].id){
|
|
data.designSingleItemDTOList.split(data.designSingleItemDTOList.legnth-1,1)
|
|
}
|
|
this.store.commit("setDesignItemDetail", designItemDetail);
|
|
console.log(123);
|
|
this.store.commit("setDesignPreviewData", data);
|
|
this.setRevocation(designItemDetail,data)
|
|
this.deleteItemShow = false
|
|
}
|
|
).catch(res=>{
|
|
this.loadingShow = false
|
|
});
|
|
}
|
|
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
|
|
DesignDetailAlter.changePlace()
|
|
DesignDetailAlter.terminate()
|
|
},
|
|
setDelete(num:number){
|
|
this.designItemDetail.clothes.splice(num,1)
|
|
this.deleteItemShow = true
|
|
},
|
|
//图片按下样子
|
|
mousedownDesignImg(){
|
|
this.imgDesignImg = false
|
|
},
|
|
//图片抬起样子
|
|
mouseupDesignImg(){
|
|
this.imgDesignImg = true
|
|
},
|
|
clothesOpen(index:any){
|
|
if(this.deleteShow) return
|
|
this.clothesDetail('',index)
|
|
this.clothesOpenActive(index)
|
|
},
|
|
clothesOpenActive(index:any){
|
|
this.designItemDetail.clothes.forEach((item:any)=>{
|
|
item.clothesOpen = false
|
|
})
|
|
this.designItemDetail.clothes[index].clothesOpen = true
|
|
},
|
|
setClothesOpen(){
|
|
if(this.deleteShow) return
|
|
// if(this.designItemDetail?.clothes.length==0){
|
|
// }else{
|
|
// return
|
|
// }
|
|
this.designItemDetail.clothes.forEach((item:any)=>{
|
|
item.clothesOpen = false
|
|
})
|
|
let color,gradient
|
|
if(this.designItemDetail.clothes[0]){
|
|
color = this.designItemDetail.clothes[0].color
|
|
gradient = this.designItemDetail.clothes[0].gradient
|
|
}else{
|
|
color = {
|
|
"id": '',
|
|
"name": "Brilliant White New",
|
|
"tcx": "11-1123",
|
|
"r": 255,
|
|
"g": 255,
|
|
"b": 255,
|
|
"h": 0,
|
|
"s": 0,
|
|
"v": 100
|
|
}
|
|
}
|
|
let aa = {
|
|
"id": '',
|
|
"type": "",
|
|
"level1Type": null,
|
|
"path": "",
|
|
"minIOPath": "",
|
|
"color": color,
|
|
gradient:gradient,
|
|
priority:10,
|
|
"printObject": {
|
|
"ifSingle": null,
|
|
"prints": [
|
|
{}
|
|
]
|
|
},
|
|
"layersObject": [
|
|
]
|
|
}
|
|
// this.designOrder = true
|
|
// let DesignDetailAlter:any = this.$refs.DesignDetailAlter
|
|
// DesignDetailAlter.changePlace()
|
|
this.designOrder = true
|
|
if(this.designItemDetail.clothes?.[this.designItemDetail?.clothes.length-1]?.id || this.designItemDetail.clothes?.length == 0){
|
|
this.designItemDetail.clothes.push(aa)
|
|
}else{
|
|
return
|
|
}
|
|
this.clothesDetail(aa,this.designItemDetail.clothes.length-1)
|
|
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
|
|
DesignDetailAlter.init(1)
|
|
// if(this.designItemDetail.clothes?.[this.designItemDetail.clothes.length-1]?.id){
|
|
// // this.current = aa
|
|
// // this.designOrder = true
|
|
// // let DesignDetailAlter:any = this.$refs.DesignDetailAlter
|
|
// // DesignDetailAlter.changePlace()
|
|
// }else{
|
|
// this.designItemDetail.clothes.push(aa)
|
|
// this.clothesDetail(aa,this.designItemDetail.clothes.length-1)
|
|
// let DesignDetailAlter:any = this.$refs.DesignDetailAlter
|
|
// DesignDetailAlter.init(1)
|
|
// }
|
|
|
|
},
|
|
//元素替换
|
|
clothesDetail(clothes:any, index:number){
|
|
|
|
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
|
|
|
this.designOrder = true
|
|
if(clothes){
|
|
this.current = clothes
|
|
}else{
|
|
this.current = designItemDetail.clothes[index]
|
|
}
|
|
if(!this.current) return
|
|
if(this.current?.id && !designItemDetail?.clothes[designItemDetail.clothes.length-1].id){
|
|
designItemDetail.clothes.splice(designItemDetail.clothes.length-1,1)
|
|
this.store.commit('setDesignItemDetail',designItemDetail)
|
|
}
|
|
let data:any = this.setSubmitItem('preview',false)
|
|
this.currentIndex = index?index:0
|
|
if(this.current?.printObject?.prints[0]?.minIOPath){
|
|
this.current?.printObject?.prints.forEach((element:any) => {
|
|
if(!element.designType){
|
|
element.designType = 'Library'
|
|
}
|
|
});
|
|
}
|
|
this.currentIndex = this.currentIndex>0?this.currentIndex:0
|
|
data.designSingleItemDTOList[this.currentIndex] = {
|
|
color:`${this.current.color.r} ${this.current.color.g} ${this.current.color.b}`,
|
|
|
|
id:this.current.id?this.current.id:'',
|
|
changed:this.current.changed?this.current.changed:false,
|
|
designType:this.current.designType?this.current.designType:'Library',
|
|
path:this.current.minIOPath?this.current.minIOPath:'',
|
|
offset:this.current.layersObject?.[1]?.offset?this.current.layersObject[1].offset:[0,0],
|
|
priority:this.current.priority,
|
|
scale:this.current.layersObject?.[1]?.scale?this.current.layersObject[1].scale:[1,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,
|
|
}
|
|
// if(clothes && !clothes.id){
|
|
// data.designSingleItemDTOList.push(clothes)
|
|
// }
|
|
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.closefModal('')
|
|
// 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: calc(1rem*1.2);
|
|
// overflow: hidden;
|
|
.ant-modal-header{
|
|
background-color: #fff;
|
|
border-bottom: none;
|
|
}
|
|
.ant-modal-body{
|
|
padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
|
|
// height: calc(65vh - 6.4rem*1.2));
|
|
height: calc(65rem*1.2);
|
|
display: flex;
|
|
overflow-y: hidden;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
.ant-modal-close{
|
|
width: calc(3.6rem*1.2);
|
|
height: calc(3.6rem*1.2);
|
|
position: absolute;
|
|
top: calc(-1.8rem*1.2);
|
|
right: calc(-1.8rem*1.2);
|
|
}
|
|
|
|
.ant-modal-header{
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
.turn_button{
|
|
width: calc(3.6rem*1.2);
|
|
height: calc(3.6rem*1.2);
|
|
background: #000000;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: calc(50% - calc(1.8rem*1.2));
|
|
cursor: pointer;
|
|
line-height: calc(3.6rem*1.2);
|
|
text-align: center;
|
|
|
|
&.turn_left_button{
|
|
left: calc(-8rem*1.2);
|
|
}
|
|
|
|
&.turn_right_button{
|
|
right: calc(-8rem*1.2);
|
|
}
|
|
|
|
.icon_turn{
|
|
font-size: calc(2.4rem*1.2);
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.design_detail_modal_body{
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
// padding: 1.5rem*1.2) 1rem*1.2) 2.5rem*1.2);
|
|
box-sizing: border-box;
|
|
.detail_modal_body_img{
|
|
overflow: hidden;
|
|
// width: 43.3rem*1.2);
|
|
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_Set{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: calc(3.4rem*1.2);
|
|
}
|
|
.detail_modal_body_nav{
|
|
display: flex;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
z-index: 999;
|
|
transform: translate(-50%,-120%);
|
|
transition: all .3s;
|
|
>div{
|
|
width: calc(4rem*1.2);
|
|
height: calc(4rem*1.2);
|
|
cursor: pointer;
|
|
text-align: center;
|
|
margin-left: calc(.3rem*1.2);
|
|
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-left: calc(0rem*1.2);
|
|
}
|
|
}
|
|
.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%;
|
|
max-width: 100%;
|
|
object-fit: contain;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
&.active{
|
|
width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
.detail_modal_item_front,.detail_modal_item_back{
|
|
cursor: pointer;
|
|
position: absolute;
|
|
img{
|
|
// width: 100%;
|
|
max-height: 100%;
|
|
|
|
}
|
|
&.active{
|
|
top: 50%;
|
|
left: 50%;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
|
|
transform: translate(-50%,-50%);
|
|
img{
|
|
max-width: 100%;
|
|
width: auto;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
.detail_modal_item_back{
|
|
z-index: 1 !important;
|
|
}
|
|
.detail_modal_item_front{
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
}
|
|
.subitOkPreviewBtn{
|
|
bottom: calc(2rem*1.2);
|
|
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: calc(3rem*1.2);
|
|
transform: translateX(-120%);
|
|
}
|
|
&.fi-rr-trash{
|
|
left: 0;
|
|
top: calc(6rem*1.2);
|
|
transform: translateX(-120%);
|
|
}
|
|
&.fi-br-check{
|
|
left: 0;
|
|
top: calc(6rem*1.2);
|
|
transform: translateX(-120%);
|
|
}
|
|
&.fi-rr-copy{
|
|
top: 0;
|
|
right: 0;
|
|
transform: translateX(120%);
|
|
}
|
|
&.icon-fanchehui{
|
|
top: calc(6rem*1.2);
|
|
right: 0;
|
|
transform: translateX(120%);
|
|
}
|
|
&.icon-chehui{
|
|
top: calc(3rem*1.2);
|
|
right: 0;
|
|
transform: translateX(120%);
|
|
}
|
|
}
|
|
i:hover{
|
|
|
|
}
|
|
}
|
|
&.detail_modal_body_img:hover{
|
|
.detail_modal_body{
|
|
.detail_modal_body_nav{
|
|
transform: translate(-50%,0%);
|
|
>div{
|
|
position: relative;
|
|
.fi{
|
|
color: #fff;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #00000033;
|
|
left: 0;
|
|
top: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
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;
|
|
.hideCursor{
|
|
*{
|
|
cursor: not-allowed !important;
|
|
}
|
|
}
|
|
.clothes_detail_item{
|
|
// margin-bottom: 5rem*1.2);
|
|
position: relative;
|
|
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*1.2);
|
|
margin-bottom: calc(1rem*1.2);
|
|
display: flex;
|
|
font-size: var(--aida-fsize1-8);
|
|
color: #000000;
|
|
justify-content: space-between;
|
|
.icon-dangqianweizhi{
|
|
font-size: calc(1.8rem*1.2);
|
|
color: #000000;
|
|
margin-right: calc(1rem*1.2);
|
|
}
|
|
i{
|
|
font-size: var(--aida-fsize1-8);
|
|
display: flex;
|
|
align-items: center;
|
|
&.fi-rr-edit{
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
.clothes_item_icon{
|
|
top: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
img{
|
|
width: calc(10rem*1.2);
|
|
height: calc(10rem*1.2);
|
|
}
|
|
&.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: calc(8rem*1.2);
|
|
height: calc(4rem*1.2);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.color_content_body{
|
|
.color_des{
|
|
font-size: calc(1.2rem*1.2);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
width: calc(8rem*1.2);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
&:nth-child(4n){
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
&.clothes_detail_item_print,
|
|
&.clothes_detail_item_apparel{
|
|
.fi-rr-picture{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.4*3rem;
|
|
margin: calc(1rem*1.2) 0;
|
|
}
|
|
}
|
|
&.subitOkPreviewBtn{
|
|
position: relative;
|
|
margin-top: calc(2rem*1.2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.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*1.2);
|
|
height: calc(4rem*1.2);
|
|
background: #fff;
|
|
border-radius: calc(0.8rem*1.2);
|
|
line-height: calc(4rem*1.2);
|
|
font-size: var(--aida-fsize1-8);
|
|
// margin-right: 2.2rem*1.2);
|
|
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: calc(.4rem*1.2);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: calc(.6rem*1.2);
|
|
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: calc(1.8rem*1.2);
|
|
margin-right: calc(0.8rem*1.2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.design_detail_perview{
|
|
width: 100%;
|
|
height: 100%;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
&.design_detail_perview_second{
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: calc(0.7rem*1.2) calc(9.1rem*1.2) calc(0.6rem*1.2);
|
|
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: calc(-20.2rem*1.2);
|
|
padding: 0 calc(1.5rem*1.2);
|
|
text-align: center;
|
|
height: calc(3.6rem*1.2);
|
|
line-height: calc(3.6rem*1.2);
|
|
background: #343579;
|
|
font-size: calc(1.4rem*1.2);
|
|
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:calc(3.6rem*1.2);
|
|
height: calc(3.6rem*1.2);
|
|
background: rgba(0,0,0,0.6);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
right: calc(2.2rem*1.2);
|
|
text-align: center;
|
|
line-height: calc(3.6rem*1.2);
|
|
cursor: pointer;
|
|
|
|
&.delete_img_block{
|
|
top: calc(2rem*1.2);
|
|
}
|
|
|
|
.operate_icon{
|
|
font-size: calc(1.8rem*1.2);
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
</style>
|
|
<style lang="less">
|
|
.design_detail_modal_component{
|
|
.mark_loading{
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
</style> |