退款弹窗

src/views/orderList/orderDetails.vue

@@ -98,10 +98,12 @@
     <div style="display: flex; justify-content: center; margin-top: 10px">
       <el-button type="danger" @click="refund">退款</el-button>
     </div>
+    <refundProcess v-if="showRefundDialog" v-model="showRefundDialog" :id="id" />
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup name="orderDetails">
+import refundProcess from './refundProcess.vue';
 const { proxy } = getCurrentInstance();
 const props = defineProps({
   id: {
@@ -109,7 +111,8 @@ const props = defineProps({
     required: true
   }
 });
-const tableData = [
+const showRefundDialog = ref(false);
+const tableData = ref([
   {
     data1: '用户信息查询接口',
     data2: '正常',
@@ -131,7 +134,7 @@ const tableData = [
     data4: '2023-11-15 16:05:33',
     data5: '支付网关'
   }
-];
+]);
 
 const emits = defineEmits(['close']);
 
@@ -140,7 +143,7 @@ const handleBack = () => {
 };
 
 const refund = () => {
-  proxy?.$modal.confirm('是否确认退款？').then(() => {});
+  showRefundDialog.value = true;
 };
 </script>
 

src/views/orderList/refundProcess.vue

@@ -0,0 +1,68 @@
+<template>
+  <el-dialog v-model="show" title="退款处理" width="680px" top="5vh" append-to-body>
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
+      <el-form-item label="订单名称：" prop="name">
+        <el-input v-model="form.name" type="textarea" autosize disabled />
+      </el-form-item>
+      <el-form-item label="退款原因：" prop="reason">
+        <el-input v-model="form.reason" placeholder="请输入退款原因" type="textarea" autosize />
+      </el-form-item>
+      <el-form-item label="上传附件：" prop="file">
+        <FileUpload v-model="form.file" :file-type="['jpg', 'jpeg', 'png']" :limit="9" :file-size="5" class="upload-box" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer" style="float: right; padding-bottom: 20px">
+        <el-button type="primary" @click="handleConfirm">确认</el-button>
+        <el-button @click="handleCancel">取消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup name="refundProcess">
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  }
+});
+const emits = defineEmits(['update:modelValue']);
+const show = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(newValue) {
+    emits('update:modelValue', newValue);
+  }
+});
+
+const rules = reactive({
+  reason: [{ required: true, message: '退款原因不能为空', trigger: 'blur' }]
+});
+const formRef = ref(null);
+const form = ref({
+  name: '',
+  reason: '',
+  files: ''
+});
+
+const handleCancel = () => {
+  if (formRef.value) {
+    formRef.value.resetFields(); // 重置表单并清除校验状态
+  }
+  emits('update:modelValue', false);
+};
+
+const handleConfirm = () => {
+  formRef.value?.validate((valid) => {
+    if (valid) {
+      proxy.$modal.msgSuccess('退款成功');
+      handleCancel();
+    }
+  });
+};
+</script>
+
+<style lang="scss" scoped></style>