property-resident-side/property-uniapp-project/pageSubPack/my/myPointsOrder.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="order-list">
				<view class="order-card" v-for="(item, index) in list" :key="index" @click="onOrderClick(item)">
					<view class="order-header">
						<text class="order-product">{{ item.productName }}</text>
						<text class="order-status" :class="getStatusClass(item.status)">
							{{ getStatusText(item.status) }}
						</text>
					</view>
					<view class="order-body">
						<view class="order-row">
							<text class="order-label">兑换积分</text>
							<text class="order-points">{{ item.points }}积分</text>
						</view>
						<view class="order-row">
							<text class="order-label">兑换时间</text>
							<text class="order-time">{{ item.createTime }}</text>
						</view>
					</view>
				</view>
			</view>
		</pull-refresh-scroll>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { getPointsOrderList } 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 getPointsOrderList({
				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 onOrderClick = (item) => {
		uni.showToast({ title: `订单号：${item.orderNo || item.id}`, icon: 'none' })
	}

	const getStatusText = (status) => {
		const map = { '0': '待处理', '1': '已发货', '2': '已完成', '3': '已取消' }
		return map[status] || '未知'
	}

	const getStatusClass = (status) => {
		const map = { '0': 'status-pending', '1': 'status-shipped', '2': 'status-done', '3': 'status-cancel' }
		return map[status] || ''
	}

	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;
	}

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

	.order-card {
		background: #fff;
		border-radius: 12rpx;
		padding: 28rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.order-product {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.order-status {
		font-size: 26rpx;
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
		flex-shrink: 0;
	}

	.status-pending {
		color: #fa8c16;
		background: #fff7e6;
	}

	.status-shipped {
		color: #1677ff;
		background: #e6f4ff;
	}

	.status-done {
		color: #07c160;
		background: #e6f9f0;
	}

	.status-cancel {
		color: #999;
		background: #f5f5f5;
	}

	.order-body {
		padding-top: 20rpx;
	}

	.order-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12rpx;
	}

	.order-row:last-child {
		margin-bottom: 0;
	}

	.order-label {
		font-size: 26rpx;
		color: #999;
	}

	.order-points {
		font-size: 28rpx;
		color: #ff6b35;
		font-weight: 500;
	}

	.order-time {
		font-size: 26rpx;
		color: #666;
	}
</style>