labsop_scientific_h5/components/FundTabbar.vue

<template>
  <view class="fund-tabbar-placeholder">
    <uv-tabbar
      :value="active"
      @change="onChange"
      :fixed="true"
      :placeholder="true"
      :safeAreaInsetBottom="true"
      activeColor="#1c9bfd"
      inactiveColor="#999"
    >
      <uv-tabbar-item text="报销提醒" icon="info-circle"></uv-tabbar-item>
      <uv-tabbar-item text="经费报销" icon="order"></uv-tabbar-item>
    </uv-tabbar>
  </view>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import { onRouterPush } from '@/utils/router';

const props = defineProps({
  current: {
    type: Number,
    default: 0
  }
});

const active = ref(props.current);

const onChange = (index: number) => {
  if (index === active.value) return;
  
  if (index === 0) {
    onRouterPush('/pages/fund/reimbursement-remind/index');
  } else {
    onRouterPush('/pages/fund/reimbursement/index');
  }
};

onMounted(() => {
  active.value = props.current;
});

watch(() => props.current, (val) => {
  active.value = val;
});
</script>

<style lang="scss" scoped>
/* UV-Tabbar placeholder handles spacing */
</style>