book-hi/pages-mine/pages/partner/income-detail.vue

<template>
    <view class="income-detail">
        <page-scroll
            ref="pageScroll"
            url="/token/userPartner/incomeList"
            :immediate="true"
            :slot-empty="true"
            @updateList="handleUpdateList"
        >
            <view class="income-list">
                <view class="income-item" v-for="(item, index) in mockData" :key="index">
                    <view class="item-left">
                        <view class="income-title">{{ item.title }}</view>
                        <view class="income-time">{{ item.createTime }}</view>
                    </view>
                    <view class="income-amount">+{{ item.changeMoney }}</view>
                </view>
            </view>
        </page-scroll>
    </view>
</template>

<script>
import pageScroll from '@/components/pageScroll/index.vue'
export default {
    components: {
        pageScroll
    },
    data() {
        return {
            mockData: [],
        };
    },
    // #ifdef MP-ALIPAY
    onPullDownRefresh() {
        this.$refs.pageRef?.loadData(true)
    },
    // #endif

    methods: {
        handleUpdateList(data) {
            this.mockData = data;
        },
    },
};
</script>

<style lang="scss" scoped>
.income-detail {
    min-height: 100vh;
    background-color: #f5f5f5;
}

.income-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 30rpx 40rpx;
    margin-bottom: 2rpx;

    .item-left {
        .income-title {
            font-size: 32rpx;
            color: #333;
            margin-bottom: 10rpx;
        }

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

    .income-amount {
        font-size: 32rpx;
        color: #ff5555;
        font-weight: 500;
    }
}
</style>