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

<template>
	<view class="rwa-warp">
		<view class="rwa_header">
			<view class="header_">
				<view style="margin-top: 20rpx;" @click="leftJump">
					<up-image src="/static/common/left_b.png" width="18" height="20" bgColor="#f1f6ff00" />
				</view>
				<view class="title_">数字积分兑换</view>
				<view></view>
			</view>
			<view class="amount_">
				<view class="amount_title">股东行权</view>
				<view class="amount_num">
					<text>{{ balanceObj.curAmount || 0 }}</text>
					<text class="amount_num_usdt">{{ balanceObj.name || USDT }}</text>
				</view>
			</view>
			<view class="but-list-warp">
				<view class="but-item tx-warp" @click="addWithdrawal">
					<view style="margin-top: 10rpx;">
						<up-image src="/static/rwa/tx.png" width="18" height="18" bgColor="#f1f6ff00" />
					</view>
					<view class="but-item-msg">兑换</view>
				</view>
				<view class="but-item jl-warp" @click="jumpWithdrawalLog">
					<view style="margin-top: 10rpx;">
						<up-image src="/static/rwa/jl.png" width="18" height="18" bgColor="#f1f6ff00" />
					</view>
					<view class="but-item-msg">记录</view>
				</view>
			</view>
		</view>
		<view class="rwa_content">
			<view class="rwa_content_title">股东账户</view>
			<view class="rwa_content_list">
				<scroll-view scroll-y="true" @scrolltolower="loadMore" style="height:calc(100vh - 800rpx)">
					<view class="list-item-warp" v-for="item in amountList" :key="item.id"
						v-if="amountList && amountList.length !== 0">
						<up-image src="/static/rwa/account.png" width="40" height="40" bgColor="#f1f6ff00" />
						<view class="list-item-content-warp">
							<view>{{ item.name }}-{{ item.account }}</view>
							<view class="list-item-content-time">{{ formatDate(item.ctdate) }}</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 class="rwa_content_add">
				<view class="rwa_content_add_but" @click="addRwa">
					<up-image src="/static/rwa/add.png" width="14" height="14" bgColor="#f1f6ff00" />
					<view style="margin-left: 10rpx;">添加股东账户</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

import { getExchUsers } from '@/api/finance.js';
import { formatDate } from '@/utils/index.js';
import { getAcctBalance } from '@/api/finance.js';

export default {
	data() {
		return {
			balanceObj: {},
			amountList: [],
			form: {
				page: 1,
				pageSize: 10,
			},
			loading: false,
		}
	},
	onShow() {
		this.getAcctBalance();
		this.loadData();
	},
	methods: {
		formatDate,
		leftJump() {
			uni.switchTab({
				url: '/pages/mine/mine',
			});
		},
		addRwa() {
			uni.navigateTo({
				url: '/pages/rwa_package/rwa_binding/rwa_binding',
			})
		},
		addWithdrawal() {
			uni.navigateTo({
				url: '/pages/rwa_package/rwa_withdrawal/rwa_withdrawal',
			})
		},
		jumpWithdrawalLog() {
			uni.navigateTo({
				url: '/pages/rwa_package/rwa_withdrawal_log/rwa_withdrawal_log?back=rwa',
			})
		},
		// 查询余额
		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.balanceObj = 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.amountList = [...this.amountList, ...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 getExchUsers(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" scoped>
.rwa-warp {
	background: linear-gradient(90deg, $app-zt-color, #AE61FA);
	height: calc(100vh - 0rpx);
	overflow: hidden;
	color: #FFFFFF;

	.rwa_header {
		padding: 30rpx;

		.amount_ {
			margin-top: 30rpx;

			.amount_title {
				font-weight: 500;
				font-size: 24rpx;
			}

			.amount_num {
				font-weight: 500;
				font-size: 88rpx;
				margin-top: 10rpx;
			}

			.amount_num_usdt {
				margin-left: 6rpx;
				font-size: 44rpx;
			}
		}

		.but-list-warp {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;

			.but-item {
				width: 46%;
				display: flex;
				text-align: center;
				align-items: center;
				justify-content: center;
				padding: 16rpx 0;
			}

			.tx-warp {
				background: #FFFFFF;
				border-radius: 12rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #823CF6;
			}

			.jl-warp {
				border-radius: 12rpx;
				border: 4rpx solid #FFFFFF;
			}

			.but-item-msg {
				margin-left: 10rpx;
			}
		}
	}

	.rwa_content {
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		height: calc(100vh - 590rpx);
		overflow: hidden;

		.rwa_content_title {
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
		}

		.rwa_content_list {
			.list-item-warp {
				margin-top: 20rpx;
				height: 80rpx;
				background-image: url("data:image/png;base64,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
				background-size: 100% 100%;
				background-position: center;
				/* 将图片居中显示 */
				padding: 20rpx;
				display: flex;
				align-items: center;
			}

			.list-item-content-warp {
				margin-left: 10rpx;
				font-weight: bold;
				font-size: 28rpx;

				.list-item-content-time {
					font-weight: 400;
					font-size: 24rpx;
					margin-top: 10rpx;
				}
			}
		}

		.rwa_content_add {
			position: fixed;
			bottom: 56rpx;
			width: calc(100% - 60rpx);
			display: flex;
			justify-content: center;

			.rwa_content_add_but {
				display: flex;
				justify-content: center;
				width: 80%;
				background-color: #FFFFFF;
				// background: linear-gradient(90deg, $app-zt-color, #AE61FA);
				border-radius: 16rpx;
				border: 2px solid $app-zt-color;
				font-weight: bold;
				font-size: 28rpx;
				color: $app-zt-color;
				padding: 26rpx 0;
			}
		}
	}

	.title_ {
		color: #FFFFFF !important;
	}
}
</style>