From 2c5775e77c1bfc39abd0b90cc81a744676599b1f Mon Sep 17 00:00:00 2001
From: X1627315083 <1627315083@qq.com>
Date: Wed, 24 Apr 2024 14:37:51 +0800
Subject: [PATCH] fix

---
 src/component/HomePage/ColorboardUpload.vue | 48 +++++++++++++++++----
 1 file changed, 39 insertions(+), 9 deletions(-)

diff --git a/src/component/HomePage/ColorboardUpload.vue b/src/component/HomePage/ColorboardUpload.vue
index 93d8342e..1ffdbd0d 100644
--- a/src/component/HomePage/ColorboardUpload.vue
+++ b/src/component/HomePage/ColorboardUpload.vue
@@ -6,7 +6,7 @@
 			</div>
 			<div class="modal_img">
 				<div class="modal_img_item" v-for="color,index in colorList" :class="[ index == 1?'Guide_1_11_1':'',driver__.driver?'showEvents':'']" :key="color" >
-					<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`,'background-image':`linear-gradient(${gradient.angle}deg,${setGradient(gradient)})`}">
+					<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`,'background-image':color?.gradient?`linear-gradient(${color?.gradient?.angle}deg,${setGradient(color.gradient)})`:'none'}">
 					</div>
 				</div>
 				<div>
@@ -49,7 +49,7 @@
 								</div>
 							</div>
 						</div> -->
-						<div class="color_setting_operate">
+						<div class="color_setting_operate" v-show="gradientShow">
 							<div class="color_setting_operate_item color_setting_operate_control">
 								<div class="operate_item_box">
 									<div>线性</div>
@@ -190,6 +190,7 @@ export default defineComponent({
 			angle:45,
 			selectIndex:-1,
 		})
+		let gradientShow = ref(false)
         return {
             fileList,
             colorList,
@@ -198,6 +199,7 @@ export default defineComponent({
 			driver__,
 			t,
 			gradient,
+			gradientShow,
         }
     },
     watch:{
@@ -210,11 +212,9 @@ export default defineComponent({
         // },
 		selectColor:{
 			handler(newVal,oldVal){
-				console.log(newVal);
 				this.colorList[this.selectIndex] = newVal.rgba
 				let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
-				console.log(newVal);
-				if(this.gradient.selectIndex>-1){
+				if(this.gradient.selectIndex>-1 && this.gradientShow){
 					this.gradient.gradientList[this.gradient.selectIndex].color = `rgb(${newVal.rgba.r},${newVal.rgba.g},${newVal.rgba.b})`
 					this.gradient.gradientList[this.gradient.selectIndex].rgba = {
 						r:newVal.rgba.r,
@@ -222,7 +222,12 @@ export default defineComponent({
 						b:newVal.rgba.b,
 						a:1,
 					}
-					console.log(this.gradient);
+				}
+				this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
+				if(this.gradientShow){
+					// this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
+				}else{
+					this.colorList[this.selectIndex].gradient = ''
 				}
 				this.setColorboardList(colorList)
 				// this.clearSelectColor()
@@ -251,8 +256,10 @@ export default defineComponent({
                 return data
             }
         },
-		setGradient(gradient){
+		setGradient(){
+			// return this.setGradientAngle(gradient)
 			return (gradient)=>{
+				console.log(gradient,'222');
 				let gradientStr = ''
 				gradient.gradientList.sort((a, b) => {
 					let aArr = a.left.split('%')[0]
@@ -305,8 +312,30 @@ export default defineComponent({
 		const backIcon = document.createElement('div');
 		backIcon.classList.add('vc-sketch-color-wrap')
 		let dropperDom = document.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
+		let colorDom = document.querySelector('.colorboard_upload_modal .vc-chrome-controls .vc-chrome-active-color')
+		// console.log(colorDom);
 		dropperDom.appendChild(backIcon);
-		backIcon.addEventListener('click',async ()=>{
+		colorDom.addEventListener('click',()=>{
+			// this.colorList[this.selectIndex]
+			console.log(123123123123);
+			this.gradient.selectIndex = 0
+			this.gradientShow = !this.gradientShow
+			if(this.gradientShow){
+				if(this.selectColor.rgba.r){
+					this.gradient.gradientList[this.gradient.selectIndex].rgba = {
+						r:this.selectColor.rgba.r,
+						g:this.selectColor.rgba.g,
+						b:this.selectColor.rgba.b,
+						a:1,
+					}
+				}
+				
+				this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
+			}else{
+				this.colorList[this.selectIndex].gradient = ''
+			}
+		})
+		backIcon.addEventListener('click', async ()=>{
 			try {
 				const dropper = new EyeDropper();
 				const result = await dropper.open();
@@ -322,7 +351,7 @@ export default defineComponent({
 			} catch (e) {
 				message.info(this.t('ColorboardUpload.jsContent1'))
 			}
-		},false)
+		})
 		// this.clearSelectColor()
 		// if ("EyeDropper" in window) {
 		// 	console.log(true);
@@ -345,6 +374,7 @@ export default defineComponent({
 		},
         //选择不同的色块
         selectColorItem(index,color){
+			this.gradientShow = false
 			let hex
 			if(color?.r){
 				hex = this.rgbaToHex([color.r,color.g,color.b,color.a?color.a:1])