mall-app-t/pages/user/point/loglist.vue

<template>
    <pb-layout
        navbar="inner"
        iconColor="#fff"
        class="loglist-point-wrap"
        leftIcon="leftIcon"
        color="#fff"
        title="历史积分"
        :bgStyle="bgStyle"
    >
        <view>
            <p-empty
                v-if="state.pagination.total === 0"
                icon="/static/order-empty.png"
                text="暂无记录"
                bgColor="transparent"
            />

            <view v-if="state.pagination.total > 0">
                <view v-for="item in state.pagination.list" class="log-point-item ss-font-26">
                    <view class="top ss-flex ss-row-between ss-m-b-20">
                        <view class="label">积分</view>
                        <view class="date">{{ item.date }}</view>
                    </view>
                    <view class="bottom ss-flex ss-row-between">
                        <view class="last">{{ item.last }}</view>
                        <view class="change">{{ item.income }}</view>
                    </view>
                </view>
            </view>
        </view>

        <uni-load-more
            v-if="state.pagination.total > 0"
            :status="state.loadStatus"
            :content-text="{ contentdown: '上拉加载更多' }"
        />
    </pb-layout>
</template>

<script setup>
import { ref } from 'vue'
import { resetPagination } from '@/peach/utils'
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import PointApi from '@/peach/api/pay/point'

const bgStyle = {
    backgroundImage: '/static/point.png',
    imageType: 'local',
    backgroundColor: '#fff',
    height: '100%',
}

const state = ref({
    currentTab: 0,
    pagination: {
        list: [
            {
                last: 50000,
                date: '2022-05-30',
                income: '+1000',
            },
            {
                last: 50000,
                date: '2022-05-30',
                income: '-1000',
            },
        ],
        total: 2,
        pageNo: 1,
        pageSize: 6,
    },
    loadStatus: '',
})

async function getLogList() {
    let { data } = await PointApi.getPointList({
        pageNo: state.value.pagination.pageNo,
        pageSize: state.value.pagination.pageSize,
    })
    state.value.total = data.total
    state.value.list = data.list
}

// 加载更多
function loadMore() {
    if (state.value.loadStatus === 'noMore') {
        return
    }
    state.value.pagination.pageNo++
    getLogList()
}

// 上拉加载更多
onReachBottom(() => {
    loadMore()
})

// 下拉刷新
onPullDownRefresh(() => {
    resetPagination(state.value.pagination)
    getLogList()
    setTimeout(function () {
        uni.stopPullDownRefresh()
    }, 800)
})
</script>

<style lang="scss" scoped>
.loglist-point-wrap {
    .log-point-item {
        border-bottom: 1px solid rgba(231, 180, 147, 0.2);
        margin: 30rpx 40rpx;
        padding-bottom: 30rpx;

        .top,
        .bottom {
            color: #e7b493;
        }
    }

    .log-point-item:last-child {
        border-bottom: none;
    }
}
</style>