push Develop
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user