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

commit

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

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

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

319
src/component/Detail/DesignDetailAlter.vue
View File

@@ -27,80 +27,120 @@
</div>
</div>
<div v-show="openClick == 1" class="detail_Upload_item">
<div class="moodboard_body">
<div class="upload_img_body scroll_style">
<div class="upload_item">
<div class="moodboard_body">
<div class="upload_img_body scroll_style">
<div class="upload_item">
<div
class="upload_file_item"
v-for="(file, index) in uploadList"
:key="file"
@click.stop="selectImgItem(file)"
>
<div
class="upload_file_item"
v-for="(file, index) in uploadList"
:key="file"
@click.stop="selectImgItem(file)"
class="upload_file_item_content"
v-show="file?.status === 'uploading'"
>
<div
class="upload_file_item_content"
v-show="file?.status === 'uploading'"
>
<a-spin :indicator="indicator" tip="Uploading..." />
</div>
<div
class="upload_file_item_content"
v-show="file?.status === 'done'"
>
<img :src="file?.url" class="upload_img" />
<div class="operate_file_block" v-show="selectCode == 'Sketchboard'">
<div class="select_img_type">
<div
class="select_category"
@click.stop="showFileCategory(file)"
>
{{ current.type }}
</div>
<a-spin :indicator="indicator" tip="Uploading..." />
</div>
<div
class="upload_file_item_content"
v-show="file?.status === 'done'"
>
<img :src="file?.url" class="upload_img" />
<div class="operate_file_block" v-show="selectCode == 'Sketchboard'">
<div class="select_img_type">
<div
class="select_category"
@click.stop="showFileCategory(file)"
>
{{ current.type }}
</div>
</div>
<div
class="delete_file_block"
@click.stop="deleteFile(index)"
>
<span class="icon iconfont icon-shanchu"></span>
</div>
</div>
<div
class="delete_file_block"
@click.stop="deleteFile(index)"
>
<span class="icon iconfont icon-shanchu"></span>
</div>
</div>
<div
class="upload_file_item upload_component"
v-show="uploadList.length != 8"
</div>
<div
class="upload_file_item upload_component"
v-show="uploadList.length != 8"
>
<a-upload
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:data="{
...upload,
}"
:headers="{ Authorization: token }"
v-model:file-list="uploadList"
:before-upload="beforeUpload"
:maxCount="8 - uploadList.length"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => upFileUploadChange(file)"
>
<a-upload
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:data="{
...upload,
}"
:headers="{ Authorization: token }"
v-model:file-list="uploadList"
:before-upload="beforeUpload"
:maxCount="8 - uploadList.length"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => upFileUploadChange(file)"
<div
class="upload_tip_block"
v-show="uploadList.length != 8"
>
<div
class="upload_tip_block"
v-show="uploadList.length != 8"
>
<i class="fi fi-br-upload"></i>
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
</div>
</a-upload>
</div>
<i class="fi fi-br-upload"></i>
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
</div>
</a-upload>
</div>
</div>
</div>
</div>
</div>
<div v-show="openClick == 2" class="detail_Library_item">
<div class="material_content_body scroll_style">
<div class="content_img_item" v-for="(file) in clothesList" :key="file.id" :class="{active:selectCode !== 'Moodboard'}">
<div class="content_img_item_block" :class="{active:file?.checked}">
<img :class="[ selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
<div v-if="selectCode == 'Sketchboard'" class="operate_file_block">
<div class="select_img_type">
<div
class="select_category"
@click.stop="showFileCategory(file)"
>
{{ getSketchLabel(file.level2Type) }}
<div
:class="[
'icon',
'iconfont',
'icon-xiala',
file.categoryShow
? 'icon_rotate'
: '',
]"
></div>
</div>
<div
class="category_list"
v-show="file.categoryShow"
>
<div
:class="[
'category_item',
file.level2Type == cate.value
? 'select_category_item'
: '',
]"
v-for="(
cate, index
) in disignTypeList"
:key="index"
@click.stop="selectFileCategory(file, cate)"
>
{{ cate.label }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -270,6 +310,8 @@ export default defineComponent({
}) //顔色选择器默认颜色
let selectColorList = ref({
})
let workspace = ref({})
return{
store,
current,
@@ -287,54 +329,10 @@ export default defineComponent({
select,
selectColor,
selectColorList,
workspace,
}
},
watch:{
selectColor(newVal,oldVal){
let DesignDetailEnd = this.$refs.DesignDetailEnd
DesignDetailEnd.colorList[DesignDetailEnd.selectIndex] = newVal
let colorList = DesignDetailEnd.colorList.filter((v) => v && Object.keys(v).length)
this.setColorboardList(colorList)
clearInterval(this.getPantongNameTime)
this.getPantongNameTime = setTimeout(() => {
this.getPantongName(newVal.rgba)
}, 100);
}
},
computed:{
getSketchLabel(value) {
return (value) => {
let lable = "";
for (let item of this.disignTypeList) {
if (item.value === value) {
lable = item.label;
break;
}
}
return lable;
};
},
getSelectRGB(selectColor){
return (selectColor)=>{
let rgba = selectColor.rgba
let data = {
r:rgba?.r || rgba?.r===0 ? rgba?.r : 255,
g:rgba?.g || rgba?.g===0 ? rgba?.g : 255,
b:rgba?.b || rgba?.b===0 ? rgba?.b : 255,
a:rgba?.a || rgba?.a===1 ? rgba?.a : 1,
hex:selectColor.hex == undefined ? '#FFFFFF': selectColor.hex
}
if(data.a != 1 || data.a != 0){
data.hex = selectColor.hex8?selectColor.hex8:selectColor.hex
}
return data
}
},
},
data(){
return{
@@ -372,13 +370,66 @@ export default defineComponent({
},
spin: true,
}),
getPantongNameTime:true
getPantongNameTime:true,
workspaceCom:{}
}
},
computed:{
getSketchLabel(value) {
return (value) => {
let lable = "";
for (let item of this.disignTypeList) {
if (item.value === value) {
lable = item.label;
break;
}
}
return lable;
};
},
getSelectRGB(selectColor){
return (selectColor)=>{
let rgba = selectColor.rgba
let data = {
r:rgba?.r || rgba?.r===0 ? rgba?.r : 255,
g:rgba?.g || rgba?.g===0 ? rgba?.g : 255,
b:rgba?.b || rgba?.b===0 ? rgba?.b : 255,
a:rgba?.a || rgba?.a===1 ? rgba?.a : 1,
hex:selectColor.hex == undefined ? '#FFFFFF': selectColor.hex
}
if(data.a != 1 || data.a != 0){
data.hex = selectColor.hex8?selectColor.hex8:selectColor.hex
}
return data
}
},
},
mounted(){
},
watch:{
selectColor(newVal,oldVal){
let DesignDetailEnd = this.$refs.DesignDetailEnd
DesignDetailEnd.colorList[DesignDetailEnd.selectIndex] = newVal
let colorList = DesignDetailEnd.colorList.filter((v) => v && Object.keys(v).length)
this.setColorboardList(colorList)
clearInterval(this.getPantongNameTime)
this.getPantongNameTime = setTimeout(() => {
this.getPantongName(newVal.rgba)
}, 100);
},
workspaceCom(newVal,oldVal){
this.workspace = newVal
this.getPosition()
},
},
mounted () {
this.token = getCookie("token") || "";
this.uploadUrl = getUploadUrl();
let dropperDom = document.getElementsByClassName("detail_modal_body_select")[0].getElementsByClassName('vc-sketch-color-wrap')[0]
dropperDom.addEventListener('click',async ()=>{
try {
@@ -433,8 +484,31 @@ export default defineComponent({
}
let DesignDetailEnd = this.$refs.DesignDetailEnd
DesignDetailEnd.init(num)
this.workspaceCom = computed(()=>{
return this.store?.state?.Workspace?.workspace
})
},
getPosition(){
let params
if(this.workspace.sex == 'Female'){
params = 'FemalePosition'
}else{
params = 'MalePosition'
}
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv) => {
if (rv) {
let arr = []
rv.forEach((item) => {
let obj = {
value:item.name,
label:item.name,
}
arr.push(obj)
});
this.disignTypeList = arr
}
})
},
deleteFile(num){
this.uploadList.splice(num, 1)
},
@@ -506,11 +580,12 @@ export default defineComponent({
file.categoryShow = true;
document.addEventListener("click", this.hiddenFileCategory);
},
selectFileCategory(file, cate,list) {
file.category = cate.value;
for (let item of list) {
selectFileCategory(file, cate) {
file.level2Type = cate.value;
for (let item of this.clothesList) {
item.categoryShow = false;
}
this.setSketchLibrary(file)
},
hiddenFileCategory() {
for (let item of this.clothesList) {
@@ -518,6 +593,17 @@ export default defineComponent({
}
document.removeEventListener("click", this.hiddenFileCategory);
},
setSketchLibrary(item){
let data = {
libraryId:item.id,
level2Type:item.level2Type,
}
Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
(rv) => {
}
).catch((res)=>{
});
},
selectImgItem(imgData){
if(this.selectCode == 'Sketchboard'){
// this.current.id_ = imgData.id
@@ -526,10 +612,16 @@ export default defineComponent({
DesignDetailEnd.setSketchImg(imgData)
// DesignDetailEnd.sketchImg.id_ = imgData.id
// DesignDetailEnd.sketchImg.path = imgData.url
}else{
this.current.printObject.path = imgData.url
this.current.printObject.id = imgData.id
this.current.printObject.path = imgData?.url
this.current.printObject.id = imgData?.id
this.current.printObject.minIOPath = imgData.minIOPath
this.current.printObject.prints = [{
minIOPath:imgData.minIOPath,
path:imgData?.url
}]
// console.log(this.current.printObject,imgData);
}
@@ -538,7 +630,6 @@ export default defineComponent({
},
//请求我的印花&&模型
getLibraryList(){
let data = {
level1Type:this.selectCode,
// level2Type:this.designType,
@@ -547,6 +638,7 @@ export default defineComponent({
size:10,
}
this.isShowLoading = true
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
(rv) => {
this.clothesList = rv.content
@@ -561,6 +653,7 @@ export default defineComponent({
open(num) {
this.openClick = num;
if(num ==2 ){
this.getLibraryList()
}
},
@@ -904,7 +997,7 @@ export default defineComponent({
// margin-bottom: 2.8rem;
margin-bottom: 2rem;
padding: 0;
height: 9rem;
// height: 9rem;
&.active{
margin-bottom: 2rem;
.pin_block{

77
src/component/Detail/DesignDetailEnd.vue
View File

@@ -13,10 +13,10 @@
</div>
<div class="print_left">
<!-- <img :src="current.path" :title="current.type"> -->
<img :src="current?.printObject?.path" v-if="current?.printObject?.path && current?.printObject?.path != 'none'">
<img :src="current?.printObject?.prints?.[0]?.path" v-if="current?.printObject?.prints?.[0]?.path">
<div src="@/assets/images/homePage/null_img.png" v-else ></div>
<div
v-show="current?.printObject?.path && current?.printObject?.path != 'none'"
v-show="current?.printObject?.prints?.[0]?.path"
class="delete_file_block"
@click="deleteFile"
>
@@ -35,7 +35,7 @@
class="habit_Overal_Single_text"
:class="{ active: !overallSingle }"
>
Overal
Overall
</div>
<a-switch @click="setOveralSingle" v-model:checked="overallSingle" />
<div
@@ -57,8 +57,8 @@
</div>
</div>
<div class="result_apparel_print_img">
<img v-show="type_==1" class="result_appare_img" :src="sketchImg?.id_?sketchImg?.path:current?.layersObject?.[1]?.imageUrl" :title="current?.type">
<img v-show="type_==2" class="result_print_img" :src="current?.layersObject?.[1]?.imageUrl" :title="current?.type" @click="setPrint">
<img v-show="type_==1" class="result_appare_img" :src="sketchImg?.id_?sketchImg?.path:current?.path" :title="current?.type">
<img v-show="type_==2" class="result_print_img" :src="current?.path" :title="current?.type" @click="setPrint">
</div>
</div>
@@ -82,7 +82,8 @@
</div>
</div>
<div v-show="type_ == 1 || type_ == 3" @click.stop="setPreview" class="subitOkPreviewBtn">preview</div>
<div v-show="type_ == 2" @click.stop="setPrint" class="subitOkPreviewBtn">Layout</div>
<div v-if="type_ == 2 && current?.printObject?.prints?.[0]?.path != null" @click.stop="setPrint" class="subitOkPreviewBtn">Layout</div>
<div v-else-if="type_ == 2 && current?.printObject?.prints?.[0]?.path == null" @click.stop="setPreview" class="subitOkPreviewBtn">preview</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
@@ -111,7 +112,7 @@ export default defineComponent({
let sketchImg = ref({})
//印花
let overallSingle = ref(false)
let systemDesignerPercentage = ref(0)
let systemDesignerPercentage = ref(30)
//颜色
let colorList = ref([{},{},{},{},{},{},{},{}])
@@ -144,14 +145,14 @@ export default defineComponent({
// this.current = JSON.parse(JSON.stringify(this.currentItem))
this.type_ = num
this.colorList[this.selectIndex] = this.$parent.selectColor
this.overallSingle = this.current.printObject.ifSingle
this.systemDesignerPercentage = this.current.printObject.scale*100
this.overallSingle = this.current?.printObject?.ifSingle == null?false:this.current?.printObject?.ifSingle
this.systemDesignerPercentage = this.current?.printObject?.scale?this.current?.printObject?.scale:.3*100
},
//模型
setSketchImg(v){
this.sketchImg.id_ = v.id
this.sketchImg.path = v.url
console.log(this.sketchImg);
this.sketchImg.minIOPath = v.minIOPath
},
//印花
systemDesigner(num) {
@@ -164,7 +165,7 @@ export default defineComponent({
return `${value*3}%`;
},
setPrint(){
if(this.current.printObject.path && this.current?.printObject?.path != 'none'){
if(this.current.printObject.prints[0].path){
let DesignPrintOperation = this.$refs.DesignPrintOperation
DesignPrintOperation.init()
}else{
@@ -177,11 +178,8 @@ export default defineComponent({
},
//颜色
selectColorItem(index,color){
let hex
let parent = this.$parent
this.selectIndex = index
@@ -213,44 +211,61 @@ export default defineComponent({
setPreview(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let index
let data = this.store.state.DesignDetailModule.designPreviewData
let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
designItemDetail.clothes.forEach((v,ind)=>{
if(v.id == this.current.id){
index = ind
}
})
if(this.type_ == 1){
data.designSingleItemDTOList[0].id = this.sketchImg.id_? this.sketchImg.id_:this.current.id_
data.designSingleItemDTOList[0].path =this.sketchImg.path? this.sketchImg.path: this.current.path
data.designSingleItemDTOList[index].id = this.sketchImg.id_? this.sketchImg.id_:this.current.id_
data.designSingleItemDTOList[index].path =this.sketchImg.minIOPath? this.sketchImg.minIOPath: this.current.minIOPath
// data.designSingleItemDTOList[index].printObject.prints = []
// this.current?.printObject?.path == null ? [] : [{
// location:[0,0],
// angle:0,
// priority:1,
// path:this.current?.printObject?.path?this.current.printObject.path :'',
// minIOPath:this.current?.printObject?.minIOPath?this.current.printObject.minIOPath :'',
// }],
// data.designSingleItemDTOList[index].printObject.ifSingle = false
}else if(this.type_ == 2){
this.setPrint()
return
data.designSingleItemDTOList[index].printObject.ifSingle = false
data.designSingleItemDTOList[index].printObject.prints = []
}else if(this.type_ == 3){
let color = `${this.$parent.selectColor.rgba.r} ${this.$parent.selectColor.rgba.g} ${this.$parent.selectColor.rgba.b}`
data.designSingleItemDTOList[0].color = color
data.designSingleItemDTOList[index].color = color
}
// let priority = designItemDetail.clothes.map((v)=>{
// return v.type
// })
data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
this.loadingShow = true
console.log(data,'data');
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv) => {
console.log(rv,'rv');
this.store.commit("setDesignPreviewData", data);
designItemDetail.clothes[index].color = rv.clothes[0].color
designItemDetail.clothes[index].printObject.path = rv.clothes[0].printObject.path
designItemDetail.clothes[index].layersObject = rv.clothes[0].layersObject
designItemDetail.currentFullBodyView = rv.currentFullBodyView
designItemDetail.clothes[index].color = rv.clothes[index].color
designItemDetail.clothes[index].printObject = rv.clothes[index].printObject
designItemDetail.clothes[index].layersObject = rv.clothes[index].layersObject
designItemDetail.clothes[index].minIOPath = rv.clothes[index].minIOPath
designItemDetail.clothes[index].path = rv.clothes[index].path
// rv.clothes[0].layersObject.forEach((v)=>{
// designItemDetail.clothes[index].layersObject[0].imageUrl = rv.clothes[0].layersObject[0].imageUrl
// designItemDetail.clothes[index].layersObject[0].maskUrl = rv.clothes[0].layersObject[0].maskUrl
// designItemDetail.clothes[index].layersObject[1].imageUrl = rv.clothes[0].layersObject[1].imageUrl
// designItemDetail.clothes[index].layersObject[1].maskUrl = rv.clothes[0].layersObject[1].maskUrl
// })
designItemDetail.clothes.forEach((item,index)=>{
let a
// console.log(this.store.state.DesignDetailModule.designItemDetail.clothes[index].layersObject[0].id);
if(item.layersObject[0].imageCategory.indexOf("back") == -1){
a = item.layersObject[0]
item.layersObject[0] = item.layersObject[1]
item.layersObject[1] = a
}
item.layersObject[0].id = this.store.state.DesignDetailModule.designItemDetail.clothes[index].layersObject[0].id
item.layersObject[1].id = this.store.state.DesignDetailModule.designItemDetail.clothes[index].layersObject[1].id
})
this.loadingShow = false
this.store.commit("setDesignItemDetail", designItemDetail);
console.log(designItemDetail,rv);
this.store.commit("setDesignPreviewData", data);
}
).catch(res=>{
this.loadingShow = false
@@ -297,6 +312,8 @@ export default defineComponent({
height: auto;
max-height: 35rem;
margin-top: 2rem;
width: 100%;
object-fit: contain;
}
.result_print_img{
transform: scale(.85);

202
src/component/Detail/DesignPrintOperation.vue
View File

@@ -25,7 +25,7 @@
class="habit_Overal_Single_text"
:class="{ active: !overallSingle }"
>
Overal
Overall
</div>
<a-switch v-model:checked="overallSingle" @change="setOveralSingle"/>
<div
@@ -49,7 +49,7 @@
<i class="fi fi-rr-trash" @click="deletePrint"></i>
</div>
<div class="designOpenrtion_nav">
<div class="designOpenrtion_single" v-show="overallSingle" v-for="item,index in designOpenrtionList" :key="item" :class="{active:printStyleList[index].designOpenrtionBtn}">
<div class="designOpenrtion_single" v-show="overallSingle" v-for="item,index in designOpenrtionList" :key="item" :class="{active:printStyleList[index]?.designOpenrtionBtn?printStyleList[index]?.designOpenrtionBtn:false}">
<img :src="item.path" @click="setpitch(item,index)">
</div>
<div class="designOpenrtion_overall" v-show="!overallSingle">
@@ -60,23 +60,24 @@
</div>
</div>
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
<div class="designOpenrtion_imgMask" :style="sketch">
<!-- <div class="designOpenrtion_imgMask" :style="sketch"> -->
<div class="designOpenrtion_imgMask">
<div class="designOpenrtion_print" v-show="overallSingle">
<div
v-for="item,index in designOpenrtionList"
:key="item"
:style="[printStyleList[index].style]"
:style="[printStyleList?.[index]?.style]"
@mousedown.stop="itemMoveMousedown(index,$event)"
class="modal_imgItem"
@click="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.path" :style="{transform:`rotateZ(${printStyleList[index].transform.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false">
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false">
</div>
</div>
<!-- <img v-if="overallSingle" :src="current?.layersObject?.[1]?.maskUrl" alt="" class="designOpenrtion_sketch"> -->
<img :src="current?.layersObject?.[1]?.imageUrl" alt="" class="designOpenrtion_sketch">
<img :src="current?.path" alt="" class="designOpenrtion_sketch">
<img v-show="overallSingle" :src="current?.layersObject?.[1]?.maskUrl" alt="" class="designOpenrtion_sketch_mask">
<div class="designOpenrtion_btn">
<ul v-if="overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
<ul v-if="overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',$event)"></li>
<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',$event)"></li>
@@ -84,7 +85,7 @@
<li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li>
</ul>
<div v-show="!overallSingle"></div>
<ul v-if="!overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_Mouoverall" :style="'left:'+item.style.left+';top:'+item.style.top" @mousedown.stop="itemMoveMousedown(index,$event)">
<ul v-if="!overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mouoverall" :style="'left:'+item.style.left+';top:'+item.style.top" @mousedown.stop="itemMoveMousedown(index,$event)">
<i class="fi fi-rr-arrows animtion1"></i>
<i class="fi fi-rr-arrows animtion2"></i>
</ul>
@@ -194,7 +195,6 @@ export default defineComponent({
var info = el.getBoundingClientRect();
let eX = info.x + info.width / 2;
let eY = info.y + info.height / 2;
document.addEventListener('mousemove', (e) => {
if (mouse) {
let X = eX
@@ -208,41 +208,11 @@ export default defineComponent({
});
// 添加鼠标松开事件监听器
document.addEventListener('mouseup', () => {
value.instance.printStyleList[0].transform.rotateZ = angle
// console.log(value.instance.printStyleList);
mouse = false;
});
});
//缩放
// let timeSwitch = true
// el.parentNode.addEventListener('mousemove', (e) => {
// el.parentNode.addEventListener('mousewheel',(e) => {
// if(timeSwitch){
// timeSwitch = false
// if(e.deltaY > 0){
// if(num <= 1){
// num -= 0.05
// }else{
// num -= 0.1
// }
// }else{
// //放大
// if(num <= 1){
// num += 0.05
// }else{
// num += 0.1
// }
// }
// if(num >= 3){
// num = 3
// }else if (num < .2){
// num = .2
// }
// setTimeout(() => {
// timeSwitch = true
// }, 100);
// elParent.firstElementChild.style.transform = "scale("+ num + ") rotateZ("+ angle + "deg)"
// }
// });
// });
}
},
@@ -252,35 +222,45 @@ export default defineComponent({
let DesignPrintOperationParent = this.$parent
this.designOpenrtion = true
this.clearModal()
this.designOpenrtionList.push(this.current.printObject)
this.designOpenrtionList = []
this.designOpenrtionList.push(...this.current.printObject.prints)
this.overallSingle = DesignPrintOperationParent.overallSingle
this.systemDesignerPercentage = DesignPrintOperationParent.systemDesignerPercentage
// let skecth = new Image
// if(!this.overallSingle){
// skecth.src = this.current.layersObject[1].imageUrl
// }else{
// skecth.src = this.current.layersObject[1].maskUrl
// }
// skecth.onload=()=>{
// this.sketch.width = skecth.width/10+'rem'
// this.sketch.height = skecth.height/10+'rem'
// }
this.sketch = {
width:this.current.layersObject[1].imageSize[0]/10+'rem',
height:this.current.layersObject[1].imageSize[1]/10+'rem'
let skecth = new Image
skecth.src = this.current.path
skecth.onload=()=>{
this.sketch.width = skecth.width/10+'rem'
this.sketch.height = skecth.height/10+'rem'
}
// this.sketch = {
// width:this.current.layersObject[1].imageSize[0]/10+'rem',
// height:this.current.layersObject[1].imageSize[1]/10+'rem'
// }
let print = new Image
print.src = this.current.printObject.path
print.src = this.current.printObject.prints[0].path
print.onload=()=>{
let sketch = document.getElementsByClassName("designOpenrtion_modal")[0]?.getElementsByClassName('designOpenrtion_sketch')[0]
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
this.print.width = print.width+'px'
this.print.height = print.height+'px'
this.printStyleList[0].style.width = print.width+'px'
this.printStyleList[0].style.height = print.height+'px'
this.printStyleList[0].designOpenrtionBtn = false
if(this.overallSingle){
nextTick().then(()=>{
if(this.designOpenrtionList[0].scale){
this.designOpenrtionList.forEach((item,index)=>{
this.setTemplate(item,index)
this.printAmount = this.printStyleList.length
})
}else{
this.refetchTemplate(0)
}
})
}
}
if(this.overallSingle){
this.refetchTemplate(0)
}
},
systemDesigner(num) {
let DesignPrintOperationParent = this.$parent
@@ -296,18 +276,10 @@ export default defineComponent({
if (!this.overallSingle) {
this.printAmount = 1
this.setprintAmount()
}else{
this.random()
}
let skecth = new Image
// if(!this.overallSingle){
// skecth.src = this.current.layersObject[1].imageUrl
// }else{
// skecth.src = this.current.layersObject[1].maskUrl
// }
skecth.src = this.current.layersObject[1].imageUrl
skecth.onload=()=>{
this.sketch.width = skecth.width/10+'rem'
this.sketch.height = skecth.height/10+'rem'
}
},
setpitch(item,index){
this.printStyleList.forEach((v)=>{
@@ -371,7 +343,8 @@ export default defineComponent({
//鼠标移动
moveMousemove(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
let parentNode = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_imgMask")[0]
parentNode = parentNode.getBoundingClientRect()
let x = (e.x - this.printStyleList[this.imgDomIndex].centers.left)+'px'
let y = ( e.y - this.printStyleList[this.imgDomIndex].centers.top)+'px'
this.printStyleList[this.imgDomIndex].style.left = x
@@ -464,7 +437,7 @@ export default defineComponent({
for (let index = 0; index < num; index++) {
this.printStyleList.push(this.printStyleList[this.printStyleList.length-1])
this.refetchTemplate(this.printStyleList.length-1)
this.designOpenrtionList.push(this.current.printObject)
this.designOpenrtionList.push(this.current.printObject.prints[this.current.printObject.prints.length-1])
}
}else{
let num = this.printStyleList.length - this.printAmount
@@ -486,23 +459,22 @@ export default defineComponent({
this.printAmount = this.designOpenrtionList.length
},
random(){
this.printStyleList.forEach((v,index)=>{
this.designOpenrtionList.forEach((v,index)=>{
this.refetchTemplate(index)
})
},
//随机重置图片顺序
refetchTemplate(index) {
// let scale = (Math.trunc(Math.random()*15)+1)*.1
let rotateZ1 = Math.trunc(Math.random()*360)+1
let rotateZ2 = Math.trunc(Math.random()*360)+1
let sketch = document.getElementsByClassName('designOpenrtion_sketch')[0]
let width = Math.trunc(Math.random()*(sketch.width-sketch.width/3))+1+sketch.width/3
let sketch = document.getElementsByClassName("designOpenrtion_modal")[0]?.getElementsByClassName('designOpenrtion_sketch')[0]
let width = Math.trunc(Math.random()*(sketch?.width-sketch?.width/3))+1+sketch?.width/3
let scale = width / this.print.width.replace(/px/g,'')
// let x = sketch.width-Number(this.print.width.replace(/px/g,''))
// let y = sketch.height-Number(this.print.height.replace(/px/g,''))
let x = sketch.width-20
let y = sketch.height-20
let x = sketch?.width-20
let y = sketch?.height-20
this.printStyleList[index]={
centers:{
left:0,
@@ -523,6 +495,35 @@ export default defineComponent({
},
designOpenrtionBtn:false
}
},
//设置图片
setTemplate(item,index) {
this.designOpenrtionList
let sketch = document.getElementsByClassName("designOpenrtion_modal")[0]?.getElementsByClassName('designOpenrtion_sketch')[0]
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
let scale
scale = (this.print.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
let zIndex = 1
this.printStyleList[index]={
centers:{
left:0,
top:0,
},
style:{
left:item.location[0]/sketchNum+'px',
top:item.location[1]/sketchNum+'px',
right:"auto",
bottom:"auto",
width:this.print.width.replace(/px/g,'')/sketchNum*item.scale+'px',
height:this.print.height.replace(/px/g,'')/sketchNum*item.scale+'px',
zIndex:zIndex++
},
transform:{
// scale:scale<.2?.2:scale,//0.2-3
rotateZ:item.angle,
},
designOpenrtionBtn:false
}
},
computeZindex(){
let arr = JSON.parse(JSON.stringify(this.printStyleList))
@@ -549,15 +550,16 @@ export default defineComponent({
scale = this.systemDesignerPercentage*3/100
location = [arr[index].style.left.replace(/px/g,'')*sketchNum+this.print.width.replace(/px/g,'')/2-7,arr[index].style.top.replace(/px/g,'')*sketchNum+this.print.height.replace(/px/g,'')/2-7]
}else{
console.log(arr[index].style.width.replace(/px/g,''),this.print.width.replace(/px/g,''));
scale = (arr[index].style.width.replace(/px/g,'')/this.print.width.replace(/px/g,''))
scale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
}
let obj = {
angle : arr[index].transform.rotateZ,
angle : !this.overallSingle ? 0:arr[index].transform.rotateZ,
location : location,
priority:arr[index].style.zIndex,
scale:scale,
scale: !this.overallSingle? 1:scale,
path:this.designOpenrtionList[index].path,
minIOPath:this.designOpenrtionList[index].minIOPath,
}
prints.push(obj)
})
@@ -581,9 +583,8 @@ export default defineComponent({
// timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
// }
let data = this.store.state.DesignDetailModule.designPreviewData
data.designSingleItemDTOList[0].printObject={
data.designSingleItemDTOList[index].printObject={
ifSingle:this.overallSingle,
path:this.designOpenrtionList[0].path,
prints:this.computeZindex(),
}
data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
@@ -591,13 +592,22 @@ export default defineComponent({
this.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv) => {
// this.parentData.design.designItemUrl = rv.designItemUrl
// this.$emit('finishRedesign',this.parentData)
// this.closeModal()
designItemDetail.clothes[index].printObject.path = rv.clothes[0].printObject.path
designItemDetail.clothes[index].layersObject = rv.clothes[0].layersObject
// designItemDetail.clothes[index].printObject.path = rv.clothes[0].printObject.path
designItemDetail.currentFullBodyView = rv.currentFullBodyView
designItemDetail.clothes[index].printObject.ifSingle = this.overallSingle
designItemDetail.clothes[index].layersObject = rv.clothes[index].layersObject
designItemDetail.clothes[index].printObject.prints = this.computeZindex()
console.log(rv);
designItemDetail.clothes.forEach((item,i)=>{
let a
if(item.layersObject[0].imageCategory.indexOf("back") == -1){
a = item.layersObject[0]
item.layersObject[0] = item.layersObject[1]
item.layersObject[1] = a
}
item.layersObject[0].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[0].id
item.layersObject[1].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[1].id
})
this.store.commit("setDesignItemDetail", designItemDetail);
this.loadingShow = false
this.designOpenrtion = false
@@ -829,9 +839,13 @@ export default defineComponent({
>img{
z-index: 2;
position: relative;
max-width: 100%;
max-height: 100%;
width: 100%;
// max-width: 100%;
// max-height: 100%;
// width: 100%;
// height: 50rem;
max-height: 50rem;
min-height: 30rem;
width: auto;
}
.designOpenrtion_sketch_mask{
z-index: 3;

84
src/component/Detail/habit.vue
View File

@@ -56,7 +56,7 @@
class="habit_Overal_Single_text"
:class="{ active: !workspaceItem.overallSingle }"
>
Overal
Overall
</div>
<a-switch @click="setOverallSingle" v-model:checked="workspaceItem.overallSingle" />
<div
@@ -133,15 +133,15 @@
</div>
<div class="model_img" v-show="systemSeleves">
<div v-mousewheel>
<div v-for="(item,index) in mannequins[0].modelList" :key="item.id">
<img :src="item.presignedUrl" alt="" @click="setMannequins(item,'Library')">
<div v-for="(item,index) in mannequins?.[0]?.modelList" :key="item.id">
<img :src="item?.presignedUrl" alt="" @click="setMannequins(item,'Library')">
</div>
</div>
</div>
<div class="model_img" v-show="!systemSeleves">
<div v-mousewheel>
<div v-for="(item,index) in mannequins[1].modelList" :key="item.id">
<img :src="item.presignedUrl" alt="" @click="setMannequins(item,'System')">
<div v-for="(item,index) in mannequins?.[1]?.modelList" :key="item.id">
<img :src="item?.presignedUrl" alt="" @click="setMannequins(item,'System')">
</div>
</div>
@@ -166,7 +166,7 @@ export default defineComponent({
UserOutlined,
},
setup(){
let workspaceItem = ref({
let workspaceItem:any = ref({
id:1,
id_:1,
workSpaceName:"工作台1",
@@ -193,7 +193,7 @@ export default defineComponent({
});
let workspaceItemName = ref('')//设置单独name公共使用
let singleTypeList = ref([
let singleTypeList:any = ref([
])
let sex = ref([
@@ -216,6 +216,9 @@ export default defineComponent({
handler(newVal:any,oldVal:any){
// this.store.state.Workspace.workspace
if(!newVal){
if(!this.workspaceItem.overallSingle){
this.workspaceItem.position = 'Overall'
}
let data = this.workspaceItem
this.putWorkspace(data)
this.store.commit("setWorkspace", this.workspaceItem);
@@ -243,7 +246,7 @@ export default defineComponent({
},
workspaceItem:{
handler(newVal:any,oldVal:any){
// this.store.state.Workspace.workspace
this.store.commit("setWorkspace", this.workspaceItem);
}
}
},
@@ -252,10 +255,10 @@ export default defineComponent({
store: useStore(),
};
},
mounted() {
async mounted() {
this.getworkspace()
this.getSexPosition()
this.store.commit("setWorkspace", this.workspaceItem);
this.getSex()
this.getPosition()
},
directives:{
fade:{
@@ -293,12 +296,12 @@ export default defineComponent({
})
el.addEventListener('mousewheel',(e:MouseEvent)=>{
if(0>(e as WheelEvent).deltaY){
if(0>(e as WheelEvent).deltaY && width>parentWidth){
num+=15
if(num >= 0){
num = 0
}
}else{
}else if(0<(e as WheelEvent).deltaY && width>parentWidth){
num-=15
if(num<=parentWidth - width){
num = parentWidth - width
@@ -312,7 +315,7 @@ export default defineComponent({
}
},
methods: {
getSexPosition(){
getSex(){
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'Sex'}}).then((rv: any) => {
if (rv) {
let arr:any = []
@@ -326,7 +329,16 @@ export default defineComponent({
this.sex = arr
}
})
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'Position'}}).then((rv: any) => {
},
getPosition(){
let params
if(this.workspaceItem.sex == 'Female'){
params = 'FemalePosition'
}else{
params = 'MalePosition'
}
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv: any) => {
if (rv) {
let arr:any = []
rv.forEach((item:any) => {
@@ -337,6 +349,7 @@ export default defineComponent({
arr.push(obj)
});
this.singleTypeList = arr
this.workspaceItem.position = this.singleTypeList[0].label
}
})
},
@@ -362,28 +375,30 @@ export default defineComponent({
v.putName = false
if(v.id == rv.id){
this.workspaceItem = v
this.setMannequinsSex()
}
});
this.workspace.id = rv.id
this.workspace.workspaceList = rv.page.content
}
})
},
getDetail(id:any){
getDetail(id:any){//
Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:id}}).then((rv: any) => {
if (rv) {
}
})
},
getMannequins(){
Https.axiosGet(Https.httpUrls.getMannequins).then((rv: any) => {
getMannequins(){//获取模特
Https.axiosGet(Https.httpUrls.getMannequins,{params:{sex:this.workspaceItem.sex}}).then((rv: any) => {
if (rv) {
this.mannequins = rv
}
})
},
putWorkspace(data:any){
putWorkspace(data:any){//修改workspace
Https.axiosPost(Https.httpUrls.workspacesaveOrUpdate,data).then((rv: any) => {
if (rv) {
this.getworkspace()
@@ -399,8 +414,9 @@ export default defineComponent({
},
//
setOverallSingle(){
if(!this.workspaceItem.overallSingle){
this.workspaceItem.position = "Overall"
if(this.workspaceItem.overallSingle){
this.workspaceItem.position = this.singleTypeList[0].label
}else{
}
},
//修改名字
@@ -470,6 +486,9 @@ export default defineComponent({
setSex(v:any){
this.openType.sex = false
this.workspaceItem.sex = v
this.getMannequins()
this.setMannequinsSex()
this.getPosition()
},
//设置single & overall
setSingle(v:string){
@@ -477,10 +496,23 @@ export default defineComponent({
this.workspaceItem.position = v
},
setMannequins(item:any,str:string){//设置模特
this.workspaceItem.mannequinId = item.id
// this.workspaceItem.mannequinId = item.id
// this.workspaceItem.mannequinType = str
// this.workspaceItem.mannequinUrl = item.presignedUrl
this.workspaceItem.mannequinUrl = item.presignedUrl
this.workspaceItem.mannequinType = str
this.workspaceItem.mannequinUrl = item.url
this.workspaceItem.mannequinId = item.id
},
setMannequinsSex(){
if(this.workspaceItem.sex == 'Female'){
this.workspaceItem.mannequinUrl = this.workspaceItem.femalePresignedUrl
this.workspaceItem.mannequinType = this.workspaceItem.mannequinFemaleType
this.workspaceItem.mannequinId = this.workspaceItem.mannequinFemaleId
}else if(this.workspaceItem.sex == 'Male'){
this.workspaceItem.mannequinUrl = this.workspaceItem.malePresignedUrl
this.workspaceItem.mannequinType = this.workspaceItem.mannequinMaleType
this.workspaceItem.mannequinId = this.workspaceItem.mannequinMaleId
}
},
setOpenType(v:string){
if(v == 'habit'){
@@ -764,6 +796,8 @@ export default defineComponent({
.model_Designer{
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
.model_text{
display: flex;
:deep(.ant-switch) {
@@ -784,6 +818,8 @@ export default defineComponent({
}
.model_img{
display: flex;
flex: 1;
align-items: center;
>div{
display: flex;

431
src/component/Detail/setDesignItem.vue
View File

@@ -1,22 +1,25 @@
<template>
<div class="design_compile_content">
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
<div class="designOpenrtion_imgMask">
<div class="designOpenrtion_print">
<div
v-for="item,index in designItemDetail?.clothes"
:key="item"
:style="[printStyleList[index].style]"
@mousedown.stop="itemMoveMousedown(index,$event)"
class="modal_imgItem"
@click="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.path" class="designOpenrtion_imgItme" draggable="false">
<!-- <img crossOrigin="anonymous" :src="item.path" :style="{transform:`scale(${printStyleList[index].transform.scale}) rotateZ(${printStyleList[index].transform.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false"> -->
</div>
<div class="designOpenrtion_imgMask" :style="frontBack?.body?.style">
<!-- <div
v-for="item,index in frontBack.back"
:key="item"
:style="item.style"
@mousedown.stop="itemMoveMousedown(index,$event)"
class="modal_imgItem"
@click="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.path" class="designOpenrtion_imgItme" draggable="false">
</div> -->
<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,$event)" @click="setpitch(item,index)" :style="frontBack.front[index].style">
<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
</div>
<img class="perview_img" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'" v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''" :key="designItemDetail.designItemUrl">
<div class="detail_modal_item_front" v-for="item,index in frontBack.front" @mousedown.stop="itemMoveMousedown(index,$event)" @click="setpitch(item,index)" :style="item.style">
<img :src="item.imageUrl" alt="">
</div>
<img class="perview_img" style="width: 400px; height: auto;" v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
<div class="designOpenrtion_btn">
<ul v-for="item,index in printStyleList" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',$event)"></li>
<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',$event)"></li>
@@ -25,8 +28,11 @@
</ul>
</div>
</div>
<div @click="setPreview" class="subitOkPreviewBtn">OK</div>
<div @click="setPreviewData" class="subitOkPreviewBtn">OK</div>
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</div>
</template>
@@ -35,14 +41,18 @@ import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "v
import { LoadingOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { Modal,message } from 'ant-design-vue';
import GO from '@/tool/GO';
import { Https } from "@/tool/https";
export default defineComponent({
props: ["frontBack"],
// props: ["frontBack"],
setup(prop) {
const store = useStore();
let designItemDetail = ref([])
let designItemDetail = computed(()=>{
return store.state.DesignDetailModule.designItemDetail
})
let current = inject('current')//父组件传过来的数据
let printZIndex = ref(2)//印花优先级
let printZIndex = ref(4)//印花优先级
let printStyleList = ref([
{
centers:{
@@ -56,7 +66,7 @@ export default defineComponent({
bottom:"auto",
width:100+'px',
height:100+'px',
zIndex:1,
// zIndex:1,
},
transform:{
scale:1,
@@ -68,6 +78,7 @@ export default defineComponent({
let direction = ref('')
let imgDom = ref()
let imgDomIndex = ref(0)
let frontBack = ref({})
return {
designItemDetail,
current,
@@ -76,22 +87,20 @@ export default defineComponent({
direction,//判断点击的是li那个边
imgDom,
imgDomIndex,
frontBack
};
},
data() {
return {
loadingShow:false,//加载中
store: useStore(),
};
},
methods: {
init(){
let DesignParent = this.$parent
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
this.designItemDetail = designItemDetail
// this.clearModal()
console.log(this.frontBack);
// console.log(this.current,DesignParent.frontBack);
console.log(DesignParent);
this.printStyleList.push({
centers:{
left:0,
@@ -104,7 +113,7 @@ export default defineComponent({
bottom:"auto",
width:100+'px',
height:100+'px',
zIndex:1,
// zIndex:1,
},
transform:{
scale:1,
@@ -112,44 +121,116 @@ export default defineComponent({
},
designOpenrtionBtn:false
})
this.setImgSize()
},
async setImgSize(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let front = []
let back = []
let body
designItemDetail.others.forEach((item) => {
if(item.type == 'Body'){
body = item
}
});
let ratio = await this.setPostition(body.layersObject[0]?.imageUrl)
let frontIndex = 6
let backIndex = 3
// let front = 3
// let back = 3
designItemDetail.clothes.forEach((v,index)=>{
for (let i = v.layersObject.length-1; i >= 0; i--) {
v.layersObject[i].style = {
top:v.layersObject[i].position?.[0]*ratio+'px',
left:v.layersObject[i].position?.[1]*ratio+'px',
width:v.layersObject[i].imageSize?.[0]*ratio+'px',
height:v.layersObject[i].imageSize?.[1]*ratio+'px',
// zIndex:zIndex-=1
}
v.layersObject[i].centers={
left:0,
top:0,
}
v.layersObject[i].designOpenrtionBtn = false
if(v.layersObject[i].imageCategory.indexOf("back") == -1){
front[index] = v.layersObject[i]
front[index].style.zIndex = frontIndex-=1
}else{
back[index] = v.layersObject[i]
back[index].style.zIndex = backIndex-=1
// back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++
}
}
})
let bodyImgWH = document.getElementsByClassName("design_compile_content")[0].getElementsByClassName("perview_img")[0]
body.style = {
width:body.layersObject[0].imageSize?.[0]*ratio+'px',
height:body.layersObject[0].imageSize?.[1]*ratio+'px',
}
this.frontBack = {
front:front,
back:back,
body:body,
}
},
//按比设置单件衣服宽高位置
async setPostition(url){
let img = await loadImage(url)
let modal_body = document.getElementsByClassName('designOpenrtion_imgMask')[0]
const num = modal_body?.offsetHeight / img.height;
function loadImage(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => {
resolve(img)
};
img.onerror = reject;
img.src = url;
});
}
return num
},
setpitch(item,index){
this.printStyleList.forEach((v)=>{
this.frontBack.front.forEach((v)=>{
v.designOpenrtionBtn = false
})
this.printStyleList[index].designOpenrtionBtn = true
this.printStyleList[index].style.zIndex = this.printZIndex++
this.frontBack.front[index].designOpenrtionBtn = true
this.frontBack.front[index].style.zIndex = this.printZIndex++
this.frontBack.back[index].style.zIndex = this.printZIndex
},
// 设置移动
itemMoveMousedown(index,event){
this.imgDomIndex = index
this.printStyleList.forEach((v)=>{
this.frontBack.front.forEach((v)=>{
v.designOpenrtionBtn = false
})
this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
this.printStyleList[index].designOpenrtionBtn = true
this.printStyleList[index].style.zIndex = this.printZIndex++
this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("detail_modal_item_front")[this.imgDomIndex]
this.frontBack.front[index].designOpenrtionBtn = true
this.frontBack.front[index].style.zIndex = this.printZIndex++
this.frontBack.back[index].style.zIndex = this.printZIndex
let imgDomWH = this.imgDom.getBoundingClientRect()
let left = Number(this.printStyleList[index].style.left.replace(/px/g,''))
let top = Number(this.printStyleList[index].style.top.replace(/px/g,''))
this.printStyleList[index].centers.left = imgDomWH.x+event.offsetX-left
this.printStyleList[index].centers.top = imgDomWH.y+event.offsetY-top
let left = Number(this.frontBack.front[index].style.left.replace(/px/g,''))
let top = Number(this.frontBack.front[index].style.top.replace(/px/g,''))
this.frontBack.front[index].centers.left = imgDomWH.x+event.offsetX-left
this.frontBack.front[index].centers.top = imgDomWH.y+event.offsetY-top
document.addEventListener("mouseup", this.mouseup);
document.addEventListener("mousemove", this.moveMousemove);
},
//设置尺寸
itemSizeMousedown(direction,event){
this.direction = direction
this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
this.printStyleList[this.imgDomIndex].designOpenrtionBtn = true
this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("detail_modal_item_front")[this.imgDomIndex]
this.frontBack.front[this.imgDomIndex].designOpenrtionBtn = true
let imgDomWH = this.imgDom.getBoundingClientRect()
let li = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_btn_top")[0].offsetWidth/2
if(this.direction == 'right' || this.direction == 'bottom'){
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
this.frontBack.front[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
}else{
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
this.frontBack.front[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
}
document.addEventListener("mouseup", this.sizeMouseup);
@@ -159,22 +240,22 @@ export default defineComponent({
moveMousemove(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
let x = (e.x - this.printStyleList[this.imgDomIndex].centers.left)+'px'
let y = ( e.y - this.printStyleList[this.imgDomIndex].centers.top)+'px'
this.printStyleList[this.imgDomIndex].style.left = x
this.printStyleList[this.imgDomIndex].style.top = y
if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
this.printStyleList[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
}
if(x.replace(/px/g,'') <= 0){
this.printStyleList[this.imgDomIndex].style.left = 0+'px'
}
if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
this.printStyleList[this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
}
if(y.replace(/px/g,'') <= 0){
this.printStyleList[this.imgDomIndex].style.top = 0+'px'
}
let x = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)+'px'
let y = ( e.y - this.frontBack.front[this.imgDomIndex].centers.top)+'px'
this.frontBack.front[this.imgDomIndex].style.left = x
this.frontBack.front[this.imgDomIndex].style.top = y
// if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
// this.frontBack.front[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
// }
// if(x.replace(/px/g,'') <= 0){
// this.frontBack.front[this.imgDomIndex].style.left = 0+'px'
// }
// if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
// this.frontBack.front[this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
// }
// if(y.replace(/px/g,'') <= 0){
// this.frontBack.front[this.imgDomIndex].style.top = 0+'px'
// }
},
sizeMousemove(e) {
@@ -182,42 +263,45 @@ export default defineComponent({
let parentNode =this.imgDom.parentNode
let width = imgDomWH.width
let height = imgDomWH.height
let num = width/height
let w,h
let num = height/width
//判断移动四个边
if(this.direction == 'right'){
w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)
h = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
w = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)
h = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)*num
width = w+'px'
height = w*num+'px'
}else if(this.direction == 'top'){
this.printStyleList[this.imgDomIndex].style.top = 'auto'
num = width/height
this.frontBack.front[this.imgDomIndex].style.top = 'auto'
// this.printStyleList[this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
h = (this.printStyleList[this.imgDomIndex].centers.top - e.y)
this.frontBack.front[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
w = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)*num
h = (this.frontBack.front[this.imgDomIndex].centers.top - e.y)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'bottom'){
h = (e.y - this.printStyleList[this.imgDomIndex].centers.top)
num = width/height
h = (e.y - this.frontBack.front[this.imgDomIndex].centers.top)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'left'){
this.printStyleList[this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
w = (this.printStyleList[this.imgDomIndex].centers.left - e.x)
this.frontBack.front[this.imgDomIndex].style.left = 'auto'
this.frontBack.front[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
w = (this.frontBack.front[this.imgDomIndex].centers.left - e.x)
width = w+'px'
height = w*num+'px'
}
//判断尺寸是否到边
this.printStyleList[this.imgDomIndex].style.width = width
this.printStyleList[this.imgDomIndex].style.height = height
this.frontBack.front[this.imgDomIndex].style.width = width
this.frontBack.front[this.imgDomIndex].style.height = height
},
//鼠标抬起
sizeMouseup(e){
this.printStyleList[this.imgDomIndex].style={
this.frontBack.front[this.imgDomIndex].style={
right:'auto',
left:this.imgDom.offsetLeft+'px',
bottom:'auto',
@@ -226,6 +310,7 @@ export default defineComponent({
width:this.imgDom.offsetWidth+'px',
zIndex:this.printZIndex
}
this.frontBack.back[this.imgDomIndex].style.zIndex = this.printZIndex
document.removeEventListener("mouseup", this.sizeMouseup);
document.removeEventListener("mousemove", this.sizeMousemove);
},
@@ -240,8 +325,184 @@ export default defineComponent({
this.clothes = []
this.printStyleList.splice(1,this.printStyleList.length-1)
},
setPreview(){
capitalizeFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
},
setPreviewData(){
this.$emit('setSubmit','preview');
},
async setPreview(data){
let ratio = this.frontBack.body.layersObject[0].imageSize[0]/this.frontBack.body.style.width.replace(/px/g,'')
let designItemDetail = this.store.state.DesignDetailModule.designItemDetail
// this.frontBack.back.sort((a, b) => {
// var a_num = a.style.zIndex;
// var b_num = b.style.zIndex;
// return a_num - b_num;
// });
// this.frontBack.front.sort((a, b) => {
// var a_num = a.style.zIndex;
// var b_num = b.style.zIndex;
// return a_num - b_num;
// });
data.designSingleItemDTOList.forEach((item)=>{
let front = this.frontBack.front
let imageCategory1 = front[1].imageCategory
front.forEach((i)=>{
let imageCategory = i.imageCategory.split('_')[0]
if(item.type == this.capitalizeFirstLetter(imageCategory)){
let y = ((i?.style?.top.replace(/px/g,'')*ratio).toFixed(0) - i?.position[0])
let x = ((i?.style?.left.replace(/px/g,'')*ratio).toFixed(0) - i?.position[1])
let scale = i?.imageSize?Number(((i?.style?.width.replace(/px/g,'')*ratio)/(i?.imageSize[0]/i.scale)).toFixed(2)):1
item.scale = scale
let top = y == 0 ? item.offset[1]:y+item.offset[1]
let left = x == 0 ? item.offset[0]:x+item.offset[0]
item.offset = [left,top]
// item.offset = [(i?.style?.left.replace(/px/g,'')*ratio).toFixed(0),(i?.style?.top.replace(/px/g,'')*ratio).toFixed(0)]
}
})
if(item.type == this.capitalizeFirstLetter(imageCategory1)){
item.scale = front?.imageSize?Number(((front?.style?.width.replace(/px/g,'')*ratio)/front?.imageSize[0]).toFixed(2)):1
}
})
this.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv) => {
this.loadingShow = false
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
designItemDetail.designItemUrl = rv.designItemUrl
designItemDetail.currentFullBodyView = rv.currentFullBodyView
rv.clothes.forEach((item)=>{
designItemDetail.clothes.forEach((i)=>{
if(item.type === i.type){
// item.position = [
// item.position[0] += left,
// item.position[1] += top
// ]
// item.layersObject[1].position = [
// item.layersObject[1].position[0]+=item.layersObject[1].offset[1],
// item.layersObject[1].position[1]+=item.layersObject[1].offset[0]
// ],
// item.layersObject[0].position = [
// item.layersObject[0].position[0]+=item.layersObject[0].offset[1],
// item.layersObject[0].position[1]+=item.layersObject[0].offset[0]
// ]
i.layersObject = item.layersObject
}
})
// data.designSingleItemDTOList.front.forEach((i)=>{
// if(item.type === i.type){
// // item.position = [
// // item.position[0] += left,
// // item.position[1] += top
// // ]
// console.log(item.position,left ,top);
// i.layersObject = item.layersObject
// }
// })
})
this.$emit('setDesignCoverage');
this.store.commit("setDesignItemDetail", designItemDetail);
// let designCollectionList = this.store.state.HomeStoreModule.designCollectionList
// let likeDesignCollectionList = this.store.state.HomeStoreModule.likeDesignCollectionList
// designCollectionList.forEach((item) => {
// if(item.designItemId == rv.designItemId){
// item.designOutfitUrl = rv.designItemUrl
// }
// });
// likeDesignCollectionList.forEach((item) => {
// if(item.designItemId == rv.designItemId){
// item.designOutfitUrl = rv.designItemUrl
// }
// });
// this.store.commit('setDesignCollectionList',designCollectionList)
// this.store.commit('setLikeDesignCollectionList',likeDesignCollectionList)
}
).catch(res=>{
this.loadingShow = false
});
//顺序不能乱
// let arr = [...this.frontBack.front,...this.frontBack.back,...this.frontBack.body.layersObject]
// let layers=[]
// let num = 0
// let front = this.frontBack.back.length+2
// let back = this.frontBack.back.length-1
// let str
// arr.forEach(item => {
// let obj
// if(item.imageCategory == 'body'){
// obj = item
// obj.priority = this.frontBack.back.length+1
// }else{
// str = str?str:item?.imageCategory.split('_')[0]
// obj = {
// id:item.id,
// imageCategory:item.imageCategory,
// scale:item?.imageSize?Number(((item?.style?.width.replace(/px/g,'')*ratio)/item?.imageSize[0]).toFixed(2)):1,
// position:[Number((item?.style?.top?.replace(/px/g,'')*ratio).toFixed(0)),Number((item?.style?.left?.replace(/px/g,'')*ratio).toFixed(0))],
// imageSize: item.imageSize,
// priority:item.style.zIndex,
// }
// if(item?.imageCategory?.indexOf("front") == -1){
// // if(str == item?.imageCategory.split('_')[0])
// if(str == item?.imageCategory.split('_')[0]){
// num = 0
// back = this.frontBack.back.length-1
// }else{
// num = 1
// back++
// }
// obj.scale = layers[num].scale
// obj.position = layers[num].position
// obj.imageSize = layers[num].imageSize
// obj.priority = back
// }else{
// obj.priority = front++
// }
// }
// obj.imageUrl = item.imageMinioUrl
// obj.maskUrl = item.maskMinioUrl
// layers.push(obj)
// });
// console.log(layers);
// let data = {
// layers:{
// designItemId:designItemDetail.designItemId,
// designItemUrl:designItemDetail.designItemUrl,
// layers:layers
// },
// timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
// }
// this.loadingShow = true
// Https.axiosPost(Https.httpUrls.designSingle, data).then(
// (rv) => {
// // let top,bottom
// // let desingStr0 = designItemDetail.clothes[0].type
// // let desingStr1 = designItemDetail.clothes[1].type
// // rv.layers.forEach((item)=>{
// // let str = this.capitalizeFirstLetter(item.imageCategory)
// // if(str.split('_')[0] == desingStr0){
// // top.push(item)
// // }else if(str.split('_')[0] == desingStr1){
// // bottom.push(item)
// // }
// // })
// // console.log(rv,designItemDetail);
// // designItemDetail.clothes[0]
// // designItemDetail.clothes.forEach((item)=>{
// // if(item.type == desingStr0){
// // item.layersObject = top
// // }else if(item.type == desingStr1){
// // item.layersObject = bottom
// // }
// // })
// // this.store.commit("setDesignItemDetail", designItemDetail);
// this.loadingShow = false
// }
// ).catch(res=>{
// this.loadingShow = false
// });
},
},
});
@@ -271,7 +532,6 @@ export default defineComponent({
height: 100%;
width: 100%;
.designOpenrtion_centent{
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
@@ -290,7 +550,6 @@ export default defineComponent({
width: auto;
height: auto;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
>img{
@@ -304,23 +563,27 @@ export default defineComponent({
top: 0;
}
}
.designOpenrtion_print{
.designOpenrtion_print,.detail_modal_item_front{
z-index: 1;
img{
width: 100%;
height: 100%;
float: left;
user-select:none;
-webkit-user-drag: none;
}
.modal_imgItem{
position: absolute;
overflow: hidden;
top: 0;
img{
width: 100%;
height: 100%;
float: left;
user-select:none;
-webkit-user-drag: none;
}
}
}
.designOpenrtion_print{
z-index: 1 !important;
}
.designOpenrtion_btn{
z-index: 3;
z-index: 9999;
ul{
list-style: none;
// width: 100%;