注释渐变色功能和作品广场

src/component/Detail/DesignDetailEnd.vue

@@ -73,9 +73,10 @@
 			<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 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_body">
+						<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>
@@ -103,7 +104,7 @@ 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 {isMoible,setGradual} from '@/tool/util'
 import { useI18n } from 'vue-i18n';
 
 export default defineComponent({
@@ -128,8 +129,9 @@ export default defineComponent({
 
 		//颜色
 		// let colorList = ref([{}])
-		let colorList = ref([{},{},{},{},{},{},{},{},{}])
-
+		// let colorList = ref([{},{},{},{},{},{},{},{},{}])
+        let colorList = inject('colorList')//父组件传过来的数据
+        let selectIndex = inject('selectIndex')//父组件传过来的数据
 		//加载中
 		let loadingShow = ref(false)
 
@@ -148,6 +150,7 @@ export default defineComponent({
 			overallSingle,
 			systemDesignerPercentage,
 			colorList,
+			selectIndex,
 			loadingShow,
 			t,
         }
@@ -156,11 +159,29 @@ export default defineComponent({
         return{
 
 			//颜色
-            selectIndex:0,//选中的文件索引
 			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}`
+			}
+		}
+	},
     methods:{
 		//点击判断
 		init(num){
@@ -210,24 +231,19 @@ export default defineComponent({
 
 		//颜色
 		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])
+				this.$parent.selectColor = color
 			}else{
-				this.$parent.selectColor = {}
-				return
+				this.$parent.selectColor.isClick = {}
 			}
 			//判断是否对一个颜色重复点击
-			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 = ''
+            // this.$parent.selectColor.tcxColor = ''
+			// this.$parent.selectColor.pantongName = ''
         },
 		setSelectColorItem(color){
 			let designItemDetail = this.store.state.DesignDetailModule.designItemDetail
@@ -304,13 +320,20 @@ export default defineComponent({
 				data.designSingleItemDTOList[index].printObject.ifSingle = false
 				data.designSingleItemDTOList[index].printObject.prints = []
 			}else if(this.type_ == 3){
-				if(this.$parent.selectColor?.rgba?.r == undefined){
+				if(this.colorList[this.selectIndex]?.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}`
+				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
 			}
+			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
@@ -321,6 +344,11 @@ export default defineComponent({
 						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].layersObject = item.layersObject
 								designItemDetail.clothes[index].minIOPath = item.minIOPath