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 {
				screenHeight: 0,
				stu_number: '', // 学号
				date: this.$getDate({
					format: true
				}),
				startDate: this.$getDate('start_date'),
				endDate: this.$getDate('end_date'),
				chongzhi_items: [{
					desc: '手机充值',
					begin_time: '10-12 11:15:15',
					use_amount: '-20.00'
				}, {
					desc: '手机充值',
					begin_time: '10-12 11:15:15',
					use_amount: '-20.00'
				}, {
					desc: '手机充值',
					begin_time: '10-12 11:15:15',
					use_amount: '-20.00'
				}], // 消费记录
				ceshi: 'code',
			}
		},
		onLoad() {
			if (this.stu_number && typeof(this.stu_number) != 'undefined') {
				// 获取基本信息
				this.get_base_info('options', 'onShow')
			}
		},
		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(options, param) {
				// console.log(options);
				try {
					// 获取学号
					this.stu_number = this.$store.state.userInfo.card_number

					if (this.stu_number == '' || typeof(this.stu_number) == 'undefined') {
						const userinfo = uni.getStorageSync('userinfo_storage_key')
						if (userinfo) {
							this.stu_number = userinfo.card_number
						} else {
							uni.navigateTo({
								url: '../index/index?from=' + options.from
							})

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

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

				if (param == 'onShow') {
					if (this.$store.state.payInfo.from == 'reshui_pay') {
						uni.showToast({
							title: this.$store.state.payInfo.resultMsg,
							icon: 'success',
							success: () => {
								this.$store.state.payInfo.resultMsg = ''
								this.$store.state.payInfo.from = ''
							}
						})
					}
				}

				// 获取code
				this.getCode(options, param)
			},
			/**
			 * 获得code
			 */
			getCode(options, param) {
				uni.login({
					success: (res) => {
						// console.log('getCode', res);
						if (res.code) {
							// 请求服务器，获得openid
							this.getOpenId(options, res.code, param)
						} else {
							uni.showToast({
								title: res.errMsg,
								icon: 'none'
							});
						}
					}
				})
			},
			/**
			 * 请求服务器，获得openid
			 */
			async getOpenId(options, param_code, param) {
				const res = await this.$myRequest({
					host: this.ceshi,
					url: '/HotWaters/wpget_stu.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						code: param_code
					}
				})

				// console.log(res);
				if (res.data.mess == '返回成功') {
					// stu_number是否存在
					let cardNumber = res.data.info[0].card_number
					if (typeof(cardNumber) != 'undefined' && cardNumber != '' && JSON.stringify(cardNumber) != '{}') {
						// 学号 和 姓名
						this.stu_number = res.data.info[0].stu_number
						this.user_name = res.data.info[0].user_name
						// 剩余金额
						this.amount = res.data.info[0].balance.toFixed(2)
						// if (this.amount > 0)
						this.$store.state.reshui_amount = this.amount
						// 组合楼栋宿舍号
						this.dorm_number = res.data.info[0].build + res.data.info[0].dom
						// 校区
						// this.compus = res.data.info[0].campus

						if (param == 'onLoad' && typeof(options.from) != 'undefined' && options.from != 0) {
							// 初始化蓝牙
							this.openBluetoothAdapter()
						}
						// 请求选定的月份消费记录
						this.request_consumption_records()
					} else {
						uni.showToast({
							title: '未获取到学号!',
							icon: 'success'
						});

						uni.navigateTo({
							url: '../index/index?from=' + options.from
						})
					}
				} else if (res.data.mess == '未查询到用户信息') {
					// 数据库中 未查询到用户信息，就清除本地存储
					uni.removeStorageSync('userinfo_storage_key');

					uni.showToast({
						title: '获取用户信息失败！'
					})

					if (options && typeof(options.from) != 'undefined' && typeof(options.from) != '') {
						uni.navigateTo({
							url: '../index/index?from=' + options.from
						})
					} else {
						uni.redirectTo({
							url: '../index/index?from=0'
						});
					}
				}
			},
			/**
			 * 选择消费年月
			 */
			bindDateChange(e) {
				this.date = e.detail.value
				this.changeDate = true
				// 请求选定的月份消费记录
				this.request_consumption_records()
			},
			/**
			 * 请求选定的月份消费记录
			 */
			async request_consumption_records() {
				try {
					if (this.stu_number != '' && typeof(this.stu_number) != 'undefined') {
						const res = await this.$myRequest({
							host: this.ceshi,
							url: '/HotWaters/wpqueryConsume.action',
							method: 'POST',
							header: {
								'content-type': 'application/x-www-form-urlencoded'
							},
							data: {
								stu_number: this.stu_number,
								begin_time: this.date
							}
						});

						// console.log(res);
						if (res.data.mess == '返回成功') {
							this.chongzhi_items = []
							// 消费记录
							let items = res.data.data
							for (var i = 0; i < items.length; i++) {
								this.chongzhi_items.push(items[i])
							}
						} else {
							if (this.changeDate) {
								uni.showToast({
									icon: 'success',
									title: res.data.mess,
									success: () => {
										this.changeDate = false
									}
								})

								if (res.data.mess == '本月无消费记录') {
									this.chongzhi_items = []
								}
							}
						}
					} else {
						uni.showToast({
							icon: 'success',
							title: '未获得学号'
						})
					}
				} catch (e) {
					console.log('请求选定的月份消费记录：' + e.message);
				}
			},
			/**
			 * 计算屏幕的高度
			 */
			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">
	.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>