LocalLivingServicesUniapp/pages/topUp/records.vue

<template>
	<view class="page">
		<u-navbar title="账户明细" :autoBack="true" :placeholder="true"></u-navbar>

		<!-- Tabs -->
		<view class="tabs">
			<view
				class="tab"
				v-for="(tab, idx) in tabs"
				:key="idx"
				:class="{ active: currentTab === idx }"
				@click="switchTab(idx)"
			>
				<text class="tab-text">{{ tab }}</text>
				<image v-if="currentTab === idx" class="tab-indicator" :src="tabIndicator" mode="aspectFit"></image>
			</view>
		</view>

		<!-- 内容卡片：月份 + 列表 -->
		<view class="content-card">
			<view class="filter-bar">
				<picker mode="date" :value="monthValue" fields="month" @change="onMonthChange">
					<view class="month">
						<text>{{ monthLabel }}</text>
						<u-icon name="arrow-down" color="#666" size="12"></u-icon>
					</view>
				</picker>
				<view class="summary">
					<template v-if="currentTab === 0">
						<text>充值¥{{ formatMoney(summary.recharge) }}</text>
						<text class="sep">|</text>
						<text>支出¥{{ formatMoney(summary.spend) }}</text>
					</template>
					<template v-else-if="currentTab === 1">
						<text>支出¥{{ formatMoney(summary.spend) }}</text>
					</template>
					<template v-else>
						<text>实付¥{{ formatMoney(summary.paid) }}</text>
						<text class="sep">|</text>
						<text>赠送¥{{ formatMoney(summary.gift) }}</text>
					</template>
				</view>
			</view>

			<view class="list-wrap">
				<ListScrollView
					ref="listScroll"
					:api="api"
					:init="initParams"
					:pageSize="10"
					@afterFetch="afterFetch"
				>
					<template v-slot:list="{ data }">
						<view class="list">
							<view class="item" v-for="item in data" :key="item.id" @click="goDetail(item)">
								<image class="left-icon" :src="getTypeIcon(item.type)" mode="aspectFit"></image>
								<view class="info">
									<view class="row1">
										<text class="name">{{ item.title }}</text>
										<text class="amount" :class="{ plus: item.amount > 0 }">
											{{ item.amount > 0 ? '+' : '' }}{{ formatMoney(item.amount) }}
										</text>
									</view>
									<view class="row2">
										<text class="store">{{ item.storeName }}</text>
										<text class="time" :class="{ refunded: item.orderStatus === 6 }">
											{{ item.orderStatus === 6 ? '已退款' : formatListTime(item.time) }}
										</text>
									</view>
								</view>
							</view>
						</view>
					</template>
				</ListScrollView>
			</view>
		</view>
	</view>
</template>

<script>
	import { getMerchantId } from '@/api/memberPrepaid.js'
	import ListScrollView from '@/components/list-scroll-view/index.vue'

	const TAB_TYPES = ['ALL', 'CONSUME', 'RECHARGE']
	const BASE = '/memberPrepaidMerchant'

	export default {
		components: {
			ListScrollView
		},
		data() {
			const now = new Date();
			const y = now.getFullYear();
			const m = now.getMonth() + 1;
			return {
				tabs: ['全部', '支出', '充值'],
				currentTab: 0,
				year: y,
				month: m,
				tabIndicator: '/static/topUp/tabs.png',
				iconRecharge: '/static/topUp/recharge.png',
				iconSpend: '/static/topUp/expenditure.png',
				iconGive: '/static/topUp/give.png',
				summary: {
					recharge: 0,
					spend: 0,
					paid: 0,
					gift: 0
				},
				api: {
					url: `${BASE}/account/ledger/page`,
					method: 'GET'
				}
			};
		},
		computed: {
			monthLabel() {
				return `${this.year}年${this.month}月`;
			},
			monthValue() {
				return `${this.year}-${String(this.month).padStart(2, '0')}`;
			},
			initParams() {
				return {
					merchantId: getMerchantId(),
					month: this.monthValue,
					transactionType: TAB_TYPES[this.currentTab]
				};
			}
		},
		methods: {
			formatMoney(val) {
				const n = Number(val) || 0;
				return n.toFixed(2);
			},
			formatListTime(time) {
				const m = String(time).match(/(\d{4})-(\d{1,2})-(\d{1,2})\s+(\d{2}:\d{2}:\d{2})/);
				if (!m) return time;
				return `${Number(m[2])}月${Number(m[3])}日 ${m[4]}`;
			},
			getTypeIcon(type) {
				if (type === 'spend') return this.iconSpend;
				if (type === 'gift') return this.iconGive;
				return this.iconRecharge;
			},
			mapItem(item) {
				const txType = String(item.transactionType || '').toUpperCase();
				const isRecharge = txType === 'RECHARGE';
				const isGift = txType === 'GIFT' || txType === 'GIVE';
				const userName = item.userName || '用户';
				const changeAmount = Number(item.changeAmount);
				let type = 'spend';
				let titlePrefix = '支出';
				if (isGift) {
					type = 'gift';
					titlePrefix = '赠送';
				} else if (isRecharge) {
					type = 'recharge';
					titlePrefix = '充值';
				}
				return {
					id: item.ledgerId,
					type,
					title: `${titlePrefix}-${userName}`,
					storeName: item.storeName || '',
					amount: Number.isNaN(changeAmount)
						? isRecharge || isGift
							? Number(item.payAmount || 0) + Number(item.giftAmount || 0)
							: -Math.abs(Number(item.payAmount || 0))
						: changeAmount,
					time: item.transactionTime || '',
					orderStatus: Number(item.orderStatus)
				};
			},
			afterFetch(result) {
				const summary = result.summary || {};
				this.summary = {
					recharge: Number(summary.rechargeAmount) || 0,
					spend: Number(summary.consumeAmount) || 0,
					paid: Number(summary.payAmount) || 0,
					gift: Number(summary.giftAmount) || 0
				};
				const records = Array.isArray(result.records)
					? result.records
					: (result.page && Array.isArray(result.page.records) ? result.page.records : []);
				records.forEach((item) => {
					Object.assign(item, this.mapItem(item));
				});
			},
			reload() {
				this.$nextTick(() => {
					if (this.$refs.listScroll) {
						this.$refs.listScroll.reloadList(this.initParams);
					}
				});
			},
			switchTab(idx) {
				if (this.currentTab === idx) return;
				this.currentTab = idx;
				this.reload();
			},
			onMonthChange(e) {
				const val = e.detail.value || '';
				const parts = val.split('-');
				if (parts.length >= 2) {
					this.year = Number(parts[0]);
					this.month = Number(parts[1]);
					this.reload();
				}
			},
			goDetail(item) {
				const type = item.type === 'spend' ? 'spend' : 'recharge';
				uni.navigateTo({
					url: `/pages/topUp/recordDetail?id=${item.id}&type=${type}`
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.page {
		height: 100vh;
		background: #f5f6f8;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.tabs {
		display: flex;
		background: #fff;
		padding-bottom: 4rpx;
		flex-shrink: 0;

		.tab {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 88rpx;
			position: relative;

			.tab-text {
				font-size: 30rpx;
				color: #999;
				line-height: 1.2;
			}

			.tab-indicator {
				position: absolute;
				left: 50%;
				bottom: 10rpx;
				transform: translateX(-50%);
				width: 48rpx;
				height: 12rpx;
			}

			&.active {
				.tab-text {
					color: #2f7bff;
					font-weight: 600;
				}
			}
		}
	}

	.content-card {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin: 24rpx;
		margin-bottom: calc(24rpx + env(safe-area-inset-bottom));
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		min-height: 0;
	}

	.filter-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 28rpx 28rpx 12rpx;
		flex-shrink: 0;

		.month {
			display: flex;
			align-items: center;
			gap: 8rpx;
			font-size: 28rpx;
			color: #333;
			font-weight: 500;
		}

		.summary {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #999;

			.sep {
				margin: 0 10rpx;
				color: #ccc;
			}
		}
	}

	.list-wrap {
		flex: 1;
		min-height: 0;
	}

	.list {
		padding: 0 28rpx 24rpx;
	}

	.item {
		display: flex;
		align-items: center;
		padding: 28rpx 0;

		.left-icon {
			width: 72rpx;
			height: 72rpx;
			margin-right: 20rpx;
			flex-shrink: 0;
			border-radius: 50%;
		}

		.info {
			flex: 1;
			min-width: 0;
		}

		.row1,
		.row2 {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.row1 {
			margin-bottom: 10rpx;

			.name {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				max-width: 360rpx;
			}

			.amount {
				font-size: 30rpx;
				font-weight: 600;
				color: #2f7bff;
				flex-shrink: 0;

				&.plus {
					color: #2f7bff;
				}
			}
		}

		.row2 {
			.store,
			.time {
				font-size: 22rpx;
				color: #999;
			}

			.time.refunded {
				color: #ff4d4f;
			}

			.store {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				max-width: 360rpx;
			}
		}
	}
</style>