mall-web-ssr/pages/mobile/order/logistics.vue

<template>
    <div class="order-wrapper">
      <div class="com-mobile-header">
        <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
        <p>物流信息
        </p>
      </div>
      <div class="logistics_top clearfix">
        <div class="pull-left">
          <div class="name">订单编号：<span class="red">{{detailsInfo.orderid}}</span></div>
          <div class="name">配送方式：<span>{{detailsInfo.sendType === 1301 ? '第三方配送' : (detailsInfo.sendType === 1302 ? '卖家配送': '上门自提')}}</span></div>
          <div class="name">配送商：<span>{{logistics.companyName || '-'}}</span></div>
          <div class="name">运单号：<span class="red">{{logistics.number || '-'}}</span></div>
        </div>
        <div class="pull-right">
          <template v-if="status === 'signin'">已签收</template>
          <template v-else-if="status === 'send'">派件中</template>
          <template v-else-if="status === 'transit'">运输中</template>
          <template v-else>已发货</template>
        </div>
      </div>
      <ul class="logistics_ul" v-if="logisticsInfo.length > 0">
        <li class="clearfix" v-for="(item, index) in logisticsInfo">
          <div class="pull-left" :class="index > 0 ? '' : 'marginL'">
            <div class="logistics_icon" :class="index > 0 ? '' : 'active'">
              <div class="red" v-if="index === 0"></div>
            </div>
          </div>
          <div class="pull-right" :class="index > 0 ? '' : 'marginT'">
            <div class="logistics_time">{{item.AcceptTime}}</div>
            <div class="logistics_info">{{item.AcceptStation}}</div>
          </div>
        </li>
      </ul>
      <div class="nologistics" v-else>
        <img src="/images/order/nologistics.png"/>
        <div>暂无物流信息</div>
      </div>
    </div>
</template>
<script>
   import axios from '~plugins/axios'
    export default {
      name: 'logistics',
      layout: 'mobile',
      middleware: 'authenticated',
      data() {
        return {
          detailsInfo: {},
          logistics: {},
          logisticsInfo: {},
          status: '',
        }
      },
      async asyncData ({route}) {
        let res = await axios.get(`/trade/purchase/purchaseId/${route.query.uuid}`)
        let logistics = await axios.get(`/trade/logistics/${res.data.data.lgtId}`)
        let logisticsInfo = await axios.get(`/kdn/logistics/query?companyName=${logistics.data.companyName}&logisticsCode=${logistics.data.number}`)
        let str = logisticsInfo.data.traces
        let status = ''
        if (str.indexOf('揽件') !== -1 || str.indexOf('收件') !== -1 || str.indexOf('转运') !== -1 || str.indexOf('运输') !== -1 || str.indexOf('发往') !== -1 ||
          str.indexOf('发出') !== -1 || str.indexOf('收入') !== -1 || str.indexOf('扫描') !== -1 || str.indexOf('到达') !== -1) {
          status = 'transit'
        }
        if (str.indexOf('派送') !== -1 || str.indexOf('派件') !== -1) {
          status = 'send'
        }
        if (str.indexOf('签收') !== -1) {
          status = 'signin'
        }
        return {
          detailsInfo: res.data.data,
          logistics: logistics.data,
          logisticsInfo: JSON.parse(logisticsInfo.data.traces).reverse(),
          status: status
        }
      }
    }
</script>
<style scoped lang='scss'>
  @mixin overFlowHidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @mixin lineHeight($value) {
    height: $value;
    line-height: $value;
  }
  .order-wrapper {
    background: #f1f3f6;
    margin: 0.88rem 0 0.98rem 0;
    height: calc(100vh - 0.88rem - 0.98rem);
    overflow-y: scroll;
    .logistics_top {
      padding: 0.2rem;
      background: #fff;
      margin-bottom: 0.2rem;
      .pull-left {
        font-size: 0.28rem;
        color: #333;
        .name {
          @include lineHeight(0.5rem);
        }
        .red {
          color: #f43938
        }
      }
      .pull-right {
        font-size: 0.32rem;
        color: #f43938
      }
    }
    .logistics_ul {
      background: #fff;
      padding: 0.2rem;
      height: calc(100vh - 0.88rem - 0.98rem - 2.62rem);
      overflow-y: auto;
      li {
        position: relative;
        border-left: 2px solid #e4e5ea;
        margin-left: 0.2rem;
        .pull-left {
          position: absolute;
          left: -4px;
          top: 0.36rem;
          .logistics_icon {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #e4e5ea;
            &.active {
              width: 20px;
              height: 20px;
              border-radius: 50%;
              background: #fcc1c0;
              position: relative;
              &~.logistics_line {
                margin-left: 9px;
              }
              .red {
                position: absolute;
                width: 12px;
                height: 12px;
                background: #f32f2f;
                margin-left: 4px;
                margin-top: 4px;
                border-radius: 50%;
              }
            }
          }
          &.marginL {
            left: -10px;
            top: 0px
          }
        }
        .pull-right {
          padding-top: 0.2rem;
          font-size: 0.24rem;
          color: #333;
          border-bottom: 1px solid #f3f3f3;
          padding-bottom: 0.2rem;
          width: 6.4rem;
          .logistics_time {
            @include lineHeight(20px);
          }
          .logistics_info {
            margin-top: 0.2rem;
            word-break:break-all;
            word-wrap: break-word;
            line-height: 0.45rem
          }
          &.marginT {
            padding-top: 0px;
          }
        }
      }
    }
    .nologistics {
      height: calc(100vh - 0.88rem - 0.98rem - 2.62rem);
      text-align: center;
      padding-top: 2rem;
      img {
        width: 1.87rem;
        height: 1.87rem;
      }
      div {
        font-size: 0.32rem;
        color: #999999;
        margin-top: 0.2rem;
      }
    }
  }
</style>