LocalLivingServicesUniapp/pages/topUp/recordDetail.vue

<template>
	<view class="page">
		<u-navbar :title="pageTitle" :autoBack="true" :placeholder="true"></u-navbar>
		<view v-if="loading" class="loading">
			<u-loading mode="circle" size="48"></u-loading>
		</view>

		<template v-else>
			<!-- 状态摘要 -->
			<view class="hero card">
				<view class="amount" :class="{ plus: isRecharge }">
					{{ isRecharge ? '+' : '-' }} {{ formatAmount(Math.abs(detail.amount || 0)) }}
				</view>
				<view class="status">{{ isRecharge ? '充值成功' : '支出成功' }}</view>
			</view>

			<!-- 交易详情 -->
			<view class="card detail-card">
				<template v-if="isRecharge">
					<view class="row" v-if="detail.payTime">
						<text class="label">支付时间</text>
						<text class="value">{{ detail.payTime }}</text>
					</view>
					<view class="row" v-if="detail.payMethod">
						<text class="label">支付方式</text>
						<text class="value">{{ detail.payMethod }}</text>
					</view>
					<view class="row" v-if="detail.storeName">
						<text class="label">储值商户</text>
						<text class="value">{{ detail.storeName }}</text>
					</view>
					<view class="row" v-if="detail.orderNo">
						<text class="label">订单号</text>
						<text class="value">{{ detail.orderNo }}</text>
					</view>
					<view class="row" v-if="detail.userName">
						<text class="label">用户名</text>
						<text class="value">{{ detail.userName }}</text>
					</view>
					<view class="row" v-if="detail.userAccount">
						<text class="label">用户账户</text>
						<text class="value">{{ detail.userAccount }}</text>
					</view>
					<view class="row" v-if="detail.paidAmount != null && detail.paidAmount !== ''">
						<text class="label">实付金额</text>
						<text class="value">{{ detail.paidAmount }}元</text>
					</view>
				</template>

				<template v-else>
					<view class="row" v-if="detail.orderNo">
						<text class="label">订单号</text>
						<text class="value">{{ detail.orderNo }}</text>
					</view>
					<view class="row" v-if="detail.storeName">
						<text class="label">消费门店</text>
						<text class="value">{{ detail.storeName }}</text>
					</view>
					<view class="row" v-if="detail.amount != null">
						<text class="label">消费金额</text>
						<text class="value">{{ formatAmount(Math.abs(detail.amount)) }}元</text>
					</view>
					<view class="row" v-if="detail.spendTime">
						<text class="label">消费时间</text>
						<text class="value">{{ detail.spendTime }}</text>
					</view>
					<view class="row" v-if="detail.userName">
						<text class="label">用户名</text>
						<text class="value">{{ detail.userName }}</text>
					</view>
					<view class="row" v-if="detail.userAccount">
						<text class="label">用户账户</text>
						<text class="value">{{ detail.userAccount }}</text>
					</view>
				</template>
			</view>

			<!-- 赠送信息 -->
			<view class="card gift-card" v-if="isRecharge && showGiftSection">
				<view class="gift-title">赠送信息</view>
				<view class="row" v-if="Number(detail.giftAmount) > 0">
					<text class="label">赠送金额</text>
					<text class="value">{{ detail.giftAmount }}元</text>
				</view>
				<view
					class="row link"
					v-if="couponSummary"
					@click="couponExpanded = !couponExpanded"
				>
					<text class="label">赠送优惠券</text>
					<view class="value-wrap">
						<text class="value">{{ couponSummary }}</text>
						<u-icon
							:name="couponExpanded ? 'arrow-up' : 'arrow-down'"
							color="#999"
							size="14"
						></u-icon>
					</view>
				</view>

				<!-- 优惠券展开列表 -->
				<scroll-view
					v-if="couponExpanded && coupons.length"
					class="coupon-scroll"
					scroll-x
					:show-scrollbar="false"
				>
					<view class="coupon-list">
						<view class="coupon-item" v-for="(c, idx) in coupons" :key="idx">
							<image class="coupon-bg" src="/static/topUp/coupon.png" mode="scaleToFill"></image>
							<view class="coupon-body">
								<view class="coupon-top">
									<text class="c-name">{{ formatCouponName(c.name) }}</text>
									<text class="c-value">{{ c.display }}</text>
								</view>
								<view class="coupon-bottom">
									<text class="c-qty">x{{ c.qty }}张</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</template>
	</view>
</template>

<script>
	import prepaidApi from '@/api/memberPrepaid.js'


	export default {
		data() {
			return {
				recordId: '',
				recordType: 'recharge',
				detail: {},
				couponExpanded: false,
				loading: false
			};
		},
		computed: {
			isRecharge() {
				return this.recordType !== 'spend';
			},
			pageTitle() {
				return this.isRecharge ? '充值详情' : '支出详情';
			},
			coupons() {
				return Array.isArray(this.detail.coupons) ? this.detail.coupons : [];
			},
			couponSummary() {
				if (!this.coupons.length) return '';
				const totalQty = this.coupons.reduce((s, c) => s + (Number(c.qty) || 0), 0);
				if (!totalQty) return '';
				const face = this.detail.couponFaceText;
				return face ? `${totalQty}张/${face}` : `${totalQty}张优惠券`;
			},
			showGiftSection() {
				return Number(this.detail.giftAmount) > 0 || !!this.couponSummary;
			}
		},
		onLoad(options) {
			this.recordId = options.id || '';
			this.recordType = options.type === 'spend' ? 'spend' : 'recharge';
			this.loadDetail();
		},
		methods: {
			formatAmount(val) {
				const n = Number(val) || 0;
				return Number.isInteger(n) ? String(n) : n.toFixed(2);
			},
			formatCouponName(name) {
				const s = String(name || '');
				return s.length > 6 ? `${s.slice(0, 6)}...` : s;
			},
			loadDetail() {
				if (!this.recordId) {
					uni.showToast({ title: '缺少明细ID', icon: 'none' });
					return;
				}
				this.loading = true;
				prepaidApi
					.getLedgerDetail(this.recordId)
					.then((res) => {
						if (res.data.code !== 200 || !res.data.result) {
							uni.showToast({ title: res.data.message || '加载失败', icon: 'none' });
							return;
						}
						const data = res.data.result;
						const isRecharge = data.transactionType === 'RECHARGE';
						this.recordType = isRecharge ? 'recharge' : 'spend';
						const coupons = (data.coupons || []).map((c) => {
							const isDiscount = String(c.couponType) === '2';
							return {
								name: c.couponName || '',
								display: isDiscount
									? c.contentInfo != null
										? `${c.contentInfo}折`
										: '折扣'
									: c.contentInfo != null
										? `${c.contentInfo}元`
										: '优惠',
								qty: Number(c.quantity) || 1
							};
						});
						const couponTotal = Number(data.couponTotalAmount) || 0;
						this.detail = {
							id: data.ledgerId,
							type: this.recordType,
							amount: isRecharge
								? Number(data.transactionAmount != null ? data.transactionAmount : data.payAmount) || 0
								: Math.abs(Number(data.transactionAmount != null ? data.transactionAmount : data.payAmount) || 0),
							payTime: data.paidTime || data.successTime || data.createTime || '',
							spendTime: data.successTime || data.paidTime || data.createTime || '',
							payMethod: data.payChannel,
							storeName: isRecharge
								? data.issuerMerchantName || data.transactionStoreName || ''
								: data.transactionStoreName || data.issuerMerchantName || '',
							orderNo: data.orderNo || '',
							userName: data.userName || '',
							userAccount: data.userAccount || '',
							paidAmount: data.payAmount != null ? data.payAmount : '',
							giftAmount: data.giftAmount != null ? data.giftAmount : 0,
							coupons,
							couponFaceText: couponTotal > 0 ? `${this.formatAmount(couponTotal)}元优惠券` : ''
						};
						this.couponExpanded = false;
					})
					.catch(() => {
						uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' });
					})
					.finally(() => {
						this.loading = false;
					});
			}
		}
	};
</script>

<style scoped lang="scss">
	.page {
		min-height: 100vh;
		background: #f7f7f7;
		padding: 24rpx;
		padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}

	.loading {
		padding-top: 200rpx;
		display: flex;
		justify-content: center;
	}

	.card {
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
	}

	.hero {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 56rpx 24rpx 48rpx;

		.amount {
			font-size: 56rpx;
			font-weight: 700;
			color: #333;
			line-height: 1.2;

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

		.status {
			margin-top: 16rpx;
			font-size: 28rpx;
			color: #333;
		}
	}

	.detail-card,
	.gift-card {
		padding: 8rpx 28rpx 16rpx;
	}

	.gift-title {
		padding: 28rpx 0 8rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
	}

	.row {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 24rpx 0;
		gap: 24rpx;

		.label {
			font-size: 28rpx;
			color: #999;
			flex-shrink: 0;
			width: 180rpx;
		}

		.value {
			flex: 1;
			text-align: right;
			font-size: 28rpx;
			color: #333;
			word-break: break-all;
		}

		&.link .value-wrap {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 8rpx;

			.value {
				flex: none;
			}
		}
	}

	.coupon-scroll {
		width: 100%;
		margin: 8rpx 0 24rpx;
		white-space: nowrap;
	}

	.coupon-list {
		display: inline-flex;
		flex-direction: row;
		gap: 24rpx;
		padding-right: 8rpx;
	}

	/* coupon.png 原图 198x162，按比例铺底，文字分区对齐白卡/口袋 */
	.coupon-item {
		position: relative;
		width: 198rpx;
		height: 162rpx;
		flex-shrink: 0;
	}

	.coupon-bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
	}

	.coupon-body {
		position: relative;
		z-index: 1;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.coupon-top {
		height: 58%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 8rpx 12rpx 0;
		box-sizing: border-box;

		.c-name {
			font-size: 22rpx;
			color: #333;
			line-height: 1.2;
			text-align: center;
			max-width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.c-value {
			margin-top: 6rpx;
			font-size: 34rpx;
			font-weight: 700;
			color: #ff3b5c;
			line-height: 1.15;
		}
	}

	.coupon-bottom {
		height: 42%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 4rpx;
		box-sizing: border-box;

		.c-qty {
			font-size: 24rpx;
			color: #fff;
			font-weight: 500;
			line-height: 1;
		}
	}
</style>