更新记录

1.0.0（2026-09-15） 下载此版本

初版

平台兼容性

uni-app

其他

SL-WX-Logistics 物流信息时间轴组件

组件简介

基于 flex 布局实现的物流信息时间轴组件。左侧为时间轴节点（圆点 + 连接线），右侧为物流内容插槽。内置手机号 / 座机号自动识别与高亮解析方法 parseContent，业务侧可通过插槽自由渲染时间、状态、内容、电话等。H5 / 微信小程序通用。

设计说明：组件只负责时间轴骨架（圆点、连接线、首节点高亮）与电话解析能力，具体每条记录的内容渲染由调用方通过默认插槽决定，灵活适配「电商物流」「订单轨迹」「审批流」等多种场景。

目录结构

components/SL-WX-Logistics
└── SL-WX-Logistics.vue

核心特性

• 时间轴骨架：左侧自动渲染圆点 + 连接线，首条记录（index === 0）圆点放大并使用 activeColor 高亮，标识"当前节点"。

• 电话号码自动识别：内置 parseContent(text) 方法，使用正则匹配手机号（1[3-9]xxxxxxxxx，可带分机号）与座机号（0xx-xxxxxxxx / 0xxx-xxxxxxxx，可带分机号），返回分段数组 [{ text, isPhone }]，业务侧可直接 v-for 渲染并对 isPhone = true 的片段做高亮 + 点击拨打。

• 空状态自动渲染：list 为空或未传时，自动显示"暂无物流信息"占位。

• 主题色可配置：通过 activeColor 控制首节点圆点颜色，适配不同品牌色。

• 展开/收起：默认只展示最新一条记录，底部显示"展开/收起"切换按钮，list 仅 1 条时自动隐藏按钮。通过 collapsed 属性控制初始状态。

• 内容完全自定义：默认插槽透传 item / index / parseContent 三个作用域参数，调用方可自由渲染时间、状态标签、正文、操作按钮等。

Props

Slots

parseContent 方法说明

parseContent(text) // => [{ text: String, isPhone: Boolean }]

• 传入一段文本，返回分段数组
• isPhone: true 的片段为识别到的手机号 / 座机号
• isPhone: false 的片段为普通文本
• 空字符串返回 [{ text: '', isPhone: false }]

支持识别的电话格式：

使用示例

示例 1：基础物流时间轴

<template>
    <sl-wx-logistics :list="list" active-color="#1a73e8">
        <template v-slot:default="{ item, parseContent }">
            <view class="track-item">
                <view class="track-time">{{ item.time }}</view>
                <view class="track-content">
                    <text
                        v-for="(seg, i) in parseContent(item.content)"
                        :key="i"
                        :class="{ 'track-phone': seg.isPhone }"
                        @tap.stop="onPhoneTap(seg)"
                    >{{ seg.text }}</text>
                </view>
            </view>
        </template>
    </sl-wx-logistics>
</template>

<script>
import SlWxLogistics from '@/components/SL-WX-Logistics/SL-WX-Logistics.vue'

export default {
    components: { SlWxLogistics },
    data() {
        return {
            list: [
                {
                    time: '2024-09-12 14:32',
                    content: '【派件中】快递员正在派件，电话 ***，请保持畅通。'
                },
                {
                    time: '2024-09-12 09:18',
                    content: '【到达】已到达杭州西湖营业点，自取电话 0571-87654321 转 808。'
                },
                {
                    time: '2024-09-11 22:05',
                    content: '【运输中】已从上海浦东中转场发出。'
                }
            ]
        }
    },
    methods: {
        onPhoneTap(seg) {
            if (!seg.isPhone) return
            uni.makePhoneCall({ phoneNumber: seg.text })
        }
    }
}
</script>

<style>
.track-phone {
    color: #1a73e8;
    font-weight: bold;
}
</style>

示例 2：自定义主题色（橙色）

<sl-wx-logistics :list="list" active-color="#ff6b35">
    <template v-slot:default="{ item }">
        <view>
            <text class="time">{{ item.time }}</text>
            <text class="content">{{ item.content }}</text>
        </view>
    </template>
</sl-wx-logistics>

示例 3：空状态

<!-- list 为空时组件自动显示"暂无物流信息" -->
<sl-wx-logistics :list="[]" />

示例 4：审批流场景（自定义状态标签）

<sl-wx-logistics :list="approvalList" active-color="#07c160">
    <template v-slot:default="{ item, index }">
        <view class="approval-item">
            <view class="approval-status" :class="index === 0 ? 'current' : ''">
                {{ item.status }}
            </view>
            <view class="approval-meta">
                <text>{{ item.operator }}</text>
                <text>{{ item.time }}</text>
            </view>
            <view class="approval-remark">{{ item.remark }}</view>
        </view>
    </template>
</sl-wx-logistics>

注意事项

1. 首节点高亮：组件默认把 index === 0 视为"当前节点"（最新动态），圆点放大并使用 activeColor。调用方应把最新物流放在数组首位。

2. 电话解析为客户端方法：parseContent 通过作用域插槽暴露，不依赖 DOM，H5 / 小程序行为一致。若业务不需要电话识别，可直接渲染 item.content，无需调用 parseContent。

3. 分机号支持：手机号与座机号均可识别 - 或空格分隔的分机号（1~6 位），如 ***-808 / 0571-87654321 转 808。

4. 空状态文案：固定为"暂无物流信息"，如需自定义，可在 list 为空时直接 v-if 替换组件。

5. 连接线渲染：最后一条记录不渲染连接线，由 CSS :last-child 控制。