From e5489e4dc1beec1d790292b4a1b79115d03fb1b1 Mon Sep 17 00:00:00 2001
From: X1627315083 <1627315083@qq.com>
Date: Tue, 27 Feb 2024 15:15:38 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=BC=E5=87=BA=E5=8F=AF=E6=8B=96=E6=8B=BD?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/style.css                    |  44 ++-
 src/assets/style/style.less                   |  35 ++-
 src/component/Detail/DesignDetail.vue         |   4 +-
 src/component/Detail/DesignPrintOperation.vue |   2 +-
 .../Detail/DesignPrintOperationMobile.vue     |   2 +-
 src/component/HomePage/ExportModel.vue        | 274 +++++++++++++++++-
 src/component/Pay/payOrder.vue                | 105 ++++++-
 src/tool/canvasDrawing.js                     |   0
 8 files changed, 405 insertions(+), 61 deletions(-)
 create mode 100644 src/tool/canvasDrawing.js

diff --git a/src/assets/style/style.css b/src/assets/style/style.css
index 02c177d7..915daa2e 100644
--- a/src/assets/style/style.css
+++ b/src/assets/style/style.css
@@ -13,6 +13,7 @@ body,
 }
 input {
   outline: none;
+  border: 0.1rem solid #dcdfe6;
 }
 ul,
 li {
@@ -617,6 +618,18 @@ li {
   border: solid 2px rgba(0, 0, 0, 0.55);
   color: #000000;
 }
+.modal_title_text {
+  font-size: var(--aida-fsize2);
+  font-weight: 900;
+  color: rgba(0, 0, 0, 0.65);
+  align-items: center;
+  margin-bottom: calc(2rem*1.2);
+}
+.modal_title_text .modal_title_text_intro {
+  font-size: var(--aida-fsize1-4);
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.45);
+}
 .collection_modal .ant-modal-body,
 .payOrder_modal .ant-modal-body,
 .design_detail_modal_component .ant-modal-body,
@@ -625,28 +638,6 @@ li {
 .Export .ant-modal-body {
   overflow-y: hidden;
 }
-.collection_modal .design_title_text,
-.payOrder_modal .design_title_text,
-.design_detail_modal_component .design_title_text,
-.designOpenrtion_modal .design_title_text,
-.library_page .design_title_text,
-.Export .design_title_text {
-  font-size: var(--aida-fsize2);
-  font-weight: 900;
-  color: rgba(0, 0, 0, 0.65);
-  align-items: center;
-  margin-bottom: calc(2rem*1.2);
-}
-.collection_modal .design_title_text .design_title_text_intro,
-.payOrder_modal .design_title_text .design_title_text_intro,
-.design_detail_modal_component .design_title_text .design_title_text_intro,
-.designOpenrtion_modal .design_title_text .design_title_text_intro,
-.library_page .design_title_text .design_title_text_intro,
-.Export .design_title_text .design_title_text_intro {
-  font-size: var(--aida-fsize1-4);
-  font-weight: 400;
-  color: rgba(0, 0, 0, 0.45);
-}
 .collection_modal .ant-upload.ant-upload-select-picture-card,
 .payOrder_modal .ant-upload.ant-upload-select-picture-card,
 .design_detail_modal_component .ant-upload.ant-upload-select-picture-card,
@@ -722,18 +713,21 @@ li {
 }
 .design_detail_modal_component .ant-upload-list-picture-card-container,
 .designOpenrtion_modal .ant-upload-list-picture-card-container,
-.UpgradePlan_modal .ant-upload-list-picture-card-container {
+.UpgradePlan_modal .ant-upload-list-picture-card-container,
+.refund_reason .ant-upload-list-picture-card-container {
   display: none !important;
 }
 .design_detail_modal_component .ant-upload-picture-card-wrapper,
 .designOpenrtion_modal .ant-upload-picture-card-wrapper,
-.UpgradePlan_modal .ant-upload-picture-card-wrapper {
+.UpgradePlan_modal .ant-upload-picture-card-wrapper,
+.refund_reason .ant-upload-picture-card-wrapper {
   width: auto;
   vertical-align: top;
 }
 .design_detail_modal_component .subitOkPreviewBtn,
 .designOpenrtion_modal .subitOkPreviewBtn,
-.UpgradePlan_modal .subitOkPreviewBtn {
+.UpgradePlan_modal .subitOkPreviewBtn,
+.refund_reason .subitOkPreviewBtn {
   background-color: #38205b;
   color: #fff;
   cursor: pointer;
diff --git a/src/assets/style/style.less b/src/assets/style/style.less
index cc3623dc..f9ba0b1e 100644
--- a/src/assets/style/style.less
+++ b/src/assets/style/style.less
@@ -12,12 +12,16 @@ html,body,#app{
 	--aida-fsize1-4: calc(1.4rem*1.2);
 }
 input{
-	outline:none
+	outline:none;
+	outline: none;
+	border: .1rem solid #dcdfe6;
 }
 ul,li{
 	list-style: none;
 	padding: 0;
 }
+input:focus{
+}
 .page_content{
     // width: 1440px;
     max-width: 100%;
@@ -56,6 +60,8 @@ ul,li{
   .ant-slider{
    margin: 0;
    width: 12rem;
+   
+   
 
    .ant-slider-rail{
      height: 0.6rem;
@@ -721,24 +727,25 @@ ul,li{
 		color: rgba(0, 0, 0, 1);
 	}
 }
+.modal_title_text{
+	font-size: var(--aida-fsize2);
+	font-weight: 900;
+	color: rgba(0,0,0,.65);
+	align-items: center;
+	margin-bottom: calc(2rem*1.2);
+	.modal_title_text_intro{
+		font-size: var(--aida-fsize1-4);
+		font-weight: 400;
+		color: rgba(0,0,0,.45);
+	}
+}
 //collection 弹窗
 .collection_modal,.payOrder_modal,.design_detail_modal_component,.designOpenrtion_modal,.library_page,.Export{
 	
     .ant-modal-body{
         overflow-y: hidden;
     }
-	.design_title_text{
-		font-size: var(--aida-fsize2);
-		font-weight: 900;
-		color: rgba(0,0,0,.65);
-		align-items: center;
-		margin-bottom: calc(2rem*1.2);
-		.design_title_text_intro{
-			font-size: var(--aida-fsize1-4);
-			font-weight: 400;
-			color: rgba(0,0,0,.45);
-		}
-	}
+	
     .ant-upload.ant-upload-select-picture-card{
         background: #FFFFFF;
 		width: calc(6rem*1.2);
@@ -791,7 +798,7 @@ ul,li{
 		}
 	}
 }
-.design_detail_modal_component,.designOpenrtion_modal,.UpgradePlan_modal{
+.design_detail_modal_component,.designOpenrtion_modal,.UpgradePlan_modal,.refund_reason{
 	.ant-upload-list-picture-card-container{
 		display: none !important;
 	}
diff --git a/src/component/Detail/DesignDetail.vue b/src/component/Detail/DesignDetail.vue
index 3271f1b3..41570a7b 100644
--- 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>
diff --git a/src/component/Detail/DesignPrintOperation.vue b/src/component/Detail/DesignPrintOperation.vue
index 68be3558..e0082b40 100644
--- 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()">
diff --git a/src/component/Detail/DesignPrintOperationMobile.vue b/src/component/Detail/DesignPrintOperationMobile.vue
index 03de1dc3..f5b4b02f 100644
--- 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()">
diff --git a/src/component/HomePage/ExportModel.vue b/src/component/HomePage/ExportModel.vue
index b111c26b..d1e1c1ae 100644
--- 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{
diff --git a/src/component/Pay/payOrder.vue b/src/component/Pay/payOrder.vue
index 7f930f1a..ff7a72f4 100644
--- 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>
\ No newline at end of file
diff --git a/src/tool/canvasDrawing.js b/src/tool/canvasDrawing.js
new file mode 100644
index 00000000..e69de29b