ys-app/src/pages/business/CRM/mainOwner/view/components/qianjue-step.vue

<template>
	<view class="steps">
		<view class="step" v-for="(item, i) in list" :key="i">
			<!-- 左侧 -->
			<view class="step_left"> {{ item.createTime !== null ? item.createTime : '未审核' }}</view>
			<!-- 中部 -->
			<view class="step_mid">
				<view class="step_dot" :style="{ backgroundColor: item.stateFlow ? activeColor : '' }">{{ stepType === 'number' ? i + 1 : '' }}</view>
				<template v-if="i < list.length - 1">
					<view class="step_line" :style="{ backgroundColor: item.stateFlow ? activeColor : '' }"></view>
				</template>
			</view>
			<!-- 右侧 -->
			<view class="step_right">
				<view class="step_name">{{ item.state }}</view>
				<view class="step_idea"  :style="{ color: getStateColor(item.stateFlow) }">{{ getStateText(item.stateFlow) }}</view>
				<view class="step_idea" :style="{ color: getStateColor(item.stateFlow) }" v-if="item.stateFlow==1">同意</view>
				<view class="step_idea"> {{ item.opinionOwn !== null ? item.opinionOwn : '' }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		// 步骤条格式 数字或者为点
		stepType: {
			type: String,
			default: 'dot'
		},
		// 激活颜色
		activeColor: {
			type: String,
			default: '#55aaff'
		},
		// 数据列表
		list: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	  methods: {
	    // 根据 stateFlow 获取状态文本
	    getStateText(stateFlow) {
	      // 状态映射对象（可根据需求扩展）
	      const stateMap = {
	        0: '待审核',   // 未通过
	        1: '已通过',   // 通过
	        2: '已驳回'    // 驳回
	      };
	      // 未知状态返回默认文本
	      return stateMap[stateFlow] || '未知状态';
	    },
	
	    // 根据 stateFlow 获取状态颜色
	    getStateColor(stateFlow) {
	      // 颜色映射对象（可根据需求调整）
	      const colorMap = {
	        0: '#dcdcdc',  // 待审核：灰色
	        1: '#55aaff',  // 已通过：蓝色（使用 activeColor）
	        2: '#ff4d4f'   // 已驳回：红色
	      };
	      // 未知状态返回默认颜色
	      return colorMap[stateFlow] || '#dcdcdc';
	    }
	  },
	data() {
		return {};
	}
};
</script>

<style lang="scss" scoped>
.steps {
	.step {
		display: flex;
		.step_left {
			width: 150rpx;
			margin-top: -5rpx;
			font-size: 26rpx;
			line-height: 36rpx;
			text-align: right;
		}
		.step_mid {
			// width: 50rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin: 0 25rpx;
			.step_dot {
				width: 40rpx;
				height: 40rpx;
				background: #dcdcdc;
				border: 5rpx solid #f5f5f5;
				border-radius: 50%;
				color: #ffffff;
				font-size: 28rpx;
				text-align: center;
				line-height: 40rpx;
			}
			.active_dot {
				background: #2a62ed;
				border: 5rpx solid #e3ebff;
			}
			.step_line {
				width: 4rpx;
				height: 160rpx;
				background-color: #eeeeee;
			}
			.active_line {
				background: #2a62ed;
			}
		}
		.step_right {
			width: 430rpx;
			height: fit-content;
			padding: 25rpx 30rpx;
			margin-top: -14rpx;
			background-color: #f8f8f8;
			border-radius: 10rpx;
			display: flex;
			flex-wrap: wrap;
			align-content: center;

			view {
				width: 100%;
			}
			.step_name {
				font-size: 30rpx;
				margin-bottom: 10rpx;
			}
			.step_idea {
				color: #999999;
				font-size: 26rpx;
				line-height: 40rpx;
			}
		}
	}
}
</style>