更新记录

1.0.0（2024-06-15）

物流动态组件

平台兼容性

zh-logistics-item

物流动态信息组件

基础数据格式

interface ILogistics {
    info: string; // 描述信息
    statusLabel: string; // 状态
    time: string; // 时间
    [key: string]?: any;  // 扩展属性
}

基础用法

<template>
    <view class="common-logistics">
        <template v-for="(item, index) in logList" :key="index">
            <zh-logistics-item :logistics-data="item"></zh-logistics-item>
        </template>
    </view>
</template>
<script setup lang="ts">
    import { ref } from "vue";
    import zhLogisticsItem from "@/components/zh-logistics-item/zh-logistics-item.vue";

    const logList = ref([{
                info: '派送成功',
                status: 7,
                statusLabel: "已签收",
                time: '2021-11-11 17:42'
            },
            {
                info: '[代收点] 您的快件已从XXX顺丰速运代理店取出〖来自代收点〗',
                status: 0,
                time: '2021-11-11 17:31'
            },
            {
                info: '快件领取成功',
                status: 0,
                time: '2021-11-11 17:31'
            },
            {
                info: '[代收点] 您的顺丰速运包裹已由XXX顺丰速运代理店代收，代收点地址：XXX， ： 〖来自代收点〗',
                status: 6,
                statusLabel: "代取件",
                time: '2021-11-11 17:15'
            },
            {
                info: '快件交给XXX，正在派送途中（：，顺丰已开启“安全呼叫”保护您的电话隐私，请放心接听！）（主单总件数：1件）',
                status: 5,
                statusLabel: "派送中",
                time: '2021-11-11 17:07'
            },
            {
                info: '快件到达〖XXX合作点〗',
                status: 4,
                statusLabel: "运输中",
                time: '2021-11-11 16:25'
            },
            {
                info: '快件在〖XXX营业点〗完成分拣，准备发往〖XXX合作点〗',
                status: 0,
                time: '2021-11-11 13:50'
            },
            {
                info: '快件到达〖XXX营业点〗',
                status: 0,
                time: '2021-11-11 13:06'
            },
            {
                info: '快件到达〖XXX转场〗',
                status: 0,
                time: '2021-11-11 05:36'
            },
            {
                info: '顺丰速运已收取快件',
                status: 3,
                statusLabel: "已揽件",
                time: '2021-11-10 21:54'
            },
            {
                info: '包裹正在等待揽收',
                status: 2,
                statusLabel: "已发货",
                time: '2021-11-10 17:41'
            },
            {
                info: '商品已经下单',
                status: 1,
                statusLabel: "已下单",
                time: '2021-11-10 12:17'
            }
        ])
</script>

自定义内容

<template>
    <view class="common-logistics">
        <template v-for="(item, index) in logList" :key="index">
            <!--自定义左侧图标-->
            <zh-logistics-item :logistics-data="item">
                <template v-if="item.status != 0" #node="{ data }">
                    <image v-if="data.status == '7'" style="width:100%;height: 100%" src="/static/images/signed-active.png" mode=""></image>
                    <image v-if="data.status == '6'" style="width:100%;height: 100%" src="/static/images/unPickup.png" mode=""></image>
                    <image v-if="data.status == '5'" style="width:100%;height: 100%" src="/static/images/indelivery.png" mode=""></image>
                    <image v-if="data.status == '4'" style="width:100%;height: 100%" src="/static/images/inTransit.png" mode=""></image>
                    <image v-if="data.status == '3'" style="width:100%;height: 100%" src="/static/images/collected.png" mode=""></image>
                    <image v-if="data.status == '2'" style="width:100%;height: 100%" src="/static/images/collected.png" mode=""></image>
                    <image v-if="data.status == '1'" style="width:100%;height: 100%" src="/static/images/placedOrder.png" mode=""></image>
                </template>
            </zh-logistics-item>
        </template>
    </view>
</template>
<script setup lang="ts">
    import { ref } from "vue";
    import zhLogisticsItem from "@/components/zh-logistics-item/zh-logistics-item.vue";

    const logList = ref([{
                info: '派送成功',
                status: 7,
                statusLabel: "已签收",
                time: '2021-11-11 17:42'
            },
            {
                info: '[代收点] 您的快件已从XXX顺丰速运代理店取出〖来自代收点〗',
                status: 0,
                time: '2021-11-11 17:31'
            },
            {
                info: '快件领取成功',
                status: 0,
                time: '2021-11-11 17:31'
            },
            {
                info: '[代收点] 您的顺丰速运包裹已由XXX顺丰速运代理店代收，代收点地址：XXX， ： 〖来自代收点〗',
                status: 6,
                statusLabel: "代取件",
                time: '2021-11-11 17:15'
            },
            {
                info: '快件交给XXX，正在派送途中（：，顺丰已开启“安全呼叫”保护您的电话隐私，请放心接听！）（主单总件数：1件）',
                status: 5,
                statusLabel: "派送中",
                time: '2021-11-11 17:07'
            },
            {
                info: '快件到达〖XXX合作点〗',
                status: 4,
                statusLabel: "运输中",
                time: '2021-11-11 16:25'
            },
            {
                info: '快件在〖XXX营业点〗完成分拣，准备发往〖XXX合作点〗',
                status: 0,
                time: '2021-11-11 13:50'
            },
            {
                info: '快件到达〖XXX营业点〗',
                status: 0,
                time: '2021-11-11 13:06'
            },
            {
                info: '快件到达〖XXX转场〗',
                status: 0,
                time: '2021-11-11 05:36'
            },
            {
                info: '顺丰速运已收取快件',
                status: 3,
                statusLabel: "已揽件",
                time: '2021-11-10 21:54'
            },
            {
                info: '包裹正在等待揽收',
                status: 2,
                statusLabel: "已发货",
                time: '2021-11-10 17:41'
            },
            {
                info: '商品已经下单',
                status: 1,
                statusLabel: "已下单",
                time: '2021-11-10 12:17'
            }
        ])
</script>

属性