book-hi/pages-mine/pages/withdraw-detail.vue

<template>
    <view class="withdraw-detail">
        <!-- 列表区域 -->
        <scroll-view scroll-y class="detail-list" @scrolltolower="loadMore" refresher-enabled
            :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
            <view class="detail-item" v-for="(item, index) in detailList" :key="index">
                <view class="item-left">
                    <text class="title">{{ item.title }}</text>
                    <text class="time">{{ item.time }}</text>
                </view>
                <view class="item-right">
                    <text class="amount">-{{ item.amount.toFixed(2) }}</text>
                    <text class="status">{{ item.status }}</text>
                </view>
            </view>

            <!-- 加载更多 -->
            <view class="load-more" v-if="detailList.length > 0">
                <text v-if="hasMore">加载更多</text>
                <text v-else>我是有底线哒</text>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            page: 1,
            pageSize: 10,
            isRefreshing: false,
            hasMore: true,
            detailList: [
                {
                    title: '微信提现',
                    time: '2021.2.25 10:48:32',
                    amount: 36.00,
                    status: '提现中'
                },
                {
                    title: '微信提现',
                    time: '2021.2.25 10:48:32',
                    amount: 36.00,
                    status: '提现完成'
                },
                {
                    title: '微信提现',
                    time: '2021.2.25 10:48:32',
                    amount: 36.00,
                    status: '提现完成'
                },
                {
                    title: '微信提现',
                    time: '2021.2.25 10:48:32',
                    amount: 36.00,
                    status: '提现完成'
                }
            ]
        }
    },
    onLoad() {
        this.loadData()
    },
    methods: {
        // 加载数据
        async loadData() {
            // 实际开发时替换为接口调用
            setTimeout(() => {
                // 模拟数据加载
                this.hasMore = this.page < 3
                this.isRefreshing = false
            }, 500)
        },

        // 下拉刷新
        onRefresh() {
            this.isRefreshing = true
            this.page = 1
            this.loadData()
        },

        // 加载更多
        loadMore() {
            if (!this.hasMore) return
            this.page++
            this.loadData()
        }
    }
}
</script>

<style lang="scss" scoped>
.withdraw-detail {
    min-height: 100vh;
    background: #F5F5F5;
    padding: 20rpx;

    .detail-list {
        height: 100vh;

        .detail-item {
            background: #FFFFFF;
            border-radius: 12rpx;
            padding: 30rpx;
            margin-bottom: 20rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .item-left {
                .title {
                    font-size: 28rpx;
                    color: #333;
                    display: block;
                    margin-bottom: 10rpx;
                }

                .time {
                    font-size: 24rpx;
                    color: #999;
                }
            }

            .item-right {
                text-align: right;

                .amount {
                    font-size: 32rpx;
                    color: #38C148;
                    font-weight: 500;
                    display: block;
                    margin-bottom: 10rpx;
                }

                .status {
                    font-size: 24rpx;
                    color: #999;
                }
            }
        }
    }

    .load-more {
        text-align: center;
        color: #999;
        font-size: 24rpx;
        padding: 30rpx 0;

        &::before,
        &::after {
            content: '';
            display: inline-block;
            width: 100rpx;
            height: 1px;
            background: #EEEEEE;
            vertical-align: middle;
            margin: 0 20rpx;
        }
    }
}
</style>