caimei-mall-admin-ui/src/views/order/logistics.vue

<template>
  <div class="app-container">
    <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="logisticsInfoVos.length === 0" class="box-card" style="text-align:center;">暂无发货记录.....</el-card>
    <el-card v-else class="box-card">
      <div v-for="(data,index) in logisticsInfoVos" :key="index" class="order-item">
        <el-row :gutter="24" class="box-row">
          <el-col :span="24"><b>发货时间:{{ data.logisticsBatch.deliveryTime }}</b></el-col>
        </el-row>
        <el-row v-for="Record in data.logisticsRecordList" :key="Record.id" :gutter="22" class="product-row">
          <el-col :span="2"><img :src="Record.image" width="75" height="75" alt=""></el-col>
          <el-col :span="22">
            <el-row style="margin-bottom: 10px;"><b>{{ Record.productName }}</b></el-row>
            <el-row>
              <el-col><div class="op-item"><b>购买数量:</b>{{ Record.buyNum }}</div></el-col>
              <el-col><div class="op-item"><b>发货数量:</b>{{ Record.num }}</div></el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="box-row"><el-col :span="24" style="color:#417DE6;font-weight: bold;">物流详情</el-col></el-row>
        <div v-for="logistics in data.logisticsInformationList" :key="logistics.orderID" :gutter="22" class="product-row" style="padding: 0 12px;background: #fff;">
          <el-collapse accordion>
            <el-collapse-item>
              <template slot="title">
                <span class="nu-span">快递公司：{{ logistics.logisticsCompanyName }}</span>
                <span class="nu-span">物流单号：{{ logistics.nu }}</span>
              </template>
              <div v-if="logistics.logisticsDetailVos === null" class="none-logistice">暂无物流详情</div>
              <div v-for="(Detail, logIndex) in logistics.logisticsDetailVos" v-else :key="logIndex" class="logistics-item">
                <div><span>{{ Detail.time }}</span> <span>{{ Detail.desc }}</span></div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </el-card>
    <template>
      <el-backtop style="right: 40px; bottom: 40px;">
        <i class="el-icon-upload2" />
      </el-backtop>
    </template>
  </div>
</template>

<script>
import { getLogistics } from '@/api/order'
export default {
  data() {
    return {
      activeName: '1',
      logisticsInfoVos: []
    }
  },
  computed: {
    orderID: function() {
      return window.location.href.split('/').reverse()[0] * 1
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getLogistics({ orderID: this.orderID }).then(response => {
        this.order = response.data.order
        this.logisticsInfoVos = response.data
        this.listLoading = false
      }).catch(() => {
        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 lang="scss" 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;
  }
  .order-item{
    border-bottom: 1px solid #DCDFE6;
    background:#F2F6FC;
    margin-top: 20px;
    padding: 5px 15px 15px 15px;
    border-radius: 5px;
    &:first-child{
      margin-top: 0;
    }
  }
  .product-row{
    padding: 10px 0;
    background: #EBEEF5;
    border-top: 1px solid #e6ebf5;
    .el-collapse{
      border-top: none;
      border-bottom: none;
    }
  }
  .op-item{
    padding: 5px 0;
  }
  .nu-span{
    font-size: 14px;
    color: #E68341;
    margin-right: 15px;
  }
  .none-logistice{
    color: #999999;
    font-size: 12px;
  }
</style>