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

09-12

Browse Source
This commit is contained in:
WangXiaoDong
2023-09-12 10:11:27 +08:00
parent 3440f2f868
commit 173f35042d
71 changed files with 4291 additions and 1865 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,16 +4,11 @@
<a-modal class="design_detail_modal_component"
v-model:visible="designDetailShow"
:footer="null"
title="Mailbox binding"
width="80%"
:maskClosable="false"
:centered="true"
:closable="false"
>
<!-- <template #closeIcon>
<div class="close_icon" @click.stop="closeModal()"><span class="icon iconfont icon-guanbi"></span></div>
</template> -->
<div class="design_title_text">
<div>Details</div>
<div class="design_title_text_intro">edit the details of your design</div>
@@ -30,27 +25,33 @@
<div class="design_detail_modal_body" v-show="designShowPrview == 1">
<div class="detail_modal_body_img" @click="showDesignImgDetail()">
<div class="detail_modal_body_img">
<!-- <img class="detial_img" :src="designItemDetail.designItemUrl"> -->
<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>
</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"></i>
<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></i>
<!-- 编辑 -->
<i class="fi fi-rr-edit"></i>
<i class="fi fi-rr-edit" @click="showDesignImgDetail(3)"></i>
<!-- 层 -->
<i class="fi fi-rr-copy"></i>
<i class="fi fi-rr-copy" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg"></i>
</div>
</div>
<div class="detail_modal_body_category">
<div class="detail_modal_right_top scroll_style">
<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>Current Apparel</div>
<i class="fi fi-rr-edit"></i>
</div>
<img src="" alt="" class="centent" @click="openCurrent(1)">
<img :src="currentItem.path" alt="" class="centent" @click="openCurrent(1)">
</div>
<div class="clothes_detail_item clothes_detail_item_print">
<div class="clothes_item_header">
@@ -58,7 +59,10 @@
<div>Current Print</div>
<i class="fi fi-rr-edit"></i>
</div>
<i class="fi fi-rr-picture centent" @click="openCurrent(2)"></i>
<div class="centent_div" v-if="currentItem?.printObject?.path && currentItem?.printObject?.path != 'none'" @click="openCurrent(2)">
<img src="" alt="">
</div>
<i v-else class="fi fi-rr-picture centent" @click="openCurrent(2)"></i>
</div>
<div class="clothes_detail_item clothes_detail_item_color">
<div class="clothes_item_header">
@@ -68,20 +72,17 @@
</div>
<div class="img_block_item centent" @click="openCurrent(3)">
<div class="color_item">
<div class="color_content" :style="{background:`#6c6cac`}"></div>
<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_body">
<div class="color_des">222</div>
<div class="color_des">111</div>
<div class="color_des">{{currentItem.color?.tcx}}</div>
<div class="color_des">{{currentItem.color?.name}}</div>
</div>
</div>
</div>
</div>
</div>
<div class="detail_modal_right_bottom">
<div class="detail_page_num">{{parentData.index + 1}}/{{parentData.collectionList.length}}</div>
<div class="detail_redesign_button" @click="redesignItem()">Redesign</div>
<div class="clothes_detail_item subitOkPreviewBtn">
Submit
</div>
</div>
</div>
<DesignDetailAlter ref="DesignDetailAlter"></DesignDetailAlter>
@@ -93,24 +94,16 @@
<!-- <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"></setDesignItem>
</div>
<div class="design_detail_perview design_detail_perview_second" v-show="designShowPrview == 3">
<div class="design_detail_perview_content" >
<img class="perview_img" v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
</div>
<div class="design_detail_perview_content" >
<img class="perview_img" v-lazy="generateHighDesignImg || ''" :key="generateHighDesignImg">
<div class="img_item_hover">
<div class="img_operate_block delete_img_block" @click.stop="deleteGeneratePic()">
<span class="icon iconfont icon-shanchu operate_icon"></span>
</div>
</div>
</div>
</div>
</a-modal>
<ElementReplace ref="ElementReplace"></ElementReplace>
<AccessoryReplace ref="AccessoryReplace"></AccessoryReplace>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
@@ -118,23 +111,28 @@
</template>
<script lang="ts">
import { defineComponent,computed,ref } from 'vue'
import { defineComponent,computed,ref,provide } from 'vue'
import ElementReplace from '@/component/Detail/ElementReplace.vue'
import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue'
import AccessoryReplace from '@/component/Detail/AccessoryReplaceModal.vue'
import setDesignItem from '@/component/Detail/setDesignItem.vue'
import Draggable from 'vuedraggable'
import { Https } from "@/tool/https";
import {getUploadUrl,isMoible} from '@/tool/util'
import { useStore } from "vuex";
export default defineComponent({
components:{
ElementReplace,
AccessoryReplace,
Draggable,
DesignDetailAlter
DesignDetailAlter,
setDesignItem,
},
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,
@@ -142,44 +140,52 @@ export default defineComponent({
type:'',
})//父组件传过来的数据
let others:any = ref({
left:200+'px',
top:100+'px',
})
let currentItem:any = ref({})//点击上衣或者下衣
let current:any = ref({})//点击上衣或者下衣
provide('current',current)
return{
designItemDetail,
store,
parentData,
others,
currentItem,
current,
}
},
data(){
return{
loadingShow:false,
loadingShow:false,//加载中
designDetailShow:true,
designShowPrview:1, //展示图片预览步骤
generateHighDesignImg:'',//点击generate按钮生成的高级设计图
imgListr:[
{
imgUrl: "https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png",
id: 1,
},
{
imgUrl: "https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png",
id: 2,
},
{
imgUrl: "https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png",
id: 3,
},
{
imgUrl: "https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png",
id: 4,
},
],
imgDesignImg:true,
designOrder:false,
}
},
mounted(){
let url = Https.httpUrls.getDesignDetail + `?designItemId=33130&designPythonOutfitId=32929`
this.loadingShow = true
Https.axiosGet(url).then(
(rv: any) => {
this.store.commit('setDesignItemDetail',rv)
console.log(rv);
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 ){
}
},
@@ -187,9 +193,12 @@ export default defineComponent({
closeModal(){
if(this.designShowPrview == 1){
this.designDetailShow = false
}else if(this.designShowPrview == 2){
this.designShowPrview = this.designShowPrview - 1
}else if(this.designShowPrview == 3){
this.designOrder = false
this.currentItem = {}
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.terminate()
}else{
this.designShowPrview = 1
}
},
@@ -239,71 +248,52 @@ export default defineComponent({
},
//显示图片详情
showDesignImgDetail(){
if(this.generateHighDesignImg){
this.designShowPrview = 3
}else{
this.designShowPrview = 2
}
},
showDesignImgDetail(num:any){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
console.log(designItemDetail);
//生成高级图片
generateHighDesign(){
let design:any = this.parentData.design
let data = {
designItemId: design.designItemId,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.loadingShow = true
Https.axiosPost(Https.httpUrls.generateHighDesign,data).then(
(rv: any) => {
this.generateHighDesignImg = rv
this.loadingShow = false
this.designShowPrview = 3
}
).catch(rv=>{
this.loadingShow = false
})
},
this.designShowPrview = num
let setDesignItem:any = this.$refs.setDesignItem
console.log(setDesignItem);
//删除生成的真人图
deleteGeneratePic(){
let design:any = this.parentData.design
let data = {
designItemId: design.designItemId,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.loadingShow = true
Https.axiosPost(Https.httpUrls.deleteHighDesign,data).then(
(rv: any) => {
this.loadingShow = false
this.generateHighDesignImg = ''
this.designShowPrview = 2
}
).catch(rv=>{
this.loadingShow = false
})
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
},
//元素替换
clothesDetail(clothes:any, index:number){
let elementReplace:any = this.$refs.ElementReplace
let data ={
clothes:clothes,
index:index,
}
elementReplace.showelementReplaceModal(data)
if(this.currentItem?.id == clothes.id){
return
}
this.designOrder = true
this.current = JSON.parse(JSON.stringify(clothes))
this.currentItem = clothes
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.changePlace()
// let elementReplace:any = this.$refs.ElementReplace
// let data ={
// clothes:clothes,
// index:index,
// }
// elementReplace.showelementReplaceModal(data)
},
othersDetail(others:any, index:number){
let accessoryReplace:any = this.$refs.AccessoryReplace
let data ={
others:others,
index:index,
}
accessoryReplace.showAccessoryReplaceModal(data)
},
//重新设计
redesignItem(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
@@ -339,23 +329,12 @@ export default defineComponent({
<style lang="less">
.design_detail_modal_component{
color: #000;
max-width: 1150px ;
.design_title_text{
font-size: 1.8rem;
font-weight: 900;
color: rgba(0,0,0,.65);
align-items: center;
margin-bottom: 2rem;
.design_title_text_intro{
font-size: 1.2rem;
font-weight: 400;
color: rgba(0,0,0,.45);
}
}
max-width: 1440px ;
.ant-modal-content{
border-radius: 10px;
overflow: hidden;
// overflow: hidden;
.ant-modal-header{
background-color: #fff;
border-bottom: none;
@@ -365,6 +344,7 @@ export default defineComponent({
// height: calc(65vh - 6.4rem);
height: 65rem;
display: flex;
overflow-y: hidden;
flex-direction: column;
}
}
@@ -381,28 +361,7 @@ export default defineComponent({
}
.design_closeIcon{
top: 2rem;
right: 2rem;
cursor: pointer;
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
.fi-rr-cross-small::before{
padding: .2rem;
border-radius: 5px;
border: solid 2px rgba(0, 0, 0, 0.25);
transition: 1s all;
color: rgba(0, 0, 0, 0.55);
}
&.collection_closeIcon:hover .fi-rr-cross-small::before{
border: solid 2px rgba(0, 0, 0, 0.55);
color: rgba(0, 0, 0, 1);
}
}
.turn_button{
width: 3.6rem;
@@ -436,6 +395,7 @@ export default defineComponent({
display: flex;
justify-content: space-between;
width: 100%;
overflow: hidden;
// padding: 1.5rem 1rem 2.5rem;
box-sizing: border-box;
.detail_modal_body_img{
@@ -447,6 +407,14 @@ export default defineComponent({
justify-content: center;
align-items: center;
position: relative;
flex-direction: column;
>div{
height: 50%;
.clothes_item_img_block{
display: flex;
}
}
.detial_img{
max-width: 100%;
max-height: 100%;
@@ -454,6 +422,8 @@ export default defineComponent({
div{
i{
position: absolute;
cursor: pointer;
zoom: 1.2;
&.fi-bs-expand-arrows-alt{
top: 0;
left: 0;
@@ -473,14 +443,18 @@ export default defineComponent({
.detail_modal_body_category{
width: 17%;
height: 100%;
position: relative;
.detail_modal_right_top{
width: 100%;
height: calc(100% - 3.9rem);
background: #fff;
overflow-y: auto;
.clothes_detail_item{
.centent_div{
display: flex;
justify-content: space-between;
}
.centent{
cursor: pointer;
@@ -510,13 +484,21 @@ export default defineComponent({
width: 10rem;
height: 10rem;
}
&.clothes_detail_item_apparel{
img{
max-height: 100%;
}
}
.color_item{
display: inline-block;
vertical-align: top;
border: 1px solid #ebe9e9;
.color_content{
width: 6rem;
width: 8rem;
height: 4rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.color_content_body{
.color_des{
@@ -537,35 +519,10 @@ export default defineComponent({
margin: 1rem 0;
}
}
}
}
.detail_modal_right_bottom{
position: relative;
.detail_page_num{
position: absolute;
top: 2rem;
left: 12.4rem;
font-size: 1.8rem;
font-family: Roboto;
font-weight: 400;
color: #000000;
}
.detail_redesign_button{
position: absolute;
top: 1.4rem;
right: 0;
padding: 0 1.8rem;
text-align: center;
height: 3.6rem;
line-height: 3.6rem;
background: #343579;
font-size: 14px;
font-family: Roboto;
color: #FFFFFF;
cursor: pointer;
&.subitOkPreviewBtn{
position: relative;
margin-top: 2rem;
}
}
}
}
@@ -628,7 +585,6 @@ export default defineComponent({
.design_detail_perview{
width: 100%;
height: 100%;
padding: 0.7rem 0 0.6rem;
&.design_detail_perview_second{
width: 100%;