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:
WangXiaoDong
2023-09-25 10:09:00 +08:00
parent 173f35042d
commit d9868d5cf0
37 changed files with 1618 additions and 1146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,7 @@
<a-modal class="design_detail_modal_component"
v-model:visible="designDetailShow"
:footer="null"
width="80%"
width="65%"
:maskClosable="false"
:centered="true"
:closable="false"
@@ -27,18 +27,28 @@
<div class="detail_modal_body_img">
<!-- <img class="detial_img" :src="designItemDetail.designItemUrl"> -->
<div v-for="item,index in designItemDetail.clothes" :key="item">
<div class="clothes_item_img_block" @click="clothesDetail(item,index)">
<img class="clothes_item_img" :src="item.path">
<div v-show="imgDesignImg" class="detail_modal_body">
<div class="detail_modal_item_back" 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)">
<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>
<img v-show="imgDesignImg" class="detial_img" :src="designItemDetail.designItemUrl">
<img v-show="!imgDesignImg" class="detial_img" :src="designItemDetail.designItemUrl">
<div>
<!-- 全屏 -->
<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></i>
<!-- 编辑 -->
<i class="fi fi-rr-edit" @click="showDesignImgDetail(3)"></i>
<!-- <i class="fi fi-rr-edit" @click="showDesignImgDetail(3)"></i> -->
<!-- 层 -->
<i class="fi fi-rr-copy" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg"></i>
</div>
@@ -49,18 +59,18 @@
<div class="clothes_item_header">
<i class="fi fi-rs-comments"></i>
<div>Current Apparel</div>
<i class="fi fi-rr-edit"></i>
<i class="fi fi-rr-edit" @click.stop="openCurrent(1)"></i>
</div>
<img :src="currentItem.path" alt="" class="centent" @click="openCurrent(1)">
<img :src="designItemDetail?.clothes?.[currentIndex]?.layersObject[1]?.imageUrl" 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>Current Print</div>
<i class="fi fi-rr-edit"></i>
<i class="fi fi-rr-edit" @click.stop="openCurrent(2)"></i>
</div>
<div class="centent_div" v-if="currentItem?.printObject?.path && currentItem?.printObject?.path != 'none'" @click="openCurrent(2)">
<img src="" alt="">
<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>
<i v-else class="fi fi-rr-picture centent" @click="openCurrent(2)"></i>
</div>
@@ -68,19 +78,19 @@
<div class="clothes_item_header">
<i class="fi fi-rs-comments"></i>
<div>Current Print</div>
<i class="fi fi-rr-edit"></i>
<i class="fi fi-rr-edit" @click.stop="openCurrent(3)"></i>
</div>
<div class="img_block_item centent" @click="openCurrent(3)">
<div class="img_block_item centent" @click.stop="openCurrent(3)">
<div class="color_item">
<div class="color_content" :style="{background:`rgba(${currentItem.color?.r},${currentItem.color?.g},${currentItem.color?.b},${currentItem.color?.a?currentItem.color.a:1})`}"></div>
<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">{{currentItem.color?.tcx}}</div>
<div class="color_des">{{currentItem.color?.name}}</div>
<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 class="clothes_detail_item subitOkPreviewBtn">
<div class="clothes_detail_item subitOkPreviewBtn" @click="submit">
Submit
</div>
</div>
@@ -130,7 +140,10 @@ export default defineComponent({
},
setup() {
const store = useStore();
let designItemDetail :any = computed(()=>{
// let designItemDetail :any = computed(()=>{
// return store.state.DesignDetailModule.designItemDetail
// })
let designItemDetail :any = computed(()=>{
return store.state.DesignDetailModule.designItemDetail
})
let parentData:any = ref({
@@ -144,35 +157,50 @@ export default defineComponent({
left:200+'px',
top:100+'px',
})
let currentItem:any = ref({})//点击上衣或者下衣
let currentIndex:any = ref(0)
let current:any = ref({})//点击上衣或者下衣
provide('current',current)
let frontBack:any = ref({})
return{
designItemDetail,
store,
parentData,
others,
currentItem,
currentIndex,
current,
frontBack,
}
},
data(){
return{
loadingShow:false,//加载中
designDetailShow:true,
designDetailShow:false,
designShowPrview:1, //展示图片预览步骤
generateHighDesignImg:'',//点击generate按钮生成的高级设计图
imgDesignImg:true,
designOrder:false,
}
},
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.setImgSize()
}
},
currentIndex:{
handler: function(newval) {
}
},
},
mounted(){
let url = Https.httpUrls.getDesignDetail + `?designItemId=33130&designPythonOutfitId=32929`
let url = Https.httpUrls.getDesignDetail + `?designItemId=33683&designPythonOutfitId=33445`
this.loadingShow = true
Https.axiosGet(url).then(
(rv: any) => {
async (rv: any) => {
this.store.commit('setDesignItemDetail',rv)
console.log(rv);
this.setImgSize()
this.generateHighDesignImg = rv.highDesignUrl
this.designShowPrview = 1
this.designDetailShow = true
@@ -194,7 +222,6 @@ export default defineComponent({
if(this.designShowPrview == 1){
this.designDetailShow = false
this.designOrder = false
this.currentItem = {}
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.terminate()
@@ -204,27 +231,148 @@ export default defineComponent({
},
showDesignDetailModal(data:any){
let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}`
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)
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
})
},
async setImgSize(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
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(v.layersObject[i].imageCategory.indexOf("back") == -1){
front[index] = v.layersObject[i]
}else{
back[index] = v.layersObject[i]
}
}
// 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(){
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,
printObject:{
ifSingle:item.printObject.ifSingle,
path:item.printObject.path?item.printObject.path :'',
prints:item.printObject.prints?item.printObject.prints:[]
},
type:item.type,
}
clothes.push(clothesItem)
});
let data = {
designItemId:designItemDetail.designItemId,
// designItemId:designItemDetail.designItemId,
designSingleItemDTOList:clothes,
isPreview:false,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv: any) => {
this.loadingShow = false
this.closeModal()
let designCollectionList = this.store.state.HomeStoreModule.designCollectionList
designCollectionList.forEach((item:any) => {
if(item.designItemId == rv.designItemId){
item.designOutfitUrl = rv.designItemUrl
}
});
this.store.commit('setDesignCollectionList',designCollectionList)
}
).catch(res=>{
this.loadingShow = false
});
},
//按比设置单件衣服宽高位置
async setPostition(url:any){
let img:any = await loadImage(url)
let modal_body = <HTMLImageElement>document.getElementsByClassName('detail_modal_body')[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
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.terminate()
if(type === 'last'){
if(index>0){
newIndex = this.parentData.index - 1
@@ -250,11 +398,8 @@ export default defineComponent({
//显示图片详情
showDesignImgDetail(num:any){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
console.log(designItemDetail);
this.designShowPrview = num
let setDesignItem:any = this.$refs.setDesignItem
console.log(setDesignItem);
if(this.designShowPrview == 3){
setDesignItem.init()
@@ -278,21 +423,32 @@ export default defineComponent({
//元素替换
clothesDetail(clothes:any, index:number){
if(this.currentItem?.id == clothes.id){
return
}
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
this.currentIndex = index
this.designOrder = true
this.current = JSON.parse(JSON.stringify(clothes))
this.currentItem = clothes
this.current = designItemDetail.clothes[this.currentIndex]
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,
path:this.current.printObject.path?this.current.printObject.path :'',
prints:[],
},
type:this.current.type,
}
],
isPreview:true,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.store.commit('setDesignPreviewData',data)
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.changePlace()
// let elementReplace:any = this.$refs.ElementReplace
// let data ={
// clothes:clothes,
// index:index,
// }
// elementReplace.showelementReplaceModal(data)
},
//重新设计
redesignItem(){
@@ -409,11 +565,37 @@ export default defineComponent({
position: relative;
flex-direction: column;
>div{
height: 50%;
.clothes_item_img_block{
display: flex;
// height: 50%;
.detail_modal_body{
position: relative;
max-width: 245px;
.detail_modal_item_front:last-child{
z-index: 1 !important;
}
>img{
width: 100%;
}
.detail_modal_model{
position: relative;
z-index: 1;
}
.detail_modal_item_front,.detail_modal_item_back{
cursor: pointer;
position: absolute;
img{
width: 100%;
}
}
.detail_modal_item_back{
}
.detail_modal_item_front{
}
}
.clothes_item_img_block{
display: flex;
}
.detial_img{
max-width: 100%;
@@ -453,7 +635,7 @@ export default defineComponent({
.clothes_detail_item{
.centent_div{
display: flex;
justify-content: space-between;
justify-content: center;
}
.centent{
cursor: pointer;
@@ -478,6 +660,9 @@ export default defineComponent({
i{
font-size: 1.8rem;
display: block;
&.fi-rr-edit{
cursor: pointer;
}
}
}
img{