导出可拖拽功能

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>