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

<template>
	<view class="mine_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 v-if="form.category !== 'redpacket'">
				<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>



			<view
				v-if="form.category === 'vcoin' || form.category === 'balance' || form.category === 'expend' || form.category === 'raffle'">

				<view class="info_center_warp">
					<view class="info_center_warp-item" v-for="item in source">
						<view class="info_center_warp-item-top">{{ headerData[item.key] }}</view>

						<view class="info_center_warp-item-bottom">{{ item.name }}</view>
					</view>
				</view>
				<view class="line"></view>
			</view>



			<view class="info_list_warp-mine">
				<scroll-view scroll-y="true" @scrolltolower="loadMore(selInfo)" style="height: 100%;">

					<view v-for="item in orderList" :key="item.id" class="purse_info_item-mine"
						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="item.amount > 0 ? '/static/mine/zhen.png' : '/static/mine/fu.png'" width="32" height="32" 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" style="text-align: end;">{{ 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, getAcctMiningStat, getAcctContribution, getAcctFlowList, getBonusStat, getAcctBalance } from '@/api/finance.js';
import { getValue, BALANCE_TYPE } from '@/utils/enumUtils.js';
import { formatDate, handleAmount } from '@/utils/index.js';
import Decimal from 'decimal.js';

export default {
	computed: {
		BALANCE_TYPE() {
			return BALANCE_TYPE;
		}
	},

	components: { Header },

	data() {
		return {
			infoList: [

			],
			source: [],
			headerData: {},
			selInfo: "cur",
			form: {
				id: 0,
				page: 1,
				pageSize: 15,
				category: null,
			},
			orderList: [],
			lockId: 0,
			curId: 0,
			preId: 0,
		}
	},
	onLoad(option) {
		const category = option.category;
		if (category && category !== 0) {
			this.form.category = category;
		}
		const lockId = option.lockId;
		const curId = option.curId;
		const preId = option.preId;


		// 分红金额 balance
		console.log("分红金额category", category);

		if (category === 'balance') {
			this.onGetBonusStat();
			this.infoList = [
				{
					name: "活期账户",
					key: "cur"
				},
				{
					name: "预存款账户",
					key: "pre"
				},
			]
			this.source = [
				{
					name: "今日分红数量",
					key: "todayBonus"
				},
				{
					name: "总分红数量",
					key: "totalBonus"
				},
				{
					name: "平台总分红",
					key: "totalMallBonus"
				},
				{
					name: "共享资金池剩余",
					key: "poolBonus"
				},
			];
		}

		// TBC
		if (category === 'vcoin') {
			this.onGetAcctMiningStat();
			this.infoList = [
				{
					name: "活期账户",
					key: "cur"
				},
				{
					name: "锁定账户",
					key: "lockAmount"
				},

				{
					name: "预存款账户",
					key: "pre"
				},
			]
			this.source = [
				{
					name: "商城总挖矿数量",
					key: "mallTotalMiningSum"
				},
				{
					name: "已兑换数量",
					key: "exchangeNumber"
				},
			];

		}

		// 贡献值 expend
		if (category === 'expend') {
			this.onGetAcctContribution();
			this.infoList = [
				{
					name: "活期账户",
					key: "cur"
				},
				{
					name: "预存款账户",
					key: "pre"
				},
			]

			this.source = [
				{
					name: "今日贡献值",
					key: "todayValue"
				},
				{
					name: "总贡献值",
					key: "totalValue"
				},
				{
					name: "商城日贡献",
					key: "todayMallValue"
				},
				{
					name: "我的占比",
					key: "ratio"
				},
			];
		}

		// 抽奖次数 raffle
		if (category === 'raffle') {
			this.onGetAcctBalance();

			this.infoList = [
				{
					name: "活期账户",
					key: "cur"
				},
				{
					name: "锁定账户",
					key: "lockAmount"
				},

				{
					name: "预存款账户",
					key: "pre"
				},
			];
			this.source = [
				{
					name: "可用次数",
					key: "curAmount"
				},
				{
					name: "锁定次数",
					key: "lockAmount"
				},
				{
					name: "预发放次数",
					key: "preAmount"
				}
			];
		}


		// 积分 redpacket
		if (category === 'redpacket') {
			this.infoList = [
				{
					name: "活期账户",
					key: "cur"
				},
			]
		}

		if (lockId && lockId !== 'null') {
			this.lockId = lockId;
			// this.selectInfo(this.infoList[1]);
		}

		if (curId && curId !== 'null') {
			this.curId = curId;
			this.selectInfo(this.infoList[0]);
		}
		if (preId && preId !== 'null') {
			this.preId = preId;
		}


		// this.onGetAcctFlowList();
	},
	methods: {
		getValue,
		formatDate,
		handleAmount,

		// 分红统计
		async onGetBonusStat() {
			const resp = await getBonusStat();
			console.log("分红统计", resp);
			this.headerData = resp.data || {};
		},

		// 流水挖矿统计
		async onGetAcctMiningStat() {
			const resp = await getAcctMiningStat();
			console.log("流水挖矿统计", resp);
			if (resp && resp.bizcode === 100) {
				this.headerData = resp.data || {};
			} else {
				return [];
			}
		},

		// 流水贡献值
		async onGetAcctContribution() {
			const resp = await getAcctContribution();
			console.log("流水贡献值", resp);
			if (resp && resp.bizcode === 100) {
				if (resp.data.ratio) {
					const ratio = new Decimal(resp.data.ratio);
					resp.data.ratio = ratio.times(100).toNumber() + '%';
				}
				this.headerData = resp.data || {};

			} else {
				return [];
			}
		},

		// 抽奖次数
		async onGetAcctBalance() {
			const resp = await getAcctBalance();
			if (resp && resp.bizcode === 100) {
				const data = resp.data.find(item => item.categoty === 'raffle');


				console.log("查询账户流水", data);

				this.headerData = data || {};
			} else {
				return [];
			}
		},


		// 查询账户流水
		// async onGetAcctFlowList() {
		// 	const resp = await getAcctFlowList(this.form);
		// 	console.log("查询账户流水", resp);
		// 	if (resp && resp.bizcode === 100) {
		// 		this.orderList = resp.data || [];
		// 	} else {
		// 		return [];
		// 	}
		// },



		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 === "lockAmount") {
				id = this.lockId;
			}
			if (item.key === "pre") {
				id = this.preId;
			}

			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 getAcctFlowList(params);
			console.log("列表数据---1", 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 === "lockAmount") {
				id = this.lockId;
			}
			this.form.id = id;
			this.loadData(); // 加载更多数据
		}
	}
}
</script>

<style lang="scss">
.mine_purse_log_warp {
	height: calc(100vh - var(--status-bar-height));
	overflow-y: hidden;

	.info_warp {
		height: calc(100% - 165rpx);
	}

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


		.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 24rpx;

		.info_center_warp-item {
			flex: 1;
			min-width: 25%;

			.info_center_warp-item-top {
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
				text-align: center;
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.info_center_warp-item-bottom {
				font-size: 26rpx;
				color: #999999;
				margin-top: 15rpx;
				text-align: center;
			}

		}
	}

	.info_list_warp-mine {
		padding: 44rpx 32rpx;
		height: calc(100% - 180rpx - 24rpx - 83rpx - 10rpx);
		// max-height: 100%;



		.purse_info_item-mine {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border: 0;
			height: 128rpx;
			margin-bottom: 0;
			padding: 0;


			.purse_info_left .ipurse_nfo_right {
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				height: 82rpx;

				.purse_data_warp {
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-left: 20rpx;

					.purse_info_name {
						font-size: 28rpx;
						color: #333333;
						font-weight: normal;
					}

					.purse_info_value {
						font-size: 24rpx;
						color: #999999;
					}



					.purse_info_title {
						font-weight: bold;
						font-size: 32px;
						color: #333333;
						text-align: end;
					}
				}
			}

			.purse_info_left {
				.purse_info_name {
					font-weight: 400;
				}

				.purse_info_value {
					margin-top: 8rpx;
				}
			}

			.ipurse_nfo_right {
				.purse_info_value {
					width: 300rpx;
					white-space: nowrap;
					/* 禁止换行 */
					overflow: hidden;
					/* 隐藏溢出内容 */
					text-overflow: ellipsis;
					/* 显示省略号 */
				}
			}
		}

	}
}
</style>