zk-driver-wechat-applet/pages/ucenter/record.vue

<template>
	<view>
		<view class="records">
			<view class="changebox">
				<view class="date" @click="getdate">
					<view>{{suredate}}</view>
					<view :class="[dateup?'up':'arrow']"></view>
				</view>
				<picker @change="bindPickerChange" :range="plateList" :disabled="plateList.length==1">
					<view class="allcar">
						<view>{{carName}}</view>
						<view :class="[carup?'up':'arrow']" v-show="plateList.length>1"></view>
					</view>
				</picker>
			</view>
			<view class="month" v-for="(item,index) in datalist" :key="index">
				<view class="title">
					<view v-if="type === 4">共{{item.total}}次换电记录</view>
					<view v-else><text>{{item.month}}</text>月/{{item.year}}</view>
					
					<view class="money">
						<view>换电量 {{(item.exchangePower*1).toFixed(1) || '0.0'}}(kW/h)</view>
						<view>换电费用 {{(item.powerFee*1).toFixed(1) || '0.0'}}元</view>
					</view>
				</view>
				<view class="list">
					<view class="info" v-for="(data,index) in item.list" :key="data.id"
						@click="$utils.navigateTo('ucenter/record_show',{id: data.id})">
						<view class="first">
							<view>{{data.plate}}</view>
							<view>¥{{data.powerFee}}</view>
						</view>
						<view class="second">
							<view>{{data.createTime}}</view>
							<view>换电量{{data.exchangePower}}(kW/h)</view>
						</view>
					</view>
				</view>
			</view>
			<view class="month" v-if="datalist.length === 0 || datalist[0].list.length === 0">
				<view class="title">
					<view>共0次换电记录</view>				
					<view class="money">
						<view>换电量 0.00(kW/h)</view>
						<view>换电费用 0.00元</view>
					</view>
				</view>
				<view class="list">
					<view class="norecord">暂无记录</view>
				</view>
			</view>
			
		</view>
		<uni-popup ref="popup" background-color="#fff" type="bottom">
			<view class="datebox">
				<view class="header">
					<view @click="chooseMonth" :class="{'isactive':visible}">月份选择</view>
					<view @click="chooseDefine" :class="{'isactive':!visible}">自定义</view>
					<view @click="chooseAll" class="alltime">全部</view>
					<view @click="closed">×</view>
				</view>
				<view class="content">
					<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
						class="picker-view">
						<picker-view-column>
							<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
						</picker-view-column>
						<!-- <picker-view-column>
							<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
						</picker-view-column> -->
					</picker-view>
					<view class="change_date" v-if="!visible">
						<view>换电时间</view>
						<view class="datelist">
							<view @click="getMonthDay(0)" :class="{'active':isnum===0}">上月</view>
							<view @click="getMonthDay(1)" :class="{'active':isnum===1}">近三月</view>
							<view @click="getMonthDay(2)" :class="{'active':isnum===2}">近半年</view>
						</view>
					</view>
					<view class="change_date" v-if="!visible">
						<view>自定义</view>
						<view class="iptlist">
							<view><input class="define-input" :class="{'active':isinput===0}" v-model="beginDate"
									@click="getCurrentDate(0)" disabled="disabled" /></view>
							<view> — </view>
							<view><input class="define-input" :class="{'active':isinput===1}" v-model="endDate"
									@click="getCurrentDate(1)" disabled="disabled" /></view>
						</view>
					</view>
					<picker-view v-if="ishow" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
						class="picker-view">
						<picker-view-column>
							<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
						</picker-view-column>
					</picker-view>
					<view class="submit" @click="submitdate">确定</view>
				</view>
			</view>
		</uni-popup>
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				datalist: [], //数据列表
				dateup: 0,
				carup: 0,
				plateList: ['全部车辆'], //车辆弹窗数据
				carName: '全部车辆', //右上角车辆选择
				//自定义日期控件开始
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1, day - 1],
				visible: true,
				indicatorStyle: `height: 50px;`,
				//自定义日期控件结束
				suredate: '所有记录', //左上角最后确定得日期
				middledate: '', //日期选择中间变量
				beginDate: null, //文本框开始日期
				endDate: null, //文本框结束日期
				ishow: false, //是否显示日历控件
				isnum: null, //上月、近三月、近半年中间变量
				isinput: null, //自定义日期中间变量
				type: 0 //查询类型
			}
		},
		mounted() {
			this.getExchangeRecord()
			this.getUserCarList()
		},
		onLoad(option) {
			if (option.plate) {
				this.carName = option.plate
			}
		},
		methods: {
			//获取个人所有车辆列表
			getUserCarList(){
				this.$http.userCarList().then(res=>{
					if(res.code ==0){
						if(res.data.length > 0){
							this.plateList=this.plateList.concat(res.data)
						}
					}else{
						this.$utils.msg(rs.msg)
					}
				})
			},
			//获取换电记录列表
			getExchangeRecord() {
				let monthDay = ''
				let plateName = ''
				if (this.suredate === '所有记录') {
					this.monthDay = ''
					this.type = 0
				} else {
					monthDay = this.suredate
				}
				if (this.carName === '全部车辆') {
					plateName = ''
				} else {
					plateName = this.carName
				}
				let params = {
					monthDate: monthDay, //单月参数
					type: this.type, //查询类型
					plate: plateName, //车牌号
					page: 1,
					pageSize: 2,
					startTime: this.beginDate,
					endTime: this.endDate,
				}
				this.$http.exchangeRecord(params).then(rs => {
					if (rs.code === 0) {
						this.datalist = rs.data.list
					} else {
						this.$utils.msg(rs.msg)
					}
				})
			},
			getdate() {
				this.dateup = !this.dateup
				this.$refs.popup.open('bottom')
			},
			bindPickerChange(e) {
				this.carup = !this.carup
				this.carName = this.plateList[e.detail.value]
				this.getExchangeRecord()
			},
			bindChange(e) {
				const val = e.detail.value
				if (this.visible) {
					this.middledate = null
					this.middledate = this.years[val[0]] + '.' + this.months[val[1]]
				} else {
					this.middledate = null
					if (this.isinput === 0) {
						this.beginDate = this.years[val[0]] + '.' + this.months[val[1]] + '.' + this.days[val[2]]
					} else if (this.isinput === 1) {
						this.endDate = this.years[val[0]] + '.' + this.months[val[1]] + '.' + this.days[val[2]]
					}
				}
			},
			closed() {
				this.$refs.popup.close()
			},
			submitdate() {
				if (this.visible) {
					this.type = 0
					this.beginDate = null
					this.endDate = null
					if (this.middledate) {
						this.suredate = this.$moment(this.middledate,'YYYY.MM').format('YYYY.MM')
					} else {
						this.suredate = this.$moment().format('YYYY.MM');
					}
					this.$refs.popup.close()
				} else {
					if (this.isnum === 0) {
						this.suredate = '上月'
						this.$refs.popup.close()
						this.type = 1
					} else if (this.isnum === 1) {
						this.suredate = '近三月'
						this.$refs.popup.close()
						this.type = 2
					} else if (this.isnum === 2) {
						this.suredate = '近半年'
						this.$refs.popup.close()
						this.type = 3
					}
					if (this.isinput !== null) {
						if (this.isinput !== 2) {
							if (this.beginDate && this.endDate) {
								const diffday = this.$moment(this.endDate).diff(this.$moment(this.beginDate), 'days')
								const diffmonth = this.$moment(this.endDate).diff(this.$moment(this.beginDate), 'months')
								if (diffday < 0) {
									this.$utils.msg('结束日期不能小于开始日期')
								} else if (diffmonth > 6) {
									this.$utils.msg('日期范围不能超过半年')
								} else {
									this.suredate = this.$moment(this.beginDate,'YYYY.MM.DD').format('YYYY.MM.DD') + ' - ' + this.$moment(this.endDate,'YYYY.MM.DD').format('YYYY.MM.DD')
									this.type = 4
									this.$refs.popup.close()
								}

							} else {
								this.$utils.msg('请填写完整')
							}
						}
					}
				}
				this.getExchangeRecord()
			},
			//选择月份
			chooseMonth() {
				this.visible = true
				this.ishow = false
			},
			//选择自定义
			chooseDefine() {
				this.visible = false
			},
			//选择全部时间
			chooseAll() {
				this.suredate = '所有记录'
				this.type = 0
				this.$refs.popup.close()
				this.getExchangeRecord()
			},
			//获取input框得值
			getCurrentDate(d) {
				if (this.isinput === 2) {
					this.beginDate = null
					this.endDate = null
				}
				if (d === 0) {
					this.beginDate = this.$moment().format('YYYY.MM.DD')
				} else {
					this.endDate = this.$moment().format('YYYY.MM.DD')
				}
				this.isinput = d
				this.isnum = null
				this.ishow = true

			},
			//获取月份数据
			getMonthDay(num) {
				this.isnum = num
				this.isinput = 2
				if (num === 0) {
					this.beginDate = this.$moment().month(this.$moment().month() - 1).startOf('month').format(
					'YYYY.MM.DD');
					this.endDate = this.$moment().month(this.$moment().month() - 1).endOf('month').format('YYYY.MM.DD');
				} else if (num === 1) {
					this.beginDate = this.$moment().month(this.$moment().month() - 3).format('YYYY.MM.DD');
					this.endDate = this.$moment().format('YYYY.MM.DD');
				} else {
					this.beginDate = this.$moment().month(this.$moment().month() - 6).format('YYYY.MM.DD');
					this.endDate = this.$moment().format('YYYY.MM.DD');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.datebox {
		display: flex;
		flex-direction: column;
		min-height: 500rpx;
		background-color: #fff;

		.header {
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 45rpx;
			line-height: 100rpx;
			box-sizing: border-box;
			border-bottom: #e7e7e7 solid 1px;
			color: #959ea8;
			font-weight: bold;

			view:nth-child(2) {
				margin-right: 60rpx;
			}

			view:last-child {
				font-weight: bold;
				font-size: 36rpx;
			}

			.isactive {
				color: #1a1a1a;
			}

			.alltime {
				color: #58be6b;
			}
		}

		.content {
			display: flex;
			flex-direction: column;

			.picker-view {
				width: 750rpx;
				height: 280rpx;
				margin-top: 20rpx;
			}

			.item {
				align-items: center;
				justify-content: center;
				line-height: 50px;
				text-align: center;
			}

			.submit {
				background-color: #58be6b;
				height: 85rpx;
				border-radius: 40rpx;
				width: 600rpx;
				margin: 30rpx auto;
				font-size: 36rpx;
				font-weight: bold;
				color: #fff;
				text-align: center;
				line-height: 84rpx;
			}

			.change_date {
				display: flex;
				flex-direction: column;
				padding: 0 45rpx;
				color: #949da7;
				font-weight: bold;
				margin-top: 30rpx;

				.datelist {
					display: flex;

					.active {
						background-color: #eef8f0;
						color: #58be6b;
						font-weight: bold;
					}

					view {
						width: 128rpx;
						height: 60rpx;
						background-color: #f5f5f5;
						border-radius: 10rpx;
						text-align: center;
						line-height: 60rpx;
						margin-top: 28rpx;
						margin-right: 22rpx;
						font-weight: normal;
					}
				}

				.iptlist {
					display: flex;
					margin-top: 20rpx;

					.active {
						border: #1d2129 solid 1px;
					}

					.define-input {
						background-color: #f5f5f5;
						width: 248rpx;
						height: 60rpx;
						line-height: 60rpx;
						border-radius: 15rpx;
						font-size: 28rpx;
						font-weight: 500;
						text-align: center;
						color: #949da7;
					}

					view:nth-child(2) {
						line-height: 60rpx;
						padding: 0 10rpx;
					}
				}
			}
		}
	}

	.records {
		width: 690rpx;
		padding: 25rpx 30rpx;
		display: flex;
		flex-direction: column;
		padding-bottom: 128rpx;

		.changebox {
			display: flex;
			justify-content: space-between;
			font-weight: bold;
			padding: 0 10rpx;
			font-size: 26rpx;

			.date {
				display: flex;
			}

			.arrow {
				width: 0;
				height: 0;
				border-top: 12rpx solid #1d2129;
				border-right: 12rpx solid transparent;
				border-left: 12rpx solid transparent;
				margin-left: 10rpx;
				margin-top: 13rpx;
				transition: all 0.5s ease 0s;
			}

			.up {
				width: 0;
				height: 0;
				border-top: 12rpx solid #1d2129;
				border-right: 12rpx solid transparent;
				border-left: 12rpx solid transparent;
				margin-left: 10rpx;
				margin-top: 13rpx;
				transform: rotate(180deg);
				transition: all 0.5s ease 0s;
			}

			.allcar {
				display: flex;
			}
		}

		.norecord {
			text-align: center;
			color: #939da7;
			line-height: 180rpx;
		}

		.month {
			width: 690rpx;
			display: flex;
			flex-direction: column;
			margin-top: 30rpx;

			.title {
				width: 690rpx;
				height: 184rpx;
				background-image: url('https://rl-zk-image.oss-cn-hangzhou.aliyuncs.com/image/bgr.png');
				background-size: 100% 100%;
				display: flex;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				font-size: 30rpx;
				font-weight: bold;
				flex-direction: column;
				justify-content: space-around;

				.money {
					display: flex;
					justify-content: space-between;
				}

				text {
					font-size: 45rpx;
				}
			}

			.list {
				display: flex;
				background-color: #fff;
				width: 690rpx;
				border-bottom-left-radius: 35rpx;
				border-bottom-right-radius: 35rpx;
				padding: 0 35rpx;
				box-sizing: border-box;
				flex-direction: column;
				padding-bottom: 15rpx;

				.info {
					width: 100%;
					margin-top: 20rpx;
					margin-bottom: 10rpx;
				}

				.first {
					display: flex;
					justify-content: space-between;
					font-size: 30rpx;

					view:last-child {
						font-size: 32rpx;
						font-weight: bold;
					}
				}

				.second {
					color: #86909c;
					font-size: 28rpx;
					display: flex;
					justify-content: space-between;
					margin-top: 2rpx;
				}
			}
		}
	}
</style>