Merge branch 'localDevelop' into develop

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})`}">
+					<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color.rgba?.r},${color.rgba?.g},${color.rgba?.b},${color.rgba?.a})`,'background-image':color?.gradient?`linear-gradient(${color?.gradient?.angle}deg,${setGradient(color.gradient)})`:'none'}">
 					</div>
 				</div>
 				<div>
@@ -49,7 +49,27 @@
 								</div>
 							</div>
 						</div> -->
-					
+						<div class="color_setting_operate" v-if="colorList[selectIndex]?.gradient?.gradientShow">
+							<div class="color_setting_operate_item color_setting_operate_control">
+								<div class="operate_item_box">
+									<div>线性</div>
+								</div>
+								<div class="operate_item_box operate_item_angle">
+									<div class="operate_item_angle_box" @mousedown="mousedownGradientAngle($event)" @touchstart="mousedownGradientAngle($event)">
+										<div :style="{'transform':`rotate(${colorList[selectIndex].gradient.angle}deg)`}"></div>
+									</div>
+									<!-- <input type="number"> -->
+								</div>
+								<div class="operate_item_box operate_item_delete">
+									<i class="fi fi-rr-trash" @click="deleteGradientItem"></i>
+								</div>
+							</div>
+							<div class="color_setting_operate_item color_setting_operate_input">
+								<div class="color_setting_operate_bg" @click="addGradient($event)" :style="{'background-image':colorList[selectIndex]?.gradient?`linear-gradient(90deg,${setGradient(colorList[selectIndex].gradient)})`:'none'}">
+								</div>
+								<div v-for="item,index in colorList[selectIndex].gradient.gradientList" :key="item" class="color_setting_operate_btn" :class="{'active':index == colorList[selectIndex].gradient.selectIndex}" :style="{'left':item.left,'background-color':`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`}" @mousedown="mousedownGradient($event,item,index)" @touchstart="mousedownGradient($event,item,index)"></div>
+							</div>
+						</div>
                     </div>
                     <!-- <div class="color_review_block">
                         <div class="clear_button" @click="clearCurrentColor()">Clear</div>
@@ -139,7 +159,7 @@ export default defineComponent({
     },
     setup(){
         let fileList = ref([])
-        let colorList = [{},{},{},{},{},{},{},{}]
+        let colorList = ref([{},{},{},{},{},{},{},{}])
         let selectColor = ref({
 			rgba:{},
 		}) //顔色选择器默认颜色
@@ -147,7 +167,30 @@ export default defineComponent({
 		})
 		let driver__ = inject('driver__')
 		let {t} = useI18n()
-		
+		let gradient = ref({
+			gradientList:[
+				{
+					rgba:{
+						r:117,
+						g:119,
+						b:255,
+						a:1,
+					},
+					left:'0%'
+				},{
+					rgba:{
+						r:0,
+						g:222,
+						b:152,
+						a:1,
+					},
+					left:'100%'
+				},
+			],
+			angle:45,
+			selectIndex:-1,
+			gradientShow:false,
+		})
         return {
             fileList,
             colorList,
@@ -155,6 +198,7 @@ export default defineComponent({
 			selectColorList,
 			driver__,
 			t,
+			gradient,
         }
     },
     watch:{
@@ -167,11 +211,21 @@ export default defineComponent({
         // },
 		selectColor:{
 			handler(newVal,oldVal){
-				this.colorList[this.selectIndex] = newVal.rgba
+				if(typeof newVal?.rgba?.r !== 'number' && typeof newVal?.rgba?.r !== 'string'){
+					this.colorList[this.selectIndex] = {}
+					return	
+				}
+				this.colorList[this.selectIndex].rgba = newVal.rgba
+				if(this.colorList[this.selectIndex]?.gradient && this.colorList[this.selectIndex]?.gradient?.selectIndex>-1 && this.colorList[this.selectIndex]?.gradient?.gradientShow){
+					this.colorList[this.selectIndex].gradient.gradientList[this.colorList[this.selectIndex].gradient.selectIndex].rgba = {
+						r:newVal.rgba.r,
+						g:newVal.rgba.g,
+						b:newVal.rgba.b,
+						a:1,
+					}
+				}
 				let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
-				
 				this.setColorboardList(colorList)
-				// this.clearSelectColor()
 			},
 			immediate: true
 		},
@@ -197,6 +251,25 @@ export default defineComponent({
                 return data
             }
         },
+		setGradient(){
+			// return this.setGradientAngle(gradient)
+			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}`
+			}
+			
+		}
     },
     data(){
         return{
@@ -232,8 +305,31 @@ 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.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-chrome-color-wrap')[0]
 		// console.log(colorDom);
 		dropperDom.appendChild(backIcon);
+		colorDom.addEventListener('click',()=>{
+			// this.colorList[this.selectIndex]
+			this.selectColor.rgba = this.selectColor.rgba.r?this.selectColor.rgba:{r:0,g:0,b:0,a:1}
+			this.gradient.selectIndex = 0
+			this.gradient.gradientShow = true
+			this.colorList[this.selectIndex].rgba = this.selectColor.rgba
+			if(!this.colorList[this.selectIndex].gradient ){
+				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 = ''
+			}
+			let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
+			this.setColorboardList(colorList)
+		})
 		
 		backIcon.addEventListener('click', async ()=>{
 			try {
@@ -274,9 +370,10 @@ export default defineComponent({
 		},
         //选择不同的色块
         selectColorItem(index,color){
+			console.log(this.colorList);
 			let hex
-			if(color?.r){
+			if(color?.rgba?.r){
-				hex = this.rgbaToHex([color.r,color.g,color.b,color.a?color.a:1])
+				hex = this.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b,color.rgba.a?color.rgba.a:1])
 			}else{
 				hex = '#FFFFFF'
 			}
@@ -289,8 +386,9 @@ export default defineComponent({
 			if(this.driver__.driver){
 				driverObj__.moveNext()
 			}
-			if(color.r){
+			if(color?.rgba?.r){
-	            this.selectColor = {rgba:{r:color.r,g:color.g,b:color.b,a:color.a? color.a: 1},hex:hex}
+	            this.selectColor.rgba = {r:color.r,g:color.g,b:color.b,a:color.a? color.a: 1}
+	            this.selectColor.hex = hex
 			}
         },
 
@@ -307,7 +405,7 @@ export default defineComponent({
 						let hex = this.rgbaToHex([rv.r,rv.g,rv.b,rv.a?rv.a:1])
 						this.reviewColor = rv?.r + ''? {rgba:{r:rv.r,g:rv.g,b:rv.b,a:1},hex:hex} : {hex:''}
 						this.selectColor  = this.reviewColor
-						this.colorList[this.selectIndex] =  {r:rv.r, g:rv.g, b:rv.b}
+						this.colorList[this.selectIndex].rgba =  {r:rv.r, g:rv.g, b:rv.b}
 						this.pantongName = rv.name
 						let colorList =this.colorList.filter((v) => Object.keys(v).length)
 						this.setColorboardList(colorList)
@@ -421,7 +519,6 @@ export default defineComponent({
             return hex;
         },
 		setUplpadColor(color){
-			this.selectColor = ''
 			nextTick().then(()=>{
 				this.selectColor = color
 				if(this.driver__.driver){
@@ -500,7 +597,9 @@ export default defineComponent({
                 let data = {
                     id:'',
                     name:'',
-                    rgbValue:v
+                    rgbValue:v.rgba,
+                    gradient:v.gradient,
+
                 }
                 return data
             })
@@ -512,12 +611,76 @@ export default defineComponent({
 			let hex
             colorList.forEach((ele, index) => {
 				hex = this.rgbaToHex([ele.rgbValue.r,ele.rgbValue.g,ele.rgbValue.b,ele.rgbValue.a?ele.rgbValue.a:1])
-
+                this.colorList[index].rgba = ele.rgbValue
-                this.colorList[index] = ele.rgbValue
+				// if(ele.gradient) this.colorList[index].gradient = ele.gradient
             });
-            this.selectColor = {rgba:this.colorList[0],hex:hex}, //顔色选择器默认颜色
+            this.selectColor = {rgba:this.colorList[0].rgba,hex:hex} //顔色选择器默认颜色
             this.store.commit('setColorboardList',colorList)
         },
+		addGradient(event){
+			let gradientWidth = event.target.clientWidth
+			let left = event.offsetX/gradientWidth
+			this.colorList[this.selectIndex].gradient.gradientList.push({
+				rgba:this.selectColor.rgba,
+				left:left.toFixed(2)*100+'%'
+			})
+		},
+		deleteGradientItem(){
+			if(this.colorList[this.selectIndex].gradient.gradientList.length <= 2)return
+			this.colorList[this.selectIndex].gradient.gradientList.splice(this.colorList[this.selectIndex].gradient.selectIndex,1)
+		},
+		mousedownGradient(event,item,index){
+			event.stopPropagation();
+			this.colorList[this.selectIndex].gradient.selectIndex = index
+			let gradientRgba = item.rgba
+			let rgba = [gradientRgba.r,gradientRgba.g,gradientRgba.b,gradientRgba.a?gradientRgba.a:1]
+			let hex = this.rgbaToHex(rgba)
+            this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色
+			// isMoible()  true为移动端
+			let gradientWidth = document.querySelector('.colorboard_upload_modal .color_setting_operate_bg').clientWidth
+			let position = {
+				x:event.x,
+				left:event.target.style.left?event.target.style.left.split('%')[0]:0
+			}
+			let mousedownGradient = (e)=>{
+				let left = (e.x - position.x)/gradientWidth*100+Number(position.left)
+				left = (left<0?0:left>100?100:left)
+				item.left = left+'%'
+			}
+			let mouseupGradient = ()=>{
+				window.removeEventListener('mousemove',mousedownGradient)
+				window.removeEventListener('mouseup',mouseupGradient)
+			}
+			window.addEventListener('mousemove',mousedownGradient)
+			window.addEventListener('mouseup',mouseupGradient)
+			// event.target.addEventListener('touchmove',)
+		},
+		mousedownGradientAngle(event){
+			event.stopPropagation();
+			// isMoible()  true为移动端
+			let domPosition = event.target.getBoundingClientRect()
+			let position = {
+				x:domPosition.x+domPosition.width/2,
+				y:domPosition.y+domPosition.height/2,
+			}
+			let angle
+			let mousedownGradientAngle = (e)=>{
+				let X = position.x 
+				let Y = position.y
+				let x = e.x - X
+				let y = Y - e.y
+				angle = Math.atan2(x,y)*(180 / Math.PI)
+				// this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
+				this.colorList[this.selectIndex].gradient.angle = angle
+
+			}
+			let mouseupGradientAngle = ()=>{
+				window.removeEventListener('mousemove',mousedownGradientAngle)
+				window.removeEventListener('mouseup',mouseupGradientAngle)
+			}
+			window.addEventListener('mousemove',mousedownGradientAngle)
+			window.addEventListener('mouseup',mouseupGradientAngle)
+		}
     }
 })
 </script>
@@ -898,6 +1061,7 @@ export default defineComponent({
 					}
 					
 					.color_setting_operate{
+						margin-top: 2rem;
 						*{
 							-webkit-touch-callout: none; /* iOS Safari */
 							-webkit-user-select: none; /* Safari */
@@ -908,8 +1072,20 @@ export default defineComponent({
 						.color_setting_operate_item{
 							display: flex;
 							justify-content: space-around;
+							align-items: center;
+							.operate_item_box{
+							}
 						}
 						.color_setting_operate_control{
+							.operate_item_delete,.operate_item_angle{
+								cursor: pointer;
+							}
+							.operate_item_delete{
+								i{
+								display: flex;
+									font-size: 3rem;
+								}
+							}
 							.operate_item_angle{
 								.operate_item_angle_box{
 									border-radius: 50%;

src/component/HomePage/ExportModel.vue

@@ -214,6 +214,8 @@
 					<div><span class="icon iconfont icon-zhuyi"></span>Your points balance is insufficient, if you need to use this feature, please click the top left corner to recharge</div>
 				</div>
             </div> -->
+			<!-- <div @click="toSvg()">2312312312</div> -->
+
             <div class="mark_loading" v-show="isShowMark">
                 <a-spin size="large" />
             </div>
@@ -1610,13 +1612,14 @@ export default defineComponent({
 			});
 			
 		}
-		let toSvg = () =>{
+		let toSvg = ()=>{
-			console.log(canvas.toSVG());
+			// console.log(canvas.toSvg());
 		}
         onMounted(() => {});
         return {
 			toSvg,
 			t,
+			toSvg,
             showUpgradePlan,//当前弹窗是否打开
             canvasWH,//画布初始宽高
 			credits,//积分 用来判断HD导出积分是否够用

src/component/HomePage/ExportNewCoolection.vue

@@ -122,6 +122,7 @@ export default defineComponent({
 	},
 	methods: {
 		dragstart (e:any, index:any) {
+			
 			this.dragIdx = index
 			},
 			dragDrop (e:any, index:any) {