e87a064156
1. 类型定义： - 完善 SurveyItem 类型定义，添加所有必要字段 - 优化类型注解，增强代码可维护性 - 更新 components.d.ts 类型声明文件 2. 组件重构： - 将 SuvreyItem 组件变量名从 item 统一修改为 survey - 添加类型标注，提高代码健壮性 - 修复模板中的变量引用 - 优化 MarketItem、Navigation 和 Search 组件 3. 功能优化： - 将删除和保存模板功能从 Index.vue 移至 useSurveyData.ts 钩子中 - 优化函数导出，提高代码复用性 - 改进 Home 组件与问卷模块的交互逻辑 4. 样式优化： - 精简 SCSS 代码，移除冗余样式和注释 - 将样式从 Index.vue 移至 SuvreyItem.vue 组件内部 - 优化样式结构，提高可维护性 5. 资源添加： - 新增 tabbar 图标资源，统一底部导航栏样式
88 lines
1.8 KiB
Vue
88 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
|
|
const navigation = ref([
|
|
{
|
|
title: '主页',
|
|
link: {
|
|
name: 'home',
|
|
path: '/home'
|
|
},
|
|
icon: '/tabbar/home.png'
|
|
},
|
|
{
|
|
title: '伊调研',
|
|
link: {
|
|
name: 'home',
|
|
path: '/home'
|
|
},
|
|
icon: '/tabbar/yl.png'
|
|
},
|
|
{
|
|
title: '我的',
|
|
link: {
|
|
name: '',
|
|
path: '/survey'
|
|
},
|
|
icon: '/tabbar/mine.png'
|
|
}
|
|
]);
|
|
// 当前的 nav
|
|
const currentNav = navigation.value.find((item) => item.link.path === route.fullPath);
|
|
const activeTab = ref(currentNav?.title);
|
|
|
|
/**
|
|
* Handle changing of navigation
|
|
* @param {object} nav - the navigation item selected
|
|
*/
|
|
function handleChangeNav(title: string) {
|
|
const nav = navigation.value.find((item) => item.title === title);
|
|
const params: { [key: string]: string } = {};
|
|
// 如果有 name 表示，优先取 name 参数
|
|
nav && nav.link.name.length !== 0
|
|
? (params.name = nav.link.name as string)
|
|
: (params.path = nav?.link.path as string);
|
|
router.push(params);
|
|
}
|
|
|
|
watch(activeTab, (value: string) => {
|
|
handleChangeNav(value);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="navigation">
|
|
<van-tabbar v-model="activeTab">
|
|
<van-tabbar-item v-for="item in navigation" :key="item.title" :name="item.title">
|
|
<template #icon>
|
|
<img :src="item.icon" />
|
|
</template>
|
|
{{ item.title }}
|
|
</van-tabbar-item>
|
|
</van-tabbar>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.navigation {
|
|
width: 100vw;
|
|
background-color: white;
|
|
display: flex;
|
|
flex-flow: row;
|
|
justify-content: space-around;
|
|
position: fixed;
|
|
bottom: 0px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.navigation-item {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
align-items: center;
|
|
}
|
|
</style>
|