zhishifufei_uniapp/pages/my/express.vue

<template>
  
  <BaseContainer class="logistics">
    <NavBar title="物流信息" />
    <template v-if="order.id">
      <view v-for="item in order.cartInfo" :key="item.id" class="goods">
        <view><image :src="item.productInfo.image" /></view>
        <view class="name">{{ item.productInfo.store_name }}</view>
        <view class="wrap">
          <view>￥{{ item.productInfo.price }}</view>
          <view>×{{ item.cart_num }}</view>
        </view>
      </view>
      <view class="detail">
        <view class="header">
          <view class="icon"></view>
          <view class="wrap">
            <view><span>物流公司：</span>{{ order.delivery_name }}</view>
            <view><span>快递单号：</span>{{ order.delivery_id }}</view>
          </view>
          <view @click="setClipboard" class="btn">复制单号</view>
        </view>
        <view>
          <view class="status-item" v-for="item in list" :key="item.time">
            <view>{{ item.status }}</view>
            <view class="time">{{ item.time }}</view>
            <view class="circle"></view>
            <view class="line"></view>
          </view>
        </view>
      </view>
    </template>
  </BaseContainer>
</template>

<script>
import { getExpressData, getExpressOrderData } from "@/api/user";
export default {
  data() {
    return {
      uni: 0,
      order: {},
      list: [],
    };
  },
  onLoad({ uni }) {
    this.uni = uni;
    this.getOrderData().then(() => {
      this.express();
    });
  },
  methods: {
    setClipboard() {
      uni.setClipboardData({
        data: this.order.delivery_id,
        success: () => {
          this.$util.showMsg("复制成功！");
        },
        fail: () => {
          this.$util.showMsg("复制失败！");
        },
      });
    },
    getOrderData() {
      return getExpressOrderData(this.uni).then(({ data }) => {
        this.order = data.order;
      });
    },
    async express() {
      uni.showLoading({ mask: true });

      try {
        const { data } = await getExpressData(this.order.delivery_id);
        this.list = data.content;
        uni.hideLoading();
      } catch (err) {
        uni.hideLoading();
        this.$util.showMsg(err.msg);
      }
    },
  },
};
</script>

<style scoped lang="scss">


/* 物流信息 */
.logistics .goods {
  display: flex;
  padding: 23rpx 30rpx;
  background-color: #ffffff;
}

.logistics .goods image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 6rpx;
  vertical-align: middle;
  object-fit: contain;
}

.logistics .goods .name {
  flex: 1;
  padding: 3rpx 64rpx 0 24rpx;
  font-size: 28rpx;
  line-height: 40rpx;
  color: #282828;
}

.logistics .goods .wrap {
  text-align: right;
  font-size: 28rpx;
  line-height: 42rpx;
  color: #999999;
}

.logistics .detail {
  padding: 0 0 13rpx 30rpx;
  margin-top: 12rpx;
  background-color: #ffffff;
}

.logistics .detail .header {
  display: flex;

  align-items: center;
  padding: 22rpx 30rpx 22rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.logistics .detail .header .icon {
  width: 50rpx;
  height: 50rpx;
  background: #666666 url(getAssetsPath("/wap/first/zsff/images/logistics.png"))
    center/29rpx 26rpx no-repeat;
}

.logistics .detail .header .wrap {
  flex: 1;
  padding: 0 18rpx;
  font-size: 26rpx;
  line-height: 36rpx;
  color: #282828;
}

.logistics .detail .header .wrap text {
  color: #999999;
}

.logistics .detail .header .btn {
  padding: 6rpx 13rpx;
  border: 1px solid #999999;
  border-radius: 3rpx;
  font-size: 20rpx;
  line-height: 28rpx;
  color: #666666;
}

.logistics .detail .status-item {
  position: relative;
  padding: 0 34rpx 46rpx 54rpx;
  margin: 6rpx 0 0 14rpx;
  font-size: 26rpx;
  line-height: 37rpx;
  color: #666666;

  &:first-child {
    margin-top: 34rpx;
    color: #2c8eff;
  }
}

.logistics .detail .time {
  margin-top: 6rpx;
  font-size: 24rpx;
  line-height: 33rpx;
  color: #999999;
}

.logistics .detail .circle {
  position: absolute;
  top: 8rpx;
  left: 0;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: #dddddd;
}

.logistics .detail .line {
  position: absolute;
  top: 42rpx;
  bottom: 0;
  left: 10rpx;
  width: 1px;
  background-color: #e6e6e6;

  transform: translateX(-50%);
}
</style>