2092 lines
61 KiB
Vue
2092 lines
61 KiB
Vue
<template>
|
||
<div class="designPage">
|
||
<div class="page_content">
|
||
|
||
<div class="page_content_body">
|
||
<div class="designPage_body">
|
||
<div class="designPage_left" ref="hidden">
|
||
<div class="designPage_left_content" :class="{'active':(domHidden)}">
|
||
<!-- 有图状态 start-->
|
||
|
||
<div class="home_left_info">
|
||
<div class="left_info_content scroll_style">
|
||
<div class="left_info_content_body" ref="collection_canvas">
|
||
<div class="right_content_header">
|
||
<div class="content_header_left" style="padding-top: 2rem;">
|
||
<i class="fi fi-rs-comments"></i><span class="content_header_des">
|
||
{{ $t('HomeView.elementTitle') }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<NewCollectionReview id="collectionReview" @openCollection="openCollection"></NewCollectionReview>
|
||
</div>
|
||
</div>
|
||
<div v-show="isMannequinShow" class="left_info_hint">
|
||
<span class="icon iconfont icon-zhuyi"></span>
|
||
<span>{{ $t('HomeView.masnnequinHint') }}</span>
|
||
</div>
|
||
</div>
|
||
<!-- 有图状态 end-->
|
||
</div>
|
||
<div class="designPage_left_bottom" @click="setShowHide('domHidden')" >
|
||
<span class="icon iconfont icon-xiala" :class="{'active':domHidden}"></span>
|
||
</div>
|
||
</div>
|
||
<div class="designPage_right">
|
||
<div class="right_top">
|
||
<!-- <div class="right_top" ref="hidden" :class="{'active':domHidden}"> -->
|
||
<div class="right_top_left">
|
||
<div class="gallery_btn white Guide_1_15" @click="designNewCollection()">
|
||
<!-- <div class="gallery_btn white Guide_1_15" @click="designNewCollection()"> -->
|
||
{{ $t('HomeView.Design') }}
|
||
</div>
|
||
<!-- <div class="gallery_btn white button_margin_14 Guide_1_30" v-show="designCollectionId"
|
||
@click="resDesignCollection()">
|
||
{{ $t('HomeView.Redesign') }}
|
||
</div> -->
|
||
<div class="silder button_margin_14" v-show="likeDesignCollectionList?.length > 0">
|
||
|
||
</div>
|
||
</div>
|
||
<div class="right_top_right">
|
||
|
||
</div>
|
||
</div>
|
||
<div class="right_content_block_box">
|
||
<div class="right_content_block" ref="rightContentBlockBox" @mouseenter="mouseenter($event,'like')">
|
||
|
||
|
||
<div class="right_content_body">
|
||
<div class="right_content_header">
|
||
<div class="content_header_left">
|
||
<i class="fi fi-rs-comments"></i><span class="content_header_des">
|
||
{{ $t('HomeView.SelectedDesign') }}
|
||
</span>
|
||
</div>
|
||
<div class="generalModel_state">
|
||
<!-- <div class="generalModel_state_item smail" style="margin-right: 0;">
|
||
<span>Type :</span>
|
||
<a-select
|
||
v-model:value="widthValue.value"
|
||
size="large"
|
||
style="width: 15rem"
|
||
placeholder="Please select"
|
||
:options="widthList"
|
||
@change="upDataLikeListType(500)"
|
||
>
|
||
</a-select>
|
||
</div> -->
|
||
<div class="generalModel_state_item smail" style="margin-right: 0;">
|
||
<span>Size :</span>
|
||
<a-select
|
||
v-model:value="widthValue.value"
|
||
size="large"
|
||
style="width: 15rem"
|
||
placeholder="Please select"
|
||
:options="widthList"
|
||
@change="setSystemDesigner(500)"
|
||
>
|
||
</a-select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right_content_img_block scroll_style active">
|
||
<div class="right_content_img_item" ref="likeItemDom" designType="like" :index="0">
|
||
<div class="content_img_block content_img_GetWidth active" :style="likeStyle"
|
||
v-for="(design, index) in likeDesignCollectionList" :key="design.id || design.designItemId">
|
||
<div class="content_img_flex"
|
||
@mousedown.stop="designMousedown(getMousePosition($event,false),design.userLikeSortId || design.id,'like')"
|
||
@touchstart.passive="designMousedown(getMousePosition($event,true),design.userLikeSortId || design.id,'like')"
|
||
@click="designDetail(
|
||
design,
|
||
index,
|
||
likeDesignCollectionList,
|
||
'like'
|
||
)">
|
||
<img class="content_img" v-show="!design?.generateAwait" :src="design.designOutfitUrl||design.url"
|
||
:key="design.designOutfitUrl" designType="like" :index="index"/>
|
||
<a-spin v-show="design?.generateAwait" size="large"></a-spin>
|
||
</div>
|
||
<div class="btn" v-show="!design?.generateAwait">
|
||
<i @click.stop="openEditBtn(design.designItemId||design.id)" class="fi fi-br-menu-dots-vertical"></i>
|
||
<div class="btnOpen" @click.stop="()=>openEditBtnId=-1" :class="{active:openEditBtnId == design.designItemId||openEditBtnId == design.id}">
|
||
<div class="item" @click="dislikeDesignCollection(design,design.resultType,index)">
|
||
<div class="text">On Like</div>
|
||
<div class="icon iconfont icon-jushoucanggift icon_like">
|
||
</div>
|
||
</div>
|
||
<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(likeDesignCollectionList,index,'TransferPose','add','like')">
|
||
<div class="text">Transfer Pose</div>
|
||
<div class="icon iconfont icon-jushoucanggift icon_like"></div>
|
||
</div>
|
||
<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(likeDesignCollectionList,index,'Relight','add','like')">
|
||
<div class="text">Relight</div>
|
||
<i class="fi fi fi-br-keyboard-brightness"></i>
|
||
</div>
|
||
<div class="item" v-show="design.resultType == 'Design'" @click="setEditDesignType(likeDesignCollectionList,index,'ToProductImage','add','like')">
|
||
<div class="text">To Product Image</div>
|
||
<i class="fi fi fi-ss-box-open"></i>
|
||
</div>
|
||
<!-- <div class="item" @click="setDeleteDesign(design,index)">
|
||
<div class="text">Delete</div>
|
||
<i class="fi fi-rr-trash icon_delete">
|
||
</i>
|
||
</div> -->
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right_content_block recycleBin" @mouseenter="mouseenter($event,'recycle')" :class="{recycleBinShow:recycleDomHidden}">
|
||
<div class="right_content_body">
|
||
<div class="right_content_header">
|
||
<div class="content_header_left">
|
||
<i class="fi fi-rs-comments"></i><span class="content_header_des">
|
||
{{ $t('HomeView.GeneratedDesign') }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="right_content_img_block scroll_style Guide_1_17" :class="[driver__.driver?'showEvents':'']">
|
||
<div class="right_content_img_item" ref="collItemDom" designType="disLike" :index="0">
|
||
<div class="content_img_block" v-show="showDesignMark" :style="collStyle">
|
||
<a-spin size="large" class="content_img_flex"></a-spin>
|
||
</div>
|
||
<div class="content_img_block content_img_GetWidth" v-for="(
|
||
design, index
|
||
) in designCollectionList" :key="design?.designItemId" :style="collStyle">
|
||
<div class="content_img_flex"
|
||
:class="[(driver__.driver && driver__.index == 32)?'hideEvents':'']"
|
||
@mousedown.stop="designMousedown(getMousePosition($event,false),design.designItemId || design.id,'disLike')"
|
||
@touchstart.passive="designMousedown(getMousePosition($event,true),design.designItemId || design.id,'disLike')"
|
||
@click="
|
||
designDetail(
|
||
design,
|
||
index,
|
||
designCollectionList,
|
||
'disLike'
|
||
)">
|
||
<img class="content_img" v-show="!design?.generateAwait" :src="design.designOutfitUrl || design.url" designType="disLike" :index="index"/>
|
||
<a-spin v-show="design?.generateAwait" size="large"></a-spin>
|
||
</div>
|
||
<div class="btn">
|
||
<i @click.stop="openEditBtn(design.designItemId||design.id)" class="fi fi-br-menu-dots-vertical"></i>
|
||
<div class="btnOpen" @click.stop="()=>openEditBtnId=-1" :class="{active:openEditBtnId == design.designItemId||openEditBtnId == design.id}">
|
||
<div class="item" @click="likeDesignCollection(design,index,design.resultType)">
|
||
<div class="text">Like</div>
|
||
<div class="icon iconfont icon-jushoucang icon_like">
|
||
</div>
|
||
</div>
|
||
<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(designCollectionList,index,'TransferPose','add','disLike')">
|
||
<div class="text">Transfer Pose</div>
|
||
<div class="icon iconfont icon-jushoucanggift icon_like"></div>
|
||
</div>
|
||
<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(designCollectionList,index,'Relight','add','disLike')">
|
||
<div class="text">Relight</div>
|
||
<i class="fi fi fi-br-keyboard-brightness"></i>
|
||
</div>
|
||
<div class="item" v-show="design.resultType == 'Design'" @click="setEditDesignType(designCollectionList,index,'ToProductImage','add','disLike')">
|
||
<div class="text">To Product Image</div>
|
||
<i class="fi fi fi-ss-box-open"></i>
|
||
</div>
|
||
<div class="item" @click="setDeleteDesign(design,index)">
|
||
<div class="text">Delete</div>
|
||
<i class="fi fi-rr-trash icon_delete">
|
||
</i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="designPage_left_bottom" :class="{active:recycleDomHidden}" @click="setShowHide('recycleDomHidden')" v-show="designCollectionId">
|
||
<span class="icon iconfont icon-xiala" :class="{'active':recycleDomHidden}"></span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<collectionModal ref="collectionModal"></collectionModal>
|
||
<!-- <DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail> -->
|
||
<!-- 导出缩略图的蒙层 start-->
|
||
<div class="mark_loading" v-show="isShowMark">
|
||
<a-spin size="large" />
|
||
</div>
|
||
<!-- 导出缩略图的蒙层 end-->
|
||
<!-- design collection的进度蒙层 start-->
|
||
<!-- design collection的进度蒙层 end-->
|
||
<affiche ref="affiche"></affiche>
|
||
<DesignDetailcopy v-if="detailDestroy" ref="designDetail" @destroy="setDetailDestroy" @finishRedesign="finishRedesign"></DesignDetailcopy>
|
||
<editDesignType ref="editDesignType"
|
||
@addGenerateImg="addGenerateImg"
|
||
:productData="{
|
||
upload:upload,
|
||
RelightDirection:RelightDirection,
|
||
RelightDirectionList:RelightDirectionList,
|
||
}"
|
||
@setGenerateAwait="setGenerateAwait"
|
||
:isProductimg="true"></editDesignType>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { defineComponent, h, ref, computed, toRefs, inject,provide,nextTick,reactive,onBeforeUnmount, toRef} from "vue";
|
||
// import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||
import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
|
||
import generalCanvas from "@/component/modules/generalCanvas.vue";
|
||
import affiche from "@/component/HomePage/affiche.vue";
|
||
import DesignDetailcopy from "@/component/DetailCopy/designDetail.vue";
|
||
import html2canvas from "html2canvas";
|
||
import { message,Modal } from "ant-design-vue";
|
||
import { useStore } from "vuex";
|
||
import { Https } from "@/tool/https";
|
||
import { openGuide,driverObj__ } from "@/tool/guide";
|
||
import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
|
||
import editDesignType from './editDesignType/index.vue'
|
||
// import JSZip, { forEach } from "jszip";
|
||
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||
import i18n from "@/lang";
|
||
import { useI18n } from "vue-i18n";
|
||
import { getMousePosition } from "@/tool/mdEvent";
|
||
import { removeClass } from "element-plus/es/utils";
|
||
import collectionModal from './collection.vue'
|
||
const FileSaver = require("file-saver");
|
||
|
||
export default defineComponent({
|
||
name: "homePage",
|
||
components: {
|
||
collectionModal,
|
||
// HeaderComponent,
|
||
NewCollectionReview,
|
||
affiche,
|
||
generalCanvas,
|
||
DesignDetailcopy,
|
||
editDesignType,
|
||
},
|
||
emits:['setTask'],
|
||
activated() {
|
||
},
|
||
deactivated() {
|
||
},
|
||
props:['isState'],
|
||
setup(props,{emit}) {
|
||
const store = useStore();
|
||
const editDesignType = reactive({
|
||
upload:{id:store.state.Workspace.probjects.id},
|
||
RelightDirectionList:[
|
||
{
|
||
value:'Right Light',
|
||
label:useI18n().t('ProductImg.RightLight')
|
||
},{
|
||
value:'Left Light',
|
||
label:useI18n().t('ProductImg.LeftLight')
|
||
},{
|
||
value:'Top Light',
|
||
label:useI18n().t('ProductImg.TopLight')
|
||
},{
|
||
value:'Bottom Light',
|
||
label:useI18n().t('ProductImg.BottomLight')
|
||
}
|
||
],
|
||
RelightDirection:'Right Light'
|
||
})
|
||
let likeDesignCollectionList: any = computed(() => {
|
||
return store.state.HomeStoreModule.likeDesignCollectionList;
|
||
});
|
||
let deleteDesignCollectionList: any = computed(() => {
|
||
return store.state.HomeStoreModule.deleteDesignCollectionList;
|
||
});
|
||
let designCollectionList: any = computed(() => {
|
||
return store.state.HomeStoreModule.designCollectionList;
|
||
});
|
||
let userDetail= computed(()=>{
|
||
return store.state.UserHabit.userDetail
|
||
})
|
||
let bindEmail= computed(()=>{
|
||
return store.state.UserHabit.bindEmail
|
||
})
|
||
let userGroupId: any = computed(() => {
|
||
return store.state.HomeStoreModule.userGroupId;
|
||
}); //模特id //当likeDesignCollectionList长度为0时清空，startdesign时清空
|
||
let setPortfolio = (data:any)=>{
|
||
portfolio.value = data
|
||
}
|
||
provide('setPortfolio',setPortfolio)
|
||
let designCollectionId: any = computed(() => {
|
||
return store.state.HomeStoreModule.designCollectionId;
|
||
});
|
||
let designId: any = computed(() => {
|
||
return store.state.HomeStoreModule.designId;
|
||
});
|
||
let contentImgMax = {
|
||
width:'',
|
||
height:'',
|
||
}
|
||
let contentImg = {
|
||
width:'',
|
||
height:'',
|
||
}
|
||
let exportNav = ref([
|
||
{
|
||
name:useI18n().t('HomeView.moodboard'),
|
||
change:true,
|
||
noChange:true,
|
||
value:'moodboardFiles',
|
||
},{
|
||
name:useI18n().t('HomeView.printboard'),
|
||
change:true,
|
||
noChange:false,
|
||
value:'printboardFiles',
|
||
},{
|
||
name:useI18n().t('HomeView.colorboard'),
|
||
change:true,
|
||
noChange:false,
|
||
value:'colorBoards',
|
||
},{
|
||
name:useI18n().t('HomeView.sketchboard'),
|
||
change:true,
|
||
noChange:false,
|
||
value:'sketchboardFiles',
|
||
},{
|
||
name:useI18n().t('HomeView.mannequins'),
|
||
change:true,
|
||
noChange:true,
|
||
value:'',
|
||
},
|
||
])
|
||
const dataDom = reactive({
|
||
collectionModal:null as any,
|
||
editDesignType:null as any,
|
||
})
|
||
const designData = reactive({
|
||
openEditBtnId:-1,
|
||
likeLoading: false, //喜欢防抖
|
||
widthList:[
|
||
{
|
||
label:'Medium',
|
||
value:170,
|
||
},{
|
||
label:'Large',
|
||
value:250,
|
||
},{
|
||
label:'Extra-large',
|
||
value:400,
|
||
}
|
||
],
|
||
})
|
||
provide('exportNav',exportNav)
|
||
let isShowOperate = ref(false)
|
||
let {t} = useI18n()
|
||
let driver__:any = computed(()=>{
|
||
return store.state.Guide.guide
|
||
})
|
||
let likeDesignItemIdList = ref([])
|
||
let workspacePosition:any = computed(()=>{
|
||
return store.state.Workspace.probjects.positionList
|
||
})
|
||
let allBoardData:any = computed(()=>{
|
||
return store.state.UploadFilesModule.allBoardData})
|
||
let isMannequinShow = ref(false)
|
||
let chooseIsDesign:any = computed(()=>{
|
||
return store.state.UploadFilesModule.chooseIsDesign})
|
||
let portfolio:any = ref({})
|
||
provide('portfolio',portfolio)
|
||
let showDesignMark = ref(false)
|
||
let sessionStorageCollValue = JSON.parse(sessionStorage.getItem('collValue') as any)
|
||
|
||
const collItemSize = reactive({
|
||
widthValue:{
|
||
label:'Medium',
|
||
value:170,
|
||
},
|
||
collValue:6,
|
||
padding:60,
|
||
likeStyle:{
|
||
width:'240px',
|
||
height:'370px',
|
||
position:'absolute',
|
||
},
|
||
collStyle:{
|
||
width:'0',
|
||
height:'0',
|
||
position:'absolute',
|
||
},
|
||
itemStyle:{
|
||
width:0,
|
||
height:0,
|
||
},
|
||
scale:[1,1.54],
|
||
collTime:null as any,
|
||
isMove:false,
|
||
})
|
||
const posiitonData = ref({
|
||
likeElList:[] as any,
|
||
likeSelectIndex:0,
|
||
generateElList:[] as any,
|
||
generateSelectIndex:0,
|
||
})
|
||
let likeItemDom = ref()
|
||
let collItemDom = ref()
|
||
let domHidden = ref(JSON.parse(sessionStorage.getItem('domHidden') as any) || false);
|
||
let recycleDomHidden = ref(false);
|
||
if(designCollectionList.value.length>0){
|
||
recycleDomHidden.value = JSON.parse(sessionStorage.getItem('recycleDomHidden') as any) || false
|
||
}
|
||
let getDesignTime = null as any;
|
||
const setSystemDesigner = (time:any)=>{
|
||
clearTimeout(collItemSize.collTime)
|
||
collItemSize.collTime = setTimeout(()=>{
|
||
nextTick(()=>{
|
||
let parentWidth = likeItemDom.value.parentElement.offsetWidth
|
||
collItemSize.widthValue.value = collItemSize.widthValue.value == -1?100:collItemSize.widthValue.value
|
||
collItemSize.widthValue.value = collItemSize.widthValue.value > parentWidth?parentWidth:collItemSize.widthValue.value
|
||
collItemSize.collValue = Math.floor(parentWidth / collItemSize.widthValue.value)
|
||
collItemSize.padding = Math.floor(parentWidth - (collItemSize.collValue * collItemSize.widthValue.value))
|
||
let value = collItemSize.collValue
|
||
|
||
collItemSize.itemStyle.width = (parentWidth - collItemSize.padding - (value * 10)) / value
|
||
collItemSize.itemStyle.height = collItemSize.itemStyle.width * 1.54
|
||
|
||
collItemSize.collStyle.width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0] + 'px'
|
||
collItemSize.collStyle.height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1] + 'px'
|
||
|
||
collItemSize.likeStyle.width = collItemSize.itemStyle.width + 'px'
|
||
collItemSize.likeStyle.height = collItemSize.itemStyle.height + 'px'
|
||
let elArr = likeItemDom.value.children
|
||
posiitonData.value.likeElList = []
|
||
for(let i = 0;i < elArr.length;i++){
|
||
posiitonData.value.likeElList.push({
|
||
el: elArr[i],
|
||
sort: likeDesignCollectionList.value[i].sort - 1,
|
||
index: i,
|
||
userLikeSortId:likeDesignCollectionList.value[i].userLikeSortId || likeDesignCollectionList.value[i].id
|
||
});
|
||
}
|
||
moveItem('like')
|
||
})
|
||
},time)
|
||
}
|
||
const setDesignItemStyle = ()=>{
|
||
posiitonData.value.generateElList = []
|
||
let elArr = collItemDom.value.querySelectorAll('.content_img_GetWidth')
|
||
designCollectionList.value.forEach((item:any,index:any)=>{
|
||
posiitonData.value.generateElList.unshift({
|
||
el: elArr[index],
|
||
sort: designCollectionList.value.length - index - 1,
|
||
index: designCollectionList.value.length - index - 1,
|
||
userLikeSortId:item.designItemId || item.id
|
||
});
|
||
})
|
||
}
|
||
|
||
const setDeleteDesign = (value:any,index:any)=>{
|
||
store.commit("setDeleteDesignCollectionList",index);
|
||
let collItem = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId == value.designItemId)[0]
|
||
posiitonData.value.generateElList = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId != value.designItemId)
|
||
|
||
posiitonData.value.generateElList.forEach((item:any)=>{
|
||
if(item.sort > collItem.sort){
|
||
item.sort-=1
|
||
}
|
||
})
|
||
moveItem('')
|
||
}
|
||
const cancelDeleteDesign = (index:any)=>{
|
||
store.commit("cancelDeleteDesignCollectionList",index);
|
||
}
|
||
const designMousedown = (e:any,Id:number,str:string)=>{
|
||
if(str != 'like' && showDesignMark.value) return
|
||
let arr = str == 'like'? posiitonData.value.likeElList:posiitonData.value.generateElList
|
||
let item:any = arr.filter((item:any)=>item.userLikeSortId == Id)[0]
|
||
item.el.style.zIndex = 2;
|
||
item.el.style.transition = 'all 0s';
|
||
let startX = e.clientX,
|
||
startY = e.clientY,
|
||
left = item.el.offsetLeft,
|
||
top = item.el.offsetTop;
|
||
collItemSize.isMove = false
|
||
let moveFun = (e:any) => {
|
||
collItemSize.isMove = true
|
||
let X = e.clientX - startX + left;
|
||
let Y = e.clientY - startY + top;
|
||
item.el.style.left = `${X}px`;
|
||
item.el.style.top = `${Y}px`;
|
||
reRange(item, X, Y,str);
|
||
};
|
||
let mouseUpFun = ()=>{
|
||
document.removeEventListener('mousemove',mouseMove)
|
||
document.removeEventListener('touchmove',touchmove)
|
||
|
||
document.removeEventListener('mouseup',mouseUpFun)
|
||
document.removeEventListener('touchend',mouseUpFun)
|
||
item.el.style.zIndex = 1;
|
||
item.el.style.transition = 'top,left .5s';
|
||
moveItem(str);
|
||
if(str == 'like')sortDesignCollection()
|
||
}
|
||
let mouseMove = function(event:any){
|
||
let e = getMousePosition(event,false)
|
||
moveFun(e)
|
||
}
|
||
let touchmove = function(event:any){
|
||
let e = getMousePosition(event,true)
|
||
moveFun(e)
|
||
}
|
||
|
||
document.addEventListener('mousemove',mouseMove)
|
||
document.addEventListener('touchmove',touchmove)
|
||
|
||
document.addEventListener('mouseup',mouseUpFun)
|
||
document.addEventListener('touchend',mouseUpFun)
|
||
}
|
||
//排序 从大到小
|
||
const sortDesignCollection = ()=> {
|
||
let arrData:any = []
|
||
if(!likeDesignCollectionList.value)return
|
||
likeDesignCollectionList.value.forEach((likeItem:any)=>{
|
||
let item = posiitonData.value.likeElList.filter((item:any)=>item.userLikeSortId == likeItem.userLikeSortId || item.userLikeSortId == likeItem.id)[0]
|
||
likeItem.sort = item.sort + 1
|
||
let obj = {
|
||
id:likeItem.userLikeSortId || likeItem.id,
|
||
"sort": item.sort + 1,
|
||
"userLikeGroupId": likeItem.userLikeGroupId,
|
||
"userLikeId": likeItem.id
|
||
}
|
||
arrData.push(obj)
|
||
})
|
||
let data = {
|
||
"userLikeGroupId": userGroupId.value,
|
||
"userLikeSortList": arrData
|
||
}
|
||
Https.axiosPost(Https.httpUrls.designSort, data).then((rv:any)=>{
|
||
})
|
||
}
|
||
const mouseenter = (e:any,str:string)=>{
|
||
}
|
||
const reRange = (item:any, x:number, y:number,str:string)=>{
|
||
let elList = str == 'like'? posiitonData.value.likeElList:posiitonData.value.generateElList
|
||
let index = str == 'like'?posiitonData.value.likeSelectIndex:posiitonData.value.generateSelectIndex
|
||
let value = collItemSize.collValue
|
||
let width,height,num
|
||
if(str == 'like'){
|
||
num = value
|
||
width = collItemSize.itemStyle.width
|
||
height = collItemSize.itemStyle.height
|
||
}else{
|
||
num = 3
|
||
width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0]
|
||
height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1]
|
||
}
|
||
let padding = str == 'like'?collItemSize.padding/2:0
|
||
let moveIndex = Math.round((x-padding) / (width + 10)) + Math.round(y / (height + 10)) * num;
|
||
moveIndex = elList.length - 1 - moveIndex
|
||
moveIndex = moveIndex < 0 ? 0 : moveIndex;
|
||
moveIndex = moveIndex > elList.length - 1 ? elList.length - 1 : moveIndex;
|
||
if(moveIndex != index){
|
||
if(str == 'like'){
|
||
posiitonData.value.likeSelectIndex = moveIndex;
|
||
}else{
|
||
posiitonData.value.generateSelectIndex = moveIndex;
|
||
}
|
||
let currentSort = item.sort;
|
||
for(let i = 0;i < elList.length;i++){
|
||
if(currentSort < moveIndex){
|
||
if(elList[i].sort > currentSort && elList[i].sort <= moveIndex){
|
||
elList[i].sort -= 1;
|
||
};
|
||
}else if(currentSort > moveIndex){
|
||
if(elList[i].sort < currentSort && elList[i].sort >= moveIndex){
|
||
elList[i].sort += 1;
|
||
};
|
||
}
|
||
};
|
||
elList[item.index].sort = moveIndex;
|
||
moveItem(str);
|
||
}
|
||
}
|
||
const setLikeDislLike = (str:string,value:any)=>{
|
||
posiitonData.value.likeSelectIndex = 0
|
||
nextTick(()=>{
|
||
if(str == 'like'){
|
||
let elArr = likeItemDom.value.children
|
||
posiitonData.value.likeElList.push({
|
||
el: elArr[0],
|
||
sort: value.sort - 1,
|
||
index: value.sort - 1,
|
||
userLikeSortId:value.userLikeSortId
|
||
});
|
||
let collItem = posiitonData.value.generateElList.filter((item:any)=>(item.userLikeSortId == value.designItemId || item.userLikeSortId == value.id))[0]
|
||
if(collItem){
|
||
posiitonData.value.generateElList = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId != value.designItemId)
|
||
posiitonData.value.generateElList.forEach((item:any)=>{
|
||
if(item.sort > collItem.sort){
|
||
item.sort-=1
|
||
}
|
||
})
|
||
}
|
||
}else if(str == 'disLike'){
|
||
let elArr = collItemDom.value.querySelectorAll('.content_img_GetWidth')
|
||
posiitonData.value.likeElList = posiitonData.value.likeElList.filter((item:any)=>(item.sort + 1) != value.sort)
|
||
posiitonData.value.likeElList.forEach((item:any)=>{
|
||
if(item.sort > value.sort - 1){
|
||
item.sort-=1
|
||
}
|
||
})
|
||
posiitonData.value.generateElList.push({
|
||
el: elArr[elArr.length-1],
|
||
sort: posiitonData.value.generateElList.length,
|
||
index: posiitonData.value.generateElList.length,
|
||
userLikeSortId:value.designItemId||value.id
|
||
});
|
||
setDesignItemStyle()
|
||
}
|
||
setSystemDesigner(100)
|
||
// moveItem('disLike');
|
||
})
|
||
}
|
||
//排列
|
||
const moveItem = (str:any)=>{
|
||
let elLikeList = posiitonData.value.likeElList
|
||
let generateElList = posiitonData.value.generateElList
|
||
let value = collItemSize.collValue
|
||
let width:any,height:any
|
||
width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0]
|
||
height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1]
|
||
|
||
// let num = str == 'like'?value:3
|
||
nextTick(()=>{
|
||
for(let i = 0;i < elLikeList.length;i++){
|
||
elLikeList[i].el.style.left = (elLikeList.length - 1 - elLikeList[i].sort) % value * (collItemSize.itemStyle.width +10) + collItemSize.padding/2 + 'px';
|
||
elLikeList[i].el.style.top = parseInt(String((elLikeList.length - 1 - elLikeList[i].sort) / value)) * (collItemSize.itemStyle.height +10) + 'px';
|
||
}
|
||
for(let i = 0;i < generateElList.length;i++){
|
||
generateElList[i].el.style.left = (generateElList.length - 1 - generateElList[i].sort) % 3 * (width +10) + 'px';
|
||
generateElList[i].el.style.top = parseInt(String((generateElList.length - 1 - generateElList[i].sort) / 3)) * (height +10) + 'px';
|
||
}
|
||
})
|
||
|
||
}
|
||
const openCollection = (str:string)=>{
|
||
dataDom.collectionModal.init(str)
|
||
}
|
||
const openEditBtn = (id:number)=>{
|
||
designData.openEditBtnId = id
|
||
let removeEditBtnId = ()=>{
|
||
designData.openEditBtnId = -1
|
||
document.removeEventListener('click',removeEditBtnId)
|
||
}
|
||
document.addEventListener('click',removeEditBtnId)
|
||
|
||
}
|
||
let setEditDesignType = (arr:any,index:any,type:any,status:any,listType:string)=>{
|
||
arr = JSON.parse(JSON.stringify(arr))
|
||
let item = arr[index]
|
||
if(status == 'add'){
|
||
item.sourceUrl = item.designOutfitUrl || item.url
|
||
}else{
|
||
|
||
}
|
||
arr[index].resultType = type
|
||
// dataDom.editDesignType.isProductimg = isLike
|
||
dataDom.editDesignType.isProductimg = true
|
||
dataDom.editDesignType.init(arr,index,null,status,listType)
|
||
dataDom.editDesignType.isLike = false
|
||
dataDom.editDesignType.productimgRelightDirection = editDesignType.RelightDirection
|
||
dataDom.editDesignType.isComparison = true
|
||
}
|
||
const addGenerateImg = (data:any)=>{
|
||
if(!data.id)return
|
||
let obj = {
|
||
id:data.id,
|
||
designItemId:data.id,
|
||
// designItemId:data.elementId,
|
||
designOutfitId:'',
|
||
designOutfitUrl:data.designOutfitUrl,
|
||
sourceUrl:data.sourceUrl,
|
||
resultType:data.resultType,
|
||
elementId:data.elementId,
|
||
elementType:data.elementType,
|
||
userGroupId:data.userGroupId || data.id,
|
||
}
|
||
let list = []
|
||
if(data.listType == 'disLike'){
|
||
list = designCollectionList.value
|
||
}else{
|
||
list = likeDesignCollectionList.value
|
||
}
|
||
if(list[data.isIndex]?.generateAwait)list[data.isIndex].generateAwait = false;
|
||
if(data.status == 'add'){
|
||
if(data.listType == 'like'){
|
||
likeDesignCollection(obj,-1,data.resultType)
|
||
}else{
|
||
list.unshift(obj)
|
||
}
|
||
}else if(data.status == 'cove'){
|
||
// collectionLikeUpdate
|
||
// Https
|
||
if(data.listType == 'like'){
|
||
let value = {
|
||
"oldRelationId": data.oldId,
|
||
"relationId": data.id,
|
||
"relationType": data.resultType,
|
||
}
|
||
Https.axiosPost(Https.httpUrls.collectionLikeUpdate,value).then((rv:any)=>{
|
||
if(rv){
|
||
}
|
||
})
|
||
}
|
||
list[data.isIndex].designOutfitUrl = obj.designOutfitUrl
|
||
list[data.isIndex].resultType = obj.resultType
|
||
list[data.isIndex].id = obj.id
|
||
list[data.isIndex].designItemId = obj.designItemId
|
||
list[data.isIndex].sourceUrl = obj.sourceUrl
|
||
}
|
||
nextTick().then(()=>{
|
||
setDesignItemStyle()
|
||
setSystemDesigner(100)
|
||
})
|
||
}
|
||
const setNoDesignLike = (design:any,index:any,type:any,str:string) => {
|
||
let url
|
||
let data = {
|
||
toProductImageResultId:[(design.designItemId || design.id)],
|
||
projectId: store.state.Workspace.probjects.id,
|
||
}
|
||
if(type == 'ToProductImage' || type == 'Relight'){
|
||
if(str == 'like'){
|
||
url = Https.httpUrls.productImageLike
|
||
}else{
|
||
url = Https.httpUrls.productImageUnLike
|
||
}
|
||
}else{
|
||
if(str == 'like'){
|
||
url = Https.httpUrls.productImageLike
|
||
}else{
|
||
url = Https.httpUrls.productImageUnLike
|
||
}
|
||
}
|
||
designData.likeLoading = true;
|
||
Https.axiosPost(url, data).then(
|
||
(rv) => {
|
||
if(str == 'like'){
|
||
let value:any = {
|
||
...design,
|
||
sort:likeDesignCollectionList.value.length + 1,
|
||
userLikeGroupId:design.id,
|
||
}
|
||
design.groupDetailId = rv.groupDetailId;
|
||
store.commit(
|
||
"addLikeDesignCollectionList",
|
||
value
|
||
);
|
||
setLikeDislLike('like',value)
|
||
if(index != -1)store.commit("deleteDesignCollectionList", index);
|
||
}else{
|
||
if(index != -1)store.commit("deleteLikeDesignCollectionList", index);
|
||
store.commit("addDesignCollectionList", [design]);
|
||
likeDesignCollectionList.value.forEach((item:any)=>{
|
||
if(item.sort > design.sort){
|
||
item.sort-=1
|
||
}
|
||
})
|
||
setLikeDislLike('disLike',design)
|
||
}
|
||
designData.likeLoading = false;
|
||
}
|
||
).catch(res=>{
|
||
designData.likeLoading = false;
|
||
});
|
||
}
|
||
let likeDesignCollection = (design:any,index:any,type:any) => {
|
||
if (designData.likeLoading) {
|
||
return;
|
||
}
|
||
if(type != 'Design'){
|
||
setNoDesignLike(design,index,type,'like')
|
||
return
|
||
}
|
||
let data = {
|
||
designItemId: design.designItemId,
|
||
userGroupId: store.state.HomeStoreModule.userGroupId,
|
||
projectId: store.state.Workspace.probjects.id,
|
||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||
designPythonOutfitId:design.designOutfitId?design.designOutfitId:design.designPythonOutfitId
|
||
};
|
||
|
||
|
||
designData.likeLoading = true;
|
||
Https.axiosPost(Https.httpUrls.designLike, data)
|
||
.then((rv: any) => {
|
||
if (rv) {
|
||
let value:any = {
|
||
...design,
|
||
id:rv.userLikeId,
|
||
groupDetailId:rv.userLikeId,
|
||
userLikeSortId:rv.userLikeSortId,
|
||
userLikeGroupId:rv.userGroupId,
|
||
sort:rv.sort,
|
||
}
|
||
store.commit("setUserGroupId", rv.userGroupId);
|
||
design.groupDetailId = rv.groupDetailId;
|
||
store.commit(
|
||
"addLikeDesignCollectionList",
|
||
value
|
||
);
|
||
setLikeDislLike('like',value)
|
||
if(index != -1)store.commit("deleteDesignCollectionList", index);
|
||
}
|
||
designData.likeLoading = false;
|
||
})
|
||
.catch((rv) => {
|
||
designData.likeLoading = false;
|
||
});
|
||
}
|
||
const upDataLikeListType = ()=>{
|
||
|
||
}
|
||
const setGenerateAwait = (data:any)=>{
|
||
let list = []
|
||
if(data.listType == 'disLike'){
|
||
list = designCollectionList.value
|
||
}else{
|
||
list = likeDesignCollectionList.value
|
||
}
|
||
list[data.index].generateAwait = true;
|
||
|
||
}
|
||
return {
|
||
store,
|
||
...toRefs(editDesignType),
|
||
likeDesignCollectionList,
|
||
deleteDesignCollectionList,
|
||
designCollectionList,
|
||
userGroupId,
|
||
userDetail,
|
||
bindEmail,
|
||
setPortfolio,
|
||
designCollectionId,
|
||
designId,
|
||
contentImgMax,
|
||
contentImg,
|
||
exportNav,
|
||
isShowOperate,
|
||
t,
|
||
driver__,
|
||
likeDesignItemIdList,
|
||
workspacePosition,
|
||
allBoardData,
|
||
isMannequinShow,
|
||
chooseIsDesign,
|
||
portfolio,
|
||
setSystemDesigner,
|
||
setDesignItemStyle,
|
||
showDesignMark,
|
||
...toRefs(collItemSize),
|
||
...toRefs(designData),
|
||
...toRefs(dataDom),
|
||
likeItemDom,
|
||
collItemDom,
|
||
domHidden,
|
||
recycleDomHidden,
|
||
getDesignTime,
|
||
|
||
setDeleteDesign,
|
||
cancelDeleteDesign,
|
||
designMousedown,
|
||
sortDesignCollection,
|
||
getMousePosition,
|
||
mouseenter,
|
||
setLikeDislLike,
|
||
posiitonData,
|
||
moveItem,
|
||
openCollection,
|
||
setEditDesignType,
|
||
openEditBtn,
|
||
addGenerateImg,
|
||
setNoDesignLike,
|
||
upDataLikeListType,
|
||
setGenerateAwait,
|
||
};
|
||
},
|
||
data() {
|
||
return {
|
||
isFinishLoading: false,
|
||
isShowMark: false, //导出的loading蒙层
|
||
indicator: h(LoadingOutlined, {
|
||
style: {
|
||
fontSize: "4.8rem",
|
||
marginTop: "3rem",
|
||
color:"#341e57",
|
||
},
|
||
spin: true,
|
||
}),
|
||
designProgress: 0,
|
||
startDesignType: "design", //设计类型 design 和 resdesign
|
||
disLikeLoading: false, //不喜欢防抖
|
||
dragIdx:0,
|
||
designRandom:'',
|
||
detailDestroy:false,//销毁detail
|
||
designFailure:{
|
||
num:0,
|
||
currentNum:0,
|
||
},//获取20次都为空的话就停止获取
|
||
observerData:{
|
||
time:false as any,
|
||
observer:null as any,
|
||
},
|
||
};
|
||
},
|
||
watch: {
|
||
workspacePosition:{
|
||
handler(newVal:any,oldVal:any){
|
||
this.isMannequin()
|
||
},
|
||
},
|
||
allBoardData:{
|
||
handler(newVal:any,oldVal:any){
|
||
this.isMannequin()
|
||
},
|
||
},
|
||
},
|
||
|
||
beforeUnmount(){
|
||
clearTimeout(this.getDesignTime);
|
||
sessionStorage.setItem('domHidden',JSON.stringify(this.domHidden))
|
||
sessionStorage.setItem('recycleDomHidden',JSON.stringify(this.recycleDomHidden))
|
||
sessionStorage.setItem('collValue',JSON.stringify(this.collValue))
|
||
if(this.$props.isState)this.sortDesignCollection()
|
||
// window.removeEventListener('resize', this.setItemPosition)
|
||
this.observerData.observer.unobserve(this.$refs.rightContentBlockBox);
|
||
},
|
||
async mounted() {
|
||
window.addEventListener('beforeunload', (event)=>{
|
||
this.store.commit("clearAllCollection");
|
||
});
|
||
// window.addEventListener('resize', this.setItemPosition)
|
||
|
||
this.$refs.rightContentBlockBox
|
||
this.observerData.observer = new ResizeObserver(entries => {
|
||
for (let entry of entries) {
|
||
clearTimeout(this.observerData.time)
|
||
this.observerData.time = setTimeout(()=>{
|
||
this.setSystemDesigner(0)
|
||
this.setDesignItemStyle()
|
||
},100)
|
||
// const { width } = entry.contentRect;
|
||
}
|
||
});
|
||
this.observerData.observer.observe(this.$refs.rightContentBlockBox);
|
||
},
|
||
directives:{
|
||
mousewheel:{
|
||
mounted (el) {
|
||
let bodyDom:any = document.getElementsByClassName('right_content_block')[0]
|
||
let dom:any = document.getElementsByClassName('right_content_body')
|
||
let mouseover = ()=>{
|
||
bodyDom.classList.add('active')
|
||
}
|
||
let mouseleave = ()=>{
|
||
bodyDom.classList.remove('active')
|
||
}
|
||
dom.forEach((item:any) => {
|
||
item.addEventListener('mouseover',mouseover)
|
||
item.addEventListener('mouseleave',mouseleave)
|
||
});
|
||
|
||
|
||
el.addEventListener('wheel',(e:WheelEvent)=>{
|
||
let num = 0
|
||
if(e.deltaY > 0){
|
||
num = 25
|
||
}else{
|
||
num = -25
|
||
}
|
||
el.scrollBy(num, 0);
|
||
},{ passive: true })
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
// addTeam (team:any) {
|
||
// this.likeDesignCollectionList.push(team)
|
||
// },
|
||
openSetData(){
|
||
this.setItemPosition()
|
||
},
|
||
setItemPosition(){
|
||
this.setSystemDesigner(0)
|
||
this.setDesignItemStyle()
|
||
},
|
||
affiche(text:any){
|
||
nextTick(()=>{
|
||
let affiche:any = this.$refs.affiche
|
||
affiche.init(text)
|
||
})
|
||
},
|
||
|
||
//判断模特和当前start的sketch是否匹配
|
||
isMannequin(){
|
||
this.isMannequinShow = false
|
||
let num = 0
|
||
this.allBoardData?.sketchboardFiles?.forEach((sketchItem:any) => {
|
||
|
||
this.workspacePosition.forEach((positionItem:any) => {
|
||
|
||
if(positionItem.value == sketchItem.categoryValue){
|
||
num ++
|
||
}
|
||
});
|
||
|
||
});
|
||
if(this.allBoardData?.sketchboardFiles?.length && this.allBoardData?.sketchboardFiles?.length>0){
|
||
if(num != this.allBoardData?.sketchboardFiles?.length){
|
||
this.isMannequinShow = true
|
||
}
|
||
}else{
|
||
this.isMannequinShow = false
|
||
}
|
||
},
|
||
//设计新的collection
|
||
designNewCollection() {
|
||
clearTimeout(this.getDesignTime);
|
||
let data = this.getDesignData("");
|
||
if(this.driver__.driver){
|
||
nextTick().then(()=>{
|
||
driverObj__.moveNext();
|
||
})
|
||
}
|
||
this.isShowMark = true
|
||
// this.store.commit("setLikeDesignCollectionList", []);
|
||
Https.axiosPost(Https.httpUrls.designCollection, data)
|
||
|
||
.then((rv: any) => {
|
||
if (rv) {
|
||
let value = {
|
||
objectSignList:data.requestIdList.join(),
|
||
requestId:rv
|
||
}
|
||
this.posiitonData.generateElList.forEach((item:any) => {
|
||
item.sort -= 1
|
||
})
|
||
this.moveItem('disLike')
|
||
|
||
this.getDesignResult(value,'newDesign')
|
||
this.startDesignType = "design";
|
||
// this.posiitonData.likeSelectIndex = 0
|
||
// this.posiitonData.likeElList = []
|
||
}
|
||
this.isShowMark = false;
|
||
})
|
||
.catch((res) => {
|
||
this.isShowMark = false;
|
||
})
|
||
},
|
||
getDesignResult(data:any,str:any){
|
||
this.showDesignMark = true
|
||
this.recycleDomHidden = true
|
||
this.setSystemDesigner(0)
|
||
Https.axiosGet(Https.httpUrls.getDesignResult,{params:data})
|
||
.then(async (rv)=>{
|
||
if(rv.designCollectionItems){
|
||
let arr:any = []
|
||
if(this.designCollectionList.length == 0){
|
||
arr.push(...rv.designCollectionItems)
|
||
}else{
|
||
arr = rv.designCollectionItems.filter((itemA:any) =>
|
||
!this.designCollectionList.some((itemB:any) => itemA.objectSign === itemB.objectSign)
|
||
);
|
||
}
|
||
for (let index = 0; index < arr.length; index++) {
|
||
const item = arr[index];
|
||
await new Promise((resolve, reject) => {
|
||
setTimeout(() => {
|
||
this.designCollectionList.unshift(item)
|
||
nextTick().then(()=>{
|
||
let dom:any = this.$refs.collItemDom
|
||
let elArr:any = dom.querySelectorAll(".content_img_GetWidth");
|
||
this.posiitonData.generateElList.push({
|
||
el: elArr[0],
|
||
sort: elArr.length - 2,
|
||
index: elArr.length - 1,
|
||
userLikeSortId:item.designItemId
|
||
});
|
||
this.moveItem('disLike')
|
||
})
|
||
resolve('')
|
||
}, 200);
|
||
})
|
||
}
|
||
}
|
||
if(rv.unfinishedList.length == 0){
|
||
this.showDesignMark = false
|
||
if(str == 'newDesign'){
|
||
if(rv.designCollectionItems){
|
||
// this.store.commit("deleteUserGroupId");
|
||
this.store.commit(
|
||
"setDesignCollectionId",
|
||
rv.collectionId
|
||
);
|
||
this.store.commit("setDesignId", rv.designId);
|
||
}
|
||
}else{
|
||
// this.designProgress = 0,
|
||
this.store.commit("setDesignId", rv.designId);
|
||
}
|
||
nextTick().then(()=>{
|
||
driverObj__.moveNext();
|
||
this.posiitonData.generateElList.forEach((item:any) => {
|
||
item.sort += 1
|
||
});
|
||
this.moveItem('disLike')
|
||
|
||
})
|
||
}else{
|
||
data.objectSignList = rv.unfinishedList.join()
|
||
this.getDesignTime = setTimeout(()=>{
|
||
if(this.designFailure.currentNum == rv.unfinishedList.length){
|
||
this.designFailure.num++
|
||
if(this.designFailure.num >= 10)data.objectSignList=''
|
||
}else{
|
||
this.designFailure.num = 0
|
||
}
|
||
this.getDesignResult(data,str)
|
||
},1000)
|
||
}
|
||
}).catch(()=>this.showDesignMark = false)
|
||
},
|
||
//重新设计collection
|
||
resDesignCollection() {
|
||
if(this.driver__.driver){
|
||
nextTick().then(()=>{
|
||
driverObj__.moveNext();
|
||
})
|
||
}
|
||
clearTimeout(this.getDesignTime);
|
||
this.isShowMark = true
|
||
let data = this.getDesignData(this.designCollectionId);
|
||
Https.axiosPost(Https.httpUrls.reDesignCollection, data)
|
||
.then((rv: any) => {
|
||
if (rv) {
|
||
let value = {
|
||
objectSignList:data.requestIdList.join(),
|
||
requestId:rv
|
||
}
|
||
this.posiitonData.generateElList.forEach((item:any) => {
|
||
item.sort -= 1
|
||
})
|
||
this.moveItem('disLike')
|
||
this.getDesignResult(value,'resDesign')
|
||
this.startDesignType = "resDesign";
|
||
this.isShowMark = false
|
||
}
|
||
})
|
||
.catch((res) => {
|
||
this.isShowMark = false;
|
||
});
|
||
|
||
},
|
||
|
||
getDesignData(designCollectionId: any) {
|
||
let {
|
||
moodboardFiles,
|
||
printboardFiles,
|
||
disposeMoodboard,
|
||
// generatePrintFiles,
|
||
colorBoards,
|
||
sketchboardFiles,
|
||
marketingSketchFiles,
|
||
moodboardPosition,
|
||
} = this.store.state.UploadFilesModule.allBoardData;
|
||
this.randomNum()
|
||
let modelList = [] as any;
|
||
let workspace:any = this.store.state.Workspace.probjects
|
||
workspace.model.forEach((item:any)=>{
|
||
let obj = {
|
||
id:item.id,
|
||
type:item.type,
|
||
collectionElementId:item.collectionElementId
|
||
}
|
||
modelList.push(obj)
|
||
})
|
||
let data: any = {
|
||
colorBoards: this.getColorBoard(colorBoards),
|
||
// marketingSketchs: this.getBoardId(marketingSketchFiles),
|
||
moodBoards: this.getBoardId(moodboardFiles),
|
||
printBoards: this.getPrintId(printboardFiles),
|
||
sketchBoards: this.getSkecthBoard(sketchboardFiles),
|
||
moodboardPosition: moodboardPosition?JSON.stringify(moodboardPosition):null,
|
||
switchCategory: workspace.type == "seriesDesign"?"": workspace.position.value,
|
||
singleOverall: workspace.type == "seriesDesign" ? "overall" : 'single',
|
||
systemScale: workspace.systemDesignerPercentage?workspace.systemDesignerPercentage*.01:.3,
|
||
templateId: '',
|
||
// templateId: workspace.model.id,
|
||
mannequins: modelList,
|
||
modelType:'',
|
||
modelSex:workspace?.sex,
|
||
moodTemplateId: disposeMoodboard?.[0] ? String(disposeMoodboard[0].id) : null,
|
||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||
processId:this.designRandom,
|
||
projectId:workspace.id
|
||
};
|
||
// data.moodboardPosition = JSON.stringify(this.store.state.UploadFilesModule.moodboardPosition)
|
||
this.setSystemDesigner(0)
|
||
this.designFailure = {
|
||
num:0,
|
||
currentNum:0,
|
||
}
|
||
if(designCollectionId) {
|
||
data.collectionId = designCollectionId;
|
||
}
|
||
|
||
let arr = []
|
||
for (let index = 0; index < 8; index++) {
|
||
let floor = Math.floor(Math.random() * 90000000) + 10000000
|
||
arr.push(floor)
|
||
}
|
||
data.requestIdList = arr
|
||
return data;
|
||
},
|
||
randomNum(){
|
||
this.designRandom = String(Math.floor(Math.random() * 9000000000000000) + 1000000000000000)
|
||
},
|
||
getBoardId(boardData: any) {
|
||
boardData = boardData || []
|
||
let dataList = boardData.map((v: any) => {
|
||
let data: any = {
|
||
id: v.resData.id,
|
||
designType: v.resData.designType,
|
||
};
|
||
return data;
|
||
});
|
||
return dataList;
|
||
},
|
||
|
||
getPrintId(boardData: any) {
|
||
boardData = boardData || []
|
||
let dataList = boardData.map((v: any) => {
|
||
let data: any = {
|
||
id: v.resData.id,
|
||
designType: v.resData.designType,
|
||
level2Type: v.categoryValue,
|
||
isPin: v.pin ? 1 : 0,
|
||
};
|
||
return data;
|
||
});
|
||
return dataList;
|
||
},
|
||
|
||
getSkecthBoard(boardData: any) {
|
||
boardData = boardData || []
|
||
let sketchBoards = boardData.map((v: any) => {
|
||
let data = {
|
||
designType: v.resData.designType,
|
||
isPin: v.pin ? 1 : 0,
|
||
level2Type: v.categoryValue,
|
||
sketchBoardId: v.resData.id,
|
||
};
|
||
return data;
|
||
});
|
||
return sketchBoards;
|
||
},
|
||
|
||
getColorBoard(boardData: any) {
|
||
boardData = boardData || []
|
||
let colorBoards = boardData.map((v: any) => {
|
||
let data = {
|
||
id: v.id,
|
||
name: v.name,
|
||
tcx: v.tcx,
|
||
gradient:v.gradient,
|
||
rgbValue: "",
|
||
};
|
||
data.rgbValue = `${v.rgbValue.r} ${v.rgbValue.g} ${v.rgbValue.b}`;
|
||
return data;
|
||
});
|
||
return colorBoards;
|
||
},
|
||
deleteDesignCollection(list:any,index:any){
|
||
list.splice(index,1)
|
||
},
|
||
|
||
likeDesignCollection(design: any, index: any,type:any) {
|
||
if (this.likeLoading) {
|
||
return;
|
||
}
|
||
if(type != 'Design'){
|
||
this.setNoDesignLike(design,index,type,'like')
|
||
return
|
||
}
|
||
let data = {
|
||
designItemId: design.designItemId,
|
||
userGroupId: this.store.state.HomeStoreModule.userGroupId,
|
||
projectId: this.store.state.Workspace.probjects.id,
|
||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||
designPythonOutfitId:design.designOutfitId?design.designOutfitId:design.designPythonOutfitId
|
||
};
|
||
|
||
|
||
this.likeLoading = true;
|
||
Https.axiosPost(Https.httpUrls.designLike, data)
|
||
.then((rv: any) => {
|
||
if (rv) {
|
||
let value:any = {
|
||
...design,
|
||
id:rv.userLikeId,
|
||
groupDetailId:rv.userLikeId,
|
||
userLikeSortId:rv.userLikeSortId,
|
||
userLikeGroupId:rv.userGroupId,
|
||
sort:rv.sort,
|
||
}
|
||
this.store.commit("setUserGroupId", rv.userGroupId);
|
||
design.groupDetailId = rv.groupDetailId;
|
||
this.store.commit(
|
||
"addLikeDesignCollectionList",
|
||
value
|
||
);
|
||
this.setLikeDislLike('like',value)
|
||
if(index != -1)this.store.commit("deleteDesignCollectionList", index);
|
||
if (this.startDesignType === "resDesign") {
|
||
this.getHistoryChoose(this.userGroupId, "like");
|
||
}
|
||
}
|
||
this.likeLoading = false;
|
||
})
|
||
.catch((rv) => {
|
||
this.likeLoading = false;
|
||
});
|
||
},
|
||
|
||
//不喜欢设计
|
||
dislikeDesignCollection(design:any,type:string, index: any) {
|
||
let data = {
|
||
designId: design.designId || this.designId,
|
||
designPythonOutfitId:design.designOutfitId,
|
||
groupDetailId: design.groupDetailId || design.id,
|
||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||
};
|
||
if(type != 'Design'){
|
||
this.setNoDesignLike(design,index,type,'disLike')
|
||
return
|
||
}
|
||
if (this.disLikeLoading) {
|
||
return;
|
||
}
|
||
this.disLikeLoading = true;
|
||
Https.axiosPost(Https.httpUrls.designDislike, data)
|
||
.then((rv: any) => {
|
||
if (rv) {
|
||
this.store.commit("addDesignCollectionList", [design]);
|
||
this.store.commit(
|
||
"deleteLikeDesignCollectionList",
|
||
index
|
||
);
|
||
this.likeDesignCollectionList.forEach((item:any)=>{
|
||
if(item.sort > design.sort){
|
||
item.sort-=1
|
||
}
|
||
})
|
||
|
||
this.setLikeDislLike('disLike',design)
|
||
// if (!this.likeDesignCollectionList.length) {
|
||
// this.store.commit("deleteUserGroupId");
|
||
// }
|
||
}
|
||
this.disLikeLoading = false;
|
||
})
|
||
.catch((rv) => {
|
||
this.disLikeLoading = false;
|
||
});
|
||
},
|
||
|
||
|
||
//获取选择的组
|
||
getHistoryChoose(userGroupId: any, type: any) {
|
||
|
||
this.isShowMark = true;
|
||
let url =
|
||
Https.httpUrls.historyChoose + `?userGroupId=${userGroupId}`;
|
||
Https.axiosGet(url)
|
||
.then((rv: any) => {
|
||
this.setPortfolio(rv.portfolioDTO)
|
||
this.store.commit("setUserGroupId", rv.userGroupId);
|
||
this.dealHistoryChooseData(rv, type);
|
||
this.isShowMark = false;
|
||
})
|
||
.catch((rv) => {
|
||
this.isShowMark = false;
|
||
});
|
||
},
|
||
getWorks(userGroupId: any, type: any) {
|
||
let data:any = {
|
||
"accountId": 0,
|
||
"collectionId": 0,
|
||
"coverId": 0,
|
||
"createDate": "",
|
||
"id": userGroupId,
|
||
"isDeleted": 0,
|
||
"portfolioDes": "",
|
||
"portfolioName": "",
|
||
"portfolioType": "",
|
||
"status": 0,
|
||
"updateDate": "",
|
||
"userLikeGroupId":''
|
||
}
|
||
this.isShowMark = true;
|
||
Https.axiosPost(Https.httpUrls.setPorfolioChoose, data).then(
|
||
(rv: any) => {
|
||
this.setPortfolio(rv.portfolioDTO)
|
||
this.store.commit("setUserGroupId", rv.userGroupId);
|
||
this.dealHistoryChooseData(rv, type);
|
||
this.isShowMark = false;
|
||
}
|
||
).catch((res)=>{
|
||
this.isShowMark = false;
|
||
});
|
||
},
|
||
//处理选择组的数据
|
||
dealHistoryChooseData(data: any, type: any) {
|
||
let collectionData = {
|
||
disposeMoodboard: data.collection.moodTemplateId?[{
|
||
id:data.collection.moodTemplateId,
|
||
imgUrl:data.collection.moodTemplateUrl,
|
||
resData:{
|
||
name:data.collection.moodTemplateName,
|
||
}
|
||
}]:[],
|
||
moodboardPosition:data.collection.moodboardPosition?JSON.parse(data.collection.moodboardPosition):{},
|
||
moodboardFiles: this.dealViewChooseData(
|
||
data.collection.moodBoards,"Moodboard"
|
||
),
|
||
printboardFiles: this.dealViewChooseData(
|
||
data.collection.printBoards,"Printboard"
|
||
),
|
||
generatePrintFiles: [],
|
||
colorBoards: this.dealViewChooseColor(
|
||
data.collection.colorBoards
|
||
),
|
||
sketchboardFiles: this.dealViewChooseData(
|
||
data.collection.sketchBoards,"Sketchboard"
|
||
),
|
||
marketingSketchFiles: this.dealViewChooseData(
|
||
data.collection.marketingSketchs,""
|
||
),
|
||
|
||
};
|
||
this.store.commit("setAllBoardDataChoose", collectionData);
|
||
// this.store.commit('clearShowSketchboard')
|
||
this.store.commit("setShowSketchboard", data.collection.sketchBoards);
|
||
this.store.commit(
|
||
"setDesignCollectionId",
|
||
data.collection.collectionId
|
||
);
|
||
if (type === "normal") {
|
||
|
||
let likeDesignCollectionList = data.userLikeDetails.map(
|
||
(v: any) => {
|
||
let data = {
|
||
...v,
|
||
groupDetailId: v.id,
|
||
designItemUrl: v.designOutfitUrl,
|
||
designItemId: v.designItemId,
|
||
};
|
||
return data;
|
||
}
|
||
);
|
||
this.store.commit(
|
||
"setLikeDesignCollectionList",
|
||
likeDesignCollectionList
|
||
);
|
||
}
|
||
this.setSystemDesigner(100)
|
||
},
|
||
|
||
//统一处理选择组的渲染数据
|
||
dealViewChooseData(data: any,str:string) {
|
||
if (!data) {
|
||
return [];
|
||
}
|
||
let filesList = data.map((v: any) => {
|
||
let newData: any = {
|
||
imgUrl: v.url?v.url:v.designOutfitUrl,
|
||
id: v.id,
|
||
status: "done",
|
||
resData: v,
|
||
type_:{
|
||
type1:'material',
|
||
type2:v.level1Type
|
||
}
|
||
};
|
||
if (v.level1Type === "Sketchboard") {
|
||
newData.pin = v.isPin;
|
||
newData.categoryValue = v.level2Type;
|
||
newData.level2Type = v.level2Type;
|
||
}
|
||
if (v.level1Type === "Printboard") {
|
||
newData.pin = v.isPin;
|
||
newData.level2Type = v.level2Type;
|
||
newData.categoryValue = v.level2Type;
|
||
}
|
||
return newData;
|
||
});
|
||
return filesList;
|
||
},
|
||
|
||
//统一处理选择组的渲染数据
|
||
dealViewChooseColor(data: any) {
|
||
let colorList = data.map((v: any) => {
|
||
let rgbValue = v.rgbValue.split(" ");
|
||
let newData: any = {
|
||
id: v.id,
|
||
name: v.name,
|
||
tcx: v.tcx || "",
|
||
rgbValue: {
|
||
r: rgbValue[0],
|
||
g: rgbValue[1],
|
||
b: rgbValue[2],
|
||
a: 1,
|
||
},
|
||
};
|
||
if(v.gradient){
|
||
newData.gradient = v.gradient;
|
||
}else{
|
||
delete newData.gradient;
|
||
}
|
||
return newData;
|
||
});
|
||
return colorList;
|
||
},
|
||
|
||
//销毁图片详情
|
||
setDetailDestroy() {
|
||
// let designDetail: any = this.$refs.designDetail;
|
||
// designDetail.destroy();
|
||
this.detailDestroy = false
|
||
},
|
||
//打开图片详情
|
||
designDetail(
|
||
design: any,
|
||
index: number,
|
||
collectionList: any,
|
||
type: string
|
||
) {
|
||
// if()
|
||
if(this.isMove)return
|
||
if(design.resultType != "Design"){
|
||
this.setEditDesignType(collectionList,index,design.resultType,'edit',type)
|
||
return
|
||
}
|
||
design.designOutfitId = design.designPythonOutfitId?design.designPythonOutfitId:design.designOutfitId
|
||
let data = {
|
||
design: design,
|
||
index: index,
|
||
collectionList: collectionList,
|
||
type: type,
|
||
};
|
||
this.detailDestroy = true
|
||
nextTick(()=>{
|
||
let designDetail: any = this.$refs.designDetail;
|
||
designDetail.showDesignDetailModal(data);
|
||
})
|
||
},
|
||
|
||
//完成单个图片设计
|
||
finishRedesign(event: any) {
|
||
let { design, index, type } = event;
|
||
if (type === "disLike") {
|
||
this.store.commit("setSingleDesignCollectionList", {
|
||
index: index,
|
||
design: design,
|
||
});
|
||
} else {
|
||
this.store.commit("setSingleLikeDesignCollectionList", {
|
||
index: index,
|
||
design: design,
|
||
});
|
||
}
|
||
this.setDetailDestroy()
|
||
},
|
||
setTask(data:any){
|
||
this.$emit('setTask',data)
|
||
// this.exportModel()
|
||
},
|
||
setShowHide(str:string){
|
||
if(str == 'recycleDomHidden')this.recycleDomHidden = !this.recycleDomHidden
|
||
if(str == 'domHidden')this.domHidden = !this.domHidden
|
||
// this.setSystemDesigner(0)
|
||
}
|
||
},
|
||
});
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.designPage {
|
||
width: 100%;
|
||
height: 100%;
|
||
// padding-right:5rem;
|
||
overflow: initial !important;
|
||
position: relative;
|
||
.page_content {
|
||
position: relative;
|
||
|
||
|
||
.designPage_left_bottom{
|
||
position: absolute;
|
||
width: 4rem;
|
||
height: 7rem;
|
||
background: #fff;
|
||
border: 2px solid;
|
||
border-right: none;
|
||
border-radius: 2rem 0 0 2rem;
|
||
top: 50%;
|
||
transform: translate(-100%,-50%);
|
||
left: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 2;
|
||
cursor: pointer;
|
||
>span{
|
||
transition: all .3s;
|
||
transform: rotate(90deg);
|
||
&.active{
|
||
transform: rotate(270deg);
|
||
}
|
||
}
|
||
|
||
}
|
||
.page_content_body {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
// padding-bottom: 4rem;
|
||
box-sizing: border-box;
|
||
z-index:1;
|
||
.right_content_header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 6.5rem;
|
||
align-items: center;
|
||
padding: 0 3.2rem 0 1.9rem;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
position: relative;
|
||
.right_content_export{
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
.icon-xiala{
|
||
cursor: pointer;
|
||
transition: .3s all;
|
||
margin-left: 1rem;
|
||
}
|
||
.icon_rotate{
|
||
-moz-transform: rotate(180deg);
|
||
-webkit-transform: rotate(180deg);
|
||
transform: rotate(180deg);
|
||
animation-direction: 0.5s;
|
||
}
|
||
.export_nav{
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: absolute;
|
||
top: 5.5rem;
|
||
width: 100%;
|
||
background: #fff;
|
||
padding: 1rem;
|
||
border: 2px solid;
|
||
z-index: 2;
|
||
label{
|
||
margin: 0;
|
||
}
|
||
}
|
||
}
|
||
.content_header_left {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.icon-dangqianweizhi {
|
||
font-size: 1.6rem;
|
||
color: #000;
|
||
}
|
||
|
||
.content_header_des {
|
||
font-size: 1.6rem;
|
||
color: #000000;
|
||
margin-left: 1rem;
|
||
font-weight: 900;
|
||
}
|
||
}
|
||
}
|
||
.designPage_body {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
// padding-left: 0.7rem;
|
||
box-sizing: border-box;
|
||
// overflow: hidden;
|
||
|
||
.designPage_left {
|
||
// width: 44.4rem;
|
||
height: 100%;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
position: relative;
|
||
// overflow: hidden;
|
||
|
||
|
||
.designPage_left_content {
|
||
height: 100%;
|
||
width: 55rem;
|
||
overflow: hidden;
|
||
// transition: all .3s;
|
||
padding-right: 1.2rem;
|
||
&.active{
|
||
padding-right: 0;
|
||
width: 0;
|
||
}
|
||
.home_left_info {
|
||
height: 100%;
|
||
display: flex;
|
||
background: #f6f6fa;
|
||
border-radius: 2rem;
|
||
flex-direction: column;
|
||
.left_info_content {
|
||
width: 100%;
|
||
height: calc(100% - 6.9rem);
|
||
overflow-y: auto;
|
||
&.left_info_content::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.left_info_content_body {
|
||
width: 100%;
|
||
}
|
||
}
|
||
.left_info_hint{
|
||
display: flex;
|
||
span{
|
||
font-size: 1.3rem;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.designPage_right {
|
||
// width: calc(100% - 44.4rem);
|
||
flex: 1;
|
||
height: 100%;
|
||
width: 100%;
|
||
// overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
.designPage_left_bottom{
|
||
border-radius: 0 2rem 2rem 0rem;
|
||
left: 2rem;
|
||
top: 50%;
|
||
left: auto;
|
||
right: 0;
|
||
transform: translate(100%, -50%);
|
||
// top: calc(50% - 10.4rem / 2);
|
||
border: 2px solid;
|
||
border-left: none;
|
||
background: #000;
|
||
color: #fff;
|
||
flex-direction: column;
|
||
&.active{
|
||
right: 43rem;
|
||
transform: translate(0, -50%);
|
||
}
|
||
}
|
||
.right_top {
|
||
padding: 1rem 3.2rem 2rem 1.2rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
box-shadow: 0rem 0.2rem 8rem 0rem rgba(238, 238, 244, 0.25);
|
||
background: rgba(255, 255, 255, 0.4);
|
||
transition: all .3s;
|
||
&.active{
|
||
overflow: hidden;
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
height: 0;
|
||
}
|
||
.right_top_left {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
.button_margin_14 {
|
||
margin-left: 1.4rem;
|
||
}
|
||
.silder{
|
||
display: flex;
|
||
align-items: center;
|
||
.text{
|
||
font-weight: 600;
|
||
font-size: 1.8rem;
|
||
}
|
||
.system_silder{
|
||
margin: 0 3rem;
|
||
width: 12rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.right_content_block_box{
|
||
flex: 1;
|
||
display: flex;
|
||
overflow: hidden;
|
||
}
|
||
.right_content_block {
|
||
flex: 1;
|
||
display: flex;
|
||
width: 0;
|
||
flex-direction: column;
|
||
&.recycleBin{
|
||
flex: none;
|
||
margin-left: 0;
|
||
width: 0;
|
||
overflow: hidden;
|
||
&.recycleBinShow{
|
||
width: auto;
|
||
margin-left: 2rem;
|
||
}
|
||
.right_content_body {
|
||
width: 45rem;
|
||
// width: 55rem;
|
||
.right_content_img_block{
|
||
|
||
.content_img_block{
|
||
width: 16rem;
|
||
height: 23rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
&.right_content_block::-webkit-scrollbar{display: none;}
|
||
&.active{
|
||
overflow: hidden;
|
||
}
|
||
|
||
.right_content_body {
|
||
// padding: 0 1.8rem 0 1.2rem;
|
||
// height: calc(50% - 4.5rem);
|
||
flex: 1;
|
||
overflow: auto;
|
||
background: #f6f6fa;
|
||
border-radius: 2rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.right_content_img_block {
|
||
// overflow-y: auto;
|
||
height: 100%;
|
||
flex: 1;
|
||
display: flex;
|
||
width: auto;
|
||
// overflow: hidden;
|
||
align-items: center;
|
||
// padding-bottom: 1rem;
|
||
overflow-x: auto;
|
||
justify-content: center;
|
||
&.active::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
// &.active::-webkit-scrollbar-button:single-button{
|
||
// display: none;
|
||
// }
|
||
// &.active::-webkit-scrollbar {
|
||
// /* 竖轴的宽度 */
|
||
// width: 1rem;
|
||
// /* 横轴的高度 */
|
||
// height: 1rem;
|
||
// transition: all .3s;
|
||
// }
|
||
// /* 进度 */
|
||
// &.active::-webkit-scrollbar-thumb {
|
||
// border-radius: 1rem;
|
||
// background: rgba(238, 238, 244, 0);
|
||
// }
|
||
// /* 轨道 */
|
||
// &.active::-webkit-scrollbar-track {
|
||
// border-radius: 1rem;
|
||
// background: rgba(238, 238, 244, 0);
|
||
// }
|
||
// &.active:hover {
|
||
// // overflow-x: scroll;
|
||
// &.active::-webkit-scrollbar-thumb {
|
||
// background: #543087;
|
||
// }
|
||
// /* 轨道 */
|
||
// &.active::-webkit-scrollbar-track {
|
||
// background: rgba(84, 48, 135,.2);
|
||
// }
|
||
// }
|
||
>div{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
// padding: 0 2.8rem 0 0.9rem;
|
||
width: 100%;
|
||
height: 100%;
|
||
// align-content: flex-start;
|
||
overflow-x: hidden;
|
||
position: relative;
|
||
&::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
}
|
||
.content_img_block {
|
||
// width: 24rem;
|
||
// height: 37rem;
|
||
width: calc(33.33% - 30px);
|
||
height: calc((33.33% - 30px) * 1.54);
|
||
box-sizing: border-box;
|
||
margin: 5px;
|
||
// min-height: 271px;
|
||
// max-height: 80%;
|
||
|
||
display: inline-block;
|
||
position: relative;
|
||
vertical-align: top;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: absolute;
|
||
transition: top,left .3s;
|
||
&:hover .btn{
|
||
display: flex;
|
||
}
|
||
.content_img_flex {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 2rem;
|
||
border: 2px solid #E0E0E0;
|
||
overflow: hidden;
|
||
background: #fff;
|
||
}
|
||
&.active{
|
||
.icon_like,.icon_delete{
|
||
display: block;
|
||
}
|
||
.content_img_flex {
|
||
border: 2px solid #000;
|
||
}
|
||
}
|
||
.content_img {
|
||
// max-width: 100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
// max-height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.btn{
|
||
top: 1rem;
|
||
right: 1rem;
|
||
display: flex;
|
||
position: absolute;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
> i{
|
||
cursor: pointer;
|
||
width: 3rem;
|
||
height: 3rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
> .btnOpen{
|
||
position: absolute;
|
||
width: max-content;
|
||
left: 30px;
|
||
top: 30px;
|
||
transform: translateX(-100%);
|
||
background: #e4e4e7;
|
||
padding: 12px;
|
||
border-radius: 12px;
|
||
display: none;
|
||
z-index: 99;
|
||
&.active{
|
||
display: block;
|
||
}
|
||
> .item{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
padding: 8px;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
&:last-child{
|
||
margin: 0;
|
||
}
|
||
> .text{
|
||
font-size: 12px;
|
||
margin-right: 10px;
|
||
}
|
||
&:hover{
|
||
background: #efeff1;
|
||
}
|
||
}
|
||
}
|
||
.icon_like,.icon_delete {
|
||
font-size: 1.4rem;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.icon_delete{
|
||
top: 5rem;
|
||
}
|
||
.icon-jushoucang {
|
||
color: #000;
|
||
}
|
||
.icon-jushoucanggift {
|
||
// color: rgba(52, 53, 121, 1);
|
||
color: #000;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.page_content_bg {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.progress_mark {
|
||
background: #ffffff;
|
||
width: 100%;
|
||
height: 100%;
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 9999;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.mark_content {
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
</style> |