uniapp+vue3+firstUI时间轴 提现进度样式

展示

说明：“status”: 0, //状态:0=待审核,1=审核通过,2=审核驳回,3=提现成功,4=提现失败

第一种：5种类型归纳为三种显示样式

<fui-timeaxis background="#fff" :padding="['10rpx','16rpx','0']">
	<!-- 动态生成步骤节点 -->
	<fui-timeaxis-node v-for="(item, index) in steps" :key="index"
		:lineColor="item.lineColor" :lined="index !== steps.length - 1">
		<!-- 动态图标 -->
		<fui-icon :name="item.icon" :size="42" :color="item.color" />
		<!-- 右侧内容 -->
		<template v-slot:right>
			<view class="fui-process__node" :class="{ red: item.isError }">
				<view class="fui-title">{{ item.title }}</view>
				<view class="fui-time">{{ item.tip }}</view>
			</view>
		</template>
	</fui-timeaxis-node>
</fui-timeaxis>

// 生成步骤配置
const generateSteps = (status) => {
	const baseSteps = [{
			title: '待审核',
			tip: '2024-02-23 12:00:00', // 替换为实际时间
			icon: 'checkbox-fill',
			color: '#999',
			lineColor: '#eee',
			isError: false
		},
		{
			title: '审核通过',
			tip: '2024-02-23 12:05:00',
			icon: 'checkbox-fill',
			color: '#3562FA',
			lineColor: '#3562FA',
			isError: false
		},
		{
			title: '提现成功',
			tip: '2024-02-23 12:10:00',
			icon: 'checkbox-fill',
			color: '#3562FA',
			lineColor: '#3562FA',
			isError: false
		}
	];

	switch (status) {
		case 0: // 待审核（仅第一步激活）
			return [{
				...baseSteps[0],
				color: '#3562FA',
				lineColor: '#3562FA',
				icon: 'checkbox-fill'
			}];

		case 1: // 审核通过（显示前两步）
			return [{
					...baseSteps[0],
					color: '#3562FA',
					lineColor: '#3562FA'
				},
				baseSteps[1]
			];

		case 2: // 审核驳回（红色错误）
			return [{
				...baseSteps[0],
				title: '审核驳回',
				color: '#FF4D4F',
				lineColor: '#FF4D4F',
				icon: 'clear-fill',
				isError: true
			}];

		case 3: // 提现成功（全流程蓝色）
			return baseSteps;

		case 4: // 提现失败（最后一步红色）
			return [{
					...baseSteps[0],
					color: '#3562FA',
					lineColor: '#3562FA'
				},
				baseSteps[1],
				{
					...baseSteps[2],
					title: '提现失败',
					color: '#FF4D4F',
					lineColor: '#FF4D4F',
					icon: 'clear-fill',
					isError: true
				}
			];
	}
	return [];
}
const steps = ref(generateSteps(info.value.status));

// 监听状态变化
watch(() => info.value.status, (newVal) => {
	steps.value = generateSteps(newVal);
}, {
	immediate: true
});

.fui-process__node {
	color: #3562FA;
	padding-left: 20rpx;
}

.fui-title {
	font-weight: bold;
	font-size: 30rpx;
}

.fui-time {
	font-size: 26rpx;
	margin-bottom: 40rpx;
	margin-top: 10rpx;
}

.red {
	color: #FF4D4F !important;
}

第二种： 5种状态 正常显示

结构、样式没变，只有js的写法有变化

const generateSteps = (status) => {
		// 每个状态独立配置步骤
		switch (status) {
			case 0: // 待审核（进行中）
				return [{
					title: '待审核',
					tip: '',
					icon: 'checkbox-fill', // 使用进行中图标
					color: '#3562FA', // 激活颜色
					lineColor: '#3562FA', // 激活线条
					isError: false
				}];

			case 1: // 审核通过（进行中）
				return [{
						title: '待审核',
						tip: '',
						icon: 'checkbox-fill', // 已完成图标
						color: '#3562FA',
						lineColor: '#3562FA',
						isError: false
					},
					{
						title: '审核通过',
						tip: '',
						icon: 'checkbox-fill', // 进行中图标
						color: '#3562FA',
						lineColor: '#3562FA',
						isError: false
					}
				];

			case 2: // 审核驳回（错误终止）
				return [{
						title: '待审核',
						tip: '',
						icon: 'checkbox-fill', // 审核已通过（但后续被驳回）
						color: '#3562FA',
						lineColor: '#FF4D4F', // 后续线条变红
						isError: false
					},
					{
						title: '审核驳回',
						tip: '',
						icon: 'clear-fill', // 错误图标
						color: '#FF4D4F', // 错误颜色
						lineColor: '#FF4D4F', // 错误线条
						isError: true
					}
				];

			case 3: // 提现成功（全流程完成）
				return [{
						title: '待审核',
						tip: '',
						icon: 'checkbox-fill',
						color: '#3562FA',
						lineColor: '#3562FA',
						isError: false
					},
					{
						title: '审核通过',
						tip: '',
						icon: 'checkbox-fill',
						color: '#3562FA',
						lineColor: '#3562FA',
						isError: false
					},
					{
						title: '提现成功',
						tip: '恭喜您，提现成功',
						icon: 'checkbox-fill',
						color: '#3562FA',
						lineColor: '#3562FA',
						isError: false
					}
				];

			case 4: // 提现失败（最后一步错误）
				return [{
						title: '待审核',
						tip: '',
						icon: 'checkbox-fill',
						color: '#3562FA',
						lineColor: '#3562FA',
						isError: false
					},
					{
						title: '审核通过',
						tip: '',
						icon: 'checkbox-fill',
						color: '#3562FA',
						lineColor: '#3562FA',
						isError: false
					},
					{
						title: '提现失败',
						tip: info.value.fail_reason,
						icon: 'clear-fill', // 错误图标
						color: '#FF4D4F', // 错误颜色
						lineColor: '#FF4D4F', // 错误线条
						isError: true
					}
				];

			default:
				return [];
		}
	};


	const steps = ref(generateSteps(info.value.status));

	// 监听状态变化
	watch(() => info.value.status, (newVal) => {
		steps.value = generateSteps(newVal);
	}, {
		immediate: true
	});

第三种：第一种的简化写法

<fui-timeaxis background="#fff" :padding="['10rpx','16rpx','0']">
  <fui-timeaxis-node 
    v-for="(item, index) in steps" 
    :key="index"
    :lineColor="item.lineColor" 
    :lined="index !== steps.length - 1"
  >
    <fui-icon :name="item.icon" :size="42" :color="item.color" />
    <template v-slot:right>
      <view class="fui-process__node" :class="{ red: item.isError }">
        <view class="fui-title">{{ item.title }}</view>
        <view class="fui-time">{{ item.tip }}</view>
      </view>
    </template>
  </fui-timeaxis-node>
</fui-timeaxis>

const baseSteps = [
  { title: '待审核', icon: 'checkbox-fill', tip: '' },
  { title: '审核通过', icon: 'checkbox-fill', tip: '' },
  { title: '提现成功', icon: 'checkbox-fill', tip: '恭喜您，提现成功' }
]

const statusHandler = {
  0: () => [createStep(0, '#3562FA')],
  1: () => [createStep(0), createStep(1, '#3562FA')],
  2: () => [
    createStep(0, '#FF4D4F'),
    createStep(1, '#FF4D4F', '审核驳回', 'clear-fill', true)
  ],
  3: () => baseSteps.map(s => ({ ...s, color: '#3562FA', lineColor: '#3562FA' })),
  4: (info) => [
    ...baseSteps.slice(0,2).map(s => ({ ...s, color: '#3562FA', lineColor: '#3562FA' })),
    createStep(2, '#FF4D4F', '提现失败', 'clear-fill', true, info?.fail_reason)
  ]
}

function createStep(index, color = '#3562FA', title, icon, isError = false, tip = '') {
  return {
    ...baseSteps[index],
    title: title || baseSteps[index].title,
    icon: icon || baseSteps[index].icon,
    color,
    lineColor: color,
    isError,
    tip: tip || baseSteps[index].tip
  }
}

const generateSteps = (status, info) => 
  statusHandler[status]?.(info) || []

const steps = ref(generateSteps(info.value.status, info.value))

watch(() => info.value.status, (newVal) => {
  steps.value = generateSteps(newVal, info.value)
}, { immediate: true })

优化点说明：

基础配置集中管理：将公共属性抽离到基础配置对象baseSteps中，减少重复代码

统一节点创建函数：通过createStep函数处理不同状态的属性覆盖，简化节点生成逻辑

状态处理器对象：使用对象存储不同状态的处理逻辑，结构更清晰且易于扩展

动态属性处理：针对需要特殊处理的错误状态和动态提示信息，在创建节点时进行参数覆盖

颜色统一管理：通过参数传递颜色值，避免多处硬编码颜色值，更易维护

响应式数据更新：保留watch监听，确保状态变化时能实时更新进度显示

这种实现方式在保持原有功能的同时，将代码量减少了约40%，并提高了可维护性和扩展性。后续新增状态时，只需在statusHandler中添加对应处理逻辑即可。

时间轴模板

<fui-timeaxis background="#fff" :padding="['10rpx','16rpx','0']">
	<fui-timeaxis-node lineColor="#3562FA" v-for="(item,index) in 3" :key="index"
		:lined="index!=2">
		<fui-icon name="checkbox-fill" :size="42" color="#3562FA"></fui-icon>
		<fui-icon name="clear-fill" :size="42" color="#FF4D4F"></fui-icon>
		<template v-slot:right>
			<view class="fui-process__node">
				<view class="fui-title">标题</view>
				<view class="fui-time">2024-02-23 12:00:00</view>
			</view>
		</template>
	</fui-timeaxis-node>
</fui-timeaxis>