aida_front/src/component/Detail/DesignDetailEnd.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">{{ $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 ref="DesignPrintOperation"></DesignPrintOperation>
	<DesignPrintOperationMobile ref="DesignPrintOperationMobile"></DesignPrintOperationMobile>
	</div>
	<div class="mark_loading" v-show="loadingShow">
		<a-spin size="large" />
	</div>
</template>
<script>
import { defineComponent,computed,ref, 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 {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 overallSingle = ref(false)
		let systemDesignerPercentage = ref(30)

		//颜色
		let colorList = ref([{},{},{},{},{},{},{},{}])

		//加载中
		let loadingShow = ref(false)

		let {t} = useI18n()
        return{
			store,
			current,
			setRevocation,
			sketchImg,
			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
		},
		//印花
		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()
			}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} : {}
            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))
			designItemDetail.clothes.forEach((v,ind)=>{
				if(v.id == this.current.id){
					index = ind
				}
			})
			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].printObject.prints = []
				// this.current?.printObject?.path == null ? [] : [{
				// 	location:[0,0],
				// 	angle:0,
				// 	priority:1,
				// 	path:this.current?.printObject?.path?this.current.printObject.path :'',
				// 	minIOPath:this.current?.printObject?.minIOPath?this.current.printObject.minIOPath :'',
				// }],
				// data.designSingleItemDTOList[index].printObject.ifSingle = false
			}else if(this.type_ == 2){
				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) => {
					designItemDetail.currentFullBodyView = rv.currentFullBodyView
					designItemDetail.clothes[index].color = rv.clothes[index].color
					designItemDetail.clothes[index].printObject = rv.clothes[index].printObject
					designItemDetail.clothes[index].layersObject = rv.clothes[index].layersObject
					designItemDetail.clothes[index].minIOPath = rv.clothes[index].minIOPath
					designItemDetail.clothes[index].path = rv.clothes[index].path
					designItemDetail.ifSubmit = true
					// rv.clothes[0].layersObject.forEach((v)=>{
					// 	designItemDetail.clothes[index].layersObject[0].imageUrl = rv.clothes[0].layersObject[0].imageUrl
					// 	designItemDetail.clothes[index].layersObject[0].maskUrl = rv.clothes[0].layersObject[0].maskUrl
					// 	designItemDetail.clothes[index].layersObject[1].imageUrl = rv.clothes[0].layersObject[1].imageUrl
					// 	designItemDetail.clothes[index].layersObject[1].maskUrl = rv.clothes[0].layersObject[1].maskUrl
					// })
					designItemDetail.clothes.forEach((item,index)=>{
						let a
						// console.log(this.store.state.DesignDetailModule.designItemDetail.clothes[index].layersObject[0].id);
						if(item.layersObject[0].imageCategory.indexOf("back") == -1){
							a = item.layersObject[0]
							item.layersObject[0] = item.layersObject[1]
							item.layersObject[1] = a
						}
						item.layersObject[0].id = this.store.state.DesignDetailModule.designItemDetail.clothes[index].layersObject[0].id
						item.layersObject[1].id = this.store.state.DesignDetailModule.designItemDetail.clothes[index].layersObject[1].id
					})
					this.loadingShow = false
					this.store.commit("setDesignItemDetail", designItemDetail);
					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>