Fusions

Appearance

TimeAxis 时间轴 ​

iPhone

此组件用于物流信息展示， 各种跟展示时间轴上的事件相关等场景。

平台差异说明 ​

APPH5微信小程序支付宝小程序QQ小程序···
√√√√√适配中

代码示例 ​

部分功能示例，具体可参考示例程序以及文档API。

基础用法 ​

  • 此组件左侧图标默认为显示一个点，如需自定义，通过 name 为 node 的 slot 插槽传入内容
  • 组件右侧内容为了更强大的自定义，需要通过 name 为 content 的 slot 插槽传入内容
html
<template>
    <view class="timeaxis-wrap">
        <fu-timeaxis>
            <fu-timeaxis-item nodeTop="1" v-for="(item,index) in list" :key="index">
                <template v-slot:node>
                    <view :class="[item.name? 'timeaxis-wrap__node': 'timeaxis-wrap__node-dot', {'fu-bg-2979ff': index == 0}]">
                        <fu-icon :name="item.icon" color="#ffffff"></fu-icon>
                    </view>
                </template>
                <template v-slot:content>
                    <view>
                        <view class="timeaxis-wrap__title" v-if="item.name">{{ item.name || '' }}</view>
                        <view class="fu-font-28 fu-m-b-12">{{ item.desc || '' }}</view>
                        <view class="fu-font-24 fu-color-999999">{{ item.time || '' }}</view>
                    </view>
                </template>
            </fu-timeaxis-item>
        </fu-timeaxis>
    </view>
</template>

<script setup>
    import { reactive } from 'vue';

    // data数据
    let list = reactive([
        { name: '已签收', desc: '【郑州市】您的快件已签收，签收人:本人，(温馨提示您:戴口置取消快递，个人防护要牢记)，如有疑问请电联快递员:李四(13000000000)，投诉电话:xxx-1234567890-02-17',    time: '2025-02-17 19:01:46', icon: 'check-mark-circle-fill' },
        { name: '已派送', desc: '正在由【XXX】派送您的快递，有问题请拨打【15024878999】', time: '2025-02-17 19:01:46', icon: 'check-mark-circle-fill' },
        { name: '', desc: '快件离开【XX转运中心】已发往【XXX转运中心】', time: '2025-02-17 19:01:46' },
        { name: '', desc: '快件离开【亳州谯城网点】已发往【商丘转运中心】', time: '2025-02-17 19:01:46' },
        { name: '', desc: '【XX网点】的XX(18256787912)已取件，投诉电话:xxxx-000000', time: '2025-02-17 19:01:46' },
        { name: '已发货', desc: '商家已发货，正在通知XX快递取件', time: '2025-02-17 19:01:46', icon: 'check-mark-circle-fill' },
        { name: '已打包', desc: '您的订单已打包完成', time: '2025-02-17 19:01:46', icon: 'check-mark-circle-fill' },
        { name: '', desc: '您的订单已验货完成', time: '2025-02-17 19:01:46' },
        { name: '已下单', desc: '订单确认，已通知商家配货', time: '2025-02-17 19:01:46', icon: 'check-mark-circle-fill' },
        { name: '', desc: '您已提交订单，请等待系统确认', time: '2025-02-17 19:01:46' }
    ]);
</script>

<style lang="less" scoped>
    $node: 44rpx;
    $node-dot: 16rpx;

    .timeaxis-wrap {
        padding: 30rpx;

        &__title {
            padding-bottom: 12rpx;
            font-size: 32rpx;
            color: #333;
            font-weight: bold;
        }

        &__node {
            height: $node;
            width: $node;
            border-radius: 50%;
            background-color: #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            flex-shrink: 0;
        }
    
        &__node-dot {
            height: $node-dot;
            width: $node-dot;
            background-color: #ddd;
            border-radius: 50%;
            margin-top: 12rpx;
       }
    }
</style>

API ​

TimeAxis Slot ​

名称说明
default结合 TimeAxisItem 组件使用，用于展示时间轴内容

TimeAxisItem Props ​

属性名说明类型默认值可选值
bgColor左侧节点背景颜色，一般通过slot内容自定义背景颜色即可String--
nodeTop左侧节点绝对定位top值String｜Number0-

TimeAxisItem Slot ​

名称说明
node左侧节点内容，一般通过slot内容自定义内容
content右侧内容，一般通过slot内容自定义内容