BiKing/pages/property/bill.vue

<template>
	<view class="pages-content">
		<!-- 头部 -->
		<headContent>
			<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" v-for="item in tableData">
				<uni-td>
					<view class="table-text-01">USDT</view>
					<view class="table-text-02">2023-04-0108:00:13</view>
				</uni-td>
				<uni-td style="text-align: right;">
					<view class="table-text-03">16.2761</view>
					<view class="table-text-04">结算资金费率</view>
				</uni-td>
				<uni-td style="text-align: right;">
					<view class="table-text-05">29997.9123</view>

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

		</uni-table>

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

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

<script>
	import reverseBack from "@/components/headModules/reverse-back.vue"
	import noData from "./modules/no-data.vue"
	export default {
		components: {
			reverseBack,
			noData
		},
		data() {
			return {
				pageType: undefined,
				moreStatus: 'more-loading', // 上拉的状态：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: [1, 2, 3, 4, 5]
			};
		},
		onLoad(opt) {
			this.pageType = opt?.type || undefined
			console.log('opt = ', this.pageType)
			// navigationArr: [
			// 	'合约账户',
			// 	'币币账户',
			// 	'法币账户',
			// 	'赠金账户'
			// ]
		},

		onReachBottom() {
			console.log('页面触底')
		},
		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
			}
		}
	}
</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 #f5f5f5;

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

			.uni-table-th {
				border-bottom: 2rpx solid #e6e6e6;

				&: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-01 {

			font-size: 28rpx;
			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: 28rpx;
			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: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #1a1a1a;
		}
	}
</style>