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

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

<script setup>
	import {
		ref
	} from 'vue';
	import {
		useRouter
	} from 'vue-router'; // Vue 3 推荐使用 vue-router

	// 响应式数据：当前激活的 Swiper 标签索引
	const currentTab = ref(0);

	// 路由实例
	const router = useRouter(); 
	// 核心数据：计算分组和功能项定义
	const calcGroups = [{
			name: '流量计算',
			color: '#007AFF',
			items: [{
					name: '差压式流量计算',
					icon: 'flow',
					dMeterType:0
				},
				{
					name: '速度式流量计算',
					icon: 'speedometer',					
					dMeterType:1
				},

			]
		},
		{
			name: '参数计算',
			color: '#5AC8FA',
			items: [{
					name: '压缩因子',
					icon: 'compress',
					dMeterType:4
				},
				{
					name: '声速计算',
					icon: 'fire',
					dMeterType:5
				},
				{
					name: '发热量',
					icon: 'volume-high',
					dMeterType:6
				},
				{
					name: '其他参数',
					icon: 'density',					
					dMeterType:7
				}
			]
		}
	];

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

	/**
	 * 导航到具体的计算页面
	 * @param {Object} group 当前点击的分组对象
	 * @param {number} itemIndex 点击项在分组内的索引
	 */
	const navigateToCalc = (item) => {
		const dMeterType = item.dMeterType;

		console.log(`导航到计算页面，dMeterType: ${dMeterType}`);

	// 使用 UniApp 原生导航 API
	  uni.navigateTo({
	    // 注意：路径前要加 '/'，并且 query 参数直接拼接在 URL 后面
	    url: `/pages_caltools/pages/main?dMeterType=${dMeterType}`
	  });
	};
</script>

<style scoped>
	.container {
		padding: 16px;
		background-color: #F5F5F5;
		box-sizing: border-box;
		min-height: 100vh;
		/* 使用 min-height 确保在内容不足时也占满屏幕 */
	}

	.page-header {
		font-size: 18px;
		font-weight: 500;
		color: #333333;
		margin-bottom: 16px;
	}

	.calc-swiper {
		/* 关键：让 swiper 占满剩余空间 */
		width: calc(100vw - 100px);
		;
		height: calc(100vh - 70px);
	}

	/* 确保宫格充满父容器 */
	uni-grid {
		width: 100%;
		height: 100%;
	}

	.grid-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10px 0;
	}

	.grid-icon {
		margin-bottom: 8px;
	}

	.grid-text {
		font-size: 10px;
		color: #333333;
		text-align: center;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>