ruoyi-geek-App/pages_caltools/pages/index.vue

<template>
	<view class="container">
		<!-- Swiper 组件，用于在不同计算分组间滑动 -->
		<swiper class="calc-swiper" :current="currentTab" @change="handleSwiperChange" :indicator-dots="true"
			indicator-color="#BBBBBB" indicator-active-color="#007AFF">
			<!-- 遍历分组数据，动态生成 swiper-item -->
			<swiper-item v-for="(group, groupIndex) in calcGroups" :key="groupIndex">
				<scroll-view scroll-y="true" class="scroll-content">
					<view class="page-header">{{group.name}}</view>
					<uni-grid :column="3" :show-border="true" :border="true" border-color="#EEEEEE" class="custom-grid">
						<!-- 遍历每个分组下的功能项，动态生成宫格 -->
						<uni-grid-item v-for="(item, itemIndex) in group.items" :key="itemIndex"
							@click="navigateToCalc(item)" class="grid-item">
							<view class="grid-content">
								<view class="grid-icon">
									<uni-icons :type="item.icon" size="32" :color="group.color"></uni-icons>
								</view>
								<text class="grid-text">{{ item.name }}</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onBeforeMount,
		watch
	} from 'vue';
	import {
		extractModuleData
	} from '@/utils/moudlesData.ts';
	// 响应式数据：当前激活的 Swiper 标签索引
	const currentTab = ref(0);

	// 核心数据：计算分组和功能项定义
	const calcGroups = ref([]);

	onMounted(() => {
		calcGroups.value = extractModuleData(['流量计算', '参数计算'], false)
		console.log(calcGroups.value);
	})

	/**
	 * 处理 Swiper 滑动切换事件
	 * @param {Object} e 事件对象
	 */
	const handleSwiperChange = (e) => {
		currentTab.value = e.detail.current;
	};

	/**
	 * 导航到具体的计算页面
	 * @param {Object} item 点击的项
	 */
	const navigateToCalc = (item) => {
		const dMeterType = item.params;
		// 使用 UniApp 原生导航 API
		uni.navigateTo({
			url: item.path + `?dMeterType=${dMeterType}`
		});
	};
</script>

<style scoped>
	.container {
		padding: 16rpx;
		background-color: #F5F5F5;
		box-sizing: border-box;
		min-height: 100vh;
	}

	.page-header {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
		margin: 30rpx 0;
		text-align: center;
	}

	.calc-swiper {
		width: 100vw;
		height: 800rpx;
	}

	.scroll-content {
		height: 100%;
		width: 100%;
	}

	::v-deep .custom-grid {
		width: 100%;
		height: auto;
	}

	.grid-item {
		height: 200rpx;
	}

	.grid-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		padding: 20rpx;
	}

	.grid-icon {
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80rpx;
		height: 80rpx;
	}

	.grid-text {
		font-size: 24rpx;
		color: #333333;
		text-align: center;
		line-height: 1.4;
		/* 允许文字换行 */
		word-break: break-all;
	}
</style>