159 lines
3.5 KiB
Vue
159 lines
3.5 KiB
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> |