frontend-app/pages/mine_package/mine_purse_log/mine_purse_log.vue

<template>
	<view class="purse_log_warp">
		<Header :leftTitle="$t('mine.purse.mine_purse_log.title')" left-path-type="navigateTo"
			left-path="/pages/mine_package/mine_purse/mine_purse" />

		<view class="info_warp">
			<view class="info_title_warp">
				<view :class="selInfo === item.key ? 'info_title_item_warp info_title_item_sel_warp' : 'info_title_item_warp'"
					v-for="item in infoList" :key="item.key" @click="selectInfo(item)">
					<text>{{ item.name }}</text>
					<view class="info_title_item_sel_but_warp" v-if="selInfo === item.key"></view>
				</view>
			</view>

			<view class="line"></view>

			<view class="info_center_warp">
				<view class="info_center_warp-item">
					<view class="info_center_warp-item-top">21</view>
					<view class="info_center_warp-item-bottom">商城总挖矿数量</view>
				</view>
				<view class="info_center_warp-item">
					<view class="info_center_warp-item-top">231</view>
					<view class="info_center_warp-item-bottom">已兑换数量</view>
				</view>
			</view>

			<view class="line"></view>

			<view class="info_list_warp">
				<scroll-view scroll-y="true" @scrolltolower="loadMore(selInfo)" style="height:calc(100vh - 300rpx)">
					<view v-for="item in orderList" :key="item.id" class="purse_info_item"
						v-if="orderList && orderList.length !== 0">
						<view class="purse_info_left">
							<!-- <up-image :src="item.type === 1? '/static/mine/purse_sf.png' : '/static/mine/purse_xf.png'" width="40" height="40" bgColor="#f1f6ff00"></up-image> -->
							<up-image src="/static/mine/purse_sf.png" width="40" height="40" bgColor="#f1f6ff00"></up-image>
							<view class="purse_data_warp">
								<view class="purse_info_name">{{ getValue(BALANCE_TYPE, item.type) }}</view>
								<view class="purse_info_value">{{ formatDate(item.ctdate) }}</view>
							</view>
						</view>
						<view class="ipurse_nfo_right">
							<view class="purse_info_title">{{ handleAmount(item.amount) }}</view>
							<view class="purse_info_value">{{ item.remark }}</view>
						</view>
					</view>
					<view v-else class="not_order_warp">
						<up-image src="https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/not_order.png" width="80" height="80"
							bgColor="#f1f6ff00"></up-image>
						<view class="not_order_msg_warp">暂无记录～</view>
					</view>
					<view v-if="loading" style="text-align: center;">加载中...</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import Header from '@/components/header.vue';
import { getAcctFlow } from '@/api/finance.js';
import { getValue, BALANCE_TYPE } from '@/utils/enumUtils.js';
import { formatDate, handleAmount } from '@/utils/index.js';

export default {
	computed: {
		BALANCE_TYPE() {
			return BALANCE_TYPE;
		}
	},
	components: { Header },
	data() {
		return {
			infoList: [
				{
					name: "活期账户",
					key: "cur"
				},
				{
					name: "锁定账户",
					key: "lock"
				},
			],
			selInfo: "cur",
			form: {
				id: 0,
				page: 1,
				pageSize: 15,
				category: null,
			},
			orderList: [],
			lockId: 0,
			curId: 0,
		}
	},
	onLoad(option) {
		const category = option.category;
		if (category && category !== 0) {
			this.form.category = category;
		}
		const lockId = option.lockId;
		const curId = option.curId;
		if (lockId && lockId !== 'null') {
			this.lockId = lockId;
			// this.selectInfo(this.infoList[1]);
		}
		if (curId && curId !== 'null') {
			this.curId = curId;
			this.selectInfo(this.infoList[0]);
		}
	},
	methods: {
		getValue,
		formatDate,
		handleAmount,
		selectInfo(item) {
			this.orderList = [];
			this.form.page = 1;
			this.selInfo = item.key;
			let id = 0;
			if (item.key === "cur") {
				id = this.curId;
			}
			if (item.key === "lock") {
				id = this.lockId;
			}
			this.form.id = id;
			this.loadData();
		},

		// 加载数据的方法
		async loadData() {
			if (this.loading) return; // 如果正在加载，则不重复加载
			this.loading = true; // 设置加载状态为true
			try {
				// 模拟异步获取数据，实际应用中应该替换为你的数据获取逻辑，例如API调用
				const newData = await this.fetchData(this.form.page, this.form.pageSize);
				this.orderList = [...this.orderList, ...newData]; // 将新数据添加到列表中
				this.form.page++; // 页码加1
			} catch (error) {
				console.error('加载数据失败:', error);
			} finally {
				this.loading = false; // 设置加载状态为false
			}
		},
		// 模拟获取数据的方法，实际应用中应该替换为你的数据获取逻辑，例如从服务器获取数据
		async fetchData(page, pageSize) {
			if (!this.form.id || this.form.id === 0) {
				return [];
			}
			const params = {
				id: this.form.id,
				category: this.form.category,
				page,
				pageSize,
			}
			console.log("params", params);
			const resp = await getAcctFlow(params);
			console.log("resp", resp);
			if (resp && resp.bizcode === 100) {
				const data = resp.data && resp.data.entitys || [];
				return data
			} else {
				return [];
			}
		},
		// 当滚动到底部时触发的方法
		loadMore(selInfo) {
			let id = 0;
			if (selInfo === "cur") {
				id = this.curId;
			}
			if (selInfo === "lock") {
				id = this.lockId;
			}
			this.form.id = id;
			this.loadData(); // 加载更多数据
		}
	}
}
</script>

<style lang="scss" scoped>
.purse_log_warp {
	height: calc(100vh - 58rpx);
	overflow-y: hidden;

	.info_title_warp {
		display: flex;
		justify-content: space-around;
		padding: 0 100rpx;


		.info_title_item_warp {
			font-size: 32rpx;
			color: #666666;
		}

		.info_title_item_sel_warp {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #7934F6;
			font-weight: 500;

			.info_title_item_sel_but_warp {
				background: $app-bt-bj;
				border-radius: 4rpx;
				width: 80rpx;
				height: 6rpx;
				margin-top: 20rpx;
			}
		}

	}

	.line {
		width: 100vw;
		height: 12rpx;
		background: #F5F5F5;
	}

	.info_center_warp {
		display: flex;
		justify-content: space-between;
		padding: 32rpx 100rpx;

		.info_center_warp-item {
			.info_center_warp-item-top {
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
				text-align: center;
			}

			.info_center_warp-item-bottom {
				font-size: 26rpx;
				color: #999999;
				margin-top: 10rpx;
			}

		}
	}






	.info_list_warp {
		margin-top: 30rpx;
		// height: calc(100vh - 500rpx);
		// overflow-y: auto;

	}
}
</style>