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>