property-resident-side/property-uniapp-project/pageSubPack/my/myPointsMall.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="mall-list">
				<view class="mall-card" v-for="(item, index) in list" :key="index" @click="onProductClick(item)">
					<image :src="item.image || defaultImg" class="product-img" mode="aspectFill" />
					<view class="product-info">
						<text class="product-name">{{ item.name }}</text>
						<text class="product-desc">{{ item.description || '' }}</text>
						<view class="product-bottom">
							<view class="product-points">
								<text class="points-value">{{ item.points }}</text>
								<text class="points-unit">积分</text>
							</view>
							<view class="exchange-btn">立即兑换</view>
						</view>
					</view>
				</view>
			</view>
		</pull-refresh-scroll>
	</view>
</template>

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

	const defaultImg = 'https://wuye.ckdzkj.com/images/propertyImgs/points.png'

	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 getPointsMallList({
				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 onProductClick = (item) => {
		uni.showModal({
			title: '确认兑换',
			content: `确定使用 ${item.points} 积分兑换「${item.name}」吗？`,
			success: async (modalRes) => {
				if (!modalRes.confirm) return
				try {
					uni.showLoading({ title: '兑换中...', mask: true })
					const res = await postPointsExchange({ productId: item.id || item.productId })
					uni.hideLoading()
					if (res.code === 200) {
						uni.showToast({ title: '兑换成功', icon: 'success' })
					} else {
						uni.showToast({ title: res.msg || '兑换失败', icon: 'none' })
					}
				} catch (err) {
					uni.hideLoading()
					uni.showToast({ title: err.msg || '兑换失败', icon: 'none' })
				}
			}
		})
	}

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

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

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

	.product-img {
		width: 180rpx;
		height: 180rpx;
		border-radius: 12rpx;
		flex-shrink: 0;
		background: #f5f5f5;
	}

	.product-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 20rpx;
		overflow: hidden;
	}

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

	.product-desc {
		font-size: 24rpx;
		color: #999;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 4rpx;
	}

	.product-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.product-points {
		display: flex;
		align-items: baseline;
	}

	.points-value {
		font-size: 36rpx;
		font-weight: 700;
		color: #ff6b35;
	}

	.points-unit {
		font-size: 24rpx;
		color: #ff6b35;
		margin-left: 4rpx;
	}

	.exchange-btn {
		padding: 10rpx 28rpx;
		background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
		color: #fff;
		font-size: 24rpx;
		border-radius: 30rpx;
		font-weight: 500;
	}

	.exchange-btn:active {
		opacity: 0.8;
	}
</style>