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

<template>
  <div class="app-container">

    <!--<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
      <el-menu-item index="1" @click="backToList">订单列表</el-menu-item>
      <el-menu-item index="2">收退款记录</el-menu-item>
    </el-menu>-->
    <div class="app-header-top" style="width: 100%;float: right;margin-bottom: 10px;">
      <div class="app-title">收退款记录</div>
      <el-button type="primary" icon="el-icon-back" style="float: right;" @click="backToList">返回</el-button>
    </div>

    <el-card v-if="order" class="box-card">
      <el-row :gutter="24" class="box-row">
        <el-col :span="6"><b>下单时间:</b> <template v-if="order.orderTime">{{ order.orderTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</template></el-col>
        <el-col :span="12"><b>订单编号(ID):</b> {{ order.orderNo + '(' + order.orderId + ')' }}</el-col>
      </el-row>
      <el-row :gutter="24" class="box-row">
        <el-col :span="6"><b>订单状态:</b>
          <template v-if="['11','12','13','21','22','23','31','32','33'].indexOf(order.status)>=0">
            <el-tag type="success" size="small">交易中</el-tag>
          </template>
          <template v-else>
            <el-tag :type="order.status*1===6?'info':''" size="small">{{ order.status | orderStatusFilter }}</el-tag>
          </template>
        </el-col>
        <el-col :span="6"><b>收款状态:</b>
          <el-tag v-if="order.receiptStatus*1===1" type="danger" size="small">待收款</el-tag>
          <el-tag v-if="order.receiptStatus*1===2" type="warning" size="small">部分收款</el-tag>
          <el-tag v-if="order.receiptStatus*1===3" type="success" size="small">已收款</el-tag>
        </el-col>
        <el-col :span="6"><b>退款状态:</b>
          <el-tag v-if="order.refundType*1===1" type="warning" size="small">部分退款</el-tag>
          <el-tag v-else-if="order.refundType*1===2" type="danger" size="small">已退款</el-tag>
          <el-tag v-else type="info" size="small">无退款</el-tag>
        </el-col>
        <el-col :span="6"><b>发货状态:</b>
          <el-tag v-if="order.sendOutStatus*1===1" type="danger" size="small">待发货</el-tag>
          <el-tag v-if="order.sendOutStatus*1===2" type="warning" size="small">部分发货</el-tag>
          <el-tag v-if="order.sendOutStatus*1===3" type="success" size="small">已发货</el-tag>
        </el-col>
      </el-row>
      <el-row v-if="order.bpOrderUserinfo" :gutter="24" class="box-row">
        <el-col :span="6"><b>买家:</b> {{ order.bpOrderUserinfo.name }}</el-col>
        <el-col :span="6"><b>收货人:</b> {{ order.bpOrderUserinfo.shouHuoRen }}</el-col>
        <el-col :span="6"><b>手机:</b> {{ order.bpOrderUserinfo.mobile }}</el-col>
        <el-col :span="6"><b>地址:</b> {{ order.bpOrderUserinfo.province +' '+ order.bpOrderUserinfo.city +' '+ order.bpOrderUserinfo.town +' '+ order.bpOrderUserinfo.address }}</el-col>
      </el-row>
      <el-row :gutter="24" class="box-row">
        <el-col :span="6"><b>订单金额:</b> ¥{{ order.payTotalFee | toThousandFloatFilter }}</el-col>
        <el-col :span="6"><b>应收总额:</b> ¥{{ order.payableAmount | toThousandFloatFilter }}</el-col>
        <el-col :span="6"><b>运费:</b>
          <span>{{ order.postageInfo }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="box-row">
        <el-col><b>退款总额:</b> ¥{{ refundFee | toThousandFloatFilter }}</el-col>
      </el-row>
    </el-card>

    <h3>收款记录: {{ receipt.length>0 ? '' : '无' }}</h3>
    <el-table
      v-if="receipt.length>0"
      v-loading="listLoading"
      :data="receipt"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
    >
      <el-table-column align="center" label="序号" width="50">
        <template slot-scope="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column label="收款ID" align="center" prop="receiptId" />
      <el-table-column label="收款方式" align="center" prop="bankNameType" />
      <el-table-column label="金额" align="center" prop="associateAmount">
        <template slot-scope="{row}">
          ¥{{ row.associateAmount | toThousandFloatFilter }}
        </template>
      </el-table-column>
      <el-table-column label="收款时间" align="center" prop="receiptDate">
        <template v-if="row.receiptDate" slot-scope="{row}">
          <i class="el-icon-time" />
          <span>{{ row.receiptDate | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
    </el-table>

    <h3>付款记录: {{ cmReturnedPurchaseList.length>0 ? '' : '无' }}</h3>
    <el-table
      v-if="cmReturnedPurchaseList.length>0"
      v-loading="listLoading"
      :data="cmReturnedPurchaseList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
    >
      <el-table-column align="center" label="序号" width="50">
        <template slot-scope="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column label="退款编号" align="center" prop="returnedNo" />
      <el-table-column label="退款金额" align="center" prop="refundFee">
        <template slot-scope="{row}">
          ¥{{ row.refundFee | toThousandFloatFilter }}
        </template>
      </el-table-column>
      <el-table-column label="申请时间" align="center" prop="returnTime">
        <template v-if="row.returnTime" slot-scope="{row}">
          <i class="el-icon-time" />
          <span>{{ row.returnTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="退款状态" align="center" prop="payType">
        <template slot-scope="{row}">
          <el-tag v-if="row.status*1===1" type="warning" size="small">待审核</el-tag>
          <el-tag v-if="row.status*1===2" type="success" size="small">审核通过</el-tag>
          <el-tag v-if="row.status*1===3" type="danger" size="small">审核不通过</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <template>
      <el-backtop style="right: 40px; bottom: 40px;">
        <i class="el-icon-upload2" />
      </el-backtop>
    </template>
  </div>
</template>

<script>
import { getRefundRecord } from '@/api/order'
export default {
  data() {
    return {
      activeIndex: '2',
      receipt: [],
      cmReturnedPurchaseList: [],
      order: null,
      refundFee: 0,
      returnedPurchaseFee: 0
    }
  },
  computed: {
    orderId: function() {
      return this.$route.query.orderId * 1
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.listLoading = true
      try {
        const res = await getRefundRecord({ orderId: this.orderId })
        this.order = res.data.order
        this.refundFee = res.data.refundFee
        this.returnedPurchaseFee = res.data.returnedPurchaseFee
        this.receipt = res.data.receipt
        this.cmReturnedPurchaseList = res.data.cmReturnedPurchaseList
        this.listLoading = false
      } catch (error) {
        this.listLoading = false
      }
    },
    backToList() {
      let parentPath = '/order/list'
      const parentView = this.$store.getters.visitedViews.slice(-2)[0]
      if (parentView) {
        const oid = parentView.fullPath.split('/').reverse()[0] * 1
        if (this.orderID === oid) {
          parentPath = parentView.fullPath
        }
      }
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$nextTick(() => {
          this.$router.replace({
            path: parentPath
          })
        })
      })
    }
  }
}
</script>

<style scoped>
  .app-title{
    float: left;
    line-height: 36px;
    font-size: 18px;
    font-weight: bold;
    color: #999999;
  }
  h1{
    color: #409EFF;
    font-size: 24px;
    text-align: center;
  }
  h3{
    font-size: 16px;
    margin: 0;
    padding: 20px 0 10px 0;
    border-top: 1px dashed #eee;
  }
  .box-card{
    margin-top: 20px;
    font-size: 14px;
  }
  .box-row{
    padding: 10px 0;
  }
  .refund-item{
    border-bottom:1px dashed #E4E7ED;
    margin-bottom: 20px;
  }
</style>