09-12

src/component/HomePage/layout.vue

@@ -12,13 +12,14 @@
 			:destroyOnClose="true"
         >
             <div class="layout_content">
-                <div class="layout_header">
-                    <div class="layout_title">MoodBoard Design</div>
-                    <div
-                        class="icon iconfont icon-guanbi close_icon"
-                        @click.stop="init()"
-                    ></div>
-                </div>
+				<div class="collection_title">
+					<div class="collection_title_text">
+						<div class="layout_title">MoodBoard Design</div>
+					</div>
+				</div>
+				<div class="collection_closeIcon" @click.stop="cancelDsign()">
+					<i class="fi fi-rr-cross-small"></i>
+				</div>
 				<div class="layout_nav">
 					<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @click="setpitch(item,index)">
 						<img :src="item.imgUrl">
@@ -26,7 +27,7 @@
 				</div>
 				<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
 					<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @click="setpitch(item,index)" ref="content" >
-						<img crossOrigin="anonymous" :src="item.imgUrl" draggable="false"> 
+						<img crossOrigin="anonymous" :src="item.imgUrl" draggable="false" v-modelImg> 
 						<ul v-show="item.setPitch" class="layout_btn" >
 							<li class="layout_btn_top" v-compile.stop="'top'"></li>
 							<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li>
@@ -76,50 +77,63 @@
                     Submit
                 </div>
             </div>
+			<div class="mark_loading" v-show="loadingShow">
+				<a-spin size="large" />
+			</div>
+			<a-upload
+				:action="uploadUrl + '/api/element/upload'"
+				list-type="picture-card"
+				:data="{
+					...upload,
+				}"
+				:headers="{ Authorization: token }"
+				:before-upload="beforeUpload"
+				multiple
+				accept=".jpg,.png,.jpeg,.bmp"
+			>
+			</a-upload>
         </a-modal>
 
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, h, ref ,computed,reactive, toRefs} from "vue";
+import { defineComponent, h, ref ,computed,reactive, nextTick} from "vue";
 import { LoadingOutlined } from "@ant-design/icons-vue";
 import { useStore } from "vuex";
 import GO from "@/tool/GO";
 import moodb from "@/tool/moodb";
 import draggable from 'vuedraggable'
+import { Https } from "@/tool/https";
+import { getCookie } from "@/tool/cookie";
 import domTurnImg from '@/tool/domTurnImg'
+import { getUploadUrl } from "@/tool/util";
+
 export default defineComponent({
 	props:["moodb_className",'flex_direction'],
 	components: {
 		draggable
     },
     setup(prop) {
-        let fileList: any = ref([]);
         let layout: any = ref(false);
         let templateFileList: any = ref([]);
         let openClick: any = ref(1);
 		let drag = false;
 		let layoutList:any = ref([])
 		const content = ref<HTMLElement | null>(null);
+		let loadingShow = ref(false)
         return {
-            fileList,
             layout,
             templateFileList,
             openClick,
 			drag,
 			layoutList,
 			content,
+			loadingShow
         };
     },
     data() {
         return {
-            indicator: h(LoadingOutlined, {
-                style: {
-                    fontSize: "2.4rem",
-                },
-                spin: true,
-            }),
             // moodTemplateId: "", //模板id
             store: useStore(),
 
@@ -132,11 +146,19 @@ export default defineComponent({
 			moodbList:{},
 			moodbClassName:[],
 			setabsolute:false,
+			token: "",
+            uploadUrl: "",
+			upload: {
+                isPin: 0,
+                level1Type: "Moodboard",
+                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            },
         };
     },
 
     mounted() {
-		
+		this.token = getCookie("token") || "";
+        this.uploadUrl = getUploadUrl();
     },
 	directives:{
 		//操作移动
@@ -260,27 +282,34 @@ export default defineComponent({
 		},
 		//操作旋转
 		rotote:{
+
 			mounted(el){
 				let mouse = true;
 				let angle :any = 0
 				let num:any
+				let x = 0
+				let y = 0
 				let elParent = el.parentNode.parentNode
-
 				if(document.defaultView){
-					num = Number(document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split(',')[3])
+					let transform = document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split('(')[1].split(',')
+					num = Number(transform[3])
 				}
 				// 添加鼠标按下事件监听器
 				el.addEventListener('mousedown', (e:MouseEvent) => {
 					e.stopPropagation()
 					mouse = true;
-					let eX = e.clientX - (e.offsetX + el.offsetLeft) + el.nextSibling.offsetLeft+el.nextSibling.offsetWidth/2
-					let eY = e.clientY - (e.offsetY + el.offsetTop) + el.nextSibling.offsetTop+el.nextSibling.offsetHeight/2
+					// let eX = (e.pageX - el.offsetLeft)  + el.offsetLeft
+					// let eY = elParent.offsetTop + el.offsetTop
+					var info = el.getBoundingClientRect();
+					let eX = info.x + info.width / 2;
+					let eY = info.y + info.height / 2;
+					
 					document.addEventListener('mousemove', (e:MouseEvent) => {
 					if (mouse) {
 						let X = eX 
 						let Y = eY
-						let x:any = e.pageX - X
-						let y:any = Y - e.pageY
+						let x:any = e.clientX - X
+						let y:any = Y - e.clientY
 						angle = Math.atan2(x,y)*(180 / Math.PI)
 						elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
 						el.style.transform = "translate(-50%,-50%) rotateZ("+ angle + "deg)"
@@ -290,6 +319,8 @@ export default defineComponent({
 					// 添加鼠标松开事件监听器
 					document.addEventListener('mouseup', () => {
 						mouse = false;
+						// x = e.pageX
+						// y = e.pageY
 					});
 				});
 				//缩放
@@ -477,20 +508,47 @@ export default defineComponent({
 					}
 				})
 			},
+		},
+		modelImg:{
+			mounted(el) {
+				let parentNode = el.parentNode
+				if(parentNode.offsetHeight > parentNode.offsetWidth){
+					el.style.height = 100+'%'
+					el.style.width = 'auto'
+				}else{
+					el.style.width = 100+'%'
+					el.style.height = 'auto'
+				}
+			},
+			updated (el) {
+				let parentNode = el.parentNode
+				if(parentNode.offsetHeight > parentNode.offsetWidth){
+					el.style.height = 100+'%'
+					el.style.width = 'auto'
+				}else{
+					el.style.width = 100+'%'
+					el.style.height = 'auto'
+				}
+			}
 		}
 	},
     methods: {
 		init(){
-			this.layout = !this.layout
-			let layoutList = this.store.state.UploadFilesModule.moodboard
+			let parentList:any = this.$parent
+			parentList = parentList.layoutList
+			this.layout = true
+			// let layoutList = this.store.state.UploadFilesModule.moodboard
 			this.layoutList.forEach((v:any)=>{
 				v.setPitch = false
 			})
-			this.layoutList = layoutList
+			this.layoutList = parentList
 			
-			this.moodbList = this.moodb[layoutList.length-1]
+			this.moodbList = this.moodb[parentList.length-1]
 			this.moodbClassName = this.moodb_className
 		},
+		cancelDsign(){
+			this.layout = false
+		},
 		setpitch(item:any,index:any){
 			this.layoutList.forEach((v:any)=>{
 				v.setPitch = false
@@ -516,105 +574,57 @@ export default defineComponent({
 				}
 			}
 		},
-		//开始拖拽事件
-		layoutBtnTop(){
-
-		},
-		// setmoodbClassName(){
-		// },
-		//获取图片宽高
-		// getimgWH(){
-		// 	let layoutList = [...(useStore().state.UploadFilesModule.moodboardFiles),
-		// 		...(useStore().state.UploadFilesModule.generateFiles),
-		// 		...(useStore().state.UploadFilesModule.MaterialFiles)]
-
-
-		// 	return new Promise(res => {
-		// 		var img = document.createElement("img");
-		// 		img.src = item.imgUrl
-		// 		img.addEventListener("load", function () {
-		// 			document.body.appendChild(img);
-		// 			var w = img.offsetWidth;
-		// 			var h = img.offsetHeight;
-		// 			img.remove()
-		// 			res({ w, h });
-		// 		})
-		// 	})
-		// 	layoutList.forEach(item => {
-		// 		let img = document.createElement('img')
-		// 		img.addEventListener("load",function(){
-		// 			document.body.appendChild(img);
-		// 			var w = img.offsetWidth;
-		// 			var h = img.offsetHeight;
-		// 			img.remove()
-		// 		})
-
-		// 	});
-		// },
-        // layoutcli(num: Number) {
-        //     this.openClick = num;
-		// 	if(num ==2 ){
-		// 		let material:any = this.$refs.Material
-		// 		material.init('Moodboard')
-		// 	}else if (num == 3){
-		// 		let material:any = this.$refs.Material
-		// 		material.init('generate')
-		// 	}
-        // },
-      
-
-        //随机重置图片顺序
-        // refetchTemplate() {
-        //     let arr = Array.from({ length: this.templateFileList.length });
-        //     for (let item of this.templateFileList) {
-        //         let index = this.randomRange(
-        //             0,
-        //             this.templateFileList.length,
-        //             -1
-        //         );
-        //         while (arr[index]) {
-        //             index = this.randomRange(
-        //                 0,
-        //                 this.templateFileList.length,
-        //                 -1
-        //             );
-        //         }
-        //         arr[index] = item;
-        //     }
-        //     this.templateFileList = arr;
-        // },
 		changeTemplateModal(){
 			this.layout = !this.layout
 		},
-		
         //提交模板
         submitTemplate() {
-            // this.fileList = JSON.parse(JSON.stringify(this.templateFileList));
-            // this.store.commit("setMoodboardFile", this.fileList);
-            // this.store.commit("setMoodTemplateId", this.moodTemplateId);
-            // this.changeTemplateModal();
+			this.loadingShow = true
 			this.layoutList.forEach((v:any)=>{
 				v.setPitch = false
 			})
-			let layoutCentent = document.getElementById('layoutCentent')
-			setTimeout(() => {
-			console.log(domTurnImg(layoutCentent));
-			this.layout = false
-
-			}, 0);
+			nextTick().then(async ()=>{
+				let layoutCentent = document.getElementById('layoutCentent')
+				let file = await domTurnImg(layoutCentent)
+				let param = new FormData(); 
+				param.append('inPin','0')
+				param.append('level1Type','Moodboard')
+				param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
+				param.append('file',file);
+				let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+				Https.axiosPost(Https.httpUrls.elementUpload,param,config)
+				.then((rv: any) => {
+						// console.log(rv);
+						rv.imgUrl = rv.url
+						this.layout = false
+						this.loadingShow = false
+						this.store.commit("setDisposeMoodboard", rv);
+					}
+				).catch(rv=>{
+					this.loadingShow = false
+				})
+			})
 			
         },
+		beforeUpload(){
+			
+		}
     },
 });
 </script>
 
 <style lang="less">
 .layout_modal {
+	-moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    -khtml-user-select: none;
+    user-select: none;
 	max-width: 1150px;
     .ant-modal-body {
         padding: 0;
 		// height: calc(65vh - 6.4rem);
-		height: 60rem;
+		height: 65rem;
     }
 	.ant-modal-content{
 		border-radius: 1rem;
@@ -624,25 +634,46 @@ export default defineComponent({
         // background: #f2f3fb;
         // padding-bottom: 2.9rem;
 		height: 100%;
-        .layout_header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 0 2rem 0 2.5rem;
-            height: 6.6rem;
+		.collection_title{
+			position: absolute;
+			top: 4rem;
+			display: flex;
+			font-size: 1.8rem;
+			font-weight: 900;
+			color: rgba(0,0,0,.65);
+			align-items: center;
+			.collection_title_text{
+				margin-right: 4rem;
+			}
+			.collection_title_text_intro{
+				font-size: 1.2rem;
+				font-weight: 400;
+				color: rgba(0,0,0,.45);
+			}
+		}
+		.collection_closeIcon{
+			position: absolute;
+			top: 2rem;
+			right: 2rem;
+			cursor: pointer;
+			width: 4rem;
+			height: 4rem;
+			display: flex;
+			align-items: center;
+			justify-content: center;
 
-            .layout_title {
-                font-size: 1.8rem;
-                font-weight: 500;
-                color: #030303;
-            }
-
-            .close_icon {
-                font-size: 1.8rem;
-                color: #aeb2b7;
-                cursor: pointer;
-            }
-        }
+			.fi-rr-cross-small::before{
+				padding: .2rem;
+				border-radius: 5px;
+				border: solid 2px rgba(0, 0, 0, 0.25);
+				transition: 1s all;
+				color: rgba(0, 0, 0, 0.55);
+			}
+			&.collection_closeIcon:hover .fi-rr-cross-small::before{
+				border: solid 2px rgba(0, 0, 0, 0.55);
+				color: rgba(0, 0, 0, 1);
+			}
+		}
 		.layout_nav{
 			display: flex;
 			margin-top: 2rem;
@@ -798,6 +829,7 @@ export default defineComponent({
 					// object-fit: cover;
 					// width: 100%;
 					// height: 100%;
+					pointer-events: none;
 					float: left;
 					user-select:none;
 					-webkit-user-drag: none;