caimei-mall-admin-ui/src/views/order/refund-return.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="refundList.length === 0" class="box-card" style="text-align:center;color: #999;">暂无退款退货详情记录~</el-card>

    <template v-else>
      <el-card v-for="(refund,index) in refundList" :key="index" class="box-card">
        <div class="refund-item">
          <h3>审核信息</h3>
          <el-row :gutter="24" class="box-row">
            <el-col :span="6"><b>审核人:</b> {{ refund.reviewUserName }}</el-col>
            <el-col :span="6"><b>审核时间:</b> {{ refund.confirmReturnTime }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="24"><b>审核备注:</b> {{ refund.reviewRemarks ? refund.reviewRemarks : '无' }}</el-col>
          </el-row>
          <el-row v-if="refund.reviewImage1 || refund.reviewImage2 || refund.reviewImage3 || refund.reviewImage4 || refund.reviewImage5 " :gutter="24" class="box-row">
            <el-col :span="2"><b>审核凭证:</b></el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <img v-if="refund.reviewImage1" :src="refund.reviewImage1" width="65" alt="">
              <img v-if="refund.reviewImage2" :src="refund.reviewImage2" width="65" alt="">
              <img v-if="refund.reviewImage3" :src="refund.reviewImage3" width="65" alt="">
              <img v-if="refund.reviewImage4" :src="refund.reviewImage4" width="65" alt="">
              <img v-if="refund.reviewImage5" :src="refund.reviewImage5" width="65" alt="">
            </el-col>
          </el-row>
        </div>
        <div class="refund-item">
          <h3>申请信息</h3>
          <el-row :gutter="24" class="box-row">
            <el-col :span="6"><b>申请人:</b> {{ refund.applicationUserName }}</el-col>
            <el-col :span="6"><b>申请时间:</b> <template v-if="refund.returnTime">{{ refund.returnTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</template></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"><b>退款备注:</b> {{ refund.remarks ? refund.remarks : '无' }}</el-col>
          </el-row>
          <el-row v-if="refund.image1 || refund.image2 || refund.image3 || refund.image4 || refund.image5 " :gutter="24" class="box-row">
            <el-col :span="4"><b>申请凭证:</b></el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <img v-if="refund.image1" :src="refund.image1" width="65" alt="">
              <img v-if="refund.image2" :src="refund.image2" width="65" alt="">
              <img v-if="refund.image3" :src="refund.image3" width="65" alt="">
              <img v-if="refund.image4" :src="refund.image4" width="65" alt="">
              <img v-if="refund.image5" :src="refund.image5" width="65" alt="">
            </el-col>
          </el-row>
        </div>
        <div class="refund-item">
          <h3>退款信息</h3>
          <el-row :gutter="24" class="box-row">
            <el-col :span="6"><b>退款编号:</b> {{ refund.returnedNo }}</el-col>
            <el-col :span="6"><b>申请时间:</b> <template v-if="refund.returnTime">{{ refund.returnTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</template></el-col>
            <el-col :span="6"><b>申请金额:</b> ¥{{ refund.refundFee | toThousandFloatFilter }}</el-col>
            <!-- <el-col :span="6"><b>退款审核状态:</b>
              <el-tag v-if="refund.status*1===1" type="warning" size="small">待审核</el-tag>
              <el-tag v-if="refund.status*1===2" type="success" size="small">审核通过</el-tag>
              <el-tag v-if="refund.status*1===3" type="danger" size="small">审核不通过</el-tag>
            </el-col> -->
          </el-row>
          <el-row :gutter="24" class="box-row">
            <el-col :span="20"><b>退款方式:</b>
              <template v-if="refund.returnedWay*1===4">未支付无退款</template>
              <template v-else-if="refund.returnedWay*1===1">
                <span v-if="refund.refundBalanceFee*1 !== 0">余额账户:¥{{ refund.refundBalanceFee | toThousandFloatFilter }}</span>
                <span v-if="refund.refundOnlineFee*1 !== 0">线上退回:¥{{ refund.refundOnlineFee | toThousandFloatFilter }}</span>
                <span v-if="refund.refundOfflineFee*1 !== 0">线下转账:¥{{ refund.refundOfflineFee | toThousandFloatFilter }}</span>
              </template>
              <template v-else>----</template>
            </el-col>
          </el-row>
          <template v-if="refund.returnedWay*1===1 && refund.refundOfflineFee*1!==0">
            <el-row :gutter="24" class="box-row">
              <el-col v-if="refund.refundFee" :span="12"><b>退款银行:</b>
                <template v-if="refund.payType*1===1">建设银行7297</template>
                <template v-else-if="refund.payType*1===2">中信银行0897</template>
                <template v-else-if="refund.payType*1===3">中信银行7172</template>
                <template v-else-if="refund.payType*1===4">广发银行0115</template>
                <template v-else-if="refund.payType*1===5">广发银行5461</template>
              </el-col>
              <el-col v-else :span="12">暂无支付方式</el-col>
            </el-row>
            <el-row :gutter="24" class="box-row">
              <el-col :span="6"><b>开户名:</b> {{ refund.bankAccountName ? refund.bankAccountName : '' }}</el-col>
              <el-col :span="6"><b>账号:</b> {{ refund.bankAccountNo ? refund.bankAccountNo : '' }}</el-col>
              <el-col :span="6"><b>开户行:</b> {{ refund.openBank ? refund.openBank : '' }}</el-col>
              <el-col :span="6"><b>账户类型:</b>
                <el-tag v-if="refund.bankAccountType*1===1" type="warning" size="small">公账</el-tag>
                <el-tag v-if="refund.bankAccountType*1===2" type="danger" size="small">私账</el-tag>
              </el-col>
            </el-row>
          </template>
        </div>
        <div class="refund-item">
          <h3>订单信息</h3>
          <template v-if="order">
            <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}:{s}') }}</template></el-col>
              <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">{{ statusObj[order.status] }}</el-tag>
                </template>
              </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>¥{{ order.discountFee | 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 :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>
          </template>
        </div>
        <div class="refund-item">
          <div v-for="shopOrder in refund.shopOrderReturnedList" :key="shopOrder.shopOrderID" class="order-item">
            <el-row :gutter="22" class="box-row">
              <el-col :span="9"><b>子订单号(ID):</b> {{ shopOrder.shopOrderNo + '(' + shopOrder.shopOrderID + ')' }}</el-col>
              <el-col :span="5"><b>子订单金额:</b> ¥{{ shopOrder.productAmount | toThousandFloatFilter }}</el-col>
              <el-col :span="5"><b>发货状态:</b>
                <el-tag v-if="shopOrder.sendOutStatus*1===1" type="danger" size="small">待发货</el-tag>
                <el-tag v-if="shopOrder.sendOutStatus*1===2" type="warning" size="small">部分发货</el-tag>
                <el-tag v-if="shopOrder.sendOutStatus*1===3" type="success" size="small">已发货</el-tag>
              </el-col>
            </el-row>
            <el-row :gutter="22" class="box-row">
              <el-col :span="22"><b>供应商:</b> {{ shopOrder.shopName }}</el-col>
            </el-row>
            <el-row v-for="op in shopOrder.cmReturnedPurchaseProductList" :key="op.orderProductID" :gutter="22" class="product-row">
              <el-col :span="1.5">
                <img :src="op.mainImage" width="60" alt="">
              </el-col>
              <el-col :span="7">{{ op.name }}</el-col>
              <el-col :span="5">
                <div class="op-item"><b>单价:</b> ¥{{ op.price | toThousandFloatFilter }}</div>
                <div class="op-item"><b>已发货:</b> {{ op.num - op.notOutStore }}</div>
                <div class="op-item"><b>待发货:</b> {{ op.notOutStore - op.cancelProductNum }}</div>
              </el-col>
              <el-col :span="5">
                <div class="op-item"><b>数量:</b> {{ op.num }}</div>
                <div class="op-item"><b>已退货:</b> {{ op.returnedPurchaseProductNum }}</div>
                <div class="op-item"><b>已取消:</b> {{ op.cancelProductNum }}</div>
              </el-col>
              <el-col :span="5">
                <div class="op-item"><b>总额:</b> ¥{{ op.totalFee | toThousandFloatFilter }}</div>
                <div class="op-item"><b>本次退货:</b> {{ op.actualReturnedNum ? op.actualReturnedNum : 0 }}</div>
                <div class="op-item"><b>本次取消:</b> {{ op.actualCancelNum ? op.actualCancelNum : 0 }}</div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-card>
    </template>
    <template>
      <el-backtop style="right: 40px; bottom: 40px;">
        <i class="el-icon-upload2" />
      </el-backtop>
    </template>
  </div>
</template>

<script>
import { getRefundReturn } from '@/api/order'
export default {
  data() {
    return {
      activeIndex: '2',
      order: null,
      refundList: [],
      statusObj: {
        '0': '待确认',
        '4': '交易完成',
        '5': '订单完成',
        '6': '已关闭',
        '7': '交易全退',
        '11': '待收款、待发货',
        '12': '待收款、部分发货',
        '13': '待收款、全部发货',
        '21': '部分收款、待发货',
        '22': '部分收款、部分发货',
        '23': '部分收款、全部发货',
        '31': '全部收款、待发货',
        '32': '全部收款、部分发货',
        '33': '全部收款、全部发货'
      }
    }
  },
  computed: {
    orderId: function() {
      return this.$route.query.orderId * 1
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.listLoading = true
      try {
        const res = await getRefundReturn({ orderId: this.orderId })
        this.order = res.data.order
        this.refundList = 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{
    color: #409EFF;
    font-size: 16px;
    margin: 0;
  }
  .box-card{
    margin-top: 20px;
    font-size: 14px;
  }
  .box-row{
    padding: 10px 0;
  }
  .refund-item{
    border-bottom:1px dashed #E4E7ED;
    margin-bottom: 20px;
  }
  .order-item{
    border-bottom: 1px solid #DCDFE6;
    background:#F2F6FC;
    margin-top: 20px;
    padding: 5px 15px 0;
    border-radius: 5px;
  }
  .product-row{
    padding: 10px 0;
    background: #EBEEF5;
    border-top: 1px dashed #DCDFE6;
  }
  .op-item{
    padding: 5px 0;
  }
</style>