EmailBill/Web/src/views/BalanceView.vue

<template>
  <div class="page-container-flex">
  
    <!-- 顶部导航栏 -->
    <van-nav-bar title="账单" placeholder>
      <template #right>
        <van-button 
          v-if="tabActive === 'email'"
          size="small" 
          type="primary" 
          :loading="syncing"
          @click="emailRecordRef.handleSync()"
        >
          立即同步
        </van-button>
        <van-icon 
            v-if="tabActive === 'message'"
            name="passed" 
            size="20" 
            @click="messageViewRef?.handleMarkAllRead()" 
        />
      </template>
    </van-nav-bar>
    <van-tabs v-model:active="tabActive" type="card" style="margin: 12px 0 2px 0;">
      <van-tab title="账单" name="balance" />
      <van-tab title="邮件" name="email" />
      <van-tab title="消息" name="message" />
    </van-tabs>

    <TransactionsRecord v-if="tabActive === 'balance'" ref="transactionsRecordRef"/>
    <EmailRecord v-else-if="tabActive === 'email'" ref="emailRecordRef" />
    <MessageView v-else-if="tabActive === 'message'" ref="messageViewRef" :is-component="true" />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import TransactionsRecord from './TransactionsRecord.vue';
import EmailRecord from './EmailRecord.vue';
import MessageView from './MessageView.vue';

const route = useRoute();
const tabActive = ref(route.query.tab || 'balance');

// 监听路由参数变化，用于从 tabbar 点击时切换 tab
watch(() => route.query.tab, (newTab) => {
  if (newTab) {
    tabActive.value = newTab;
  }
});

const transactionsRecordRef = ref(null);
const emailRecordRef = ref(null);
const messageViewRef = ref(null);
</script>

<style scoped>
:deep(.van-pull-refresh) {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 设置页面容器背景色 */
:deep(.van-nav-bar) {
  background: transparent !important;
}
</style>