waterElectricityMinApp/pagesAir/rechargeRecord/rechargeRecord.vue

<template>
	<view class="container">
		<view class="line"></view>
		<view class="uni-list-cell-db">
			<picker mode="date" :value="date" fields="month" :start="startDate" :end="endDate" @change="bindDateChange">
				<view class="uni-input">
					<text>{{date}}</text>
					<text class="iconfont icon-arrow-down"></text>
				</view>
			</picker>
		</view>
		<view class="line"></view>
		<scroll-view scroll-y="true" :style="{height: screenHeight}" @scrolltoupper="scroll_to_upper"
			@scrolltolower="scroll_to_lower">
			<view class="item-list" v-for="(item, i) in chongzhi_items" :key="i">
				<view class="item-left">
					<image src="../static/images/chongzhi-icon.png" mode=""></image>
					<view class="left-desc">
						<text class="item-list-title">{{item.desc}}</text>
						<text class="item-list-time">{{item.begin_time}}</text>
					</view>
				</view>
				<text class="item-right">{{numFilter(item.use_amount)}}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ceshi: 'air',
				id_card: '', // 身份证号
				date: this.$getDate({
					format: true
				}),
				startDate: this.$getDate('start_date'),
				endDate: this.$getDate('end_date'),
				chongzhi_items: [], // 消费记录
				screenHeight: 0,
			}
		},
		onLoad(options) {
			// 获取身份证号
			this.get_base_info()
		},
		onShow() {
			// 从新计算高度
			setTimeout(() => {
				this.calc_screen_height()
			}, 1500)
		},
		methods: {
			/**
			 * 滚动到顶部提示
			 */
			scroll_to_upper() {
				uni.showToast({
					title: '到顶了！',
					icon: 'none',
					duration: 500
				})
			},
			/**
			 * 滚动到底部提示
			 */
			scroll_to_lower() {
				uni.showToast({
					title: '到底了！',
					icon: 'none',
					duration: 500
				})
			},
			/**
			 * 保留小数点数值后两位，尾数四舍五入
			 * @param {Object} value
			 */
			numFilter(value) {
				// 截取当前数据到小数点后两位
				let realVal = parseFloat(value).toFixed(2)
				return realVal
			},
			/**
			 * 获取身份证号
			 */
			get_base_info() {
				try {
					if (this.id_card == '' || typeof(this.id_card) == 'undefined') {
						const userinfo = uni.getStorageSync('userinfo_storage_key')
						if (userinfo) {
							this.id_card = userinfo.id_card
						} else {
							uni.navigateTo({
								url: '../index/index?from=' + options.from
							})

							uni.showToast({
								icon: 'none',
								title: '身份证号为空，请进行授权',
								duration: 3000
							});

							return
						}
					}
				} catch (e) {
					console.log('获取基本信息：' + e.message);
				}

				this.getRechargeRecord()
			},
			/**
			 * 请求服务器，获得充值记录
			 */
			async getRechargeRecord() {
				const res = await this.$myRequest({
					host: this.ceshi,
					url: '/airManage/rechargequeryOwn.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						// sfzh: '36012325455222',
						sfzh: this.id_card,
						month: this.date
					}
				})

				// console.log(res.data);
				let data = res.data
				if (data.code == 200) {
					this.chongzhi_items = []
					if (typeof data.data != 'undefined' && data.data != '' && JSON.stringify(data.data) != '{}') {
						let tmp_items = []
						for (var i = 0; i < data.data.length; i++) {
							tmp_items.push({
								begin_time: data.data[i].time,
								// desc: data.data[i].order_num,
								desc: '空调充值',
								use_amount: data.data[i].account
							})
						}
						this.chongzhi_items = tmp_items
					} else {
						uni.showToast({
							title: '无充值记录!',
							icon: 'success'
						});
					}
				} else {
					uni.showToast({
						title: data.data.message
					})
				}
			},
			/**
			 * 选择消费年月
			 */
			bindDateChange(e) {
				this.date = e.detail.value
				// 请求选定的月份消费记录
				this.getRechargeRecord()
			},
			/**
			 * 计算屏幕的高度
			 */
			calc_screen_height() {
				uni.getSystemInfo({
					success: res => {
						let h = ((res.screenHeight * (750 / res.windowWidth)) - 280) //将px 转换rpx
						this.screenHeight = Math.floor(h) + 'rpx'
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
		font-family: "Microsoft YaHei-3970(82674968)";
		width: 730rpx;
		padding: 10rpx;

		.line {
			height: 20rpx;
		}

		.uni-list-cell-db {

			.uni-input {
				display: flex;
				justify-content: space-around;
				align-items: center;
				width: 200rpx;
				height: 60rpx;
				border: 2rpx solid #CCCCCC;
				border-radius: 6rpx;
				font-size: 32upx;
			}
		}

		.item-list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 10rpx;
			border-bottom: 1rpx solid #CCCCCC;

			.item-left {
				display: flex;
				align-items: center;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				.left-desc {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					margin-left: 20rpx;

					.item-list-title {
						font-size: 32upx;
						font-weight: bold;
					}

					.item-list-time {
						color: #808080;
					}
				}
			}

			.item-right {
				font-size: 36upx;
				font-weight: bold;
				color: #333333;
			}
		}
	}
</style>