waterElectricityMinApp/pagesElectric/sfxq/sfxq.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><text class="hah">/</text>时间更新到{{sameMonthData.dataTime}}</view>
			</view>
			<view class="content-details">
				<view class="item">
					<view class="num">{{sameMonthData.zongStart}}</view>
					<view class="description">起码（吨）</view>
				</view>
				<view class="item">
					<view class="num">{{sameMonthData.zongEnd}}</view>
					<view class="description">止码（吨）</view>
				</view>
				<view class="item">
					<view class="num">{{sameMonthData.totalPower}}</view>
					<view class="description">用量（吨）</view>
				</view>
				<view class="item">
					<view class="num">{{sameMonthData.totalMoney}}</view>
					<view class="description">消费（元）</view>
				</view>
			</view>
			<view class="txt-color">（注：水费标准：{{moneyPer}}元/吨）</view>
		</view>
		<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="66" align="center">时间</uni-th>
						<uni-th width="64" align="center">起码(吨)</uni-th>
						<uni-th width="64" align="center">止码(吨)</uni-th>
						<uni-th width="64" align="center">用量(吨)</uni-th>
						<uni-th width="64" align="center">消费</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item, index) in tableData" :key="index">
						<uni-td align="center">{{item.dataTime}}</uni-td>
						<uni-td align="center">{{item.zongStart}}</uni-td>
						<uni-td align="center">{{item.zongEnd}}</uni-td>
						<uni-td align="center">{{item.totalPower}}</uni-td>
						<uni-td align="center">{{item.totalMoney}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sameMonthData: {
					dataTime: '',
					zongEnd: 0.00.toFixed(2),
					totalMoney: 0.00.toFixed(2),
					totalPower: 0.00.toFixed(2),
					zongStart: 0.00.toFixed(2)
				},
				moneyPer: 2.1.toFixed(2),
				tableData: [],
				ceshi: 'code',
				stu_number: '', // 学号
				roomSelect: '', // 选择的宿舍号
				dom: ''
			}
		},
		onLoad(options) {
			try {
				// console.log(options);
				this.stu_number = options.card_number;
				this.roomSelect = options.roomSelect;
				// 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') {
					// 获取学号
					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: '/pages/index/index'
							})

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

							return
						}
					}
				}
				// console.log(this.stu_number);
				// console.log(this.roomSelect);
				// 判断是否选择了宿舍号
				if (this.haveSelectRoom()) {
					uni.showToast({
						title: '宿舍号为空',
						icon: 'success'
					})
				}
			} catch (e) {
				console.log(e);
			}
		},
		methods: {
			/**
			 * 判断是否选择了宿舍号
			 */
			haveSelectRoom() {
				if (this.roomSelect == '' || typeof this.roomSelect == 'undefined') {
					return true
				} else {
					// 当月详情
					try {
						this.get_sameMonthDetails()
					} catch (e) {
						uni.showToast({
							title: '当月详情异常'
						})
					}
					// 每月账单
					try {
						this.get_history()
					} catch (e) {
						uni.showToast({
							title: '每月账单异常'
						})
					}
					return false
				}
			},
			/**
			 * 当月详情
			 */
			async get_sameMonthDetails() {
				let res = await this.$myRequest({
					host: this.ceshi,
					url: '/HotWaters/cwaterqueryNow.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						'roomSelect': this.roomSelect
					}
				})

				// console.log(res.data)
				if (res.data.mess === '返回成功') {
					if (res.data.data.length == 0) {
						return
					}

					let zongEnd = res.data.data[0].zongEnd
					let totalMoney = res.data.data[0].totalMoney
					let totalPower = res.data.data[0].totalPower
					let zongStart = res.data.data[0].zongStart

					let dataTime = res.data.data[0].dataTime
					let dt = dataTime.split('-')
					this.sameMonthData.dataTime = dt[0] + '年' + parseInt(dt[1]) + '月'
					this.sameMonthData.zongEnd = zongEnd.toFixed(2)
					this.sameMonthData.totalMoney = totalMoney.toFixed(2)
					this.sameMonthData.totalPower = totalPower.toFixed(2)
					this.sameMonthData.zongStart = zongStart.toFixed(2)
				} else {
					uni.showToast({
						title: '月详情加载异常',
						duration: 1500
					})

					return
				}
			},

			/**
			 * 每月账单
			 */
			async get_history() {
				var reg = /[\u4e00-\u9fa5]/g;
				var str = this.roomSelect;
				this.dom = str.replace(reg, "");
				let res = await this.$myRequest({
					host: this.ceshi,
					url: '/HotWaters/cwaterMonthlist.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						'dom': this.dom,
						'page': 1,
						'rows': 12
					}
				})

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

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

					return;
				} else {
					var tableData = []
					for (let i = 0; i < res.data.rows.length; i++) {
						let dataTime = res.data.rows[i].dataTime;
						let zongStart = res.data.rows[i].zongStart;
						let zongEnd = res.data.rows[i].zongEnd;
						let totalPower = res.data.rows[i].totalPower;
						let totalMoney = res.data.rows[i].totalMoney;

						zongStart = zongStart.toFixed(2);
						zongEnd = zongEnd.toFixed(2);
						totalPower = totalPower.toFixed(2);
						totalMoney = totalMoney.toFixed(2);

						if (this.moneyPer <= 0.00) {
							if (totalPower > 0.00 && totalMoney > 0.00) {
								let moneyPer = totalMoney / totalPower;
								this.moneyPer = moneyPer.toFixed(2);

								if (this.moneyPer <= 0.00) {
									this.moneyPer = 0.61;
								}
							}
						}

						totalMoney = '¥' + totalMoney;
						tableData.push({
							dataTime,
							zongStart,
							zongEnd,
							totalPower,
							totalMoney
						});
					}
					
					this.tableData = tableData.filter(function(item, index, self) {
						return index === self.findIndex(function(t) {
							return t.dataTime === item.dataTime && t.totalPower === item.totalPower && t.totalMoney === item.totalMoney;
						});
					});
				}
			}
		}
	}
</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: #39393A;
					}

					.uni-table-td {
						padding: 3px 5px;
						font-size: 26upx;
						white-space: nowrap;
						text-align: center;
					}
				}
			}

			.txt-color {
				margin: 20rpx 0;
				color: #C1C1C1;
			}
		}
	}
</style>