131 lines
2.9 KiB
Vue
131 lines
2.9 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,
|
||
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> |