2023-11-2-1

2023-11-02 11:00:38 +08:00
parent 2fbd72e151
commit 769c06e6f9
20 changed files with 1352 additions and 336 deletions
--- a/src/component/Detail/DesignDetail.vue
+++ b/src/component/Detail/DesignDetail.vue
@@ -228,6 +228,11 @@ export default defineComponent({
 			handler: function(newval) {
 			}
 		},
+		designDetailShow:{
+			handler: function(newval) {
+				this.removeRevocation()
+			}
+		}
 	},
 	provide() {
 		return {
@@ -301,7 +306,6 @@ export default defineComponent({
 				DesignDetailAlter.terminate()
 				// this.designItemDetail = {}
 				this.frontBack = {}
-				this.removeRevocation()
            }else{
                this.designShowPrview = 1;
 				this.designItemDetailUrl = {}
@@ -371,8 +375,6 @@ export default defineComponent({
 						body = item
 					}
 				});
-				console.log(body?.layersObject?.[0]?.imageUrl);
-				
 				let ratio:any = await this?.setPostition(body?.layersObject?.[0]?.imageUrl)
 				let frontIndex = 6
 				let backIndex = 3
@@ -430,6 +432,7 @@ export default defineComponent({
            }
 			this.designShowPrview = 1
            // this.showDesignDetailModal(data,str)
+            this.loadingShow = false
 		},
 		removeRevocation(){
 			sessionStorage.removeItem('oppositeRevocation')
@@ -521,10 +524,11 @@ export default defineComponent({
 			this.store.commit('setDesignPreviewData',data)
 			return data
 		},
-		setSubmit(str:any){
+		async setSubmit(str:any){
 			let setDesignItem:any = this.$refs.setDesignItem	
 			let data = this.setSubmitItem(str)
-			setDesignItem.setPreview(data)
+            this.loadingShow = true
+			await setDesignItem.setPreview(data)
 		},
 		async submit(){
 			let data = this.setSubmitItem('')
@@ -558,8 +562,6 @@ export default defineComponent({
 		async setPostition(url:any){
 			let img:any = await loadImage(url)
 			let modal_body = <HTMLImageElement>document.getElementsByClassName('detail_modal_model')[0]
-				console.log(modal_body);
-				
 			const num = modal_body?.offsetWidth / img.width;
 			function loadImage(url:any) {
 				return new Promise((resolve, reject) => {
@@ -1168,4 +1170,12 @@ export default defineComponent({
   
    
 }
+</style>
+<style lang="less">
+.design_detail_modal_component{
+	.mark_loading{
+		position: absolute;
+	}
+}
+
 </style>
--- a/src/component/Detail/DesignDetailAlter.vue
+++ b/src/component/Detail/DesignDetailAlter.vue
@@ -196,7 +196,7 @@
                <div class="right_content_line right_content_line_upload">
                    <div class="upload_right_header">
 						<i class="color_edit fi fi-bs-comments" ></i>
-                        <span>{{ $t('DesignDetailAlter.AutoRecognize') }}</span>
+                        <span>{{ $t('DesignDetailAlter.UploadImage') }}</span>
                    </div>
 					<div class="upload_centetn">
 						<div class="upload_item">
--- a/src/component/Detail/DesignDetailEnd.vue
+++ b/src/component/Detail/DesignDetailEnd.vue
@@ -87,11 +87,11 @@
 		<div v-show="type_ == 1 || type_ == 3" @click.stop="setPreview" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.preview') }}</div>
 		<div v-if="type_ == 2 && current?.printObject?.prints?.[0]?.path != null" @click.stop="setPrint" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.Layout') }}</div>
 		<div v-else-if="type_ == 2 && current?.printObject?.prints?.[0]?.path == null" @click.stop="setPreview" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.preview') }}</div>
-		<div class="mark_loading" v-show="loadingShow">
-            <a-spin size="large" />
-        </div>
+		
 	<DesignPrintOperation ref="DesignPrintOperation"></DesignPrintOperation>
-
+	</div>
+	<div class="mark_loading" v-show="loadingShow">
+		<a-spin size="large" />
 	</div>
 </template>
 <script>
--- a/src/component/Detail/DesignPrintOperation.vue
+++ b/src/component/Detail/DesignPrintOperation.vue
@@ -696,6 +696,9 @@ export default defineComponent({
 <style lang="less">
 .designOpenrtion_modal {
 	// max-width: 1440px;
+	.mark_loading{
+		position: absolute;
+	}
 	.ant-modal-body{
 		padding: 4rem 5rem 0rem!important;
 		// height: calc(65vh - 6.4rem);
--- a/src/component/Detail/setDesignItem.vue
+++ b/src/component/Detail/setDesignItem.vue
@@ -31,10 +31,8 @@
 			<div @click="setPreviewData" class="subitOkPreviewBtn">OK</div>
 		</div>
 		<div class="designOpenrtion_imgMask_open" @click.stop="deleteBorder"></div>
-		<div class="mark_loading" v-show="loadingShow">
-            <a-spin size="large" />
-        </div>
 	</div>
+	
 </template>

 <script >
@@ -372,10 +370,9 @@ export default defineComponent({
 					item.scale = front?.imageSize?Number(((front?.style?.width.replace(/px/g,'')*ratio)/front?.imageSize[0]).toFixed(2)):1
 				}
 			})
-			this.loadingShow = true
 			Https.axiosPost(Https.httpUrls.designSingle, data).then(
                (rv) => {
-                    this.loadingShow = false
+                    this.$parent.loadingShow = false
 					let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
 					designItemDetail.designItemUrl = rv.designItemUrl
 					designItemDetail.ifSubmit = true
@@ -392,7 +389,6 @@ export default defineComponent({
 					this.setRevocation(designItemDetail,data)
                }
            ).catch(res=>{ 
-                this.loadingShow = false
            });
 		},
    },
--- a/src/component/HomePage/ColorboardUpload.vue
+++ b/src/component/HomePage/ColorboardUpload.vue
@@ -58,7 +58,7 @@
                <div class="right_content_line right_content_line_upload">
                    <div class="upload_right_header">
 						<i class="color_edit fi fi-bs-comments" ></i>
-                        <span>{{ $t('ColorboardUpload.AutoRecognize') }}</span>
+                        <span>{{ $t('ColorboardUpload.UploadImage') }}</span>
                    </div>
 					<div class="upload_centetn">
 						<div class="upload_item">
@@ -157,6 +157,7 @@ export default defineComponent({
            this.colorList[this.selectIndex] = newVal.rgba
            let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
            this.setColorboardList(colorList)
+			this.clearSelectColor()
        }
    },
    computed:{
@@ -164,10 +165,14 @@ export default defineComponent({
            return (selectColor)=>{
                let rgba = selectColor.rgba
                let data = {
-                    r:rgba?.r || rgba?.r===0 ? rgba?.r  : 255,
-                    g:rgba?.g || rgba?.g===0 ? rgba?.g  : 255,
-                    b:rgba?.b || rgba?.b===0 ? rgba?.b  : 255,
-                    a:rgba?.a || rgba?.a===1 ? rgba?.a  : 1,
+                    r:rgba?.r,
+                    g:rgba?.g,
+                    b:rgba?.b,
+                    a:rgba?.a,
+					// r:rgba?.r || rgba?.r===0 ? rgba?.r  : 255,
+                    // g:rgba?.g || rgba?.g===0 ? rgba?.g  : 255,
+                    // b:rgba?.b || rgba?.b===0 ? rgba?.b  : 255,
+                    // a:rgba?.a || rgba?.a===1 ? rgba?.a  : 1,
 					hex:selectColor.hex == undefined ? '#FFFFFF':selectColor.hex
                }
 				if(data.a != 1 || data.a != 0){
@@ -225,6 +230,7 @@ export default defineComponent({
 				message.warning(this.t('ColorboardUpload.jsContent1'))
 			}
 		})
+		this.clearSelectColor()
 		// if ("EyeDropper" in window) {
 		// 	console.log(true);
 		// }
@@ -233,7 +239,17 @@ export default defineComponent({
 		// }
    },
    methods:{
-		
+		clearSelectColor(){
+			let colorBg0 = document.getElementsByClassName('colorboard_upload_modal')[0].getElementsByClassName('color_block_bg')[0]
+			let colorBg1 = document.getElementsByClassName('colorboard_upload_modal')[0].getElementsByClassName('color_block_bg')[1]
+			if(this.selectColor?.rgba?.r || this.selectColor?.rgb?.r){
+				colorBg0.style.opacity = 1
+				colorBg1.style.opacity = 1
+			}else{
+ 				colorBg0.style.opacity = 0
+				colorBg1.style.opacity = 0
+			}
+		},
        //选择不同的色块
        selectColorItem(index,color){
 			let hex
@@ -805,6 +821,7 @@ export default defineComponent({
 									height: 1.5rem;
 									// margin-right: .5rem;
 									display: flex;
+									background-color: rgba(0, 0, 0, 0);
 									justify-content: space-between;
 								}
 							}
--- a/src/component/HomePage/Generate.vue
+++ b/src/component/HomePage/Generate.vue
@@ -166,11 +166,10 @@
 					<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
 				</div>
            </div>
-			<div class="mark_loading" v-show="loadingShow">
-				<a-spin size="large" />
-			</div>
        </div>
-		
+		<div class="mark_loading" v-show="loadingShow">
+			<a-spin size="large" />
+		</div>
    </div>
 </template>
 <script lang="ts">
@@ -571,10 +570,16 @@ export default defineComponent({
 	display: flex;
    flex-direction: column;
    border-right: 1px solid #e5e5e5;
+	position: relative;
    &.generate::-webkit-scrollbar {
        display: none;
    }
-	
+	.mark_loading{
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		z-index: 99;
+	}
    .generate_checkbox,
    .generage_input {
        display: flex;
@@ -638,12 +643,6 @@ export default defineComponent({
        flex-wrap: wrap;
 		align-content: flex-start;
 		flex: 1;
-		.mark_loading{
-			position: absolute;
-			width: 100%;
-			height: 100%;
-			z-index: 99;
-		}
        .generage_img_item {
            cursor: pointer;
            margin: 0 2rem 2rem 0;
--- a/src/component/HomePage/Header.vue
+++ b/src/component/HomePage/Header.vue
@@ -64,15 +64,21 @@
 			<!-- <div class="select_item" @click="showBindEmailModal()">
 				<span class="icon iconfont icon-youxiang"></span><span class="select_item_des">{{$t('Header.bindEmail')}}</span>
 			</div> -->
+			<div class="select_item" @click.stop="isLanguage = !isLanguage">
+				<span class="icon iconfont icon-yuyan"></span>
+				<span class="select_item_des">{{$t('Header.language')}}</span>
+			</div>
 			<div class="select_item" @click="logout()">
 				<span class="icon iconfont icon-tuichu"></span
 				><span class="select_item_des">{{$t('Header.logOff')}}</span>
 			</div>
-			<div class="select_item" @click="setLocale()">
-				<span class="icon iconfont icon-yuyan"></span>
-				<span class="select_item_des">切换语言</span>
-			</div>
+			
 		</nav>
+		<ul class="select_block select_list" v-show="isLanguage && isShowOperate">
+			<li class="select_item" v-for="item in language"  @click="setLocale(item.value)">
+				<span class="select_item_des">{{ item.name }}</span>
+			</li>
+		</ul>
        <a-modal
            class="modal_component"
            v-model:visible="bindEmailVisible"
@@ -177,6 +183,18 @@ export default defineComponent({
            numTime: 30,
            timerSec: null,
            modalWarning: null,
+            isLanguage: false,
+			language:[
+				{name:'English',value:'en'},
+				{name:'中文',value:'cn'},
+				{name:'한국인',value:'kr'},
+				{name:'にほんご',value:'ja'},
+				{name:'Русский',value:'ru'},
+				{name:'Français',value:'fr'},
+				{name:'แบบไทย',value:'th'},
+				{name:'Tiếng Việt',value:'vn'},
+				{name:'Italiano',value:'it'},
+			]
        };
    },
    mounted() {
@@ -214,6 +232,7 @@ export default defineComponent({
        //关闭下拉图标
        closeShowOperateContent() {
            this.isShowOperate = false;
+			this.isLanguage = false
            document.removeEventListener("click", this.closeShowOperateContent);
        },

@@ -350,12 +369,13 @@ export default defineComponent({
                }
            }, 1000);
        },
-		setLocale(){
+		setLocale(v){
 			// window.location.reload();
 			let name = 'home'
 			let noRefresh = true;
            this.$router.push({ name: name, params: { noRefresh: noRefresh } });
-			this.locale == 'zh-cn'?this.locale = 'en':this.locale = 'zh-cn'
+			this.locale = v
+			// this.locale == 'zh-cn'?this.locale = 'en':this.locale = 'zh-cn'
 		}
    },
 });
@@ -501,7 +521,10 @@ export default defineComponent({
 	box-shadow: 0px 0.4rem 0.4rem 0px rgba(0, 0, 0, 0.1);
 	overflow: hidden;
 	border: 1px solid #000000;
-
+	&.select_list{
+		// display: none;
+		transform: translateX(105%);
+	}
 	.select_item {
 		padding-left: 1.5rem;
 		height: 4.1rem;
--- a/src/component/HomePage/MoodboardUpload.vue
+++ b/src/component/HomePage/MoodboardUpload.vue
@@ -120,23 +120,27 @@
 					</div>
 				</div>
 			</div>
-			<div v-show="moodboarList.length > 1" class="modal_accomplish">
+			<div v-show="moodboarList.length > 1 || edieShow" class="modal_accomplish">
 				<div class="modal_text">
 					<div>Layout of selected moodboard</div>
 					<div class="modal_btn started_btn" @click.stop="changeTemplateModal()">Edit</div>
 				</div>
-				<div v-if="!modalImg[0]?.id" class="modal_img" id="modal_img" :class="{active:flex_direction}">
-					<div v-for="item,index in layoutList" :class="[moodb_className[index]]"  class="modal_imgItem">
-						<img :src="item.imgUrl" v-modelImg>
+				<div class="modal_img_max">
+					<div v-if="!modalImg[0]?.id" class="modal_img" id="modal_img" :class="{active:flex_direction}">
+						<div v-for="item,index in layoutList" :class="[moodb_className[index]]"  class="modal_imgItem">
+							<img :src="item.imgUrl" v-modelImg>
+						</div>
+					</div>
+					<div v-else class="modal_img">
+						<img :src="modalImg[0].imgUrl">
+					</div>
+					<div class="mark_loading" v-show="loadingShow">
+						<a-spin size="large" />
 					</div>
 				</div>
-				<div v-else class="modal_img">
-					<img :src="modalImg[0].imgUrl">
-				</div>
-			</div>
-			<div class="mark_loading" v-show="loadingShow">
-				<a-spin size="large" />
+				
 			</div>
+			
 		</div>
 		<layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout>
       
@@ -177,6 +181,7 @@ export default defineComponent({
 			return store.state.UploadFilesModule.disposeMoodboard
 		})
 		let uploading:any = ref([])
+		let edieShow:any = ref()
 		let {t} = useI18n()
        return {
            fileList,
@@ -192,6 +197,7 @@ export default defineComponent({
 			loadingShow,
 			modalImg,
 			uploading,
+			edieShow,
 			t,
        };
    },
@@ -352,6 +358,7 @@ export default defineComponent({
 			if(this.store.state.UploadFilesModule.moodboard.length == 0){
 				this.store.commit("clearMoodTemplateId");
 				this.layoutList = []
+				this.edieShow = false
 			}
        },
        recollection() {
@@ -372,8 +379,6 @@ export default defineComponent({
 				material:[] as any,
 				moodboard:[] as any,
 			}
-			console.log(disposeMoodboard);
-			
 			arr.forEach((v:any)=>{
 				if(v.type_.type1 == 'generate'){
 					setboard.generate.push(v)
@@ -391,7 +396,7 @@ export default defineComponent({
        },

        changeTemplateModal() {
-			if(this.layoutOpen){
+			if(this.modalImg[0]?.id){
 				let layout:any = this.$refs.layout
 				// layout.init('moodboard')
 				layout.init()
@@ -402,6 +407,7 @@ export default defineComponent({
        },
 		layout(){
 			this.loadingShow = true
+			this.edieShow = true
 			this.store.commit("setDisposeMoodboard", []);
 			let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
 			this.layoutList = arr
@@ -412,10 +418,13 @@ export default defineComponent({
 			}else{
 				this.flex_direction = false
 			}
-			if(JSON.stringify(this.moodb_className) == JSON.stringify(this.moodb_[arr.length-1][random])){
-				this.layout()
-				return
+			if(this.moodb_[arr.length-1].length != 1){
+				if(JSON.stringify(this.moodb_className) == JSON.stringify(this.moodb_[arr.length-1][random])){
+					this.layout()
+					return
+				}
 			}
+			
 			if(this.moodb_[arr.length-1].length == 2){
 				this.moodb_className = this.moodb_[arr.length-1][0]
 			}else{
@@ -555,6 +564,8 @@ export default defineComponent({
 	.modal_right{
 		flex: 1;
 		margin-left: 3rem;
+		display: flex;
+		flex-direction: column;
 		.modal_layout,.modal_accomplish{
 			.modal_text{
 				font-size: 1.2rem;
@@ -609,19 +620,30 @@ export default defineComponent({
 			// margin-top: 2rem;
 			height: 30rem;
 			display: flex;
+			flex: 1;
 			flex-direction: column;
 			.modal_text{
 				padding-top: 2rem;
 				padding-block: 2rem;
 			}
+			.modal_img_max{
+				// flex: 1;
+				height: 35rem;
+				position: relative;
+				.mark_loading{
+					position: absolute;
+				}
+			}
 			.modal_img{
-				flex: 1;
+				height: 100%;
 				display: flex;
 				flex-direction: column;
 				justify-content: space-between;
 				flex-wrap: wrap;
 				align-items: center;
 				flex-direction: column;
+				position: relative;
+				
 				>img{
 					// height: 100%;
 					width: 100%;
--- a/src/component/HomePage/PrintboardUpload.vue
+++ b/src/component/HomePage/PrintboardUpload.vue
@@ -76,7 +76,6 @@
                                </div>
                            </a-upload>
                        </div>
-                        
                    </div>
                </div>
            </div>
@@ -117,9 +116,10 @@
 							<a-checkbox v-model:checked="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
 						</div>
 					</div>
-					<div class="mark_loading" v-show="loadingShow">
-						<a-spin size="large" />
-					</div>
+					
+				</div>
+				<div class="mark_loading" v-show="loadingShow">
+					<a-spin size="large" />
 				</div>
 			</div>
 		</div>
@@ -818,6 +818,13 @@ export default defineComponent({
 			display: flex;
 			flex-direction: column;
 			flex: 1;
+			position: relative;
+			.mark_loading{
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				z-index: 99;
+			}
            // overflow-x: hidden;
 			&.modal_accomplish::-webkit-scrollbar {
                display: none;
@@ -839,13 +846,6 @@ export default defineComponent({
 				justify-content: flex-start;
 				position: relative;
 				align-content: flex-start;
-
-				.mark_loading{
-					position: absolute;
-					width: 100%;
-					height: 100%;
-					z-index: 99;
-				}
 				.modal_imgItem{
 					margin: 0 2rem 5rem 0;
 					display: inline-block;
--- a/src/component/HomePage/SketchboardUpload.vue
+++ b/src/component/HomePage/SketchboardUpload.vue
@@ -235,9 +235,9 @@
 							<a-checkbox v-model:checked="item.pin">{{ $t('SketchboardUpload.PIN') }}</a-checkbox>
 						</div>
 					</div>
-					<div class="mark_loading" v-show="loadingShow">
-						<a-spin size="large" />
-					</div>
+				</div>
+				<div class="mark_loading" v-show="loadingShow">
+					<a-spin size="large" />
 				</div>
 			</div>
 		</div>
@@ -878,6 +878,11 @@ export default defineComponent({
 			display: flex;
 			flex-direction: column;
 			flex: 1;
+			position: relative;
+			.mark_loading{
+				position: absolute;
+				z-index: 99;
+			}
            // overflow-x: hidden;
 			&.modal_accomplish::-webkit-scrollbar {
                display: none;
@@ -901,12 +906,6 @@ export default defineComponent({
 				justify-content: flex-start;
 				align-content: flex-start;
 				position: relative;
-				.mark_loading{
-					position: absolute;
-					width: 100%;
-					height: 100%;
-					z-index: 99;
-				}
 				.modal_imgItem{
 					margin: 0 2rem 4rem 0;
 					display: inline-block;
--- a/src/component/HomePage/layout.vue
+++ b/src/component/HomePage/layout.vue
@@ -59,6 +59,9 @@
 				</div>
               
 				<div class="layout_left">
+					<div class="layout_left_text">
+						{{ $t('layout.LayerOptions') }}
+					</div>
 					<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
 						<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
 						</div>
@@ -701,7 +704,9 @@ export default defineComponent({
 		}
 		.layout_centent{
 			display: flex;
-			height: 55%;
+			// height: 55%;
+			height: 35rem;
+			width: 57rem;
 			// height: 60%;
 			flex-direction: column;
 			flex-wrap: wrap;
@@ -880,7 +885,7 @@ export default defineComponent({
 			position: absolute;
 			top: 50%;
 			transform: translateY(-50%);
-			left: 2rem;
+			left: 5rem;
 			overflow-x: hidden;
 			// background-color: #000;
 			width: 8%;
@@ -888,6 +893,11 @@ export default defineComponent({
 			&.layout_left::-webkit-scrollbar {
                display: none;
            }
+			.layout_left_text{
+				font-size: 1.6rem;
+				margin-bottom: 1rem;
+				color: #000;
+			}
 			.layout_left_items{
 				width: 100%;
 				height: 6rem;
@@ -908,5 +918,8 @@ export default defineComponent({
            margin: 2rem auto 0;
        }
    }
+	.mark_loading{
+		position: absolute;
+	}
 }
 </style>