uniapp-canteen/components/lf-stepbar/lf-stepbar.vue

<template>
	<view class="content">
		<view v-for="(item, index) in list" :key="index" 
			class="list" 
			:style="index == list.length - 1 ? 'padding-bottom: 60rpx' : ''">
			<view class="left">
				<view class="up-line" :class="{'remove-line': index == 0}"
					:style="{'border-color': themeColor, 'background-color': themeColor}"></view>
				<view class="icon" :style="{
					'background-color': index == list.length - 1 && !item.isFinished ? themeColor : '#fff',
					'border-color': themeColor,
					'color': themeColor}">
					<u-icon name="arrow-down" color="#fff" v-if="index == list.length - 1 && !item.isFinished"></u-icon>
					<u-icon name="checkmark" v-else></u-icon>
				</view>
				<view class="down-line" :class="{
						'dotted-line': index == list.length - 1 && !item.isFinished,
						'remove-line': index == list.length - 1 && item.isFinished
					}" :style="{'border-color': themeColor, 'background-color': themeColor}">
				</view>
			</view>
			<view class="right">
				<view class="desc">
					<text class="lf-line-2">{{ item.action }}</text>
					<text class="date">{{ item.created_at }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'lf-step-bar',
		props: {
			themeColor: {
				type: String,
				default: '#1833F2'
			},
			list: {
				type: Array,
				default(){
					return [{
						desc: '订单创建',
						date: '2021-07-23 13:23:52',
						isFinished: false
					},{
						desc: '订单发货',
						date: '2021-07-23 13:23:52',
						isFinished: false
					},{
						desc: '订单发货',
						date: '2021-07-23 13:23:52',
						isFinished: false
					}]
				}
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.content{
		width: 100%;
		height: max-content;
		padding: 0 32rpx;
	}
	.list{
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 110rpx;
		.left{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-content: center;
			align-items: center;
			margin-right: 15rpx;
			.up-line,.down-line{
				height: 40rpx;
				width: 2rpx;
				border: 1rpx solid #1833F2;
				background-color: #1833F2;
				position: relative;
			}
			.remove-line{
				border: none !important;
				background-color: transparent !important;
			}
			.dotted-line::after{
				content: '';
				position: absolute;
				left: -1rpx;
				bottom: -40rpx;
				height: 40rpx;
				width: 0rpx;
				border: 1rpx dashed #999999;
			}
			.icon{
				width: 60rpx;
				height: 60rpx;
				box-sizing: border-box;
				border: 2rpx solid #1833F2;
				color: #1833F2;
				border-radius: 50%;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-content: center;
			}
		}
		.right{
			flex: auto;
			.desc{
				position: relative;
				font-size: 28rpx;
				color: #222222;
				.date{
					position: absolute;
					bottom: -36rpx;
					left: 0;
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}
</style>