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

<template>
    <div class="order-wrapper">
      <div class="navtop" v-if="getRouter === 'buyer'" style="margin-bottom: 0.1rem;background: #fff;padding:0.2rem">
        <div class="navtop_title" style="color: #666;font-size: 0.28rem;">请选择发货单查看对应的物流信息</div>
        <div class="ids clearfix">
          <div style="margin-top: 5px" v-for="(item, index) in idsList"  v-bind:key="index">
            <span class="mobile-cart-check" :class="index === nowIds ? 'active': ''" @click.stop.prevent="changeInds(index)"></span>
            <span @click.stop.prevent="changeInds(index)">{{item}}</span>
          </div>
        </div>
      </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: '',
          idsList: [],
          nowIds: 0
        }
      },
      async asyncData ({route}) {
        let res
        let resultInfo
        if (route.query.type === 'buyer') {
          res = await axios.get(`/trade/order/${route.query.uuid}`)
          res.data[0].sendType = JSON.parse(res.data[0].jsonRule).method
          resultInfo = res.data[0]
        } else {
          res = await axios.get(`/trade/purchase/purchaseId/${route.query.uuid}`)
          resultInfo = res.data.data
        }
        let _idsList = resultInfo.inIds.split(',')
        return {
          detailsInfo: resultInfo,
          idsList: _idsList
        }
      },
      computed: {
        getRouter() {
          return this.$route.query.type
        }
      },
      created() {
          this.getInfo()
        // }
      },
      methods: {
        changeInds(ind) {
          this.nowIds = ind
          this.logistics = {}
          this.getInfo()
        },
        getInfo() {
          this.$http.get(`/trade/order/invoiceid?id=${this.detailsInfo.id}&invoiceid=${this.idsList[this.nowIds]}`).then(data => {
            this.logistics = data.data.data.logistics
            this.$http.get(`/kdn/logistics/query?companyName=${this.logistics.companyName}&logisticsCode=${this.logistics.number}`).then(res => {
              let str = res.data.traces
              this.logisticsInfo = JSON.parse(res.data.traces).reverse()
              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) {
                this.status = 'transit'
              }
              if (str.indexOf('派送') !== -1 || str.indexOf('派件') !== -1) {
                this.status = 'send'
              }
              if (str.indexOf('签收') !== -1) {
                this.status = 'signin'
              }
            })
          })
        }
      }
    }
</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: 1.26rem 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;
      }
    }
    .navtop {
      .ids{
        div {
          width: 100%;
          font-size: 0.24rem;
          color: #333;
          line-height: .36rem;
          .mobile-cart-check{
            min-width: .36rem;
            height: .36rem;
            background: url(/images/mobile/center/user/car-noChecked.png) no-repeat;
            background-size: contain;
            vertical-align: middle;
            margin-bottom: .02rem;
            display: inline-block;
            margin-right: 0.11rem;
            display: inline-block;
            vertical-align: middle;
            &.active {
              background-image: url(/images/mobile/center/user/car-checked.png);
            }
          }
        }
      }
    }
  }
</style>