push Develop
This commit is contained in:
X1627315083
@@ -79,6 +79,7 @@
|
||||
<i class="fi fi-rs-comments"></i>
|
||||
<div>{{ $t('DesignDetail.CurrentApparel') }}</div>
|
||||
<i class="fi fi-rr-edit" @click.stop="openCurrent(1)"></i>
|
||||
<i v-show="current?.id" class="fi fi-rs-pencil-paintbrush" @click.stop="addDetail"></i>
|
||||
</div>
|
||||
<div class="centent_div" v-if="current?.id" @click="openCurrent(1)">
|
||||
<img :src="current?.path" alt="" class="" @click="openCurrent(1)">
|
||||
@@ -93,12 +94,14 @@
|
||||
<i class="fi fi-rr-edit" @click.stop="openCurrent(2)"></i>
|
||||
</div>
|
||||
<div class="Guide_1_20 clothes_item_icon" :class="[driver__.driver?'showEvents':'']">
|
||||
<div class="centent_div" v-if="current?.printObject?.prints?.[0]?.path" @click="openCurrent(2)">
|
||||
<div class="centent_div centent_print" v-if="current?.printObject?.prints?.[0]?.path && current?.printObject?.prints.length > 1" @click="openCurrent(2)">
|
||||
<img v-for="item in current?.printObject?.prints" :key="item.id" :src="item.path" alt="">
|
||||
</div>
|
||||
<div v-else-if="current?.printObject?.prints?.[0]?.path && current?.printObject?.prints.length == 1" class="centent_div">
|
||||
<img :src="current?.printObject?.prints[0]?.path" alt="">
|
||||
</div>
|
||||
<i v-else class="fi fi-rr-picture centent" @click="openCurrent(2)"></i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="clothes_detail_item clothes_detail_item_color" :class="[current?.id?'':'hideCursor']">
|
||||
<div class="clothes_item_header">
|
||||
@@ -117,7 +120,19 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clothes_detail_item clothes_detail_item_elements" :class="[current?.id?'':'hideCursor']">
|
||||
<div class="clothes_item_header">
|
||||
<i class="fi fi-rs-comments"></i>
|
||||
<div>Current Elements</div>
|
||||
<i class="fi fi-rr-edit" @click.stop="openCurrent(4)"></i>
|
||||
</div>
|
||||
<div class="Guide_1_20 clothes_item_icon" :class="[driver__.driver?'showEvents':'']">
|
||||
<!-- <div class="centent_div" v-if="current?.printObject?.prints?.[0]?.path" @click="openCurrent(2)">
|
||||
<img :src="current?.printObject?.prints[0]?.path" alt="">
|
||||
</div> -->
|
||||
<i class="fi fi-rr-picture centent" @click="openCurrent(4)"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DesignDetailAlter ref="DesignDetailAlter"></DesignDetailAlter>
|
||||
@@ -139,6 +154,7 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<addDetails ref="addDetails" @setSloganData="setSloganData"></addDetails>
|
||||
</a-modal>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
@@ -163,6 +179,7 @@ import { openGuide,driverObj__ } from "@/tool/guide";
|
||||
import GO from '@/tool/GO';
|
||||
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import addDetails from '@/component/Detail/addDetails.vue'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
Draggable,
|
||||
@@ -170,6 +187,7 @@ export default defineComponent({
|
||||
setDesignItem,
|
||||
magnifyingGlass,
|
||||
setDesignItemMobile,
|
||||
addDetails,
|
||||
},
|
||||
setup() {
|
||||
const store = useStore();
|
||||
@@ -212,6 +230,11 @@ export default defineComponent({
|
||||
provide('body',body)
|
||||
let moible:any = isMoible()
|
||||
provide('moible',moible)
|
||||
let exhibitionList = ref({
|
||||
print:[],
|
||||
elements:[],
|
||||
})
|
||||
provide('exhibitionList',exhibitionList)
|
||||
let {t} = useI18n()
|
||||
//创建单件衣服
|
||||
let setClothes:any = ref()
|
||||
@@ -239,6 +262,7 @@ export default defineComponent({
|
||||
revocationShow,
|
||||
driver__,
|
||||
moible,
|
||||
exhibitionList,
|
||||
t,
|
||||
setClothes,
|
||||
deleteShow,
|
||||
@@ -324,7 +348,21 @@ export default defineComponent({
|
||||
handler: function(newval) {
|
||||
// this.removeRevocation()
|
||||
}
|
||||
}
|
||||
},
|
||||
'current.printObject.prints':{
|
||||
handler(newVal,oldVal){
|
||||
if(newVal && newVal.length > 0){
|
||||
this.exhibitionList.print = this.setExhibitionList(newVal)
|
||||
}
|
||||
}
|
||||
},
|
||||
'current.trims.prints':{
|
||||
handler(newVal,oldVal){
|
||||
if(newVal && newVal.length > 0){
|
||||
this.exhibitionList.elements = this.setExhibitionList(newVal)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
@@ -387,7 +425,10 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
addDetail(){
|
||||
let addDetails:any = this.$refs.addDetails
|
||||
addDetails.init(this.current,this.currentIndex)
|
||||
},
|
||||
closeModal(submit:any){
|
||||
if(this.designShowPrview == 1){
|
||||
if(this.ifSubmit && submit == ''){
|
||||
@@ -423,7 +464,19 @@ export default defineComponent({
|
||||
// this.designItemDetailUrl = {}
|
||||
}
|
||||
},
|
||||
|
||||
//切换当前展示的是印花还是elements
|
||||
setExhibitionList(arr:any){
|
||||
const seen = new Map();
|
||||
return arr.filter((obj:any, index:any, self:any) => {
|
||||
const key = obj.minIOPath; // 替换成你想要去重的属性名
|
||||
if (seen.has(key)) {
|
||||
return false;
|
||||
} else {
|
||||
seen.set(key, true);
|
||||
return true;
|
||||
}
|
||||
});
|
||||
},
|
||||
showDesignDetailModal(data:any,str:string){
|
||||
this.moible = isMoible()
|
||||
this.designItemId = data.design.designItemId
|
||||
@@ -443,7 +496,7 @@ export default defineComponent({
|
||||
item.layersObject[1] = a
|
||||
}
|
||||
if(item.printObject.prints == null){
|
||||
item.printObject.prints = [{}]
|
||||
item.printObject.prints = []
|
||||
}else{
|
||||
item.printObject.prints.forEach((element:any) => {
|
||||
if(!element.designType){
|
||||
@@ -674,6 +727,8 @@ export default defineComponent({
|
||||
id:item.id,
|
||||
path:item.minIOPath,
|
||||
gradient:{},
|
||||
trims:item.trims,
|
||||
sketchString:item.sketchString,
|
||||
changed:item.changed?item.changed:false,
|
||||
designType:item.designType?item.designType:"Library",
|
||||
offset:item.layersObject?.[1]?.offset == null?[0,0]:item.layersObject[1].offset,
|
||||
@@ -711,6 +766,7 @@ export default defineComponent({
|
||||
gender:workspace?.sex,
|
||||
designSingleItemDTOList:clothes,
|
||||
isPreview:false,
|
||||
sketchString:'',
|
||||
ifSubmit:designItemDetail.isPreview,
|
||||
processId:String(this.userInfo?.userId),
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
@@ -772,6 +828,7 @@ export default defineComponent({
|
||||
img.onload = () => {
|
||||
imgWidth = img.width
|
||||
resolve(img)
|
||||
img.remove()
|
||||
};
|
||||
img.onerror = reject;
|
||||
img.src = url;
|
||||
@@ -852,38 +909,46 @@ export default defineComponent({
|
||||
}else{
|
||||
this.deleteShow = false
|
||||
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.designItemDetail))
|
||||
|
||||
let data:any = this.setSubmitItem('preview',true)
|
||||
if(!this.deleteItemShow){
|
||||
return
|
||||
}
|
||||
this.loadingShow = true
|
||||
Https.axiosPost(Https.httpUrls.designSingle, data).then(
|
||||
(rv) => {
|
||||
this.designItemDetail.currentFullBodyView = rv.currentFullBodyView
|
||||
this.designItemDetail.ifSubmit = true
|
||||
this.loadingShow = false
|
||||
// if(this.designItemDetail.clothes[this.designItemDetail.clothes.legnth-1] && !this.designItemDetail.clothes[this.designItemDetail.clothes.legnth-1].id){
|
||||
// this.designItemDetail.clothes.split(this.designItemDetail.clothes.legnth-1,1)
|
||||
// }
|
||||
if(data.designSingleItemDTOList[data.designSingleItemDTOList.legnth-1] && !data.designSingleItemDTOList[data.designSingleItemDTOList.legnth-1].id){
|
||||
data.designSingleItemDTOList.split(data.designSingleItemDTOList.legnth-1,1)
|
||||
}
|
||||
this.store.commit("setDesignItemDetail", designItemDetail);
|
||||
console.log(123);
|
||||
this.store.commit("setDesignPreviewData", data);
|
||||
this.setRevocation(designItemDetail,data)
|
||||
this.deleteItemShow = false
|
||||
}
|
||||
).catch(res=>{
|
||||
this.loadingShow = false
|
||||
});
|
||||
this.setDesignSingle(data)
|
||||
}
|
||||
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
|
||||
DesignDetailAlter.changePlace()
|
||||
DesignDetailAlter.terminate()
|
||||
},
|
||||
setDesignSingle(data:any){
|
||||
this.loadingShow = true
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.designItemDetail))
|
||||
Https.axiosPost(Https.httpUrls.designSingle, data).then(
|
||||
(rv) => {
|
||||
// this.current.minIOPath = rv.clothes[this.currentIndex].minIOPath
|
||||
designItemDetail.clothes[this.currentIndex].minIOPath = rv.clothes[this.currentIndex].minIOPath
|
||||
this.current.path = rv.clothes[this.currentIndex].minIOPath
|
||||
designItemDetail.clothes[this.currentIndex].path = rv.clothes[this.currentIndex].path
|
||||
designItemDetail.clothes[this.currentIndex].sketchString = ''
|
||||
data.designSingleItemDTOList[this.currentIndex].sketchString =''
|
||||
data.designSingleItemDTOList[this.currentIndex].path =rv.clothes[this.currentIndex].minIOPath
|
||||
designItemDetail.currentFullBodyView = rv.currentFullBodyView
|
||||
designItemDetail.ifSubmit = true
|
||||
this.loadingShow = false
|
||||
// if(this.designItemDetail.clothes[this.designItemDetail.clothes.legnth-1] && !this.designItemDetail.clothes[this.designItemDetail.clothes.legnth-1].id){
|
||||
// this.designItemDetail.clothes.split(this.designItemDetail.clothes.legnth-1,1)
|
||||
// }
|
||||
if(data.designSingleItemDTOList[data.designSingleItemDTOList.legnth-1] && !data.designSingleItemDTOList[data.designSingleItemDTOList.legnth-1].id){
|
||||
data.designSingleItemDTOList.split(data.designSingleItemDTOList.legnth-1,1)
|
||||
}
|
||||
this.store.commit("setDesignItemDetail", designItemDetail);
|
||||
this.store.commit("setDesignPreviewData", data);
|
||||
this.setRevocation(designItemDetail,data)
|
||||
this.deleteItemShow = false
|
||||
}
|
||||
).catch(res=>{
|
||||
this.loadingShow = false
|
||||
});
|
||||
},
|
||||
setDelete(num:number){
|
||||
this.designItemDetail.clothes.splice(num,1)
|
||||
this.deleteItemShow = true
|
||||
@@ -942,12 +1007,16 @@ export default defineComponent({
|
||||
"color": color,
|
||||
gradient:gradient,
|
||||
priority:10,
|
||||
trims:{
|
||||
"ifSingle": null,
|
||||
"prints":null,
|
||||
},
|
||||
"printObject": {
|
||||
"ifSingle": null,
|
||||
"prints": [
|
||||
{}
|
||||
]
|
||||
},
|
||||
sketchString:'',
|
||||
"layersObject": [
|
||||
]
|
||||
}
|
||||
@@ -1001,17 +1070,19 @@ export default defineComponent({
|
||||
}
|
||||
});
|
||||
}
|
||||
this.current.sketchString = ''
|
||||
this.currentIndex = this.currentIndex>0?this.currentIndex:0
|
||||
data.designSingleItemDTOList[this.currentIndex] = {
|
||||
color:`${this.current.color.r} ${this.current.color.g} ${this.current.color.b}`,
|
||||
|
||||
id:this.current.id?this.current.id:'',
|
||||
changed:this.current.changed?this.current.changed:false,
|
||||
designType:this.current.designType?this.current.designType:'Library',
|
||||
path:this.current.minIOPath?this.current.minIOPath:'',
|
||||
offset:this.current.layersObject?.[1]?.offset?this.current.layersObject[1].offset:[0,0],
|
||||
priority:this.current.priority,
|
||||
trims:this.current.trims,
|
||||
scale:this.current.layersObject?.[1]?.scale?this.current.layersObject[1].scale:[1,1],
|
||||
sketchString:'',
|
||||
printObject:{
|
||||
ifSingle:this.current?.printObject?.ifSingle == null ? false : this.current?.printObject?.ifSingle,
|
||||
// prints:this.current?.printObject[0]?.path == null ? [] : [{
|
||||
@@ -1031,12 +1102,21 @@ export default defineComponent({
|
||||
this.store.commit('setDesignPreviewData',data)
|
||||
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
|
||||
DesignDetailAlter.changePlace()
|
||||
|
||||
if(this.driver__.driver){
|
||||
nextTick().then(()=>{
|
||||
driverObj__.moveNext();
|
||||
})
|
||||
}
|
||||
},
|
||||
setSloganData(data:any){
|
||||
this.current.sketchString = data
|
||||
|
||||
// let designData:any = this.setSubmitItem('preview',true)
|
||||
let designData = this.store.state.DesignDetailModule.designPreviewData
|
||||
designData.designSingleItemDTOList[this.currentIndex].sketchString = data
|
||||
this.setDesignSingle(designData)
|
||||
}
|
||||
//重新设计
|
||||
// redesignItem(){
|
||||
// let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
@@ -1356,20 +1436,34 @@ export default defineComponent({
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
.hideCursor{
|
||||
*{
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
}
|
||||
&.detail_modal_right_top::-webkit-scrollbar{display: none;}
|
||||
.clothes_detail_item{
|
||||
// margin-bottom: 5rem*1.2);
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: 20rem;
|
||||
// flex: 1;
|
||||
flex-shrink: 0;
|
||||
.centent_div{
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
justify-content: center;
|
||||
}
|
||||
.centent_print{
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: space-between;
|
||||
img{
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
.centent{
|
||||
cursor: pointer;
|
||||
|
||||
@@ -1386,11 +1480,18 @@ export default defineComponent({
|
||||
font-size: var(--aida-fsize1-8);
|
||||
color: #000000;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
.icon-dangqianweizhi{
|
||||
font-size: calc(1.8rem*1.2);
|
||||
color: #000000;
|
||||
margin-right: calc(1rem*1.2);
|
||||
}
|
||||
.fi-rs-pencil-paintbrush{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
i{
|
||||
font-size: var(--aida-fsize1-8);
|
||||
display: flex;
|
||||
@@ -1442,7 +1543,8 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
&.clothes_detail_item_print,
|
||||
&.clothes_detail_item_apparel{
|
||||
&.clothes_detail_item_apparel,
|
||||
&.clothes_detail_item_elements{
|
||||
.fi-rr-picture{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -1,24 +1,40 @@
|
||||
<template>
|
||||
<div class="detail_modal_body_select">
|
||||
<div v-show="(type_ == 1 || type_ == 2) && select == true">
|
||||
<div v-show="(type_ == 1 || type_ == 2 || type_ == 4) && select == true">
|
||||
<div class="detail_uploadLibrary">
|
||||
<div class="switch_type_list">
|
||||
<div
|
||||
@click.stop="open(1)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>{{ $t('DesignDetailAlter.Upload') }}</span>
|
||||
<div
|
||||
@click.stop="open(1)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 1 ? 'select_swtich' : '',]"
|
||||
:style="{cursor:type_==4?'no-drop':''}"
|
||||
>
|
||||
<span>{{ $t('DesignDetailAlter.Upload') }}</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="open(2)"
|
||||
class="switch_type_item Guide_1_21"
|
||||
:class="[openClick == 2 ? 'select_swtich' : '',driver__.driver?'showEvents':'']"
|
||||
>
|
||||
<span>{{ $t('DesignDetailAlter.Library') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="open(2)"
|
||||
class="switch_type_item Guide_1_21"
|
||||
:class="[openClick == 2 ? 'select_swtich' : '',driver__.driver?'showEvents':'']"
|
||||
>
|
||||
<span>{{ $t('DesignDetailAlter.Library') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="openClick == 2" class="detail_Library">
|
||||
<div class="select_block">
|
||||
<a-select
|
||||
v-model:value="designType"
|
||||
:options="designTypeList"
|
||||
@change="handleChange"
|
||||
:fieldNames="{ label: 'name', value: 'value' }"
|
||||
>
|
||||
<template #suffixIcon
|
||||
><span
|
||||
class="icon iconfont icon-xiala"
|
||||
style="color: #343579"
|
||||
></span
|
||||
></template>
|
||||
</a-select>
|
||||
</div>
|
||||
<div class="content_search_block">
|
||||
<input class="search_input" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
||||
<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
||||
@@ -47,51 +63,7 @@
|
||||
v-show="file?.status === 'done'"
|
||||
>
|
||||
<img :src="file?.url" class="upload_img" />
|
||||
<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="sketchCatecoryList" :generateList="uploadList" :item="file" ></sketchCategory>
|
||||
|
||||
<!-- <div class="operate_file_block" v-show="selectCode == 'Sketchboard'">
|
||||
<div class="select_img_type">
|
||||
<div
|
||||
class="select_category"
|
||||
@click.stop="showFileCategory(file)"
|
||||
>
|
||||
{{ file.level2Type }}
|
||||
<div
|
||||
v-if="!body"
|
||||
:class="[
|
||||
'icon',
|
||||
'iconfont',
|
||||
'icon-xiala',
|
||||
file.categoryShow
|
||||
? 'icon_rotate'
|
||||
: '',
|
||||
]"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="!body"
|
||||
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.value }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<sketchCategory v-if="selectCode == 'Sketchboard' || selectCode == 'Printboard'" :disignTypeList="sketchCatecoryList" :generateList="uploadList" :item="file" ></sketchCategory>
|
||||
<div
|
||||
class="delete_file_block"
|
||||
@click.stop="deleteFile(index)"
|
||||
@@ -138,7 +110,7 @@
|
||||
<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)"/>
|
||||
<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="sketchCatecoryList" :generateList="clothesList" :item="file" ></sketchCategory>
|
||||
<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="designTypeList" :generateList="clothesList" :item="file" :isSpread="selectCode == 'DesignElements'" :isSetSketchCategory="true" @upTypeSucced='handleChange'></sketchCategory>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="total > clothesList.length" class="material_content_list_loding" v-observe>
|
||||
@@ -288,7 +260,7 @@ import { useStore } from "vuex";
|
||||
import { LoadingOutlined } from '@ant-design/icons-vue';
|
||||
import { message,Upload} from 'ant-design-vue';
|
||||
import { Sketch, Chrome} from '@ans1998/vue3-color'
|
||||
import {getUploadUrl,rgbToHsv} from '@/tool/util'
|
||||
import {getUploadUrl,rgbToHsv,isMoible} from '@/tool/util'
|
||||
import DesignDetailEnd from './DesignDetailEnd.vue';
|
||||
import { getCookie } from "@/tool/cookie";
|
||||
import { openGuide,driverObj__ } from "@/tool/guide";
|
||||
@@ -321,6 +293,11 @@ export default defineComponent({
|
||||
let apparelList = ref([])
|
||||
let printList = ref([])
|
||||
let selectCode = ref('Sketchboard')
|
||||
let designTypeList = ref([])
|
||||
let printCatecoryList = computed(()=>{
|
||||
return store.state.UserHabit.printType
|
||||
})
|
||||
let designType = ref('')
|
||||
//颜色
|
||||
let selectColor = ref({
|
||||
rgba:{},
|
||||
@@ -331,6 +308,9 @@ export default defineComponent({
|
||||
let sketchCatecoryList = computed(()=>{
|
||||
return store.state.Workspace.workspacePosition
|
||||
})
|
||||
let designElementsType = computed(()=>{
|
||||
return store.state.UserHabit.designElementsType;
|
||||
})
|
||||
let colorList = ref([{},{},{},{},{},{},{},{},{}])
|
||||
let selectIndex = ref(0)
|
||||
let gradient = ref({
|
||||
@@ -359,6 +339,7 @@ export default defineComponent({
|
||||
})
|
||||
provide('colorList',colorList)
|
||||
provide('selectIndex',selectIndex)
|
||||
provide('designTypeList',designTypeList)
|
||||
let {t} = useI18n()
|
||||
return{
|
||||
store,
|
||||
@@ -375,6 +356,10 @@ export default defineComponent({
|
||||
printList,
|
||||
selectCode,
|
||||
|
||||
designTypeList,
|
||||
printCatecoryList,
|
||||
designType,
|
||||
|
||||
type_,
|
||||
select,
|
||||
selectColor,
|
||||
@@ -383,6 +368,7 @@ export default defineComponent({
|
||||
driver__,
|
||||
body,
|
||||
sketchCatecoryList,
|
||||
designElementsType,
|
||||
colorList,
|
||||
selectIndex,
|
||||
gradient,
|
||||
@@ -595,12 +581,22 @@ export default defineComponent({
|
||||
this.selectCode = 'Sketchboard'
|
||||
this.upload.level1Type = 'Sketchboard'
|
||||
this.uploadList = this.apparelList
|
||||
this.designTypeList = this.sketchCatecoryList
|
||||
this.designType = this.designTypeList[0].value
|
||||
}else if (num == 2){
|
||||
this.selectCode = 'Printboard'
|
||||
this.upload.level1Type = 'Printboard'
|
||||
this.uploadList = this.printList
|
||||
this.designTypeList = this.printCatecoryList
|
||||
this.designType = this.designTypeList[0].value
|
||||
}else if (num == 4){
|
||||
this.selectCode = 'DesignElements'
|
||||
this.upload.level1Type = 'DesignElements'
|
||||
this.designTypeList = this.designElementsType
|
||||
this.designType = this.designTypeList[0]?.value
|
||||
this.openClick = 2
|
||||
}
|
||||
if(num == 1 || num == 2){
|
||||
if(num == 1 || num == 2 || num == 4){
|
||||
this.clothesList = []
|
||||
this.getLibraryList()
|
||||
}
|
||||
@@ -650,6 +646,7 @@ export default defineComponent({
|
||||
(v) => v.status === "done"
|
||||
);
|
||||
this.uploadList = fileList
|
||||
this.selectImgItem(this.uploadList[this.uploadList.length-1])
|
||||
// this.store.commit("clearMoodTemplateId");
|
||||
if(this.selectCode == 'Sketchboard'){
|
||||
this.apparelList = this.uploadList
|
||||
@@ -706,6 +703,7 @@ export default defineComponent({
|
||||
// DesignDetailEnd.colorList = [{}]
|
||||
DesignDetailEnd.sketchImg={}
|
||||
this.terminate()
|
||||
DesignDetailEnd.clearModal()
|
||||
},
|
||||
// this.getLibraryList('Moodboard')
|
||||
// this.getLibraryList('Printboard')
|
||||
@@ -721,39 +719,57 @@ export default defineComponent({
|
||||
});
|
||||
},
|
||||
selectImgItem(imgData){
|
||||
let DesignDetailEnd = this.$refs.DesignDetailEnd
|
||||
imgData.categoryValue = imgData.level2TypeEnum.value
|
||||
imgData.category = imgData.level2TypeEnum.name
|
||||
if(this.selectCode == 'Sketchboard'){
|
||||
// this.current.id_ = imgData.id
|
||||
// this.current.path = imgData.url
|
||||
let DesignDetailEnd = this.$refs.DesignDetailEnd
|
||||
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.designType = imgData?.designType
|
||||
this.current.printObject.minIOPath = imgData.minIOPath
|
||||
this.current.printObject.prints = [{
|
||||
minIOPath:imgData.minIOPath,
|
||||
path:imgData?.url,
|
||||
designType: imgData?.designType
|
||||
}]
|
||||
if(this.driver__.driver){
|
||||
nextTick().then(()=>{
|
||||
driverObj__.moveNext();
|
||||
})
|
||||
}
|
||||
}else if(this.selectCode == 'Printboard'){
|
||||
// this.current.printObject.path = imgData?.url
|
||||
// this.current.printObject.id = imgData?.id
|
||||
// this.current.printObject.designType = imgData?.designType
|
||||
// this.current.printObject.minIOPath = imgData.minIOPath
|
||||
// this.current.printObject.prints = [{
|
||||
// minIOPath:imgData.minIOPath,
|
||||
// path:imgData?.url,
|
||||
// designType: imgData?.designType
|
||||
// }]
|
||||
// if(this.driver__.driver){
|
||||
// nextTick().then(()=>{
|
||||
// driverObj__.moveNext();
|
||||
// })
|
||||
// }
|
||||
imgData.path = imgData.url
|
||||
DesignDetailEnd.printsList.push(imgData)
|
||||
|
||||
// console.log(this.current.printObject,imgData);
|
||||
}else if(this.selectCode == 'DesignElements'){
|
||||
imgData.path = imgData.url
|
||||
DesignDetailEnd.elementsList.push(imgData)
|
||||
}
|
||||
},
|
||||
handleChange(){
|
||||
this.currentPage = 1
|
||||
this.clothesList = []
|
||||
this.getLibraryList('')
|
||||
},
|
||||
//请求我的印花&&模型
|
||||
getLibraryList(){
|
||||
let type = this.body?this.current.type:''
|
||||
let level2Type = ''
|
||||
if(this.selectCode == 'Sketchboard' || this.selectCode == 'Printboard' || this.selectCode == 'DesignElements'){
|
||||
level2Type = this.designType
|
||||
}
|
||||
let type = this.body?this.current.type:level2Type
|
||||
let workspace = this.store.state.Workspace.workspace
|
||||
let data = {
|
||||
// level1Type:'Printboard',
|
||||
level1Type:this.selectCode,
|
||||
level2Type:this.selectCode == 'Sketchboard'?type:'',
|
||||
// level2Type:'Pattern',
|
||||
level2Type:type,
|
||||
modelSex:workspace?.sex,
|
||||
page:this.currentPage,
|
||||
pictureName:this.searchPictureName,
|
||||
@@ -783,6 +799,7 @@ export default defineComponent({
|
||||
|
||||
//衣服
|
||||
open(num) {
|
||||
if(num == 1 && this.type_ ==4)return
|
||||
this.openClick = num;
|
||||
if(num ==2 ){
|
||||
this.getLibraryList()
|
||||
@@ -805,7 +822,7 @@ export default defineComponent({
|
||||
if (!isJpgOrPng) {
|
||||
message.info(this.t('DesignDetailAlter.jsContent4'));
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 3;
|
||||
const isLt2M = file.size / 1024 / 1024 < 5;
|
||||
if (!isLt2M) {
|
||||
message.info(this.t('DesignDetailAlter.jsContent5'));
|
||||
}
|
||||
@@ -905,7 +922,7 @@ export default defineComponent({
|
||||
let hex = this.rgbaToHex(rgba)
|
||||
this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色
|
||||
// isMoible() true为移动端
|
||||
let gradientWidth = document.querySelector('.colorboard_upload_modal .color_setting_operate_bg').clientWidth
|
||||
let gradientWidth = document.querySelector('.detail_modal_body_select .color_setting_operate_bg').clientWidth
|
||||
let position = {
|
||||
x:moible?event.touches[0].screenX:event?.x,
|
||||
left:event.target.style.left?event.target.style.left.split('%')[0]:0
|
||||
@@ -1098,6 +1115,7 @@ export default defineComponent({
|
||||
this.selectColorList = selectColorList
|
||||
// this.getHsvColor(selectColorList)
|
||||
this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex}
|
||||
img.remove()
|
||||
};
|
||||
|
||||
|
||||
@@ -1136,6 +1154,19 @@ export default defineComponent({
|
||||
|
||||
}
|
||||
.detail_Library{
|
||||
.select_block{
|
||||
border: calc(0.1rem* 1.2) solid #F1F1F1;
|
||||
// margin-right: calc(2.3rem*1.2);
|
||||
height: 4rem;
|
||||
width: calc(20rem*1.2);
|
||||
margin-bottom: 1rem;
|
||||
.ant-select{
|
||||
width: 90%;
|
||||
}
|
||||
.ant-select:not(.ant-select-customize-input) .ant-select-selector{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.content_search_block{
|
||||
display: flex;
|
||||
margin-bottom: calc(1rem*1.2);
|
||||
@@ -1150,7 +1181,7 @@ export default defineComponent({
|
||||
// font-size: 1.6rem*1.2);
|
||||
font-size: calc(1.2rem*1.2);
|
||||
font-weight: 400;
|
||||
height: calc(3rem*1.2);
|
||||
height: 4rem;
|
||||
|
||||
&::placeholder {
|
||||
color: #C2C2C2;
|
||||
|
||||
@@ -1,70 +1,49 @@
|
||||
<template>
|
||||
<div class="detail_modal_body_result">
|
||||
<div v-show="type_ == 1 || type_ == 2" class="result_apparel_print">
|
||||
<div v-show="type_ == 1" class="result_apparel_print">
|
||||
<div class="upload_title result_apparel" v-show="type_ == 1">
|
||||
<i class="color_edit fi fi-bs-comments"></i>
|
||||
<span>{{ $t('DesignDetailEnd.NewApparel') }}</span>
|
||||
</div>
|
||||
<div v-show="type_ == 2" class="result_print">
|
||||
<div>
|
||||
<div class="upload_title">
|
||||
<i class="color_edit fi fi-bs-comments"></i>
|
||||
<span>{{ $t('DesignDetailEnd.NewPrint') }}</span>
|
||||
</div>
|
||||
<div class="print_left">
|
||||
<!-- <img :src="current.path" :title="current.type"> -->
|
||||
<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?.prints?.[0]?.path"
|
||||
class="delete_file_block"
|
||||
@click="deleteFile"
|
||||
>
|
||||
<span class="icon iconfont icon-shanchu"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="upload_title">
|
||||
<i class="color_edit fi fi-bs-comments"></i>
|
||||
<span>{{ $t('DesignDetailEnd.Placement') }}</span>
|
||||
</div>
|
||||
<div class="print_right">
|
||||
<div class="habit_Overal_Single">
|
||||
<div
|
||||
class="habit_Overal_Single_text"
|
||||
:class="{ active: !overallSingle }"
|
||||
>
|
||||
{{ $t('DesignDetailEnd.Overall') }}
|
||||
</div>
|
||||
<a-switch @click="setOveralSingle" v-model:checked="overallSingle" />
|
||||
<div
|
||||
class="habit_Overal_Single_text"
|
||||
:class="{ active: overallSingle }"
|
||||
>
|
||||
{{ $t('DesignDetailEnd.Single') }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div v-show="!overallSingle" class="habit_System_Designer">
|
||||
<a-slider id="system_silder"
|
||||
v-model:value="systemDesignerPercentage"
|
||||
@afterChange="systemDesigner"
|
||||
:tip-formatter="formatter"
|
||||
>
|
||||
</a-slider>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="result_apparel_print_img">
|
||||
<img v-show="type_==1" class="result_appare_img" :src="sketchImg?.path?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 v-show="type_==2" class="result_print_img" @click="setPrint" :title="current?.type">
|
||||
<!-- <div v-show="type_==2" class="result_print_img" @click="setPrint" :title="current?.type">
|
||||
<img v-for="item in current?.layersObject" :src="item.imageUrl" alt="">
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="type_ == 2" class="result_apparel_elements">
|
||||
<div class="upload_title result_apparel">
|
||||
<i class="color_edit fi fi-bs-comments"></i>
|
||||
<span>{{ $t('DesignDetailEnd.NewPrint') }}</span>
|
||||
</div>
|
||||
<div class="modal_img">
|
||||
<div class="modal_img_item" v-for="item,index in exhibitionList.print" :key="item" >
|
||||
<!-- <div class="modal_img_item" v-for="item,index in current.printObject.prints" :key="item" > -->
|
||||
<img v-lazy="item.path" alt="">
|
||||
<sketchCategory :disignTypeList="designTypeList" :generateList="exhibitionList.print" :item="item" :isSpread="true" :isSetSketchCategory="true"></sketchCategory>
|
||||
|
||||
<div
|
||||
class="delete_file_block"
|
||||
@click="deleteSelectptints(item,index)"
|
||||
>
|
||||
<span class="icon iconfont icon-shanchu"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal_img_item" v-for="item,index in printsList" :key="item" >
|
||||
<img v-lazy="item.path" alt="">
|
||||
<sketchCategory :disignTypeList="designTypeList" :generateList="printsList" :item="item" :isSpread="true" :isSetSketchCategory="true"></sketchCategory>
|
||||
<div
|
||||
class="delete_file_block"
|
||||
@click="deleteptints(item,index)"
|
||||
>
|
||||
<span class="icon iconfont icon-shanchu"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="type_ == 3">
|
||||
<div class="result_color upload_title">
|
||||
<i class="color_edit fi fi-bs-comments"></i>
|
||||
@@ -84,11 +63,43 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="type_ == 4" class="result_apparel_elements">
|
||||
<div class="upload_title result_apparel">
|
||||
<i class="color_edit fi fi-bs-comments"></i>
|
||||
<span>New Elements</span>
|
||||
</div>
|
||||
<div class="modal_img">
|
||||
|
||||
<!-- <div class="modal_img_item" v-for="item,index in current.trims.prints" :key="item" > -->
|
||||
<div class="modal_img_item" v-for="item,index in exhibitionList.elements" :key="item" >
|
||||
<img v-lazy="item.path" alt="">
|
||||
<div
|
||||
class="delete_file_block"
|
||||
@click="deleteSelectElements(item,index)"
|
||||
>
|
||||
<span class="icon iconfont icon-shanchu"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal_img_item" v-for="item,index in elementsList" :key="item" >
|
||||
<img v-lazy="item.url" alt="">
|
||||
<div
|
||||
class="delete_file_block"
|
||||
@click="deleteElements(item,index)"
|
||||
>
|
||||
<span class="icon iconfont icon-shanchu"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="type_ == 1 || type_ == 3" @click.stop="setPreview" class="subitOkPreviewBtn" :class="[ !sketchImg?.id?!current?.id?'active':'':'' ]">{{ $t('DesignDetailEnd.preview') }}</div>
|
||||
<div v-if="type_ == 2 && current?.printObject?.prints?.[0]?.path != null" @click.stop="setPrint" class="subitOkPreviewBtn Guide_1_23">{{ $t('DesignDetailEnd.Layout') }}</div>
|
||||
<div v-else-if="type_ == 2 && designItemDetail?.clothes?.[currentIndex]?.printObject?.prints?.[0]?.path != null && current?.printObject?.prints?.[0]?.path == null" @click.stop="setPreview" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.preview') }}</div>
|
||||
<div v-if="type_ == 2 && (current?.printObject?.prints?.length != 0 || printsList.length != 0)" @click.stop="setPrint" class="subitOkPreviewBtn Guide_1_23">{{ $t('DesignDetailEnd.Layout') }}</div>
|
||||
<!-- <div v-else-if="type_ == 2 && designItemDetail?.clothes?.[currentIndex]?.printObject?.prints?.[0]?.path != null && current?.printObject?.prints?.[0]?.path == null" @click.stop="setPreview" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.preview') }}</div> -->
|
||||
<div v-if="type_ == 4" @click.stop="setElemets" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.Layout') }}</div>
|
||||
|
||||
<DesignPrintOperation v-if="!moible" ref="DesignPrintOperation"></DesignPrintOperation>
|
||||
<DesignPrintOperationMobile v-else ref="DesignPrintOperationMobile"></DesignPrintOperationMobile>
|
||||
<DesignElementsOperation v-if="!moible" ref="DesignElementsOperation"></DesignElementsOperation>
|
||||
<DesignPrintMobile v-else ref="DesignPrintMobile"></DesignPrintMobile>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
@@ -102,15 +113,19 @@ import { useStore } from "vuex";
|
||||
import { Sketch} from '@ans1998/vue3-color'
|
||||
import DesignPrintOperation from './DesignPrintOperation.vue';
|
||||
import DesignPrintOperationMobile from './DesignPrintOperationMobile.vue';
|
||||
import DesignElementsOperation from './DesignElements.vue';
|
||||
import DesignPrintMobile from './DesignElementsMobile.vue';
|
||||
import { message,Upload} from 'ant-design-vue';
|
||||
import { openGuide,driverObj__ } from "@/tool/guide";
|
||||
import {isMoible,setGradual} from '@/tool/util'
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
|
||||
|
||||
export default defineComponent({
|
||||
props: ["msg"],
|
||||
components:{
|
||||
Draggable,Sketch,DesignPrintOperation,DesignPrintOperationMobile
|
||||
Draggable,Sketch,DesignPrintOperation,DesignPrintOperationMobile,
|
||||
DesignElementsOperation,DesignPrintMobile,sketchCategory
|
||||
},
|
||||
setup(prop) {
|
||||
const store = useStore();
|
||||
@@ -122,10 +137,9 @@ export default defineComponent({
|
||||
let moible = inject('moible')//父组件传过来的数据
|
||||
let designItemDetail = inject('designItemDetail')//父组件传过来的数据
|
||||
let currentIndex = inject('currentIndex')//父组件传过来的数据
|
||||
let designTypeList = inject('designTypeList')//父组件传过来的数据
|
||||
let previewShow = ref(false)
|
||||
//印花
|
||||
let overallSingle = ref(false)
|
||||
let systemDesignerPercentage = ref(30)
|
||||
|
||||
//颜色
|
||||
// let colorList = ref([{}])
|
||||
@@ -135,7 +149,12 @@ export default defineComponent({
|
||||
//加载中
|
||||
let loadingShow = ref(false)
|
||||
|
||||
let exhibitionList = inject('exhibitionList')
|
||||
let {t} = useI18n()
|
||||
let printsList = ref([])
|
||||
let elementsList = ref([
|
||||
|
||||
])
|
||||
return{
|
||||
store,
|
||||
current,
|
||||
@@ -145,14 +164,16 @@ export default defineComponent({
|
||||
moible,
|
||||
designItemDetail,
|
||||
currentIndex,
|
||||
designTypeList,
|
||||
previewShow,
|
||||
type_,
|
||||
overallSingle,
|
||||
systemDesignerPercentage,
|
||||
colorList,
|
||||
selectIndex,
|
||||
loadingShow,
|
||||
exhibitionList,
|
||||
t,
|
||||
printsList,
|
||||
elementsList,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
@@ -182,14 +203,40 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'exhibitionList.print':{
|
||||
handler(newVal,oldVal){
|
||||
this.printsList = this.printsList.filter(objA => {
|
||||
return !newVal.some(objB => objB.minIOPath === objA.minIOPath);
|
||||
});
|
||||
this.setExhibitionType('print')
|
||||
}
|
||||
},
|
||||
'exhibitionList.elements':{
|
||||
handler(newVal,oldVal){
|
||||
this.elementsList = this.elementsList.filter(objA => {
|
||||
return !newVal.some(objB => objB.minIOPath === objA.minIOPath);
|
||||
});
|
||||
this.setExhibitionType('elements')
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
|
||||
//点击判断
|
||||
init(num){
|
||||
// this.current = JSON.parse(JSON.stringify(this.currentItem))
|
||||
this.type_ = num
|
||||
this.colorList[this.selectIndex] = this.$parent.selectColor
|
||||
this.overallSingle = this.current?.printObject?.ifSingle == null?false:this.current?.printObject?.ifSingle
|
||||
this.systemDesignerPercentage = this.current?.printObject?.ifSingle?this.current?.printObject?.prints[0].scale?this.current?.printObject?.prints[0].scale*100:100:100
|
||||
if(num == 2){
|
||||
this.setExhibitionType('print')
|
||||
}else if(num == 4){
|
||||
this.setExhibitionType('elements')
|
||||
}
|
||||
},
|
||||
clearModal(){
|
||||
this.elementsList = []
|
||||
this.printsList = []
|
||||
},
|
||||
//模型
|
||||
setSketchImg(v){
|
||||
@@ -201,17 +248,22 @@ export default defineComponent({
|
||||
this.sketchImg.designType = v.designType
|
||||
},
|
||||
//印花
|
||||
systemDesigner(num) {
|
||||
this.current.printObject.scale = num
|
||||
},
|
||||
setOveralSingle(){
|
||||
this.current.printObject.ifSingle = this.overallSingle
|
||||
},
|
||||
formatter(value) {
|
||||
return `${value*3}%`;
|
||||
setExhibitionType(str){
|
||||
this.exhibitionList[str].forEach((item,index)=>{
|
||||
if(!item.categoryValue){
|
||||
this.designTypeList.forEach((typeItem)=>{
|
||||
if(item.level2Type == typeItem.value){
|
||||
item.categoryValue = typeItem.name
|
||||
item.category = typeItem.value
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
setPrint(){
|
||||
if(this.current?.printObject?.prints?.[0]?.path){
|
||||
// if(this.current?.printObject?.prints?.[0]?.path){
|
||||
let DesignPrintOperation = isMoible() ? this.$refs.DesignPrintOperationMobile : this.$refs.DesignPrintOperation
|
||||
DesignPrintOperation.init()
|
||||
if(this.driver__.driver){
|
||||
@@ -219,9 +271,9 @@ export default defineComponent({
|
||||
driverObj__.moveNext();
|
||||
})
|
||||
}
|
||||
}else{
|
||||
message.info(this.t('DesignDetailEnd.jsContent1'));
|
||||
}
|
||||
// }else{
|
||||
// message.info(this.t('DesignDetailEnd.jsContent1'));
|
||||
// }
|
||||
|
||||
},
|
||||
deleteFile(){
|
||||
@@ -286,6 +338,23 @@ export default defineComponent({
|
||||
// arr[index].id = this.sketchImg.id_? this.sketchImg.id_:this.current.id
|
||||
return arr
|
||||
},
|
||||
deleteptints(item,index){
|
||||
this.printsList.splice(index,1)
|
||||
},
|
||||
deleteSelectptints(item,index){
|
||||
this.exhibitionList.print.splice(index,1)
|
||||
},
|
||||
deleteElements(item,index){
|
||||
this.elementsList.splice(index,1)
|
||||
},
|
||||
deleteSelectElements(item,index){
|
||||
this.exhibitionList.elements.splice(index,1)
|
||||
},
|
||||
setElemets(){
|
||||
if(this.current.trims.prints && this.current.trims.prints.length == 0 && this.elementsList.length == 0)return message.info('请选择至少一张element')
|
||||
let DesignElementsOperation = isMoible() ? this.$refs.DesignPrintMobile : this.$refs.DesignElementsOperation
|
||||
DesignElementsOperation.init()
|
||||
},
|
||||
//提交
|
||||
setPreview(){
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
@@ -329,6 +398,8 @@ export default defineComponent({
|
||||
}
|
||||
let color = `${this.colorList[this.selectIndex].rgba.r} ${this.colorList[this.selectIndex].rgba.g} ${this.colorList[this.selectIndex].rgba.b}`
|
||||
data.designSingleItemDTOList[index].color = color
|
||||
}else if(this.type_ == 4){
|
||||
data.designSingleItemDTOList[index].trims = this.current.trims
|
||||
}
|
||||
if(this.colorList[this.selectIndex].gradient){
|
||||
let gradient = this.colorList[this.selectIndex].gradient
|
||||
@@ -353,6 +424,7 @@ export default defineComponent({
|
||||
delete designItemDetail.clothes[index].gradient
|
||||
}
|
||||
designItemDetail.clothes[index].designType = item.designType
|
||||
designItemDetail.clothes[index].trims = item.trims
|
||||
designItemDetail.clothes[index].layersObject = item.layersObject
|
||||
designItemDetail.clothes[index].minIOPath = item.minIOPath
|
||||
designItemDetail.clothes[index].path = item.path
|
||||
@@ -544,6 +616,7 @@ export default defineComponent({
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: calc(2rem*1.2);
|
||||
align-content: flex-start;
|
||||
&.modal_img::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
@@ -590,6 +663,48 @@ export default defineComponent({
|
||||
|
||||
}
|
||||
}
|
||||
//elements
|
||||
.result_apparel_elements{
|
||||
height: 85%;
|
||||
// height: 100%;
|
||||
.modal_img{
|
||||
height: calc(100%);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.modal_img_item{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: auto;
|
||||
border: none;
|
||||
img{
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.delete_file_block{
|
||||
display: none;
|
||||
width: calc(3.2rem*1.2);
|
||||
height: calc(3.2rem*1.2);
|
||||
background: rgba(0,0,0,0.6);
|
||||
border-radius: calc(0.4rem*1.2);
|
||||
position: absolute;
|
||||
top: calc(0.9rem*1.2);
|
||||
right: calc(0.9rem*1.2);
|
||||
text-align: center;
|
||||
line-height: calc(3.2rem*1.2);
|
||||
left: auto;
|
||||
cursor: pointer;
|
||||
.icon-shanchu{
|
||||
font-size: calc(1.6rem*1.2);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
&:hover .delete_file_block{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.subitOkPreviewBtn{
|
||||
bottom: calc(4rem*1.2);
|
||||
position: absolute;
|
||||
|
||||
922
src/component/Detail/DesignElements.vue
Normal file
922
src/component/Detail/DesignElements.vue
Normal file
@@ -0,0 +1,922 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal
|
||||
class="designElements_modal"
|
||||
v-model:visible="designElements"
|
||||
:footer="null"
|
||||
width="78%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:keyboard="false"
|
||||
:mask="true"
|
||||
>
|
||||
<div class="designElements_content">
|
||||
<div class="design_title_text">
|
||||
<div>{{ $t('DesignPrintOperation.Placement') }}</div>
|
||||
</div>
|
||||
<div class="design_closeIcon" @click.stop="closeModal()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
</div>
|
||||
<div class="designElements_open">
|
||||
<!-- -->
|
||||
<div class="print_right">
|
||||
<div class="print_right show_print_right ">
|
||||
<div @click="random" class="button_second">{{ $t('DesignPrintOperation.Random') }}</div>
|
||||
<div class="designElements_nav">
|
||||
<div class="designElements_single" v-for="item,index in designElementsList" :key="item">
|
||||
<img :src="item.path" @click="setpitch(item,index)">
|
||||
</div>
|
||||
<div class="designElements_single" v-for="item,index in designSelectElementsList" :key="item">
|
||||
<img :src="item.path" @click="setpitch(item,index)">
|
||||
</div>
|
||||
</div>
|
||||
<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
|
||||
<div class="subitOkPreviewBtn _1" @click.stop="setOK">OK</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="designElements_centent" id="designElementsCentent">
|
||||
<div class="designElements_imgMask">
|
||||
<div class="designElements_print">
|
||||
<div
|
||||
v-for="item,index in exhibitionElementsList"
|
||||
:key="item"
|
||||
:style="[printStyleList?.[index]?.style]"
|
||||
@mousedown.stop="itemMoveMousedown(index,$event)"
|
||||
class="modal_imgItem"
|
||||
ref="content" >
|
||||
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designElements_imgItme" draggable="false">
|
||||
</div>
|
||||
</div>
|
||||
<img :src="current?.path" alt="" class="designElements_sketch">
|
||||
<div class="designElements_btn">
|
||||
<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElements_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
|
||||
<li class="designElements_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
|
||||
<li class="designElements_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',$event)"></li>
|
||||
<li class="designElements_btn_left" @mousedown.stop="itemSizeMousedown('left',$event)"></li>
|
||||
<li class="designElements_btn_right" @mousedown.stop="itemSizeMousedown('right',$event)"></li>
|
||||
<li class="designElements_rotote" v-rotote.stop="[index,item.transform]"></li>
|
||||
<li class="designElements_delete" @click="deletePrint">
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
|
||||
</li>
|
||||
</ul>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="designElements_right">
|
||||
<div class="designElements_entirety_img">
|
||||
<img :src="currentFullBodyView" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script >
|
||||
import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "vue";
|
||||
// import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||
import { useStore } from "vuex";
|
||||
import { openGuide,driverObj__ } from "@/tool/guide";
|
||||
import { Https } from "@/tool/https";
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { useI18n } from "vue-i18n";
|
||||
export default defineComponent({
|
||||
|
||||
setup(prop) {
|
||||
let designElements = ref(false);
|
||||
let designSelectElementsList = ref([])//新增的元素
|
||||
let designElementsList = ref([])//已经存在的元素
|
||||
let exhibitionElementsList = ref([])//展示的元素
|
||||
let setOkData = ref([])
|
||||
let current = inject('current')//父组件传过来的数据
|
||||
let driver__ = inject('driver__')
|
||||
let setRevocation = inject('setRevocation')//父组件传过来的数据
|
||||
let printZIndex = ref(2)//印花优先级
|
||||
let printStyleList = ref([]);
|
||||
let currentPrintStyleList = {
|
||||
centers:{
|
||||
left:0,
|
||||
top:0,
|
||||
},
|
||||
style:{
|
||||
left:0+"px",
|
||||
top:0+"px",
|
||||
right:"auto",
|
||||
bottom:"auto",
|
||||
width:'auto',
|
||||
height:'auto',
|
||||
zIndex:1,
|
||||
},
|
||||
transform:{
|
||||
scale:1,
|
||||
rotateZ:0,
|
||||
},
|
||||
designElementsBtn:false
|
||||
}
|
||||
let direction = ref('')
|
||||
let imgDom = ref()
|
||||
let imgDomIndex = ref(0)
|
||||
let print = ref({
|
||||
width:'',
|
||||
height:''
|
||||
})
|
||||
let sketch = ref({
|
||||
width:'',
|
||||
height:''
|
||||
})
|
||||
let loadingShow = ref(false)
|
||||
let currentFullBodyView = ref('')
|
||||
let designItemDetailTS = ref({})
|
||||
let body = ref(false)
|
||||
let {t} = useI18n()
|
||||
return {
|
||||
designElements,
|
||||
designSelectElementsList,
|
||||
designElementsList,
|
||||
exhibitionElementsList,
|
||||
setOkData,
|
||||
current,
|
||||
driver__,
|
||||
printZIndex,
|
||||
printStyleList,
|
||||
currentPrintStyleList,
|
||||
direction,//判断点击的是li那个边
|
||||
imgDom,
|
||||
imgDomIndex,
|
||||
print,
|
||||
sketch,
|
||||
loadingShow,
|
||||
setRevocation,
|
||||
t,
|
||||
currentFullBodyView,
|
||||
designItemDetailTS,
|
||||
body,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
store: useStore(),
|
||||
};
|
||||
},
|
||||
|
||||
directives:{
|
||||
//操作旋转
|
||||
rotote:{
|
||||
mounted(el,value){
|
||||
|
||||
el.addEventListener('mousedown', (e) => {
|
||||
let elParent = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
|
||||
let mouse = true;
|
||||
let angle = 0
|
||||
let num = 1
|
||||
let x = 0
|
||||
let y = 0
|
||||
num = value.instance.printStyleList[value.instance.imgDomIndex].transform.scale
|
||||
angle = value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ
|
||||
// 添加鼠标按下事件监听器
|
||||
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
|
||||
// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
|
||||
// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
||||
e.stopPropagation()
|
||||
mouse = true;
|
||||
var info = el.getBoundingClientRect();
|
||||
let eX = info.x + info.width / 2;
|
||||
let eY = info.y + info.height / 2;
|
||||
let mousemove = (e) => {
|
||||
if (mouse) {
|
||||
let X = eX
|
||||
let Y = eY
|
||||
let x = e.clientX - X
|
||||
let y = Y - e.clientY
|
||||
angle = Math.atan2(x,y)*(180 / Math.PI)
|
||||
elParent.firstElementChild.style.transform = "rotateZ("+ angle + "deg)"
|
||||
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
|
||||
}
|
||||
}
|
||||
document.addEventListener('mousemove', mousemove);
|
||||
// 添加鼠标松开事件监听器
|
||||
let mouseup = () => {
|
||||
value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle
|
||||
mouse = false;
|
||||
document.removeEventListener('mouseup',mouseup)
|
||||
document.removeEventListener('mousemove',mousemove)
|
||||
}
|
||||
document.addEventListener('mouseup', mouseup);
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
this.currentFullBodyView = designItemDetail.currentFullBodyView? designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
|
||||
if(designItemDetail.others.length == 0){
|
||||
this.body = true
|
||||
}
|
||||
this.designElements = true
|
||||
this.clearModal()
|
||||
if(this.current.trims.prints)this.exhibitionElementsList = JSON.parse(JSON.stringify(this.current.trims.prints))
|
||||
if(this.$parent.exhibitionList.elements)this.designSelectElementsList = JSON.parse(JSON.stringify(this.$parent.exhibitionList.elements))
|
||||
if(this.$parent.elementsList)this.designElementsList = JSON.parse(JSON.stringify(this.$parent.elementsList))
|
||||
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'
|
||||
skecth.remove()
|
||||
}
|
||||
if(this.exhibitionElementsList.length > 0){
|
||||
this.exhibitionElementsList.forEach((item,index)=>{
|
||||
this.setTemplate(item,index)
|
||||
})
|
||||
}else{
|
||||
}
|
||||
},
|
||||
random(){
|
||||
if(this.printStyleList.length == 0)return
|
||||
this.printStyleList.forEach((v,index)=>{
|
||||
this.refetchTemplate(index)
|
||||
})
|
||||
},
|
||||
setPrintWH(url){
|
||||
let print = new Image
|
||||
return new Promise((resolve, reject) => {
|
||||
print.onload=()=>{
|
||||
this.print.width = print.width+'px'
|
||||
this.print.height = print.height+'px'
|
||||
resolve()
|
||||
print.remove()
|
||||
}
|
||||
print.src = url
|
||||
})
|
||||
},
|
||||
async setpitch(item,index){
|
||||
await this.setPrintWH(item.path)
|
||||
this.printStyleList.forEach((v)=>{
|
||||
v.designElementsBtn = false
|
||||
})
|
||||
this.currentPrintStyleList.url = item.url
|
||||
this.printStyleList.push(JSON.parse(JSON.stringify(this.currentPrintStyleList)))
|
||||
let currentIndex = this.printStyleList.length-1
|
||||
this.exhibitionElementsList.push({
|
||||
angle:0,
|
||||
designType:item.designType,
|
||||
minIOPath:item.minIOPath,
|
||||
path:item.path,
|
||||
priority:1,
|
||||
scale:1,
|
||||
location:[0,0]
|
||||
})
|
||||
this.refetchTemplate(currentIndex)
|
||||
|
||||
|
||||
},
|
||||
//设置移动
|
||||
itemMoveMousedown(index,event){
|
||||
if (event.target.tagName === 'IMG' || event.target.nodeName === 'IMG')return
|
||||
this.imgDomIndex = index
|
||||
this.printStyleList.forEach((v)=>{
|
||||
v.designElementsBtn = false
|
||||
})
|
||||
this.imgDom = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
|
||||
let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
|
||||
let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
||||
this.printStyleList[index].designElementsBtn = true
|
||||
this.printStyleList[index].style.zIndex = this.printZIndex++
|
||||
this.printStyleList[index].transform = {
|
||||
scale:scale,
|
||||
rotateZ:rotateZ?rotateZ:0,
|
||||
}
|
||||
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
|
||||
document.addEventListener("mouseup", this.mouseup);
|
||||
document.addEventListener("mousemove", this.moveMousemove);
|
||||
},
|
||||
//设置尺寸
|
||||
itemSizeMousedown(direction,event){
|
||||
this.direction = direction
|
||||
this.imgDom = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
|
||||
let scale = Number(this.imgDom.firstChild.style.transform?.split('scale(')[1]?.split(')')[0])
|
||||
let rotateZ = Number(this.imgDom.firstChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
||||
this.printStyleList[this.imgDomIndex].designElementsBtn = true
|
||||
this.printStyleList[this.imgDomIndex].transform = {
|
||||
scale:scale,
|
||||
rotateZ:rotateZ,
|
||||
}
|
||||
let imgDomWH = this.imgDom.getBoundingClientRect()
|
||||
let li = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName("designElements_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
|
||||
}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
|
||||
}
|
||||
|
||||
document.addEventListener("mouseup", this.sizeMouseup);
|
||||
document.addEventListener("mousemove", this.sizeMousemove);
|
||||
},
|
||||
//鼠标移动
|
||||
moveMousemove(e) {
|
||||
let imgDomWH = this.imgDom.getBoundingClientRect()
|
||||
let parentNode = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName("designElements_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
|
||||
this.printStyleList[this.imgDomIndex].style.top = y
|
||||
|
||||
|
||||
},
|
||||
|
||||
sizeMousemove(e) {
|
||||
let imgDomWH = this.imgDom.getBoundingClientRect()
|
||||
let parentNode =this.imgDom.parentNode
|
||||
let width = imgDomWH.width
|
||||
let height = imgDomWH.height
|
||||
let num = width/height
|
||||
let num1 = height/width
|
||||
let w,h
|
||||
//判断移动四个边
|
||||
if(this.direction == 'right'){
|
||||
w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)
|
||||
h = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
|
||||
width = w+'px'
|
||||
height = w*num1+'px'
|
||||
}else if(this.direction == 'top'){
|
||||
this.printStyleList[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)
|
||||
|
||||
height = h+'px'
|
||||
width = h*num+'px'
|
||||
}else if(this.direction == 'bottom'){
|
||||
h = (e.y - this.printStyleList[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)
|
||||
width = w+'px'
|
||||
height = w*num1+'px'
|
||||
}
|
||||
//判断尺寸是否到边
|
||||
this.printStyleList[this.imgDomIndex].style.width = width
|
||||
this.printStyleList[this.imgDomIndex].style.height = height
|
||||
|
||||
},
|
||||
//鼠标抬起
|
||||
sizeMouseup(e){
|
||||
this.printStyleList[this.imgDomIndex].style={
|
||||
right:'auto',
|
||||
left:this.imgDom.offsetLeft+'px',
|
||||
bottom:'auto',
|
||||
top:this.imgDom.offsetTop+'px',
|
||||
height:this.imgDom.offsetHeight+'px',
|
||||
width:this.imgDom.offsetWidth+'px',
|
||||
zIndex:this.printZIndex
|
||||
}
|
||||
document.removeEventListener("mouseup", this.sizeMouseup);
|
||||
document.removeEventListener("mousemove", this.sizeMousemove);
|
||||
},
|
||||
mouseup(e) {
|
||||
|
||||
document.removeEventListener("mouseup", this.mouseup);
|
||||
document.removeEventListener("mousemove", this.moveMousemove);
|
||||
},
|
||||
deletePrint(){
|
||||
this.exhibitionElementsList.splice(this.imgDomIndex,1)
|
||||
this.printStyleList.splice(this.imgDomIndex,1)
|
||||
},
|
||||
|
||||
//随机重置图片顺序
|
||||
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("designElements_modal")[0]?.getElementsByClassName('designElements_sketch')[0]
|
||||
let width
|
||||
let scale
|
||||
if(sketch.width<sketch.height){
|
||||
width = Math.trunc(Math.random()*(sketch?.width-sketch?.width/2))+sketch?.width/4
|
||||
scale = width / this.print.width.replace(/px/g,'')
|
||||
}else{
|
||||
width = Math.trunc(Math.random()*(sketch?.height-sketch?.height/2))+sketch?.height/4
|
||||
scale = width / this.print.height.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 - this.print.width.replace(/px/g,'')*scale
|
||||
let y = sketch?.height-this.print.height.replace(/px/g,'')*scale
|
||||
this.printStyleList[index].style = {
|
||||
left:Math.trunc(Math.random()*x)+1+"px",
|
||||
top:Math.trunc(Math.random()*y)+1+"px",
|
||||
right:"auto",
|
||||
bottom:"auto",
|
||||
width:this.print.width.replace(/px/g,'')*scale+'px',
|
||||
height:this.print.height.replace(/px/g,'')*scale+'px',
|
||||
zIndex:this.printZIndex++
|
||||
}
|
||||
this.printStyleList[index].transform = {
|
||||
rotateZ:this.printStyleList[index].transform.rotateZ?this.printStyleList[index].transform.rotateZ:0
|
||||
}
|
||||
},
|
||||
//设置图片
|
||||
async setTemplate(item,index) {
|
||||
await this.setPrintWH(item.path)
|
||||
this.designSelectElementsList
|
||||
let sketch = document.getElementsByClassName("designElements_modal")[0]?.getElementsByClassName('designElements_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
|
||||
let left = item.location[0]/sketchNum+'px'
|
||||
let top = item.location[1]/sketchNum+'px'
|
||||
if(sketch.offsetWidth < item.location[0]/sketchNum){
|
||||
left = sketch.offsetWidth +'px'
|
||||
}
|
||||
if(sketch.offsetHeight < item.location[1]/sketchNum){
|
||||
top = sketch.offsetHeight +'px'
|
||||
}
|
||||
this.printStyleList[index]={
|
||||
centers:{
|
||||
left:0,
|
||||
top:0,
|
||||
},
|
||||
style:{
|
||||
left:left,
|
||||
top:top,
|
||||
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,
|
||||
},
|
||||
designElementsBtn:false
|
||||
}
|
||||
},
|
||||
computeZindex(){
|
||||
let arr = JSON.parse(JSON.stringify(this.printStyleList))
|
||||
arr.sort((a, b) => {
|
||||
var a_num = a["style"].zIndex;
|
||||
var b_num = b["style"].zIndex;
|
||||
return a_num - b_num;
|
||||
});
|
||||
let num = 1
|
||||
arr.forEach((v)=>{
|
||||
v.style.zIndex = num++
|
||||
})
|
||||
return this.computeSize(arr)//计算单件衣服初始大小到目前大小的缩放比
|
||||
},
|
||||
computeSize(arr){
|
||||
// let num = this.sketch/
|
||||
return new Promise(async (resolve, reject) => {
|
||||
let sketch = document.getElementsByClassName("designElements_sketch")[0]
|
||||
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
|
||||
let prints = []
|
||||
let scale
|
||||
let location
|
||||
for (let index = 0; index < arr.length; index++) {
|
||||
await this.setPrintWH(this.exhibitionElementsList[index].path)
|
||||
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,
|
||||
location : location,
|
||||
priority:arr[index].style.zIndex,
|
||||
scale: scale,
|
||||
designType:this.exhibitionElementsList[index].designType,
|
||||
path:this.exhibitionElementsList[index].path,
|
||||
minIOPath:this.exhibitionElementsList[index].minIOPath,
|
||||
}
|
||||
prints.push(obj)
|
||||
}
|
||||
resolve(prints)
|
||||
})
|
||||
},
|
||||
async setPreview(){
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
let index
|
||||
designItemDetail.clothes.forEach((v,ind)=>{
|
||||
if(v.id == this.current.id){
|
||||
index = ind
|
||||
}
|
||||
})
|
||||
// let data = {
|
||||
// ...designItemDetail,
|
||||
// priority:priority,
|
||||
// timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
// }
|
||||
await this.computeZindex().then((rv)=>{
|
||||
this.setOkData = rv
|
||||
})
|
||||
let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
|
||||
data.designSingleItemDTOList[index].trims.prints = this.setOkData
|
||||
data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
this.loadingShow = true
|
||||
Https.axiosPost(Https.httpUrls.designSingle, data).then(
|
||||
(rv) => {
|
||||
// designItemDetail.clothes[index].printObject.path = rv.clothes[0].printObject.path
|
||||
this.currentFullBodyView = rv.currentFullBodyView
|
||||
this.designItemDetailTS.rv = rv
|
||||
this.designItemDetailTS.data = data
|
||||
this.loadingShow = false
|
||||
// this.designElements = false
|
||||
if(this.driver__.driver){
|
||||
nextTick().then(()=>{
|
||||
driverObj__.moveNext();
|
||||
})
|
||||
}
|
||||
}
|
||||
).catch(res=>{
|
||||
this.loadingShow = false
|
||||
});
|
||||
},
|
||||
setOK(){
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
let index
|
||||
designItemDetail.clothes.forEach((v,ind)=>{
|
||||
if(v.id == this.current.id){
|
||||
index = ind
|
||||
}
|
||||
})
|
||||
if(this.designItemDetailTS.rv){
|
||||
designItemDetail.currentFullBodyView = this.designItemDetailTS.rv.currentFullBodyView
|
||||
designItemDetail.clothes[index].layersObject = this.designItemDetailTS.rv.clothes[index].layersObject
|
||||
designItemDetail.clothes[index].printObject = this.designItemDetailTS.rv.clothes[index].printObject
|
||||
designItemDetail.clothes[index].trims.prints = this.setOkData
|
||||
designItemDetail.ifSubmit = true
|
||||
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.store.commit("setDesignPreviewData", this.designItemDetailTS.data);
|
||||
this.setRevocation(designItemDetail,this.designItemDetailTS.data)
|
||||
this.designItemDetailTS = {}
|
||||
}
|
||||
this.$parent.elementsList = JSON.parse(JSON.stringify(this.designElementsList))
|
||||
|
||||
this.designElements = false
|
||||
if(this.driver__.driver){
|
||||
driverObj__.moveNext();
|
||||
}
|
||||
},
|
||||
clearModal(){
|
||||
this.designElements = true//modal页面关闭
|
||||
this.printZIndex = 2//点击图片z-index
|
||||
this.imgDomIndex = 0//点击图片下标
|
||||
this.designSelectElementsList = []
|
||||
this.printStyleList = []
|
||||
this.designElementsList = []
|
||||
this.exhibitionElementsList = []
|
||||
},
|
||||
closeModal(){
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
let _this = this
|
||||
Modal.confirm({
|
||||
title: this.t('DesignPrintOperation.jsContent1'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
centered:true,
|
||||
onOk() {
|
||||
_this.designElements=false
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.designElements_modal {
|
||||
// max-width: 1440px;
|
||||
.mark_loading{
|
||||
position: absolute;
|
||||
}
|
||||
.ant-modal-body{
|
||||
padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
|
||||
// height: calc(65vh - 6.4rem*1.2));
|
||||
height: calc(65rem*1.2);
|
||||
display: flex;
|
||||
overflow-y: hidden;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ant-modal-content{
|
||||
border-radius: calc(1rem*1.2);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.designElements_content {
|
||||
// background: #f2f3fb;
|
||||
// padding-bottom: 2.9rem*1.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.designElements_header {
|
||||
position: relative;
|
||||
height: calc(6.6rem*1.2);
|
||||
width: 100%;
|
||||
background: #F7F7F7;
|
||||
|
||||
.placement_modal_title{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
line-height: calc(6.6rem*1.2);
|
||||
left: calc(3.7rem*1.2);
|
||||
top: 0;
|
||||
font-size: calc(1.8rem*1.2);
|
||||
color: #030303;
|
||||
}
|
||||
}
|
||||
|
||||
.designElements_right{
|
||||
height: calc(50rem*1.2);
|
||||
position: absolute;
|
||||
right: calc(2rem*1.2);
|
||||
left: auto;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
max-height: calc(50rem*1.2);
|
||||
max-width: calc(30rem*1.2);
|
||||
.designElements_entirety_img{
|
||||
height: 100%;
|
||||
img{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.designElements_open{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
.print_right{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border: 2px solid;
|
||||
padding: calc(2rem*1.2) 0;
|
||||
width: calc(16rem*1.2);
|
||||
border-radius: calc(1rem*1.2);
|
||||
height: calc(40rem*1.2);
|
||||
.button_second{
|
||||
margin: calc(1rem*1.2) 0;
|
||||
width: calc(10rem*1.2);
|
||||
text-align: center;
|
||||
position: initial;
|
||||
transform: none;
|
||||
height: calc(3rem*1.2);
|
||||
line-height: calc(3rem*1.2);
|
||||
}
|
||||
.designElements_nav{
|
||||
display: flex;
|
||||
margin-top: calc(2rem*1.2);
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
height: calc(22rem*1.2);
|
||||
overflow-x: hidden;
|
||||
justify-content: space-evenly;
|
||||
align-content: flex-start;
|
||||
&.designElements_nav::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.active{
|
||||
img{
|
||||
border: 2px solid;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.designElements_single{
|
||||
width: 40%;
|
||||
margin-bottom: calc(2rem*1.2);
|
||||
}
|
||||
img{
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&.show_print_right{
|
||||
border: none;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.designElements_centent{
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
user-select:none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
display: flex;
|
||||
&.active{
|
||||
flex-direction: row;
|
||||
}
|
||||
.designElements_imgMask{
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: relative;
|
||||
>img{
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
// max-width: 100%;
|
||||
// max-height: 100%;
|
||||
// width: 100%;
|
||||
// height: 50rem*1.2);
|
||||
max-height: calc(50rem*1.2);
|
||||
min-height: calc(30rem*1.2);
|
||||
width: auto;
|
||||
max-width: calc(60rem*1.2);
|
||||
}
|
||||
.designElements_sketch_mask{
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
}
|
||||
>div{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.designElements_print{
|
||||
z-index: 3;
|
||||
.modal_imgItem{
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
user-select:none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.designElements_btn{
|
||||
z-index: 3;
|
||||
>div{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 2px solid rgb(20, 188, 255);
|
||||
position: absolute;
|
||||
}
|
||||
ul{
|
||||
list-style: none;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid rgb(20, 188, 255);
|
||||
padding: 0;
|
||||
-webkit-user-drag: none;
|
||||
user-select:none;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
|
||||
&.designElements_Mouoverall{
|
||||
opacity: 1;
|
||||
border: none;
|
||||
width: calc(1.4rem*1.2);
|
||||
height: calc(1.4rem*1.2);
|
||||
i{
|
||||
display: flex;
|
||||
color: #14bcff;
|
||||
}
|
||||
|
||||
}
|
||||
li{
|
||||
cursor: pointer;
|
||||
// border-radius: 50%;
|
||||
width: calc(1rem*1.2);
|
||||
height: calc(1rem*1.2);
|
||||
background-color: rgb(20, 188, 255);
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
&.active{
|
||||
opacity: 1;
|
||||
li{
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
.designElements_btn_top,.designElements_btn_bottom{
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%) ;
|
||||
cursor: n-resize;
|
||||
}
|
||||
.designElements_btn_top{
|
||||
top: 0;
|
||||
}
|
||||
.designElements_btn_bottom{
|
||||
top: 100%;
|
||||
}
|
||||
.designElements_btn_left,.designElements_btn_right{
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%) ;
|
||||
cursor: e-resize;
|
||||
}
|
||||
.designElements_btn_left{
|
||||
left: 0;
|
||||
}
|
||||
.designElements_btn_right{
|
||||
left: 100%;
|
||||
}
|
||||
.designElements_rotote{
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.designElements_delete{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 4rem;
|
||||
background: none;
|
||||
transform: translate(100%, -100%);
|
||||
height: 4rem;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.designElements_rotote::after{
|
||||
position: absolute;
|
||||
content: "";
|
||||
background-color: #14bcff;
|
||||
width: calc(.2rem*1.2);
|
||||
height: calc(3rem*1.2);
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.designElements_rotote::before{
|
||||
position: absolute;
|
||||
content: "";
|
||||
background-color: #14bcff;
|
||||
top: calc(50% - 3rem*1.2);
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%) ;
|
||||
width: calc(1.5rem*1.2);
|
||||
height: calc(1.5rem*1.2);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.subitOkPreviewBtn{
|
||||
z-index: 2;
|
||||
margin: calc(1rem*1.2) 0;
|
||||
width: calc(10rem*1.2);
|
||||
text-align: center;
|
||||
position: initial;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
924
src/component/Detail/DesignElementsMobile.vue
Normal file
924
src/component/Detail/DesignElementsMobile.vue
Normal file
@@ -0,0 +1,924 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal
|
||||
class="designElementsMobile_modal"
|
||||
v-model:visible="designElements"
|
||||
:footer="null"
|
||||
width="78%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:keyboard="false"
|
||||
:mask="true"
|
||||
>
|
||||
<div class="designElementsMobile_content">
|
||||
<div class="design_title_text">
|
||||
<div>{{ $t('DesignPrintOperation.Placement') }}</div>
|
||||
</div>
|
||||
<div class="design_closeIcon" @click.stop="closeModal()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
</div>
|
||||
<div class="designElementsMobile_open">
|
||||
<!-- -->
|
||||
<div class="print_right">
|
||||
<div class="print_right show_print_right ">
|
||||
<div @click="random" class="button_second">{{ $t('DesignPrintOperation.Random') }}</div>
|
||||
<div class="designElementsMobile_nav">
|
||||
<div class="designElementsMobile_single" v-for="item,index in designElementsList" :key="item">
|
||||
<img :src="item.path" @click="setpitch(item,index)">
|
||||
</div>
|
||||
<div class="designElementsMobile_single" v-for="item,index in designSelectElementsList" :key="item">
|
||||
<img :src="item.path" @click="setpitch(item,index)">
|
||||
</div>
|
||||
</div>
|
||||
<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
|
||||
<div class="subitOkPreviewBtn _1" @click.stop="setOK">OK</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="designElementsMobile_centent" id="designElementsCentent">
|
||||
<div class="designElementsMobile_imgMask">
|
||||
<div class="designElementsMobile_print">
|
||||
<div
|
||||
v-for="item,index in exhibitionElementsList"
|
||||
:key="item"
|
||||
:style="[printStyleList?.[index]?.style]"
|
||||
@touchstart.stop="itemMoveMousedown(index,$event)"
|
||||
class="modal_imgItem"
|
||||
ref="content" >
|
||||
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designElementsMobile_imgItme" draggable="false">
|
||||
</div>
|
||||
</div>
|
||||
<img :src="current?.path" alt="" class="designElementsMobile_sketch">
|
||||
<div class="designElementsMobile_btn">
|
||||
<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElementsMobile_Mousingle" :style="item.style" @touchstart.stop="itemMoveMousedown(index,$event)">
|
||||
<li class="designElementsMobile_btn_top" @touchstart.stop="itemSizeMousedown('top',$event)"></li>
|
||||
<li class="designElementsMobile_btn_bottom" @touchstart.stop="itemSizeMousedown('bottom',$event)"></li>
|
||||
<li class="designElementsMobile_btn_left" @touchstart.stop="itemSizeMousedown('left',$event)"></li>
|
||||
<li class="designElementsMobile_btn_right" @touchstart.stop="itemSizeMousedown('right',$event)"></li>
|
||||
<li class="designElementsMobile_rotote" v-rotote.stop="[index,item.transform]"></li>
|
||||
<li class="designElementsMobile_delete" @click="deletePrint">
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
|
||||
</li>
|
||||
</ul>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="designElementsMobile_right">
|
||||
<div class="designElementsMobile_entirety_img">
|
||||
<img :src="currentFullBodyView" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script >
|
||||
import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "vue";
|
||||
// import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||
import { useStore } from "vuex";
|
||||
import { openGuide,driverObj__ } from "@/tool/guide";
|
||||
import { Https } from "@/tool/https";
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { useI18n } from "vue-i18n";
|
||||
export default defineComponent({
|
||||
|
||||
setup(prop) {
|
||||
let designElements = ref(false);
|
||||
let designSelectElementsList = ref([])//新增的元素
|
||||
let designElementsList = ref([])//已经存在的元素
|
||||
let exhibitionElementsList = ref([])//展示的元素
|
||||
let setOkData = ref([])
|
||||
let current = inject('current')//父组件传过来的数据
|
||||
let driver__ = inject('driver__')
|
||||
let setRevocation = inject('setRevocation')//父组件传过来的数据
|
||||
let printZIndex = ref(2)//印花优先级
|
||||
let printStyleList = ref([]);
|
||||
let currentPrintStyleList = {
|
||||
centers:{
|
||||
left:0,
|
||||
top:0,
|
||||
},
|
||||
style:{
|
||||
left:0+"px",
|
||||
top:0+"px",
|
||||
right:"auto",
|
||||
bottom:"auto",
|
||||
width:'auto',
|
||||
height:'auto',
|
||||
zIndex:1,
|
||||
},
|
||||
transform:{
|
||||
scale:1,
|
||||
rotateZ:0,
|
||||
},
|
||||
designElementsBtn:false
|
||||
}
|
||||
let direction = ref('')
|
||||
let imgDom = ref()
|
||||
let imgDomIndex = ref(0)
|
||||
let print = ref({
|
||||
width:'',
|
||||
height:''
|
||||
})
|
||||
let sketch = ref({
|
||||
width:'',
|
||||
height:''
|
||||
})
|
||||
let loadingShow = ref(false)
|
||||
let currentFullBodyView = ref('')
|
||||
let designItemDetailTS = ref({})
|
||||
let body = ref(false)
|
||||
let {t} = useI18n()
|
||||
return {
|
||||
designElements,
|
||||
designSelectElementsList,
|
||||
designElementsList,
|
||||
exhibitionElementsList,
|
||||
setOkData,
|
||||
current,
|
||||
driver__,
|
||||
printZIndex,
|
||||
printStyleList,
|
||||
currentPrintStyleList,
|
||||
direction,//判断点击的是li那个边
|
||||
imgDom,
|
||||
imgDomIndex,
|
||||
print,
|
||||
sketch,
|
||||
loadingShow,
|
||||
setRevocation,
|
||||
t,
|
||||
currentFullBodyView,
|
||||
designItemDetailTS,
|
||||
body,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
store: useStore(),
|
||||
};
|
||||
},
|
||||
|
||||
directives:{
|
||||
//操作旋转
|
||||
rotote:{
|
||||
mounted(el,value){
|
||||
|
||||
el.addEventListener('touchstart', (e) => {
|
||||
let elParent = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
|
||||
let mouse = true;
|
||||
let angle = 0
|
||||
let num = 1
|
||||
let x = 0
|
||||
let y = 0
|
||||
num = value.instance.printStyleList[value.instance.imgDomIndex].transform.scale
|
||||
angle = value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ
|
||||
// 添加鼠标按下事件监听器
|
||||
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
|
||||
// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
|
||||
// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
||||
e.stopPropagation()
|
||||
mouse = true;
|
||||
var info = el.getBoundingClientRect();
|
||||
let eX = info.x + info.width / 2;
|
||||
let eY = info.y + info.height / 2;
|
||||
let touchmove = (e) => {
|
||||
if (mouse) {
|
||||
let X = eX
|
||||
let Y = eY
|
||||
let x = e.targetTouches[0].clientX - X
|
||||
let y = Y - e.targetTouches[0].clientY
|
||||
angle = Math.atan2(x,y)*(180 / Math.PI)
|
||||
elParent.firstElementChild.style.transform = "rotateZ("+ angle + "deg)"
|
||||
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
|
||||
}
|
||||
}
|
||||
document.addEventListener('touchmove', touchmove,{passive:true});
|
||||
// 添加鼠标松开事件监听器
|
||||
let touchend = () => {
|
||||
value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle
|
||||
mouse = false;
|
||||
document.removeEventListener('touchend',touchend)
|
||||
document.removeEventListener('touchmove',touchmove)
|
||||
}
|
||||
document.addEventListener('touchend', touchend);
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
this.currentFullBodyView = designItemDetail.currentFullBodyView? designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
|
||||
if(designItemDetail.others.length == 0){
|
||||
this.body = true
|
||||
}
|
||||
this.designElements = true
|
||||
this.clearModal()
|
||||
if(this.current.trims.prints)this.exhibitionElementsList = JSON.parse(JSON.stringify(this.current.trims.prints))
|
||||
if(this.$parent.exhibitionList.elements)this.designSelectElementsList = JSON.parse(JSON.stringify(this.$parent.exhibitionList.elements))
|
||||
if(this.$parent.elementsList)this.designElementsList = JSON.parse(JSON.stringify(this.$parent.elementsList))
|
||||
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'
|
||||
skecth.remove()
|
||||
}
|
||||
if(this.exhibitionElementsList.length > 0){
|
||||
this.exhibitionElementsList.forEach((item,index)=>{
|
||||
this.setTemplate(item,index)
|
||||
})
|
||||
}else{
|
||||
}
|
||||
},
|
||||
random(){
|
||||
if(this.printStyleList.length == 0)return
|
||||
this.printStyleList.forEach((v,index)=>{
|
||||
this.refetchTemplate(index)
|
||||
})
|
||||
},
|
||||
setPrintWH(url){
|
||||
let print = new Image
|
||||
return new Promise((resolve, reject) => {
|
||||
print.onload=()=>{
|
||||
this.print.width = print.width+'px'
|
||||
this.print.height = print.height+'px'
|
||||
resolve()
|
||||
print.remove()
|
||||
}
|
||||
print.src = url
|
||||
})
|
||||
},
|
||||
async setpitch(item,index){
|
||||
await this.setPrintWH(item.path)
|
||||
this.printStyleList.forEach((v)=>{
|
||||
v.designElementsBtn = false
|
||||
})
|
||||
this.currentPrintStyleList.url = item.url
|
||||
this.printStyleList.push(JSON.parse(JSON.stringify(this.currentPrintStyleList)))
|
||||
let currentIndex = this.printStyleList.length-1
|
||||
this.exhibitionElementsList.push({
|
||||
angle:0,
|
||||
designType:item.designType,
|
||||
minIOPath:item.minIOPath,
|
||||
path:item.path,
|
||||
priority:1,
|
||||
scale:1,
|
||||
location:[0,0]
|
||||
})
|
||||
this.refetchTemplate(currentIndex)
|
||||
},
|
||||
//设置移动
|
||||
itemMoveMousedown(index,event){
|
||||
this.imgDomIndex = index
|
||||
this.printStyleList.forEach((v)=>{
|
||||
v.designElementsBtn = false
|
||||
})
|
||||
this.imgDom = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
|
||||
let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
|
||||
let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
||||
this.printStyleList[index].designElementsBtn = true
|
||||
this.printStyleList[index].style.zIndex = this.printZIndex++
|
||||
this.printStyleList[index].transform = {
|
||||
scale:scale,
|
||||
rotateZ:rotateZ?rotateZ:0,
|
||||
}
|
||||
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.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-left
|
||||
this.printStyleList[index].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-top
|
||||
document.addEventListener("touchend", this.touchend);
|
||||
document.addEventListener("touchmove", this.moveMousemove);
|
||||
},
|
||||
//设置尺寸
|
||||
itemSizeMousedown(direction,event){
|
||||
this.direction = direction
|
||||
this.imgDom = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
|
||||
let scale = Number(this.imgDom.style.transform?.split('scale(')[1]?.split(')')[0])
|
||||
let rotateZ = Number(this.imgDom.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
||||
this.printStyleList[this.imgDomIndex].designElementsBtn = true
|
||||
this.printStyleList[this.imgDomIndex].transform = {
|
||||
scale:scale,
|
||||
rotateZ:rotateZ,
|
||||
}
|
||||
let imgDomWH = this.imgDom.getBoundingClientRect()
|
||||
let li = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("designElementsMobile_btn_top")[0].offsetWidth/2
|
||||
if(this.direction == 'right' || this.direction == 'bottom'){
|
||||
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-li
|
||||
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-li
|
||||
}else{
|
||||
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left+imgDomWH.width-li
|
||||
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top+imgDomWH.height-li
|
||||
this.printStyleList[this.imgDomIndex].centers.right = this.imgDom.parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft
|
||||
this.printStyleList[this.imgDomIndex].centers.bottom = this.imgDom.parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop
|
||||
}
|
||||
document.addEventListener("touchend", this.sizeMouseup);
|
||||
document.addEventListener("touchmove", this.sizeMousemove);
|
||||
},
|
||||
//鼠标移动
|
||||
moveMousemove(e) {
|
||||
let imgDomWH = this.imgDom.getBoundingClientRect()
|
||||
let parentNode = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("designElementsMobile_imgMask")[0]
|
||||
parentNode = parentNode.getBoundingClientRect()
|
||||
let x = ( e.changedTouches[0].pageX - this.printStyleList[this.imgDomIndex].centers.left)+'px'
|
||||
let y = ( e.changedTouches[0].pageY - this.printStyleList[this.imgDomIndex].centers.top)+'px'
|
||||
this.printStyleList[this.imgDomIndex].style.left = x
|
||||
this.printStyleList[this.imgDomIndex].style.top = y
|
||||
|
||||
|
||||
},
|
||||
|
||||
sizeMousemove(e) {
|
||||
let imgDomWH = this.imgDom.getBoundingClientRect()
|
||||
let parentNode =this.imgDom.parentNode
|
||||
let width = imgDomWH.width
|
||||
let height = imgDomWH.height
|
||||
let num = width/height
|
||||
let num1 = height/width
|
||||
let w,h
|
||||
//判断移动四个边
|
||||
if(this.direction == 'right'){
|
||||
w = ( e.changedTouches[0].pageX -imgDomWH.left)
|
||||
h = ( e.changedTouches[0].pageX - imgDomWH.left)*num
|
||||
width = w+'px'
|
||||
height = w*num1+'px'
|
||||
}else if(this.direction == 'top'){
|
||||
this.printStyleList[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'
|
||||
this.printStyleList[this.imgDomIndex].style.bottom = this.printStyleList[this.imgDomIndex].centers.bottom+'px'
|
||||
w = ( e.changedTouches[0].pageX - this.printStyleList[this.imgDomIndex].centers.left)*num
|
||||
h = (this.printStyleList[this.imgDomIndex].centers.top - e.changedTouches[0].pageY)
|
||||
|
||||
height = h+'px'
|
||||
width = h*num+'px'
|
||||
}else if(this.direction == 'bottom'){
|
||||
h = ( e.changedTouches[0].pageY - imgDomWH.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 = this.printStyleList[this.imgDomIndex].centers.right+'px'
|
||||
w = (this.printStyleList[this.imgDomIndex].centers.left - e.changedTouches[0].pageX)
|
||||
width = w+'px'
|
||||
height = w*num1+'px'
|
||||
}
|
||||
//判断尺寸是否到边
|
||||
this.printStyleList[this.imgDomIndex].style.width = width
|
||||
this.printStyleList[this.imgDomIndex].style.height = height
|
||||
},
|
||||
//鼠标抬起
|
||||
sizeMouseup(e){
|
||||
this.printStyleList[this.imgDomIndex].style={
|
||||
right:'auto',
|
||||
left:this.imgDom.offsetLeft+'px',
|
||||
bottom:'auto',
|
||||
top:this.imgDom.offsetTop+'px',
|
||||
height:this.imgDom.offsetHeight+'px',
|
||||
width:this.imgDom.offsetWidth+'px',
|
||||
zIndex:this.printZIndex
|
||||
}
|
||||
document.removeEventListener("touchend", this.sizeMouseup);
|
||||
document.removeEventListener("touchmove", this.sizeMousemove);
|
||||
},
|
||||
touchend(e) {
|
||||
|
||||
document.removeEventListener("touchend", this.touchend);
|
||||
document.removeEventListener("touchmove", this.moveMousemove);
|
||||
},
|
||||
|
||||
|
||||
|
||||
deletePrint(){
|
||||
this.exhibitionElementsList.splice(this.imgDomIndex,1)
|
||||
this.printStyleList.splice(this.imgDomIndex,1)
|
||||
},
|
||||
|
||||
//随机重置图片顺序
|
||||
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("designElementsMobile_modal")[0]?.getElementsByClassName('designElementsMobile_sketch')[0]
|
||||
let width
|
||||
let scale
|
||||
if(sketch.width<sketch.height){
|
||||
width = Math.trunc(Math.random()*(sketch?.width-sketch?.width/2))+sketch?.width/4
|
||||
scale = width / this.print.width.replace(/px/g,'')
|
||||
}else{
|
||||
width = Math.trunc(Math.random()*(sketch?.height-sketch?.height/2))+sketch?.height/4
|
||||
scale = width / this.print.height.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 - this.print.width.replace(/px/g,'')*scale
|
||||
let y = sketch?.height-this.print.height.replace(/px/g,'')*scale
|
||||
this.printStyleList[index].style = {
|
||||
left:Math.trunc(Math.random()*x)+1+"px",
|
||||
top:Math.trunc(Math.random()*y)+1+"px",
|
||||
right:"auto",
|
||||
bottom:"auto",
|
||||
width:this.print.width.replace(/px/g,'')*scale+'px',
|
||||
height:this.print.height.replace(/px/g,'')*scale+'px',
|
||||
zIndex:this.printZIndex++
|
||||
}
|
||||
this.printStyleList[index].transform = {
|
||||
rotateZ:this.printStyleList[index].transform.rotateZ?this.printStyleList[index].transform.rotateZ:0
|
||||
}
|
||||
},
|
||||
//设置图片
|
||||
async setTemplate(item,index) {
|
||||
await this.setPrintWH(item.path)
|
||||
this.designElementsList
|
||||
let sketch = document.getElementsByClassName("designElementsMobile_modal")[0]?.getElementsByClassName('designElementsMobile_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
|
||||
let left = item.location[0]/sketchNum+'px'
|
||||
let top = item.location[1]/sketchNum+'px'
|
||||
if(sketch.offsetWidth < item.location[0]/sketchNum){
|
||||
left = sketch.offsetWidth +'px'
|
||||
}
|
||||
if(sketch.offsetHeight < item.location[1]/sketchNum){
|
||||
top = sketch.offsetHeight +'px'
|
||||
}
|
||||
this.printStyleList[index]={
|
||||
centers:{
|
||||
left:0,
|
||||
top:0,
|
||||
},
|
||||
style:{
|
||||
left:left,
|
||||
top:top,
|
||||
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,
|
||||
},
|
||||
designElementsBtn:false
|
||||
}
|
||||
},
|
||||
computeZindex(){
|
||||
let arr = JSON.parse(JSON.stringify(this.printStyleList))
|
||||
arr.sort((a, b) => {
|
||||
var a_num = a["style"].zIndex;
|
||||
var b_num = b["style"].zIndex;
|
||||
return a_num - b_num;
|
||||
});
|
||||
let num = 1
|
||||
arr.forEach((v)=>{
|
||||
v.style.zIndex = num++
|
||||
})
|
||||
return this.computeSize(arr)//计算单件衣服初始大小到目前大小的缩放比
|
||||
},
|
||||
async computeSize(arr){
|
||||
// let num = this.sketch/
|
||||
return new Promise(async (resolve, reject) => {
|
||||
let sketch = document.getElementsByClassName("designElementsMobile_sketch")[0]
|
||||
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
|
||||
let prints = []
|
||||
let scale
|
||||
let location
|
||||
for (let index = 0; index < arr.length; index++) {
|
||||
await this.setPrintWH(this.exhibitionElementsList[index].path)
|
||||
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,
|
||||
location : location,
|
||||
priority:arr[index].style.zIndex,
|
||||
scale: scale,
|
||||
designType:this.exhibitionElementsList[index].designType,
|
||||
path:this.exhibitionElementsList[index].path,
|
||||
minIOPath:this.exhibitionElementsList[index].minIOPath,
|
||||
}
|
||||
prints.push(obj)
|
||||
}
|
||||
resolve(prints)
|
||||
})
|
||||
},
|
||||
async setPreview(){
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
let index
|
||||
designItemDetail.clothes.forEach((v,ind)=>{
|
||||
if(v.id == this.current.id){
|
||||
index = ind
|
||||
}
|
||||
})
|
||||
let priority = designItemDetail.clothes.map((v)=>{
|
||||
return v.type
|
||||
})
|
||||
// let data = {
|
||||
// ...designItemDetail,
|
||||
// priority:priority,
|
||||
// timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
// }
|
||||
let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
|
||||
await this.computeZindex().then((rv)=>{
|
||||
this.setOkData = rv
|
||||
})
|
||||
data.designSingleItemDTOList[index].trims.prints = this.setOkData
|
||||
data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
this.loadingShow = true
|
||||
Https.axiosPost(Https.httpUrls.designSingle, data).then(
|
||||
(rv) => {
|
||||
// designItemDetail.clothes[index].printObject.path = rv.clothes[0].printObject.path
|
||||
this.currentFullBodyView = rv.currentFullBodyView
|
||||
this.designItemDetailTS.rv = rv
|
||||
this.designItemDetailTS.data = data
|
||||
this.loadingShow = false
|
||||
// this.designElements = false
|
||||
if(this.driver__.driver){
|
||||
nextTick().then(()=>{
|
||||
driverObj__.moveNext();
|
||||
})
|
||||
}
|
||||
}
|
||||
).catch(res=>{
|
||||
this.loadingShow = false
|
||||
});
|
||||
},
|
||||
setOK(){
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
let index
|
||||
designItemDetail.clothes.forEach((v,ind)=>{
|
||||
if(v.id == this.current.id){
|
||||
index = ind
|
||||
}
|
||||
})
|
||||
if(this.designItemDetailTS.rv){
|
||||
designItemDetail.currentFullBodyView = this.designItemDetailTS.rv.currentFullBodyView
|
||||
designItemDetail.clothes[index].layersObject = this.designItemDetailTS.rv.clothes[index].layersObject
|
||||
designItemDetail.clothes[index].printObject = this.designItemDetailTS.rv.clothes[index].printObject
|
||||
designItemDetail.clothes[index].trims.prints = this.setOkData
|
||||
designItemDetail.ifSubmit = true
|
||||
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.store.commit("setDesignPreviewData", this.designItemDetailTS.data);
|
||||
this.setRevocation(designItemDetail,this.designItemDetailTS.data)
|
||||
this.designItemDetailTS = {}
|
||||
}
|
||||
this.designElements = false
|
||||
if(this.driver__.driver){
|
||||
driverObj__.moveNext();
|
||||
}
|
||||
},
|
||||
clearModal(){
|
||||
this.designElements = true//modal页面关闭
|
||||
this.printZIndex = 2//点击图片z-index
|
||||
this.imgDomIndex = 0//点击图片下标
|
||||
this.designSelectElementsList = []
|
||||
this.printStyleList = []
|
||||
this.designElementsList = []
|
||||
this.exhibitionElementsList = []
|
||||
},
|
||||
closeModal(){
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
let _this = this
|
||||
Modal.confirm({
|
||||
title: this.t('DesignPrintOperation.jsContent1'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
centered:true,
|
||||
onOk() {
|
||||
_this.designElements=false
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.designElementsMobile_modal {
|
||||
// max-width: 1440px;
|
||||
.mark_loading{
|
||||
position: absolute;
|
||||
}
|
||||
.ant-modal-body{
|
||||
padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
|
||||
// height: calc(65vh - 6.4rem*1.2));
|
||||
height: calc(65rem*1.2);
|
||||
display: flex;
|
||||
overflow-y: hidden;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ant-modal-content{
|
||||
border-radius: calc(1rem*1.2);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.designElementsMobile_content {
|
||||
// background: #f2f3fb;
|
||||
// padding-bottom: 2.9rem*1.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.designElementsMobile_header {
|
||||
position: relative;
|
||||
height: calc(6.6rem*1.2);
|
||||
width: 100%;
|
||||
background: #F7F7F7;
|
||||
|
||||
.placement_modal_title{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
line-height: calc(6.6rem*1.2);
|
||||
left: calc(3.7rem*1.2);
|
||||
top: 0;
|
||||
font-size: calc(1.8rem*1.2);
|
||||
color: #030303;
|
||||
}
|
||||
}
|
||||
|
||||
.designElementsMobile_right{
|
||||
height: calc(50rem*1.2);
|
||||
position: absolute;
|
||||
right: calc(2rem*1.2);
|
||||
left: auto;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
max-height: calc(50rem*1.2);
|
||||
max-width: calc(30rem*1.2);
|
||||
.designElementsMobile_entirety_img{
|
||||
height: 100%;
|
||||
img{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.designElementsMobile_open{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
.print_right{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border: 2px solid;
|
||||
padding: calc(2rem*1.2) 0;
|
||||
width: calc(16rem*1.2);
|
||||
border-radius: calc(1rem*1.2);
|
||||
height: calc(40rem*1.2);
|
||||
.button_second{
|
||||
margin: calc(1rem*1.2) 0;
|
||||
width: calc(10rem*1.2);
|
||||
text-align: center;
|
||||
position: initial;
|
||||
transform: none;
|
||||
height: calc(3rem*1.2);
|
||||
line-height: calc(3rem*1.2);
|
||||
}
|
||||
.designElementsMobile_nav{
|
||||
display: flex;
|
||||
margin-top: calc(2rem*1.2);
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
height: calc(22rem*1.2);
|
||||
overflow-x: hidden;
|
||||
justify-content: space-evenly;
|
||||
align-content: flex-start;
|
||||
&.designElementsMobile_nav::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.active{
|
||||
img{
|
||||
border: 2px solid;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.designElementsMobile_single{
|
||||
width: 40%;
|
||||
margin-bottom: calc(2rem*1.2);
|
||||
}
|
||||
img{
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&.show_print_right{
|
||||
border: none;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.designElementsMobile_centent{
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
user-select:none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
display: flex;
|
||||
&.active{
|
||||
flex-direction: row;
|
||||
}
|
||||
.designElementsMobile_imgMask{
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: relative;
|
||||
>img{
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
// max-width: 100%;
|
||||
// max-height: 100%;
|
||||
// width: 100%;
|
||||
// height: 50rem*1.2);
|
||||
max-height: calc(50rem*1.2);
|
||||
min-height: calc(30rem*1.2);
|
||||
width: auto;
|
||||
max-width: calc(60rem*1.2);
|
||||
}
|
||||
.designElementsMobile_sketch_mask{
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
}
|
||||
>div{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.designElementsMobile_print{
|
||||
z-index: 3;
|
||||
.modal_imgItem{
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
user-select:none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.designElementsMobile_btn{
|
||||
z-index: 3;
|
||||
>div{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 2px solid rgb(20, 188, 255);
|
||||
position: absolute;
|
||||
}
|
||||
ul{
|
||||
list-style: none;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid rgb(20, 188, 255);
|
||||
padding: 0;
|
||||
-webkit-user-drag: none;
|
||||
user-select:none;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
|
||||
&.designElementsMobile_Mouoverall{
|
||||
opacity: 1;
|
||||
border: none;
|
||||
width: calc(1.4rem*1.2);
|
||||
height: calc(1.4rem*1.2);
|
||||
i{
|
||||
display: flex;
|
||||
color: #14bcff;
|
||||
}
|
||||
|
||||
}
|
||||
li{
|
||||
cursor: pointer;
|
||||
// border-radius: 50%;
|
||||
width: calc(1rem*1.2);
|
||||
height: calc(1rem*1.2);
|
||||
background-color: rgb(20, 188, 255);
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
&.active{
|
||||
opacity: 1;
|
||||
li{
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
.designElementsMobile_btn_top,.designElementsMobile_btn_bottom{
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%) ;
|
||||
cursor: n-resize;
|
||||
}
|
||||
.designElementsMobile_btn_top{
|
||||
top: 0;
|
||||
}
|
||||
.designElementsMobile_btn_bottom{
|
||||
top: 100%;
|
||||
}
|
||||
.designElementsMobile_btn_left,.designElementsMobile_btn_right{
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%) ;
|
||||
cursor: e-resize;
|
||||
}
|
||||
.designElementsMobile_btn_left{
|
||||
left: 0;
|
||||
}
|
||||
.designElementsMobile_btn_right{
|
||||
left: 100%;
|
||||
}
|
||||
.designElementsMobile_rotote{
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.designElementsMobile_delete{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 4rem;
|
||||
background: none;
|
||||
transform: translate(100%, -100%);
|
||||
height: 4rem;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.designElementsMobile_rotote::after{
|
||||
position: absolute;
|
||||
content: "";
|
||||
background-color: #14bcff;
|
||||
width: calc(.2rem*1.2);
|
||||
height: calc(3rem*1.2);
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.designElementsMobile_rotote::before{
|
||||
position: absolute;
|
||||
content: "";
|
||||
background-color: #14bcff;
|
||||
top: calc(50% - 3rem*1.2);
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%) ;
|
||||
width: calc(1.5rem*1.2);
|
||||
height: calc(1.5rem*1.2);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.subitOkPreviewBtn{
|
||||
z-index: 2;
|
||||
margin: calc(1rem*1.2) 0;
|
||||
width: calc(10rem*1.2);
|
||||
text-align: center;
|
||||
position: initial;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -38,10 +38,21 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="print_right show_print_right Guide_1_25" :class="[driver__.driver?'showEvents':'']">
|
||||
<div class="designOpenrtion_nav">
|
||||
<div class="designOpenrtion_single" v-for="item,index in designOpenrtionList" :key="item" v-show="(stateOverallSingle == 'overall' && item.level2Type == 'Pattern') || stateOverallSingle == 'single'">
|
||||
<img :src="item.path" @click="setpitch(item,index)">
|
||||
</div>
|
||||
<div class="designOpenrtion_single" v-for="item,index in designList" :key="item" v-show="(stateOverallSingle == 'overall' && item.level2Type == 'Pattern') || stateOverallSingle == 'single'">
|
||||
<img :src="item.path" @click="setpitch(item,index)">
|
||||
</div>
|
||||
<!-- <div class="designOpenrtion_overall" v-show="!overallSingle">
|
||||
<img :src="designOpenrtionList[0].path">
|
||||
</div> -->
|
||||
</div>
|
||||
<div v-show="!overallSingle" class="habit_System_Designer">
|
||||
<div class="habit_System_Designer_text">{{ $t('DesignPrintOperation.Scale') }}</div>
|
||||
<a-slider id="system_silder"
|
||||
:min="1"
|
||||
:min="20"
|
||||
v-model:value="systemDesignerPercentage"
|
||||
@afterChange="systemDesigner"
|
||||
:tip-formatter="formatter"
|
||||
@@ -49,18 +60,11 @@
|
||||
</a-slider>
|
||||
</div>
|
||||
<div v-show="overallSingle" @click="random" class="button_second">{{ $t('DesignPrintOperation.Random') }}</div>
|
||||
<div v-show="overallSingle" class="print_input">
|
||||
<!-- <div v-show="overallSingle" class="print_input">
|
||||
<input class="search_input" :placeholder="$t('DesignPrintOperation.inputContent')" type="Number" v-model="printAmount" @input="setprintAmount">
|
||||
<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?printStyleList[index]?.designOpenrtionBtn:false}">
|
||||
<img :src="item.path" @click="setpitch(item,index)">
|
||||
</div>
|
||||
<div class="designOpenrtion_overall" v-show="!overallSingle">
|
||||
<img :src="designOpenrtionList[0].path">
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
|
||||
<div class="subitOkPreviewBtn Guide_1_25_1" :class="[driver__.driver?'hideEvents':'']" @click.stop="setOK">OK</div>
|
||||
</div>
|
||||
@@ -69,32 +73,40 @@
|
||||
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
|
||||
<!-- <div class="designOpenrtion_imgMask" :style="sketch"> -->
|
||||
<div class="designOpenrtion_imgMask">
|
||||
<div class="designOpenrtion_print" v-show="overallSingle">
|
||||
<div class="designOpenrtion_print">
|
||||
<div
|
||||
v-for="item,index in designOpenrtionList"
|
||||
v-for="item,index in exhibitionOpenrtionList[stateOverallSingle]"
|
||||
:key="item"
|
||||
:style="[printStyleList?.[index]?.style]"
|
||||
v-if="overallSingle"
|
||||
:style="[printStyleList[stateOverallSingle]?.[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">
|
||||
ref="content"
|
||||
>
|
||||
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[stateOverallSingle][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?.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?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
|
||||
<ul v-if="overallSingle" v-for="item,index in printStyleList[stateOverallSingle]" :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>
|
||||
<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',$event)"></li>
|
||||
<li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li>
|
||||
<li class="designOpenrtion_delete" @click.stop="deletePrint">
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
|
||||
</li>
|
||||
</ul>
|
||||
<div v-show="!overallSingle"></div>
|
||||
<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)">
|
||||
<ul v-if="!overallSingle && printStyleList[stateOverallSingle][0]" :class="{active:printStyleList[stateOverallSingle][0]?.designOpenrtionBtn}" class="designOpenrtion_Mouoverall" :style="'left:'+printStyleList[stateOverallSingle][0]?.style?.left+';top:'+printStyleList[stateOverallSingle][0]?.style?.top+';'" @mousedown.stop="itemMoveMousedown(0,$event)">
|
||||
<i class="fi fi-rr-arrows animtion1"></i>
|
||||
<i class="fi fi-rr-arrows animtion2"></i>
|
||||
<li class="designOpenrtion_delete" @click="deletePrint">
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -121,19 +133,30 @@ import { Https } from "@/tool/https";
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { remove } from "jszip";
|
||||
export default defineComponent({
|
||||
|
||||
setup(prop) {
|
||||
let designOpenrtion = ref(false);
|
||||
let designOpenrtionList = ref([])
|
||||
let designOpenrtionList = ref([])//新增的元素
|
||||
let designList = ref([])//已经存在的元素
|
||||
let setOkData = ref([])
|
||||
let exhibitionOpenrtionList = ref({
|
||||
single:[],
|
||||
overall:[],
|
||||
})//展示的元素
|
||||
let current = inject('current')//父组件传过来的数据
|
||||
let driver__ = inject('driver__')
|
||||
let setRevocation = inject('setRevocation')//父组件传过来的数据
|
||||
let overallSingle = ref(false)
|
||||
let overallSingle = ref(true)
|
||||
let stateOverallSingle = ref('single')
|
||||
let systemDesignerPercentage = ref(0)
|
||||
let printAmount = ref(1)//印花数量
|
||||
let printZIndex = ref(2)//印花优先级
|
||||
let printStyleList = ref([{
|
||||
let printStyleList = ref({
|
||||
single:[],
|
||||
overall:[],
|
||||
});
|
||||
let currentPrintStyleList = ref({
|
||||
centers:{
|
||||
left:0,
|
||||
top:0,
|
||||
@@ -152,7 +175,7 @@ export default defineComponent({
|
||||
rotateZ:0,
|
||||
},
|
||||
designOpenrtionBtn:false
|
||||
}]);
|
||||
});
|
||||
|
||||
let direction = ref('')
|
||||
let imgDom = ref()
|
||||
@@ -173,13 +196,17 @@ export default defineComponent({
|
||||
return {
|
||||
designOpenrtion,
|
||||
designOpenrtionList,
|
||||
designList,
|
||||
setOkData,
|
||||
exhibitionOpenrtionList,
|
||||
overallSingle,
|
||||
stateOverallSingle,
|
||||
systemDesignerPercentage,
|
||||
current,
|
||||
driver__,
|
||||
printAmount,
|
||||
printZIndex,
|
||||
printStyleList,
|
||||
currentPrintStyleList,
|
||||
direction,//判断点击的是li那个边
|
||||
imgDom,
|
||||
imgDomIndex,
|
||||
@@ -211,8 +238,8 @@ export default defineComponent({
|
||||
let num = 1
|
||||
let x = 0
|
||||
let y = 0
|
||||
num = value.instance.printStyleList[value.instance.imgDomIndex].transform.scale
|
||||
angle = value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ
|
||||
num = value.instance.printStyleList[value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.scale
|
||||
angle = value.instance.printStyleList[value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.rotateZ
|
||||
// 添加鼠标按下事件监听器
|
||||
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
|
||||
// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
|
||||
@@ -236,7 +263,7 @@ export default defineComponent({
|
||||
document.addEventListener('mousemove', mousemove);
|
||||
// 添加鼠标松开事件监听器
|
||||
let mouseup = () => {
|
||||
value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle
|
||||
value.instance.printStyleList[value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.rotateZ = angle
|
||||
mouse = false;
|
||||
document.removeEventListener('mouseup',mouseup)
|
||||
document.removeEventListener('mousemove',mousemove)
|
||||
@@ -250,86 +277,110 @@ export default defineComponent({
|
||||
methods: {
|
||||
init(){
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
this.currentFullBodyView = designItemDetail.currentFullBodyView? designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
|
||||
this.currentFullBodyView = designItemDetail.currentFullBodyView?designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
|
||||
if(designItemDetail.others.length == 0){
|
||||
this.body = true
|
||||
}
|
||||
let DesignPrintOperationParent = this.$parent
|
||||
this.designOpenrtion = true
|
||||
this.clearModal()
|
||||
this.designOpenrtionList = []
|
||||
this.designOpenrtionList.push(...this.current.printObject.prints)
|
||||
this.overallSingle = DesignPrintOperationParent.overallSingle
|
||||
this.systemDesignerPercentage = DesignPrintOperationParent.systemDesignerPercentage
|
||||
this.overallSingle = this.current.printObject.ifSingle?true:false
|
||||
this.ifListOver()
|
||||
if(this.current.printObject.prints)this.exhibitionOpenrtionList[this.stateOverallSingle] = JSON.parse(JSON.stringify(this.current.printObject.prints))
|
||||
if(this.$parent.exhibitionList.print)this.designOpenrtionList = JSON.parse(JSON.stringify(this.$parent.exhibitionList.print))
|
||||
if(this.$parent.elementsList)this.designList = JSON.parse(JSON.stringify(this.$parent.printsList))
|
||||
// this.overallSingle = this.current.ifSingle?false:this.current.ifSingle
|
||||
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'
|
||||
skecth.remove()
|
||||
}
|
||||
// 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.prints[0].path
|
||||
print.onload=()=>{
|
||||
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
|
||||
nextTick().then(()=>{
|
||||
if(this.designOpenrtionList[0].scale){
|
||||
this.designOpenrtionList.forEach((item,index)=>{
|
||||
this.setTemplate(item,index)
|
||||
this.printAmount = this.printStyleList.length
|
||||
if (!this.overallSingle) {
|
||||
this.printAmount = 1
|
||||
this.setprintAmount()
|
||||
}
|
||||
if(this.current.printObject.ifSingle != this.overallSingle){
|
||||
this.refetchTemplate(0)
|
||||
}
|
||||
|
||||
})
|
||||
}else{
|
||||
this.refetchTemplate(0)
|
||||
}
|
||||
if(this.exhibitionOpenrtionList[this.stateOverallSingle].length > 0){
|
||||
this.exhibitionOpenrtionList[this.stateOverallSingle].forEach((item,index)=>{
|
||||
this.setTemplate(item,index)
|
||||
})
|
||||
}else{
|
||||
}
|
||||
|
||||
},
|
||||
ifListOver(){
|
||||
if(!this.overallSingle){
|
||||
// this.designOpenrtionList = this.designOpenrtionList.filter((item)=>item.level2Type == "Pattern")
|
||||
// this.designList = this.designList.filter((item)=>item.level2Type == "Pattern")
|
||||
this.stateOverallSingle = 'overall'
|
||||
}else{
|
||||
this.stateOverallSingle = 'single'
|
||||
}
|
||||
},
|
||||
setPrintWH(url){
|
||||
let print = new Image
|
||||
return new Promise((resolve, reject) => {
|
||||
print.onload=()=>{
|
||||
this.print.width = print.width+'px'
|
||||
this.print.height = print.height+'px'
|
||||
resolve()
|
||||
print.remove()
|
||||
}
|
||||
print.src = url
|
||||
})
|
||||
},
|
||||
systemDesigner(num) {
|
||||
let DesignPrintOperationParent = this.$parent
|
||||
DesignPrintOperationParent.systemDesignerPercentage = num
|
||||
|
||||
},
|
||||
formatter(value) {
|
||||
if(value<30)value = 30
|
||||
return `${value*3}%`;
|
||||
},
|
||||
|
||||
setOveralSingle(){
|
||||
let DesignPrintOperationParent = this.$parent
|
||||
DesignPrintOperationParent.overallSingle = this.overallSingle
|
||||
if (!this.overallSingle) {
|
||||
this.printAmount = 1
|
||||
this.setprintAmount()
|
||||
if(!this.overallSingle){
|
||||
// this.refetchTemplate(0)
|
||||
this.stateOverallSingle = 'overall'
|
||||
}else{
|
||||
this.stateOverallSingle = 'single'
|
||||
}
|
||||
this.random()
|
||||
// this.random()
|
||||
},
|
||||
setpitch(item,index){
|
||||
this.printStyleList.forEach((v)=>{
|
||||
async setpitch(item,index){
|
||||
await this.setPrintWH(item.path)
|
||||
this.printStyleList[this.stateOverallSingle].forEach((v)=>{
|
||||
v.designOpenrtionBtn = false
|
||||
})
|
||||
this.imgDomIndex = index
|
||||
this.printStyleList[index].designOpenrtionBtn = true
|
||||
this.printStyleList[index].style.zIndex = this.printZIndex++
|
||||
if(!this.overallSingle){
|
||||
this.printStyleList[this.stateOverallSingle][0] = JSON.parse(JSON.stringify(this.currentPrintStyleList))
|
||||
this.refetchTemplate(0)
|
||||
this.exhibitionOpenrtionList[this.stateOverallSingle][0] = {
|
||||
angle:0,
|
||||
designType:item.designType,
|
||||
level2Type:item.level2Type,
|
||||
minIOPath:item.minIOPath,
|
||||
path:item.path,
|
||||
priority:1,
|
||||
scale:.3,
|
||||
location:[0,0]
|
||||
}
|
||||
this.systemDesignerPercentage = 30
|
||||
}else{
|
||||
this.printStyleList[this.stateOverallSingle].push(JSON.parse(JSON.stringify(this.currentPrintStyleList)))
|
||||
let currentIndex = this.printStyleList[this.stateOverallSingle].length-1
|
||||
this.exhibitionOpenrtionList[this.stateOverallSingle].push({
|
||||
angle:0,
|
||||
designType:item.designType,
|
||||
level2Type:item.level2Type,
|
||||
minIOPath:item.minIOPath,
|
||||
path:item.path,
|
||||
priority:1,
|
||||
scale:1,
|
||||
location:[0,0]
|
||||
})
|
||||
this.refetchTemplate(currentIndex)
|
||||
}
|
||||
},
|
||||
//设置移动
|
||||
itemMoveMousedown(index,event){
|
||||
if (event.target.tagName === 'IMG' || event.target.nodeName === 'IMG')return
|
||||
this.imgDomIndex = index
|
||||
this.printStyleList.forEach((v)=>{
|
||||
this.printStyleList[this.stateOverallSingle].forEach((v)=>{
|
||||
v.designOpenrtionBtn = false
|
||||
})
|
||||
if(!this.overallSingle){
|
||||
@@ -339,17 +390,17 @@ export default defineComponent({
|
||||
}
|
||||
let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
|
||||
let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
||||
this.printStyleList[index].designOpenrtionBtn = true
|
||||
this.printStyleList[index].style.zIndex = this.printZIndex++
|
||||
this.printStyleList[index].transform = {
|
||||
this.printStyleList[this.stateOverallSingle][index].designOpenrtionBtn = true
|
||||
this.printStyleList[this.stateOverallSingle][index].style.zIndex = this.printZIndex++
|
||||
this.printStyleList[this.stateOverallSingle][index].transform = {
|
||||
scale:scale,
|
||||
rotateZ:rotateZ?rotateZ:0,
|
||||
}
|
||||
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.printStyleList[this.stateOverallSingle][index].style.left.replace(/px/g,''))
|
||||
let top = Number(this.printStyleList[this.stateOverallSingle][index].style.top.replace(/px/g,''))
|
||||
this.printStyleList[this.stateOverallSingle][index].centers.left = imgDomWH.x+event.offsetX-left
|
||||
this.printStyleList[this.stateOverallSingle][index].centers.top = imgDomWH.y+event.offsetY-top
|
||||
document.addEventListener("mouseup", this.mouseup);
|
||||
document.addEventListener("mousemove", this.moveMousemove);
|
||||
},
|
||||
@@ -359,19 +410,19 @@ export default defineComponent({
|
||||
this.imgDom = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
|
||||
let scale = Number(this.imgDom.firstChild.style.transform?.split('scale(')[1]?.split(')')[0])
|
||||
let rotateZ = Number(this.imgDom.firstChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
||||
this.printStyleList[this.imgDomIndex].designOpenrtionBtn = true
|
||||
this.printStyleList[this.imgDomIndex].transform = {
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].designOpenrtionBtn = true
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].transform = {
|
||||
scale:scale,
|
||||
rotateZ:rotateZ,
|
||||
}
|
||||
let imgDomWH = this.imgDom.getBoundingClientRect()
|
||||
let li = document.getElementsByClassName('designOpenrtion_modal')[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.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
|
||||
this.printStyleList[this.stateOverallSingle][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.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
|
||||
}
|
||||
|
||||
document.addEventListener("mouseup", this.sizeMouseup);
|
||||
@@ -382,22 +433,22 @@ export default defineComponent({
|
||||
let imgDomWH = this.imgDom.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
|
||||
this.printStyleList[this.imgDomIndex].style.top = y
|
||||
let x = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)+'px'
|
||||
let y = ( e.y - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)+'px'
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = x
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = y
|
||||
if(!this.overallSingle){
|
||||
if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
|
||||
this.printStyleList[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
|
||||
}
|
||||
if(x.replace(/px/g,'') <= 0){
|
||||
this.printStyleList[this.imgDomIndex].style.left = 0+'px'
|
||||
this.printStyleList[this.stateOverallSingle][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'
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
|
||||
}
|
||||
if(y.replace(/px/g,'') <= 0){
|
||||
this.printStyleList[this.imgDomIndex].style.top = 0+'px'
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = 0+'px'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -413,38 +464,38 @@ export default defineComponent({
|
||||
let w,h
|
||||
//判断移动四个边
|
||||
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.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)
|
||||
h = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
|
||||
width = w+'px'
|
||||
height = w*num1+'px'
|
||||
}else if(this.direction == 'top'){
|
||||
this.printStyleList[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.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = 'auto'
|
||||
// this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
|
||||
w = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
|
||||
h = (this.printStyleList[this.stateOverallSingle][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)
|
||||
h = (e.y - this.printStyleList[this.stateOverallSingle][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.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
|
||||
w = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left - e.x)
|
||||
width = w+'px'
|
||||
height = w*num1+'px'
|
||||
}
|
||||
//判断尺寸是否到边
|
||||
this.printStyleList[this.imgDomIndex].style.width = width
|
||||
this.printStyleList[this.imgDomIndex].style.height = height
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.width = width
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.height = height
|
||||
|
||||
},
|
||||
//鼠标抬起
|
||||
sizeMouseup(e){
|
||||
this.printStyleList[this.imgDomIndex].style={
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style={
|
||||
right:'auto',
|
||||
left:this.imgDom.offsetLeft+'px',
|
||||
bottom:'auto',
|
||||
@@ -461,47 +512,12 @@ export default defineComponent({
|
||||
document.removeEventListener("mouseup", this.mouseup);
|
||||
document.removeEventListener("mousemove", this.moveMousemove);
|
||||
},
|
||||
|
||||
|
||||
setprintAmount(){
|
||||
if(this.printAmount < 1){
|
||||
this.printAmount = 1
|
||||
return
|
||||
}
|
||||
if(this.printAmount > 20){
|
||||
this.printAmount = 20
|
||||
return
|
||||
}
|
||||
let printTiemNum
|
||||
if(this.printAmount>this.printStyleList.length){
|
||||
let num = this.printAmount - this.printStyleList.length
|
||||
for (let index = 0; index < num; index++) {
|
||||
this.printStyleList.push(JSON.parse(JSON.stringify(this.printStyleList[this.printStyleList.length-1])))
|
||||
this.printStyleList[this.printStyleList.length-1].transform.rotateZ = 0
|
||||
this.refetchTemplate(this.printStyleList.length-1)
|
||||
this.designOpenrtionList.push(this.current.printObject.prints[this.current.printObject.prints.length-1])
|
||||
}
|
||||
}else{
|
||||
let num = this.printStyleList.length - this.printAmount
|
||||
this.designOpenrtionList.splice(this.printStyleList.length-num,num)
|
||||
this.printStyleList.splice(this.printStyleList.length-num,num)
|
||||
}
|
||||
this.printStyleList.forEach((v)=>{
|
||||
v.designOpenrtionBtn = false
|
||||
})
|
||||
this.printStyleList[this.printStyleList.length-1].designOpenrtionBtn = true
|
||||
this.imgDomIndex = this.printStyleList.length-1
|
||||
},
|
||||
deletePrint(){
|
||||
if(this.designOpenrtionList.length <= 1){
|
||||
return
|
||||
}
|
||||
this.designOpenrtionList.splice(this.imgDomIndex,1)
|
||||
this.printStyleList.splice(this.imgDomIndex,1)
|
||||
this.printAmount = this.designOpenrtionList.length
|
||||
this.exhibitionOpenrtionList[this.stateOverallSingle].splice(this.imgDomIndex,1)
|
||||
this.printStyleList[this.stateOverallSingle].splice(this.imgDomIndex,1)
|
||||
},
|
||||
random(){
|
||||
this.designOpenrtionList.forEach((v,index)=>{
|
||||
this.exhibitionOpenrtionList[this.stateOverallSingle].forEach((v,index)=>{
|
||||
this.refetchTemplate(index)
|
||||
})
|
||||
},
|
||||
@@ -527,7 +543,7 @@ export default defineComponent({
|
||||
x = sketch?.width - this.print.width.replace(/px/g,'')*scale/2
|
||||
}
|
||||
let y = sketch?.height-this.print.height.replace(/px/g,'')*scale
|
||||
this.printStyleList[index]={
|
||||
this.printStyleList[this.stateOverallSingle][index]={
|
||||
centers:{
|
||||
left:0,
|
||||
top:0,
|
||||
@@ -544,13 +560,14 @@ export default defineComponent({
|
||||
transform:{
|
||||
// scale:scale<.2?.2:scale,//0.2-3
|
||||
// rotateZ:rotateZ1-rotateZ2,
|
||||
rotateZ:this.printStyleList[index].transform.rotateZ?this.printStyleList[index].transform.rotateZ:0
|
||||
rotateZ:this.printStyleList[this.stateOverallSingle][index].transform.rotateZ?this.printStyleList[this.stateOverallSingle][index].transform.rotateZ:0
|
||||
},
|
||||
designOpenrtionBtn:false
|
||||
}
|
||||
},
|
||||
//设置图片
|
||||
setTemplate(item,index) {
|
||||
async setTemplate(item,index) {
|
||||
await this.setPrintWH(item.path)
|
||||
this.designOpenrtionList
|
||||
let sketch = document.getElementsByClassName("designOpenrtion_modal")[0]?.getElementsByClassName('designOpenrtion_sketch')[0]
|
||||
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
|
||||
@@ -565,7 +582,7 @@ export default defineComponent({
|
||||
if(sketch.offsetHeight < item.location[1]/sketchNum){
|
||||
top = sketch.offsetHeight +'px'
|
||||
}
|
||||
this.printStyleList[index]={
|
||||
this.printStyleList[this.stateOverallSingle][index]={
|
||||
centers:{
|
||||
left:0,
|
||||
top:0,
|
||||
@@ -587,7 +604,7 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
computeZindex(){
|
||||
let arr = JSON.parse(JSON.stringify(this.printStyleList))
|
||||
let arr = JSON.parse(JSON.stringify(this.printStyleList[this.stateOverallSingle]))
|
||||
arr.sort((a, b) => {
|
||||
var a_num = a["style"].zIndex;
|
||||
var b_num = b["style"].zIndex;
|
||||
@@ -600,38 +617,41 @@ export default defineComponent({
|
||||
return this.computeSize(arr)//计算单件衣服初始大小到目前大小的缩放比
|
||||
},
|
||||
computeSize(arr){
|
||||
// let num = this.sketch/
|
||||
let sketch = document.getElementsByClassName("designOpenrtion_sketch")[0]
|
||||
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
|
||||
let prints = []
|
||||
let scale
|
||||
let location
|
||||
arr.forEach((v,index)=>{
|
||||
if(!this.overallSingle){
|
||||
scale = this.systemDesignerPercentage/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]
|
||||
location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
|
||||
}else{
|
||||
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]
|
||||
return new Promise(async (resolve, reject) => {
|
||||
// let num = this.sketch/
|
||||
let sketch = document.getElementsByClassName("designOpenrtion_sketch")[0]
|
||||
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
|
||||
let prints = []
|
||||
let scale
|
||||
let location
|
||||
for (let index = 0; index < arr.length; index++) {
|
||||
if(!this.overallSingle){
|
||||
scale = this.systemDesignerPercentage/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]
|
||||
location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
|
||||
}else{
|
||||
await this.setPrintWH(this.exhibitionOpenrtionList[this.stateOverallSingle][index].path)
|
||||
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 : !this.overallSingle ? 0:arr[index].transform.rotateZ,
|
||||
location : location,
|
||||
priority:arr[index].style.zIndex,
|
||||
scale: scale,
|
||||
designType:this.exhibitionOpenrtionList[this.stateOverallSingle][index].designType,
|
||||
level2Type:this.exhibitionOpenrtionList[this.stateOverallSingle][index].level2Type,
|
||||
path:this.exhibitionOpenrtionList[this.stateOverallSingle][index].path,
|
||||
minIOPath:this.exhibitionOpenrtionList[this.stateOverallSingle][index].minIOPath,
|
||||
}
|
||||
prints.push(obj)
|
||||
}
|
||||
let obj = {
|
||||
angle : !this.overallSingle ? 0:arr[index].transform.rotateZ,
|
||||
location : location,
|
||||
priority:arr[index].style.zIndex,
|
||||
scale: scale,
|
||||
designType:this.designOpenrtionList[index].designType,
|
||||
path:this.designOpenrtionList[index].path,
|
||||
minIOPath:this.designOpenrtionList[index].minIOPath,
|
||||
}
|
||||
prints.push(obj)
|
||||
resolve(prints)
|
||||
})
|
||||
return prints
|
||||
},
|
||||
setPreview(){
|
||||
async setPreview(){
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
let index
|
||||
let scale = this.printStyleList[0].style.width.replace(/px/g,'')/this.print.width.replace(/px/g,'')
|
||||
designItemDetail.clothes.forEach((v,ind)=>{
|
||||
if(v.id == this.current.id){
|
||||
index = ind
|
||||
@@ -645,10 +665,13 @@ export default defineComponent({
|
||||
// priority:priority,
|
||||
// timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
// }
|
||||
let data = this.store.state.DesignDetailModule.designPreviewData
|
||||
let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
|
||||
await this.computeZindex().then((rv)=>{
|
||||
this.setOkData = rv
|
||||
})
|
||||
data.designSingleItemDTOList[index].printObject={
|
||||
ifSingle:this.overallSingle,
|
||||
prints:this.computeZindex(),
|
||||
prints:this.setOkData,
|
||||
}
|
||||
data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
this.loadingShow = true
|
||||
@@ -678,12 +701,12 @@ export default defineComponent({
|
||||
index = ind
|
||||
}
|
||||
})
|
||||
console.log(this.designItemDetailTS);
|
||||
if(this.designItemDetailTS.rv){
|
||||
designItemDetail.currentFullBodyView = this.designItemDetailTS.rv.currentFullBodyView
|
||||
designItemDetail.clothes[index].printObject.ifSingle = this.overallSingle
|
||||
designItemDetail.clothes[index].layersObject = this.designItemDetailTS.rv.clothes[index].layersObject
|
||||
designItemDetail.clothes[index].printObject.prints = this.computeZindex()
|
||||
designItemDetail.clothes[index].trims = this.designItemDetailTS.rv.clothes[index].trims
|
||||
designItemDetail.clothes[index].printObject.prints = this.setOkData
|
||||
designItemDetail.ifSubmit = true
|
||||
designItemDetail.clothes.forEach((item,i)=>{
|
||||
let a
|
||||
@@ -706,31 +729,18 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
clearModal(){
|
||||
this.printAmount = 1//显示数量
|
||||
this.designOpenrtion = true//modal页面关闭
|
||||
this.printZIndex = 2//点击图片z-index
|
||||
this.imgDomIndex = 0//点击图片下标
|
||||
this.designOpenrtionList = []
|
||||
this.printStyleList.splice(1,this.printStyleList.length-1)
|
||||
this.printStyleList[0] = {
|
||||
centers:{
|
||||
left:0,
|
||||
top:0,
|
||||
},
|
||||
style:{
|
||||
left:0+"px",
|
||||
top:0+"px",
|
||||
right:"auto",
|
||||
bottom:"auto",
|
||||
width:'auto',
|
||||
height:'auto',
|
||||
zIndex:1,
|
||||
},
|
||||
transform:{
|
||||
scale:1,
|
||||
rotateZ:0,
|
||||
},
|
||||
designOpenrtionBtn:false
|
||||
this.designList = []
|
||||
this.exhibitionOpenrtionList = {
|
||||
single:[],
|
||||
overall:[],
|
||||
}
|
||||
this.printStyleList = {
|
||||
single:[],
|
||||
overall:[],
|
||||
}
|
||||
},
|
||||
closeModal(){
|
||||
@@ -887,30 +897,6 @@ export default defineComponent({
|
||||
height: calc(3rem*1.2);
|
||||
line-height: calc(3rem*1.2);
|
||||
}
|
||||
.print_input{
|
||||
margin-top: calc(1rem*1.2);
|
||||
width: calc(9.85rem*1.2);
|
||||
display: flex;
|
||||
.search_input{
|
||||
width: calc(6.85rem*1.2);
|
||||
margin-right: calc(1rem*1.2);
|
||||
padding: 0 calc(1.5rem*1.2);
|
||||
border: 2px solid #000;
|
||||
font-size: calc(1.2rem*1.2);
|
||||
font-weight: 400;
|
||||
height: calc(3rem*1.2);
|
||||
border-radius: calc(1.5rem*1.2);
|
||||
&::placeholder {
|
||||
color: #C2C2C2;
|
||||
}
|
||||
}
|
||||
i{
|
||||
width: calc(2rem*1.2);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.designOpenrtion_nav{
|
||||
display: flex;
|
||||
margin-top: calc(2rem*1.2);
|
||||
@@ -922,13 +908,6 @@ export default defineComponent({
|
||||
&.designOpenrtion_nav::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.active{
|
||||
img{
|
||||
border: 2px solid;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.designOpenrtion_single{
|
||||
width: 40%;
|
||||
margin-bottom: calc(2rem*1.2);
|
||||
@@ -944,6 +923,7 @@ export default defineComponent({
|
||||
&.show_print_right{
|
||||
border: none;
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
@@ -1104,6 +1084,19 @@ export default defineComponent({
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.designOpenrtion_delete{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 4rem;
|
||||
background: none;
|
||||
transform: translate(100%, -100%);
|
||||
height: 4rem;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.designOpenrtion_rotote::after{
|
||||
position: absolute;
|
||||
content: "";
|
||||
|
||||
@@ -49,17 +49,23 @@
|
||||
</a-slider>
|
||||
</div>
|
||||
<div v-show="overallSingle" @click="random" class="button_second">{{ $t('DesignPrintOperation.Random') }}</div>
|
||||
<div v-show="overallSingle" class="print_input">
|
||||
<!-- <div v-show="overallSingle" class="print_input">
|
||||
<input class="search_input" :placeholder="$t('DesignPrintOperation.inputContent')" type="Number" v-model="printAmount" @input="setprintAmount">
|
||||
<i class="fi fi-rr-trash" @click="deletePrint"></i>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="designOpenrtionMobile_nav">
|
||||
<div class="designOpenrtionMobile_single" v-show="overallSingle" v-for="item,index in designOpenrtionList" :key="item" :class="{active:printStyleList[index]?.designOpenrtionBtn?printStyleList[index]?.designOpenrtionBtn:false}">
|
||||
<!-- <div class="designOpenrtionMobile_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="designOpenrtionMobile_single" v-for="item,index in designOpenrtionList" :key="item" v-show="(stateOverallSingle == 'overall' && item.level2Type == 'Pattern') || stateOverallSingle == 'single'">
|
||||
<img :src="item.path" @click="setpitch(item,index)">
|
||||
</div>
|
||||
<div class="designOpenrtionMobile_overall" v-show="!overallSingle">
|
||||
<img :src="designOpenrtionList[0].path">
|
||||
<div class="designOpenrtionMobile_single" v-for="item,index in designList" :key="item" v-show="(stateOverallSingle == 'overall' && item.level2Type == 'Pattern') || stateOverallSingle == 'single'">
|
||||
<img :src="item.path" @click="setpitch(item,index)">
|
||||
</div>
|
||||
<!-- <div class="designOpenrtionMobile_overall" v-show="!overallSingle">
|
||||
<img :src="designOpenrtionList[0].path">
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
|
||||
<div class="subitOkPreviewBtn Guide_1_25_1" :class="[driver__.driver?'hideEvents':'']" @click.stop="setOK">OK</div>
|
||||
@@ -69,14 +75,15 @@
|
||||
<div class="designOpenrtionMobile_centent" id="designOpenrtionCentent">
|
||||
<!-- <div class="designOpenrtionMobile_imgMask" :style="sketch"> -->
|
||||
<div class="designOpenrtionMobile_imgMask">
|
||||
<div class="designOpenrtionMobile_print" v-show="overallSingle">
|
||||
<div class="designOpenrtionMobile_print">
|
||||
<div
|
||||
v-for="item,index in designOpenrtionList"
|
||||
v-for="item,index in exhibitionOpenrtionList[stateOverallSingle]"
|
||||
:key="item"
|
||||
:style="[printStyleList?.[index]?.style]"
|
||||
v-if="overallSingle"
|
||||
:style="[printStyleList[stateOverallSingle]?.[index]?.style]"
|
||||
@touchstart.stop="itemMoveMousedown(index,$event)"
|
||||
class="modal_imgItem"
|
||||
@click="setpitch(item,index)" ref="content" >
|
||||
ref="content" >
|
||||
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designOpenrtionMobile_imgItme" draggable="false">
|
||||
</div>
|
||||
</div>
|
||||
@@ -84,17 +91,23 @@
|
||||
<img :src="current?.path" alt="" class="designOpenrtionMobile_sketch">
|
||||
<img v-show="overallSingle" :src="current?.layersObject?.[1]?.maskUrl" alt="" class="designOpenrtionMobile_sketch_mask">
|
||||
<div class="designOpenrtionMobile_btn">
|
||||
<ul v-if="overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtionMobile_Mousingle" :style="item.style" @touchstart.stop="itemMoveMousedown(index,$event)">
|
||||
<ul v-if="overallSingle" v-for="item,index in printStyleList[stateOverallSingle]" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtionMobile_Mousingle" :style="item.style" @touchstart.stop="itemMoveMousedown(index,$event)">
|
||||
<li class="designOpenrtionMobile_btn_top" @touchstart.stop="itemSizeMousedown('top',$event)"></li>
|
||||
<li class="designOpenrtionMobile_btn_bottom" @touchstart.stop="itemSizeMousedown('bottom',$event)"></li>
|
||||
<li class="designOpenrtionMobile_btn_left" @touchstart.stop="itemSizeMousedown('left',$event)"></li>
|
||||
<li class="designOpenrtionMobile_btn_right" @touchstart.stop="itemSizeMousedown('right',$event)"></li>
|
||||
<li class="designOpenrtionMobile_rotote" v-rotote.stop="[index,item.transform]"></li>
|
||||
<li class="designOpenrtionMobile__delete" @click="deletePrint">
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
|
||||
</li>
|
||||
</ul>
|
||||
<div v-show="!overallSingle"></div>
|
||||
<ul v-if="!overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtionMobile_Mouoverall" :style="'left:'+item.style.left+';top:'+item.style.top" @touchstart.stop="itemMoveMousedown(index,$event)">
|
||||
<ul v-if="!overallSingle && printStyleList[stateOverallSingle][0]" :class="{active:printStyleList[stateOverallSingle][0]?.designOpenrtionBtn}" class="designOpenrtionMobile_Mouoverall" :style="'left:'+printStyleList[stateOverallSingle][0]?.style?.left+';top:'+printStyleList[stateOverallSingle][0]?.style?.top+';'" @touchstart.stop="itemMoveMousedown(0,$event)">
|
||||
<i class="fi fi-rr-arrows animtion1"></i>
|
||||
<i class="fi fi-rr-arrows animtion2"></i>
|
||||
<li class="designOpenrtionMobile__delete" @click="deletePrint">
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -125,15 +138,25 @@ export default defineComponent({
|
||||
|
||||
setup(prop) {
|
||||
let designOpenrtion = ref(false);
|
||||
let designOpenrtionList = ref([])
|
||||
let designOpenrtionList = ref([])//新增的元素
|
||||
let designList = ref([])//已经存在的元素
|
||||
let setOkData = ref([])
|
||||
let exhibitionOpenrtionList = ref({
|
||||
single:[],
|
||||
overall:[],
|
||||
})//展示的元素
|
||||
let driver__ = inject('driver__')
|
||||
let current = inject('current')//父组件传过来的数据
|
||||
let setRevocation = inject('setRevocation')//父组件传过来的数据
|
||||
let overallSingle = ref(false)
|
||||
let stateOverallSingle = ref('single')
|
||||
let systemDesignerPercentage = ref(0)
|
||||
let printAmount = ref(1)//印花数量
|
||||
let printZIndex = ref(2)//印花优先级
|
||||
let printStyleList = ref([{
|
||||
let printStyleList = ref({
|
||||
single:[],
|
||||
overall:[],
|
||||
});
|
||||
let currentPrintStyleList = ref({
|
||||
centers:{
|
||||
left:0,
|
||||
top:0,
|
||||
@@ -152,7 +175,7 @@ export default defineComponent({
|
||||
rotateZ:0,
|
||||
},
|
||||
designOpenrtionBtn:false
|
||||
}]);
|
||||
});
|
||||
|
||||
let direction = ref('')
|
||||
let imgDom = ref()
|
||||
@@ -174,11 +197,15 @@ export default defineComponent({
|
||||
designOpenrtion,
|
||||
designOpenrtionList,
|
||||
overallSingle,
|
||||
stateOverallSingle,
|
||||
designList,
|
||||
setOkData,
|
||||
exhibitionOpenrtionList,
|
||||
systemDesignerPercentage,
|
||||
current,
|
||||
printAmount,
|
||||
printZIndex,
|
||||
printStyleList,
|
||||
currentPrintStyleList,
|
||||
direction,//判断点击的是li那个边
|
||||
imgDom,
|
||||
imgDomIndex,
|
||||
@@ -211,8 +238,8 @@ export default defineComponent({
|
||||
let num = 1
|
||||
let x = 0
|
||||
let y = 0
|
||||
num = value.instance.printStyleList[value.instance.imgDomIndex].transform.scale
|
||||
angle = value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ
|
||||
num = value.instance.printStyleList[num = value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.scale
|
||||
angle = value.instance.printStyleList[num = value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.rotateZ
|
||||
// 添加鼠标按下事件监听器
|
||||
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
|
||||
// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
|
||||
@@ -236,7 +263,7 @@ export default defineComponent({
|
||||
document.addEventListener('touchmove', touchmove,{passive:true});
|
||||
// 添加鼠标松开事件监听器
|
||||
let touchend = () => {
|
||||
value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle
|
||||
value.instance.printStyleList[num = value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.rotateZ = angle
|
||||
mouse = false;
|
||||
document.removeEventListener('touchend',touchend)
|
||||
document.removeEventListener('touchmove',touchmove)
|
||||
@@ -254,52 +281,48 @@ export default defineComponent({
|
||||
if(designItemDetail.others.length == 0){
|
||||
this.body = true
|
||||
}
|
||||
let DesignPrintOperationParent = this.$parent
|
||||
this.designOpenrtion = true
|
||||
this.clearModal()
|
||||
this.designOpenrtionList = []
|
||||
this.designOpenrtionList.push(...this.current.printObject.prints)
|
||||
this.overallSingle = DesignPrintOperationParent.overallSingle
|
||||
this.systemDesignerPercentage = DesignPrintOperationParent.systemDesignerPercentage
|
||||
this.overallSingle = this.current.printObject.ifSingle?true:false
|
||||
this.ifListOver()
|
||||
if(this.current.printObject.prints)this.exhibitionOpenrtionList[this.stateOverallSingle] = JSON.parse(JSON.stringify(this.current.printObject.prints))
|
||||
if(this.$parent.exhibitionList.print)this.designOpenrtionList = JSON.parse(JSON.stringify(this.$parent.exhibitionList.print))
|
||||
if(this.$parent.elementsList)this.designList = JSON.parse(JSON.stringify(this.$parent.printsList))
|
||||
// this.overallSingle = this.current.ifSingle?false:this.current.ifSingle
|
||||
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'
|
||||
skecth.remove()
|
||||
}
|
||||
// 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.prints[0].path
|
||||
print.onload=()=>{
|
||||
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
|
||||
nextTick().then(()=>{
|
||||
if(this.designOpenrtionList[0].scale){
|
||||
this.designOpenrtionList.forEach((item,index)=>{
|
||||
this.setTemplate(item,index)
|
||||
this.printAmount = this.printStyleList.length
|
||||
if (!this.overallSingle) {
|
||||
this.printAmount = 1
|
||||
this.setprintAmount()
|
||||
}
|
||||
if(this.current.printObject.ifSingle != this.overallSingle){
|
||||
this.refetchTemplate(0)
|
||||
}
|
||||
|
||||
})
|
||||
}else{
|
||||
this.refetchTemplate(0)
|
||||
}
|
||||
if(this.exhibitionOpenrtionList[this.stateOverallSingle].length > 0){
|
||||
this.exhibitionOpenrtionList[this.stateOverallSingle].forEach((item,index)=>{
|
||||
this.setTemplate(item,index)
|
||||
})
|
||||
|
||||
}else{
|
||||
}
|
||||
|
||||
},
|
||||
ifListOver(){
|
||||
if(!this.overallSingle){
|
||||
// this.designOpenrtionList = this.designOpenrtionList.filter((item)=>item.level2Type == "Pattern")
|
||||
// this.designList = this.designList.filter((item)=>item.level2Type == "Pattern")
|
||||
this.stateOverallSingle = 'overall'
|
||||
}else{
|
||||
this.stateOverallSingle = 'single'
|
||||
}
|
||||
},
|
||||
setPrintWH(url){
|
||||
let print = new Image
|
||||
return new Promise((resolve, reject) => {
|
||||
print.onload=()=>{
|
||||
this.print.width = print.width+'px'
|
||||
this.print.height = print.height+'px'
|
||||
resolve()
|
||||
print.remove()
|
||||
}
|
||||
print.src = url
|
||||
})
|
||||
},
|
||||
systemDesigner(num) {
|
||||
let DesignPrintOperationParent = this.$parent
|
||||
@@ -310,27 +333,53 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
setOveralSingle(){
|
||||
let DesignPrintOperationParent = this.$parent
|
||||
DesignPrintOperationParent.overallSingle = this.overallSingle
|
||||
if (!this.overallSingle) {
|
||||
this.printAmount = 1
|
||||
this.setprintAmount()
|
||||
if(!this.overallSingle){
|
||||
// this.refetchTemplate(0)
|
||||
this.stateOverallSingle = 'overall'
|
||||
}else{
|
||||
this.random()
|
||||
this.stateOverallSingle = 'single'
|
||||
}
|
||||
// this.random()
|
||||
},
|
||||
setpitch(item,index){
|
||||
this.printStyleList.forEach((v)=>{
|
||||
async setpitch(item,index){
|
||||
await this.setPrintWH(item.path)
|
||||
this.printStyleList[this.stateOverallSingle].forEach((v)=>{
|
||||
v.designOpenrtionBtn = false
|
||||
})
|
||||
this.imgDomIndex = index
|
||||
this.printStyleList[index].designOpenrtionBtn = true
|
||||
this.printStyleList[index].style.zIndex = this.printZIndex++
|
||||
if(!this.overallSingle){
|
||||
this.printStyleList[this.stateOverallSingle][0] = JSON.parse(JSON.stringify(this.currentPrintStyleList))
|
||||
this.exhibitionOpenrtionList[this.stateOverallSingle][0] = {
|
||||
angle:0,
|
||||
designType:item.designType,
|
||||
level2Type:item.level2Type,
|
||||
minIOPath:item.minIOPath,
|
||||
path:item.path,
|
||||
priority:1,
|
||||
scale:.3,
|
||||
location:[0,0]
|
||||
}
|
||||
this.refetchTemplate(0)
|
||||
this.systemDesignerPercentage = 30
|
||||
}else{
|
||||
this.printStyleList[this.stateOverallSingle].push(JSON.parse(JSON.stringify(this.currentPrintStyleList)))
|
||||
let currentIndex = this.printStyleList[this.stateOverallSingle].length-1
|
||||
this.exhibitionOpenrtionList[this.stateOverallSingle].push({
|
||||
angle:0,
|
||||
designType:item.designType,
|
||||
level2Type:item.level2Type,
|
||||
minIOPath:item.minIOPath,
|
||||
path:item.path,
|
||||
priority:1,
|
||||
scale:1,
|
||||
location:[0,0]
|
||||
})
|
||||
this.refetchTemplate(currentIndex)
|
||||
}
|
||||
},
|
||||
//设置移动
|
||||
itemMoveMousedown(index,event){
|
||||
this.imgDomIndex = index
|
||||
this.printStyleList.forEach((v)=>{
|
||||
this.printStyleList[this.stateOverallSingle].forEach((v)=>{
|
||||
v.designOpenrtionBtn = false
|
||||
})
|
||||
if(!this.overallSingle){
|
||||
@@ -340,17 +389,17 @@ export default defineComponent({
|
||||
}
|
||||
let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
|
||||
let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
||||
this.printStyleList[index].designOpenrtionBtn = true
|
||||
this.printStyleList[index].style.zIndex = this.printZIndex++
|
||||
this.printStyleList[index].transform = {
|
||||
this.printStyleList[this.stateOverallSingle][index].designOpenrtionBtn = true
|
||||
this.printStyleList[this.stateOverallSingle][index].style.zIndex = this.printZIndex++
|
||||
this.printStyleList[this.stateOverallSingle][index].transform = {
|
||||
scale:scale,
|
||||
rotateZ:rotateZ?rotateZ:0,
|
||||
}
|
||||
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.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-left
|
||||
this.printStyleList[index].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-top
|
||||
let left = Number(this.printStyleList[this.stateOverallSingle][index].style.left.replace(/px/g,''))
|
||||
let top = Number(this.printStyleList[this.stateOverallSingle][index].style.top.replace(/px/g,''))
|
||||
this.printStyleList[this.stateOverallSingle][index].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-left
|
||||
this.printStyleList[this.stateOverallSingle][index].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-top
|
||||
document.addEventListener("touchend", this.touchend);
|
||||
document.addEventListener("touchmove", this.moveMousemove);
|
||||
},
|
||||
@@ -358,23 +407,23 @@ export default defineComponent({
|
||||
itemSizeMousedown(direction,event){
|
||||
this.direction = direction
|
||||
this.imgDom = document.getElementsByClassName('designOpenrtionMobile_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
|
||||
let scale = Number(this.imgDom.firstChild.style.transform?.split('scale(')[1]?.split(')')[0])
|
||||
let rotateZ = Number(this.imgDom.firstChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
||||
this.printStyleList[this.imgDomIndex].designOpenrtionBtn = true
|
||||
this.printStyleList[this.imgDomIndex].transform = {
|
||||
let scale = Number(this.imgDom.style.transform?.split('scale(')[1]?.split(')')[0])
|
||||
let rotateZ = Number(this.imgDom.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].designOpenrtionBtn = true
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].transform = {
|
||||
scale:scale,
|
||||
rotateZ:rotateZ,
|
||||
}
|
||||
let imgDomWH = this.imgDom.getBoundingClientRect()
|
||||
let li = document.getElementsByClassName('designOpenrtionMobile_modal')[0].getElementsByClassName("designOpenrtionMobile_btn_top")[0].offsetWidth/2
|
||||
if(this.direction == 'right' || this.direction == 'bottom'){
|
||||
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-li
|
||||
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-li
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-li
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-li
|
||||
}else{
|
||||
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left+imgDomWH.width-li
|
||||
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top+imgDomWH.height-li
|
||||
this.printStyleList[this.imgDomIndex].centers.right = this.imgDom.parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft
|
||||
this.printStyleList[this.imgDomIndex].centers.bottom = this.imgDom.parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left+imgDomWH.width-li
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top+imgDomWH.height-li
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.right = this.imgDom.parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.bottom = this.imgDom.parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop
|
||||
}
|
||||
|
||||
document.addEventListener("touchend", this.sizeMouseup);
|
||||
@@ -385,22 +434,22 @@ export default defineComponent({
|
||||
let imgDomWH = this.imgDom.getBoundingClientRect()
|
||||
let parentNode = document.getElementsByClassName('designOpenrtionMobile_modal')[0].getElementsByClassName("designOpenrtionMobile_imgMask")[0]
|
||||
parentNode = parentNode.getBoundingClientRect()
|
||||
let x = ( e.changedTouches[0].pageX - this.printStyleList[this.imgDomIndex].centers.left)+'px'
|
||||
let y = ( e.changedTouches[0].pageY - this.printStyleList[this.imgDomIndex].centers.top)+'px'
|
||||
this.printStyleList[this.imgDomIndex].style.left = x
|
||||
this.printStyleList[this.imgDomIndex].style.top = y
|
||||
let x = ( e.changedTouches[0].pageX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)+'px'
|
||||
let y = ( e.changedTouches[0].pageY - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)+'px'
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = x
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = y
|
||||
if(!this.overallSingle){
|
||||
if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
|
||||
this.printStyleList[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
|
||||
}
|
||||
if(x.replace(/px/g,'') <= 0){
|
||||
this.printStyleList[this.imgDomIndex].style.left = 0+'px'
|
||||
this.printStyleList[this.stateOverallSingle][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'
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
|
||||
}
|
||||
if(y.replace(/px/g,'') <= 0){
|
||||
this.printStyleList[this.imgDomIndex].style.top = 0+'px'
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = 0+'px'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -421,12 +470,12 @@ export default defineComponent({
|
||||
width = w+'px'
|
||||
height = w*num1+'px'
|
||||
}else if(this.direction == 'top'){
|
||||
this.printStyleList[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'
|
||||
this.printStyleList[this.imgDomIndex].style.bottom = this.printStyleList[this.imgDomIndex].centers.bottom+'px'
|
||||
w = ( e.changedTouches[0].pageX - this.printStyleList[this.imgDomIndex].centers.left)*num
|
||||
h = (this.printStyleList[this.imgDomIndex].centers.top - e.changedTouches[0].pageY)
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = 'auto'
|
||||
// this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
|
||||
// this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.bottom = this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.bottom+'px'
|
||||
w = ( e.changedTouches[0].pageX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
|
||||
h = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top - e.changedTouches[0].pageY)
|
||||
|
||||
height = h+'px'
|
||||
width = h*num+'px'
|
||||
@@ -435,19 +484,19 @@ export default defineComponent({
|
||||
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 = this.printStyleList[this.imgDomIndex].centers.right+'px'
|
||||
w = (this.printStyleList[this.imgDomIndex].centers.left - e.changedTouches[0].pageX)
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.right = this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.right+'px'
|
||||
w = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left - e.changedTouches[0].pageX)
|
||||
width = w+'px'
|
||||
height = w*num1+'px'
|
||||
}
|
||||
//判断尺寸是否到边
|
||||
this.printStyleList[this.imgDomIndex].style.width = width
|
||||
this.printStyleList[this.imgDomIndex].style.height = height
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.width = width
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.height = height
|
||||
},
|
||||
//鼠标抬起
|
||||
sizeMouseup(e){
|
||||
this.printStyleList[this.imgDomIndex].style={
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style={
|
||||
right:'auto',
|
||||
left:this.imgDom.offsetLeft+'px',
|
||||
bottom:'auto',
|
||||
@@ -464,47 +513,12 @@ export default defineComponent({
|
||||
document.removeEventListener("touchend", this.touchend);
|
||||
document.removeEventListener("touchmove", this.moveMousemove);
|
||||
},
|
||||
|
||||
|
||||
setprintAmount(){
|
||||
if(this.printAmount < 1){
|
||||
this.printAmount = 1
|
||||
return
|
||||
}
|
||||
if(this.printAmount > 20){
|
||||
this.printAmount = 20
|
||||
return
|
||||
}
|
||||
let printTiemNum
|
||||
if(this.printAmount>this.printStyleList.length){
|
||||
let num = this.printAmount - this.printStyleList.length
|
||||
for (let index = 0; index < num; index++) {
|
||||
this.printStyleList.push(JSON.parse(JSON.stringify(this.printStyleList[this.printStyleList.length-1])))
|
||||
this.printStyleList[this.printStyleList.length-1].transform.rotateZ = 0
|
||||
this.refetchTemplate(this.printStyleList.length-1)
|
||||
this.designOpenrtionList.push(this.current.printObject.prints[this.current.printObject.prints.length-1])
|
||||
}
|
||||
}else{
|
||||
let num = this.printStyleList.length - this.printAmount
|
||||
this.designOpenrtionList.splice(this.printStyleList.length-num,num)
|
||||
this.printStyleList.splice(this.printStyleList.length-num,num)
|
||||
}
|
||||
this.printStyleList.forEach((v)=>{
|
||||
v.designOpenrtionBtn = false
|
||||
})
|
||||
this.printStyleList[this.printStyleList.length-1].designOpenrtionBtn = true
|
||||
this.imgDomIndex = this.printStyleList.length-1
|
||||
},
|
||||
deletePrint(){
|
||||
if(this.designOpenrtionList.length <= 1){
|
||||
return
|
||||
}
|
||||
this.designOpenrtionList.splice(this.imgDomIndex,1)
|
||||
this.printStyleList.splice(this.imgDomIndex,1)
|
||||
this.printAmount = this.designOpenrtionList.length
|
||||
this.exhibitionOpenrtionList[this.stateOverallSingle].splice(this.imgDomIndex,1)
|
||||
this.printStyleList[this.stateOverallSingle].splice(this.imgDomIndex,1)
|
||||
},
|
||||
random(){
|
||||
this.designOpenrtionList.forEach((v,index)=>{
|
||||
this.exhibitionOpenrtionList[this.stateOverallSingle].forEach((v,index)=>{
|
||||
this.refetchTemplate(index)
|
||||
})
|
||||
},
|
||||
@@ -530,7 +544,7 @@ export default defineComponent({
|
||||
x = sketch?.width - this.print.width.replace(/px/g,'')*scale/2
|
||||
}
|
||||
let y = sketch?.height-this.print.height.replace(/px/g,'')*scale
|
||||
this.printStyleList[index]={
|
||||
this.printStyleList[this.stateOverallSingle][index]={
|
||||
centers:{
|
||||
left:0,
|
||||
top:0,
|
||||
@@ -547,7 +561,7 @@ export default defineComponent({
|
||||
transform:{
|
||||
// scale:scale<.2?.2:scale,//0.2-3
|
||||
// rotateZ:rotateZ1-rotateZ2,
|
||||
rotateZ:this.printStyleList[index].transform.rotateZ?this.printStyleList[index].transform.rotateZ:0
|
||||
rotateZ:this.printStyleList[this.stateOverallSingle][index].transform.rotateZ?this.printStyleList[this.stateOverallSingle][index].transform.rotateZ:0
|
||||
},
|
||||
designOpenrtionBtn:false
|
||||
}
|
||||
@@ -568,7 +582,7 @@ export default defineComponent({
|
||||
if(sketch.offsetHeight < item.location[1]/sketchNum){
|
||||
top = sketch.offsetHeight +'px'
|
||||
}
|
||||
this.printStyleList[index]={
|
||||
this.printStyleList[this.stateOverallSingle][index]={
|
||||
centers:{
|
||||
left:0,
|
||||
top:0,
|
||||
@@ -590,7 +604,7 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
computeZindex(){
|
||||
let arr = JSON.parse(JSON.stringify(this.printStyleList))
|
||||
let arr = JSON.parse(JSON.stringify(this.printStyleList[this.stateOverallSingle]))
|
||||
arr.sort((a, b) => {
|
||||
var a_num = a["style"].zIndex;
|
||||
var b_num = b["style"].zIndex;
|
||||
@@ -604,37 +618,40 @@ export default defineComponent({
|
||||
},
|
||||
computeSize(arr){
|
||||
// let num = this.sketch/
|
||||
let sketch = document.getElementsByClassName("designOpenrtionMobile_sketch")[0]
|
||||
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
|
||||
let prints = []
|
||||
let scale
|
||||
let location
|
||||
arr.forEach((v,index)=>{
|
||||
if(!this.overallSingle){
|
||||
scale = this.systemDesignerPercentage/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]
|
||||
location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
|
||||
}else{
|
||||
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]
|
||||
return new Promise(async (resolve, reject) => {
|
||||
let sketch = document.getElementsByClassName("designOpenrtionMobile_sketch")[0]
|
||||
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
|
||||
let scale
|
||||
let prints = []
|
||||
let location
|
||||
for (let index = 0; index < arr.length; index++) {
|
||||
if(!this.overallSingle){
|
||||
scale = this.systemDesignerPercentage/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]
|
||||
location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
|
||||
}else{
|
||||
await this.setPrintWH(this.exhibitionOpenrtionList[this.stateOverallSingle][index].path)
|
||||
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 : !this.overallSingle ? 0:arr[index].transform.rotateZ,
|
||||
location : location,
|
||||
priority:arr[index].style.zIndex,
|
||||
scale: scale,
|
||||
designType:this.exhibitionOpenrtionList[this.stateOverallSingle][index].designType,
|
||||
level2Type:this.exhibitionOpenrtionList[this.stateOverallSingle][index].level2Type,
|
||||
path:this.exhibitionOpenrtionList[this.stateOverallSingle][index].path,
|
||||
minIOPath:this.exhibitionOpenrtionList[this.stateOverallSingle][index].minIOPath,
|
||||
}
|
||||
prints.push(obj)
|
||||
}
|
||||
let obj = {
|
||||
angle : !this.overallSingle ? 0:arr[index].transform.rotateZ,
|
||||
location : location,
|
||||
priority:arr[index].style.zIndex,
|
||||
scale: scale,
|
||||
designType:this.designOpenrtionList[index].designType,
|
||||
path:this.designOpenrtionList[index].path,
|
||||
minIOPath:this.designOpenrtionList[index].minIOPath,
|
||||
}
|
||||
prints.push(obj)
|
||||
resolve(prints)
|
||||
})
|
||||
return prints
|
||||
},
|
||||
setPreview(){
|
||||
async setPreview(){
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
let index
|
||||
let scale = this.printStyleList[0].style.width.replace(/px/g,'')/this.print.width.replace(/px/g,'')
|
||||
designItemDetail.clothes.forEach((v,ind)=>{
|
||||
if(v.id == this.current.id){
|
||||
index = ind
|
||||
@@ -649,9 +666,12 @@ export default defineComponent({
|
||||
// timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
// }
|
||||
let data = this.store.state.DesignDetailModule.designPreviewData
|
||||
await this.computeZindex().then((rv)=>{
|
||||
this.setOkData = rv
|
||||
})
|
||||
data.designSingleItemDTOList[index].printObject={
|
||||
ifSingle:this.overallSingle,
|
||||
prints:this.computeZindex(),
|
||||
prints:this.setOkData,
|
||||
}
|
||||
data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
this.loadingShow = true
|
||||
@@ -686,7 +706,9 @@ export default defineComponent({
|
||||
designItemDetail.currentFullBodyView = this.designItemDetailTS.rv.currentFullBodyView
|
||||
designItemDetail.clothes[index].printObject.ifSingle = this.overallSingle
|
||||
designItemDetail.clothes[index].layersObject = this.designItemDetailTS.rv.clothes[index].layersObject
|
||||
designItemDetail.clothes[index].printObject.prints = this.computeZindex()
|
||||
designItemDetail.clothes[index].trims = this.designItemDetailTS.rv.clothes[index].trims
|
||||
designItemDetail.clothes[index].printObject.prints = this.setOkData
|
||||
// designItemDetail.clothes[index].printObject.prints = this.computeZindex()
|
||||
designItemDetail.ifSubmit = true
|
||||
designItemDetail.clothes.forEach((item,i)=>{
|
||||
let a
|
||||
@@ -708,31 +730,18 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
clearModal(){
|
||||
this.printAmount = 1//显示数量
|
||||
this.designOpenrtion = true//modal页面关闭
|
||||
this.printZIndex = 2//点击图片z-index
|
||||
this.imgDomIndex = 0//点击图片下标
|
||||
this.designOpenrtionList = []
|
||||
this.printStyleList.splice(1,this.printStyleList.length-1)
|
||||
this.printStyleList[0] = {
|
||||
centers:{
|
||||
left:0,
|
||||
top:0,
|
||||
},
|
||||
style:{
|
||||
left:0+"px",
|
||||
top:0+"px",
|
||||
right:"auto",
|
||||
bottom:"auto",
|
||||
width:'auto',
|
||||
height:'auto',
|
||||
zIndex:1,
|
||||
},
|
||||
transform:{
|
||||
scale:1,
|
||||
rotateZ:0,
|
||||
},
|
||||
designOpenrtionBtn:false
|
||||
this.designList = []
|
||||
this.exhibitionOpenrtionList = {
|
||||
single:[],
|
||||
overall:[],
|
||||
}
|
||||
this.printStyleList = {
|
||||
single:[],
|
||||
overall:[],
|
||||
}
|
||||
},
|
||||
closeModal(){
|
||||
@@ -1111,6 +1120,19 @@ export default defineComponent({
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.designOpenrtionMobile__delete{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 4rem;
|
||||
background: none;
|
||||
transform: translate(100%, -100%);
|
||||
height: 4rem;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.designOpenrtionMobile_rotote::after{
|
||||
position: absolute;
|
||||
content: "";
|
||||
|
||||
437
src/component/Detail/addDetails.vue
Normal file
437
src/component/Detail/addDetails.vue
Normal file
@@ -0,0 +1,437 @@
|
||||
<template>
|
||||
<a-modal
|
||||
class="addDetails_modal generalModel"
|
||||
v-model:visible="showPayOrder"
|
||||
:footer="null"
|
||||
width="50%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
wrapClassName="#app"
|
||||
:keyboard="false"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="addDetails_center">
|
||||
<div class="modal_title_text">
|
||||
<div>Add Details</div>
|
||||
<div class="modal_title_text_intro"></div>
|
||||
</div>
|
||||
<div class="exportCanvasBox_center">
|
||||
<div class="addDetails_center_btn addDetails_center_item" :class="{spread:spreadState}">
|
||||
<!-- <div @click="setOperation('')" class="addDetails_center_btn_item">
|
||||
<div>新增</div>
|
||||
</div> -->
|
||||
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
|
||||
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
|
||||
<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i>
|
||||
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
|
||||
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
|
||||
<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth">
|
||||
<div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exportCanvasBox_submit" @click="setSubmit">
|
||||
<div class="started_btn">
|
||||
submit
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div></div>
|
||||
</a-modal>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { formatTime } from "@/tool/util";
|
||||
import { setCookie, getCookie } from "@/tool/cookie";
|
||||
import { Modal, message } from "ant-design-vue";
|
||||
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
||||
import allOrder from "@/component/Pay/allOrder.vue";
|
||||
import creditsDetail from "@/component/Pay/creditsDetail.vue";
|
||||
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
|
||||
import { useI18n } from "vue-i18n";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
creditsDetail,
|
||||
allOrder,
|
||||
},
|
||||
emits: ['setSloganData'],
|
||||
setup(props,{emit}) {
|
||||
let presentState = ref('paypal');
|
||||
let showPayOrder = ref(false);
|
||||
let loadingShow = ref(false);
|
||||
let { t } = useI18n();
|
||||
let canvas = reactive({});
|
||||
let scale = 2;
|
||||
let ratio = [1,1]
|
||||
let exportWH = 512
|
||||
let canvasBtn = reactive({
|
||||
canvasState:'move',
|
||||
canvasPencilWidth:4,
|
||||
spreadState:false,
|
||||
})
|
||||
let canvasWH = ref(0);
|
||||
onMounted(()=>{
|
||||
})
|
||||
let exportUrl = ''
|
||||
let reverseCanvasState = ref([])//存放canvas操作
|
||||
let normalCanvasState = ref([])//存放canvas操作
|
||||
let canvasState = ref()//存放canvas操作
|
||||
let init = (data,index)=>{
|
||||
normalCanvasState.value = []
|
||||
reverseCanvasState.value = []
|
||||
showPayOrder.value = true;
|
||||
loadingShow.value = true
|
||||
scale = 2;
|
||||
ratio = [1,1]
|
||||
exportWH = 512
|
||||
nextTick(()=>{
|
||||
let canvasBox = document.querySelector(".addDetails_modal .exportCanvasBox_center");
|
||||
let height = canvasBox.offsetHeight;
|
||||
canvasBox.style.width = height+'px'
|
||||
canvasWH.value = height
|
||||
var canvasDom = document.createElement("canvas");
|
||||
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
|
||||
if(oldCanvasDom)oldCanvasDom.remove()
|
||||
canvasBox.appendChild(canvasDom);
|
||||
let img = new Image();
|
||||
|
||||
img.onload = function(){
|
||||
let wScale = 1
|
||||
let hScale = 1
|
||||
if(img.width>img.height){
|
||||
hScale = img.height/img.width
|
||||
exportWH = img.width
|
||||
}else{
|
||||
wScale = img.width/img.height
|
||||
exportWH = img.height
|
||||
}
|
||||
ratio = [wScale,hScale]
|
||||
canvas = new fabric.Canvas(canvasDom, {
|
||||
backgroundColor: "#FFF",
|
||||
width: canvasWH.value * wScale,
|
||||
height: canvasWH.value * hScale,
|
||||
isDrawingMode: false, // 开启绘图模式
|
||||
});
|
||||
scale = img.height/canvas.height
|
||||
|
||||
JSchangeType(canvas,'init')
|
||||
// 鼠标抬起事件
|
||||
canvas.on('mouse:up', function(event) {
|
||||
if(canvasBtn.canvasState != 'move'){
|
||||
updateCanvasState()
|
||||
}
|
||||
});
|
||||
fabric.Object.prototype.cornerSize = 10
|
||||
fabric.Object.prototype.transparentCorners = false
|
||||
exportUrl = data.path
|
||||
fabric.Image.fromURL(data.path, function(img) {
|
||||
// 设置背景图对象的宽度和高度与 canvas 相同
|
||||
img.scaleToWidth(canvas.width);
|
||||
img.scaleToHeight(canvas.height);
|
||||
|
||||
// 将背景图添加到 canvas 的底层
|
||||
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
|
||||
if(!fabric.Object.prototype.controls.deleteControl){
|
||||
JSSetRemoveImage(deleteObj)
|
||||
}else{
|
||||
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
|
||||
}
|
||||
updateCanvasState()
|
||||
|
||||
// img.selectable = false
|
||||
// canvas.add(img)
|
||||
},{ crossOrigin: "Anonymous" });
|
||||
|
||||
loadingShow.value = false
|
||||
setOperation('pencil')
|
||||
img.remove()
|
||||
}
|
||||
img.src = data.path
|
||||
|
||||
})
|
||||
}
|
||||
let clearCanvas = ()=>{
|
||||
canvasBtn.canvasState = 'move'
|
||||
canvasBtn.spreadState = false
|
||||
}
|
||||
let rgba = 'rgba(0, 0, 0, 1)'
|
||||
let brushIndicator = new fabric.Circle({
|
||||
radius:(canvasBtn.canvasPencilWidth/2),
|
||||
fill: '#fff',
|
||||
stroke: '#000',
|
||||
strokeWidth: 1,
|
||||
originX: 'center',
|
||||
originY: 'center',
|
||||
visible :true,
|
||||
left: -100,
|
||||
top: -100,
|
||||
erasable: false,
|
||||
});
|
||||
let setOperation = (str)=>{
|
||||
canvasBtn.canvasState = str
|
||||
if(str == 'move'){
|
||||
setMove()
|
||||
if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
|
||||
}else if(str == 'pencil'){
|
||||
setPencil()
|
||||
if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
|
||||
|
||||
}else if(str == 'eraser'){
|
||||
setEraser()
|
||||
if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
|
||||
}
|
||||
}
|
||||
let setMove = ()=>{
|
||||
canvas.isDrawingMode = false
|
||||
canvas.forEachObject((obj) =>obj.selectable = true);
|
||||
}
|
||||
let setPencil = ()=>{
|
||||
canvas.isDrawingMode = true//开启绘画模式
|
||||
canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
|
||||
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth);
|
||||
canvas.freeDrawingBrush.color = rgba
|
||||
brushIndicator.set('fill',rgba)
|
||||
canvas.freeDrawingBrush.isEraser = false
|
||||
}
|
||||
let setEraser = ()=>{
|
||||
canvas.isDrawingMode = true
|
||||
let eraser = new fabric.EraserBrush(canvas)
|
||||
canvas.freeDrawingBrush = eraser
|
||||
brushIndicator.set({fill: '#fff'});
|
||||
canvas.requestRenderAll();
|
||||
canvas.freeDrawingBrush.isEraser = true
|
||||
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth);
|
||||
}
|
||||
let deleteObj = ()=> {
|
||||
// if(!canvas.getActiveObjects()){
|
||||
// return
|
||||
// }
|
||||
let target = canvas.getActiveObjects()
|
||||
target.forEach((item)=>{
|
||||
canvas.fxRemove(item, {
|
||||
onComplete(){
|
||||
canvas.discardActiveObject(); // 丢弃当前选中的对象
|
||||
canvas.renderAll(); // 重新渲染 Canvas
|
||||
}
|
||||
})
|
||||
canvas.FX_DURATION = 300
|
||||
})
|
||||
}
|
||||
let setTimeOutWidth
|
||||
let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
|
||||
clearTimeout(setTimeOutWidth)
|
||||
setTimeOutWidth = setTimeout(()=>{
|
||||
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth)
|
||||
},300)
|
||||
}
|
||||
let updateCanvasState = () =>{
|
||||
const canvasAsJson = JSON.stringify(canvas.toJSON());
|
||||
normalCanvasState.value.push(canvasAsJson);
|
||||
}
|
||||
//撤回
|
||||
let historyState = (str)=> {
|
||||
if(str == 'reverse' && reverseCanvasState.value.length > 0){//反撤回
|
||||
let obj = reverseCanvasState.value.pop()
|
||||
// canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
|
||||
canvasState.value = obj
|
||||
normalCanvasState.value.push(obj);
|
||||
}else if(str == '' && normalCanvasState.value.length > 1){
|
||||
let obj = normalCanvasState.value.pop()
|
||||
canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
|
||||
reverseCanvasState.value.push(obj);
|
||||
}else{
|
||||
return
|
||||
}
|
||||
canvas.loadFromJSON(canvasState.value, () => {});
|
||||
}
|
||||
let setSubmit = ()=>{
|
||||
var allObjects = canvas.getObjects();
|
||||
if(allObjects.length == 0){
|
||||
return
|
||||
}
|
||||
var canvasDom = document.createElement("canvas");
|
||||
let exportCanvas = new fabric.Canvas(canvasDom, {
|
||||
backgroundColor: "rgba(255, 255, 255,1)",
|
||||
width: exportWH * ratio[0],
|
||||
height: exportWH * ratio[1],
|
||||
isDrawingMode: false, // 开启绘图模式
|
||||
});
|
||||
canvas.backgroundImage.clone((back)=>{
|
||||
back.set({
|
||||
scaleX:1,
|
||||
scaleY:1,
|
||||
left:back.left*scale,
|
||||
top:back.top*scale ,
|
||||
})
|
||||
exportCanvas.backgroundImage = back
|
||||
allObjects.forEach((item,index)=>{
|
||||
// let obj = fabric.util.object.clone(item);
|
||||
if(item.type == 'circle')return
|
||||
let obj
|
||||
item.clone((cloned)=>{
|
||||
obj = cloned
|
||||
})
|
||||
obj.set(
|
||||
{
|
||||
scaleX:(item.scaleX?item.scaleX:1)*scale,
|
||||
scaleY:(item.scaleY?item.scaleY:1)*scale,
|
||||
left:item.left*scale,
|
||||
top:item.top*scale,
|
||||
}
|
||||
)
|
||||
exportCanvas.add(obj)
|
||||
if(allObjects.length-1 == index){
|
||||
let data = exportCanvas.toDataURL('jpg')
|
||||
showPayOrder.value = false;
|
||||
clearCanvas()
|
||||
emit('setSloganData',data)
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
presentState,
|
||||
showPayOrder,
|
||||
loadingShow,
|
||||
t,
|
||||
...toRefs(canvasBtn),
|
||||
init,
|
||||
setOperation,
|
||||
setPencilWidth,
|
||||
historyState,
|
||||
setSubmit,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
|
||||
|
||||
cancelDsign(){
|
||||
this.showPayOrder = false
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
.addDetails_modal {
|
||||
.closeIcon {
|
||||
z-index: 2;
|
||||
}
|
||||
.addDetails_center{
|
||||
position: relative;
|
||||
// width: calc(512px / 2);
|
||||
// width: 256px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// height: calc(512px / 2);
|
||||
margin: 0 auto;
|
||||
.addDetails_center_item{
|
||||
// position: relative;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
|
||||
display: flex;
|
||||
border: 0.2rem solid #c4c4c4;
|
||||
width: 25rem;
|
||||
border-radius: 4px; /* 设置圆角半径 */
|
||||
flex-wrap: wrap;
|
||||
.addDetails_center_btn_item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
}
|
||||
.exportCanvasBox_center{
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
background: #e6e6e6;
|
||||
// overflow: scroll;
|
||||
.addDetails_center_btn{
|
||||
z-index: 2;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-135%);
|
||||
transition: all .3s;
|
||||
padding: 1rem 1.5rem;
|
||||
// position: relative;
|
||||
input{
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.icon-xiala{
|
||||
position: absolute;
|
||||
width: 2rem;
|
||||
bottom: 0;
|
||||
transform: translate(-50%, 90%);
|
||||
left: 50%;
|
||||
width: 6rem;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
&.icon-xiala::before{
|
||||
transition: all .3s;
|
||||
}
|
||||
&.btnRotate::before{
|
||||
transform: rotate(180deg);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
i{
|
||||
font-size: 2.5rem;
|
||||
cursor: pointer;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&.active{
|
||||
border: 1px solid;
|
||||
border-radius: .4rem;
|
||||
}
|
||||
}
|
||||
&.spread{
|
||||
transform: translate(-50%,0);
|
||||
}
|
||||
}
|
||||
.canvas-container{
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
}
|
||||
.exportCanvasBox_center:hover{
|
||||
.addDetails_center_btn{
|
||||
transform: translate(-50%,-101%);
|
||||
&.spread{
|
||||
transform: translate(-50%,0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.exportCanvasBox_submit{
|
||||
margin-top: 2.4rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -105,11 +105,11 @@
|
||||
<div class="habit_System_Designer_text_max">
|
||||
<div class="habit_System_Designer_text">
|
||||
|
||||
{{ $t('Habit.System') }}<span>({{systemDesigner.system}}%)</span>
|
||||
{{ $t('Habit.System') }}<span>({{systemDesigner.designer}}%)</span>
|
||||
</div>
|
||||
<div class="habit_System_Designer_text">
|
||||
|
||||
{{ $t('Habit.Designer') }}<span>({{systemDesigner.designer}}%)</span>
|
||||
{{ $t('Habit.Designer') }}<span>({{systemDesigner.system}}%)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -811,17 +811,18 @@ export default defineComponent({
|
||||
// },
|
||||
setWorkspaceStyle(data: any){
|
||||
this.workspaceItem.styleId = data
|
||||
this.putWorkspace(this.workspaceItem,'')
|
||||
this.putWorkspace(this.workspaceItem,this.workspaceItem.id)
|
||||
},
|
||||
setStyle(){
|
||||
this.openType.habit = false
|
||||
// this.openType.habit = false
|
||||
let habitSetStyle:any = this.$refs.habitSetStyle;
|
||||
habitSetStyle.habitSetStyleMask = true
|
||||
// habitSetStyle.habitSetStyleMask = true
|
||||
// habitSetStyle.styleList = this.styleList
|
||||
habitSetStyle.init();
|
||||
habitSetStyle.init(this.workspaceItem);
|
||||
},
|
||||
setParentData(){
|
||||
this.openType.habit = true
|
||||
// this.openType.habit = true
|
||||
// this.getDetail(this.workspaceItem.id)
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
:mask="habitSetStyleMask"
|
||||
:keyboard="false"
|
||||
:destroyOnClose="true"
|
||||
:zIndex="1050"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
@@ -23,7 +24,7 @@
|
||||
</div>
|
||||
<div class="habitSetStyle_content_bottom">
|
||||
<div class="content_bottom_item" v-for="item in styleList">
|
||||
<div class="content_bottom_item_border" :class="{active:item.id == selectStyleId}" @click="setItemSelect(item)">
|
||||
<div class="content_bottom_item_border" :class="{active:item.name == selectStyle.name}" @click="setItemSelect(item)">
|
||||
{{ item.name}}
|
||||
</div>
|
||||
</div>
|
||||
@@ -56,7 +57,11 @@ setup(props,{emit}) {
|
||||
let habitSetStyleMask:any = ref(false)//弹窗遮罩
|
||||
let habitSetStyleData:any = reactive({
|
||||
styleList:[],
|
||||
selectStyleId:'',
|
||||
selectStyle:{
|
||||
name:'',
|
||||
id:'',
|
||||
},
|
||||
selectStyleName:'',
|
||||
isShowMark:false,
|
||||
})
|
||||
let getStyleList = ()=>{
|
||||
@@ -75,11 +80,13 @@ setup(props,{emit}) {
|
||||
habitSetStyleData.isShowMark = false
|
||||
});
|
||||
}
|
||||
let init = ()=>{
|
||||
let init = (data:any)=>{
|
||||
habitSetStyle.value = true
|
||||
if(habitSetStyleData.styleList.length == 0){
|
||||
getStyleList()
|
||||
}
|
||||
habitSetStyleData.selectStyle.id = data.styleId
|
||||
habitSetStyleData.selectStyle.name = data.styleName
|
||||
// habitSetStyleData.selectStyleId = 'feng2'
|
||||
}
|
||||
let setCover = (item:any)=>{
|
||||
@@ -90,7 +97,7 @@ setup(props,{emit}) {
|
||||
let cleardata = ()=>{
|
||||
habitSetStyle.value = false
|
||||
habitSetStyleData.isShowMark = false
|
||||
setParentData()
|
||||
// setParentData()
|
||||
|
||||
}
|
||||
let setParentData = ()=>{
|
||||
@@ -101,11 +108,11 @@ setup(props,{emit}) {
|
||||
cleardata()
|
||||
}
|
||||
let setOk= ()=>{
|
||||
emit('setWorkspaceStyle',habitSetStyleData.selectStyleId)
|
||||
emit('setWorkspaceStyle',habitSetStyleData.selectStyle.id)
|
||||
cleardata()
|
||||
}
|
||||
let setItemSelect = (item:any)=>{
|
||||
habitSetStyleData.selectStyleId = item.id
|
||||
habitSetStyleData.selectStyle = item
|
||||
}
|
||||
return {
|
||||
habitSetStyle,
|
||||
@@ -161,6 +168,12 @@ methods: {
|
||||
|
||||
<style lang="less">
|
||||
.habitSetStyle_modal {
|
||||
&.generalModel{
|
||||
.ant-modal-body {
|
||||
height: calc(55rem*1.2);
|
||||
}
|
||||
}
|
||||
|
||||
.habitSetStyle_content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -210,6 +210,7 @@ export default defineComponent({
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
resolve(img)
|
||||
img.remove()
|
||||
};
|
||||
img.onerror = reject;
|
||||
img.src = url;
|
||||
|
||||
@@ -206,6 +206,7 @@ export default defineComponent({
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
resolve(img)
|
||||
img.remove()
|
||||
};
|
||||
img.onerror = reject;
|
||||
img.src = url;
|
||||
|
||||
Reference in New Issue
Block a user