lanan-repair-app/components/steps/steps.vue

<template>
	<view class="inspection-progress-card">
		<!-- 卡片标题 -->
		<view class="card-title">
			<text class="title-text">检验项目进度</text>
			<text class="progress-text">
				{{ completedCount }}/{{ totalCount }} 项已完成
			</text>
		</view>

		<!-- 进度步骤展示 -->
		<view class="progress-container">
			<!-- 所有步骤点 -->
			<view class="steps-wrapper">
				<view v-for="(step, index) in steps" :key="index" class="step-item">
					<!-- 步骤点 -->
					<view class="step-dot" :class="{
              'step-dot-completed': step.status === 'completed',
              'step-dot-pending': step.status === 'pending'
            }">
						<!-- 完成的步骤显示勾选 -->
						<text v-if="step.status === 'completed'">
							<uni-icons type="checkmarkempty" size="18" color="#ffffff"></uni-icons>
						</text>
						<!-- 未完成的步骤显示X -->
						<text v-else>
							<uni-icons type="closeempty" size="18" color="#9ca3af"></uni-icons>
						</text>
					</view>

					<!-- 步骤名称 -->
					<view class="step-name" @click="showTooltip(step.name)">
						{{ step.name }}
					</view>
				</view>
			</view>
		</view>

		<!-- Tooltip 弹出框 -->
		<view v-if="tooltipVisible" class="tooltip-mask" @click="closeTooltip">
			<view class="tooltip" @click.stop>
				<text>{{ tooltipText }}</text>
				<view class="tooltip-close" @click="closeTooltip">×</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'steps',
		components: {
			// 引入uni-icons组件
		},
		props: {
			// 步骤数据，格式: [{name: '步骤1', status: 'completed'}, ...]
			// status可选值: completed(已完成), pending(未完成)
			steps: {
				type: Array,
				default: () => [{
						name: '外观检查',
						status: 'completed'
					},
					{
						name: '性能测试',
						status: 'pending'
					},
					{
						name: '安全检测',
						status: 'pending'
					},
					{
						name: '最终确认',
						status: 'completed'
					}
				]
			}
		},
		data() {
			return {
				tooltipVisible: false, // 控制 Tooltip 显示
				tooltipText: '', // 显示的完整名称
			};
		},
		computed: {
			// 计算总步骤数
			totalCount() {
				return this.steps.length;
			},
			// 计算已完成步骤数
			completedCount() {
				return this.steps.filter(step => step.status === 'completed').length;
			}
		},
		methods: {
			// 显示 Tooltip
			showTooltip(name) {
				this.tooltipText = name;
				this.tooltipVisible = true;
			},
			// 关闭 Tooltip
			closeTooltip() {
				this.tooltipVisible = false;
			}
		}
	};
</script>

<style scoped>
	.inspection-progress-card {
		width: 100%;
		background-color: #ffffff;
		border-radius: 12px;
		padding: 16px;
		margin: 10px 0;
	}

	.card-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.title-text {
		font-size: 16px;
		font-weight: 600;
		color: #333333;
	}

	.progress-text {
		font-size: 14px;
		color: #666666;
	}

	.progress-container {
		width: 100%;
	}

	.steps-wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.step-item {
		width: 30%;
		/* 每行显示3个步骤 */
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 12px;
	}

	.step-dot {
		width: 48px;
		/* 增大宽度 */
		height: 32px;
		/* 增大高度 */
		border-radius: 8px;
		/* 增大圆角 */
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 18px;
		font-weight: 500;
		margin-bottom: 8px;
	}

	/* 已完成步骤样式 */
	.step-dot-completed {
		background-color: #3b82f6;
		color: #ffffff;
	}

	/* 未完成步骤样式 */
	.step-dot-pending {
		background-color: #ffffff;
		color: #9ca3af;
		border: 2px solid #e5e7eb;
	}

	.step-name {
		font-size: 12px;
		color: #666666;
		white-space: normal;
		/* 允许名称换行 */
		word-wrap: break-word;
		/* 强制长单词换行 */
		text-align: center;
		cursor: pointer;
	}

	/* Tooltip 遮罩层 */
	.tooltip-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* Tooltip 样式 */
	.tooltip {
		background-color: rgba(0, 0, 0, 0.7);
		color: #fff;
		padding: 10px 20px;
		border-radius: 8px;
		position: relative;
		z-index: 1010;
	}

	.tooltip-close {
		position: absolute;
		top: 5px;
		right: 5px;
		color: #fff;
		cursor: pointer;
		font-size: 18px;
	}
</style>