waterElectricityMinApp/pages/show/show.vue

<template>
	<view class="container">
		<view class="show-item">
			<view class="show-elec-label">
				<view class="show-item-logol">
					<image class="show-item-logo-left" src="/static/image/show.png"></image>
				</view>
				<view class="show-item-label">能耗走势图</view>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="demotype" :chartData="chartData" />
			</view>
			<view class="select-show">
				<button class="first-button">月</button>
			</view>
		</view>
		<view class="show-item-date">
			<view class="show-elec-label">
				<view class="show-item-logol">
					<image class="show-item-logo-left" src="/static/image/record.png"></image>
				</view>
				<view class="show-item-label show-label">缴费记录</view>
			</view>
			<view class="select-date">
				<picker mode="date" fields="month" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">
						<text class="uni-input-label">{{date}}</text>
						<text class="iconfont icon-arrow-down"></text>
					</view>
				</picker>
				<view class="uni-list">
					<view class="item-list" v-for="(item, i) in list" :key="i">
						<view class="item-list-left">
							<text class="item-list-txt">{{item.user_name}}</text>
							<text class="item-list-txt">{{item.re_time}}</text>
						</view>
						<text class="item-list-txt show-money">{{item.account}}</text>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData: {
					categories: [],
					series: [{
						data: [],
					}],
				},
				date: this.$getDate({
					format: true
				}),
				startDate: this.$getDate('start_date'),
				endDate: this.$getDate('end_date'),
				all_data: '', //所有数据
				list: [], //消费列表
				code: '',
				ceshi: 'code',
				stu_number: 0, //用户卡号
			}
		},
		onLoad() {
			// 获取学号
			this.stu_number = this.$store.state.stu_number
			// 充值记录
			this.get_chongzhijilu()
			// 消费记录
			this.get_xiaofeijilu()
		},
		methods: {
			/**
			 * 获取选择日期
			 * @param {Object} e
			 */
			bindDateChange: function(e) {
				this.date = e.detail.value
				// 充值记录
				this.get_chongzhijilu()
			},
			/**
			 * 获取充值记录
			 */
			async get_chongzhijilu() {
				// console.log(this.$store.state.stu_number);
				if (this.$store.state.stu_number != '') {
					const res = await this.$myRequest({
						host: this.ceshi,
						url: '/HotWaters/elqueyRecordEle.action',
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: {
							'stu_number': this.$store.state.stu_number,
							're_time': this.date
						}
					})
					
					// console.log(res);
					if (res.data.mess == '未查到记录') {
						uni.showToast({
							title: '该月无缴费记录',
							icon: 'success'
						});
					} else {
						// 充值绑定显示到界面
						for (var i = 0; i < res.data.data.length; i++) {
							this.list.push(res.data.data[i])
						}
					}
				} else {
					uni.showToast({
						title: '学号为空',
						icon: 'success'
					});
				}
			},
			/**
			 * 缴费记录
			 */
			async get_xiaofeijilu() {
				if (this.$store.state.building.roomSelect != '') {
					const res = await this.$myRequest({
						host: this.ceshi,
						url: '/HotWaters/buildgetMonthBill.action',
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: {
							'roomSelect': this.$store.state.building.roomSelect
						}
					})

					// console.log(res);
					if (res.data.mess == '未查询到数据') {
						return
					}
					let chrt_data = {
						categories: [],
						series: [{
							data: [],
						}],
					}
					for (var i = 0; i < res.data.date_time.length; i++) {
						chrt_data.categories.push(res.data.date_time[i])
						chrt_data.series[0].data.push(res.data.use_elc[i])
					}

					// console.log(chrt_data);
					setTimeout(() => {
						this.chartData = chrt_data;
					}, 1000)
				} else {
					uni.showToast({
						title: '宿舍号为空',
						icon: 'success'
					});
				}
			}
		}
	}
</script>

<style>
	@import url("show.css");
</style>