YwxAppThink/addon/wxchat/YwxMakeFriends/pages/my/gift.uvue

<template>
	<view class="page">
		<scroll-view direction="vertical" :show-scrollbar="false" style="flex:1;"
			:refresher-enabled="true" :refresher-triggered="refreshing" @refresherrefresh="onRefresh">
			<!-- 汇总卡片 -->
			<view class="summary-card">
				<view class="summary-item">
					<text class="summary-num">{{ totalCount }}</text>
					<text class="summary-label">收到礼物</text>
				</view>
				<view class="summary-divider"></view>
				<view class="summary-item">
					<text class="summary-num">{{ totalValue }}</text>
					<text class="summary-label">礼物价值(金币)</text>
				</view>
			</view>

			<!-- 礼物记录 -->
			<view class="list">
				<view v-for="(item, index) in records" :key="index" class="gift-item">
					<view class="gift-icon">
						<uni-icons type="gift-filled" size="30" color="#FF6B6B"></uni-icons>
					</view>
					<view class="gift-info">
						<text class="gift-name">{{ item.gift_name }} x{{ item.count }}</text>
						<text v-if="item.message.length > 0" class="gift-msg">{{ item.message }}</text>
						<text class="gift-time">{{ formatTime(item.create_at) }}</text>
					</view>
					<view class="gift-value">
						<text class="value-num">+{{ item.total_price }}</text>
						<text class="value-label">金币</text>
					</view>
				</view>

				<view v-if="records.length === 0 && !loading" class="empty-state">
					<uni-icons type="gift" size="60" color="#ddd"></uni-icons>
					<text class="empty-text">还没有收到礼物哦</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="uts">
	import Api from '@/common/api-service.uts'

	type IGiftRecord = {
		id : number
		sender_uid : number
		receiver_uid : number
		gift_id : number
		gift_name : string
		price : number
		count : number
		total_price : number
		message : string
		create_at : number
	}

	const records = reactive<IGiftRecord[]>([])
	const loading = ref<boolean>(false)
	const refreshing = ref<boolean>(false)

	const totalCount = computed<number>(() => {
		let c = 0
		records.forEach((r : IGiftRecord) => { c += r.count })
		return c
	})
	const totalValue = computed<number>(() => {
		let v = 0
		records.forEach((r : IGiftRecord) => { v += r.total_price })
		return v
	})

	function loadData() {
		if (loading.value) return
		loading.value = true
		Api.gift.received({})
			.then((res : UTSJSONObject) => {
				const list = (res as Array<IGiftRecord>) ?? []
				records.splice(0, records.length)
				list.forEach((r : IGiftRecord) => records.push(r))
			})
			.catch(() => {
				uni.showToast({ title: '加载失败', icon: 'none' })
			})
			.finally(() => {
				loading.value = false
				refreshing.value = false
			})
	}

	function onRefresh() {
		refreshing.value = true
		loadData()
	}

	function formatTime(ts : number) : string {
		if (ts <= 0) return ''
		const d = new Date(ts * 1000)
		const m = d.getMonth() + 1
		const day = d.getDate()
		const h = d.getHours()
		const min = d.getMinutes()
		const pad = (n : number) : string => n < 10 ? '0' + n : '' + n
		return `${m}-${pad(day)} ${pad(h)}:${pad(min)}`
	}

	onMounted(() => { loadData() })
	onShow(() => { loadData() })
</script>

<style lang="scss">
	.page {
		flex: 1;
		background-color: #f7f7f7;
	}

	.summary-card {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		margin: 24rpx 30rpx;
		padding: 40rpx 0;
		background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
		border-radius: 20rpx;
	}

	.summary-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.summary-num {
		font-size: 44rpx;
		font-weight: bold;
		color: #fff;
	}

	.summary-label {
		font-size: 24rpx;
		color: #ffe;
		margin-top: 8rpx;
	}

	.summary-divider {
		width: 2rpx;
		height: 60rpx;
		background-color: rgba(255, 255, 255, 0.4);
	}

	.list {
		margin: 0 30rpx;
	}

	.gift-item {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		padding: 24rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 16rpx;
	}

	.gift-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #fff0ec;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.gift-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.gift-name {
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
	}

	.gift-msg {
		font-size: 24rpx;
		color: #999;
		margin-top: 6rpx;
	}

	.gift-time {
		font-size: 22rpx;
		color: #bbb;
		margin-top: 6rpx;
	}

	.gift-value {
		display: flex;
		flex-direction: row;
		align-items: baseline;
	}

	.value-num {
		font-size: 32rpx;
		font-weight: bold;
		color: #FF6B6B;
	}

	.value-label {
		font-size: 22rpx;
		color: #FF6B6B;
		margin-left: 4rpx;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 120rpx 0;
	}

	.empty-text {
		font-size: 28rpx;
		color: #bbb;
		margin-top: 20rpx;
	}
</style>