ChronicDisease_UniApp/src/components/tab-bar.vue

<template>
  <view class="tab-bar">
    <view class="tab-item" @click="onTabClick(0)">
      <!-- <uni-icons type="home" size="20" color="#666"></uni-icons> -->
       <image src="/static/icons/remixicon/home-3-line.svg" class="icon" mode="widthFix" />
      <text class="tab-text">首页</text>
    </view>
    <view class="tab-item" @click="onTabClick(1)">
      <image src="/static/icons/remixicon/line-chart-line.svg" class="icon" mode="widthFix" />
      <!-- <uni-icons type="bars" size="20" color="#666"></uni-icons> -->
      <text class="tab-text">健康</text>
    </view>
    <view class="tab-item" @click="onTabClick(2)">
      <image src="/static/icons/remixicon/account-circle-line.svg" class="icon" mode="widthFix" />
      <!-- <uni-icons type="person" size="20" color="#666"></uni-icons> -->
      <text class="tab-text">用户</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { isLoggedIn as checkLogin, getRole } from '../composables/useAuth'
const onTabClick = (index: number) => {
  console.log('Tab clicked:', index)

  switch (index) {
    case 0: // 慢病首页
      try {
        const logged = checkLogin()
        const role = logged ? getRole() : null
        if (logged && role === 3) {
          uni.switchTab({ url: '/pages/patient/index/index' })
        } else {
          uni.switchTab({ url: '/pages/public/index/index' })
        }
      } catch (err) {
        console.error('tab click index redirect error', err)
        uni.switchTab({ url: '/pages/public/index/index' })
      }
      break
    case 1: // 健康数据
      try {
        // 本地判断：已登录且 role===3 则跳转到患者端健康页（使用 switchTab，因为该页属于 tab）
        // 未登录或非患者则降级到公共健康页
        // TODO: 后续支持根据其他角色（医生/患者家属等）跳转到各自的健康页
        const logged = checkLogin()
        const role = logged ? getRole() : null
        if (logged && role === 3) {
          uni.switchTab({ url: '/pages/patient/health/index' })
        } else {
          uni.switchTab({ url: '/pages/public/health/index' })
        }
      } catch (err) {
        console.error('tab click health redirect error', err)
        uni.switchTab({ url: '/pages/public/health/index' })
      }
      break
    case 2: // 个人中心
      try {
        const logged = checkLogin()
        const role = logged ? getRole() : null
        if (logged && role === 3) {
          uni.switchTab({ url: '/pages/patient/profile/index' })
        } else {
          uni.switchTab({ url: '/pages/public/profile/index' })
        }
      } catch (err) {
        console.error('tab click profile redirect error', err)
        uni.switchTab({ url: '/pages/public/profile/index' })
      }
      break
  }
}
</script>

<style>
.icon {
  width: 45rpx;
  height: 45rpx;
  display: inline-block;
}
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #ffffffe7;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1rpx solid #eee;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
}

.tab-text {
  font-size: 24rpx;
  color: #666;
}
</style>