主归属人变更查看-功能实现

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

@@ -0,0 +1,143 @@
+<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>