recycle-front/pages/subcomponent/promotion-profit-detail.vue

<template>
	<view class="profit-detail-container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="back" @tap="goBack">
				<uni-icons type="left" size="20"></uni-icons>
			</view>
			<text class="title">收益明细</text>
		</view>
		<view class="main-content">
			<view class="profit-list-card">
				<view class="profit-item" v-for="(item, idx) in profits" :key="idx">
					<image class="avatar" :src="item.avatar" mode="aspectFill" />
					<view class="profit-info">
						<view class="profit-name-date">
							<view class="profit-name">{{ item.name }}</view>
							<view class="profit-date">{{ item.date }}</view>
						</view>
						<!-- 添加2小时后到账状态 -->
						<view class="status" v-if="item.state == 0">
							<text class="status-text">48小时后到账</text>
						</view>
					</view>
					<view class="profit-type">{{ item.type }}</view>
					<text class="profit-amount">+¥{{ item.amount }}</text>
				</view>
				<view v-if="isLoading" style="text-align:center;color:#bbb;padding:20rpx;">加载中...</view>
				<view v-else-if="!hasMore && profits.length > 0" style="text-align:center;color:#bbb;padding:20rpx;">
					没有更多了</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				profits: [],
				pageNo: 1,
				pageSize: 10,
				hasMore: true,
				isLoading: false
			}
		},
		onLoad() {
			this.pageNo = 1;
			this.hasMore = true;
			this.fetchProfits();
		},
		onReachBottom() {
			if (this.hasMore && !this.isLoading) {
				this.fetchProfits(true);
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			fetchProfits(isLoadMore = false) {
				if (this.isLoading || (!this.hasMore && isLoadMore)) return;
				this.isLoading = true;
				const token = uni.getStorageSync('token') || '';
				this.$api && this.$api('income', {
					key: token,
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}, res => {
					this.isLoading = false;
					if (res.code === 200 && res.result && res.result.records) {
						const newList = res.result.records.map(item => ({
							avatar: item.formUser?.headImage || '',
							name: item.formUser?.name || '',
							date: (item.createTime || '').slice(5, 10),
							type: item.title,
							amount: item.money,
							state: item.state || 0 // 添加状态字段，默认为0表示未到账
						}));
						if (isLoadMore) {
							this.profits = this.profits.concat(newList);
						} else {
							this.profits = newList;
						}
						// 分页判断
						this.hasMore = (res.result.current * res.result.size) < res.result.total;
						if (this.hasMore) {
							this.pageNo = res.result.current + 1;
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.profit-detail-container {
		min-height: 100vh;
		background: #f7f7f7;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		height: calc(150rpx + var(--status-bar-height));
		padding: 0 32rpx;
		padding-top: var(--status-bar-height);
		background: #fff;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		box-sizing: border-box;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);

		.back {
			padding: 20rpx;
			margin-left: -20rpx;
		}

		.title {
			flex: 1;
			text-align: center;
			font-size: 34rpx;
			font-weight: 500;
			color: #222;
		}
	}

	.main-content {
		margin-top: calc(150rpx + var(--status-bar-height));
		margin-bottom: 40rpx;
		min-height: 100vh;
		overflow-y: auto;
		width: 100vw;
		box-sizing: border-box;
	}

	.profit-list-card {
		background: #fff;
		border-radius: 40rpx;
		margin: 0 32rpx 32rpx 32rpx;
		padding: 0 0 0 0;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
	}

	.profit-item {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 28rpx 36rpx 28rpx 36rpx;
		border-bottom: 2rpx solid #f3f3f3;

		&:last-child {
			border-bottom: none;
		}
	}

	.avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 24rpx;
		object-fit: cover;
		background: #f5f5f5;
	}

	.profit-info {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-width: 120rpx;
	}

	.profit-name-date {
		display: flex;
		flex-direction: column;
	}

	.profit-name {
		font-size: 28rpx;
		color: #222;
		font-weight: 500;
	}

	.profit-date {
		font-size: 22rpx;
		color: #b3b3b3;
		font-weight: 400;
		margin-top: 2rpx;
	}

	// 添加状态样式，参考wallet.vue
	.status {
		padding: 4rpx 8rpx;
		background: #FFB74D;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 8rpx;
		width: fit-content;

		.status-text {
			font-size: 22rpx;
			color: #fff;
		}
	}

	.profit-type {
		flex: 1;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 14px;
		line-height: 100%;
		letter-spacing: 0%;
		color: #4c4c4c;
		font-weight: 400;
	}

	.profit-amount {
		font-size: 28rpx;
		color: #ff8917;
		font-weight: 500;
		margin-left: 12rpx;
		min-width: 80rpx;
		text-align: right;
	}
</style>