Merge branch 'localDevelop' into develop

2024-04-24 14:50:28 +08:00
parent ee4ed450a8 2c5775e77c
commit d66a07785a
8 changed files with 279 additions and 74 deletions
--- a/src/component/Detail/DesignPrintOperation.vue
+++ b/src/component/Detail/DesignPrintOperation.vue
@@ -13,7 +13,7 @@
            :mask="true"
        >
            <div class="designOpenrtion_content">
-				<div class="modal_title_text">
+				<div class="design_title_text">
 					<div>{{ $t('DesignPrintOperation.Placement') }}</div>
 				</div>
 				<div class="design_closeIcon" @click.stop="closeModal()">
--- 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})`}">
+					<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,27 @@
 								</div>
 							</div>
 						</div> -->
-						<!-- <div>1231239817239871923918723</div> -->
+						<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>
+								</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(${gradient.angle}deg)`}"></div>
+									</div>
+									<!-- <input type="number"> -->
+								</div>
+								<div class="operate_item_box">
+									<div>删除</div>
+								</div>
+							</div>
+							<div class="color_setting_operate_item color_setting_operate_input">
+								<div class="color_setting_operate_bg" :style="{'background-image':`linear-gradient(90deg,${setGradient(gradient)})`}">
+								</div>
+								<div v-for="item,index in gradient.gradientList" :key="item" class="color_setting_operate_btn" :class="{'active':index == 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>
@@ -125,7 +145,7 @@ import GO from "@/tool/GO";
 import { defineComponent, h,ref,inject, nextTick } from 'vue'
 import { LoadingOutlined } from '@ant-design/icons-vue';
 import {getCookie} from '@/tool/cookie'
-import {getUploadUrl,rgbToHsv} from '@/tool/util'
+import {getUploadUrl,rgbToHsv,isMoible} from '@/tool/util'
 import {useStore} from 'vuex'
 import ColorThief from '@/tool/colorthief/colorthief'
 import { message,Upload} from 'ant-design-vue';
@@ -147,6 +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,
+		})
+		let gradientShow = ref(false)
        return {
            fileList,
            colorList,
@@ -154,6 +198,8 @@ export default defineComponent({
 			selectColorList,
 			driver__,
 			t,
+			gradient,
+			gradientShow,
        }
    },
    watch:{
@@ -168,6 +214,21 @@ export default defineComponent({
 			handler(newVal,oldVal){
 				this.colorList[this.selectIndex] = newVal.rgba
 				let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
+				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,
+						g:newVal.rgba.g,
+						b:newVal.rgba.b,
+						a:1,
+					}
+				}
+				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()
 			},
@@ -195,6 +256,27 @@ export default defineComponent({
                return data
            }
        },
+		setGradient(){
+			// return this.setGradientAngle(gradient)
+			return (gradient)=>{
+				console.log(gradient,'222');
+				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}` 
+
+				})
+				console.log(`linear-gradient(${gradient.angle}deg, ${gradientStr})`);
+				return `${gradientStr}`
+			}
+			
+		}
    },
    data(){
        return{
@@ -230,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();
@@ -247,7 +351,7 @@ export default defineComponent({
 			} catch (e) {
 				message.info(this.t('ColorboardUpload.jsContent1'))
 			}
-		},false)
+		})
 		// this.clearSelectColor()
 		// if ("EyeDropper" in window) {
 		// 	console.log(true);
@@ -270,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])
@@ -514,8 +619,59 @@ export default defineComponent({
            this.selectColor = {rgba:this.colorList[0],hex:hex}, //顔色选择器默认颜色
            this.store.commit('setColorboardList',colorList)
        },
-		
-
+		mousedownGradient(event,item,index){
+			event.stopPropagation();
+			this.gradient.selectIndex = index
+			let gradientRgba = this.gradient.gradientList[index].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)
+				// event.target.style.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为移动端
+			console.log(event.target.getBoundingClientRect());
+			let domPosition = event.target.getBoundingClientRect()
+			console.log(domPosition.x+domPosition.width/2);
+			let position = {
+				x:domPosition.x+domPosition.width/2,
+				y:domPosition.y+domPosition.height/2,
+			}
+			let angle = this.gradient.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.gradient.angle = angle
+			}
+			let mouseupGradientAngle = ()=>{
+				window.removeEventListener('mousemove',mousedownGradientAngle)
+				window.removeEventListener('mouseup',mouseupGradientAngle)
+			}
+			window.addEventListener('mousemove',mousedownGradientAngle)
+			window.addEventListener('mouseup',mouseupGradientAngle)
+		}
    }
 })
 </script>
@@ -842,31 +998,7 @@ export default defineComponent({
 						}
 					}

-					.sileder_color{
-						margin-top:calc(1.3rem*1.2);
-
-						.vc-slider-swatches{
-							display:none
-						}
-						.vc-slider-hue-warp {
-							width: calc(16.5rem*1.2);
-							height: calc(2.4rem*1.2);
-							border-radius: calc(1.2rem*1.2);
-							overflow: hidden;
-
-							.vc-hue-picker{
-								width: calc(1.4rem*1.2);
-								height: calc(1.4rem*1.2);
-								border-radius: 50%;
-								transform: translate(calc(-0.7rem*1.2), calc(-0.2rem*1.2));
-							}
-						}
-						.vc-hue-pointer{
-							top: calc(0.5rem*1.2) !important;
-						}
-						
-					}
-
+					
 					.color_block{
 						// margin-top: calc(1rem;
 						// display: flex;
@@ -880,7 +1012,7 @@ export default defineComponent({
 						justify-content: space-between;
 						align-items: center;
 						.color_right{
-							width: calc(11rem*1.2);
+							width: 13rem;
 							font-size: calc(1.2rem*1.2);
 							color: #666666;
 							.color_rgb_block{
@@ -900,14 +1032,14 @@ export default defineComponent({
 								align-items: center;
 							}
 							.color_HEX_block,.color_rgb_block{
-								padding: calc(.2rem*1.2) calc(.5rem*1.2);
+								padding: .25rem .6rem;
 								box-shadow: inset 0 0 0 1px #ccc;
-								border-radius: calc(.4rem*1.2);
+								border-radius: .5rem;
 								justify-content: space-around;
 								text-transform:uppercase;
 								.color_block_bg{
-									width: calc(1.5rem*1.2);
-									height: calc(1.5rem*1.2);
+									width: 1.8rem;
+									height: 2.5rem;
 									// margin-right: .5rem;
 									display: flex;
 									justify-content: space-between;
@@ -918,6 +1050,83 @@ export default defineComponent({
 						}
 						
 					}
+					
+					.color_setting_operate{
+						*{
+							-webkit-touch-callout: none; /* iOS Safari */
+							-webkit-user-select: none; /* Safari */
+							-moz-user-select: none; /* Firefox */
+							-ms-user-select: none; /* Internet Explorer/Edge */
+							user-select: none;
+						}
+						.color_setting_operate_item{
+							display: flex;
+							justify-content: space-around;
+						}
+						.color_setting_operate_control{
+							.operate_item_angle{
+								.operate_item_angle_box{
+									border-radius: 50%;
+									width: 4rem;
+									height: 4rem;
+									border: solid 2px #39215b;
+									display: flex;
+									align-items: center;
+									justify-content: center;
+									cursor: pointer;
+									>div{
+										height: 100%;
+										width: 1rem;
+										position: relative;
+										pointer-events:none;
+									}
+									>div::before{
+										position: absolute;
+										content: "";
+										top: 0.2rem;
+										width: 1rem;
+										height: 1rem;
+										border-radius: 50%;
+										background: #39215b;
+									}
+								}
+							}
+						}
+						.color_setting_operate_input{
+							width: 80%;
+							// padding: 0 10%;
+							margin: 1.2rem 10%;
+							border-radius: 10%;
+							position: relative;
+							height: 2.5rem;
+							.color_setting_operate_bg{
+								border-radius: .5rem;
+								width: 100%;
+								height: 2.5rem;
+								background: #fff;
+								position: absolute;
+							}
+						}
+						.color_setting_operate_btn{
+							position: absolute;
+							top: 50%;
+							transform: translate(-50%,-50%);
+							left: 0;
+							width: 1rem;
+							height: 110%;
+							border: .2rem solid;
+							border-radius: .5rem;
+							cursor: pointer;
+							box-sizing: content-box;
+							z-index: 2;
+							&.active{
+								border: .3rem solid;
+							}
+						}
+						.color_setting_operate_btn:hover{
+							border: .3rem solid;
+						}
+					}
 				}
                .get_color_block{
                    display: flex;
--- a/src/component/HomePage/Generate.vue
+++ b/src/component/HomePage/Generate.vue
@@ -44,7 +44,7 @@
 			</div>
        </div>
        <div v-else class="input_border" >
-			<div class="input_box  Guide_1_5" :class="[inputShow || inputShowEffectPoor?'active':'',]">
+			<div class="input_box  Guide_1_5" :class="[inputShow?'active':'',]">
 				<input
 					class="search_input"
 					@input="ifMaximumLength"
@@ -254,7 +254,6 @@ export default defineComponent({

 		let loadingShow = ref(false)
 		let inputShow = ref(false)//表示是否出现红框
-		let inputShowEffectPoor = ref(false)//表示是否出现红框
 		let inputTime = ref()
 		let driver__:any = inject('driver__')
 		let {t} = useI18n()
@@ -292,7 +291,6 @@ export default defineComponent({
 			// sketchCatecoryList,
 			workspace,
 			inputShow,
-			inputShowEffectPoor,
 			inputTime,
 			driver__,
 			t,
@@ -624,9 +622,9 @@ export default defineComponent({
 									}
 								});
 							});
-							if(rv.filter((item:any)=>item.status == 'Invalid').length == 4) {
-								(this.$refs.inputShowText as any).innerHTML = this.t('Generate.effectPoor')
-								this.inputShowEffectPoor = true
+							if(rv.length == 4 && rv.filter((item:any)=>item.status == 'Invalid').length == 4) {
+								// (this.$refs.inputShowText as any).innerHTML = this.t('Generate.effectPoor')
+									message.info(this.t('Generate.effectPoor'));
 							}
 							if(arr.length == 0){
 								nextTick().then(()=>{
@@ -678,7 +676,6 @@ export default defineComponent({
 					(this.$refs.inputShowText as any).innerHTML = this.t('Generate.maximumLength')
 					this.inputShow = true
 				}else{
-					this.inputShowEffectPoor = false
 					this.inputShow = false
 				}
 			},500)
--- a/src/component/HomePage/PrintboardUpload.vue
+++ b/src/component/HomePage/PrintboardUpload.vue
@@ -104,7 +104,7 @@
 			</div>
 			<div v-show="openClick == 3" class="modal_accomplish">
 				<div class="input_border">
-					<div class="Guide_1_2_8 input_box" :class="[inputShow || inputShowEffectPoor?'active':'',driver__.driver?'showEvents':'']">
+					<div class="Guide_1_2_8 input_box" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']">
 						<input class="search_input" @input="ifMaximumLength" @keydown.enter="getgenerate" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" :placeholder="$t('PrintboardUpload.inputContent1')" v-model="captionGeneration">
 						<div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('PrintboardUpload.Generate') }}</div>
 						<span ref="inputShowText"></span>
@@ -186,7 +186,6 @@ export default defineComponent({
 		])
 		let loadingShow = ref(false)
 		let inputShow = ref(false)
-		let inputShowEffectPoor = ref(false)//表示是否出现红框
 		let inputTime = ref()
 		let driver__:any = inject('driver__')
 		let {t} = useI18n()
@@ -213,7 +212,6 @@ export default defineComponent({
 			generateList,
 			loadingShow,
 			inputShow,
-			inputShowEffectPoor,
 			inputTime,
 			driver__,
 			t,
@@ -634,7 +632,6 @@ export default defineComponent({
 					(this.$refs.inputShowText as any).innerHTML = this.t('PrintboardUpload.maximumLength')
 					this.inputShow = true
 				}else{
-					this.inputShowEffectPoor = false
 					this.inputShow = false
 				}
 			},500)
@@ -662,7 +659,8 @@ export default defineComponent({
 			
 			let data = {
 				generateType:generateType,
-				designType:this.useGenerate.designType,
+				// designType:this.useGenerate.designType,
+				designType:'collection',
 				collectionElementId:this.useGenerate.imgId,
 				// collectionElementId:generage?.collectionElementid,
 				level1Type:this.upload.level1Type,
@@ -773,9 +771,10 @@ export default defineComponent({
 								});
 							});
 							// this.generateList = rv;
-							if(rv.filter((item:any)=>item.status == 'Invalid').length == 4) {
-								(this.$refs.inputShowText as any).innerHTML = this.t('Generate.effectPoor')
-								this.inputShowEffectPoor = true
+							if(rv.length == 4 && rv.filter((item:any)=>item.status == 'Invalid').length == 4) {
+								message.info(this.t('Generate.effectPoor'));
+
+								// (this.$refs.inputShowText as any).innerHTML = this.t('Generate.effectPoor')
 							}
 							if(arr.length == 0){
 								nextTick().then(()=>{
--- a/src/component/HomePage/SketchboardUpload.vue
+++ b/src/component/HomePage/SketchboardUpload.vue
@@ -182,7 +182,7 @@
 			</div>
 			<div v-show="openClick == 3" class="modal_accomplish">
 				<div class="input_border">
-					<div class="Guide_1_9_2 input_box" :class="[inputShow || inputShowEffectPoor?'active':'',driver__.driver?'showEvents':'']">
+					<div class="Guide_1_9_2 input_box" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']">
 						<input class="search_input" @input="ifMaximumLength" @keydown.enter="getgenerate" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" :placeholder="$t('PrintboardUpload.inputContent1')" v-model="captionGeneration">
 						<div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('PrintboardUpload.Generate') }}</div>
 						<span ref="inputShowText"></span>
@@ -305,7 +305,6 @@ export default defineComponent({
 		})
 		let workspace:any = ref({})
 		let inputShow = ref(false)
-		let inputShowEffectPoor = ref(false)//表示是否出现红框
 		let inputTime = ref()
 		let sketchboardList:any = computed(()=>{
 			return store.state.UploadFilesModule.sketchboard
@@ -335,7 +334,6 @@ export default defineComponent({
 			sketchCatecoryList,
 			workspace,
 			inputShow,
-			inputShowEffectPoor,
 			inputTime,
 			sketchboardList,
 			t,
@@ -646,7 +644,6 @@ export default defineComponent({
 					(this.$refs.inputShowText as any).innerHTML = this.t('SketchboardUpload.maximumLength')
 					this.inputShow = true
 				}else{
-					this.inputShowEffectPoor = false
 					this.inputShow = false
 				}
 			},500)
@@ -770,7 +767,8 @@ export default defineComponent({
 			let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
 			let data = {
 				generateType:generateType,
-				designType:this.useGenerate.designType,
+				// designType:this.useGenerate.designType,
+				designType:'collection',
 				collectionElementId:this.useGenerate.imgId,
 				level1Type:this.upload.level1Type,
 				level2Type:this.useGenerate.level2Type,
@@ -882,15 +880,21 @@ export default defineComponent({
 										this.generateList[index] = element
 										element.imgUrl = element.url
 										element.id_ = GO.id++
-										element.category = generage.level2Type?generage.level2Type:sketchCatecoryList[0].name
-										element.categoryValue = categoryValue?categoryValue:sketchCatecoryList[0].value
+										if(element.category){
+											this.sketchCatecoryList.forEach((itemCategory:any) => {
+												if(itemCategory.name == element.category){
+													element.categoryValue = itemCategory?.value
+													element.category = itemCategory?.name
+												}
+											});
+										}
 									}
 								});
 							});
 							// this.generateList = rv;
-							if(rv.filter((item:any)=>item.status == 'Invalid').length == 4) {
-								(this.$refs.inputShowText as any).innerHTML = this.t('Generate.effectPoor')
-								this.inputShowEffectPoor = true
+							if(rv.length == 4 && rv.filter((item:any)=>item.status == 'Invalid').length == 4) {
+								message.info(this.t('Generate.effectPoor'));
+								// (this.$refs.inputShowText as any).innerHTML = this.t('Generate.effectPoor')
 							}
 							if(arr.length == 0){
 								nextTick().then(()=>{