feat(订单模块): 添加退款状态及相关功能

- 更新订单状态，新增“退款中”和“已退款”状态选项
- 在订单列表中添加退款申请和退款详情按钮
- 更新订单详情页面，显示退款状态信息
- 添加退款申请对话框，支持用户输入退款备注及选择是否退运费
- 优化样式以提升用户体验

config/index.js

@@ -23,7 +23,7 @@ module.exports = {
     },
 
     // Various Dev Server settings
-    host: '192.168.110.159', // can be overwritten by process.env.HOST
+    host: '192.168.110.160', // can be overwritten by process.env.HOST
     port: 8001, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,

src/views/modules/order/buyorder.vue

@@ -13,6 +13,8 @@
         <el-radio-button label="1">待发出</el-radio-button>
         <el-radio-button label="2">已发出</el-radio-button>
         <el-radio-button label="3">已完成</el-radio-button>
+        <el-radio-button label="7">退款中</el-radio-button>
+        <el-radio-button label="6">已退款</el-radio-button>
       </el-radio-group>
 
       <div class="order_type_block">
@@ -255,6 +257,9 @@
                     <div><el-button style=" line-height: 6px;" type="primary" size="mini"
                         @click="orderDeliver(fitem)">发出</el-button>
                     </div>
+                    <div v-if="rowRefundable(fitem)" style="margin-top: 8px;">
+                      <el-button type="warning" size="mini" plain @click="openRefundApply(fitem)">申请退款</el-button>
+                    </div>
                   </div>
                 </div>
                 <div class="td5 flexbox" style="justify-content: center; align-items: center; width: 150px; text-align:center">
@@ -397,25 +402,44 @@
       </el-table-column>
       <!-- <el-table-column prop="shippingTime" header-align="center" align="center" label="发出时间">
       </el-table-column> -->
-      <el-table-column prop="orderStatus" header-align="center" align="center" label="订单状态" width="80">
+      <el-table-column
+        v-if="tabChange.tabActiveName === '7' || tabChange.tabActiveName === '6'"
+        header-align="center"
+        align="left"
+        label="退款备注"
+        min-width="160"
+        show-overflow-tooltip>
+        <template slot-scope="scope">
+          <span>{{ scope.row.refundRemark || '—' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="orderStatus" fixed="right" header-align="center" align="center" label="订单状态" width="90">
         <template slot-scope="scope">
           <el-tag v-if="scope.row.orderStatus == 0" type="success">待付款</el-tag>
           <el-tag v-if="scope.row.orderStatus == 1" type="success">待发出</el-tag>
           <el-tag v-if="scope.row.orderStatus == 2" type="danger">已发出</el-tag>
           <el-tag v-if="scope.row.orderStatus == 3" type="warning">已完成</el-tag>
           <el-tag v-if="scope.row.orderStatus == 4" type="info">交易失败</el-tag>
+          <el-tag v-if="scope.row.orderStatus == 7" type="warning">退款中</el-tag>
+          <el-tag v-if="scope.row.orderStatus == 6" type="info">已退款</el-tag>
         </template>
       </el-table-column>
       <!-- <el-table-column prop="successTime" header-align="center" align="center" label="交易成功时间">
           </el-table-column> -->
-      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
+      <el-table-column fixed="right" header-align="center" align="center" width="220" label="操作">
         <template slot-scope="scope">
+          <div style="display: flex; flex-direction: column; align-items: center; line-height: 1.6;">
             <router-link
               :to="{ path: 'order-buyorderdetail', query: { orderSn: scope.row.orderSn, ordertype: scope.row.orderStatus} }">
               <el-button type="text" size="small">订单详情</el-button>
             </router-link>
+            <el-button v-if="rowRefundable(scope.row)" type="text" size="small" style="color: #e6a23c;"
+              @click="openRefundApply(scope.row)">申请退款</el-button>
+            <el-button v-if="scope.row.orderStatus == 7 || scope.row.orderStatus == 6" type="text" size="small"
+              style="color: #409eff;" @click="openRefundDetail(scope.row)">钱款去向</el-button>
             <el-button type="text" size="small" @click="deleteOrder(scope.row)" v-if="tabChange.tabActiveName == 0&&tabChange.tabActiveName != ''"
               style="color: #f11f3b;">删除</el-button>
+          </div>
           <!-- <span v-if="scope.row.orderStatus">
             <el-button type="text" size="small" @click="deliverDetail(scope.row)"
               v-if="isAuth('book:buyorderdetail:deliver')">物流详情</el-button>
@@ -507,6 +531,52 @@
         <el-button type="primary" @click="booksHandleClose">确 定</el-button>
       </span>
     </el-dialog>
+    <el-dialog title="申请退款" :visible.sync="refundApplyVisible" width="480px" append-to-body
+      @close="refundApplyDialogClose">
+      <el-form ref="refundApplyFormRef" :model="refundApplyForm" label-width="100px">
+        <el-form-item label="是否退运费">
+          <el-radio-group v-model="refundApplyForm.refundShipping">
+            <el-radio :label="1">是</el-radio>
+            <el-radio :label="0">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="退款备注">
+          <el-input v-model="refundApplyForm.refundRemark" type="textarea" :rows="4" placeholder="请输入退款备注"
+            maxlength="500" show-word-limit></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="refundApplyVisible = false">取 消</el-button>
+        <el-button type="primary" :loading="refundApplySubmitting" @click="refundApplySubmit">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="钱款去向" :visible.sync="refundDetailVisible" width="420px" append-to-body>
+      <div v-loading="refundDetailLoading" class="refund-detail-dialog">
+        <div class="refund-total-card">
+          <div class="refund-total-label">退款金额</div>
+          <div class="refund-total-value">￥{{ formatMoney(refundDetail.refundFee) }}</div>
+        </div>
+        <div class="refund-amount-card">
+          <div class="refund-amount-item" v-for="(item, idx) in refundAmountItems" :key="idx">
+            <span>{{ item.label }}</span>
+            <span :class="item.valueClass">{{ item.value }}</span>
+          </div>
+          <div v-if="refundAmountItems.length === 0" class="refund-empty-text">暂无金额明细</div>
+        </div>
+        <div class="refund-flow-card">
+          <el-timeline v-if="refundFlowList.length > 0">
+            <el-timeline-item v-for="(item, idx) in refundFlowList" :key="idx" :timestamp="item.createTime">
+              <div class="refund-flow-title">{{ item.title }}</div>
+              <div class="refund-flow-content">{{ item.content }}</div>
+            </el-timeline-item>
+          </el-timeline>
+          <div v-if="refundFlowList.length === 0" class="refund-empty-text">暂无退款进度</div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="refundDetailVisible = false">关 闭</el-button>
+      </span>
+    </el-dialog>
     <el-pagination v-if="tabChange.isPrint != 1" @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
       :current-page="pageIndex" :page-sizes="[20, 40, 60, 100, 150]" :page-size="pageSize" :total="totalPage"
       layout="total, sizes, prev, pager, next, jumper">
@@ -584,7 +654,7 @@
         sheetVisible: false,
         dataList: [],
         tabChange: {
-          tabActiveName: '', // tab筛选默认all全部 0：待付款  1：待发出 2：已发出 3：已完成
+          tabActiveName: '', // tab筛选默认all全部 0：待付款 1：待发出 2：已发出 3：已完成 7：退款中 6：已退款
           isPrint: 0, // 已发出列表筛选 0：显示订单 1：显示可打印列表,
           orderName: '0', //订单名称筛选 all:全部  0:健康超市 1:电子书   2:充值订单
           sheetCode: 2, // 面单状态2 未打印，1 已打印 0全部
@@ -594,6 +664,18 @@
           text: '',
           orderId: ''
         },
+        refundApplyVisible: false,
+        refundApplySubmitting: false,
+        refundApplyOrder: {},
+        refundApplyForm: {
+          refundShipping: 0,
+          refundRemark: ''
+        },
+        refundDetailVisible: false,
+        refundDetailLoading: false,
+        refundDetail: {},
+        refundFlowList: [],
+        refundAmountItems: [],
         pageIndex: 1,
         sheetPageIndex: 1,
         pageSize: 20,
@@ -1084,6 +1166,139 @@
           })
         })
       },
+      rowRefundable(row) {
+        if (!row) return false
+        const v = row.refundableStatus
+        return v === true || v === 1 || v === '1' || v === 'true'
+      },
+      openRefundApply(row) {
+        this.refundApplyOrder = row || {}
+        this.refundApplyForm = {
+          refundShipping: 0,
+          refundRemark: ''
+        }
+        this.refundApplyVisible = true
+        this.$nextTick(() => {
+          if (this.$refs.refundApplyFormRef) {
+            this.$refs.refundApplyFormRef.clearValidate()
+          }
+        })
+      },
+      refundApplyDialogClose() {
+        this.refundApplyOrder = {}
+      },
+      refundApplySubmit() {
+        const orderId = this.refundApplyOrder.orderId
+        if (!orderId) {
+          this.$message.error('订单信息异常')
+          return
+        }
+        this.refundApplySubmitting = true
+        this.$http({
+          url: this.$http.adornUrl('/book/buyOrder/refundOrder'),
+          method: 'post',
+          data: this.$http.adornData({
+            orderId: orderId,
+            deductShipping: this.refundApplyForm.refundShipping,
+            remark: this.refundApplyForm.refundRemark
+          })
+        }).then(({ data }) => {
+          this.refundApplySubmitting = false
+          if (data && data.code === 0) {
+            this.$message.success('提交成功')
+            this.refundApplyVisible = false
+            this.getDataList()
+          } else {
+            this.$message.error((data && data.msg) || '提交失败')
+          }
+        }).catch(() => {
+          this.refundApplySubmitting = false
+        })
+      },
+      formatMoney(value) {
+        const n = Number(value)
+        if (isNaN(n)) return '0.00'
+        return n.toFixed(2)
+      },
+      hasAmount(value) {
+        if (value === null || value === undefined || value === '') return false
+        const n = Number(value)
+        return !isNaN(n) && n !== 0
+      },
+      payTypeLabel(payType) {
+        const map = {
+          1: '微信',
+          2: '支付宝',
+          3: 'ios内购',
+          4: '天医币'
+        }
+        return map[payType] || '其他'
+      },
+      buildRefundAmountItems(detail, row) {
+        const amountItems = []
+        const payType = Number(detail.payType || row.paymentMethod || row.payType)
+        const payMoney = detail.refundFee
+        const orderMoney = detail.orderMoney || row.orderMoney
+        const shippingMoney = detail.shippingMoney || row.shippingMoney
+        if (this.hasAmount(orderMoney)) {
+          amountItems.push({
+            label: '订单支付金额',
+            value: `￥${this.formatMoney(orderMoney)}`
+          })
+        }
+        if (this.hasAmount(detail.shippingMoney)) {
+          amountItems.push({
+            label: '运费金额',
+            value: `-￥${this.formatMoney(shippingMoney)}`,
+            valueClass: 'refund-amount-orange'
+          })
+        }
+        if (this.hasAmount(payMoney)) {
+          amountItems.push({
+            label: `${this.payTypeLabel(payType)}退回`,
+            value: `￥${this.formatMoney(payMoney)}`,
+            valueClass: 'refund-amount-green'
+          })
+        }
+        if (this.hasAmount(detail.refundJf)) {
+          amountItems.push({
+            label: '积分退回',
+            value: `${Number(detail.refundJf)}`,
+            valueClass: 'refund-amount-green'
+          })
+        }
+        return amountItems
+      },
+      openRefundDetail(row) {
+        if (!row || !row.orderId) {
+          this.$message.error('订单信息异常')
+          return
+        }
+        this.refundDetailVisible = true
+        this.refundDetailLoading = true
+        this.refundDetail = {}
+        this.refundFlowList = []
+        this.refundAmountItems = []
+        this.$http({
+          url: this.$http.adornUrl('/book/buyOrder/refundDetail'),
+          method: 'post',
+          data: this.$http.adornData({
+            orderId: row.orderId
+          })
+        }).then(({ data }) => {
+          this.refundDetailLoading = false
+          if (data && data.code === 0) {
+            const detail = data.info || {}
+            this.refundDetail = detail
+            this.refundFlowList = Array.isArray(detail.list) ? detail.list : []
+            this.refundAmountItems = this.buildRefundAmountItems(detail, row)
+          } else {
+            this.$message.error((data && data.msg) || '查询失败')
+          }
+        }).catch(() => {
+          this.refundDetailLoading = false
+        })
+      },
       // 删除订单
       deleteOrder(row) {
         this.$confirm(`确定对订单编号${row.orderSn}进行删除操作?`, '提示', {
@@ -1389,7 +1604,7 @@
           //console.log(val)
           this.getDataList()
           if (this.tabChange.tabActiveName === '' || this.tabChange.tabActiveName === '0' || this.tabChange
-            .tabActiveName === '1' || this.tabChange.tabActiveName === '3') {
+            .tabActiveName === '1' || this.tabChange.tabActiveName === '3' || this.tabChange.tabActiveName === '7' || this.tabChange.tabActiveName === '6') {
             this.tabChange.isPrint = '0'
           }
           if (this.tabChange.isPrint === '1') {
@@ -1712,4 +1927,107 @@
     line-height: 28px;
     font-size: 12px;
   }
+
+  .refund-detail-dialog {
+    .refund-total-card {
+      background: #f5f7fa;
+      border-radius: 8px;
+      padding: 16px;
+      text-align: center;
+      margin-bottom: 12px;
+    }
+
+    .refund-total-label {
+      color: #909399;
+      font-size: 14px;
+      margin-bottom: 8px;
+    }
+
+    .refund-total-value {
+      font-size: 40px;
+      font-weight: 600;
+      color: #303133;
+      line-height: 1;
+    }
+
+    .refund-amount-card,
+    .refund-flow-card {
+      background: #f5f7fa;
+      border-radius: 8px;
+      padding: 10px 14px;
+      margin-bottom: 12px;
+    }
+
+    .refund-flow-card {
+      padding: 20px;
+
+      .el-timeline {
+        padding-left: 0;
+
+        /deep/ .el-timeline-item__node--normal {
+          left: 0;
+        }
+      }
+    }
+
+    .refund-amount-item {
+      display: flex;
+      justify-content: space-between;
+      line-height: 34px;
+      border-bottom: 1px solid #e4e7ed;
+      color: #303133;
+      font-size: 14px;
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+
+    .refund-amount-highlight {
+      color: #13ce66;
+    }
+
+    .refund-amount-green {
+      color: #13ce66;
+    }
+
+    .refund-amount-orange {
+      color: #e6a23c;
+    }
+
+    .refund-flow-title {
+      color: #303133;
+      font-size: 16px;
+      margin-bottom: 4px;
+    }
+
+    .refund-flow-time {
+      color: #909399;
+      font-size: 13px;
+      margin-bottom: 6px;
+    }
+
+    .refund-flow-content {
+      color: #606266;
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    /deep/ .el-timeline-item__timestamp {
+      color: #909399;
+      font-size: 13px;
+    }
+
+    /deep/ .el-timeline-item__node {
+      width: 10px;
+      height: 10px;
+    }
+
+    .refund-empty-text {
+      color: #909399;
+      text-align: center;
+      line-height: 30px;
+      font-size: 13px;
+    }
+  }
 </style>

src/views/modules/order/buyorderdetail.vue

@@ -14,6 +14,12 @@
       <span v-if="orderDetails.orderStatus == 3" class="item hightLight3"
         >已完成</span
       >
+      <span v-if="orderDetails.orderStatus == 7" class="item hightLight7"
+        >退款中</span
+      >
+      <span v-if="orderDetails.orderStatus == 6" class="item hightLight6"
+        >已退款</span
+      >
     </div>
     <div>
       <ul class="list">
@@ -56,6 +62,12 @@
           <span v-if="orderDetails.orderStatus == 3" class="hightLight"
             >已完成</span
           >
+          <span v-if="orderDetails.orderStatus == 7" class="hightLight"
+            >退款中</span
+          >
+          <span v-if="orderDetails.orderStatus == 6" class="hightLight"
+            >已退款</span
+          >
           <!-- <el-button v-if="orderDetails.orderStatus == 1" @click="godeliver" class="text_button" size="mini" type="text">去发出</el-button>           -->
         </li>
         <!-- <li><span class="infoTitle">商品总数：</span><span>{{orderDetails.}}</span></li> -->
@@ -1156,6 +1168,14 @@ export default {
   .hightLight3 {
     background-color: #67c23a;
   }
+
+  .hightLight7 {
+    background-color: #f56c6c;
+  }
+
+  .hightLight6 {
+    background-color: #f56c6c;
+  }
 }
 
 .noinfo {