wagoo-douy3/src/pages/client/order/components/SliverInfo.vue

<template>
  <select-modal title="物流信息" @close="$emit('close')">
    <view class="sliver-info-container">
      <view class="sliver-info-content">
        <view v-if="isLoading" class="flex-center">
          <uni-load-more status="loading" />
        </view>
        <template v-else>
          <view class="flex-row-start sliver-info-title">
            <!-- <image class="sliver-icon" :src="sliverInfo.logo" /> -->
            <text class="fs-24 app-fc-main sliver-text">
              {{ sliverInfo.name }} {{ orderData.kuaidi_no }}
            </text>
            <text class="fs-24 app-fc-main" @click="copySliverId">复制</text>
          </view>
          <view
            class="flex-row-start sliver-item"
            :class="{
              first: index === sliverList.length - 1,
              last: index === 0,
            }"
            v-for="(item, index) in sliverList"
            :key="index"
          >
            <view class="flex-center icon-wrapper">
              <view class="icon-circle"></view>
              <view v-if="index === 0" class="icon-circle-bg"></view>
              <view
                v-if="index < sliverList.length - 1"
                class="flex-1 icon-line"
              ></view>
            </view>
            <view class="flex-1 flex-column-start item-info">
              <text>
                <!-- index === 0 || index > 0 && item.status !== sliverList[index - 1].status -->
                <text class="fs-32 app-fc-main app-font-bold info-status">
                  {{ item.status }}
                </text>
                <text class="fs-24 info-time ali-puhui-regular">{{ item.time }}</text>
              </text>
              <text class="fs-24 app-fc-main info-desc">{{
                item.context
              }}</text>
            </view>
          </view>
        </template>
      </view>
      <view
        class="flex-center app-fc-white fs-30 confirm-btn"
        @click.stop="$emit('close')"
      >
        确定
      </view>
    </view>
  </select-modal>
</template>

<script>
import selectModal from "@/components/select-modal.vue";
import { getSliverInfo } from "@/api/shop";
import moment from "moment";

export default {
  props: {
    orderId: {
      type: String | Number,
      default: "",
    },
    orderInfo: {
      type: Object,
      default: () => {},
    },
  },
  components: { selectModal },
  data() {
    return {
      isLoading: true,
      sliverList: [],
      sliverInfo: {},
      orderData: {},
    };
  },
  computed: {
    defaultSliver() {
      return [
        {
          status: "已发货",
          time: moment(this.orderInfo.fahuo_time * 1000).format(
            "YYYY-MM-DD HH:mm:ss"
          ),
          context: "包裹正在等待揽收",
        },
        {
          status: "已下单",
          time: moment(this.orderInfo.add_time * 1000).format(
            "YYYY-MM-DD HH:mm:ss"
          ),
          context: "商品已经下单",
        },
      ];
    },
  },
  mounted() {
    this.getSliverInfo();
  },
  methods: {
    formatStatus(status) {
      switch (status) {
        case "揽收":
          return "已揽件";
        case "在途":
          return "运输中";
        case "派件":
          return "派送中";
        case "签收":
          return "已签收";
        case "已发货":
          return "已发货";
        case "已下单":
          return "已下单";
        default:
          return "";
      }
    },
    getSliverInfo() {
      getSliverInfo(this.orderId)
        .then((res) => {
          this.sliverList = [
            ...(res?.info?.wuliu_list || []),
            ...this.defaultSliver,
          ].map((v) => ({
            ...v,
            status: this.formatStatus(v.status),
          }));
          this.orderData = res?.info?.order_info || {};
          this.sliverInfo = res?.info?.express_info || {};
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    copySliverId() {
      uni.setClipboardData({
        data: this.orderData.kuaidi_no,
        success: function () {
          uni.showToast({
            title: "复制成功",
            icon: "success",
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.sliver-info-container {
  padding: 30rpx 56rpx 0 48rpx;
  box-sizing: border-box;

  .sliver-info-content {
    height: 55vh;
    overflow-y: auto;
    border-bottom: 1px solid #f5f5f5;

    .sliver-info-title {
      margin-bottom: 50rpx;

      .sliver-icon {
        width: 56rpx;
        height: 56rpx;
        border-radius: 56rpx;
        background: gray;
      }

      .sliver-text {
        margin-right: 14rpx;
        flex: 1;
      }
    }

    .sliver-item {
      align-items: stretch;
      padding-left: 8rpx;

      &.last {
        .icon-wrapper .icon-circle {
          background: $app_color_main;
        }
      }

      &.first {
        .item-info {
          min-height: unset;
        }
        .icon-wrapper {
          justify-content: flex-start;
        }
      }

      .icon-wrapper {
        position: relative;

        .icon-circle {
          width: 24rpx;
          height: 24rpx;
          background: #d4ced1;
          border-radius: 24rpx;
        }

        .icon-line {
          width: 2rpx;
          background: #dddddd;
        }

        .icon-circle-bg {
          position: absolute;
          top: -8rpx;
          left: -8rpx;
          width: 40rpx;
          height: 40rpx;
          border-radius: 40rpx;
          background: rgba(254, 1, 155, 0.3);
        }
      }

      .item-info {
        min-height: 190rpx;
        padding: 0rpx 0 30rpx 24rpx;
        box-sizing: border-box;
        justify-content: flex-start;
        margin-top: -10rpx;

        .info-time {
          color: #afa5ae;
          // font-weight: 400;
        }

        .info-status {
          padding-right: 20rpx;
        }

        .info-desc {
          margin-top: 12rpx;
          line-height: 1.6;
          margin-left: -4rpx;
        }
      }
    }
  }

  .confirm-btn {
    width: 630rpx;
    height: 92rpx;
    background: #fe019b;
    border-radius: 92rpx;
    margin: 20rpx auto 10rpx;
  }
}
</style>