THJ_Mobile/src/packages/mobile/views/bank/statement/index.vue

<template>
    <app-view class="credit-statement">
        <template #header>
            <app-navbar title="资金流水">
                <template #right>
                    <Button round @click="routerTo('bank-hisstatement')">更多</Button>
                </template>
            </app-navbar>
        </template>
        <app-pull-refresh class="credit-statement__container" v-model:pageIndex="pageIndex" :page-count="pageCount"
            :updateList="dataList" @refresh="onRefresh" @updated="onRefreshUpdated">
            <template #header>
                <ul class="list list-row" v-if="showHeader">
                    <li class="list-column">
                        <span>时间</span>
                    </li>
                    <li class="list-column">
                        <span>操作类型</span>
                    </li>
                    <li class="list-column">
                        <span>金额</span>
                    </li>
                </ul>
            </template>
            <template #default="{ item }">
                <ul class="list list-row">
                    <li class="list-column">
                        <span>{{ formatDate(item.createtime, 'YYYY-MM-DD') }}</span>
                        <span>{{ formatDate(item.createtime, 'HH:mm:ss') }}</span>
                    </li>
                    <li class="list-column">{{ getAccountBusinessCodeName(item.businesscode) }}</li>
                    <li class="list-column">{{ item.amount }}</li>
                </ul>
            </template>
        </app-pull-refresh>
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import { formatDate } from '@/filters'
import { getAccountBusinessCodeName } from '@/constants/bank'
import { useAmountStatementList } from '@/business/bank'
import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
import { useNavigation } from '@/hooks/navigation'
import { Button } from 'vant'

const { dataList, pageIndex, pageCount, getAccouuntInOutApplyList } = useAmountStatementList()
const showHeader = shallowRef(false)
const { routerTo } = useNavigation()

const onRefresh = (callback: () => void) => {
    getAccouuntInOutApplyList().finally(() => callback())
}

const onRefreshUpdated = (data: Model.UserScoreLogRsp[]) => {
    showHeader.value = data.length > 0
}
</script>

<style lang="less">
.credit-statement {
    &__container {
        height: 100%;
        overflow-y: auto;

        .list {
            display: flex;
            align-items: center;
            background-color: #fff;

            &-row {
                font-size: .32rem;
                border-bottom: 1px solid #eee;
                padding: .12rem .32rem;
            }

            &-column {
                flex: 1;
                display: flex;
                flex-direction: column;
                text-align: center;

                &:first-child {
                    text-align: left;
                }

                &:last-child {
                    text-align: right;
                }

                span:last-child {
                    color: #999;
                    font-size: .24rem;
                }
            }
        }
    }
}
</style>