49 lines
1.2 KiB
Vue
49 lines
1.2 KiB
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>
|
|||
|
|
</template>
|
|||
|
|
</van-nav-bar>
|
|||
|
|
<van-tabs v-model:active="tabActive" animated>
|
|||
|
|
<van-tab title="账单记录" name="balance" />
|
|||
|
|
<van-tab title="邮件记录" name="email" />
|
|||
|
|
</van-tabs>
|
|||
|
|
|
|||
|
|
<TransactionsRecord v-if="tabActive === 'balance'" ref="transactionsRecordRef"/>
|
|||
|
|
<EmailRecord v-else-if="tabActive === 'email'" ref="emailRecordRef" />
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref } from 'vue';
|
|||
|
|
import TransactionsRecord from './TransactionsRecord.vue';
|
|||
|
|
import EmailRecord from './EmailRecord.vue';
|
|||
|
|
const tabActive = ref('balance');
|
|||
|
|
|
|||
|
|
const transactionsRecordRef = ref(null);
|
|||
|
|
const emailRecordRef = 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>
|