kd-aiot-frontend-hr-H5/src/components/AppTabBar.vue

<template>
  <view class="tabbar safe-bottom">
    <view v-for="item in items" :key="item.key" class="tab-item press" @click="switchTab(item)">
      <view class="tab-icon" :class="{ active: active === item.key }">
        <text>{{ item.icon }}</text>
        <view v-if="Number(item.badge?.value ?? item.badge)" class="tab-badge">{{ item.badge?.value ?? item.badge }}</view>
      </view>
      <text class="tab-label" :class="{ active: active === item.key }">{{ item.label }}</text>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { fetchPendingApprovalCount } from '@/api/approval'
const props = defineProps({ active: { type: String, default: 'home' } })
// 待办角标：与首页 / 工作台同源，统一走审批中心
const pendingCount = ref(0)
onMounted(async () => {
  try {
    pendingCount.value = await fetchPendingApprovalCount()
  } catch (error) {
    pendingCount.value = 0
  }
})
const items = [
  { key: 'home', label: '首页', icon: '⌂', url: '/pages/home/index' },
  { key: 'work', label: '工作台', icon: '▦', url: '/pages/work/index', badge: pendingCount },
  { key: 'contacts', label: '通讯录', icon: '♙', url: '/pages/contacts/index' },
  { key: 'profile', label: '我的', icon: '○', url: '/pages/profile/index' },
]
function switchTab(item) {
  if (item.key === props.active) return
  uni.reLaunch({ url: item.url })
}
</script>

<style scoped lang="scss">
.tabbar { position: fixed; z-index: 99; left: 0; right: 0; bottom: 0; height: 112rpx; display: flex; background: rgba(255,255,255,.98); border-top: 1rpx solid #e3e5e5; }
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 8rpx; }
.tab-icon { position: relative; height: 46rpx; min-width: 46rpx; display: flex; align-items: center; justify-content: center; color: #908f8f; font-size: 42rpx; font-weight: 500; }
.tab-icon.active { color: #1677ff; }
.tab-label { margin-top: 5rpx; color: #908f8f; font-size: 21rpx; }
.tab-label.active { color: #1677ff; font-weight: 500; }
.tab-badge { position: absolute; top: -6rpx; right: -15rpx; min-width: 28rpx; height: 28rpx; padding: 0 7rpx; border-radius: 16rpx; background: #ee4d4d; color: #fff; font-size: 18rpx; line-height: 28rpx; text-align: center; }
@media (min-width: 800px) { .tabbar { max-width: 520px; left: 50%; transform: translateX(-50%); } }
</style>