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

news2025/5/12 0:56:15

展示

在这里插入图片描述
在这里插入图片描述
说明：“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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2373557.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【日撸 Java 三百行】Day 10（综合任务 1）

【日撸 Java 三百行】Day 10（综合任务 1）

目录 Day 10&#xff1a;综合任务 1 一、题目分析 1. 数据结构 2. 相关函数基本知识 二、模块介绍 1. 初始化与成绩矩阵的构建 2. 创建总成绩数组 3. 寻找成绩极值 三、代码与测试 小结 拓展&#xff1a;关于求极值的相关算法 Day 10&#xff1a;综合任务 1 Task&…
阅读更多...
macOS 15.4.1 Chrome不能访问本地网络

macOS 15.4.1 Chrome不能访问本地网络

前言 最近使用macmini m4&#xff0c;自带macOS15系统&#xff0c;对于开发者简直是一言难尽&#xff0c;Chrome浏览器的本地网络有bug&#xff0c;可以访问本机&#xff0c;但是不能访问路由器上的其他机器&#xff0c;路由器提供的页面也不能访问&#xff0c;如下是折腾解决…
阅读更多...
【Hive入门】Hive增量数据导入：基于Sqoop的关系型数据库同步方案深度解析

【Hive入门】Hive增量数据导入：基于Sqoop的关系型数据库同步方案深度解析

目录 引言 1 增量数据导入概述 1.1 增量同步与全量同步对比 1.2 增量同步技术选型矩阵 2 Sqoop增量导入原理剖析 2.1 Sqoop架构设计 2.2 增量同步核心机制 3 Sqoop增量模式详解 3.1 append模式&#xff08;基于自增ID&#xff09; 3.2 lastmodified模式&#xff08;基…
阅读更多...
Dify使用总结

Dify使用总结

最近完成了一个Dify的项目简单进行总结下搭建服务按照官方文档操作就行就不写了。 进入首页之后由以下组成&#xff1a; 探索、工作室、知识库、工具 探索&#xff1a; 可以展示自己创建的所有应用&#xff0c;一个应用就是一个APP&#xff0c;可以进行测试使用 工作室包含…
阅读更多...
MATLAB导出和导入Excel文件表格数据并处理

MATLAB导出和导入Excel文件表格数据并处理

20250507 1.MATLAB使用table函数和writetable函数将数据导出Excel表格文件 我们以高斯函数为例子&#xff0c;高斯函数在数学和工程领域有着广泛的应用&#xff0c;它的一般形式为&#xff1a; 其中是均值&#xff0c;决定了函数的中心位置&#xff1b; 是标准差&#xff0c;决…
阅读更多...
分书问题的递归枚举算法

分书问题的递归枚举算法

分数问题的递归枚举算法 一、问题引入二、解题步骤1.问题分析思维导图2.解题步骤 三、代码实现1.代码2.复杂度分析 四、个人总结 一、问题引入 分书问题是指&#xff1a;已知 n 个人对 m 本书的喜好&#xff08;n≤m&#xff09;&#xff0c;现要将 m 本书分给 n 个人&#xf…
阅读更多...
Unity WebGL、js发布交互

Unity WebGL、js发布交互

官网参考 Unity3D开发之WebGL平台上 unity和js前端通信交互 WebFun.jslib mergeInto(LibraryManager.library, {JSLog: function (str) { var strsUTF8ToString(str); Log(str); Log(strs);}, Hello: function () {var strs"Hello, world!"; Log(strs); Log(UTF8ToS…
阅读更多...
Linux复习笔记（一）基础命令和操作

Linux复习笔记（一）基础命令和操作

遇到的问题&#xff0c;都有解决方案&#xff0c;希望我的博客能为你提供一点帮助。 一、Linux中的基础命令和操作&#xff08;约30%-40%) 1.用户和组&#xff08;5%左右&#xff09; 1.1用户简介&#xff08;了解&#xff09; 要求&#xff1a;了解&#xff0c;知道有三个用户…
阅读更多...
uniapp使用ui.request 请求流式输出

uniapp使用ui.request 请求流式输出

正文&#xff1a; 在现代Web开发中&#xff0c;实时数据流和长时间运行的请求变得越来越常见&#xff0c;尤其是在处理大量数据或进行实时通信时。在这种情况下&#xff0c;uniapp 提供的 ui.request 请求方法可以帮助我们轻松实现流式输出请求。本文将介绍如何使用 uni.reques…
阅读更多...
20250506让NanoPi NEO core开发板使用Ubuntu core16.04系统的TF卡启动

20250506让NanoPi NEO core开发板使用Ubuntu core16.04系统的TF卡启动

1、h3-sd-friendlycore-xenial-4.14-armhf-20210618.img.gz 在WIN10下使用7-ZIP解压缩/ubuntu20.04下使用tar 2、Win32DiskImager.exe 写如32GB的TF卡。【以管理员身份运行】 3、TF卡如果已经做过会有3个磁盘分区&#xff0c;可以使用SD Card Formatter/SDCardFormatterv5_WinE…
阅读更多...
快速上手 Docker：从入门到安装的简易指南（Mac、Windows、Ubuntu）

快速上手 Docker：从入门到安装的简易指南（Mac、Windows、Ubuntu）

PS&#xff1a;笔者在五一刚回来一直搞Docker部署AI项目&#xff0c;发现从开发环境迁移到生成环境时&#xff0c;Docker非常好用。但真的有一定上手难度&#xff0c;推荐读者多自己尝试踩踩坑。 本篇幅有限&#xff0c;使用与修改另起篇幅。 一、Docker是什么 #1. Docker是什…
阅读更多...
MySQL + Elasticsearch：为什么要使用ES，使用场景与架构设计详解

MySQL + Elasticsearch：为什么要使用ES，使用场景与架构设计详解

MySQL Elasticsearch&#xff1a;为什么要使用ES&#xff0c;使用场景与架构设计详解 前言一、MySQL Elasticsearch的背景与需求1.1 为什么要使用Elasticsearch&#xff08;ES&#xff09;&#xff1f;1.2 为什么MySQL在某些场景下不足以满足需求&#xff1f;1.3 MySQL Elas…
阅读更多...
从投入产出、效率、上手难易度等角度综合对比 pytest 和 unittest 框架

从投入产出、效率、上手难易度等角度综合对比 pytest 和 unittest 框架

对于选择python作为测试脚本开发的同学来说&#xff0c;pytest和python unittest是必需了解的两个框架。那么他们有什么区别&#xff1f;我们该怎么选&#xff1f;让我们一起来了解一下吧&#xff01; 我们从投入产出、效率、上手难易度等角度综合对比 pytest 和 unittest 框架…
阅读更多...
关于汇编语言与程序设计——单总线温度采集与显示的应用

关于汇编语言与程序设计——单总线温度采集与显示的应用

一、实验要求 (1)握码管的使用方式 (2)掌握DS18B20温度传感器的工作原理 (3)掌握单总线通信方式实现 MCU与DS18B20数据传输 二、设计思路 1.整体思路 通过编写数码管显示程序和单总线温度采集程序&#xff0c;结合温度传感报警&#xff0c;利用手指触碰传感器&#xff0c;当…
阅读更多...
spring中的@Inject注解详情

spring中的@Inject注解详情

在 Spring 框架中&#xff0c;Inject 是 Java 依赖注入标准&#xff08;JSR-330&#xff09; 的核心注解&#xff0c;与 Spring 原生的 Autowired 类似&#xff0c;但具备更标准化的跨框架特性。以下从功能特性、使用场景及与 Spring 原生注解的对比进行详细解析&#xff1a; 一…
阅读更多...
Vue基础(8)_监视属性、深度监视、监视的简写形式

Vue基础(8)_监视属性、深度监视、监视的简写形式

监视属性(watch)&#xff1a; 1.当被监视的属性变化时&#xff0c;回调函数(handler)自动调用&#xff0c;进行相关操作。 2.监视的属性必须存在&#xff0c;才能进行监视&#xff01;&#xff01; 3.监视的两种写法&#xff1a; (1).new Vue时传入watch配置 (2).通过vm.$watc…
阅读更多...
TCP IP

TCP IP

TCP/IP 通信协议&#xff0c;不是单一协议&#xff0c;是一组协议的集合 TCP IP UDP 1.建立链接 三次握手 第一步&#xff1a;客户端发送一个FIN报文&#xff0c;SEQX,等待服务器回应 第二步&#xff1a;服务器端受到&#xff0c;发送ackx1,seqy, 等待客户端回应 第三步&am…
阅读更多...
（四）毛子整洁架构（Presentation层/Authentiacation/Authorization）

（四）毛子整洁架构（Presentation层/Authentiacation/Authorization）

文章目录 项目地址一、Presentation 层1.1 数据库migration1. 添加数据库连接字符串2. 创建自动Migration/Seed3.修改Entity添加private 构造函数4. 执行迁移 1.2 全局错误处理中间件1.3 Controller 添加1. Apartments2. Bookings3. 测试 二、Authentiacation2.1 添加Keycloak服…
阅读更多...
K8S服务的请求访问转发原理

K8S服务的请求访问转发原理

开启 K8s 服务异常排障过程前&#xff0c;须对 K8s 服务的访问路径有一个全面的了解&#xff0c;下面我们先介绍目前常用的 K8s 服务访问方式&#xff08;不同云原生平台实现方式可能基于部署方案、性能优化等情况会存在一些差异&#xff0c;但是如要运维 K8s 服务&#xff0c;…
阅读更多...
20250510解决NanoPi NEO core开发板在Ubuntu core22.04.3系统下适配移远的4G模块EC200A-CN的问题

20250510解决NanoPi NEO core开发板在Ubuntu core22.04.3系统下适配移远的4G模块EC200A-CN的问题

1、h3-eflasher-friendlycore-jammy-4.14-armhf-20250402.img.gz 在WIN10下使用7-ZIP解压缩/ubuntu20.04下使用tar 2、Win32DiskImager.exe 写如32GB的TF卡。【以管理员身份运行】 3、TF卡如果已经做过会有3个磁盘分区&#xff0c;可以使用SD Card Formatter/SDCardFormatterv5…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023