519 lines
15 KiB
Vue
519 lines
15 KiB
Vue
<template>
|
|
<div class="detail_modal_body_result">
|
|
<div v-show="type_ == 1 || type_ == 2" 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?.id_?sketchImg?.path:current?.path" :title="current?.type">
|
|
<!-- <img v-show="type_==2" class="result_print_img" :src="current?.path" :title="current?.type" @click="setPrint"> -->
|
|
<div 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 v-show="type_ == 3">
|
|
<div class="result_color upload_title">
|
|
<i class="color_edit fi fi-bs-comments"></i>
|
|
<span>{{ $t('DesignDetailEnd.NewColor') }}</span>
|
|
</div>
|
|
<div class="modal_img">
|
|
<div class="modal_img_item" v-for="color,index in colorList" :key="color" >
|
|
<div :title="color?.name?color?.name:''" @click="selectColorItem(index,color)" @dblclick="setSelectColorItem(color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`}">
|
|
<!-- <div class="color_content" :style="{background:`#6c6cac`}"></div> -->
|
|
<div class="color_content" :style="{'background-color':`rgba(${color.rgba?.r},${color.rgba?.g},${color.rgba?.b},${color.rgba?.a})`}">
|
|
</div>
|
|
<div class="color_content_body">
|
|
<div class="color_des">{{color.tcx}}</div>
|
|
<div class="color_des">{{ color.name }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-show="type_ == 1 || type_ == 3" @click.stop="setPreview" class="subitOkPreviewBtn">{{ $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 && current?.printObject?.prints?.[0]?.path == null" @click.stop="setPreview" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.preview') }}</div>
|
|
|
|
<DesignPrintOperation v-if="!moible" ref="DesignPrintOperation"></DesignPrintOperation>
|
|
<DesignPrintOperationMobile v-else ref="DesignPrintOperationMobile"></DesignPrintOperationMobile>
|
|
</div>
|
|
<div class="mark_loading" v-show="loadingShow">
|
|
<a-spin size="large" />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { defineComponent,computed,ref, nextTick,h ,inject} from 'vue'
|
|
import Draggable from 'vuedraggable'
|
|
import { Https } from "@/tool/https";
|
|
import { useStore } from "vuex";
|
|
import { Sketch} from '@ans1998/vue3-color'
|
|
import DesignPrintOperation from './DesignPrintOperation.vue';
|
|
import DesignPrintOperationMobile from './DesignPrintOperationMobile.vue';
|
|
import { message,Upload} from 'ant-design-vue';
|
|
import { openGuide,driverObj__ } from "@/tool/guide";
|
|
import {isMoible} from '@/tool/util'
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
export default defineComponent({
|
|
props: ["msg"],
|
|
components:{
|
|
Draggable,Sketch,DesignPrintOperation,DesignPrintOperationMobile
|
|
},
|
|
setup(prop) {
|
|
const store = useStore();
|
|
let type_ = ref(0);
|
|
let current = inject('current')//父组件传过来的数据
|
|
let setRevocation = inject('setRevocation')//父组件传过来的数据
|
|
let sketchImg = ref({})
|
|
let driver__ = inject('driver__')//父组件传过来的数据
|
|
let moible = inject('moible')//父组件传过来的数据
|
|
|
|
//印花
|
|
let overallSingle = ref(false)
|
|
let systemDesignerPercentage = ref(30)
|
|
|
|
//颜色
|
|
let colorList = ref([{},{},{},{},{},{},{},{}])
|
|
|
|
//加载中
|
|
let loadingShow = ref(false)
|
|
|
|
let {t} = useI18n()
|
|
return{
|
|
store,
|
|
current,
|
|
setRevocation,
|
|
sketchImg,
|
|
driver__,
|
|
moible,
|
|
type_,
|
|
overallSingle,
|
|
systemDesignerPercentage,
|
|
colorList,
|
|
loadingShow,
|
|
t,
|
|
}
|
|
},
|
|
data(){
|
|
return{
|
|
|
|
//颜色
|
|
selectIndex:0,//选中的文件索引
|
|
getRGBA:{},
|
|
selectColor:{},
|
|
}
|
|
},
|
|
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?.scale?this.current?.printObject?.scale:.3*100
|
|
},
|
|
//模型
|
|
setSketchImg(v){
|
|
this.sketchImg.id_ = v.id
|
|
this.sketchImg.path = v.url
|
|
this.sketchImg.minIOPath = v.minIOPath
|
|
this.sketchImg.type = v.level2Type
|
|
},
|
|
//印花
|
|
systemDesigner(num) {
|
|
this.current.printObject.scale = num
|
|
},
|
|
setOveralSingle(){
|
|
this.current.printObject.ifSingle = this.overallSingle
|
|
},
|
|
formatter(value) {
|
|
return `${value*3}%`;
|
|
},
|
|
setPrint(){
|
|
if(this.current?.printObject?.prints?.[0]?.path){
|
|
let DesignPrintOperation = isMoible() ? this.$refs.DesignPrintOperationMobile : this.$refs.DesignPrintOperation
|
|
DesignPrintOperation.init()
|
|
if(this.driver__.driver){
|
|
nextTick().then(()=>{
|
|
driverObj__.moveNext();
|
|
})
|
|
}
|
|
}else{
|
|
message.info(this.t('DesignDetailEnd.jsContent1'));
|
|
}
|
|
|
|
},
|
|
deleteFile(){
|
|
this.current.printObject = {}
|
|
},
|
|
|
|
|
|
//颜色
|
|
selectColorItem(index,color){
|
|
let hex
|
|
let parent = this.$parent
|
|
this.selectIndex = index
|
|
this.$parent.selectIndex = index
|
|
if(this.$parent.selectColor.rgba.r == color?.rgba?.r && this.$parent.selectColor.rgba.g == color?.rgba?.g && this.$parent.selectColor.rgba.b == color?.rgba?.b){
|
|
return
|
|
}
|
|
if(color.rgba?.r){
|
|
hex = parent.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b,color.rgba.a])
|
|
}else{
|
|
hex = '#FFFFFF'
|
|
}
|
|
this.$parent.selectColor = color?.rgba?.r ? {rgba:{r:color.rgba?.r,g:color.rgba?.g,b:color.rgba?.b,a:color.rgba?.a},hex:hex} : {rgba:{r:255,g:255,b:255,a:1},hex:hex}
|
|
this.$parent.tcxColor = ''
|
|
this.$parent.pantongName = ''
|
|
},
|
|
setSelectColorItem(color){
|
|
let designItemDetail = this.store.state.DesignDetailModule.designItemDetail
|
|
let string = `${color.rgba.r},${color.rgba.g},${color.rgba.b},${color.rgba.a}`
|
|
this.current.color = string
|
|
designItemDetail.clothes.forEach((element,index) => {
|
|
if(element.id == this.current.id){
|
|
designItemDetail.clothes[index] = this.current
|
|
}
|
|
});
|
|
},
|
|
|
|
//提交
|
|
setPreview(){
|
|
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
|
let index
|
|
let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
|
|
// let bor = false
|
|
let zIndex = 10
|
|
designItemDetail.clothes.forEach((v,ind)=>{
|
|
if(v.id == this.current.id){
|
|
index = ind
|
|
// bor = true
|
|
}
|
|
if(v.priority){
|
|
if(zIndex < v.priority){
|
|
zIndex = v.priority
|
|
}
|
|
}
|
|
})
|
|
if(!this.current.id){
|
|
data.designSingleItemDTOList[index].priority = zIndex+=1
|
|
|
|
}
|
|
if(this.type_ == 1){
|
|
if(data.designSingleItemDTOList[index].path != this.sketchImg.minIOPath && this.sketchImg.id_){
|
|
data.designSingleItemDTOList[index].offset = [0,0]
|
|
data.designSingleItemDTOList[index].scale = 1
|
|
}
|
|
data.designSingleItemDTOList[index].id = this.sketchImg.id_? this.sketchImg.id_:this.current.id_
|
|
data.designSingleItemDTOList[index].path =this.sketchImg.minIOPath? this.sketchImg.minIOPath: this.current.minIOPath
|
|
data.designSingleItemDTOList[index].type =this.sketchImg.type? this.sketchImg.type: this.current.type
|
|
}else if(this.type_ == 2){
|
|
data.designSingleItemDTOList[index].printObject.ifSingle = false
|
|
data.designSingleItemDTOList[index].printObject.prints = []
|
|
}else if(this.type_ == 3){
|
|
let color = `${this.$parent.selectColor.rgba.r} ${this.$parent.selectColor.rgba.g} ${this.$parent.selectColor.rgba.b}`
|
|
data.designSingleItemDTOList[index].color = color
|
|
}
|
|
|
|
data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
|
|
this.loadingShow = true
|
|
Https.axiosPost(Https.httpUrls.designSingle, data).then(
|
|
(rv) => {
|
|
let bor = false
|
|
rv.clothes.forEach((item)=>{
|
|
if(item.type != 'body'){
|
|
if(item.id == designItemDetail.clothes[index].id || item.id == this.sketchImg.id_){
|
|
designItemDetail.clothes[index].color = item.color
|
|
designItemDetail.clothes[index].layersObject = item.layersObject
|
|
designItemDetail.clothes[index].minIOPath = item.minIOPath
|
|
designItemDetail.clothes[index].path = item.path
|
|
designItemDetail.clothes[index].id = item.id
|
|
designItemDetail.clothes[index].type = item.type
|
|
designItemDetail.clothes[index].printObject = item.printObject
|
|
bor = true
|
|
}else{
|
|
|
|
}
|
|
if(!this.current.id ){
|
|
designItemDetail.clothes[index].priority = zIndex
|
|
}
|
|
}
|
|
})
|
|
|
|
designItemDetail.currentFullBodyView = rv.currentFullBodyView
|
|
designItemDetail.ifSubmit = true
|
|
designItemDetail.clothes.forEach((item,index)=>{
|
|
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 = designItemDetail.clothes[index].layersObject[0].id
|
|
item.layersObject[1].id = designItemDetail.clothes[index].layersObject[1].id
|
|
})
|
|
this.loadingShow = false
|
|
this.store.commit("setDesignItemDetail", designItemDetail);
|
|
this.store.commit("setDesignPreviewData", data);
|
|
this.setRevocation(designItemDetail,data)
|
|
}
|
|
).catch(res=>{
|
|
this.loadingShow = false
|
|
});
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.detail_modal_body_result{
|
|
width: 26%;
|
|
position: relative;
|
|
i{
|
|
font-size: var(--aida-fsize1-8);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.upload_title{
|
|
display: flex;
|
|
margin-bottom: 1rem;
|
|
margin-top: 1rem;
|
|
&.upload_title:nth-child(1){
|
|
margin-top: 0;
|
|
}
|
|
span{
|
|
margin-left: 1rem;
|
|
font-size: var(--aida-fsize1-8);
|
|
color: #000000;
|
|
}
|
|
}
|
|
//模型和印花
|
|
.result_apparel_print{
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.result_apparel_print_img{
|
|
position: relative;
|
|
flex: 1;
|
|
text-align: center;
|
|
img{
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
width: auto;
|
|
height: auto;
|
|
max-height: 35rem;
|
|
margin-top: 2rem;
|
|
width: 100%;
|
|
object-fit: contain;
|
|
}
|
|
.result_print_img{
|
|
transform: scale(.85);
|
|
transform-origin: center top;
|
|
cursor: pointer;
|
|
img:nth-child(1){
|
|
position: absolute;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
//印花
|
|
.result_print{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 14rem;
|
|
>div{
|
|
display: flex;
|
|
flex-direction: column;
|
|
.print_left,.print_right{
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
.print_left{
|
|
position: relative;
|
|
img{
|
|
width: auto;
|
|
height: 8rem;
|
|
margin: auto;
|
|
display: block;
|
|
}
|
|
.delete_file_block{
|
|
display: none;
|
|
width: 3.2rem;
|
|
height: 3.2rem;
|
|
background: rgba(0,0,0,0.6);
|
|
border-radius: 0.4rem;
|
|
position: absolute;
|
|
top: 0.9rem;
|
|
right: 0.9rem;
|
|
text-align: center;
|
|
line-height: 3.2rem;
|
|
left: auto;
|
|
.icon-shanchu{
|
|
font-size: 1.6rem;
|
|
color: #fff;
|
|
}
|
|
}
|
|
&:hover .delete_file_block{
|
|
display: block;
|
|
}
|
|
}
|
|
.print_right{
|
|
|
|
.habit_Overal_Single {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
// margin: 2rem 0;
|
|
transform: scale(.8);
|
|
// margin: 3rem 0;
|
|
.habit_Overal_Single_text {
|
|
font-weight: 600;
|
|
color: rgba(0, 0, 0, 0.5);
|
|
&.active {
|
|
color: rgba(0, 0, 0, 0.7);
|
|
// font-weight: 900;
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
:deep(.ant-switch) {
|
|
margin: 0 1rem;
|
|
background-color: #efefef;
|
|
}
|
|
:deep(.ant-switch-checked) {
|
|
background-color: #000;
|
|
}
|
|
}
|
|
.habit_System_Designer {
|
|
margin-top: 4rem;
|
|
transform: scale(.8);
|
|
|
|
:deep(.ant-slider-track),
|
|
:deep(.ant-slider-rail) {
|
|
height: .6rem;
|
|
background-color: #e1e1e1;
|
|
border-radius: 0.5rem;
|
|
}
|
|
:deep(.ant-slider .ant-slider-handle:not(.ant-tooltip-open)),
|
|
:deep(.ant-slider-handle) {
|
|
background-color: #2d2e76 !important;
|
|
border: none !important;
|
|
}
|
|
:deep(.ant-slider-handle:hover) {
|
|
box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
//颜色
|
|
.modal_img{
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding-left: 2rem;
|
|
&.modal_img::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.modal_img_item{
|
|
margin: 0 1rem 1rem 0;
|
|
position: relative;
|
|
cursor: pointer;
|
|
border: 0.1rem solid #DCDCEC;
|
|
height: 8.5rem;
|
|
width: 7rem;
|
|
overflow: hidden;
|
|
@media screen and (max-width: 1440px) {
|
|
&.modal_img_item {
|
|
line-height: 1.2;
|
|
}
|
|
}
|
|
box-sizing: border-box;
|
|
.color_content{
|
|
width: 100%;
|
|
height: 4rem;
|
|
}
|
|
.color_content_body{
|
|
.color_des{
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-overflow:ellipsis;
|
|
}
|
|
}
|
|
.select_upload_color{
|
|
border: 0.1rem solid #343579;
|
|
}
|
|
.upload_color{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
}
|
|
}
|
|
.subitOkPreviewBtn{
|
|
bottom: 4rem;
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
|
|
</style> |