mailbox-uniapp/pages/work/components/steps.vue

<template>
	<view class="flex">
		<view v-for="(item, index) in steps" class="step text-center" :active="index == activeIndex" :completed="index < activeIndex">
			<text>{{ index + 1 }}</text>
			<text>{{ item }}</text>
		</view>
	</view>
</template>

<script setup>
	import { inject, computed } from "vue";
	const steps = ['信件签收', '联系群众', '接访群众', '核查办理', '办结审批']
	const flowNode = inject("flowNode");
	const activeIndex = computed(() => {
		if (flowNode.value.key === "contact_writer") {
		    return 1;
		}
		if (flowNode.value.key === "interview_writer") {
		    return 2;
		}
		if (flowNode.value.key === "verify") {
		    return 3;
		}
		if (
		    flowNode.value.key === "three_leader_approval" ||
		    flowNode.value.key === "second_approval" ||
		    flowNode.value.key === "second_deputy_approval" ||
		    flowNode.value.key === "second_leader_approval" ||
		    flowNode.value.key === "second_reporting" ||
		    flowNode.value.key === "first_approval" ||
		    flowNode.value.key === "countersign"
		) {
		    return 4;
		}
		if (flowNode.value.key === "completion") {
		    return 5;
		}
		return 0;
	})
</script>

<style scoped>
	.step {
		--background-color: var(--primary-color);
		width: 20%;
		color: #ACB7FF;
		line-height: 14px;
		padding: 3px 0;
		border-top: 1px solid #4B60E4;
		border-bottom: 1px solid #4B60E4;
		position: relative;
		background-color: var(--background-color);
		&:before {
			display: block;
			content: '';
			height: 14.5px;
			width: 14.5px;
			position: absolute;
			top: 2px;
			right: -6px;
			border-top: 1px solid #4B60E4;
			border-right: 1px solid #4B60E4;
			transform: rotate(45deg);
			z-index: 1;
			background-color: var(--background-color);;
		}
		&:last-child::before {
			display: none;
		}
		&[active=true] {
			--background-color: #f40000;
			border-color: #FF7474;
			color: #fff;
			&:before {
				border-color: #FF7474;
			}
		}
		&[completed=true] {
			color: #fff;
			--background-color: #3A4DC1;
		}
	}
</style>