frontend-app/pages/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_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="info_list_warp" v-if="form.category === 'raffle'">
				<winningRecord heightRef="calc(100vh - 246rpx)"/>
			</view> -->
			<view class="info_list_warp">
				<scroll-view scroll-y="true" @scrolltolower="loadMore(selInfo)" style="height:calc(100vh - 308rpx)">
					<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="/static/common/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 winningRecord from '@/components/winning_record.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:{winningRecord,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);
		padding: 30rpx;
		overflow-y: hidden;
		.info_title_warp{
			display: flex;
			padding-left: 10rpx;
		}
		.info_title_item_warp{
			margin-right: 40rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
		}
		.info_title_item_sel_warp{
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
		}
		.info_title_item_sel_but_warp{
			background: $app-bt-bj;
			border-radius: 4rpx;
			width: 80rpx;
			height: 8rpx;
			margin-left: 18rpx;
		}
		.info_list_warp{
			margin-top: 30rpx;
			// height: calc(100vh - 500rpx);
			// overflow-y: auto;
			
		}
	}
	
</style>