From daae899f314d378fb6031dfaeec91f697373eef6 Mon Sep 17 00:00:00 2001
From: dzl <863620989@qq.com>
Date: Thu, 15 May 2025 18:10:33 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=A2=E5=8A=A1=E4=B8=AD=E5=BF=83=E5=AE=A1?=
 =?UTF-8?q?=E6=A0=B8=E8=A1=A8=E5=8D=95=E3=80=81=E7=A1=AE=E8=AE=A4=E9=80=80?=
 =?UTF-8?q?=E6=AC=BE=E8=A1=A8=E5=8D=95=E7=BC=96=E5=86=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ebike-operate/src/apis/call.js                |  47 +-
 .../RefundApplication/CyclingOrder/index.vue  | 443 ++++++++++--------
 .../form/confirmrefund/ConfirmRefund.vue      | 155 ++++++
 .../refundorderrevie/RefundOrderRevie.vue     | 212 +++++++++
 4 files changed, 654 insertions(+), 203 deletions(-)
 create mode 100644 ebike-operate/src/views/form/confirmrefund/ConfirmRefund.vue
 create mode 100644 ebike-operate/src/views/form/refundorderrevie/RefundOrderRevie.vue

diff --git a/ebike-operate/src/apis/call.js b/ebike-operate/src/apis/call.js
index 2853e4b..08bf0b7 100644
--- a/ebike-operate/src/apis/call.js
+++ b/ebike-operate/src/apis/call.js
@@ -1,30 +1,39 @@
 import httpInstance from '@/utils/request.js'
 
 const callOperate = (url, parmas = {}, method = "post") => {
-  return httpInstance({
-    baseURL: '/operate',
-    url: url,
-    method: method,
-    data: parmas
-  })
+    return httpInstance({
+        baseURL: '/operate',
+        url: url,
+        method: method,
+        data: parmas
+    })
 }
 
 const callUser = (url, parmas = {}, method = "post") => {
-  return httpInstance({
-    baseURL: '/user',
-    url: url,
-    method: method,
-    data: parmas
-  })
+    return httpInstance({
+        baseURL: '/user',
+        url: url,
+        method: method,
+        data: parmas
+    })
 }
 
 const callOrder = (url, parmas = {}, method = "post") => {
-  return httpInstance({
-    baseURL: '/order',
-    url: url,
-    method: method,
-    data: parmas
-  })
+    return httpInstance({
+        baseURL: '/order',
+        url: url,
+        method: method,
+        data: parmas
+    })
 }
 
-export { callOperate, callUser, callOrder }
+const callPayment = (url, parmas = {}, method = "post") => {
+    return httpInstance({
+        baseURL: '/payment',
+        url: url,
+        method: method,
+        data: parmas
+    })
+}
+
+export { callOperate, callUser, callOrder, callPayment }
diff --git a/ebike-operate/src/views/FinanCecenter/RefundApplication/CyclingOrder/index.vue b/ebike-operate/src/views/FinanCecenter/RefundApplication/CyclingOrder/index.vue
index 0341b8b..a9ff8b9 100644
--- a/ebike-operate/src/views/FinanCecenter/RefundApplication/CyclingOrder/index.vue
+++ b/ebike-operate/src/views/FinanCecenter/RefundApplication/CyclingOrder/index.vue
@@ -56,16 +56,22 @@
         </a-form-item>
       </a-col>
       <a-col
-        :xl="6"
+        :xl="8"
         :lg="12"
         :md="12"
         :sm="24"
         :xs="24"
         v-if="activeKey == '3'"
       >
-        <a-form-item label="退款时间">
+        <a-form-item>
+          <template #label>
+            退款时间
+            <a-tooltip title="退款完成时间">
+              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
+            </a-tooltip>
+          </template>
           <a-range-picker
-            valueFormat="YYYY-MM-DD HH:mm"
+            valueFormat="YYYY-MM-DD"
             v-model:value="queryform.reTime"
             :placeholder="['请选择退款时间起', '请选择退款时间止']"
           />
@@ -95,20 +101,6 @@
       </a-col>
     </a-row>
   </a-form>
-  <!-- 数据操作 -->
-  <a-space style="margin-bottom: 10px">
-    <a-button
-      style="background-color: #5cc750"
-      type="primary"
-      class="ele-btn-icon"
-      @click="handleAdd('新增账号')"
-    >
-      <template #icon>
-        <plus-outlined />
-      </template>
-      <span>新增</span>
-    </a-button>
-  </a-space>
   <a-table
     bordered
     :pagination="pagination"
@@ -116,33 +108,96 @@
     :dataSource="dataSource"
     :scroll="{ x: 'max-content' }"
   >
-    <template #bodyCell="{ column }">
+    <template #bodyCell="{ column ,record}">
+      <template v-if="column.key === 'arrivedState'">
+        <a-tag
+          v-if="record.arrivedState == '退款成功'"
+          color="#f50"
+        >退款成功</a-tag>
+        <a-tag
+          v-if="record.arrivedState == '退款失败'"
+          color="#87d068"
+        >退款失败</a-tag>
+      </template>
+      <template v-if="column.key === 'phone'">
+        <a>{{record.phone}}</a>
+      </template>
+      <template v-if="column.key === 'cyclingOrderNumber'">
+        <a>{{record.cyclingOrderNumber}}</a>
+      </template>
       <template v-if="column.key === 'action'">
-
+        <a-space>
+          <div v-if="activeKey == '1'">
+            <a @click="handleRevie(record)">审核</a>
+          </div>
+          <div v-if="activeKey == '2'">
+            <a-popconfirm
+              title="请确认您是否要取消退款,操作后将不可恢复!"
+              ok-text="确定"
+              cancel-text="取消"
+              placement="top"
+              @confirm="handleCancel(record)"
+            >
+              <a href="#">取消退款</a>
+            </a-popconfirm>
+            <a-divider type="vertical" />
+            <a @click="handleCompleteRefund(record)">完成退款</a>
+          </div>
+        </a-space>
       </template>
     </template>
   </a-table>
+  <!-- 审核表单 -->
+  <a-modal
+    v-model:open="openRevie"
+    title="审核"
+    @ok="handleOkModalRevie"
+    @cancel="handleCancelModalRevie"
+    width="1000px"
+    :maskClosable="false"
+  >
+    <RefundOrderRevie ref="formModel"></RefundOrderRevie>
+  </a-modal>
+
+  <!-- 确认退款 -->
+  <a-modal
+    v-model:open="openConfirm"
+    title="确认退款"
+    @ok="handleOkModalConfirm"
+    @cancel="handleCancelModalConfirm"
+    width="1000px"
+    :maskClosable="false"
+  >
+    <ConfirmRefund ref="formModelConfirm"></ConfirmRefund>
+  </a-modal>
 </template>
 <script setup>
 import { ref, onMounted, reactive, nextTick } from 'vue';
 import { message } from 'ant-design-vue'
 import { callUser } from '@/apis/call.js'
 import config from '@/utils/config.js'
+import RefundOrderRevie from '@/views/form/refundorderrevie/RefundOrderRevie.vue';
+import ConfirmRefund from '@/views/form/confirmrefund/ConfirmRefund.vue';
+
+const activeKey = ref('1')
+const openRevie = ref(false);
+const formModel = ref(null);
+const openConfirm = ref(false);
+const formModelConfirm = ref(null);
 
-const activeKey = ref(1)
 const columns = ref([
   {
     title: '申请时间',
-    dataIndex: 'zoneName',
+    dataIndex: 'applyTime',
     width: 200,
-    key: 'zoneName',
+    key: 'applyTime',
     align: 'center'
   },
   {
     title: '运营区域',
-    dataIndex: 'username',
+    dataIndex: 'operationArea',
     width: 200,
-    key: 'username',
+    key: 'operationArea',
     align: 'center'
   },
   {
@@ -154,73 +209,66 @@ const columns = ref([
   },
   {
     title: '骑行订单号',
-    dataIndex: 'roleName',
+    dataIndex: 'cyclingOrderNumber',
     width: 200,
-    key: 'roleName',
+    key: 'cyclingOrderNumber',
     align: 'center'
   },
   {
     title: '本次申请退款(元)',
-    dataIndex: 'state',
+    dataIndex: 'applyRefundAmount',
     width: 200,
-    key: 'state',
+    key: 'applyRefundAmount',
     align: 'center'
   },
   {
     title: '实付金额(元)',
-    dataIndex: 'appletCount',
+    dataIndex: 'actualPayAmount',
     width: 200,
-    key: 'appletCount',
-    align: 'center'
-  },
-  {
-    title: '累计已退款(元)',
-    dataIndex: 'appletCount',
-    width: 200,
-    key: 'appletCount',
+    key: 'actualPayAmount',
     align: 'center'
   },
   {
     title: '支付方式',
-    dataIndex: 'createdAt',
+    dataIndex: 'payMethod',
     width: 200,
-    key: 'createdAt',
+    key: 'payMethod',
     align: 'center'
   },
   {
     title: '支付时间',
-    dataIndex: 'createdAt',
+    dataIndex: 'payTime',
     width: 200,
-    key: 'createdAt',
+    key: 'payTime',
     align: 'center'
   },
   {
     title: '申请原因',
-    dataIndex: 'createdAt',
+    dataIndex: 'applyReason',
     width: 200,
-    key: 'createdAt',
+    key: 'applyReason',
     align: 'center'
   },
   {
     title: '来源',
-    dataIndex: 'createdAt',
+    dataIndex: 'source',
     width: 200,
-    key: 'createdAt',
+    key: 'source',
     align: 'center'
   },
   {
     title: '申请人',
-    dataIndex: 'createdAt',
+    dataIndex: 'applicant',
     width: 200,
-    key: 'createdAt',
+    key: 'applicant',
     align: 'center'
   },
   {
     title: '操作',
     key: 'action',
-    width: 200,
+    width: 100,
     align: 'center',
-    fixed: 'right',
+    fixed: 'right'
   }
 ]);
 const queryform = ref({
@@ -277,16 +325,16 @@ const changeTab = (key) => {
       columns.value = [
         {
           title: '申请时间',
-          dataIndex: 'zoneName',
+          dataIndex: 'applyTime',
           width: 200,
-          key: 'zoneName',
+          key: 'applyTime',
           align: 'center'
         },
         {
           title: '运营区域',
-          dataIndex: 'username',
+          dataIndex: 'operationArea',
           width: 200,
-          key: 'username',
+          key: 'operationArea',
           align: 'center'
         },
         {
@@ -298,73 +346,66 @@ const changeTab = (key) => {
         },
         {
           title: '骑行订单号',
-          dataIndex: 'roleName',
+          dataIndex: 'cyclingOrderNumber',
           width: 200,
-          key: 'roleName',
+          key: 'cyclingOrderNumber',
           align: 'center'
         },
         {
           title: '本次申请退款(元)',
-          dataIndex: 'state',
+          dataIndex: 'applyRefundAmount',
           width: 200,
-          key: 'state',
+          key: 'applyRefundAmount',
           align: 'center'
         },
         {
           title: '实付金额(元)',
-          dataIndex: 'appletCount',
+          dataIndex: 'actualPayAmount',
           width: 200,
-          key: 'appletCount',
-          align: 'center'
-        },
-        {
-          title: '累计已退款(元)',
-          dataIndex: 'appletCount',
-          width: 200,
-          key: 'appletCount',
+          key: 'actualPayAmount',
           align: 'center'
         },
         {
           title: '支付方式',
-          dataIndex: 'createdAt',
+          dataIndex: 'payMethod',
           width: 200,
-          key: 'createdAt',
+          key: 'payMethod',
           align: 'center'
         },
         {
           title: '支付时间',
-          dataIndex: 'createdAt',
+          dataIndex: 'payTime',
           width: 200,
-          key: 'createdAt',
+          key: 'payTime',
           align: 'center'
         },
         {
           title: '申请原因',
-          dataIndex: 'createdAt',
+          dataIndex: 'applyReason',
           width: 200,
-          key: 'createdAt',
+          key: 'applyReason',
           align: 'center'
         },
         {
           title: '来源',
-          dataIndex: 'createdAt',
+          dataIndex: 'source',
           width: 200,
-          key: 'createdAt',
+          key: 'source',
           align: 'center'
         },
         {
           title: '申请人',
-          dataIndex: 'createdAt',
+          dataIndex: 'applicant',
           width: 200,
-          key: 'createdAt',
+          key: 'applicant',
           align: 'center'
         },
         {
           title: '操作',
           key: 'action',
-          width: 200,
+          width: 100,
           align: 'center',
-          fixed: 'right',
+          fixed: 'right'
         }
       ]
       break
@@ -372,16 +413,16 @@ const changeTab = (key) => {
       columns.value = [
         {
           title: '申请时间',
-          dataIndex: 'zoneName',
+          dataIndex: 'applyTime',
           width: 200,
-          key: 'zoneName',
+          key: 'applyTime',
           align: 'center'
         },
         {
           title: '运营区域',
-          dataIndex: 'username',
+          dataIndex: 'operationArea',
           width: 200,
-          key: 'username',
+          key: 'operationArea',
           align: 'center'
         },
         {
@@ -393,72 +434,65 @@ const changeTab = (key) => {
         },
         {
           title: '骑行订单号',
-          dataIndex: 'roleName',
+          dataIndex: 'cyclingOrderNumber',
           width: 200,
-          key: 'roleName',
+          key: 'cyclingOrderNumber',
           align: 'center'
         },
         {
           title: '实付金额(元)',
-          dataIndex: 'state',
+          dataIndex: 'actualPayAmount',
           width: 200,
-          key: 'state',
+          key: 'actualPayAmount',
           align: 'center'
         },
         {
           title: '退款金额(元)',
-          dataIndex: 'appletCount',
+          dataIndex: 'refundAmount',
           width: 200,
-          key: 'appletCount',
+          key: 'refundAmount',
           align: 'center'
         },
         {
           title: '退款方式',
-          dataIndex: 'appletCount',
+          dataIndex: 'refundMethod',
           width: 200,
-          key: 'appletCount',
-          align: 'center'
-        },
-        {
-          title: '累计已退款(元)',
-          dataIndex: 'createdAt',
-          width: 200,
-          key: 'createdAt',
+          key: 'refundMethod',
           align: 'center'
         },
         {
           title: '支付方式',
-          dataIndex: 'createdAt',
+          dataIndex: 'payMethod',
           width: 200,
-          key: 'createdAt',
+          key: 'payMethod',
           align: 'center'
         },
         {
           title: '支付时间',
-          dataIndex: 'createdAt',
+          dataIndex: 'payTime',
           width: 200,
-          key: 'createdAt',
+          key: 'payTime',
           align: 'center'
         },
         {
           title: '申请原因',
-          dataIndex: 'createdAt',
+          dataIndex: 'applyReason',
           width: 200,
-          key: 'createdAt',
+          key: 'applyReason',
           align: 'center'
         },
         {
           title: '来源',
-          dataIndex: 'createdAt',
+          dataIndex: 'source',
           width: 200,
-          key: 'createdAt',
+          key: 'source',
           align: 'center'
         },
         {
           title: '申请人',
-          dataIndex: 'createdAt',
+          dataIndex: 'applicant',
           width: 200,
-          key: 'createdAt',
+          key: 'applicant',
           align: 'center'
         },
         {
@@ -474,16 +508,16 @@ const changeTab = (key) => {
       columns.value = [
         {
           title: '申请时间',
-          dataIndex: 'zoneName',
+          dataIndex: 'applyTime',
           width: 200,
-          key: 'zoneName',
+          key: 'applyTime',
           align: 'center'
         },
         {
           title: '运营区域',
-          dataIndex: 'username',
+          dataIndex: 'operationArea',
           width: 200,
-          key: 'username',
+          key: 'operationArea',
           align: 'center'
         },
         {
@@ -495,115 +529,101 @@ const changeTab = (key) => {
         },
         {
           title: '骑行订单号',
-          dataIndex: 'roleName',
+          dataIndex: 'cyclingOrderNumber',
           width: 200,
-          key: 'roleName',
+          key: 'cyclingOrderNumber',
           align: 'center'
         },
         {
           title: '审核时间',
-          dataIndex: 'state',
+          dataIndex: 'reviewTime',
           width: 200,
-          key: 'state',
+          key: 'reviewTime',
           align: 'center'
         },
         {
           title: '审核人',
-          dataIndex: 'appletCount',
+          dataIndex: 'reviewer',
           width: 200,
-          key: 'appletCount',
+          key: 'reviewer',
           align: 'center'
         },
         {
           title: '实付金额(元)',
-          dataIndex: 'appletCount',
+          dataIndex: 'actualPayAmount',
           width: 200,
-          key: 'appletCount',
+          key: 'actualPayAmount',
           align: 'center'
         },
         {
           title: '退款金额(元)',
-          dataIndex: 'createdAt',
+          dataIndex: 'refundAmount',
           width: 200,
-          key: 'createdAt',
+          key: 'refundAmount',
           align: 'center'
         },
         {
           title: '到账状态',
-          dataIndex: 'createdAt',
+          dataIndex: 'arrivedState',
           width: 200,
-          key: 'createdAt',
+          key: 'arrivedState',
           align: 'center'
         },
         {
           title: '退款到账时间',
-          dataIndex: 'createdAt',
+          dataIndex: 'arrivedTime',
           width: 200,
-          key: 'createdAt',
+          key: 'arrivedTime',
           align: 'center'
         },
         {
           title: '退款方式',
-          dataIndex: 'createdAt',
+          dataIndex: 'refundMethod',
           width: 200,
-          key: 'createdAt',
-          align: 'center'
-        },
-        {
-          title: '累计已退款(元)',
-          dataIndex: 'createdAt',
-          width: 200,
-          key: 'createdAt',
+          key: 'refundMethod',
           align: 'center'
         },
         {
           title: '支付方式',
-          dataIndex: 'createdAt',
+          dataIndex: 'payMethod',
           width: 200,
-          key: 'createdAt',
+          key: 'payMethod',
           align: 'center'
         },
         {
           title: '交易流水号',
-          dataIndex: 'createdAt',
+          dataIndex: 'tradeSerialNumber',
           width: 200,
-          key: 'createdAt',
+          key: 'tradeSerialNumber',
           align: 'center'
         },
         {
           title: '支付时间',
-          dataIndex: 'createdAt',
+          dataIndex: 'payTime',
           width: 200,
-          key: 'createdAt',
+          key: 'payTime',
           align: 'center'
         },
         {
           title: '申请原因',
-          dataIndex: 'createdAt',
+          dataIndex: 'applyReason',
           width: 200,
-          key: 'createdAt',
+          key: 'applyReason',
           align: 'center'
         },
         {
           title: '来源',
-          dataIndex: 'createdAt',
+          dataIndex: 'source',
           width: 200,
-          key: 'createdAt',
+          key: 'source',
           align: 'center'
         },
         {
           title: '申请人',
-          dataIndex: 'createdAt',
+          dataIndex: 'applicant',
           width: 200,
-          key: 'createdAt',
+          key: 'applicant',
           align: 'center'
-        },
-        {
-          title: '操作',
-          key: 'action',
-          width: 200,
-          align: 'center',
-          fixed: 'right',
         }
       ]
       break
@@ -611,16 +631,16 @@ const changeTab = (key) => {
       columns.value = [
         {
           title: '申请时间',
-          dataIndex: 'zoneName',
+          dataIndex: 'applyTime',
           width: 200,
-          key: 'zoneName',
+          key: 'applyTime',
           align: 'center'
         },
         {
           title: '运营区域',
-          dataIndex: 'username',
+          dataIndex: 'operationArea',
           width: 200,
-          key: 'username',
+          key: 'operationArea',
           align: 'center'
         },
         {
@@ -632,79 +652,72 @@ const changeTab = (key) => {
         },
         {
           title: '骑行订单号',
-          dataIndex: 'roleName',
+          dataIndex: 'cyclingOrderNumber',
           width: 200,
-          key: 'roleName',
+          key: 'cyclingOrderNumber',
           align: 'center'
         },
         {
           title: '驳回时间',
-          dataIndex: 'state',
+          dataIndex: 'rejectTime',
           width: 200,
-          key: 'state',
+          key: 'rejectTime',
           align: 'center'
         },
         {
           title: '驳回原因',
-          dataIndex: 'appletCount',
+          dataIndex: 'rejectReason',
           width: 200,
-          key: 'appletCount',
+          key: 'rejectReason',
           align: 'center'
         },
         {
           title: '实付金额(元)',
-          dataIndex: 'appletCount',
+          dataIndex: 'actualPayAmount',
           width: 200,
-          key: 'appletCount',
+          key: 'actualPayAmount',
           align: 'center'
         },
         {
           title: '本次申请退款(元)',
-          dataIndex: 'createdAt',
+          dataIndex: 'applyRefundAmount',
           width: 200,
-          key: 'createdAt',
-          align: 'center'
-        },
-        {
-          title: '累计已退款(元)',
-          dataIndex: 'createdAt',
-          width: 200,
-          key: 'createdAt',
+          key: 'applyRefundAmount',
           align: 'center'
         },
         {
           title: '支付方式',
-          dataIndex: 'createdAt',
+          dataIndex: 'payMethod',
           width: 200,
-          key: 'createdAt',
+          key: 'payMethod',
           align: 'center'
         },
         {
           title: '支付时间',
-          dataIndex: 'createdAt',
+          dataIndex: 'payTime',
           width: 200,
-          key: 'createdAt',
+          key: 'payTime',
           align: 'center'
         },
         {
           title: '申请原因',
-          dataIndex: 'createdAt',
+          dataIndex: 'applyReason',
           width: 200,
-          key: 'createdAt',
+          key: 'applyReason',
           align: 'center'
         },
         {
           title: '来源',
-          dataIndex: 'createdAt',
+          dataIndex: 'source',
           width: 200,
-          key: 'createdAt',
+          key: 'source',
           align: 'center'
         },
         {
           title: '申请人',
-          dataIndex: 'createdAt',
+          dataIndex: 'applicant',
           width: 200,
-          key: 'createdAt',
+          key: 'applicant',
           align: 'center'
         }
       ]
@@ -718,4 +731,66 @@ const exportOrder = () => {
 
 }
 
+const handleCancel = () => {
+
+}
+
+const handleRevie = () => {
+  openRevie.value = true;
+  nextTick(() => {
+    if (formModel.value) {
+      const params = record == null ? {} : {
+        refundId: record['id']
+      }
+      formModel.value.openForm(params);
+    } else {
+      console.log('formModel is not ready yet');
+    }
+  });
+}
+
+const handleOkModalRevie = () => {
+  formModel.value.formSave(bres => {
+    openRevie.value = false;
+    if (bres.code == 200) {
+      getData()
+    }
+  });
+}
+
+const handleCancelModalRevie = () => {
+  formModel.value.resetAll(bres => {
+  });
+}
+
+
+const handleCompleteRefund = () => {
+  openConfirm.value = true;
+  nextTick(() => {
+    if (formModelConfirm.value) {
+      const params = record == null ? {} : {
+        refundId: record['id']
+      }
+      formModelConfirm.value.openForm(params);
+    } else {
+      console.log('formModel is not ready yet');
+    }
+  });
+}
+
+const handleOkModalConfirm = () => {
+  formModelConfirm.value.formSave(bres => {
+    openConfirm.value = false;
+    if (bres.code == 200) {
+      getData()
+    }
+  });
+}
+
+const handleCancelModalConfirm = () => {
+  formModel.value.resetAll(bres => {
+  });
+}
+
+
 </script>
\ No newline at end of file
diff --git a/ebike-operate/src/views/form/confirmrefund/ConfirmRefund.vue b/ebike-operate/src/views/form/confirmrefund/ConfirmRefund.vue
new file mode 100644
index 0000000..1446ac8
--- /dev/null
+++ b/ebike-operate/src/views/form/confirmrefund/ConfirmRefund.vue
@@ -0,0 +1,155 @@
+<template>
+  <a-divider></a-divider>
+  <a-form
+    label-align="left"
+    :label-col="{ span: 6 }"
+    :wrapper-col="{ span: 18 }"
+  >
+    <a-row>
+      <a-col :span="12">
+        <a-form-item
+          label="支付方式"
+          :label-col="{ span: 6 }"
+          :wrapper-col="{ span: 21 }"
+        >
+          <span>微信</span>
+        </a-form-item>
+      </a-col>
+      <a-col :span="12">
+        <a-form-item
+          label="用户"
+          :label-col="{ span: 6 }"
+          :wrapper-col="{ span: 21 }"
+        >
+          <span>18507702086(王婷)</span>
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-row>
+      <a-col :span="12">
+        <a-form-item
+          label="支付方式"
+          :label-col="{ span: 6 }"
+          :wrapper-col="{ span: 21 }"
+        >
+          <span>微信</span>
+        </a-form-item>
+      </a-col>
+      <a-col :span="12">
+        <a-form-item
+          label="用户"
+          :label-col="{ span: 6 }"
+          :wrapper-col="{ span: 21 }"
+        >
+          <span>18507702086(王婷)</span>
+        </a-form-item>
+      </a-col>
+    </a-row>
+  </a-form>
+  <a-divider></a-divider>
+  <a-form
+    :model="form"
+    ref="formRef"
+    label-align="left"
+    :label-col="{ span: 6 }"
+    :wrapper-col="{ span: 18 }"
+  >
+    <a-row>
+      <a-col :span="24">
+        <a-form-item
+          label="退款密码"
+          :label-col="{ span: 3 }"
+          :wrapper-col="{ span: 12 }"
+          name="refundPassword"
+          required
+          :rules="[{ required: true, message: '请输入退款密码' }]"
+        >
+          <a-input
+            v-model:value="form.refundPassword"
+            placeholder="请输入退款密码"
+            type="password"
+          />
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="24">
+        <a-form-item
+          label="退款备注"
+          :label-col="{ span: 3 }"
+          :wrapper-col="{ span: 12 }"
+          name="refundRemarks"
+        >
+          <a-textarea
+            v-model:value="form.refundRemarks"
+            placeholder="请输入退款备注"
+            :rows="4"
+          />
+        </a-form-item>
+      </a-col>
+    </a-row>
+  </a-form>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { callPayment } from '@/apis/call.js'
+import { message } from 'ant-design-vue'
+import _ from 'lodash'
+
+const formRef = ref();
+const formData = () => ({
+  refundId: "",
+  refundPassword: "",
+  refundRemarks: ""
+});
+const costInfo = ref({
+  orderAmount: 0,
+
+})
+const form = ref(formData());
+
+const openForm = (params = {}) => {
+  if (params['refundId']) {
+
+  }
+};
+
+const changeProcessState = (e) => {
+  const value = e.target.value;
+  if (value == '3') {
+    form.value.refundMethod = ""
+  } else if (value == '1') {
+    form.value.processResult = ""
+  }
+}
+
+const formSave = (callBack) => {
+  formRef.value.validate().then((res) => {
+
+  });
+};
+
+const resetAll = (callBack) => {
+  Object.assign(form.value, formData());
+  formRef.value.resetFields();
+  if (callBack) {
+    callBack(true, form.value);
+  }
+}
+
+defineExpose({ openForm, formSave, resetAll });
+</script>
+
+<style scoped>
+.spanCss {
+  height: 32px;
+  margin-left: 8px;
+  padding: 0 4px;
+  font-size: 12px;
+  line-height: 32px;
+  background: #f2f6fc;
+  border-radius: 4px;
+}
+</style>
diff --git a/ebike-operate/src/views/form/refundorderrevie/RefundOrderRevie.vue b/ebike-operate/src/views/form/refundorderrevie/RefundOrderRevie.vue
new file mode 100644
index 0000000..61104df
--- /dev/null
+++ b/ebike-operate/src/views/form/refundorderrevie/RefundOrderRevie.vue
@@ -0,0 +1,212 @@
+<template>
+  <a-divider></a-divider>
+  <a-form
+    label-align="left"
+    :label-col="{ span: 6 }"
+    :wrapper-col="{ span: 18 }"
+  >
+    <a-row>
+      <a-col :span="24">
+        <a-form-item
+          label="订单金额"
+          :label-col="{ span: 3 }"
+          :wrapper-col="{ span: 21 }"
+        >
+          <span>{{costInfo.orderAmount}} 元<span class="spanCss">= 起步费用：1.1 元 + 时长费用：2.25 元 + 调度费：0 元</span></span>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="24">
+        <a-form-item
+          label="调度费用"
+          :label-col="{ span: 3 }"
+          :wrapper-col="{ span: 21 }"
+        >
+          <span>0 元<span class="spanCss">= 运营区外调度费用：0 元 + 禁停区调度费：0 元 + 停车区外调度费：0 元 + 头盔管理费：0 元 + 不规范停车费：0 元
+            </span></span>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="24">
+        <a-form-item
+          label="实付金额"
+          :label-col="{ span: 3 }"
+          :wrapper-col="{ span: 21 }"
+        >
+          <span>3.35 元<span class="spanCss">= 订单金额：3.35 元 - 优惠金额：0 元 - 优惠券抵扣金额：0 元 - 骑行卡抵扣金额：0 元</span></span>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="12">
+        <a-form-item
+          label="支付方式"
+          :label-col="{ span: 6 }"
+          :wrapper-col="{ span: 21 }"
+        >
+          <span>微信</span>
+        </a-form-item>
+      </a-col>
+      <a-col :span="12">
+        <a-form-item
+          label="用户"
+          :label-col="{ span: 6 }"
+          :wrapper-col="{ span: 21 }"
+        >
+          <span>18507702086(王婷)</span>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="24">
+        <a-form-item
+          label="申请退款原因"
+          :label-col="{ span: 3 }"
+          :wrapper-col="{ span: 21 }"
+        >
+          <span>忘记还车</span>
+        </a-form-item>
+      </a-col>
+    </a-row>
+  </a-form>
+  <a-divider></a-divider>
+  <a-form
+    :model="form"
+    ref="formRef"
+    label-align="left"
+    :label-col="{ span: 6 }"
+    :wrapper-col="{ span: 18 }"
+  >
+    <a-row>
+      <a-col :span="24">
+        <a-form-item
+          label="本次申请退款"
+          :label-col="{ span: 3 }"
+          :wrapper-col="{ span: 21 }"
+        >
+          <span>3.35 元<span class="spanCss">= 订单金额：3.35 元 - 优惠金额：0 元 - 优惠券抵扣金额：0 元 - 骑行卡抵扣金额：0 元</span></span>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="24">
+        <a-form-item
+          label="操作"
+          :label-col="{ span: 3 }"
+          :wrapper-col="{ span: 21 }"
+          name="processState"
+          required
+          :rules="[{ required: true, message: '请选择审核结果' }]"
+        >
+          <a-radio-group
+            v-model:value="form.processState"
+            name="radioGroup"
+            @change="changeProcessState"
+          >
+            <a-radio value="3">驳回</a-radio>
+            <a-radio value="1">通过审核</a-radio>
+          </a-radio-group>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row v-if="form.processState == '3'">
+      <a-col :span="24">
+        <a-form-item
+          label="驳回原因"
+          :label-col="{ span: 3 }"
+          :wrapper-col="{ span: 12 }"
+          name="processResult"
+        >
+          <a-input
+            v-model:value="form.processResult"
+            placeholder="请输入驳回原因"
+          />
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row v-if="form.processState == '1'">
+      <a-col :xs="24">
+        <a-form-item
+          label="退款方式"
+          :label-col="{ span: 3 }"
+          :wrapper-col="{ span: 12 }"
+          name="parentId"
+        >
+          <a-select
+            v-model:value="form.refundMethod"
+            placeholder="请选择退款方式"
+          >
+            <a-select-option value="0">原路返回</a-select-option>
+            <a-select-option value="1">余额</a-select-option>
+            <a-select-option value="2">线下退款</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+    </a-row>
+  </a-form>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { callPayment } from '@/apis/call.js'
+import { message } from 'ant-design-vue'
+import _ from 'lodash'
+
+const formRef = ref();
+const formData = () => ({
+  refundId: "",
+  processState: "3",
+  processResult: "",
+  refundMethod: ""
+});
+const costInfo = ref({
+  orderAmount: 0,
+
+})
+const form = ref(formData());
+
+const openForm = (params = {}) => {
+  if (params['refundId']) {
+
+  }
+};
+
+const changeProcessState = (e) => {
+  const value = e.target.value;
+  if (value == '3') {
+    form.value.refundMethod = ""
+  } else if (value == '1') {
+    form.value.processResult = ""
+  }
+}
+
+const formSave = (callBack) => {
+  formRef.value.validate().then((res) => {
+
+  });
+};
+
+const resetAll = (callBack) => {
+  Object.assign(form.value, formData());
+  formRef.value.resetFields();
+  if (callBack) {
+    callBack(true, form.value);
+  }
+}
+
+defineExpose({ openForm, formSave, resetAll });
+</script>
+
+<style scoped>
+.spanCss {
+  height: 32px;
+  margin-left: 8px;
+  padding: 0 4px;
+  font-size: 12px;
+  line-height: 32px;
+  background: #f2f6fc;
+  border-radius: 4px;
+}
+</style>