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

src/component/Detail/DesignDetail.vue

@@ -107,8 +107,9 @@
 							</div>
 							<div class="img_block_item centent" @click.stop="openCurrent(3)">
 								<div class="color_item">
-									<div class="color_content" :style="{background:`rgba(${current?.color?.r},${current?.color?.g},${current?.color?.b},${current?.color?.a?current?.color.a:1})`}"></div>
-									<div class="color_content_body">
+									<div v-if="!current?.gradient" class="color_content" :style="{background:`rgba(${current?.color?.r},${current?.color?.g},${current?.color?.b},${current?.color?.a?current?.color.a:1})`}"></div>
+									<div class="color_content" v-else :style="{height:'10rem','background-image':current?.gradient?`linear-gradient(${current?.gradient.angle}deg,${setGradient(current?.gradient)}`:'none'}"></div>
+									<div v-if="!current?.gradient" class="color_content_body">
 										<div class="color_des">{{current?.color?.tcx}}</div>
 										<div class="color_des">{{current?.color?.name}}</div>
 									</div>
@@ -155,7 +156,7 @@ import Draggable from 'vuedraggable'
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { Https } from "@/tool/https";
 import { Modal,message } from 'ant-design-vue';
-import {getUploadUrl,isMoible} from '@/tool/util'
+import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
 import { useStore } from "vuex";
 import { openGuide,driverObj__ } from "@/tool/guide";
 import GO from '@/tool/GO';
@@ -254,6 +255,25 @@ export default defineComponent({
 			designOrder:false,
         }
     },
+	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:{
 		designItemDetail:{
 			handler: async function(newVal,oldVal) {
@@ -647,10 +667,11 @@ export default defineComponent({
 			let num = -1
 			// let zIndex = 10
 			designItemDetail.clothes.forEach((item:any,index:number) => {
-				let clothesItem = {
+				let clothesItem:any = {
 					color: `${item.color.r} ${item.color.g} ${item.color.b}`,
 					id:item.id,
 					path:item.minIOPath,
+					gradient:{},
 					changed:item.changed?item.changed:false,
 					designType:item.designType?item.designType:"Library",
 					offset:item.layersObject?.[1]?.offset == null?[0,0]:item.layersObject[1].offset,
@@ -663,6 +684,13 @@ export default defineComponent({
 					priority:item.priority,
 					type:item.type,
 				}
+				if(item.gradient){
+					let gradient = item.gradient
+					gradient.colorImg = setGradual(item.gradient,320,700)
+					clothesItem.gradient = item.gradient
+				}else{
+					delete clothesItem.gradient
+				}
 				if(!item.id && sub){
 					num = index
 				}else{
@@ -877,9 +905,10 @@ export default defineComponent({
 			this.designItemDetail.clothes.forEach((item:any)=>{
 				item.clothesOpen = false
 			})
-			let color
+			let color,gradient
 			if(this.designItemDetail.clothes[0]){
 				color = this.designItemDetail.clothes[0].color
+				gradient = this.designItemDetail.clothes[0].gradient
 			}else{
 				color = {
 					"id": '',
@@ -900,6 +929,7 @@ export default defineComponent({
 				"path": "",
 				"minIOPath": "",
 				"color": color,
+				gradient:gradient,
 				"printObject": {
 					"ifSingle": null,
 					"prints": [
@@ -956,6 +986,7 @@ export default defineComponent({
 			}
 			data.designSingleItemDTOList[this.currentIndex] = {
 				color:`${this.current.color.r} ${this.current.color.g} ${this.current.color.b}`,
+
 				id:this.current.id?this.current.id:'',
 				changed:this.current.changed?this.current.changed:false,
 				designType:this.current.designType?this.current.designType:'Library',