163 lines
3.4 KiB
Vue
163 lines
3.4 KiB
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
|
||
} from 'vue';
|
||
|
||
// 响应式数据：当前激活的 Swiper 标签索引
|
||
const currentTab = ref(0);
|
||
|
||
// 核心数据：计算分组和功能项定义
|
||
const calcGroups = [{
|
||
name: '流量计算',
|
||
color: '#007AFF',
|
||
items: [{
|
||
name: '差压式流量计算',
|
||
icon: 'smallcircle',
|
||
dMeterType: 0
|
||
},
|
||
{
|
||
name: '速度式流量计算',
|
||
icon: 'paperplane',
|
||
dMeterType: 1
|
||
},
|
||
]
|
||
},
|
||
{
|
||
name: '参数计算',
|
||
color: '#5AC8FA',
|
||
items: [{
|
||
name: '压缩因子',
|
||
icon: 'pyq',
|
||
dMeterType: 4
|
||
},
|
||
{
|
||
name: '声速计算',
|
||
icon: 'sound',
|
||
dMeterType: 5
|
||
},
|
||
{
|
||
name: '发热量',
|
||
icon: 'fire',
|
||
dMeterType: 6
|
||
},
|
||
{
|
||
name: '其他参数',
|
||
icon: 'more',
|
||
dMeterType: 7
|
||
}
|
||
]
|
||
}
|
||
];
|
||
|
||
/**
|
||
* 处理 Swiper 滑动切换事件
|
||
* @param {Object} e 事件对象
|
||
*/
|
||
const handleSwiperChange = (e) => {
|
||
currentTab.value = e.detail.current;
|
||
};
|
||
|
||
/**
|
||
* 导航到具体的计算页面
|
||
* @param {Object} item 点击的项
|
||
*/
|
||
const navigateToCalc = (item) => {
|
||
const dMeterType = item.dMeterType;
|
||
console.log(`导航到计算页面，dMeterType: ${dMeterType}`);
|
||
|
||
// 使用 UniApp 原生导航 API
|
||
uni.navigateTo({
|
||
url: `/pages_caltools/pages/main?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> |