更新记录

0.0.1（2026-01-23） 下载此版本

first version

平台兼容性

uni-app(3.6.15)

timeline-step

使用方法

<!-- colors: 主题色 data:数据 -->
<timeline :colors="colors" :data="timelineData"></timeline>

<!-- 数据设置 -->
colors:"#FF5D44",
timelineData: [ 
    {
        title: '审核完成',
        time: '2026-01-23 20:01:49',
        type: 1,
        desc: '售后单审核完成'
    },
    {
        title: '审批人审核',
        time: '2026-01-22 19:01:49',
        type: 1,
        desc: '售后单已申请成功，待售后审核中'
    },
    {
        title: '重新发起审批',
        time: '2026-01-22 18:13:49',
        type: 1,
        desc: '重新发起审批\n 原因：信息填写错误'
    },
    {
        title: '审批拒绝',
        time: '2026-01-20 18:13:40',
        type: 1,
        desc: '拒绝原因：信息不完整'
    },
    {
        title: '审批人审批',
        time: '2026-01-20 18:00:55',
        type: 1,
        desc: '审批通过'
    },
    {
        title: '创建订单',
        time: '2026-01-19 13:19:49',
        type: 1,
        desc: '您的服务订单已生成新的订单'
    }
]

HTML代码实现部分

<template>
    <view>
        <timeline colors="#FF5D44" :data="timelineData"></timeline>
    </view>
</template>

<script setup>
const timelineData = ref([
  {
    title: '审核完成',
    time: '2026-01-23 20:01:49',
    type: 1,
    desc: '售后单审核完成'
  },
  {
    title: '审批人审核',
    time: '2026-01-22 19:01:49',
    type: 1,
    desc: '售后单已申请成功，待售后审核中'
  },
  {
    title: '重新发起审批',
    time: '2026-01-22 18:13:49',
    type: 1,
    desc: '重新发起审批\n 原因：信息填写错误'
  },
  {
    title: '审批拒绝',
    time: '2026-01-20 18:13:40',
    type: 1,
    desc: '拒绝原因：信息不完整'
  },
  {
    title: '审批人审批',
    time: '2026-01-20 18:00:55',
    type: 1,
    desc: '审批通过'
  },
  {
    title: '创建订单',
    time: '2026-01-19 13:19:49',
    type: 1,
    desc: '您的服务订单已生成新的订单'
  }
])
</script>