From 2416507fd54fd2afd2d6f1de337b40e769cd47bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A3=B7=E5=8F=B6?=
 <14103883+leaf-phos@user.noreply.gitee.com>
Date: Sat, 29 Mar 2025 18:07:17 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=A2=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bst/order.js                          |  20 ++
 src/api/bst/refund.js                         |  44 +++
 src/components/CollapsePanel/index.vue        |   3 +
 src/router/index.js                           |   8 +-
 src/utils/enums.js                            |  35 ++
 src/views/bst/area/index.vue                  |   5 +-
 .../components/AreaJoinEditDialog.vue         |   7 +-
 src/views/bst/bonus/index.vue                 | 102 ++----
 src/views/bst/device/index.vue                |  28 +-
 .../order/components/OrderRefundDialog.vue    | 112 +++++++
 src/views/bst/order/index.vue                 |  96 ++++--
 src/views/bst/order/view/view.vue             | 147 +++++++++
 src/views/bst/pay/index.vue                   |  28 +-
 src/views/bst/refund/index.vue                | 298 ++++++++++++++++++
 14 files changed, 798 insertions(+), 135 deletions(-)
 create mode 100644 src/api/bst/refund.js
 create mode 100644 src/views/bst/order/components/OrderRefundDialog.vue
 create mode 100644 src/views/bst/order/view/view.vue
 create mode 100644 src/views/bst/refund/index.vue

diff --git a/src/api/bst/order.js b/src/api/bst/order.js
index 844e04a..3398ab3 100644
--- a/src/api/bst/order.js
+++ b/src/api/bst/order.js
@@ -42,3 +42,23 @@ export function delOrder(id) {
     method: 'delete'
   })
 }
+
+// 删除订单
+export function endOrder(orderId) {
+  return request({
+    url: '/bst/order/end',
+    method: 'put',
+    data: {
+      orderId
+    }
+  })
+}
+
+// 订单退款
+export function refundOrder(data) {
+  return request({
+    url: '/bst/order/refund',
+    method: 'put',
+    data: data
+  })
+}
diff --git a/src/api/bst/refund.js b/src/api/bst/refund.js
new file mode 100644
index 0000000..297bd60
--- /dev/null
+++ b/src/api/bst/refund.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询退款列表
+export function listRefund(query) {
+  return request({
+    url: '/bst/refund/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询退款详细
+export function getRefund(id) {
+  return request({
+    url: '/bst/refund/' + id,
+    method: 'get'
+  })
+}
+
+// 新增退款
+export function addRefund(data) {
+  return request({
+    url: '/bst/refund',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改退款
+export function updateRefund(data) {
+  return request({
+    url: '/bst/refund',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除退款
+export function delRefund(id) {
+  return request({
+    url: '/bst/refund/' + id,
+    method: 'delete'
+  })
+}
diff --git a/src/components/CollapsePanel/index.vue b/src/components/CollapsePanel/index.vue
index 7bff8eb..2831490 100644
--- a/src/components/CollapsePanel/index.vue
+++ b/src/components/CollapsePanel/index.vue
@@ -72,4 +72,7 @@ export default {
     flex: 1;
   }
 }
+.collapse-content {
+  padding: 8px 14px;
+}
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index d6ebcbc..26167ca 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -82,7 +82,7 @@ export const constantRoutes = [
     hidden: true,
     children: [
       {
-        path: '/area/:id?',
+        path: 'area/:id?',
         component: () => import('@/views/bst/area/edit/edit.vue'),
         name: 'AreaEdit',
         meta: { title: '编辑运营区' }
@@ -97,6 +97,12 @@ export const constantRoutes = [
     component: Layout,
     hidden: true,
     children: [
+      {
+        path: 'order/:id?',
+        component: () => import('@/views/bst/order/view/view.vue'),
+        name: 'OrderView',
+        meta: { title: '订单详情' }
+      }
     ]
   },
   {
diff --git a/src/utils/enums.js b/src/utils/enums.js
index df18105..c345cf4 100644
--- a/src/utils/enums.js
+++ b/src/utils/enums.js
@@ -134,3 +134,38 @@ export const AreaJoinType = {
   COOPERATE: "2", // 合伙
 }
 
+// 订单状态
+export const OrderStatus = {
+  WAIT_PAY: "WAIT_PAY", // 待支付
+  PROCESSING: "PROCESSING", // 进行中
+  FINISHED: "FINISHED", // 已结束
+  CANCEL: "CANCEL", // 已取消
+  WAIT_VERIFY: "WAIT_VERIFY", // 待审核
+
+  // 允许支付的订单状态
+  canPay() {
+    return [this.WAIT_PAY];
+  },
+
+  // 正在使用中的订单状态
+  inUse() {
+    return [this.PROCESSING];
+  },
+
+  // 可以支付成功的订单状态
+  canPaySuccess() {
+    return [this.WAIT_PAY];
+  },
+
+  // 可以结束的订单状态
+  canEnd() {
+    return [this.PROCESSING];
+  },
+
+  // 可以退款的订单状态
+  canRefund() {
+    return [this.FINISHED];
+  }
+}
+
+
diff --git a/src/views/bst/area/index.vue b/src/views/bst/area/index.vue
index d9cd80c..ba0657b 100644
--- a/src/views/bst/area/index.vue
+++ b/src/views/bst/area/index.vue
@@ -266,12 +266,11 @@ export default {
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.$router.push({ path: "/area/" });
+      this.$router.push('/edit/area');
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      const id = row.id || this.ids;
-      this.$router.push({ path: `/area/${id}` });
+      this.$router.push('/edit/area/' + row.id);
     },
     /** 删除按钮操作 */
     handleDelete(row) {
diff --git a/src/views/bst/areaJoin/components/AreaJoinEditDialog.vue b/src/views/bst/areaJoin/components/AreaJoinEditDialog.vue
index d7d547e..c451a9b 100644
--- a/src/views/bst/areaJoin/components/AreaJoinEditDialog.vue
+++ b/src/views/bst/areaJoin/components/AreaJoinEditDialog.vue
@@ -22,8 +22,8 @@
             ></el-option>
           </el-select>
         </form-col>
-        <form-col :span="span" label="绑定用户" prop="userId" v-has-permi="['system:user:list']">
-          <user-input v-model="form.userId" :text.sync="form.userName" style="width: 100%;"/>
+        <form-col :span="span" label="绑定用户" prop="userPhone">
+          <el-input v-model="form.userPhone" placeholder="请输入绑定用户手机号" />
         </form-col>
         <form-col :span="span" label="分成比例" prop="point">
           <el-input v-model="form.point" placeholder="请输入分成比例">
@@ -83,6 +83,9 @@ export default {
         ],
         point: [
           { required: true, message: "分成比例不能为空", trigger: "blur" }
+        ],
+        userPhone: [
+          { required: true, message: "绑定用户手机号不能为空", trigger: "blur" }
         ]
       }
     }
diff --git a/src/views/bst/bonus/index.vue b/src/views/bst/bonus/index.vue
index 9446f0a..3437c5f 100644
--- a/src/views/bst/bonus/index.vue
+++ b/src/views/bst/bonus/index.vue
@@ -54,27 +54,6 @@
     </el-form>
 
     <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-has-permi="['bst:bonus:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-has-permi="['bst:bonus:remove']"
-        >删除</el-button>
-      </el-col>
       <el-col :span="1.5">
         <el-button
           type="warning"
@@ -118,30 +97,20 @@
             <template v-else-if="column.key === 'toBalance'">
               <boolean-tag :value="d.row.toBalance" size="mini"/>
             </template>
+            <template v-else-if="['invalidAmount', 'amount', 'waitAmount', 'payedAmount', 'refundAmount'].includes(column.key)">
+              <span :style="{color: amountColor[column.key]}">
+                {{d.row[column.key] | fix2 | dv}} 元
+              </span>
+            </template>
+            <template v-else-if="column.key === 'point'">
+              {{d.row[column.key] | fix2 | dv}} %
+            </template>
             <template v-else>
               {{d.row[column.key]}}
             </template>
           </template>
         </el-table-column>
       </template>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-has-permi="['bst:bonus:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-has-permi="['bst:bonus:remove']"
-          >删除</el-button>
-        </template>
-      </el-table-column>
     </el-table>
 
     <pagination
@@ -173,22 +142,31 @@ export default {
   components: {FormCol, BooleanTag},
   data() {
     return {
+      // 金额颜色
+      amountColor: {
+        amount: null,
+        invalidAmount: null,
+        waitAmount: 'orange',
+        payedAmount: 'green', 
+        refundAmount: 'red',
+      },
       span: 24,
       // 字段列表
       columns: [
         {key: 'id', visible: false, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
         {key: 'bstId', visible: false, label: '业务ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'reason', visible: true, label: '原因', minWidth: "200", sortable: true, overflow: false, align: 'left', width: null},
+        {key: 'reason', visible: true, label: '原因', minWidth: "230", sortable: true, overflow: false, align: 'left', width: null},
         {key: 'arrivalName', visible: true, label: '分成方', minWidth: "100", sortable: true, overflow: false, align: 'left', width: null},
         {key: 'arrivalId', visible: false, label: '分成方ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'point', visible: true, label: '比例', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'amount', visible: true, label: '总金额', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'invalidAmount', visible: true, label: '未出账', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'waitAmount', visible: true, label: '待分成', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'payedAmount', visible: true, label: '已分成', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'refundAmount', visible: true, label: '已退款', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'prePayTime', visible: true, label: '预计分成', minWidth: null, sortable: false, overflow: false, align: 'center', width: "100"},
         {key: 'payTime', visible: true, label: '实际分成', minWidth: null, sortable: false, overflow: false, align: 'center', width: "100"},
-        {key: 'toBalance', visible: true, label: '余额变动', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'toBalance', visible: false, label: '余额变动', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: "100"},
       ],
       // 排序方式
@@ -230,48 +208,6 @@ export default {
       },
       // 表单参数
       form: {},
-      // 表单校验
-      rules: {
-        bstId: [
-          { required: true, message: "订单ID不能为空", trigger: "blur" }
-        ],
-        bstType: [
-          { required: true, message: "业务类型不能为空", trigger: "change" }
-        ],
-        status: [
-          { required: true, message: "状态不能为空", trigger: "change" }
-        ],
-        arrivalId: [
-          { required: true, message: "分成方ID不能为空", trigger: "blur" }
-        ],
-        arrivalName: [
-          { required: true, message: "分成方名称不能为空", trigger: "blur" }
-        ],
-        arrivalType: [
-          { required: true, message: "收款方类型不能为空", trigger: "change" }
-        ],
-        point: [
-          { required: true, message: "分成比例不能为空", trigger: "blur" }
-        ],
-        amount: [
-          { required: true, message: "分成总金额不能为空", trigger: "blur" }
-        ],
-        waitAmount: [
-          { required: true, message: "待分成金额不能为空", trigger: "blur" }
-        ],
-        payedAmount: [
-          { required: true, message: "已分成金额不能为空", trigger: "blur" }
-        ],
-        refundAmount: [
-          { required: true, message: "已退款金额不能为空", trigger: "blur" }
-        ],
-        toBalance: [
-          { required: true, message: "是否修改余额不能为空", trigger: "blur" }
-        ],
-        createTime: [
-          { required: true, message: "创建时间不能为空", trigger: "blur" }
-        ]
-      }
     };
   },
   created() {
diff --git a/src/views/bst/device/index.vue b/src/views/bst/device/index.vue
index 048fab0..4fec8b9 100644
--- a/src/views/bst/device/index.vue
+++ b/src/views/bst/device/index.vue
@@ -182,7 +182,7 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList(true)" :columns="columns"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange" :default-sort="defaultSort"  @sort-change="onSortChange">
+    <el-table size="mini" v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange" :default-sort="defaultSort"  @sort-change="onSortChange">
       <el-table-column type="selection" width="55" align="center" />
       <template v-for="column of showColumns">
         <el-table-column
@@ -202,8 +202,14 @@
             </template>
             <template v-else-if="column.key === 'sn'">
               {{d.row.sn | dv}}
+              | {{d.row.mac | dv}}<br/>
               <dict-tag :options="dict.type.device_online_status" :value="d.row.onlineStatus" size="mini"/>
               <dict-tag :options="dict.type.device_status" :value="d.row.status" size="mini" style="margin-left: 4px;"/>
+              <dict-tag :options="dict.type.device_iot_status" :value="d.row.iotStatus" size="mini" style="margin-left: 4px;"/>
+            </template>
+            <template v-else-if="column.key === 'mchName'">
+              {{d.row.mchName | dv}}<br/>
+              {{d.row.areaName | dv}}
             </template>
             <template v-else-if="column.key === 'lockStatus'">
               <dict-tag :options="dict.type.device_lock_status" :value="d.row[column.key]" size="mini"/>
@@ -215,7 +221,12 @@
               <dict-tag :options="dict.type.device_quality" :value="d.row[column.key]" size="mini"/>
             </template>
             <template v-else-if="column.key === 'remainingPower'">
-              {{d.row.remainingPower | fix2 | dv}} %
+              {{d.row.remainingPower | fix2 | dv}} % <br/>
+              {{d.row.remainEndurance | dv}} KM
+            </template>
+            <template v-else-if="column.key === 'vehicleNum'">
+              {{d.row.vehicleNum | dv}}<br/>
+              {{d.row.modelName | dv}}
             </template>
             <template v-else-if="column.key === 'voltage'">
               {{d.row.voltage | fix2 | dv}} V
@@ -370,20 +381,19 @@ export default {
       // 字段列表
       columns: [
         {key: 'id', visible: false, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
-        {key: 'sn', visible: true, label: 'SN', minWidth: null, sortable: true, overflow: false, align: 'left', width: "180"},
-        {key: 'mac', visible: true, label: 'MAC', minWidth: "100", sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'vehicleNum', visible: true, label: '车牌', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'mchName', visible: true, label: '用户', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'areaName', visible: true, label: '运营区', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'modelName', visible: true, label: '型号', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'sn', visible: true, label: '设备', minWidth: null, sortable: true, overflow: false, align: 'left', width: "180"},
+        {key: 'vehicleNum', visible: true, label: '车辆', minWidth: null, sortable: true, overflow: false, align: 'left', width: null},
+        {key: 'mchName', visible: true, label: '归属', minWidth: null, sortable: true, overflow: false, align: 'left', width: null},
         {key: 'signalStrength', visible: true, label: '信号', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'satellites', visible: true, label: '卫星', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'quality', visible: true, label: '电门', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'lockStatus', visible: true, label: '锁', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'voltage', visible: true, label: '电压', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'remainingPower', visible: true, label: '电量', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'remainingPower', visible: true, label: '续航', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'isSound', visible: true, label: '声音', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'remark', visible: true, label: '备注', minWidth: null, sortable: true, overflow: true, align: 'center', width: null},
+        {key: 'orderNo', visible: true, label: '订单', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'createTime', visible: true, label: '创建', minWidth: null, sortable: true, overflow: false, align: 'center', width: "90"},
       ],
       // 排序方式
       orderSorts: ['ascending', 'descending', null],
diff --git a/src/views/bst/order/components/OrderRefundDialog.vue b/src/views/bst/order/components/OrderRefundDialog.vue
new file mode 100644
index 0000000..1bf6bc1
--- /dev/null
+++ b/src/views/bst/order/components/OrderRefundDialog.vue
@@ -0,0 +1,112 @@
+<template>
+  <el-dialog 
+    title="退款" 
+    :visible.sync="dialogVisible" 
+    width="500px" 
+    append-to-body 
+    @open="handleOpen"
+  > 
+    <el-form :model="form" :rules="rules" ref="form" label-width="6em" v-loading="loading" size="small">
+      <el-form-item label="退款金额" prop="amount">
+        <el-input-number v-model="form.amount" :min="0" :max="canRefundAmount" placeholder="请输入退款金额" style="width: 100%;" />
+      </el-form-item>
+      <el-form-item label="退款原因" prop="reason">
+        <el-input v-model="form.reason" type="textarea" placeholder="请输入退款原因" show-word-limit maxlength="200" />
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="handleSubmit">确认退款</el-button>
+      <el-button @click="dialogVisible = false">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import {getOrder, refundOrder} from '@/api/bst/order'
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default: ''
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      showRefundDialog: false,
+      detail: {},
+      form: {},
+      loading: false,
+      rules: {
+        amount: [
+          { required: true, message: '请输入退款金额', trigger: 'blur' },
+        ],
+      }
+    }
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit('update:visible', val);
+      }
+    },
+    // 可退款金额
+    canRefundAmount() {
+      let payAmount = this.detail.payAmount || 0;  
+      let payRefunded = this.detail.payRefunded || 0;
+      let payRefunding = this.detail.payRefunding || 0;
+      return payAmount - payRefunded - payRefunding;
+    }
+  },
+  methods: {
+    getDetail() {
+      this.loading = true;
+      getOrder(this.id).then(response => {
+        this.detail = response.data;
+        this.form.amount = this.canRefundAmount;
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    handleOpen() {
+      this.getDetail();
+      this.reset();
+    },
+    reset() {
+      this.form = {
+        orderId: this.id,
+        amount: 0,
+        reason: null,
+      };
+      this.resetForm('form');
+    },
+    handleSubmit() {
+      this.$refs.form.validate().then(() => {
+        this.loading = true;
+        refundOrder(this.form).then((response) => {
+          if (response.code == 200) {
+            this.$message.success('退款成功');
+            this.dialogVisible = false;
+            this.$emit('success');
+          }
+        }).finally(() => {
+          this.loading = false;
+        });
+      });
+    }
+
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/bst/order/index.vue b/src/views/bst/order/index.vue
index 04d5779..62197a7 100644
--- a/src/views/bst/order/index.vue
+++ b/src/views/bst/order/index.vue
@@ -161,22 +161,27 @@
                 <el-row :gutter="8">
                   <el-col :span="12" v-if="d.row.depositFee != null">押金：{{d.row.depositFee | fix2 | dv}} 元</el-col>
                   <el-col :span="12" v-if="d.row.totalFee != null">总额：{{d.row.totalFee | fix2 | dv}} 元</el-col>
-                  <el-col :span="12" v-if="d.row.ridingFee != null">骑行费：{{d.row.ridingFee | fix2 | dv}} 元</el-col>
-                  <el-col :span="12" v-if="d.row.payRefunded">退款：{{d.row.payRefunded | fix2 | dv}} 元</el-col>
-                  <el-col :span="12" v-if="d.row.dispatchFee">调度费：{{d.row.dispatchFee | fix2 | dv}} 元</el-col>
-                  <el-col :span="12" v-if="d.row.manageFee">管理费：{{d.row.manageFee | fix2 | dv}} 元</el-col>
-                  <el-col :span="12" v-if="d.row.deductionFee">车损费：{{d.row.deductionFee | fix2 | dv}} 元</el-col>
+                  <el-col :span="12" v-if="d.row.ridingFee != null">骑行：{{d.row.ridingFee | fix2 | dv}} 元</el-col>
+                  <el-col :span="12" v-if="d.row.dispatchFee">调度：{{d.row.dispatchFee | fix2 | dv}} 元</el-col>
+                  <el-col :span="12" v-if="d.row.manageFee">管理：{{d.row.manageFee | fix2 | dv}} 元</el-col>
+                  <el-col :span="12" v-if="d.row.deductionFee">车损：{{d.row.deductionFee | fix2 | dv}} 元</el-col>
+                  <el-col :span="24" v-if="d.row.payRefunded || d.row.payRefunding" style="color: red;">
+                    退款：{{d.row.payRefunded | fix2 | dv}} 元
+                    <template v-if="d.row.payRefunding">(退款中：{{d.row.payRefunding | fix2 | dv}} 元)</template>
+                  </el-col>
+                  <el-col :span="24" v-if="d.row.payAmount" style="color: green;font-weight: bold;">实收：{{d.row.payAmount - d.row.payRefunded - d.row.payRefunding | fix2 | dv}} 元</el-col>
                 </el-row>
               </div>
             </template>
             <template v-else-if="column.key === 'useInfo'">
-              <div v-if="d.row.duration != null">骑行时长：{{d.row.duration | dv}} 秒</div>
-              <div v-if="d.row.distance != null">骑行距离：{{d.row.distance | fix2 | dv}} 米</div>
+              <div v-if="d.row.duration != null">时长：{{d.row.duration | dv}} 秒</div>
+              <div v-if="d.row.distance != null">距离：{{d.row.distance | fix2 | dv}} 米</div>
             </template>
             <template v-else-if="column.key === 'time'">
-              <div v-if="d.row.createTime != null">创建时间：{{d.row.createTime | dv}}</div>
-              <div v-if="d.row.startTime != null">开始时间：{{d.row.startTime | dv}}</div>
-              <div v-if="d.row.endTime != null">结束时间：{{d.row.endTime | dv}}</div>
+              <div v-if="d.row.createTime != null">创建：{{d.row.createTime | dv}}</div>
+              <div v-if="d.row.startTime != null">开始：{{d.row.startTime | dv}}</div>
+              <div v-if="d.row.endTime != null">结束：{{d.row.endTime | dv}}</div>
+              <div v-if="d.row.maxTime != null">超时：{{d.row.maxTime | dv}}</div>
             </template>
 
             <template v-else-if="column.key === 'device'">
@@ -184,13 +189,24 @@
               <div v-if="d.row.deviceMac != null">MAC：{{d.row.deviceMac | dv}}</div>
               <div v-if="d.row.deviceVehicleNum != null">车牌：{{d.row.deviceVehicleNum | dv}}</div>
             </template>
+            <template v-else-if="column.key === 'payNo'">
+              <div v-if="d.row.payNo != null">单号：{{d.row.payNo | dv}}</div>
+              <div v-if="d.row.payTime != null">时间：{{d.row.payTime | dv}}</div>
+              <div v-if="d.row.payChannelName != null">渠道：{{d.row.payChannelName | dv}}</div>
+            </template>
+            <template v-else-if="column.key === 'area'">
+              <div v-if="d.row.areaName != null">运营：{{d.row.areaName | dv}}</div>
+              <div v-if="d.row.startAreaSubName != null">借车：{{d.row.startAreaSubName | dv}}</div>
+              <div v-if="d.row.endAreaSubName != null">还车：{{d.row.endAreaSubName | dv}}</div>
+              <div v-if="d.row.endReason != null">还车原因：{{d.row.endReason | dv}}</div>
+            </template>
             <template v-else>
               {{d.row[column.key]}}
             </template>
           </template>
         </el-table-column>
       </template>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
         <template slot-scope="scope">
           <el-button
             size="mini"
@@ -199,6 +215,22 @@
             @click="handleView(scope.row)"
             v-has-permi="['bst:order:query']"
           >详情</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-close"
+            @click="handleEnd(scope.row)"
+            v-has-permi="['bst:order:end']"
+            v-show="OrderStatus.canEnd().includes(scope.row.status)"
+          >结束</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-wallet"
+            @click="handleRefund(scope.row)"
+            v-has-permi="['bst:order:refund']"
+            v-show="OrderStatus.canRefund().includes(scope.row.status)"
+          >退款</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -210,15 +242,19 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
+
+    <order-refund-dialog :id="row.id" :visible.sync="showRefundDialog" @success="getList" />
   </div>
 </template>
 
 <script>
-import { listOrder, getOrder, delOrder, addOrder, updateOrder } from "@/api/bst/order";
+import { listOrder, endOrder } from "@/api/bst/order";
 import { $showColumns } from '@/utils/mixins';
 import FormCol from "@/components/FormCol/index.vue";
+import { OrderStatus } from "@/utils/enums";
+import OrderRefundDialog from "./components/OrderRefundDialog.vue";
 
-  // 默认排序字段
+// 默认排序字段
 const defaultSort = {
   prop: "createTime",
   order: "descending"
@@ -228,22 +264,23 @@ export default {
   name: "Order",
   mixins: [$showColumns],
   dicts: ['order_status', 'suit_type', 'order_return_type', 'order_return_mode', 'suit_rental_unit', 'suit_riding_rule'],
-  components: {FormCol},
+  components: {FormCol, OrderRefundDialog},
   data() {
     return {
       span: 24,
+      OrderStatus,
       // 字段列表
       columns: [
         {key: 'id', visible: false, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
         {key: 'no', visible: true, label: '订单号', minWidth: null, sortable: true, overflow: false, align: 'center', width: "100"},
         {key: 'suitName', visible: true, label: '套餐', minWidth: "200", sortable: true, overflow: false, align: 'left', width: null},
-        {key: 'device', visible: true, label: '设备详情', minWidth: "130", sortable: false, overflow: false, align: 'left', width: null},
-        {key: 'totalFee', visible: true, label: '费用详情', minWidth: "230", sortable: false, overflow: false, align: 'left', width: null},
-        {key: 'useInfo', visible: true, label: '使用详情', minWidth: "130", sortable: false, overflow: false, align: 'left', width: null},
+        {key: 'device', visible: true, label: '设备', minWidth: "150", sortable: false, overflow: false, align: 'left', width: null},
+        {key: 'totalFee', visible: true, label: '费用', minWidth: "230", sortable: false, overflow: false, align: 'left', width: null},
+        {key: 'useInfo', visible: true, label: '使用', minWidth: "130", sortable: false, overflow: false, align: 'left', width: null},
         {key: 'time', visible: true, label: '时间', minWidth: "180", sortable: false, overflow: false, align: 'left', width: null},
-        {key: 'areaName', visible: true, label: '运营区', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'payNo', visible: true, label: '支付', minWidth: "180", sortable: false, overflow: false, align: 'left', width: null},
+        {key: 'area', visible: true, label: '运营', minWidth: "180", sortable: false, overflow: false, align: 'left', width: null},
         {key: 'userName', visible: true, label: '用户', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'payNo', visible: true, label: '支付单', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'returnType', visible: true, label: '还车', minWidth: null, sortable: false, overflow: false, align: 'center', width: null},
         {key: 'mark', visible: false, label: '备注', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
       ],
@@ -291,7 +328,8 @@ export default {
         suitRidingRule: null,
         returnMode: null,
       },
-      
+      row: {},
+      showRefundDialog: false,
     };
   },
   created() {
@@ -299,7 +337,23 @@ export default {
   },
   methods: {
     handleView(row) {
-      // TODO
+      this.$router.push(`/view/order/${row.id}`)
+    },
+    handleEnd(row) {  
+      this.$confirm(`确定结束订单${row.no}吗？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        endOrder(row.id).then(response => {
+          this.$message.success("结束成功");
+          this.getList();
+        });
+      });
+    },
+    handleRefund(row) {
+      this.row = row;
+      this.showRefundDialog = true;
     },
     /** 当排序按钮被点击时触发 **/
     onSortChange(column) {
diff --git a/src/views/bst/order/view/view.vue b/src/views/bst/order/view/view.vue
new file mode 100644
index 0000000..d5787be
--- /dev/null
+++ b/src/views/bst/order/view/view.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="app-container" v-loading="loading">
+    <el-row :gutter="16">
+      <el-col :span="18">
+        <el-card>
+          <collapse-panel :value="true" title="基础信息">
+            <el-descriptions :column="3" >
+              <el-descriptions-item label="订单编号">{{ detail.no | dv}}</el-descriptions-item>
+              <el-descriptions-item label="订单状态">
+                <dict-tag :options="dict.type.order_status" :value="detail.status" size="small"/>
+              </el-descriptions-item>
+              <el-descriptions-item label="运营区">{{ detail.areaName | dv}}</el-descriptions-item>
+              <el-descriptions-item label="创建时间">{{ detail.createTime | dv}}</el-descriptions-item>
+              <el-descriptions-item label="开始时间">{{ detail.startTime | dv}}</el-descriptions-item>
+              <el-descriptions-item label="结束时间">{{ detail.endTime | dv}}</el-descriptions-item>
+              <el-descriptions-item label="到期时间">{{ detail.maxTime | dv}}</el-descriptions-item>
+              <el-descriptions-item label="骑行时长">{{ detail.duration | dv}}</el-descriptions-item>
+              <el-descriptions-item label="骑行距离">{{ detail.distance | fix2 | dv}} km</el-descriptions-item>
+              <el-descriptions-item label="终止原因" :span="2">{{ detail.endReason || '-' }}</el-descriptions-item>
+              <el-descriptions-item label="取消备注" :span="3">{{ detail.cancelRemark || '-' }}</el-descriptions-item>
+            </el-descriptions>
+          </collapse-panel>
+          
+          <collapse-panel :value="true" title="费用信息">
+            <el-descriptions :column="4" >
+              <el-descriptions-item label="支付金额">{{ detail.payAmount | fix2 | dv }} 元</el-descriptions-item>
+              <el-descriptions-item label="预存金额">{{ detail.depositFee | fix2 | dv }} 元</el-descriptions-item>
+              <el-descriptions-item label="总费用">{{ detail.totalFee | fix2 | dv }} 元</el-descriptions-item>
+              <el-descriptions-item label="调度费">{{ detail.dispatchFee | fix2 | dv }} 元</el-descriptions-item>
+              <el-descriptions-item label="管理费">{{ detail.manageFee | fix2 | dv }} 元</el-descriptions-item>
+              <el-descriptions-item label="骑行费">{{ detail.ridingFee | fix2 | dv }} 元</el-descriptions-item>
+              <el-descriptions-item label="车损费">{{ detail.deductionFee | fix2 | dv }} 元</el-descriptions-item>
+              <el-descriptions-item label="已退款">{{ detail.payRefunded | fix2 | dv }} 元</el-descriptions-item>
+              <el-descriptions-item label="退款中">{{ detail.payRefunding | fix2 | dv }} 元</el-descriptions-item>
+              <el-descriptions-item label="实收">{{ detail.payAmount - detail.payRefunded - detail.payRefunding | fix2 | dv }} 元</el-descriptions-item>
+            </el-descriptions>
+          </collapse-panel>
+          
+          <collapse-panel :value="true" title="套餐信息">
+            <el-descriptions :column="3" >
+              <el-descriptions-item label="套餐名称">
+                {{ detail.suitName }}
+                <dict-tag :options="dict.type.suit_type" :value="detail.suitType" size="mini" style="margin-left: 4px;"/>
+                <dict-tag :options="dict.type.suit_riding_rule" :value="detail.suitRidingRule" size="mini" style="margin-left: 4px;"/>
+              </el-descriptions-item>
+              <el-descriptions-item label="免费骑行时间" :span="3">
+                {{ detail.suitFreeRideTime | dv }}
+                <dict-tag :options="dict.type.suit_rental_unit" :value="detail.suitRentalUnit"/>
+              </el-descriptions-item>
+              <!-- <el-descriptions-item label="起步规则" :span="3" v-if="SuitRidingRule.START === detail.suitRidingRule">{{ formattedStartRule }}</el-descriptions-item>
+              <el-descriptions-item label="区间规则" :span="3" v-if="SuitRidingRule.INTERVAL === detail.suitRidingRule">{{ formattedIntervalRule }}</el-descriptions-item> -->
+            </el-descriptions>
+          </collapse-panel>
+          
+          <collapse-panel :value="true" title="归还信息">
+            <el-descriptions :column="3" >
+              <el-descriptions-item label="归还方式">
+                <dict-tag :options="dict.type.order_return_mode" :value="detail.returnMode"/>
+              </el-descriptions-item>
+              <el-descriptions-item label="归还类型">
+                <dict-tag :options="dict.type.order_return_type" :value="detail.returnType"/>
+              </el-descriptions-item>
+              <el-descriptions-item label="归还时间">{{ detail.endTime }}</el-descriptions-item>
+              <el-descriptions-item label="归还经度" v-if="detail.returnLon">{{ detail.returnLon }}</el-descriptions-item>
+              <el-descriptions-item label="归还纬度" v-if="detail.returnLat">{{ detail.returnLat }}</el-descriptions-item>
+              <el-descriptions-item label="起始站点">{{ detail.startAreaSubName || '-' }}</el-descriptions-item>
+              <el-descriptions-item label="归还站点">{{ detail.endAreaSubName || '-' }}</el-descriptions-item>
+            </el-descriptions>
+          </collapse-panel>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card>
+          <collapse-panel :value="true" title="设备信息">
+            <el-descriptions :column="1" >
+              <el-descriptions-item label="SN">{{ detail.deviceSn }}</el-descriptions-item>
+              <el-descriptions-item label="MAC">{{ detail.deviceMac }}</el-descriptions-item>
+              <el-descriptions-item label="车牌号">{{ detail.deviceVehicleNum }}</el-descriptions-item>
+            </el-descriptions>
+          </collapse-panel>
+          
+          <collapse-panel :value="true" title="用户信息">
+            <el-descriptions :column="1" >
+              <el-descriptions-item label="用户姓名">{{ detail.userName }}</el-descriptions-item>
+              <el-descriptions-item label="手机号码">{{ detail.userPhone }}</el-descriptions-item>
+            </el-descriptions>
+          </collapse-panel>
+          
+          <collapse-panel :value="true" title="支付信息">
+            <el-descriptions :column="1" >
+              <el-descriptions-item label="支付单号">{{ detail.payNo }}</el-descriptions-item>
+              <el-descriptions-item label="支付渠道">{{ detail.payChannelName }}</el-descriptions-item>
+              <el-descriptions-item label="支付时间">{{ detail.payTime }}</el-descriptions-item>
+              <el-descriptions-item label="支付超时时间">{{ detail.payExpireTime | dv}}</el-descriptions-item>
+            </el-descriptions>
+          </collapse-panel>
+          
+          <collapse-panel :value="true" title="视频信息">
+            <el-descriptions :column="1" >
+              <el-descriptions-item label="视频链接">
+                <el-link type="primary" :href="detail.videoUrl" target="_blank">查看视频</el-link>
+              </el-descriptions-item>
+              <el-descriptions-item label="视频时间">{{ detail.videoTime }}</el-descriptions-item>
+            </el-descriptions>
+          </collapse-panel>
+        </el-card>
+      </el-col>
+    </el-row>
+
+  </div>
+</template>
+
+<script>
+import { getOrder } from '@/api/bst/order'
+import CollapsePanel from '@/components/CollapsePanel/index.vue'
+import {SuitRidingRule} from '@/utils/enums'
+
+export default {
+  name: 'OrderView',
+  dicts: ['order_status', 'device_lock_status', 'suit_type', 'suit_rental_unit', 'suit_riding_rule', 'order_return_mode', 'order_return_type'],
+  components: {
+    CollapsePanel
+  },
+  data() {
+    return {
+      id: null,
+      detail: {},
+      loading: false,
+      SuitRidingRule,
+    }
+  },
+  created() {
+    this.id = this.$route.params.id
+    this.getDetail()
+  },
+  methods: {
+    getDetail() {
+      this.loading = true
+      getOrder(this.id).then(res => {
+        this.detail = res.data;
+      }).finally(() => {
+        this.loading = false
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/bst/pay/index.vue b/src/views/bst/pay/index.vue
index 4ebd1c8..228600c 100644
--- a/src/views/bst/pay/index.vue
+++ b/src/views/bst/pay/index.vue
@@ -123,11 +123,10 @@
             <template v-if="column.key === 'id'">
               {{d.row[column.key]}}
             </template>
-            <template v-else-if="column.key === 'bstType'">
-              <dict-tag :options="dict.type.pay_bst_type" :value="d.row[column.key]"/>
-            </template>
-            <template v-else-if="column.key === 'status'">
-              <dict-tag :options="dict.type.pay_status" :value="d.row[column.key]"/>
+            <template v-else-if="column.key === 'description'">
+              {{d.row.description | dv}}
+              <dict-tag :options="dict.type.pay_bst_type" :value="d.row.bstType" size="mini" style="margin-left: 4px;"/>
+              <dict-tag :options="dict.type.pay_status" :value="d.row.status" size="mini" style="margin-left: 4px;"/>
             </template>
             <template v-else>
               {{d.row[column.key]}}
@@ -170,22 +169,19 @@ export default {
       // 字段列表
       columns: [
         {key: 'id', visible: false, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
+        {key: 'description', visible: true, label: '描述', minWidth: "250", sortable: true, overflow: false, align: 'left', width: null},
         {key: 'no', visible: true, label: '支付单号', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'bstType', visible: true, label: '类型', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'bstId', visible: false, label: '业务ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'channelNo', visible: true, label: '渠道单号', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'amount', visible: true, label: '金额', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'channelName', visible: true, label: '渠道', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'status', visible: true, label: '状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'payTime', visible: true, label: '支付时间', minWidth: null, sortable: false, overflow: false, align: 'center', width: "100"},
-        {key: 'description', visible: true, label: '描述', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'account', visible: true, label: '支付账号', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'channelCost', visible: true, label: '渠道成本', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'refunded', visible: true, label: '已退款', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'refunding', visible: true, label: '退款中', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'refunded', visible: true, label: '已退款', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'channelName', visible: true, label: '渠道', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'payTime', visible: true, label: '支付时间', minWidth: null, sortable: false, overflow: false, align: 'center', width: "100"},
+        {key: 'account', visible: true, label: '支付账号', minWidth: null, sortable: true, overflow: true, align: 'center', width: null},
+        {key: 'channelCost', visible: true, label: '渠道成本', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'ip', visible: true, label: '付款人IP', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'appName', visible: true, label: '应用', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'channelNo', visible: true, label: '渠道单号', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: "100"},
       ],
       // 排序方式
       orderSorts: ['ascending', 'descending', null],
diff --git a/src/views/bst/refund/index.vue b/src/views/bst/refund/index.vue
new file mode 100644
index 0000000..5779e12
--- /dev/null
+++ b/src/views/bst/refund/index.vue
@@ -0,0 +1,298 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="退款编号" prop="no">
+        <el-input
+          v-model="queryParams.no"
+          placeholder="请输入退款订单编号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="支付单号" prop="payNo">
+        <el-input
+          v-model="queryParams.payNo"
+          placeholder="请输入支付单号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="退款原因" prop="reason">
+        <el-input
+          v-model="queryParams.reason"
+          placeholder="请输入退款原因"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="操作人" prop="userName">
+        <el-input
+          v-model="queryParams.userName"
+          placeholder="请输入退款操作人名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-has-permi="['bst:refund:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="refundList" @selection-change="handleSelectionChange" :default-sort="defaultSort"  @sort-change="onSortChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <template v-for="column of showColumns">
+        <el-table-column
+            :key="column.key"
+            :label="column.label"
+            :prop="column.key"
+            :align="column.align"
+            :min-width="column.minWidth"
+            :sort-orders="orderSorts"
+            :sortable="column.sortable"
+            :show-overflow-tooltip="column.overflow"
+            :width="column.width"
+        >
+          <template slot-scope="d">
+            <template v-if="column.key === 'id'">
+              {{d.row[column.key]}}
+            </template>
+            <template v-else-if="column.key === 'status'">
+              <dict-tag :options="dict.type.refund_status" :value="d.row[column.key]" />
+            </template>
+            <template v-else>
+              {{d.row[column.key]}}
+            </template>
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+  </div>
+</template>
+
+<script>
+import { listRefund, getRefund, delRefund, addRefund, updateRefund } from "@/api/bst/refund";
+import { $showColumns } from '@/utils/mixins';
+import FormCol from "@/components/FormCol/index.vue";
+
+  // 默认排序字段
+const defaultSort = {
+  prop: "createTime",
+  order: "descending"
+}
+
+export default {
+  name: "Refund",
+  mixins: [$showColumns],
+  dicts: ['refund_status'],
+  components: {FormCol},
+  data() {
+    return {
+      span: 24,
+      // 字段列表
+      columns: [
+        {key: 'id', visible: false, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
+        {key: 'no', visible: true, label: '退款编号', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'payNo', visible: true, label: '支付单号', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'amount', visible: true, label: '退款金额', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'status', visible: true, label: '状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'reason', visible: true, label: '原因', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'userId', visible: false, label: '操作人ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'userName', visible: true, label: '操作人', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+      ],
+      // 排序方式
+      orderSorts: ['ascending', 'descending', null],
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 退款表格数据
+      refundList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      defaultSort,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        orderByColumn: defaultSort.prop,
+        isAsc: defaultSort.order,
+        id: null,
+        no: null,
+        payId: null,
+        status: null,
+        reason: null,
+        userId: null,
+        userName: null
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        no: [
+          { required: true, message: "退款订单编号不能为空", trigger: "blur" }
+        ],
+        payId: [
+          { required: true, message: "原支付单ID不能为空", trigger: "blur" }
+        ],
+        amount: [
+          { required: true, message: "退款金额不能为空", trigger: "blur" }
+        ],
+        createTime: [
+          { required: true, message: "创建时间不能为空", trigger: "blur" }
+        ],
+        status: [
+          { required: true, message: "退款订单状态不能为空", trigger: "change" }
+        ],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 当排序按钮被点击时触发 **/
+    onSortChange(column) {
+      if (column.order == null) {
+        this.queryParams.orderByColumn = defaultSort.prop;
+        this.queryParams.isAsc = defaultSort.order;
+      } else {
+        this.queryParams.orderByColumn = column.prop;
+        this.queryParams.isAsc = column.order;
+      }
+      this.getList();
+    },
+    /** 查询退款列表 */
+    getList() {
+      this.loading = true;
+      listRefund(this.queryParams).then(response => {
+        this.refundList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        no: null,
+        payId: null,
+        amount: null,
+        createTime: null,
+        status: null,
+        reason: null,
+        userId: null,
+        userName: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加退款";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getRefund(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改退款";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateRefund(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addRefund(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除退款编号为"' + ids + '"的数据项？').then(function() {
+        return delRefund(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('bst/refund/export', {
+        ...this.queryParams
+      }, `refund_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>