Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
manulife-weapp
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Graphs
Network
Create a new issue
Commits
Issue Boards
Authored by
hookehuyr
2026-01-30 21:04:06 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
2e29a1c118ef8cbe10f7d7cfaff417b54571431e
2e29a1c1
1 parent
99ff6968
refactor(TabBar): 格式化模板代码并调整注释结构
将模板中的长属性拆分为多行以提升可读性 调整 handleTabClick 函数内的注释格式,使其更清晰
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
47 additions
and
56 deletions
src/components/TabBar.vue
src/components/TabBar.vue
View file @
2e29a1c
<!--
* @Date: 2026-01-29 20:33:23
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-30 2
0:13:36
* @LastEditTime: 2026-01-30 2
1:03:18
* @FilePath: /manulife-weapp/src/components/TabBar.vue
* @Description: 通用底部导航栏组件,用于页面底部固定导航栏,展示页面标题。
-->
<template>
<view class="fixed bottom-0 left-0 w-full bg-white shadow-[0_-4rpx_16rpx_rgba(0,0,0,0.05)] pb-[env(safe-area-inset-bottom)] z-50">
<view
class="fixed bottom-0 left-0 w-full bg-white shadow-[0_-4rpx_16rpx_rgba(0,0,0,0.05)] pb-[env(safe-area-inset-bottom)] z-50">
<view class="flex items-center justify-around py-[32rpx]">
<view
class="flex-1 flex flex-col items-center justify-center"
v-for="(item, index) in tabs"
:key="index"
@tap="handleTabClick(item)"
>
<IconFont
:name="item.icon"
:class="[current === item.key ? 'text-blue-600' : 'text-gray-400']"
size="24"
/>
<text
class="text-[20rpx] mt-[8rpx]"
:class="[current === item.key ? 'text-blue-600' : 'text-gray-400']"
>{{ item.label }}</text>
<view class="flex-1 flex flex-col items-center justify-center" v-for="(item, index) in tabs" :key="index"
@tap="handleTabClick(item)">
<IconFont :name="item.icon" :class="[current === item.key ? 'text-blue-600' : 'text-gray-400']" size="24" />
<text class="text-[20rpx] mt-[8rpx]" :class="[current === item.key ? 'text-blue-600' : 'text-gray-400']">{{
item.label }}</text>
</view>
</view>
</view>
...
...
@@ -70,50 +61,50 @@ const handleTabClick = (item) => {
if (item.key === 'home') {
go(item.path)
} else if (item.key === 'me') {
// Check if 'me' page exists, otherwise show toast or just go
// For now, assuming me page might not exist or we just navigate
// go(item.path)
// Based on existing logic in index.vue:
// Taro.redirectTo({ url: '/pages/me/index' });
// But wait, standard tab bar usually uses switchTab or redirectTo.
// Since this is a custom tab bar, we use useGo (which uses navigateTo usually).
// Ideally for tab switching we might want reLaunch or redirectTo to avoid stack buildup.
// However, useGo defaults to navigateTo.
// Let's use reLaunch to simulate tab switching behavior if it's a "tab bar"
// Check if 'me' page exists, otherwise show toast or just go
// For now, assuming me page might not exist or we just navigate
// go(item.path)
// Based on existing logic in index.vue:
// Taro.redirectTo({ url: '/pages/me/index' });
// But wait, standard tab bar usually uses switchTab or redirectTo.
// Since this is a custom tab bar, we use useGo (which uses navigateTo usually).
// Ideally for tab switching we might want reLaunch or redirectTo to avoid stack buildup.
// However, useGo defaults to navigateTo.
// Let's use reLaunch to simulate tab switching behavior if it's a "tab bar"
// Actually, let's look at index.vue logic:
// if (item.key === 'me') Taro.redirectTo({ url: '/pages/me/index' });
// if (item.key === 'ai') Taro.showToast({ title: '功能开发中', icon: 'none' });
// Actually, let's look at index.vue logic:
// if (item.key === 'me') Taro.redirectTo({ url: '/pages/me/index' });
// if (item.key === 'ai') Taro.showToast({ title: '功能开发中', icon: 'none' });
// I will replicate this logic for now but make it more generic if possible.
// Since 'me' and 'ai' might not be fully implemented, I will stick to what I know.
// But 'onboarding' and 'signing' pages use this tab bar too.
// I will replicate this logic for now but make it more generic if possible.
// Since 'me' and 'ai' might not be fully implemented, I will stick to what I know.
// But 'onboarding' and 'signing' pages use this tab bar too.
// If we are on 'onboarding' (which is seemingly a sub-page but has a tab bar),
// clicking 'Home' should probably go back to Home.
// If we are on 'onboarding' (which is seemingly a sub-page but has a tab bar),
// clicking 'Home' should probably go back to Home.
Taro.reLaunch({ url: item.path })
Taro.reLaunch({ url: item.path })
} else if (item.key === 'ai') {
// 跳转到腾讯元宝AI小程序
Taro.navigateToMiniProgram({
appId: 'wxXXXXXXXXXXXXXXXX', // TODO: 替换为实际的腾讯元宝小程序 AppID
path: 'pages/index/index', // TODO: 元宝小程序的路径(根据实际情况填写)
extraData: {
// TODO: 如果需要传递参数,在这里配置
// from: 'manulife-weapp'
},
envVersion: 'release', // 打开正式版
success: (res) => {
console.log('跳转元宝小程序成功', res)
},
fail: (err) => {
console.error('跳转元宝小程序失败', err)
Taro.showToast({
title: '跳转失败,请稍后重试',
icon: 'none'
})
}
})
// 跳转到腾讯元宝AI小程序
Taro.navigateToMiniProgram({
appId: 'wxXXXXXXXXXXXXXXXX', // TODO: 替换为实际的腾讯元宝小程序 AppID
path: 'pages/index/index', // TODO: 元宝小程序的路径(根据实际情况填写)
extraData: {
// TODO: 如果需要传递参数,在这里配置
// from: 'manulife-weapp'
},
envVersion: 'release', // 打开正式版
success: (res) => {
console.log('跳转元宝小程序成功', res)
},
fail: (err) => {
console.error('跳转元宝小程序失败', err)
Taro.showToast({
title: '跳转失败,请稍后重试',
icon: 'none'
})
}
})
}
}
</script>
...
...
Please
register
or
login
to post a comment