waterElectricityMinApp/pagesWater/reshuiDetails/reshuiDetails.vue

<template>
	<view class="container">
		<view class="line"></view>
		<view class="same-month">
			<view class="title">
				<view class="vertical-line"></view>
				<view class="title-txt"><text class="caption">充值详情</text></view>
			</view>
			<view class="content-details">
				<uni-table :border="true" :stripe="true" emptyText="暂无更多数据">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th width="30" align="center">姓名</uni-th>
						<uni-th width="30" align="center">金额</uni-th>
						<uni-th width="30" align="center">时间</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item, index) in tableData" :key="index">
						<uni-td align="center">{{item.user_name}}</uni-td>
						<uni-td align="center">{{item.account}}</uni-td>
						<uni-td align="center">{{item.re_time}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			<view class="uni-pagination-box">
				<uni-pagination :page-size="pageSize" :current="pageCurrent" :total="totalNum" @change="page_change" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [],
				ceshi: 'code',
				stu_number: '', // 学号
				// 每页数据量
				pageSize: 12,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				totalNum: 0
			}
		},
		onLoad() {
			try {
				// 获取学号
				this.stu_number = this.$store.state.userInfo.card_number
				this.roomSelect = this.$store.state.building.roomSelect

				if (this.stu_number == '' || this.roomSelect == '' || typeof(this.stu_number) == 'undefined' || typeof(this
						.roomSelect) == 'undefined') {
					const userinfo = uni.getStorageSync('userinfo_storage_key')
					if (userinfo) {
						this.stu_number = userinfo.card_number
						this.roomSelect = userinfo.campus + userinfo.dorm_number
					} else {
						uni.redirectTo({
							url: '../index/index'
						})

						uni.showToast({
							icon: 'none',
							title: '学号或宿舍号为空，请授权',
							duration: 1500
						})

						return
					}
				}
				// console.log(this.stu_number);
				this.get_history()
			} catch (e) {
				uni.showToast({
					title: '获取学号异常：' + e.message,
					duration: 1500
				})
				console.log('获取学号异常：' + e.message);
			}
		},
		methods: {
			/**
			 * 分页，页码改变
			 */
			page_change(e) {
				this.pageCurrent = e.current
				this.get_history()
			},
			/**
			 * 充值详情
			 */
			async get_history() {
				let _this = this
				let res = await this.$myRequest({
					host: this.ceshi,
					url: '/HotWaters/wpqueryRecharge.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						'stu_number': this.stu_number,
						// 'stu_number': '360481200301045025',
						'page': _this.pageCurrent,
						'rows': _this.pageSize
					}
				})

				// console.log(res.data)
				if (res.data.rows.length == 0) {
					return
				}

				if (typeof res.data.rows === 'undefined') {
					uni.showToast({
						title: '加载数据异常',
						duration: 1500
					})

					return
				} else {
					let tdata = []
					for (let i = 0; i < res.data.rows.length; i++) {
						let user_name = res.data.rows[i].user_name
						let account = res.data.rows[i].account
						let re_time = res.data.rows[i].re_time

						account = '¥' + account.toFixed(2)

						tdata.push({
							user_name,
							account,
							re_time
						})
					}
					// 填充表格
					this.tableData = tdata
					// 填充分页参数
					this.totalNum = res.data.total
					this.pageSize = res.data.numPerPage
					this.pageCurrent = res.data.currentPage
					this.totalPage = res.data.totalPage
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		font-size: 29upx;
		font-family: "Microsoft YaHei";

		.line {
			height: 10rpx;
			background-color: #f5f5f5;
		}

		.same-month {
			display: flex;
			flex-direction: column;
			padding: 20rpx 30rpx;

			.title {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				.vertical-line {
					display: inline-block;
					margin-right: 20rpx;
					width: 10rpx;
					height: 45rpx;
					background-color: #0282F8;
				}

				.title-txt {
					display: flex;
					flex-direction: row;
					align-items: flex-end;
					color: #C1C1C1;

					.caption {
						color: #2b2b2b;
						font-size: 40upx;
					}

					.hah {
						display: flex;
						margin: 0 10rpx;
					}
				}
			}

			.content-details {
				display: flex;
				justify-content: space-around;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.num {
						font-size: 40upx;
					}

					.description {
						color: #9a9a9a;
					}
				}

				/deep/ .uni-table {

					.uni-table-th {
						padding: 6px 8px;
						font-size: 26upx;
						white-space: nowrap;
						text-align: center;
						background-color: #E5F2FE;
						color: #5b5b5d;
					}

					.uni-table-td {
						padding: 3px 5px;
						font-size: 26upx;
						white-space: nowrap;
						text-align: center;
						color: #000000;
					}
				}
			}
		}
	}
</style>