yicangzongtai_app_240321/pages/order/logisticsNew.vue

<template>
  <view class="container">
    <navbar :config="config" backColor="#666"></navbar>

    <!-- 包裹选项卡 -->
    <view class="packAge" v-if="packAgeList.length">
      <scroll-view scroll-X="true" class="packAge-scoll">
        <view class="every" :class="{'activeTab': currentIndex == index, 'one': packAgeList.length == 1}"
          v-for="(item, index) in packAgeList" :key="index" @click="changeTab(item, index)">
          包裹{{index + 1}}
        </view>
      </scroll-view>
    </view>

    <!-- 商品信息 -->
    <view class="goods">
      <view class="title">
        商品信息
      </view>
      <view class="goods-box" v-for="(item, index) in detail.order_package_items" :key="index">
        <view class="goods-img">
          <image :src="item.goods_img" mode="aspectFill"></image>
        </view>
        <view class="goods-info">
          <view class="label">{{item.goods_title}}</view>
          <view class="box sku-box">
            <view class="sku">
              {{item.sku_set_name}}
            </view>
            <view class="sku num">
              x {{item.buy_number}}
            </view>
          </view>
          <view class="box">
            <view class="u-FFF u-font36 priceColor">
              <rich-text :nodes="$mUtil.priceBigSmall(item.sale_price)"></rich-text>
            </view>
            <view class="number">
              发货数量 x {{item.number}}
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 物流信息 -->
    <view class="logistics" v-if="detail.express">
      <view class="title">
        物流信息
      </view>
      <view class="box">
        <text>物流公司：</text>
        <text>{{detail.express.express_name}}</text>
      </view>
      <view class="box">
        <text>物流单号：</text>
        <text>{{detail.express.logistic_code}}</text>
      </view>
    </view>

    <!-- 物流记录 -->
    <view class="">
      <view class="record">
        物流记录
      </view>
      <view class="shipping u-bg-fff">
        <view class="linehh" :style="'height:'+xiantiaoHeight+'px;top:'+xiantiaoTop+'px;left:'+xiantiaoLeft+'px'">
        </view>
        <view class="ul u-plr30" v-for="(item,index) in shiplist" :key="index">
          <view class="li">
            <!-- <view class="state u-font26 u-flex" :class="{act:index==0}">
    					{{item.state}}
    				</view> -->
            <view class="mmmm">
              <view class="yuan " :class="{act:index==0,first:index==0,end:index==shiplist.length-1}">
              </view>
            </view>
            <view class="desc">
              <view class="u-font26 u-1A1A1A">{{item.acceptStation}}</view>
              <view class="u-999 u-font24 u-mt10">{{item.acceptTime}}</view>
            </view>
          </view>
        </view>
        <nodata v-if="noData" :config="{top:20,content:'暂无物流数据~'}"></nodata>

      </view>
    </view>
  </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        config: {
          back: true, //false是tolbar页面 是则不写
          title: '物流信息',
          color: '#1A1A1A',
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, "#FFFFFF"],
          statusBarFontColor: '#1A1A1A'
        },
        xiantiaoHeight: 0,
        xiantiaoLeft: 0,
        xiantiaoTop: 0,
        goodsimg: '',
        num: 0,
        code: '',
        shiplist: [],
        noData: false,
        packAgeList: [],
        currentIndex: 0,
        detail: {}
      }
    },
    onLoad(options) {
      if (options.id) {
        this.currentIndex = options.index
        this.getPackAge(options.id, options.index)
      }
    },
    methods: {
      // 包裹信息
      getPackAge(orderId, index=0) {
        this.$http.get(`/order/package/allpackage/${orderId}`).then(res => {
          if (res.code === 200) {
            this.packAgeList = res.list
            this.detail = this.packAgeList[index]
            this.getLogistiscs(this.detail.order_id, this.detail.id)
          }
        })
      },
      changeTab(item, index) {
        if (this.currentIndex == index) {
          return false
        }
        this.currentIndex = index
        this.detail = this.packAgeList[index]
        this.getLogistiscs(this.detail.order_id, this.detail.id)
      },
      getLogistiscs(orderId, id) {
        this.$http.get(`/order/express/select/${orderId}/${id}`)
          .then(res => {
            if (res && res.code == 200) {
              if (!res.data || res.data.traces.length == 0) {
                this.noData = true
                return
              }
              this.shiplist = res.data.traces.reverse()
              this.code = res.data.logisticCode
            }
          })
      },
      getLogistiscsBlack(id) {
        this.$http.get('/rights/express/select/' + id)
          .then(res => {
            if (res && res.code == 200) {
              this.shiplist = res.data.traces.reverse()
              this.code = res.data.logisticCode
              if (res.data.traces.length == 0) {
                this.noData = true
              }
            }
          })
      },
      getHeight() {
        const query = uni.createSelectorQuery();
        query.select('.first').boundingClientRect()
        query.select('.end').boundingClientRect()
        var that = this;
        query.exec(function(res) {
          console.log(res);
          var xiantiaoHeight = 0;
          if (res[1] !== null) {
            xiantiaoHeight = (res[1].top - res[0].top);
          }
          that.xiantiaoHeight = xiantiaoHeight;
          that.xiantiaoLeft = res[0].left + 4;
          that.xiantiaoTop = res[0].top;
        })
      }
    }
  }
</script>

<style lang="scss">
  .borderBottom {
    border-bottom: 20rpx solid #eee;
  }

  // 包裹选项卡
  .packAge {
    width: 100%;
    height: 100rpx;
    // margin-bottom: 20rpx;
    padding-left: 30rpx;
    line-height: 100rpx;
    background-color: #fff;

    .packAge-scoll {
      width: 100%;
      height: 100%;
      white-space: nowrap;
    }

    .every {
      display: inline-block;
      width: 180rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      border: 1rpx solid #3775F6;
      border-right: none;
      // border-radius: 10rpx;

      &:first-child {
        border-right: none;
        border-radius: 10rpx 0 0 10rpx;
      }

      &:last-child {
        border-right: 1rpx solid #3775F6;
        border-radius: 0 10rpx 10rpx 0;
      }

      image {
        width: 30rpx;
        height: 30rpx;
        margin-right: 20rpx;
        vertical-align: middle;
      }
    }

    .activeTab {
      background-color: #FA6138;
      color: #fff;
    }

    .one {

      &:first-child {
        border-radius: 10rpx;
      }
    }
  }

  .goods {
    padding: 30rpx;
    padding-bottom: 10rpx;
    background-color: #fff;

    .goods-box {
      display: flex;
      padding: 30rpx 0;
      border-bottom: 1rpx solid #f2f2f2;

      .goods-img {
        width: 150rpx;
        height: 150rpx;
        margin-right: 20rpx;
        border-radius: 20rpx;
        flex-shrink: 0;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .goods-info {
        flex: 1;
        width: 0;

        .label {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #1A1A1A;
          margin-bottom: 10rpx;
        }

        .box {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .sku {
            font-size: 22rpx;
            color: #999;
            margin-right: 10rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .priceColor {
            color: #FA6138;
            font-weight: bold;
          }

          .num {
            flex-shrink: 0;
          }

          .number {
            font-size: 22rpx;
            flex-shrink: 0;
          }
        }

        .sku-box {
          margin-bottom: 20rpx;
        }
      }
    }
  }

  .title {
    font-size: 30rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .logistics {
    padding: 30rpx;
    padding-bottom: 10rpx;
    background-color: #fff;

    .box {
      padding-left: 30rpx;
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .record {
    padding: 30rpx;
    padding-bottom: 10rpx;
    font-size: 30rpx;
    font-weight: bold;
    background-color: #fff;
  }

  .shipping {
    width: 100%;
    margin: 0 auto;
    background-color: #ffffff;

    .linehh {
      position: absolute;
      width: 2rpx;
      margin-left: 16rpx;
      border-left: 2rpx dotted #BEC2CB;
    }

    .ul {
      .li {
        width: 100%;
        display: flex;
        height: auto;
        margin-top: 2rpx;

        .state {
          padding: 20rpx 0rpx;

          &.act {
            color: #FA6138;
          }

          .timeday {
            font-size: 28upx;
          }

          .timeh {
            font-size: 24upx;
          }
        }

        .mmmm {
          position: relative;
          display: flex;
          padding: 0rpx 32rpx 0rpx 36rpx;
          margin-top: 22rpx;

          .yuan {
            position: absolute;
            left: 26rpx;
            width: 25rpx;
            height: 25rpx;
            background: #dedede;
            border-radius: 50%;
            border: 3rpx solid #f2f2f2;

            &.act {
              background-color: #FA6138;
              width: 44rpx;
              height: 44rpx;
              margin-left: -10rpx;
            }
          }
        }

        .desc {
          width: 74%;
          padding: 20rpx 0rpx;
          margin-left: 22rpx;
        }
      }
    }
  }
</style>