BiKing/pages/property/bill.vue

<template>
	<view class="pages-content" :rise-fall="stocksColor">
		<!-- 头部 -->
		<headContent borderBottom>
			<template #left>
				<reverse-back />
			</template>
			<template #content>
				<view class="haed-title">
					{{ getTitle(pageType) }}
				</view>
			</template>
		</headContent>

		<uni-table class="table-box" emptyText="" v-if="pageType">
			<!-- 表头行 -->
			<uni-tr>
				<uni-th class="table-title" align="left">{{ tableTh[pageType][0].lable }}</uni-th>
				<uni-th class="table-title" align="right">{{ tableTh[pageType][1].lable }}</uni-th>
				<uni-th class="table-title" align="right">{{ tableTh[pageType][2].lable }}</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr :class="['sss', $setColor(item.change)]" v-for="(item , index) in tableData" :key="`tb_${index}`">
				<uni-td>
					<view class="table-text-01">USDT</view>
					<view class="table-text-02">{{ item.create_time }}</view>
				</uni-td>
				<uni-td style="text-align: right;">
					<view class="table-text-03 color">{{ item.change }}</view>
					<view class="table-text-04">{{ item.memo }}</view>
				</uni-td>
				<uni-td style="text-align: right;">
					<view class="table-text-05">{{ item.after }}</view>

				</uni-td>
			</uni-tr>

		</uni-table>

		<!-- 加载动画 -->
		<uni-load-more :status="moreStatus" v-show="tableData.length > 0 || moreStatus === 'loading' " :showIcon="false"/>

		<!-- 暂无数据 -->
		<no-data v-show="tableData.length === 0 && moreStatus === 'noMore' " />
	</view>
</template>

<script>
	import reverseBack from "@/components/headModules/reverse-back.vue"
 
	import {
		Api_getUserBill
	} from "@/api/index.js"
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			reverseBack
		},
		data() {
			return {
				pageType: undefined,
				moreStatus: '', // 上拉的状态：more-loading前；loading-loading中；noMore-没有更多了
				tableTh: [
					//合约账户
					[{
							lable: '账单信息',
							val: 'key'
						},
						{
							lable: '数量/类别',
							val: 'key'
						},
						{
							lable: '余额',
							val: 'key'
						}
					],
					//币币账户
					[{
							lable: '币种/时间',
							val: 'key'
						},
						{
							lable: '金额/类型',
							val: 'key'
						},
						{
							lable: '余额',
							val: 'key'
						}
					],
					//法币账户
					[{
							lable: '类型/时间',
							val: 'key'
						},
						{
							lable: '数量',
							val: 'key'
						},
						{
							lable: '状态',
							val: 'key'
						}
					],
					//赠金账户
					[{
							lable: '账单信息',
							val: 'key'
						},
						{
							lable: '数量/类别',
							val: 'key'
						},
						{
							lable: '余额',
							val: 'key'
						}
					]
				],


				tableData: [],
				page: 1,
			};
		},
		onLoad(opt) {
			this.pageType = opt?.type || undefined
			// navigationArr: [
			// 	'合约账户',
			// 	'币币账户',
			// 	'法币账户',
			// 	'赠金账户'
			// ]
			if (this.pageType) {
				this.getUserBill()
			} else {
				this.moreStatus = 'noMore'
			}

		},
		computed: {
			...mapGetters([
				'stocksColor'
			]),
		},
		onReachBottom() {
			console.log('页面触底')
			if (!['noMore', 'loading'].includes(this.moreStatus)) {
				this.page++;
				this.getUserBill();
			}
		},
		methods: {
			getTitle(type) {
				let title = ''
				switch (type) {
					case '0':
						title = '用户账单';
						break;
					case '1':
						title = '资产记录';
						break;
					case '2':
						title = '资产记录';
						break;
					case '3':
						title = '用户账单';
						break;
					default:
						title = '';
				}
				return title
			},
			// 获取用户账单
			getUserBill() {
				// moreStatus: 'more-loading', // 上拉的状态：more-loading前；loading-loading中；noMore-没有更多了
				this.moreStatus = 'loading';
				const type = this.pageType - 0 + 1
				Api_getUserBill({
					page: this.page,
					limit: 15,
					currency: 3,
					type: type === 1 ? 3 : type,
					status: 4

				}).then(res => {
					this.tableData = this.tableData.concat(res.list);
					if (this.tableData.length >= res.count) {
						this.moreStatus = 'noMore';
					} else {
						this.moreStatus = 'more';
					};
				}).catch(err => {
					if (this.page > 1) {
						this.page = 1;
						this.moreStatus = 'more';
					} else {
						this.tableData = [];
						this.moreStatus = 'noMore';
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages-content {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
	}

	.table-box {
		background-color: $modules-box-bg;

		::v-deep .uni-table-loading {
			display: none;
		}

		.sss {
			padding: 0 $pages-padding ;
		}

		::v-deep .uni-table-tr {
			display: flex;

			// align-items: center;
			.uni-table-th,
			.uni-table-td {
				flex-shrink: 0;
				display: flex;
				flex-direction: column;
				justify-content: center;

				&:nth-child(1) {
					flex: 4;
				}

				&:nth-child(2) {
					flex: 3;
				}

				&:nth-child(3) {
					flex: 3;
				}
			}

			.uni-table-td {
				line-height: 1.2;
				padding: 25rpx 20rpx;
				word-break: break-all;
				white-space: pre-wrap;
				border-bottom: 1rpx solid $border-color4;

				&:last-child,
				&:first-child {
					padding-right: 0;
					padding-left: 0;
				}
			}

			.uni-table-th {
				border-bottom: 2rpx solid $border-color4;

				&:last-child {
					padding-right: $pages-padding;
				}

				&:first-child {
					padding-left: $pages-padding;
				}
			}
		}

		.table-title {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #1a1a1a;
		}

		.table-text-02,
		.table-text-04 {
			padding-top: 10rpx;
		}

		.table-text-01 {

			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #1a1a1a;
		}

		.table-text-02 {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #808080;
		}

		.table-text-03 {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #0abd76;
		}

		.table-text-04 {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #808080;
		}

		.table-text-05 {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #1a1a1a;
		}
	}
</style>