purchase-let/pages/charge/charge_record.vue

<!-- 会员充值 -->
<template>
	<view class="member">
		<view class="card-wrap">
			<view class="card" :style="{'background-image':'url(../../static/icon/account_bg.webp)'}">
				<view class="card-info">
					<u-image width="100rpx" height="100rpx" :src="userInfo.avatar" />
					<view class="card-info-right">
						<view class="phone">{{userInfo.mobile}}</view>
						<view class="level">开通会员 享折扣权益</view>
					</view>
				</view>

				<view class="charge">
					<view class="charge-left">
						<view>
							<text class="txt">账户余额(元)</text>
							<text class="money">{{userInfo.now_money}}</text>
						</view>
					</view>
					<view class="charge-right" @click="onPageBack">充值</view>
				</view>
			</view>
		</view>

		<view class="detail">
			<view class="detail-title">账户详情</view>
			<view class="detail-total">
				<view class="detail-total-item">
					<text>累计消费</text>
					<view>{{order}}</view>
				</view>
				<view class="detail-total-item">
					<text>累计充值</text>
					<view>{{recharge}}</view>
				</view>
			</view>

			<view class="detail-card" v-if="chargeRecordList.length > 0">
				<block v-for="(item,indx) in chargeRecordList" :key="indx">
					<view class="detail-card-item">
						<view class="detail-card-item-left">
							<u-image width="60rpx" height="60rpx" src="../../static/icon/order.webp"
								v-if="item.category=='user_order_pay'" />
							<u-image width="60rpx" height="60rpx" src="../../static/icon/diamond.webp" v-else />
						</view>
						<view class="detail-card-item-right">
							<view class="detail-card-item-right-money">
								<text>{{item.category=='user_order_pay'?'订单编号':'会员充值'}} </text>
								<text>+{{item.amount}}</text>
							</view>
							<viewl class="detail-card-item-right-remind">
								<text>{{item.create_time}}</text>
								<text>余额{{item.before_balance}}元</text>
							</viewl>
						</view>
					</view>
				</block>
			</view>

			<up-loadmore :status="status" iconColor="#b3b3b3" color="#b3b3b3" />
		</view>
	</view>
</template>
<script setup>
	import {
		rechargeApi,
		capitalCountAPi,
		chargeListApi
	} from "@/api/user.js";
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		reactive,
		ref
	} from "vue";
	import useUserStore from "@/store/user";

	//用户信息
	const userInfo = useUserStore().userInfo;
	const queryParams = reactive({
		page_no: 1,
		page_size: 8
	});
	const status = ref('');
	const chargeRecordList = ref([]);

	const getChargeRecordData = () => {
		if (status.value == 'nomore') return;
		if (status.value == 'loading') return;
		status.value == 'loading';
		chargeListApi(queryParams).then(res => {
			let len = res.data.data;
			status.value = queryParams.page_size > len.length ? 'nomore' : 'loadmore';
			chargeRecordList.value = chargeRecordList.value.concat(res.data.data);
			if (status.value == 'loadmore') queryParams.page_no += 1;
		})
	}

	// 充值统计
	const order = ref(0),
		recharge = ref(0);
	const getChargeCountData = () => {
		capitalCountAPi().then(rs => {
			order.value = rs.data.order;
			recharge.value = rs.data.recharge;
		})
	}

	const onPageBack = () => {
		uni.navigateBack()
	}

	onLoad(() => {
		getChargeRecordData();

		getChargeCountData();
	})

	onReachBottom((e) => {
		getChargeRecordData();
	})
</script>

<style lang="scss">
	.member {
		padding-bottom: 300rpx;

		.card-wrap {
			padding: 40rpx 0 20rpx 0;
			background-color: #fff;
			margin-bottom: 30rpx;

			.card {
				background-size: 100%;
				background-repeat: no-repeat;
				height: 272rpx;
				margin: 0 30rpx;
				border-radius: 10rpx;
				padding: 20rpx 0 0 20rpx;
				box-sizing: border-box;
				background-color: #fff;

				.card-info {
					display: flex;
					align-items: center;
					margin-bottom: 60rpx;

					.card-info-right {
						margin-left: 40rpx;

						.phone {
							margin-bottom: 12rpx;
							font-weight: 600;
							font-size: 32rpx;
							color: #444444;
						}

						.level {
							font-size: 28rpx;
							color: #7B5232;
						}
					}
				}

				.charge {
					display: flex;
					align-items: center;
					padding-right: 38rpx;

					.charge-left {
						flex: 1;
						display: flex;
						margin-right: 30rpx;

						&>view {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 10rpx;

							.txt {
								margin-right: 16rpx;
								font-size: 24rpx;
								color: #7B5232;
							}

							.money {
								font-weight: 600;
								font-size: 48rpx;
								color: #7B5232;
							}
						}
					}

					.charge-right {
						width: 148rpx;
						height: 52rpx;
						line-height: 52rpx;
						background: #7B5232;
						border-radius: 30rpx;
						font-size: 22rpx;
						color: #FFFFFF;
						text-align: center;
					}
				}
			}
		}

		.detail {
			margin: 0 30rpx;

			.detail-title {
				margin-bottom: 16rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #262626;
			}

			.detail-total {
				display: flex;
				align-items: center;
				margin-bottom: 50rpx;

				.detail-total-item {
					display: flex;
					align-items: center;
					margin-right: 68rpx;

					text {
						margin-right: 4rpx;
						font-size: 28rpx;
						color: #777777;
					}

					view {
						font-weight: 600;
						font-size: 28rpx;
						color: #333333;
					}
				}
			}
		}

		.detail-card {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 0 20rpx;
			box-sizing: border-box;

			.detail-card-item {
				display: flex;
				align-items: center;
				height: 130rpx;
				border-bottom: 2rpx solid #F3F3F3;

				.detail-card-item-left {
					margin-right: 22rpx;
				}

				.detail-card-item-right {
					flex: 1;

					.detail-card-item-right-money {
						margin-bottom: 14rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 30rpx;
						color: #333333;
					}

					.detail-card-item-right-remind {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 24rpx;
						color: #333333;
					}
				}
			}
		}
	}
</style>