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

detail页面调整

Browse Source
This commit is contained in:
X1627315083
2025-02-17 09:34:28 +08:00
parent 69b6a9512f
commit 2ecff5c060
29 changed files with 2900 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
src/component/DetailCopy/designDetail.vue
View File

@@ -1,5 +1,5 @@
<template>
<div ref="designDetailModal" class="designDetailModal">
<div ref="designDetailModal" class="designDetailModal" v-if="designDetailShow">
<!-- designDetailShow -->
<!-- :class="[driver__.driver?'hideEvents':'']" -->
<a-modal class="Guide_1_18 generalModel fullScreen"
@@ -12,6 +12,7 @@
:mask="false"
:centered="true"
:keyboard="false"
:destroyOnClose="true"
:closable="false"
>
<div class="content">
@@ -22,32 +23,46 @@
</div>
</div>
<div class="nav_list">
<div class="nav_item active">
<div class="nav_item" :class="{active:currentDetailType == 'sketch'}" @click="setCurrentDetail('sketch')">
<img src="@/assets/images/icon/details_sketch.png" alt="">
<div class="detailText">Apparel</div>
</div>
<div class="nav_item">
<div class="nav_item" :class="{active:currentDetailType == 'print'}" @click="setCurrentDetail('print')">
<img src="@/assets/images/icon/details_print.png" alt="">
<div class="detailText">Print</div>
</div>
<div class="nav_item">
<div class="nav_item" :class="{active:currentDetailType == 'color'}" @click="setCurrentDetail('color')">
<img src="@/assets/images/icon/details_color.png" alt="">
<div class="detailText">Color</div>
</div>
<div class="nav_item">
<div class="nav_item" :class="{active:currentDetailType == 'element'}" @click="setCurrentDetail('element')">
<img src="@/assets/images/icon/details_elements.png" alt="">
<div class="detailText">Elements</div>
</div>
</div>
</div>
<div class="item">
<sketchLeft></sketchLeft>
<div class="item detailLeft">
<detailLeft v-if="selectDetail && selectDetail.id && currentDetailType"></detailLeft>
</div>
<div class="item">
<model></model>
<div class="item model">
<model ref="model"></model>
<div>
<div class="gallery_btn" @click="submit">Submit</div>
<div class="gallery_btn" @click="previwe">Preview</div>
</div>
</div>
<div class="item detailRight">
<div class="submit">
</div>
<div class="contentRight" v-if="selectDetail && selectDetail.id && currentDetailType">
<detailRight></detailRight>
</div>
<!-- 画布 -->
<!-- <div class="content" v-else-if="selectDetail && selectDetail.id">
</div> -->
<div class="submit bottom">
</div>
</div>
<div></div>
<div class="gallery_btn submit">Submit</div>
</div>
</a-modal>
@@ -59,8 +74,9 @@
</template>
<script lang="ts">
import { defineComponent,computed,onBeforeUnmount,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
import sketchLeft from './sketchLeft.vue'
import detailLeft from './detailLeft/index.vue'
import model from './model/index.vue'
import detailRight from './detailRight/index.vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
@@ -73,31 +89,33 @@ import { useI18n } from 'vue-i18n'
import addDetails from '@/component/Detail/addDetails.vue'
export default defineComponent({
components:{
sketchLeft,model
detailLeft,model,detailRight
},
setup() {
emits:['destroy'],
setup(props,{emit}) {
const store = useStore();
const detailDom = reactive({
model:null
})
const userDetail = computed(()=>{
return store.state.UserHabit.userDetail
})
const detailData = reactive({
designDetail:store.state.DesignDetailCopy.designDetail,
designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
designDetailShow:false,
loadingShow:false,
})
const closeModal = ()=>{
detailData.designDetailShow = false
emit('destroy')
}
const showDesignDetailModal = (data:any,str:any)=>{
// 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=61204&designPythonOutfitId=60908`
// this.parentData = data
detailData.loadingShow = true
Https.axiosGet(url).then(
async (rv: any) => {
@@ -109,6 +127,14 @@ export default defineComponent({
item.layersObject[0] = item.layersObject[1]
item.layersObject[1] = a
}
item.color.rgba = {
r:item.color.r,
g:item.color.g,
b:item.color.b,
}
if(item.gradient){
item.color.gradient = item.gradient
}
if(item.printObject.prints == null)item.printObject.prints = []
item.printObject.prints.forEach((element:any) => {
if(!element.designType){
@@ -117,7 +143,7 @@ export default defineComponent({
});
})
detailData.designDetailShow = true
store.commit('designDeatailCopy/setDesignDetail',rv)
store.commit('DesignDetailCopy/setDesignDetail',rv)
// this.deleteShow = false
setRevocation(rv,'')
@@ -145,14 +171,114 @@ export default defineComponent({
}
const setRevocation = (designItemDetail:any,data:any)=>{//设置撤销
}
const setCurrentDetail = (str:string)=>{
store.commit('DesignDetailCopy/setCurrentDetailType',str)
}
const setClothes = async (list:any)=>{
let clothesList:any = []
for(let i = 0;i<list.length;i++){
let {scale,offset,priority,maskUrl,maskMinioUrl} = (detailDom.model as any).getSubmitData(list[i])
let gradient = null
let newData = list[i]?.newDetail?.[detailData.currentDetailType]
let isCurrent = list[i].id == detailData?.selectDetail?.id
let data:any = {
changed:false,
color:(newData && detailData.currentDetailType == 'color' && isCurrent)?`${newData.rgba.r} ${newData.rgba.g} ${newData.rgba.b}`:`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`,
designType:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.designType:list[i].designType,
id:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.id:list[i].id,
// maskMinioUrl:'',
// maskUrl:'',
offset,
path:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.minIOPath:list[i].minIOPath,
printObject:list[i].printObject,
priority,
scale,
type:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.level2Type:list[i].type,
sketchString:'',
trims:list[i].trims,
}
if((list[i].color?.gradient || list[i].newDetail?.color?.gradient)){
gradient = list[i].newDetail?.color?.gradient || list[i].color.gradient
gradient.colorImg = await setGradual(gradient,320,700)
data.gradient = gradient
}
clothesList.push(data)
}
return clothesList
}
const getSubmitData = async (str:string)=>{
let workspace = store.state.Workspace.workspace
let clothes:any = await setClothes([detailData.selectDetail])
let data = {
designItemId:detailData.designDetail.designItemId,
designSingleItemDTOList:clothes,
isPreview:true,
// ifSubmit:designItemDetail.isPreview,
gender:workspace?.sex,
sketchString:'',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
processId:userDetail.value.userId,
}
detailData.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then((rv)=>{
store.commit('DesignDetailCopy/setPraeview',rv)
detailData.loadingShow = false
}).catch(res=>{
detailData.loadingShow = false
});
}
const submit = async ()=>{
let workspace = store.state.Workspace.workspace
let clothes:any = await setClothes(detailData.designDetail.clothes)
let data = {
designItemId:detailData.designDetail.designItemId,
designSingleItemDTOList:clothes,
isPreview:false,
// ifSubmit:designItemDetail.isPreview,
gender:workspace?.sex,
sketchString:'',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
processId:userDetail.value.userId,
}
detailData.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then((rv)=>{
// store.commit('DesignDetailCopy/setPraeview',rv)
let designCollectionList = store.state.HomeStoreModule.designCollectionList
let likeDesignCollectionList = 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
}
});
store.commit('setDesignCollectionList',designCollectionList)
store.commit('setLikeDesignCollectionList',likeDesignCollectionList)
closeModal()
detailData.loadingShow = false
}).catch(res=>{
detailData.loadingShow = false
});
}
const previwe = ()=>{
let data = getSubmitData('preview')
store.dispatch('DesignDetailCopy/setSubmit',data)
}
onBeforeUnmount(()=>{
detailData.designDetail = null
store.commit('DesignDetailCopy/clearDesignDetail')
})
return{
...toRefs(detailDom),
...toRefs(detailData),
closeModal,
showDesignDetailModal,
setCurrentDetail,
previwe,
submit,
}
},
provide() {
@@ -204,9 +330,14 @@ export default defineComponent({
font-weight: 600;
}
.designDetailModal{
position: relative;
top: -100%;
position: absolute;
// top: -100%;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
z-index: 2;
:deep(.ant-modal-wrap){
position: absolute;
top: 0;
@@ -219,6 +350,36 @@ export default defineComponent({
width: 100%;
> .item{
height: 100%;
&.detailLeft{
width: 34rem;
}
&.model{
width: 50rem;
margin: 0 10rem;
display: flex;
flex-direction: column;
}
&.detailRight{
flex: 1;
display: flex;
flex-direction: column;
padding-bottom: calc(6rem + 1rem);
overflow: hidden;
> .contentRight{
display: flex;
flex: 1;
overflow: hidden;
}
}
> .submit{
display: flex;
justify-content: flex-end;
margin-bottom: 1rem;
&.bottom{
margin-top: 1rem;
margin-bottom: 0;
}
}
}
> .nav{
margin-right: 5rem;
@@ -258,10 +419,7 @@ export default defineComponent({
}
}
}
> .submit{
margin-left: auto;
}
}
}