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>

    <el-card v-if="order" class="box-card">
      <el-row :gutter="24" class="box-row">
        <el-col :span="6"><b>订单编号(ID):</b> {{ order.orderNo + '(' + order.orderID + ')' }}</el-col>
        <el-col :span="6"><b>下单时间:</b> <template v-if="order.orderTime">{{ order.orderTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</template></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">{{ '交易中('+statusObj[order.status]+')' }}</el-tag>
          </template>
          <template v-else>
            <el-tag :type="order.status*1===6?'info':''" size="small">{{ statusObj[order.status] }}</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-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 | toThousandFilter }}</el-col>
        <el-col :span="6"><b>应收总额:</b> ¥{{ order.payableAmount | toThousandFilter }}</el-col>
        <el-col :span="6"><b>应收总额:</b> ¥{{ order.discountFee | toThousandFilter }}</el-col>
        <el-col :span="6"><b>运费:</b>
          <template v-if="order.freight*1===0">包邮</template>
          <template v-else-if="order.freight*1===-1">到付</template>
          <template v-else-if="order.freight*1===-2">仪器到付-产品包邮</template>
          <template v-else>¥{{ order.freight }}</template>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="box-row">
        <el-col><b>退款总额:</b> ¥{{ refundFee | toThousandFilter }}</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="payType" />
      <el-table-column label="金额" align="center" prop="associateAmount">
        <template slot-scope="{row}">
          ¥{{ row.associateAmount | toThousandFilter }}
        </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}') }}</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 | toThousandFilter }}
        </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}') }}</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,
      statusObj: {
        '0': '待确认',
        '4': '交易完成',
        '5': '订单完成',
        '6': '已关闭',
        '7': '交易全退',
        '11': '待收待发',
        '12': '待收部发',
        '13': '待收全发',
        '21': '部收待发',
        '22': '部收部发',
        '23': '部收全发',
        '31': '已收待发',
        '32': '已收部发',
        '33': '已收全发'
      }
    }
  },
  computed: {
    orderID: function() {
      return window.location.href.split('/').reverse()[0] * 1
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getRefundRecord({ orderID: this.orderID }).then(response => {
        this.order = response.data.order
        this.refundFee = response.data.refundFee
        this.receipt = response.data.receipt
        this.cmReturnedPurchaseList = response.data.cmReturnedPurchaseList
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    backToList() {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$nextTick(() => {
          this.$router.replace({
            path: '/order/list'
          })
        })
      })
    }
  }
}
</script>

<style scoped>
  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;
  }
</style>