kxmall-ui/kxmall-rider-ui/pages/wallet/transaction-list.vue

<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="back-btn" @click="goBack">
				<image src="" mode="aspectFit"></image>
			</view>
			<view class="title">全部交易记录</view>
		</view>

		<!-- 交易记录列表 -->
		<view class="transaction-list">
			<view class="transaction-item" v-for="item in transactions" :key="item.id" @click="viewDetail(item)">
				<view class="left">
					<view class="type">{{getTypeText(item.transactionType)}}</view>
					<view class="time">{{item.createTime}}</view>
					<view class="order-no" v-if="item.orderNo">订单: {{item.orderNo}}</view>
				</view>
				<view class="right" :class="{'income': item.amount > 0, 'expense': item.amount < 0}">
					{{item.amount > 0 ? '+' : ''}}{{formatMoney(item.amount)}}
				</view>
			</view>

			<view class="load-more" @click="loadMore" v-if="hasMore">
				{{loading ? '加载中...' : '加载更多'}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				transactions: [],
				page: 1,
				pageSize: 15,
				loading: false,
				hasMore: true
			};
		},
		onLoad() {
			this.loadTransactions();
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},

			loadTransactions() {
				if (this.loading) return;
				this.loading = true;

				this.request("get", "rider/wallet/transactions", this.$store.state.token, {
					page: this.page,
					size: this.pageSize
				}).then(res => {
					if (res.code === 200) {
						this.transactions = [...this.transactions, ...res.rows];
						this.hasMore = this.transactions.length < res.total;
					}
				}).finally(() => {
					this.loading = false;
				});
			},

			loadMore() {
				if (this.hasMore && !this.loading) {
					this.page++;
					this.loadTransactions();
				}
			},

			viewDetail(item) {
				uni.navigateTo({
					url: `/pages/wallet/detail?id=${item.id}`
				});
			},

			formatMoney(amount) {
				return Number(amount || 0).toFixed(2);
			},

			getTypeText(type) {
				const types = {
					1: '收入',
					2: '支出',
					3: '提现',
					4: '退款'
				};
				return types[type] || '交易';
			}
		}
	};
</script>

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

	.custom-navbar {
		display: flex;
		align-items: center;
		height: 88rpx;
		padding: 0 30rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #f0f0f0;

		.back-btn {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.title {
			font-size: 34rpx;
			font-weight: bold;
		}
	}

	.transaction-list {
		padding: 20rpx;

		.transaction-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 12rpx;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

			.left {
				flex: 1;

				.type {
					font-size: 30rpx;
					color: #333;
					margin-bottom: 10rpx;
				}

				.time,
				.order-no {
					font-size: 24rpx;
					color: #999;
				}

				.order-no {
					margin-top: 5rpx;
				}
			}

			.right {
				font-size: 32rpx;
				font-weight: bold;

				&.income {
					color: #4caf50;
				}

				&.expense {
					color: #f44336;
				}
			}
		}

		.load-more {
			text-align: center;
			padding: 30rpx;
			color: #4a90e2;
			font-size: 28rpx;
		}
	}
</style>