frontend-app/pages/rwa_package/rwa_withdrawal_log/rwa_withdrawal_log.vue

<template>
	<view class="rwa_withdrawal_log">
		<Header leftTitle="行权记录" left-path-type="navigateTo" :leftPath="leftPath" />
		<view class="_log_content">
			<view class="_log_content_title">
				<view>行权账户邮箱/时间</view>
				<view>金额/状态</view>
			</view>
			<scroll-view scroll-y="true" @scrolltolower="loadMore" style="height:calc(100vh - 300rpx)">
				<view class="_content_item" v-for="item in logList" :key="item.id" v-if="logList && logList.length !== 0">
					<view class="_content_item_no _content_item_no_buto">NO.{{ item.tradeNo }}</view>
					<!-- <view class="_content_item_no _content_item_no_buto" v-if="item.exchNo">股东流水号：{{item.exchNo}}</view> -->
					<view class="_content_item_but">
						<view class="_content_item_left">
							<up-image src="/static/rwa/account.png" width="40" height="40" bgColor="#f1f6ff00" />
							<view class="_content_item_left_">
								<view class="_content_item_left_title">{{ item.name }}-{{ item.account }}</view>
								<view class="_content_item_left_val">{{ formatDate(item.ctdate) }}</view>
							</view>
						</view>
						<view class="_content_item_right">
							<view class="_content_item_left_title _content_item_left_amount">{{ item.amount }} {{ categotyObj.name ||
								'USDT' }}</view>
							<view class="_content_item_left_status">{{ getValue(RWA_STATUS, item.status) }}</view>
						</view>
					</view>
				</view>
				<view v-else class="not_order_warp">
					<up-image src="https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/kzt.png" width="100" height="100"
						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>
</template>

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

export default {
	components: { Header },
	computed: {
		RWA_STATUS() {
			return RWA_STATUS;
		}
	},
	data() {
		return {
			leftPath: "/pages/rwa_package/rwa_withdrawal/rwa_withdrawal",
			logList: [],
			form: {
				page: 1,
				pageSize: 10,
			},
			loading: false,
			categotyObj: {},
		};
	},
	onLoad(option) {
		const back = option.back;
		if (back === "rwa") {
			this.leftPath = "/pages/rwa_package/rwa/rwa"
		}
		if (back === "withdrawal") {
			this.leftPath = "/pages/rwa_package/rwa_withdrawal/rwa_withdrawal"
		}
		this.loadData();
		this.getAcctBalance();
	},
	methods: {
		getValue,
		formatDate,
		// 查询余额
		async getAcctBalance() {
			const resp = await getAcctBalance();
			let data = {};
			if (resp && resp.bizcode === 100) {
				if (resp.data) {
					resp.data.map(item => {
						// 交易币
						if (item.categoty === "vcoin") {
							data = item;
						}
					})
				}
			}
			this.categotyObj = data;
		},
		// 加载数据的方法
		async loadData() {
			if (this.loading) return; // 如果正在加载，则不重复加载
			this.loading = true; // 设置加载状态为true
			try {
				// 模拟异步获取数据，实际应用中应该替换为你的数据获取逻辑，例如API调用
				const newData = await this.fetchData(this.form.page, this.form.pageSize);
				this.logList = [...this.logList, ...newData]; // 将新数据添加到列表中
				this.form.page++; // 页码加1
			} catch (error) {
				console.error('加载数据失败:', error);
			} finally {
				this.loading = false; // 设置加载状态为false
			}
		},
		// 模拟获取数据的方法，实际应用中应该替换为你的数据获取逻辑，例如从服务器获取数据
		async fetchData(page, pageSize) {
			const params = {
				page,
				pageSize,
			}
			console.log("params", params);
			const resp = await getExchTransferRecord(params);
			console.log("resp", resp);
			if (resp && resp.bizcode === 100) {
				const data = resp.data && resp.data.entitys || [];
				return data
			} else {
				return [];
			}
		},
		// 当滚动到底部时触发的方法
		loadMore() {
			this.loadData(); // 加载更多数据
		}
	}
}
</script>

<style lang="scss">
.rwa_withdrawal_log {
	background: #F5F5F5;
	height: calc(100vh - 0rpx);
	overflow: hidden;

	._log_content {
		height: calc(100vh - 216rpx);
		padding: 30rpx;

		._log_content_title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
			margin-bottom: 20rpx;
		}

		._content_item {
			margin-bottom: 20rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx;

			._content_item_no {
				padding: 0 0 20rpx 0;
				text-align: right;
				font-size: 20rpx;
			}

			._content_item_no_buto {
				border-bottom: 1rpx solid #EEEEEE;
			}

			._content_item_but {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;
			}

			._content_item_left {
				display: flex;
				align-items: center;
			}

			._content_item_left_ {
				margin-left: 10rpx;
			}

			._content_item_left_title {
				font-weight: bold;
				font-size: 22rpx;
				color: #000000;
				margin-bottom: 10rpx;
			}

			._content_item_left_amount {
				text-align: right;
			}

			._content_item_left_exchNo {
				font-size: 20rpx;
				color: #9E9E9E;
				margin-bottom: 10rpx;
			}

			._content_item_left_val {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}

			._content_item_left_status {
				font-weight: 400;
				font-size: 20rpx;
				text-align: right;
			}
		}
	}
}
</style>