leromro-mini/pages_home/pages/serviceManagement/Step.vue

<template>
	<view class="step-main">
		<view v-for="item in list" :key="item.value" class="step-item flex_c_c_f">
			<view class="step-icon-box flex_c_c">
				<!-- :class="item.value <= step ? 'step-icon-active' : 'step-icon'" -->
				<view :class="getClassIcon(item.value)"></view>
			</view>
			<view :class="item.value === step ? `step-name-active` : 'step-name'">{{ item.name }}</view>
			<!-- :class="item.value <= step ? 'step-hr step-hr-active' : 'step-hr'" -->
			<view :class="getClass(item.value)" v-if="item.value != 0"></view>

		</view>
	</view>

</template>

<script setup>
import { computed, ref } from 'vue';
import { inject } from 'vue';
const formData = inject('formData');
console.log("TCL: formData", formData)
const props = defineProps({
	step: {
		type: Number,
		default: 0
	}
});
const list = [
	{
		name: '填写服务信息',
		value: 0
	},
	{
		name: '审核中',
		value: 1
	},
	{
		name: '审核完成',
		value: 2
	}
]
const getClassIcon = (value) => {
	if (value === props.step && formData.appStatus === '3') {
		return ' step-error'
	}
	if (value <= props.step) {
		return 'step-icon-active'
	}
	return 'step-icon'
}
const getClass = (value) => {
	if (value === props.step && formData.appStatus === '3') {
		return 'step-hr step-error-hr'
	}
	if (value <= props.step) {
		return 'step-hr step-hr-active'
	}
	return 'step-hr'
}





</script>
<style lang="scss" scoped>
.step-main {
	padding: 40rpx 0 36rpx;
	background: #fff;
	width: 100%;
	display: flex;

	.step-item {
		flex: 1;
		position: relative;
	}

	.step-icon-box {
		width: 38rpx;
		height: 38rpx;
		background: #FFE8D3;
		border-radius: 38rpx;
		position: relative;
		z-index: 3;

		.step-icon {
			width: 22rpx;
			height: 22rpx;
			border-radius: 22rpx;
			background: #FFFFFF;

		}

		.step-icon-active {
			width: 22rpx;
			height: 22rpx;
			border-radius: 22rpx;
			background: #FF6E51;
		}

	}

	.step-name {
		font-family: PingFang SC;
		font-size: 22rpx;
		font-weight: normal;
		line-height: normal;
		letter-spacing: normal;
		color: #666666;
	}

	.step-name-active {
		font-family: PingFang SC;
		font-size: 22rpx;
		font-weight: normal;
		line-height: normal;
		letter-spacing: normal;
		color: #333333;
	}

	.step-hr {

		border: 8rpx solid #FFE8D3;
		height: 1rpx;
		width: 100%;
		z-index: 0;
		position: absolute;
		top: 10rpx;
		left: -50%;
		background: #FFE8D3;
	}

	.step-hr-active {
		border-color: #FFB87C;
		background: #FFB87C
	}

	.step-hr:first-child {
		border: none
	}

	.step-error {
		width: 22rpx;
		height: 22rpx;
		border-radius: 22rpx;
		background: #C4C4C4;
	}

	.step-error-hr {
		border-color: #C4C4C4;
		background: #C4C4C4
	}
}
</style>