kailin_mp/pages/balance/index.vue

<template>
	<view class="balance">
		<!-- <view class="date_picker">
      <picker mode="date" :value="selectedDate" fields="month" @change="_bindDateChange">
        <view>{{ formattedDate }}</view>
      </picker>
    </view> -->
		<view class="balance_list">
			<!-- <view class="balance_date">2025年1月</view> -->
			<view class="balance_item" @click="_goDetail(item.id)" v-for="(item, index) in balanceList" :key="item.id">
				<view class="balance_item_fix">
					<view class="balance_item_left">
						<view style="margin-bottom: 10rpx">{{ item.type_state }}
							<text v-if="item.state" style="font-size: 20rpx">
								（{{ item.state }}）
							</text>
						</view>
						<view>{{ item.insert_time }}</view>
					</view>
					<view class="balance_item_right">
						<view class="price">{{ item.prefix == 1 ? "+" : "-" }}{{ item.amount }}</view>
						<view>余额：{{ item.balance }}</view>
					</view>
				</view>
				<view class="alter_info"v-if="item.buy_type == 2 && item.status == 1" >若提现不成功，将在24小时内返回您的余额，可重新提现</view>
			</view>
		</view>
		<Empty v-if="balanceList.length == 0 && !isReqing" text="----- 还没有记录啦 -----" />
		<view class="to_bottom" v-if="isLast && balanceList.length"> -----到底啦-----</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from "vue";
	import {
		onReachBottom,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	import Empty from "@/components/Empty/Empty.vue";
	import http from "@/utils/request";

	const selectedDate = ref("请选择日期");
	const balanceList = ref([]);
	const page = ref(1);
	const pageSize = ref(15);
	const isLast = ref(false);
	const isReqing = ref(false);

	const _bindDateChange = (e) => {
		selectedDate.value = e.detail.value;
	};

	onMounted(() => {
		_getBalacnelist();
	});

	const _goDetail = (record_id) => {
		uni.navigateTo({
			url: `/pages/balance/detail?record_id=${record_id}`,
		});
	};

	const _getBalacnelist = async () => {
		if (isReqing.value) return;
		isReqing.value = true;

		try {
			const callback = await http.request("api/custom_amount/get_record_list", {
				page: page.value,
				limit: pageSize.value
			});
			if (callback.code == "success") {
				if (callback.data.last_page <= page.value) isLast.value = true;
				const balanceListData = callback.data.data || [];
				balanceList.value = [...balanceList.value, ...balanceListData];
			}
		} finally {
			isReqing.value = false;
		}
	};

	onReachBottom(async () => {
		console.log("上拉加载");
		if (isLast.value || isReqing.value) return;
		page.value += 1;
		await _getBalacnelist();
	});

	onPullDownRefresh(async () => {
		page.value = 1;
		balanceList.value = [];
		isLast.value = false;
		await _getBalacnelist();
		uni.stopPullDownRefresh();
	});

	const formattedDate = computed(() => {
		if (selectedDate.value === "请选择日期") {
			return selectedDate.value;
		}
		const [year, month] = selectedDate.value.split("-");
		return `${year}年${parseInt(month)}月`;
	});
</script>

<style scoped lang="less">
	.balance {
		padding: 36rpx;
		box-sizing: border-box;
		width: 100vw;

		.date_picker {
			padding: 0 16rpx;
			border: 1px solid #e5e5e5;
			width: 250rpx;
			height: 60rpx;
			line-height: 60rpx;
			margin-bottom: 40rpx;
		}

		.balance_list {
			.balance_date {
				font-weight: bold;
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #ddd;
			}
			.balance_item {
				border-bottom: 1px solid #ddd;
				padding-bottom: 20rpx;
				.balance_item_fix {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.balance_item_left,
					.balance_item_right {
						display: flex;
						flex-direction: column;
						font-size: 26rpx;
						padding-top: 20rpx;
					}

					.balance_item_right {
						align-items: flex-end;

						>.price {
							font-weight: bold;
							margin-bottom: 10rpx;

							&.red {
								color: #ff0000;
							}

							&.green {
								color: #00ff00;
							}
						}
					}
				}
			}

			.alter_info {
				display: block;
				color: #e03519;
				font-size: 20rpx;
				overflow: hidden;
				margin: 0rpx auto;
				line-height: 40rpx;
				padding: 5rpx 0rpx;
			}
		}
	}
</style>