zhapp/components/uni-stepBar/uni-stepBar.vue

<template>
	<!-- 步骤条容器 -->
	<view class="step">
		<!-- 遍历步骤列表 -->
		<view class="item dis f-c" v-for="(item, index) in stepList" :key="index">
			<!-- 步骤内容行 -->
			<view class="dis a-c j-s">
				<!-- 左侧：图标和标题 -->
				<view class="dis a-c">
					<!-- 状态图标 -->
					<view class="dis a-c j-c mr-2 " :class="[
              item.show == null ? 'tag1' : 
              item.show == false ? 'reject' : 'tag'
            ]">

						<!-- 失败状态图标 -->
						<u-icon v-if="item.show==false" name="close" color="#fff" size="11" :bold="true" />
						<!-- 成功状态图标 -->
						<u-icon v-if="item.show" name="checkmark" color="#333" size="11" :bold="true" />
					</view>
					<!-- 步骤标题 -->
					<text class="title active">
						{{ item.title }}
					</text>
				</view>
				<!-- 右侧：时间显示 -->
				<text class="time" v-if="item.time">
					{{ item.time }}
				</text>
			</view>
			<!-- 步骤连接线（最后一个不显示） -->
			<view class="line" v-if="index != stepList.length - 1"></view>
			<!-- 驳回状态显示原因 -->
			<view class="rejectionReason " v-if="item.content && item.status==false">
				{{item.content}}
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: 'StepProgress',
		props: {
			/**
			 * 步骤数据列表
			 * 结构示例：
			 * [
			 *   {
			 *     title: '步骤1',      // 步骤标题
			 *     show: true,         // 状态：true-成功, false-失败, null-未完成
			 *     time: '2023-01-01'  // 完成时间（可选）
			 *   }
			 * ]
			 */
			stepList: {
				type: Array,
				default: () => [],
			}
		},
		// 移除了不必要的空生命周期和方法
	}
</script>

<style lang="scss" scoped>
	.step {

		.item {
			// 步骤项间距

			// 状态图标样式
			.tag {
				// 成功状态
				width: 30rpx;
				height: 30rpx;
				background: #FDE935;
				border-radius: 50%;
			}

			.tag1 {
				// 未完成状态
				width: 26rpx;
				height: 26rpx;
				background: #FFFFFF;
				border-radius: 50%;
				border: 2rpx solid #FDE935;
			}

			.reject {
				// 失败状态
				width: 30rpx;
				height: 30rpx;
				background: #FF4545;
				border-radius: 50%;
			}

			// 标题样式
			.title {
				font-size: 30rpx;
				color: #666;

				&.active {
					// 已完成步骤的标题样式
					color: #333;
					font-weight: bold;
				}
			}

			// 时间样式
			.time {
				font-size: 22rpx;
				color: #999;
			}

			// 连接线样式
			.line {
				height: 40rpx;
				margin-left: 15rpx;
				border-left: 1rpx dashed #333;
			}

			.rejectionReason {
				padding: 20rpx;
				box-sizing: border-box;
				background: #FAFAFA;
				margin-top: 10rpx;
				margin-left: 50rpx;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				font-size: 30rpx;
				color: #666;
			}
		}
	}
</style>