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-sanjiaoxing"></text>
					</view>
				</picker>
				<!-- <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-sanjiaoxing"></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.name}}</text>
							<text class="item-list-txt">{{item.tdate}} {{item.time}}</text>
						</view>
						<text class="item-list-txt show-money">{{item.money}}</text>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import data from '../../static/test_xiaofei.js'
	export default {
		data() {
			return {
				date_time: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
				use_elec: [5, 19, 16, 24, 38, 22, 15, 16, 14, 17, 22, 20],
				chartData: {
					categories: [],
					series: [{
						data: [],
					}],
				},
				date: getDate({
					// format: true
				}),
				// startDate: getDate('start_date'),
				// endDate: getDate('end_date'),
				all_data: data, //所有数据
				list: [] ,//消费列表
				card_number: 0,   //用户卡号
			}
		},
		onLoad(options){
			this.chartData.categories = this.date_time;
			this.chartData.series[0].data = this.use_elec;
			// console.log(this.chartData.series[0].data)
			
			this.list = this.all_data.data[0].xiaofei;
			// this.name = this.all_data.data[0].xiaofei.name;
			// console.log(this.date)
			this.card_number = options.card_number
			// console.log(this.card_number)
		},
		methods: {
			bindDateChange: function(e) {
				this.date = e.detail.value
				// console.log(this.date)
			},
			
		},
		
	}
	function getDate(type) {
		const date = new Date();
	
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		// let day = date.getDate();
	
		// if (type === 'start_date') {
		// 	year = year - 4;
		// } else if (type === 'end_date') {
		// 	year = year;
		// }
	
		month = month > 9 ? month : '0' + month;
		// day = day > 9 ? day : '0' + day;
	
		return `${year}-${month}`;
	}
</script>

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