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>