针对步骤条封装完终于清清楚楚啦

先看效果：

附上代码：使用可直接复用：数据是写在了当前组件中，如有必须，可以使用其中的props传值stepInfos传递相应的数据，根据steps步数就可以控制走到哪一步啦

<template>
	<view class="step-bar">
		<view class="step_item" v-for="(item,index) in stepInfo.list" :key="item.id">
			<view :class="stepInfo.step >= index+1 ? 'circle circle-active':'circle'"></view>
			<view :class="stepInfo.step >= index+2 ? 'line line-active':'line'" v-if="index!==stepInfo.list.length-1">
			</view>
			<view class="middle-box">
				<text
					:class="stepInfo.step < index+1 ? 'text1-actived':stepInfo.step == index+1?'text1-active':text1">{{item.name}}</text>
				<text class="text2">{{item.time}}</text>
			</view>
			<view class="status_text"
				:class="stepInfo.step < index+1 ? 'text1-actived':stepInfo.step == index+1?'text1-active':text1">
				{{item.status}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 传递步骤参数
			stepInfo: {
				type: Object,
				default: function() {
					return {
						list: [],
						step: 0
					}
				}
			}

		},
		data() {
			return {
				stepInfo: {
					step: 3,
					list: [{
						id: 1,
						name: '发起充值',
						time: '2020-12-12 12:47:56',
						status: '已完成'
					}, {
						id: 2,
						name: '处理中',
						time: '2020-12-12 12:47:56',
						status: '进行中'
					}, {
						id: 3,
						name: '到账成功',
						time: '2020-12-12 12:47:56',
						status: '未开始'
					}]
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.step_item {
		position: relative;
		height: 144rpx;
		display: flex;

		.line {
			position: absolute;
			top: 40rpx;
			left: 8rpx;
			content: "";
			width: 4rpx;
			height: 100rpx;
			background-color: #E6E8EF;
		}

		.line-active {
			background-color: #FF2B46;
		}
	}

	.circle {
		width: 20rpx;
		height: 20rpx;
		margin-right: 40rpx;
		margin-top: 10rpx;
		border-radius: 50%;
		background-color: #E6E8EF;
	}

	.circle-active {
		background-color: #FF2B46;
	}

	.middle-box {
		display: flex;
		flex-direction: column;

		.text2 {
			color: #999999;
			font-size: 24rpx;
		}
	}


	.text1 {
		color: #666666;
		font-size: 28rpx;
	}

	.text1-active {
		color: #FF2B46;
	}

	.text1-actived {
		color: #333333;
	}

	.status_text {
		flex-grow: 1;
		display: flex;
		justify-content: flex-end;
		font-size: 28rpx;
	}


	.status_text_active {
		// color: #FF2B46;
	}
</style>