caimei-mall-admin-ui/src/views/finance/payfinance-refund-record.vue

<template>
  <div class="app-container">
    <el-card v-if="cmReturnedPurchaseList.length === 0" class="box-card" style="text-align:center;color: #999;line-height: 120px;">暂无退款退货记录~</el-card>
    <div v-else id="printBox">
      <el-card ref="print" class="box-card" style="margin: 5px auto;">
        <div class="refund-item">
          <h1 class="refund-item-title">审核信息</h1>
          <el-row :gutter="24" class="box-row">
            <el-col :span="5"><b>审核人：</b> 卢海珠</el-col>
            <el-col :span="4"><b>审核时间：</b> 2023-03-06 15:28:50</el-col>
            <el-col :span="15"><b>审核备注：</b> 没有货了</el-col>
          </el-row>
        </div>
      </el-card>
      <el-card ref="print" class="box-card" style="margin: 5px auto;">
        <div class="refund-item">
          <h1 class="refund-item-title">申请信息</h1>
          <el-row :gutter="24" class="box-row">
            <el-col :span="5"><b>申请人：</b> 卢海珠</el-col>
            <el-col :span="4"><b>申请时间：</b> 2023-03-06 15:28:50</el-col>
            <el-col :span="15"><b>退款备注：</b> 有部分没有货，客户需要重新下单</el-col>
          </el-row>
        </div>
      </el-card>
      <el-card ref="print" class="box-card" style="margin: 5px auto;">
        <div class="refund-item">
          <el-row :gutter="24" class="box-row">
            <el-col :span="5"><b>退款编号：</b> T1678087730239854</el-col>
            <el-col :span="4"><b>申请时间：</b> 2023-03-06 15:28:50</el-col>
            <el-col :span="4"><b>申请金额：</b> 30000.00元</el-col>
            <el-col :span="11"><b>退款方式：</b> 线上退回：597.00元</el-col>
          </el-row>
        </div>
      </el-card>
      <el-card ref="print" class="box-card" style="margin: 5px auto;">
        <div class="refund-item">
          <el-row :gutter="24" class="box-row">
            <el-col :span="5"><b>订单编号(ID)：</b> {{ repacts.orderNo }}({{ repacts.orderId }})</el-col>
            <el-col :span="4"><b>下单时间：</b> {{ repacts.applyTime }}</el-col>
            <el-col :span="4"><b>机构名称：</b> {{ repacts.clubName }}</el-col>
            <el-col :span="4"><b>订单状态：</b> 交易中</el-col>
          </el-row>
          <el-row :gutter="24" class="box-row">
            <el-col :span="5"><b>订单金额：</b> {{ repacts.payableAmount }}</el-col>
            <el-col :span="4"><b>应收金额：</b> {{ repacts.payableAmount }}</el-col>
            <el-col :span="4"><b>机构运费：</b>  <span>{{ repacts.postageInfo }}</span></el-col>
          </el-row>
          <el-row :gutter="24" class="box-row">
            <el-col :span="5"><b>收款状态：</b> {{ repacts.status | statusFilter }}</el-col>
            <el-col :span="4"><b>发货状态：</b> {{ repacts.status | statusFilter }}</el-col>
            <el-col :span="4"><b>付款状态：</b> {{ repacts.status | statusFilter }}</el-col>
            <el-col :span="4"><b>退款状态：</b> {{ repacts.status | statusFilter }}</el-col>
          </el-row>
          <el-row :gutter="24" class="box-row">
            <el-col :span="5"><b>收货人：</b> 黄志国</el-col>
            <el-col :span="4"><b>手机：</b> 15817887257</el-col>
            <el-col :span="15"><b>地址：</b> 广东省深圳市龙华区大浪街道上早新村</el-col>
          </el-row>
          <el-table :data="repacts.shopOrderIdList" border fit highlight-current-row default-expand-all :header-cell-style="{background:'#e9f3f7',color:'#606266'}">
            <el-table-column label="商品信息" type="expand" width="80px">
              <template slot-scope="scope">
                <el-table :data="scope.row.products" border fit highlight-current-row :header-cell-style="{background:'#f9f9f9',color:'#606266'}">
                  <el-table-column label="商品图片" align="center" prop="image" width="100">
                    <template slot-scope="{row}">
                      <el-popover
                        placement="top-start"
                        title=""
                        width="120"
                        trigger="hover"
                      >
                        <img :src="row.image" alt="" style="width:100px;height:100px;">
                        <img slot="reference" :src="row.image" alt="" style="width:50px;height:50px;">
                      </el-popover>
                    </template>
                  </el-table-column>
                  <el-table-column label="商品名" align="center" prop="productName" />
                  <el-table-column label="规格" align="center" prop="unit" />
                  <el-table-column label="购买数量" align="center" prop="num" />
                  <el-table-column label="退货" align="center" prop="returnNum" />
                  <el-table-column label="单价" align="center" prop="price" />
                  <el-table-column label="总额" align="center" prop="totalPrice" />
                  <el-table-column label="已发货" align="center" prop="num" />
                  <el-table-column label="已退货" align="center" prop="num" />
                  <el-table-column label="本次退货" align="center" prop="num" />
                  <el-table-column label="待发货" align="center" prop="num" />
                  <el-table-column label="已取消" align="center" prop="num" />
                  <el-table-column label="本次取消" align="center" prop="num" />
                </el-table>
              </template>
            </el-table-column>
            <el-table-column label="子订单编号(ID)" align="center" prop="shopOrderNos" width="240">
              <template slot-scope="scope">
                <span>{{ scope.row.shopOrderNos }}({{ scope.row.shopOrderIds }})</span>
              </template>
            </el-table-column>
            <el-table-column label="子订单金额" align="center" prop="payShopTotals" />
            <el-table-column label="收款状态" prop="status" align="center" width="100">
              <template slot-scope="{ row }">
                <span
                  :class="{
                    'el-span-warning': row.status == 0,
                    'el-span-success': row.status == 1,
                    'el-span-danger': row.status == 2
                  }"
                >
                  {{ row.status | statusFilter }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="发货状态" prop="status" align="center" width="100">
              <template slot-scope="{ row }">
                <span
                  :class="{
                    'el-span-warning': row.status == 0,
                    'el-span-success': row.status == 1,
                    'el-span-danger': row.status == 2
                  }"
                >
                  待发货
                </span>
              </template>
            </el-table-column>
            <el-table-column label="付款状态" prop="status" align="center" width="100">
              <template slot-scope="{ row }">
                <span
                  :class="{
                    'el-span-warning': row.status == 0,
                    'el-span-success': row.status == 1,
                    'el-span-danger': row.status == 2
                  }"
                >
                  待付款
                </span>
              </template>
            </el-table-column>
            <el-table-column label="供应商" align="center" prop="shopName" />
            <el-table-column label="商品总额" align="center" prop="payShopTotals" />
            <el-table-column label="应付金额" align="center" prop="payShopTotals" />
            <el-table-column label="已付金额" align="center" prop="payShopTotals" />
            <el-table-column label="待付金额" align="center" prop="payShopTotals" />
          </el-table>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getRefundRecord } from '@/api/order'
export default {
  name: 'RefundRecord',
  filters: {
    statusFilter(status) {
      const map = {
        0: '待付款',
        1: '已付款',
        2: '审核不通过'
      }
      return map[status]
    }
  },
  data() {
    return {
      payRepacts: {},
      repacts: {},
      products: [],
      cmReturnedPurchaseList: []
    }
  },
  computed: {
    orderId: function() {
      return this.$route.query.orderId * 1
    }
  },
  created() {
    this.getRefundRecord()
  },
  methods: {
    async getRefundRecord() {
      try {
        const res = await getRefundRecord({ orderId: this.orderId })
        this.cmReturnedPurchaseList = res.data.cmReturnedPurchaseList
        console.log('res', res)
      } catch (error) {
        console.log('error', error)
      }
    }
  }
}
</script>

<style scoped>
  .app-title{
    line-height: 36px;
    font-size: 26px;
    font-weight: bold;
    color: #409EFF;
    text-align: center;
  }
  .box-card{
    margin-top: 20px;
    font-size: 14px;
  }
  .box-row{
    padding: 10px 0;
  }
  .box-row .dropdown{
    margin-top: -10px;
  }
  .refund-item{
    padding: 5px 0;
  }
  .refund-item-title{
    line-height: 24px;
    font-size: 14px;
    color: #409EFF;
    margin: 0;
  }
  .order-item{
    background:#f7f7f7;
    margin-bottom: 20px;
    padding: 10px 15px;
    border-radius: 5px;
  }
  .product-row{
    padding: 10px 0;
    background: #EBEEF5;
    border-top: 1px dashed #DCDFE6;
  }
  .op-item{
    padding: 5px 0;
  }
  .el-span-warning{
  color: #E6A23C;
  }
  .el-span-success{
    color: #67C23A;
  }
  .el-span-danger{
    color: #F56C6C;
  }
  /deep/ .el-table__expanded-cell[class*=cell]{
    padding:10px 10px !important;
  }
  /deep/ .el-card__body{
    padding: 5px 20px !important;
  }
</style>