aida_front/src/component/Detail/DesignDetailEnd.vue

<template>
	<div class="detail_modal_body_result">
		<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 class="result_apparel_print_img">
				<img v-show="type_==1" class="result_appare_img" :src="sketchImg?.path?sketchImg?.path:current?.path" :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 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>
				<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 v-if="!color?.gradient" class="color_content" :style="{'background-color':`rgba(${color.rgba?.r},${color.rgba?.g},${color.rgba?.b},${color.rgba?.a})`}">
						</div>
						<div class="color_content" v-else :style="{height:'100%','background-image':color?.gradient?`linear-gradient(${color?.gradient.angle}deg,${setGradient(color?.gradient)}`:'none'}"></div>
						<div v-if="!color?.gradient" 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_ == 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?.length != 0 || printsList.length != 0 || exhibitionList.print.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 && (elementsList.length != 0 || exhibitionList.elements.length != 0)" @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" />
	</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 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,
		DesignElementsOperation,DesignPrintMobile,sketchCategory
    },
    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 designTypeList = inject('designTypeList')//父组件传过来的数据
		let previewShow = ref(false)
		//印花

		//颜色
		// let colorList = ref([{}])
		// let colorList = ref([{},{},{},{},{},{},{},{},{}])
        let colorList = inject('colorList')//父组件传过来的数据
        let selectIndex = inject('selectIndex')//父组件传过来的数据
		//加载中
		let loadingShow = ref(false)

		let exhibitionList = inject('exhibitionList')
		let {t} = useI18n()
		let printsList = ref([])
		let elementsList = ref([
		
		])
        return{
			store,
			current,
			setRevocation,
			sketchImg,
			driver__,
			moible,
			designItemDetail,
			currentIndex,
			designTypeList,
			previewShow,
			type_,
			colorList,
			selectIndex,
			loadingShow,
			exhibitionList,
			t,
			printsList,
			elementsList,
        }
    },
    data(){
        return{

			//颜色
			getRGBA:{},
			selectColor:{},
        }
    },
	computed:{
		setGradient(){
			return (gradient)=>{
				let gradientStr = ''
				gradient.gradientList.sort((a, b) => {
					let aArr = a.left.split('%')[0]
					let bArr = b.left.split('%')[0]
					return aArr - bArr;
				});
				gradient.gradientList.forEach((item,index)=>{
					let str = ','
					if(gradient.gradientList.length == index+1)str = ''
					gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}` 

				})
				return `${gradientStr}`
			}
		}
	},
	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
			if(num == 2){
				this.setExhibitionType('print')
			}else if(num == 4){
				this.setExhibitionType('elements')
			}
		},
		clearModal(){
			this.elementsList = []
			this.printsList = []
		},
		//模型
		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
		},
		//印花
		setExhibitionType(str){
			this.exhibitionList[str].forEach((item,index)=>{
				if(!item.categoryValue){
					this.designTypeList.forEach((typeItem)=>{
						if(item.level2Type == typeItem.value){
							item.categoryValue = typeItem.value
							item.category = typeItem.name
						}

					})
				}
			})
		},
		
		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){
			this.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){
				this.$parent.selectColor = color
			}else{
				this.$parent.selectColor.isClick = {}
			}
			//判断是否对一个颜色重复点击
			
            // this.$parent.selectColor.tcxColor = ''
			// this.$parent.selectColor.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
		},
		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))
			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
					}
				}
			})
			index = index? index:0
			if(!this.current.id){
				if(index){
					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,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.prints = []
			}else if(this.type_ == 3){
				if(this.colorList[this.selectIndex]?.rgba?.r == undefined){
					message.info(this.t('DesignDetailEnd.jsContent2'))
					return
				}
				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
				gradient.colorImg = setGradual(gradient,320,700)
				data.designSingleItemDTOList[index].gradient = gradient
			}else{
				delete data.designSingleItemDTOList[index].gradient
			}
			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
								if(item.gradient){
									designItemDetail.clothes[index].gradient = item.gradient
								}else{
									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
								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);
		align-content: flex-start;
		&.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%;
			}
			
		}
	}
	//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;
		&.active{
			opacity: .5;
			pointer-events:none;
		}
	}
}

   
</style>