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?.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">
					<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-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" :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>
	<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 designItemDetail = inject('designItemDetail')//父组件传过来的数据
        let currentIndex = inject('currentIndex')//父组件传过来的数据
		let previewShow = ref(false)
		//印花
		let overallSingle = ref(false)
		let systemDesignerPercentage = ref(30)

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

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

		let {t} = useI18n()
        return{
			store,
			current,
			setRevocation,
			sketchImg,
			driver__,
			moible,
			designItemDetail,
			currentIndex,
			previewShow,
			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.id = v.id
			this.sketchImg.path = v.url
			this.sketchImg.minIOPath = v.minIOPath
			this.sketchImg.type = v.level2Type
			this.sketchImg.designType = v.designType
		},
		//印花
		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(color.rgba?.r){
				hex = parent.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b])
			}else{
				this.$parent.selectColor = {}
				return
			}
			//判断是否对一个颜色重复点击
			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
			}
			
            this.$parent.selectColor =  {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}`
			this.current.color = string
			designItemDetail.clothes.forEach((element,index) => {
				if(element.id == this.current.id){
					designItemDetail.clothes[index] = this.current
				}
			});
		},
		hasDuplicateId(arr) {
			const set = new Set();
			for (let i = 0; i < arr.length; i++) {
				const id = arr[i].id;
				if (set.has(id)) {
				return true;
				}
				set.add(id);
			}
			return false;
		},
		soleId(arr,index){
			let randomNum = Math.floor(100 + Math.random() * 900);
			// if(this.sketchImg.id_){
			if(this.sketchImg.id){
				if(this.sketchImg.id == this.sketchImg.id_){
					arr[index].id = Number(this.sketchImg.id_+(randomNum+""))
					arr[index].changed = true
					if(this.hasDuplicateId(arr)){
						this.sketchImg.id_ = this.sketchImg.id
						this.soleId(arr,index)
					}
				}else{
					arr[index].id = this.sketchImg.id_
				}
			}else{
				arr[index].id = this.current.id
			}
			// arr[index].id = this.sketchImg.id_? this.sketchImg.id_:this.current.id
			return arr
		},
		//提交
		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 = this.soleId(data.designSingleItemDTOList,index)
				this.sketchImg.id_ = data.designSingleItemDTOList[index].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){
				if(this.$parent.selectColor?.rgba?.r == undefined){
					message.info(this.t('DesignDetailEnd.jsContent2'))
					return
				}
				let color = `${this.$parent.selectColor.rgba.r} ${this.$parent.selectColor.rgba.g} ${this.$parent.selectColor.rgba.b}`
				data.designSingleItemDTOList[index].color = color
			}
			data.designSingleItemDTOList[index].designType = this.sketchImg.designType?this.sketchImg.designType:this.current.designType
			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].designType = item.designType
								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].changed = item.changed?item.changed:false
								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: calc(1rem*1.2);
		margin-top: calc(1rem*1.2);
		&.upload_title:nth-child(1){
			margin-top: 0;
		}
		span{
			margin-left: calc(1rem*1.2);
			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: calc(35rem*1.2);
				margin-top: calc(2rem*1.2);
				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: calc(14rem*1.2);
		>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: calc(8rem*1.2);
				margin: auto;
				display: block;
			 }
			 .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;
				.icon-shanchu{
					font-size: calc(1.6rem*1.2);
					color: #fff;
				}
			}
			&:hover .delete_file_block{
				display: block;
			}
		}
		.print_right{
			
			.habit_Overal_Single {
				display: flex;
				align-items: center;
				justify-content: center;
				// margin: 2rem*1.2) 0;
				transform: scale(.8);
				// margin: 3rem*1.2) 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 calc(1rem*1.2);
					background-color: #efefef;
				}
				:deep(.ant-switch-checked) {
							background-color: #000;
						}
			}
			.habit_System_Designer {
				margin-top: calc(4rem*1.2);
				transform: scale(.8);

				:deep(.ant-slider-track),
				:deep(.ant-slider-rail) {
					height: calc(.6rem*1.2);
					background-color: #e1e1e1;
					border-radius: calc(0.5rem*1.2);
				}
				: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: calc(2rem*1.2);
		&.modal_img::-webkit-scrollbar {
			display: none;
		}
		.modal_img_item{
			margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
			position: relative;
			// cursor: pointer;
			border: calc(0.1rem*1.2) solid #DCDCEC;
			//放8个
			height: calc(8.5rem*1.2);
			width: calc(7rem*1.2);
			// height: 32rem*1.2);
			// width: 25rem*1.2);
			overflow: hidden;
			@media screen and (max-width: 1440px) { 
				&.modal_img_item {
					line-height: 1.2;
				}  
			} 
			box-sizing: border-box;
			.color_content{
				width: 100%;
				//放8个
				height: calc(4rem*1.2);
				// height: 25rem*1.2);
			}
			.color_content_body{
				.color_des{
					// font-size: 1.8rem*1.2);
					font-weight: 600;
					white-space: nowrap; 
					width: 100%; 
					overflow: hidden;
					text-overflow:ellipsis;
				}
			}
			.select_upload_color{
				border: calc(0.1rem*1.2) solid #343579;
			}
			.upload_color{
				width: 100%;
				height: 100%;
			}
			
		}
	}
	.subitOkPreviewBtn{
		bottom: calc(4rem*1.2);
		position: absolute;
		&.active{
			opacity: .5;
			pointer-events:none;
		}
	}
}

   
</style>