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>