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

<template>
	<view class="page">
		<view class="-status-bar"></view>
		<view class="header">
			<view class="balance-card">
				<text class="balance-label">账户余额（元）</text>
				<text class="balance-num">{{ balance.toFixed(2) }}</text>
				<view class="coin-row">
					<uni-icons type="wallet-filled" size="22" color="#FFD700"></uni-icons>
					<text class="coin-num">{{ coins }}</text>
					<text class="coin-label">金币</text>
				</view>
			</view>
			<view class="summary-row">
				<view class="summary-item">
					<text class="s-num">{{ totalRecharge.toFixed(2) }}</text>
					<text class="s-label">累计充值</text>
				</view>
				<view class="summary-item">
					<text class="s-num">{{ totalConsume.toFixed(2) }}</text>
					<text class="s-label">累计消费</text>
				</view>
			</view>
		</view>

		<scroll-view direction="vertical" :show-scrollbar="false" style="flex:1;">
			<view class="block-title">明细记录</view>
			<view v-if="logs.length === 0 && !loading" class="empty">
				<text class="empty-text">暂无明细</text>
			</view>
			<view class="log-item" v-for="(log, idx) in logs" :key="log.id">
				<view class="log-left">
					<text class="log-type">{{ log.remark && log.remark != '' ? log.remark : log.type }}</text>
					<text class="log-time">{{ formatTime(log.create_at) }}</text>
				</view>
				<text class="log-num" :class="log.change_num >= 0 ? 'plus' : 'minus'">{{ log.change_num >= 0 ? '+' : '' }}{{ log.change_num }}</text>
			</view>
		</scroll-view>
	</view>
</template>

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

	type ILog = {
		id : number
		type : string
		change_num : number
		balance_after : number
		remark : string
		create_at : number
	}

	const loading = ref<boolean>(false)
	const balance = ref<number>(0)
	const coins = ref<number>(0)
	const totalRecharge = ref<number>(0)
	const totalConsume = ref<number>(0)
	const logs = reactive<ILog[]>([])

	function loadData() {
		if (loading.value) return
		loading.value = true
		Api.user.wallet()
			.then((res : UTSJSONObject) => {
				balance.value = (res.get('balance') as number) ?? 0
				coins.value = (res.get('coins') as number) ?? 0
				totalRecharge.value = (res.get('total_recharge') as number) ?? 0
				totalConsume.value = (res.get('total_consume') as number) ?? 0
				const arr = (res.get('logs') as Array<ILog>) ?? []
				logs.splice(0, logs.length)
				arr.forEach((l : ILog) => logs.push(l))
			})
			.catch(() => {
				uni.showToast({ title: '加载失败', icon: 'none' })
			})
			.finally(() => { loading.value = false })
	}

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

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

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

	.-status-bar {
		height: var(--status-bar-height);
		background: linear-gradient(135deg, #FFB75E 0%, #ED8F03 100%);
	}

	.header {
		background: linear-gradient(135deg, #FFB75E 0%, #ED8F03 100%);
		padding: 30rpx 30rpx 50rpx;
	}

	.balance-card {
		display: flex;
		flex-direction: column;
	}

	.balance-label {
		font-size: 26rpx;
		color: #fff;
		opacity: 0.9;
	}

	.balance-num {
		font-size: 64rpx;
		font-weight: bold;
		color: #fff;
		margin: 8rpx 0 20rpx;
	}

	.coin-row {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
	}

	.coin-num {
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
		margin: 0 8rpx 0 12rpx;
	}

	.coin-label {
		font-size: 24rpx;
		color: #fff;
		opacity: 0.9;
	}

	.summary-row {
		display: flex;
		flex-flow: row nowrap;
		margin-top: 36rpx;
	}

	.summary-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-right: 1rpx solid rgba(255, 255, 255, 0.3);
	}

	.summary-item:last-child {
		border-right: none;
	}

	.s-num {
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
	}

	.s-label {
		font-size: 22rpx;
		color: #fff;
		opacity: 0.9;
		margin-top: 6rpx;
	}

	.block-title {
		font-size: 28rpx;
		color: #999;
		margin: 30rpx 30rpx 16rpx;
	}

	.empty {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
	}

	.empty-text {
		font-size: 28rpx;
		color: #bbb;
	}

	.log-item {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
		padding: 28rpx 30rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #f2f2f2;
	}

	.log-left {
		display: flex;
		flex-direction: column;
	}

	.log-type {
		font-size: 28rpx;
		color: #333;
	}

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

	.log-num {
		font-size: 32rpx;
		font-weight: bold;
	}

	.log-num.plus {
		color: #34C759;
	}

	.log-num.minus {
		color: #FF3B30;
	}
</style>