gas-cylinder-app/components/StepBar.vue

<template>
	<view>
		<u-steps dot :current="stepList.length" direction="column">
			<template v-for="(item,index) in stepList">
				<view class="card_step">
					<view class="card_time">{{item.optTime}}</view>
					<u-steps-item :title="initDictvalue(optTypeList,item.optType)">
						<template slot="desc">
							<view>
								<view class="title" v-if="item.optUserObj.nickName">
									操作人：{{item.optUserObj.nickName}}
								</view>
								<view class="title" v-if="item.objectCustomerObj.name">
									交互客户：{{item.objectCustomerObj.name}}
								</view>
								<view class="title" v-if="item.optCustomerObj.name">
									操作客户：{{item.optCustomerObj.name}}
								</view>
								<view class="title" v-if="item.currentEnterpriseObj.name">
									当前企业：{{item.currentEnterpriseObj.name}}
								</view>
								<view class="title" v-if="item.currentAddressObj.name">
									当前客户：{{item.currentAddressObj.name}}
								</view>
								<view class="title" v-if="item.currentTruckObj.name">
									当前司机：{{item.currentTruckObj.name}}
								</view>
								<view class="title" v-if="item.currentMotor.name">
									当前车辆：{{item.currentMotor.name}}
								</view>
							</view>
						</template>
					</u-steps-item>
				</view>
			</template>
		</u-steps>
	</view>
</template>

<script>
	import {
		process
	} from '@/static/js/blockSort.js'
	export default {
		props: {
			stepList: {
				type: Array,
				default: []
			},
		},
		data() {
			return {
				optTypeList: process(),
			}
		},
		computed: {},
		methods: {
			// 普通类型文字匹配
			initDictvalue(list, type) {
				let name = ''
				if (list) {
					list.forEach(item => {
						if (type === item.value) {
							name = item.label
						}
					})
				}
				return name
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-text__value {
		font-size: 32rpx !important;
		font-weight: bold !important;
	}

	::v-deep .u-steps-item__wrapper {
		border-radius: 50%;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
		background-color: #3c9cff !important;
	}

	::v-deep .u-steps-item__wrapper__dot {
		background-color: #fff !important;
	}

	::v-deep .u-steps-item__content {
		margin-left: 20rpx !important;
	}

	.title_name {
		font-size: 32rpx;
		font-weight: bold;
	}

	.title {
		font-size: 26rpx;
		color: #606266;
	}

	.card_step {
		width: 100%;
		display: flex;
	}

	.card_time {
		text-align: center;
		width: 25%;
		font-size: 25rpx;
		color: #000;
	}
</style>