导出可拖拽功能

2024-02-27 15:15:38 +08:00
parent 0c9885a06c
commit e5489e4dc1
8 changed files with 405 additions and 61 deletions
--- a/src/component/Detail/DesignDetail.vue
+++ b/src/component/Detail/DesignDetail.vue
@@ -11,9 +11,9 @@
 			:keyboard="false"
 			:closable="false"
        >
-			<div class="design_title_text">
+			<div class="modal_title_text">
 				<div>{{ $t('DesignDetail.Details') }}</div>
-				<div class="design_title_text_intro">{{ $t('DesignDetail.EditDetails') }}</div>
+				<div class="modal_title_text_intro">{{ $t('DesignDetail.EditDetails') }}</div>
 			</div>
 			<div class="design_closeIcon" @click.stop="closeModal('')">
 				<i class="fi fi-rr-cross-small"></i>
--- a/src/component/Detail/DesignPrintOperation.vue
+++ b/src/component/Detail/DesignPrintOperation.vue
@@ -13,7 +13,7 @@
            :mask="true"
        >
            <div class="designOpenrtion_content">
-				<div class="design_title_text">
+				<div class="modal_title_text">
 					<div>{{ $t('DesignPrintOperation.Placement') }}</div>
 				</div>
 				<div class="design_closeIcon" @click.stop="closeModal()">
--- a/src/component/Detail/DesignPrintOperationMobile.vue
+++ b/src/component/Detail/DesignPrintOperationMobile.vue
@@ -13,7 +13,7 @@
            :mask="true"
        >
            <div class="designOpenrtion_content">
-				<div class="design_title_text">
+				<div class="modal_title_text">
 					<div>{{ $t('DesignPrintOperation.Placement') }}</div>
 				</div>
 				<div class="design_closeIcon" @click.stop="closeModal()">
--- a/src/component/HomePage/ExportModel.vue
+++ b/src/component/HomePage/ExportModel.vue
@@ -9,7 +9,6 @@
 			:keyboard="false"
        >
        <div class="UpgradePlan_closeIcon">
-				
 			<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
 		</div>
 		<div class="UpgradePlan_content">
@@ -19,15 +18,36 @@
 			<canvas ref="exportCanvas"></canvas>
 		</div> -->
 		<div class="exportCanvasBox">
-			<ExportNewCoolection ref="ExportNewCoolection"></ExportNewCoolection>
+			<div class="exportCanvasBox_left">
+				<div class="exportCanvasBox_title">
+					Canvas Title
+				</div>
+				<label>
+					<div>Width:</div>
+					<input type="number" @input="setMaxInput('width',600)" v-model="canvasWH.width">
+				</label>
+				<label>
+					<div>Height:</div>
+					<input type="number" @input="setMaxInput('height',1000)" v-model="canvasWH.height">
+				</label>
+			</div>
+			<div class="exportCanvasBox_center">
+				<!-- <canvas ref="canvasDom" id="exportCanvas"></canvas> -->
+			</div>
+			<!-- <ExportNewCoolection ref="ExportNewCoolection"></ExportNewCoolection> -->
+			<div class="exportCanvasBox_right">
+				<div class="" @click="setExport">export</div>
+			</div>
 		</div>
 	</a-modal>
 </template>
-<script lang="ts">
-import { defineComponent, computed, h, ref, nextTick, inject } from "vue";
+<script>
+import { defineComponent, computed, h, ref, nextTick, inject,reactive, onMounted } from "vue";
 import { Https } from "@/tool/https";
 import scaleImage from "@/component/HomePage/scaleImage.vue";
 import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
+import { useStore } from "vuex";
+import { forEach } from "jszip";
 export default defineComponent({
 	components: {
 		scaleImage,	
@@ -35,11 +55,223 @@ export default defineComponent({
 	},
    props: ["msg",'sketchCatecoryList'],
    setup() {
-        // console.log(prop.msg);
+        const store = useStore();
+
        let showUpgradePlan = ref(false)
+		let canvas = reactive({})
+		// let canvasDom = ref()
+		let canvasWH = ref({
+			width:400,
+			height:1400,
+		})
+
+		let sketch = computed(()=>{
+			return store.state.HomeStoreModule.showSketchList})
+		// let sketch = ref([[],[],[]])
+		let sketchList = computed(()=>{
+			return store.state.UploadFilesModule.showSketchboard})
+		let allBoardData = computed(()=>{return store.state.UploadFilesModule.allBoardData})
+        let likeDesignCollectionList = computed(()=>{return store.state.HomeStoreModule.likeDesignCollectionList})
+		let allImage = Object.assign(allBoardData.value,{likeDesignCollectionList:likeDesignCollectionList.value})
+		let init = () =>{
+			showUpgradePlan.value = true
+			nextTick().then(async ()=>{
+				let canvasBox = document.querySelector('.Export .exportCanvasBox_center')
+				canvasBox.innerHTML = ''; // 清空原有内容
+				var canvasDom = document.createElement('canvas')
+				canvasBox.appendChild(canvasDom);
+				canvas = new fabric.Canvas(canvasDom, {
+					backgroundColor: "rgba(255, 255, 255)",
+					// fill: '#ffde7d',
+					// selection: false, //设置多选
+					width: canvasWH.value.width,
+					height: canvasWH.value.height,
+					isDrawingMode: false, // 开启绘图模式
+				});
+				let disposeMoodboardShow = true
+				let arr = ['disposeMoodboard','moodboardFiles','printboardFiles','colorBoards','sketchboardFiles','likeDesignCollectionList']
+				let position = { //设置每个图形位置的初始值
+					x:0,
+					y:0,
+					height:0,
+				}
+				let sketchGrouping = 3//sketch分组
+				let likeDesign = 4//整体图分组
+				let oldKey = ''
+				let margin = 20//每个图形边距
+				// arr.forEach((item,index)=>{
+				for (const item of arr) {
+					for (const key in allBoardData.value) {
+						if(item == key){//循环渲染顺序
+							let setImgWidth = canvasWH.value.width//这是设置画布等宽
+							let sketchGroupingItem = []
+							if(disposeMoodboardShow && item == 'disposeMoodboard' && allBoardData.value[key].length != 0 && allBoardData.value[key][0] != null){//如果是mood 需要判断用户是否点击layout
+								disposeMoodboardShow = false
+							}
+							if(item == 'moodboardFiles' && !disposeMoodboardShow){
+								continue
+							}
+							if(item == 'printboardFiles'){
+								setImgWidth = canvasWH.value.width/8
+							}
+							if(item == 'sketchboardFiles'){
+								setImgWidth = (canvasWH.value.width-(sketchGrouping-1)*20)/sketchGrouping
+							}
+							if(item == 'likeDesignCollectionList'){
+								setImgWidth = (canvasWH.value.width-(likeDesign-1)*20)/likeDesign
+							}
+							for (const [allItemIndex, allItem] of allBoardData.value[key].entries()) {
+								await new Promise((resolve,reject)=>{
+									if(key == 'colorBoards'){
+										position.x = 0
+										position.y += position.height
+										var text = new fabric.Text(allItem.tcx, {
+											left: 0,
+											top: 60,
+											fontSize: 14,
+											fontFamily: 'Arial',
+											textAlign: "left",
+											fill: 'black',
+										});
+										let text1 = new fabric.Text(allItem.name, {
+											left:0,
+											top: 80,
+											width:20,
+											fontSize: 14,
+											fontFamily: 'Arial',
+											textAlign: "left",
+										});
+										var color = new fabric.Rect({
+											width: 130>text1.width?130:text1.width,
+											height: 60,
+											textAlign: "left",
+											fill: `rgb(${allItem.r},${allItem.g},${allItem.b})`,
+										});
+										var group = new fabric.Group([color, text, text1], {
+											left: position.x,
+											top: position.y,
+											width:130,
+											fill:'rgb(255,255,255)',
+											cornerSize: 10, // 选中时，角的大小为20
+											transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
+											stroke: '#212121',
+											strokeWidth: 1,
+										});
+										// 将矩形对象添加到 canvas 中
+										canvas.add(group);
+										position.height = group.height+margin
+										resolve()
+									}else{
+										let itemCanvasImg = allItem.imgUrl
+										if(key == 'likeDesignCollectionList'){
+											itemCanvasImg = allItem.designOutfitUrl
+										}
+										fabric.Image.fromURL(itemCanvasImg, (img) => {
+											let proportion = img.height/img.width//计算图形宽高比例
+											let scaleWH = setImgWidth/img.width//计算放到画布上缩小倍率
+											if((position.x+img.width*scaleWH > canvasWH.value.width) || (oldKey != key)){
+												position.x = 0
+												position.y += position.height
+											}
+											img.set({
+												// width: setImgWidth/img.width,
+												// height: canvasWH.value.height/img.height,
+												left: position.x,
+												top: position.y,
+												scaleX: setImgWidth/img.width,
+												scaleY: img.width*proportion*scaleWH/img.height,
+												cornerSize: 10, // 选中时，角的大小为20
+												// lockRotation:true,
+												// lockScalingX:true,
+												lockRotation:true,
+												transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
+												// cornerColor: "#a1de93", // 选中时，角的颜色是 青色
+											},{ crossOrigin: 'Anonymous' })
+											position.height = img.height*scaleWH+margin
+											if(key == 'sketchboardFiles'){
+												position.x += img.width*scaleWH+margin
+												if(sketchGroupingItem.length>=3){
+												}else{
+													sketchGroupingItem.push(JSON.parse(JSON.stringify(position)))
+												}
+												if(sketchGroupingItem.length>=3){
+													let sketchXyIndex = {
+														maxIndex:0,
+														maxNum: 9999999999,
+														minNum:0,
+														minIndex:0,
+													}
+													sketchGroupingItem.forEach((sketchItem,sketchIndex)=>{
+														if(sketchItem.height < sketchXyIndex.maxNum){
+															sketchXyIndex.maxNum = sketchItem.height
+															sketchXyIndex.maxIndex = sketchIndex
+														}
+														if(sketchItem.height > sketchXyIndex.minNum){
+															sketchXyIndex.minNum = sketchItem.height
+															sketchXyIndex.minIndex = sketchIndex
+														}
+													})
+													if(allBoardData.value[key].length == allItemIndex+1){
+														position = sketchGroupingItem[sketchXyIndex.minIndex]
+													}else{
+														position = sketchGroupingItem[sketchXyIndex.maxIndex]
+														position.y += position.height
+														position.x -= img.width*scaleWH+margin
+													}
+												}
+												
+											}else{
+												position.x += img.width*scaleWH
+											}
+											img.lock_rotation = true
+											canvas.add(img);
+											oldKey = key
+											resolve()
+										})
+									}
+								});
+							}
+						}
+					}
+				}
+
+			})
+		}
+		//设置导出
+		let setExport = ()=>{
+			var imageDataURL = canvas.toDataURL({
+				format: 'png', // 导出格式为 PNG
+				quality: 1 // 图片质量为 1（最高质量）
+			});
+			console.log(imageDataURL);
+		}
+		//关闭画布
+		let cancelDsign = () =>{
+			showUpgradePlan.value = false
+		}
+		//设置画布宽高
+		let setMaxInput = (str,maxNum) =>{
+			if(str == 'width' && canvasWH.value.width >= maxNum){
+				canvasWH.value.width = maxNum
+			}else if(str == 'height' && canvasWH.value.height >= maxNum){
+				canvasWH.value.height = maxNum
+			}
+			canvas.setHeight(canvasWH.value.height);
+			canvas.setWidth(canvasWH.value.width);
+		}
 	
+		onMounted (()=>{
+			
+ 			
+		})
+
        return {
 			showUpgradePlan,
+			canvasWH,
+			init,
+			setExport,
+			cancelDsign,
+			setMaxInput,
        };
    },
    data(prop) {
@@ -66,13 +298,9 @@ export default defineComponent({
 		
 	},
    methods: {
-        init(){
-			this.showUpgradePlan = true
-		},
+        
+		
 		
-		cancelDsign(){
-			this.showUpgradePlan = false
-		},
    },
 });
 </script>
@@ -115,6 +343,29 @@ export default defineComponent({
 	.exportCanvasBox{
 		flex: 1;
 		overflow-x: hidden;
+		display: flex;
+		margin-top: 2rem;
+		.exportCanvasBox_title{
+			margin-bottom: 1rem;
+			font-size: 1.8rem;
+			font-weight: 600;
+		}
+		.exportCanvasBox_left{
+			label{
+				cursor: pointer;
+				display: flex;
+				div{
+					width: 5rem;
+				}
+				input{
+					width: 10em;
+				}
+			}
+		}
+		.exportCanvasBox_center{
+			height: 100%;
+			overflow-x: hidden;
+		}
 		.export_new_collection_review{
 			position: initial;
 			margin: 10rem auto;
@@ -141,6 +392,7 @@ export default defineComponent({
 			padding: calc(5rem*1.2) calc(5rem*1.2) !important;
 			// height: calc(65vh - 6.4rem);
 			height: calc(65rem*1.2);
+			background: #f9fafb;
 		}
 		//进度完成字体颜色
 		.ant-progress-circle.ant-progress-status-success .ant-progress-text{
--- a/src/component/Pay/payOrder.vue
+++ b/src/component/Pay/payOrder.vue
@@ -97,8 +97,9 @@
 			class="modal_component refund_reason"
 			v-model:visible="showRefundReason"
 			:footer="null"
-			width="30%"
+			width="50%"
 			:maskClosable="false"
+			:mask="false"
 			:centered="true"
 			:closable="false"
 			wrapClassName="#app"
@@ -110,8 +111,31 @@
 			</div> -->
 				<i class="fi fi-rr-cross-small" @click.stop="cancelRefundreason()"></i>
 			</div>
+			<div class="modal_title_text">
+				Refund Reason
+			</div>
+			<div class="reason">
+				<label>
+					<div>
+						<input name="reason" type="radio" @click="getReasonCategory" value="noLike" v-model="reason">
+						<span>Dislike</span>
+					</div>
+				</label>
+				<label>
+					<div>
+						<input name="reason" type="radio" @click="getReasonCategory" value="Rests" v-model="reason">
+						<span>Rests</span>
+					</div>
+					
+					<textarea v-show="reason == 'Rests'" name="" id="" cols="40" rows="10" v-model="reasonTextarea"></textarea>
+				</label>
+			</div>
+			<div class="subitOkPreviewBtn" @click="setReason">OK</div>
 		</a-modal>
    </a-modal>
+	<div class="mark_loading" v-show="loadingShow">
+		<a-spin size="large" />
+	</div>
 </template>
 <script lang="ts">
 import { defineComponent, ref, createVNode, computed, nextTick } from "vue";
@@ -193,6 +217,10 @@ export default defineComponent({
        let showPayOrder: any = ref(false);
        let showRefundReason: any = ref(false);
        let collectionList: any = ref([]);
+        let record: any = ref();//订单编号
+        let reason: any = ref('noLike');//原因
+        let reasonTextarea: any = ref();//原因
+        let loadingShow: any = ref(false);//原因
        let { t } = useI18n();
        return {
            rangePickerValue,
@@ -200,7 +228,11 @@ export default defineComponent({
            collectionList,
            showPayOrder,
 			showRefundReason,
+			record,
+			reason,
+			reasonTextarea,
            renameData,
+			loadingShow,
            t,
        };
    },
@@ -235,6 +267,7 @@ export default defineComponent({
            this.showPayOrder = false;
        },
 		cancelRefundreason(){//关闭退款页面
+			this.record = ''
            this.showRefundReason = false;
 		},
        //改变页码
@@ -310,17 +343,35 @@ export default defineComponent({

        refund(record: any) {
            // this.$router.push({name:'home',params: {id:record.id}})
-            console.log(record);
+			this.record = record.orderNo
 			this.showRefundReason = true
-            Https.axiosPost(
-                Https.httpUrls.tradeRefund + `/${record.orderNo}/${"123"}`,
+            
+        },
+		getReasonCategory(){
+			if(this.reason == 'Rests'){
+			}else{
+				this.reasonTextarea = ''
+			}
+		},
+		setReason(){
+			let reason = this.reason
+			this.loadingShow = true
+			if(this.reason == 'Rests'){
+				// console.log(this.reasonTextarea);
+				reason = this.reasonTextarea?this.reasonTextarea:this.reason
+			}
+			// return
+			Https.axiosPost(
+                Https.httpUrls.tradeRefund + `/${this.record}/${reason}`,
                {}
            ).then((rv: any) => {
 				console.log(rv);
 				this.getHistoryList()
+				this.loadingShow = false
+				this.showRefundReason = false
 			})
 			.catch((res) => {});
-        },
+		},
    },
 });
 </script>
@@ -350,11 +401,13 @@ export default defineComponent({
        }
    }
 }
-.refund_reason{
+
+.modal_component.refund_reason{
    .ant-modal-content {
 		.ant-modal-body {
 			// height: calc(65vh - 6.4rem);
-			height: calc(30rem * 1.2);
+			padding: 3rem;
+			height: calc(40rem * 1.2);
 		}
 	}
 	
@@ -514,4 +567,42 @@ export default defineComponent({
        }
    }
 }
+.refund_reason{
+	.reason{
+		height: calc(27rem * 1.2);
+		display: flex;
+		flex-direction: column;
+		padding: 0 3rem;
+		font-size: 1.6rem;
+		label{
+			display: flex;
+			align-items: flex-start;
+			flex-direction: column;
+			overflow: hidden;
+			div{
+				display: flex;
+				justify-content: center;
+				margin-bottom: 1rem;
+			}
+			input,span{
+				cursor: pointer;
+			}
+			span{
+				margin: 0 1rem;
+			}
+			textarea{
+				flex: 1;
+				width: 100%;
+				outline-color:#767676;
+				resize: none;
+			}
+			textarea:focus-visible {
+				border-color: #767676;
+			}
+		}
+	}
+	.subitOkPreviewBtn{
+		margin-top: 1rem;
+	}
+}
 </style>