介绍
垂直展示的时间流信息。
引入
js
import Timeline from 'sard-uniapp/components/timeline/timeline.vue'
import TimelineItem from 'sard-uniapp/components/timeline-item/timeline-item.vue'代码演示
基础使用
vue
<template>
<sar-timeline>
<sar-timeline-item
v-for="(item, index) in logistics"
:key="index"
:title="item.title"
:time="item.time"
icon-family="demo-icons"
:icon="item.icon"
:icon-color="item.iconColor"
:root-style="{
color: index !== 1 ? 'var(--sar-tertiary-color)' : '',
}"
>
<view v-if="item.tel">
<template
v-for="(subStr, i) in item.description.split(/(\${tel})/)"
:key="i"
>
<text v-if="subStr === '${tel}'" style="color: var(--sar-primary)">
{{ item.tel }}
</text>
<text v-else>{{ subStr }}</text>
</template>
</view>
<template v-else>
{{ item.description }}
</template>
</sar-timeline-item>
</sar-timeline>
</template>
<script setup lang="ts">
const logistics = [
{
description: '收货地址:广东广州xxx1号店',
},
{
icon: 'check',
iconColor: 'var(--sar-primary)',
title: '已签收',
description:
'您的订单已由【xxx(广州xxx1号店)代收。如有疑问您可以联系配送员【xxx,${tel}】确认。感谢您在xxx购物,欢迎再次光临。】',
tel: '13800138000',
time: '2024-06-17 09:01:47',
},
{
icon: 'delivery',
title: '派送中',
description:
'您的订单正在配送途中(快递员:xxx,电话${tel}),请你耐心等待。',
tel: '13800138000',
time: '2024-06-17 08:01:25',
},
{
icon: 'transport',
title: '运输中',
description: '您的订单已送达【广州xx营业部】',
time: '2024-06-17 06:21:23',
},
{
description: '您的订单已离开广州xx分拣中心,前往广州xx营业务途中',
time: '2024-06-17 06:21:23',
},
{
description: '您的订单在【广州xx分拣中心】准备送往【广州xx营业部】',
time: '2024-06-17 04:27:51',
},
{
description: '您的订单在【广州xx接货仓】分拣完成',
time: '2024-06-16 21:07:28',
},
{
icon: 'warehouse',
title: '仓库处理中',
description: '打包完成',
time: '2024-06-16 20:58:13',
},
{
description: '扫描完成',
time: '2024-06-16 20:58:13',
},
{
description: '拣货完成',
time: '2024-06-16 19:18:06',
},
{
description: '您的订单已经打印完成',
time: '2024-06-16 18:53:15',
},
{
icon: 'order',
title: '已下单',
description: '温馨提示:您的订单预计6月17日09:00-15:00送达',
time: '2024-06-16 18:50:30',
},
{
description: '您的订单已经进入广州仓库准备出库',
time: '2024-06-16 18:20:49',
},
{
description: '您的订单预计2024-06-16 18:20开始处理,请您耐心等待',
time: '2024-06-16 18:20:48',
},
{
description: '您提交了订单,请等待系统确认',
time: '2021-06-16 18:20:30',
},
]
</script>vue
<template>
<sar-timeline>
<sar-timeline-item
v-for="(item, index) in logistics"
:key="index"
:title="item.title"
:time="item.time"
icon-family="demo-icons"
:icon="item.icon"
:icon-color="item.iconColor"
:root-style="{
color: index !== 1 ? 'var(--sar-tertiary-color)' : '',
}"
>
<view v-if="item.tel">
<template
v-for="(subStr, i) in item.description.split(/(\${tel})/)"
:key="i"
>
<text v-if="subStr === '${tel}'" style="color: var(--sar-primary)">
{{ item.tel }}
</text>
<text v-else>{{ subStr }}</text>
</template>
</view>
<template v-else>
{{ item.description }}
</template>
</sar-timeline-item>
</sar-timeline>
</template>
<script setup lang="js">
const logistics = [
{
description: "\u6536\u8D27\u5730\u5740\uFF1A\u5E7F\u4E1C\u5E7F\u5DDExxx1\u53F7\u5E97"
},
{
icon: "check",
iconColor: "var(--sar-primary)",
title: "\u5DF2\u7B7E\u6536",
description: "\u60A8\u7684\u8BA2\u5355\u5DF2\u7531\u3010xxx\uFF08\u5E7F\u5DDExxx1\u53F7\u5E97\uFF09\u4EE3\u6536\u3002\u5982\u6709\u7591\u95EE\u60A8\u53EF\u4EE5\u8054\u7CFB\u914D\u9001\u5458\u3010xxx\uFF0C${tel}\u3011\u786E\u8BA4\u3002\u611F\u8C22\u60A8\u5728xxx\u8D2D\u7269\uFF0C\u6B22\u8FCE\u518D\u6B21\u5149\u4E34\u3002\u3011",
tel: "13800138000",
time: "2024-06-17 09:01:47"
},
{
icon: "delivery",
title: "\u6D3E\u9001\u4E2D",
description: "\u60A8\u7684\u8BA2\u5355\u6B63\u5728\u914D\u9001\u9014\u4E2D\uFF08\u5FEB\u9012\u5458\uFF1Axxx\uFF0C\u7535\u8BDD${tel}\uFF09\uFF0C\u8BF7\u4F60\u8010\u5FC3\u7B49\u5F85\u3002",
tel: "13800138000",
time: "2024-06-17 08:01:25"
},
{
icon: "transport",
title: "\u8FD0\u8F93\u4E2D",
description: "\u60A8\u7684\u8BA2\u5355\u5DF2\u9001\u8FBE\u3010\u5E7F\u5DDExx\u8425\u4E1A\u90E8\u3011",
time: "2024-06-17 06:21:23"
},
{
description: "\u60A8\u7684\u8BA2\u5355\u5DF2\u79BB\u5F00\u5E7F\u5DDExx\u5206\u62E3\u4E2D\u5FC3\uFF0C\u524D\u5F80\u5E7F\u5DDExx\u8425\u4E1A\u52A1\u9014\u4E2D",
time: "2024-06-17 06:21:23"
},
{
description: "\u60A8\u7684\u8BA2\u5355\u5728\u3010\u5E7F\u5DDExx\u5206\u62E3\u4E2D\u5FC3\u3011\u51C6\u5907\u9001\u5F80\u3010\u5E7F\u5DDExx\u8425\u4E1A\u90E8\u3011",
time: "2024-06-17 04:27:51"
},
{
description: "\u60A8\u7684\u8BA2\u5355\u5728\u3010\u5E7F\u5DDExx\u63A5\u8D27\u4ED3\u3011\u5206\u62E3\u5B8C\u6210",
time: "2024-06-16 21:07:28"
},
{
icon: "warehouse",
title: "\u4ED3\u5E93\u5904\u7406\u4E2D",
description: "\u6253\u5305\u5B8C\u6210",
time: "2024-06-16 20:58:13"
},
{
description: "\u626B\u63CF\u5B8C\u6210",
time: "2024-06-16 20:58:13"
},
{
description: "\u62E3\u8D27\u5B8C\u6210",
time: "2024-06-16 19:18:06"
},
{
description: "\u60A8\u7684\u8BA2\u5355\u5DF2\u7ECF\u6253\u5370\u5B8C\u6210",
time: "2024-06-16 18:53:15"
},
{
icon: "order",
title: "\u5DF2\u4E0B\u5355",
description: "\u6E29\u99A8\u63D0\u793A\uFF1A\u60A8\u7684\u8BA2\u5355\u9884\u8BA16\u670817\u65E509:00-15:00\u9001\u8FBE",
time: "2024-06-16 18:50:30"
},
{
description: "\u60A8\u7684\u8BA2\u5355\u5DF2\u7ECF\u8FDB\u5165\u5E7F\u5DDE\u4ED3\u5E93\u51C6\u5907\u51FA\u5E93",
time: "2024-06-16 18:20:49"
},
{
description: "\u60A8\u7684\u8BA2\u5355\u9884\u8BA12024-06-16 18:20\u5F00\u59CB\u5904\u7406\uFF0C\u8BF7\u60A8\u8010\u5FC3\u7B49\u5F85",
time: "2024-06-16 18:20:48"
},
{
description: "\u60A8\u63D0\u4EA4\u4E86\u8BA2\u5355\uFF0C\u8BF7\u7B49\u5F85\u7CFB\u7EDF\u786E\u8BA4",
time: "2021-06-16 18:20:30"
}
];
</script>API
TimelineProps
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| root-class | 组件根元素类名 | string | - |
| root-style | 组件根元素样式 | StyleValue | - |
TimelineSlots
| 插槽 | 描述 | 属性 |
|---|---|---|
| default | 自定义默认内容 | - |
TimelineItemProps
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| root-class | 组件根元素类名 | string | - |
| root-style | 组件根元素样式 | StyleValue | - |
| title | 标题内容 | string | - |
| time | 时间内容 | string | - |
| icon | 自定义图标 | string | - |
| icon-family | 图标字体 | string | - |
| icon-color | 图标颜色 | string | - |
TimelineItemSlots
| 插槽 | 描述 | 属性 |
|---|---|---|
| default | 自定义默认内容 | - |
| icon | 自定义图标内容,会覆盖 icon 属性 | - |
| title | 自定义标题内容,会覆盖 title 属性 | - |
| time | 自定义时间内容,会覆盖 time 属性 | - |
主题定制
CSS 变量
scss
page,
.sar-portal {
--sar-timeline-item-header-width: 96rpx;
--sar-timeline-item-line-width: 1px;
--sar-timeline-item-line-dotted-before-height: 14rpx;
--sar-timeline-item-line-color: var(--sar-border-color);
--sar-timeline-item-icon-wrapper-margin-y: 6rpx;
--sar-timeline-item-icon-font-size: 48rpx;
--sar-timeline-item-icon-color: var(--sar-fourth-bg);
--sar-timeline-item-dot-size: 16rpx;
--sar-timeline-item-dot-bg: var(--sar-tertiary-bg);
--sar-timeline-item-body-padding-top: 6rpx;
--sar-timeline-item-body-padding-bottom: 48rpx;
--sar-timeline-item-title-margin-bottom: 12rpx;
--sar-timeline-item-title-font-size: var(--sar-text-lg);
--sar-timeline-item-description-margin-bottom: 12rpx;
--sar-timeline-item-description-font-size: var(--sar-text-base);
--sar-timeline-item-time-font-size: var(--sar-text-sm);
--sar-timeline-item-time-color: var(--sar-tertiary-color);
}