ZangShiQi/addon/pc/source/os/pages/order/logistics.vue

<template>
  <div class="box">
    <div class="null-page" v-show="yes"></div>

    <el-card class="box-card logistics">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/member/order_list' }">订单列表</el-breadcrumb-item>
          <el-breadcrumb-item>物流详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div v-loading="loading">
        <el-tabs v-model="activeParcel">
          <el-tab-pane v-for="(packageItem, packageIndex) in packageList" :key="packageIndex" :label="packageItem.package_name" :name="'parcel_' + packageIndex">
            <div class="trace" v-if="packageItem.trace.success && packageItem.trace.list.length > 0">
              <el-timeline>
                <el-timeline-item v-for="(traceItem, traceIndex) in packageItem.trace.list" :timestamp="traceItem.datetime" placement="top" :type="traceIndex == 0 ? 'primary' : ''" :key="traceIndex">
                  <p>{{ traceItem.remark }}</p>
                </el-timeline-item>
              </el-timeline>
            </div>
            <div class="trace" v-else>
              <p class="empty-wrap">{{ packageItem.trace.reason }}</p>
            </div>

            <ul class="info-wrap">
              <li>
                <label>运单号码：</label>
                <span>{{ packageItem.delivery_no }}</span>
              </li>
              <li>
                <label>物流公司：</label>
                <span>{{ packageItem.express_company_name }}</span>
              </li>
            </ul>

            <ul class="goods-wrap">
              <li v-for="(goodsItem, goodsIndex) in packageItem.goods_list" :key="goodsIndex" @click="$util.pushToTab('/sku/' + goodsItem.sku_id)">
                <div class="img-wrap">
                  <img :src="$img(goodsItem.sku_image, { size: 'mid' })" @error="imageError(packageIndex, goodsIndex)" />
                </div>
                <p class="sku-name">{{ goodsItem.sku_name }} x {{ goodsItem.num }}</p>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
  import {apiOrderPackageInfo} from '@/api/order/order';
  import {mapGetters} from 'vuex';

  export default {
    name: 'logistics',
    components: {},
    data: () => {
      return {
        orderId: 0,
        loading: true,
        activeParcel: 'parcel_0',
        packageList: [],
        yes: true
      };
    },
    created() {
      this.orderId = this.$route.query.order_id;
      if (!this.orderId) this.$router.push({path: '/member/order_list'});
      this.getOrderPackageInfo();
    },
    computed: {
      ...mapGetters(['defaultGoodsImage'])
    },
    layout: 'member',
    mounted() {
      let self = this;
      setTimeout(function () {
        self.yes = false
      }, 300)
    },
    methods: {
      getOrderPackageInfo() {
        apiOrderPackageInfo({
          order_id: this.orderId
        }).then(res => {
            if (res.code >= 0) {
              this.packageList = res.data;
              this.packageList.forEach(item => {
                if (item.trace.list) {
                  item.trace.list = item.trace.list.reverse();
                }
              });
              this.loading = false;
            } else {
              this.$message({
                message: '未获取到订单包裹信息！',
                type: 'warning',
                duration: 2000,
                onClose: () => {
                  this.$router.push({path: '/member/order_list'});
                }
              });
            }
          }).catch(res => {
            this.loading = false;
          });
      },
      imageError(packageIndex, goodsIndex) {
        this.packageList[packageIndex].goods_list[goodsIndex].sku_image = this.defaultGoodsImage;
      }
    }
  };
</script>
<style lang="scss" scoped>
  .box {
    width: 100%;
    position: relative;
  }

  .null-page {
    width: 100%;
    height: 730px;
    background-color: #FFFFFF;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
  }

  .logistics {
    .trace {
      .empty-wrap {
        padding: 10px 0;
      }
    }

    .info-wrap {
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;

      li {
        flex: 0 0 33.3333%;
        margin-bottom: 10px;

        span {
          font-weight: bold;
        }
      }
    }

    .goods-wrap {
      overflow: hidden;
      margin: 10px 0;

      li {
        float: left;
        width: 130px;
        margin-right: 7px;
        cursor: pointer;

        &:nth-child(n + 7) {
          margin-right: 0;
        }

        .img-wrap {
          width: 120px;
        }

        .sku-name {
          margin-top: 5px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          font-size: $ns-font-size-sm;
        }
      }
    }
  }
</style>