property-resident-side/property-uniapp-project/pageSubPack/my/myPointsRecord.vue

<template>
	<view class="contentStyle">
	<!-- 	<view class="status-bar"></view>
		<uni-nav-bar title="积分明细" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
		</uni-nav-bar> -->

		<pull-refresh-scroll
			custom-class="page"
			:refreshing="isRefreshing"
			:loading-more="loading"
			:no-more-data="noMoreData"
			:empty="list.length === 0"
			empty-text="暂无积分记录"
			@refresh="onRefresh"
			@loadMore="loadMore"
		>
			<view class="record-list">
				<view class="record-card" v-for="(item, index) in list" :key="index">
					<view class="record-left">
						<text class="record-title">{{ item.title }}</text>
						<text class="record-time">{{ item.createTime }}</text>
					</view>
					<view class="record-right">
						<text class="record-points" :class="item.type === 'income' ? 'income' : 'expense'">
							{{ item.type === 'income' ? '+' : '-' }}{{ item.points }}
						</text>
						<text class="record-balance">余额：{{ item.balance }}</text>
					</view>
				</view>
			</view>
		</pull-refresh-scroll>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { getPointsRecordList } from '/pageSubPack/api/apiSub.js'
	import PullRefreshScroll from '/components/pull-refresh-scroll/pull-refresh-scroll.vue'

	const list = ref([])
	const pageNum = ref(1)
	const pageSize = ref(10)
	const noMoreData = ref(false)
	const loading = ref(false)
	const isRefreshing = ref(false)

	const getList = async () => {
		if (loading.value) return
		loading.value = true
		try {
			const res = await getPointsRecordList({
				pageNum: pageNum.value,
				pageSize: pageSize.value
			})
			const newList = res.rows || res.data || []
			if (pageNum.value === 1) {
				list.value = newList
			} else {
				list.value = [...list.value, ...newList]
			}
			if (newList.length < pageSize.value) {
				noMoreData.value = true
			}
		} catch (err) {
			uni.showToast({ title: '加载失败', icon: 'none' })
			console.error('积分明细接口报错：', err)
		} finally {
			loading.value = false
			if (isRefreshing.value) isRefreshing.value = false
		}
	}

	const onRefresh = () => {
		isRefreshing.value = true
		pageNum.value = 1
		noMoreData.value = false
		loading.value = false
		getList()
	}

	const loadMore = () => {
		if (loading.value || noMoreData.value) return
		pageNum.value++
		getList()
	}

	const goBack = () => {
		uni.navigateBack({ delta: 1 })
	}

	onMounted(() => {
		getList()
	})
</script>

<style lang="scss">
	page {
		background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
	}
</style>

<style lang="scss" scoped>
	.contentStyle {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f7fa;
	}

	.status-bar {
		width: 100vw;
		height: 46px;
	}

	.page {
		flex: 1;
		overflow-y: auto;
		padding: 0 40rpx;
		box-sizing: border-box;
		background: #fff;
		margin: 0 40rpx;
		border-radius: 12rpx 12rpx 0 0;
	}

	.record-list {
		padding: 20rpx 0;
	}

	.record-card {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 28rpx 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
		background: #fff;
	}

	.record-card:last-child {
		border-bottom: none;
	}

	.record-left {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
	}

	.record-title {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.record-time {
		font-size: 24rpx;
		color: #999;
		margin-top: 8rpx;
	}

	.record-right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		flex-shrink: 0;
		margin-left: 20rpx;
	}

	.record-points {
		font-size: 32rpx;
		font-weight: 600;
	}

	.record-points.income {
		color: #07c160;
	}

	.record-points.expense {
		color: #333;
	}

	.record-balance {
		font-size: 22rpx;
		color: #999;
		margin-top: 4rpx;
	}
</style>