caimei-mall-admin-ui/src/views/order/detail.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">
      <div class="refund-item">
        <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> {{ order.orderTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</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">{{ '交易中('+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 v-if="order.bpOrderUserinfo" :span="6"><b>买家:</b> {{ order.bpOrderUserinfo.name }}</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-col :span="6">
            <el-dropdown class="dropdown">
              <el-button type="primary">
                功能<i class="el-icon-arrow-down el-icon--right" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item><div @click="RemarksOrder(order.orderID)">备注</div></el-dropdown-item>
                <el-dropdown-item v-if="['0','11','21','6','4'].indexOf(order.status)<0"><router-link :to="'/order/logistics/' + order.orderID ">发货记录</router-link></el-dropdown-item>
                <el-dropdown-item v-if="['0','11','6'].indexOf(order.status)<0"><router-link :to="'/order/refund-record/' + order.orderID ">收退款记录</router-link></el-dropdown-item>
                <el-dropdown-item v-if="['0','11','6'].indexOf(order.status)<0"><router-link :to="'/order/refund-return/' + order.orderID ">退款（退货）记录</router-link></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </div>
      <div class="refund-item">
        <el-row v-if="order.bpOrderUserinfo" :gutter="24" class="box-row">
          <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="12"><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 }}<span style="color:red;"> (账户余额抵扣:¥{{ order.balancePayFee | toThousandFloatFilter }})</span></el-col>
          <el-col :span="6"><b>已收金额:</b>
            <template v-if="order.receiptStatus*1===1">¥0.00</template>
            <template v-else>¥{{ receiptAmount | toThousandFloatFilter }}</template>
          </el-col>
          <el-col :span="6"><b>退款金额(已完成):</b> ¥{{ returnValue | toThousandFloatFilter }}
            <span style="color:red;">({{ '原:¥' + returnedPurchaseFee + '，折扣取消:¥' + (order.discountFee>returnedPurchaseFee ? returnedPurchaseFee : order.discountFee) }})</span>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="box-row">
          <el-col :span="6"><b>经理折扣:</b>
            <template v-if="order.discountFee<0">¥0.00</template>
            <template v-else>
              ¥{{ order.discountFee>returnedPurchaseFee ? (order.discountFee - returnedPurchaseFee) : '0' }}
              <span style="color:red;">({{ '原:¥' + order.discountFee + '，折扣取消:¥' + (order.discountFee>returnedPurchaseFee ? returnedPurchaseFee : order.discountFee) }})</span>
            </template>
          </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>
      </div>
      <div class="refund-item">
        <div v-for="shopOrder in order.newShopOrders" :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.orderTime }}</el-col>
            <el-col :span="5"><b>子订单金额:</b> ¥{{ shopOrder.needPayAmount | 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.note ? shopOrder.note : '无' }}</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.newOrderProducts" :key="op.orderProductID" :gutter="22" class="product-row">
            <el-col :span="2">
              <img :src="op.productImage" width="60" alt="">
            </el-col>
            <el-col :span="7">{{ op.name }}</el-col>
            <el-col :span="5">
              <div class="op-item"><b>数量</b>{{ op.productID*1!==999 ? ('(赠品数): x'+op.num+'('+op.presentNum+')') : (': x'+op.num) }}</div>
              <div v-if="op.productID*1!==999" class="op-item">规格: {{ op.unit }}</div>
            </el-col>
            <el-col v-if="op.productID*1!==999" :span="5">
              <div class="op-item"><b>单价:</b> ¥{{ op.price | toThousandFloatFilter }}</div>
              <div class="op-item"><b>总额:</b> ¥{{ op.totalFee | toThousandFloatFilter }}</div>
            </el-col>
            <el-col v-if="op.productID*1!==999" :span="5">
              <div v-if="order.sendOutStatus*1 === 2 || order.sendOutStatus*1 === 3" class="op-item"><b>已发/已收:</b> {{ ((op.num ? op.num : 0) - (op.notOutStore ? op.notOutStore : 0)) + '/' + op.receivedNum }}</div>
              <div v-if="['12','13','21','22','23','31','32','33','4','5'].indexOf(order.status)>=0" class="op-item"><b>退款(退货)中/已完成:</b> {{ op.returningNum }} / {{ op.returnedNum }}</div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>

    <Remarks dialog-title="订单备注信息" :is-visible.sync="dialogRemarksVisible" :order-id="dialogRemarksOrderId" :remark-list="dialogRemarkList" />
    <template>
      <el-backtop style="right: 40px; bottom: 40px;">
        <i class="el-icon-upload2" />
      </el-backtop>
    </template>
  </div>
</template>

<script>
import { getDetail, getRemarks } from '@/api/order'
import Remarks from './components/remarks'
export default {
  components: { Remarks },
  data() {
    return {
      activeIndex: '2',
      order: null,
      receiptAmount: 0,
      returnValue: 0,
      returnedPurchaseFee: 0,
      bpClauses: null,
      dialogRemarkList: [],
      dialogRemarksVisible: false,
      dialogRemarksOrderId: 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
      getDetail({ id: this.orderID }).then(response => {
        this.order = response.data.order
        this.bpClauses = response.data.bpClauses
        this.receiptAmount = response.data.receiptAmount
        this.returnValue = response.data.returnValue
        this.returnedPurchaseFee = response.data.returnedPurchaseFee
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    RemarksOrder: function(id) {
      getRemarks({ orderID: id }).then(response => {
        this.dialogRemarkList = response.data
      })
      this.dialogRemarksOrderId = id
      this.dialogRemarksVisible = true
    },
    backToList() {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$nextTick(() => {
          this.$router.replace({
            path: '/order/list'
          })
        })
      })
    }
  }
}
</script>

<style scoped>
  .box-card{
    margin-top: 20px;
    font-size: 14px;
  }
  .box-row{
    padding: 10px 0;
  }
  .box-row .dropdown{
    margin-top: -10px;
  }
  .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>