aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

commit

Browse Source
This commit is contained in:
X1627315083
2023-10-11 17:34:14 +08:00
parent 98dc5cd8f7
commit 268ffecff7
35 changed files with 1947 additions and 878 deletions
Download Patch File Download Diff File Expand all files Collapse all files

345
src/component/Detail/DesignDetail.vue
View File

@@ -29,26 +29,23 @@
<!-- <img class="detial_img" :src="designItemDetail.designItemUrl"> -->
<div v-show="imgDesignImg" class="detail_modal_body">
<div class="detail_modal_item_back" v-for="item,index in frontBack.back" :style="item.style">
<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 src="../../../public/123123132.png" alt=""> -->
<img class="detail_modal_model" :src="frontBack.body?.layersObject[0]?.imageUrl" alt="">
<div class="detail_modal_item_front" v-for="item,index in frontBack.front" :style="item.style" @click.stop="clothesDetail(item,index)">
<div class="detail_modal_item_front" :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 class="detail_modal_item" v-for="item,index in designItemDetail.clothes" :style="'top:'+ item.layersObject[0]?.position[0]+'px;left:'+ item.layersObject[0]?.position[1]+'px;'" :key="item">
<div class="clothes_item_img_block" @click="clothesDetail(item,index)">
<img v-for="v,i in item.layersObject" class="clothes_item_img" :src="v.imageUrl">
</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="designItemDetail.designItemUrl">
<div>
<div class="detail_btn">
<!-- 全屏 -->
<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></i>
<!-- 编辑 -->
<i class="fi fi-rr-edit" @click="showDesignImgDetail(3)"></i>
<i v-show="!body" class="fi fi-rr-edit" @click="showDesignImgDetail(3)"></i>
<!-- 层 -->
<i class="fi fi-rr-copy" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg"></i>
</div>
@@ -61,7 +58,7 @@
<div>Current Apparel</div>
<i class="fi fi-rr-edit" @click.stop="openCurrent(1)"></i>
</div>
<img :src="designItemDetail?.clothes?.[currentIndex]?.layersObject[1]?.imageUrl" alt="" class="centent" @click="openCurrent(1)">
<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">
@@ -69,8 +66,8 @@
<div>Current Print</div>
<i class="fi fi-rr-edit" @click.stop="openCurrent(2)"></i>
</div>
<div class="centent_div" v-if="designItemDetail?.clothes?.[currentIndex]?.printObject?.path && designItemDetail?.clothes?.[currentIndex]?.printObject?.path != 'none'" @click="openCurrent(2)">
<img :src="designItemDetail?.clothes?.[currentIndex]?.printObject?.path" alt="">
<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>
@@ -100,14 +97,14 @@
</div>
<div class="design_detail_perview" v-show="designShowPrview == 2">
<div class="design_detail_perview_content" >
<img class="perview_img" v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
<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 ref="setDesignItem" :frontBack="frontBack"></setDesignItem>
<setDesignItem ref="setDesignItem" @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItem>
</div>
</div>
@@ -130,6 +127,8 @@ import Draggable from 'vuedraggable'
import { Https } from "@/tool/https";
import {getUploadUrl,isMoible} from '@/tool/util'
import { useStore } from "vuex";
import GO from '@/tool/GO';
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
export default defineComponent({
components:{
ElementReplace,
@@ -161,6 +160,11 @@ export default defineComponent({
let current:any = ref({})//点击上衣或者下衣
provide('current',current)
let frontBack:any = ref({})
let body = ref(false)
let designItemId = ref()
let designOutfitId = ref()
let userInfo:any = {}
return{
designItemDetail,
store,
@@ -169,6 +173,10 @@ export default defineComponent({
currentIndex,
current,
frontBack,
body,
designItemId,
designOutfitId,
userInfo
}
},
data(){
@@ -184,8 +192,14 @@ export default defineComponent({
watch:{
designItemDetail:{
handler: function(newval) {
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
this.current = JSON.parse(JSON.stringify(designItemDetail.clothes[this.currentIndex]))
this.current = JSON.parse(JSON.stringify(designItemDetail?.clothes?.[this.currentIndex]))
if(designItemDetail.others[0].layersObject.length != 0){
this.body = false
}else{
this.body = true
}
this.setImgSize()
}
},
@@ -195,23 +209,42 @@ export default defineComponent({
},
},
mounted(){
let url = Https.httpUrls.getDesignDetail + `?designItemId=33683&designPythonOutfitId=33445`
this.loadingShow = true
Https.axiosGet(url).then(
async (rv: any) => {
this.store.commit('setDesignItemDetail',rv)
this.setImgSize()
this.generateHighDesignImg = rv.highDesignUrl
this.designShowPrview = 1
this.designDetailShow = true
this.loadingShow = false
}
).catch(rv=>{
this.loadingShow = false
})
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 designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.init(num)
if(num ==2 ){
@@ -230,20 +263,41 @@ export default defineComponent({
}
},
showDesignDetailModal(data:any){
showDesignDetailModal(data:any,str:string){
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(
(rv: any) => {
this.store.commit('setDesignItemDetail',rv)
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].layersObject.length != 0){
this.body = false
}else{
this.body = true
}
if(str == 'setDesignItem'){
}else{
this.designShowPrview = 1
}
this.setImgSize()
this.generateHighDesignImg = rv.highDesignUrl
this.designShowPrview = 1
this.designDetailShow = true
this.loadingShow = false
}
).catch(rv=>{
this.loadingShow = false
@@ -254,93 +308,147 @@ export default defineComponent({
let front:any = []
let back:any = []
let body:any
designItemDetail.others.forEach((item:any) => {
if(item.type == 'Body'){
body = item
}
});
let ratio:any = await this.setPostition(body.layersObject[0].imageUrl)
designItemDetail.clothes.forEach((v:any,index:number)=>{
let zIndex = 3
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
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)=>{
if(v.layersObject[i].imageCategory.indexOf("back") == -1){
front[index] = v.layersObject[i]
}else{
back[index] = v.layersObject[i]
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++
}
}
})
let bodyImgWH = document.getElementsByClassName("design_compile_content")[0].getElementsByClassName("perview_img")[0]
body.style = {
width:body.layersObject[0].imageSize?.[0]*ratio+'px',
height:body.layersObject[0].imageSize?.[1]*ratio+'px',
}
// v.layersObject.forEach((item:any)=>{
// item.style = {
// top:item.position?.[0]*ratio+'px',
// left:item.position?.[1]*ratio+'px',
// width:item.imageSize?.[0]*ratio+'px',
// height:item.imageSize?.[1]*ratio+'px',
// zIndex:zIndex+=1
// }
// console.log(zIndex);
// if(item.imageCategory == 'blouse_back'){
// back[index] = item
// }else{
// front[index] = item
// }
// })
})
}
this.frontBack = {
front:front,
back:back,
body:body,
}
},
submit(){
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)
},
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.path,
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,
path:item.printObject.path?item.printObject.path :'',
prints:item.printObject.prints?item.printObject.prints:[]
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,
processId:String(this.userInfo?.userId),
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
if(str == 'preview'){
data.isPreview = true
}else{
data.isPreview = false
}
return data
},
setSubmit(str:any){
let setDesignItem:any = this.$refs.setDesignItem
let data = this.setSubmitItem(str)
setDesignItem.setPreview(data)
},
async submit(){
let data = this.setSubmitItem('')
this.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv: any) => {
this.loadingShow = false
this.closeModal()
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)
}
).catch(res=>{
this.loadingShow = false
@@ -392,7 +500,7 @@ export default defineComponent({
index:newIndex,
collectionList:collectionList
}
this.showDesignDetailModal(data)
this.showDesignDetailModal(data,'')
},
//显示图片详情
@@ -427,27 +535,25 @@ export default defineComponent({
this.currentIndex = index
this.designOrder = true
this.current = designItemDetail.clothes[this.currentIndex]
console.log(this.current);
let data = {
designItemId:designItemDetail.designItemId,
// designItemId:designItemDetail.designItemId,
designSingleItemDTOList:[
{
color:`${this.current.color.r} ${this.current.color.g} ${this.current.color.b}`,
id:this.current.id,
path:this.current.path?this.current.path:'',
printObject:{
ifSingle:this.current.printObject.ifSingle,
prints:[{
path:this.current.printObject.path?this.current.printObject.path :'',
}],
},
type:this.current.type,
}
],
isPreview:true,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
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
@@ -472,7 +578,6 @@ export default defineComponent({
this.$emit('finishRedesign',this.parentData)
this.closeModal()
this.loadingShow = false
this.closeModal()
}
).catch(res=>{
this.loadingShow = false
@@ -488,7 +593,7 @@ export default defineComponent({
<style lang="less">
.design_detail_modal_component{
color: #000;
max-width: 1440px ;
// max-width: 1440px ;
.ant-modal-content{
@@ -571,8 +676,8 @@ export default defineComponent({
// height: 50%;
.detail_modal_body{
position: relative;
max-width: 245px;
// max-width: 245px;
width: 100%;
.detail_modal_item_front:last-child{
z-index: 1 !important;
}
@@ -589,9 +694,14 @@ export default defineComponent({
img{
width: 100%;
}
&.active{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
}
.detail_modal_item_back{
z-index: 1 !important;
}
.detail_modal_item_front{
@@ -604,6 +714,12 @@ export default defineComponent({
max-width: 100%;
max-height: 100%;
}
.detail_btn{
z-index: 9999;
}
.detial_img1{
position: absolute;
}
div{
i{
position: absolute;
@@ -638,6 +754,7 @@ export default defineComponent({
.clothes_detail_item{
.centent_div{
display: flex;
cursor: pointer;
justify-content: center;
}
.centent{
@@ -693,6 +810,10 @@ export default defineComponent({
.color_des{
font-size: 1.2rem;
font-weight: 600;
white-space: nowrap;
width: 8rem;
overflow: hidden;
text-overflow: ellipsis;
}
}
&:nth-child(4n){
@@ -774,7 +895,8 @@ export default defineComponent({
.design_detail_perview{
width: 100%;
height: 100%;
flex: 1;
overflow: hidden;
&.design_detail_perview_second{
width: 100%;
height: 100%;
@@ -785,7 +907,6 @@ export default defineComponent({
}
.design_detail_perview_content{
width: 46.2rem;
height: 100%;
background: #fff;
position: relative;
@@ -807,7 +928,7 @@ export default defineComponent({
height: 3.6rem;
line-height: 3.6rem;
background: #343579;
font-size: 14px;
font-size: 1.4rem;
font-family: Roboto;
color: #FFFFFF;
cursor: pointer;