JP-ChargeTeam51/pages/record/index.vue

<template>
	<view>
		<u-navbar title="充电订单"></u-navbar>
		
		<view class="record">
			<view class="recordTime" @click="show = true">
				<u-picker mode="time" v-model="show" :params="params" @confirm="confirmTime" @cancel="cancelTime"></u-picker>
				<p>{{month}}月</p>
				<u-icon name="arrow-down-s-fill" custom-prefix="custom-icon" color="#B3B3B3" size="32"></u-icon>
			</view>
			<view class="carNone" v-if="chargeList.length == 0">
				<img src="static/img/暂无数据-缺省页.png" alt="">
				<p>暂无充电订单</p>
			</view>
			<view class="recordList" v-if="chargeList.length > 0">
				<view class="recordList-item" v-for="(item,index) in chargeList" :key="item.id" @click="gotoUrl('pages/record/details?id=' + item.id)">
					<view class="recordList-name">
						<h4>{{item.stationName}}/{{item.deviceNo}}</h4>
						<span class="state1" :style="{color : textColor(item)}">{{item.statusText}}</span>
					</view>
					<view class="recordList-row">
						<p>开始时间：{{item.status == '0' || item.status == '4' ? '暂未开始' : item.createTime}}</p>
					</view>
					<view class="recordList-row">
						<p>充电电量：{{item.electricQuantity != null ? item.electricQuantity/10000 : '0.000'}}度</p>
					</view>
					<view class="recordList-row">
						<p>充电时长：{{item.chargingMinute != null ? item.chargingMinute+'分' : '00分00秒'}}</p>
						<h4>{{item.actualFee != null ? item.actualFee : '0.00'}}</h4>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/index.js'
	
	export default {
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false,
					timestamp: true,
				},
				show: false,
				month: '',
				startDate: '',
				endDate: '',
				chargeList: []
			}
		},
		onReady() {
			var date = new Date();
			this.month = date.getMonth() + 1;
			
			var year = date.getFullYear();
			var day = new Date(year, this.month, 0).getDate();
			var monthN = this.month;
			if(monthN >= 1 && monthN <= 9) {
				monthN = "0" + monthN;
			}
			
			this.startDate = year + '-' + monthN + '-' + '01';
			this.endDate = year + '-' + monthN + '-' + day;
					
			this.getChargeList();
		},
		methods: {
			textColor(item) {
				switch (item.status) {
					case '1':
						return '#00B962'
						break;
					case '2':
						return '#666666'
						break;
					case '4':
						return '#8161FF'
						break;
				}
			},
			confirmTime(params) {
				if(params.month.slice(0,1) == '0') {
					this.month = params.month.slice(1);
				} else {
					this.month = params.month;
				}
				
				this.startDate = params.year + '-' + params.month + '-' + '01';
				var day = new Date(params.year, params.month, 0).getDate();
				this.endDate = params.year + '-' + params.month + '-' + day;
				this.getChargeList();
				this.show = false;
			},
			cancelTime() {
				this.show = false;
			},
			getChargeList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				API.chargingRecordData({
					startDate: this.startDate,
					endDate: this.endDate
				}).then((res) => {
					uni.hideLoading();
					
					this.chargeList = res.data.data;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.carNone{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		img{
			width: 100%;
			height: 100%;
		}
		p{
			margin-top: -60px;
		}
	}
	.recordTime{
		height: 44px;
		background-color: #fff;
		border-bottom: 1px solid #F2F2F2;
		display: flex;
		align-items: center;
		padding: 0 16px;
		p{
			margin-right: 4px;
		}
	}
	.recordList{
		background-color: #fff;
	}
	.recordList-item{
		background-color: #fff;
		border-bottom: 1px solid #ededed;
		margin-left: 16px;
		padding: 16px 16px 16px 0;
		.recordList-name{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 12px;
			h4{
				font-weight: normal;
				font-size: 15px;
				overflow: hidden;
				width: 75%;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.state1{
				color:#8161FF;
			}
			.state2{
				color:#00B962;
			}
			.state3{
				color:#666666;
			}
		}
		.recordList-row{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 8px;
			p{
				color:#888;
			}
			h4{
				font-size: 16px;
			}
		}
	}
</style>