wx_oms/salesRanking/page/rechargeRecord/rechargeRecord.vue

<template>
	<view class="re_body">
		<view class="header">
			<view class="header_item">
				<view >
					<view><text style="font-size: 48rpx;color: #FFFFFF;">{{dedata.gasStationBalance|price}}</text> <text style="color: #BBBBBB;font-size:26rpx ;">￥</text> </view>
					<view style="font-size: 24rpx;color: #FFFFFF; margin-top: 14rpx; text-align: center;">{{dedata.routerIndex?'站点':'企业'}}账户余额</view>
				</view>
			</view>
			<view class="header_item">
				<view >
					<view><text style="font-size: 48rpx;color: #FFFFFF;">{{dedata.amountYesterday|price}}</text> <text style="color: #BBBBBB;font-size:26rpx ;">￥</text> </view>
					<view style="font-size: 24rpx;color: #FFFFFF; margin-top: 14rpx; text-align: center;">昨日充值金额</view>
				</view>
			</view>
		</view>
		<view style="margin-top:56rpx; padding: 0 46rpx;">
			<view style=" font-size: 48rpx;color: #666666;margin-bottom: 42rpx;">最近记录</view>
			<view class="sele_body">
				<view @click=" seleFn(0) " :class=" seleIndex==0?'sele_item': 'item' ">当天</view>
				<view @click=" seleFn(1) " :class=" seleIndex==1?'sele_item': 'item' ">昨日</view>
				<view @click=" seleFn(2) " :class=" seleIndex==2?'sele_item': 'item' ">近5天</view>
			</view>
		</view>
		<view style="flex: 1; overflow:hidden; margin-top: 40rpx; ">
			<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower='scrolltolower'>
				<view v-for="(item,index) in list" class="list_item">
					<view class="text">{{item.createTime}}</view>
					<view class="text"><text >{{item.money.toFixed(2)}}</text> <text class="smalltext">￥</text> </view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import convertW from '../../components/convertW.js'
	import sy from '@/api/sy'
	export default {
		data() {
			return {
				list:[],
				dedata:null,
				seleIndex:0,
				getData: {
					pageSize: 10,
					currentPage: 1,
					params: {
						siteId: '',
						endTime: '',
						startTime: ''
					}
				},
			}
		},
		created() {
			// this.getlist()
		},
		onLoad(e) {
			if (e.jsData) {
				console.log(JSON.parse(e.jsData))
				this.dedata = JSON.parse(e.jsData)
				this.getData.params.siteId = this.dedata.id
				// this.getData.params.endTime = this.dedata.endTime.split(' ')[0]
				// this.getData.params.startTime = this.dedata.startTime.split(' ')[0]
				this.seleFn(0)
				this.getlist()
			}
		},
		filters:{
			price(e){
				return convertW.convertW(e)
			}
		},
		methods: {
			seleFn(e){
				let date = new Date
				this.seleIndex=e
				switch(e){
					case 0:
					let day = [`${date.getFullYear()}-${date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1}-${date.getDate()<10?'0'+date.getDate():date.getDate()}`,`${date.getFullYear()}-${date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1}-${date.getDate()<10?'0'+date.getDate():date.getDate()}`]
					this.getData.params.endTime = day[0]
					this.getData.params.startTime = day[1]
					break;
					case 1:
					let yesterday = new Date((date.getTime() - (86400000)))
					let yd = [`${yesterday.getFullYear()}-${yesterday.getMonth()+1<10?'0'+(yesterday.getMonth()+1):yesterday.getMonth()+1}-${yesterday.getDate()<10?'0'+yesterday.getDate():yesterday.getDate()} `,`${yesterday.getFullYear()}-${yesterday.getMonth()+1<10?'0'+(yesterday.getMonth()+1):yesterday.getMonth()+1}-${yesterday.getDate()<10?'0'+yesterday.getDate():yesterday.getDate()} `]
					this.getData.params.endTime = yd[0]
					this.getData.params.startTime = yd[1]
					break;
					case 2:
					let fsday = new Date((date.getTime() - (86400000*5)))
					let fd = [`${fsday.getFullYear()}-${fsday.getMonth()+1<10?'0'+(fsday.getMonth()+1):fsday.getMonth()+1}-${fsday.getDate()<10?'0'+fsday.getDate():fsday.getDate()}`,`${date.getFullYear()}-${date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1}-${date.getDate()<10?'0'+date.getDate():date.getDate()}`]
					this.getData.params.endTime = fd[1]
					this.getData.params.startTime = fd[0]
					break;
				}
				this.getData.currentPage = 1
				this.getlist()
			},
			getlist(){
				sy[(this.dedata.routerIndex ? 'queryGasStationRechargeRecords':'findEnterpriseRechargeRecord')]({
					pageSize: this.getData.pageSize,
					currentPage: this.getData.currentPage,
					params: {
						[(this.dedata.routerIndex ? 'siteId':'companyId')]:this.getData.params.siteId,
						endTime: this.getData.params.endTime,
						startTime:this.getData.params.startTime
					}
				}).then(res=>{
					if (res.code !== 20000) return
					if (res.data.list.length == 0) {
						uni.showToast({
							title: '没有数据了哦',
							icon: 'none'
						})
					}
					if (this.getData.currentPage !== 1) {
						this.list = this.list.concat(res.data.list);
						console.log(this.list,'***')
						return
					}
					this.list = res.data.list
				})
			},
			scrolltolower(){
				this.getData.currentPage +=1;
				this.getlist();
				// uni.showToast({
				// 	title:'到底了',
				// 	icon:'none'
				// })
			},
		}
	}
</script>

<style scoped>
	.smalltext{
		font-size: 24rpx;
		color:#BBBBBB;
	}
	.text{
		font-size: 28rpx;
		color:#666666 ;
	}
	.list_item{
		width: 660rpx;
		height: 120rpx;
		background: #FFFFFF;
		border-radius: 10px;
		margin: 0 auto;
		margin-bottom: 10rpx;
		padding: 0 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.re_body{
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
	}
	.sele_item{
		width: 140rpx;
		height: 60rpx;
		background: #ADCEFF;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
	}
	.item{
		width: 140rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #BBBBBB;
	}
	.sele_body{
		display: flex;
		gap:31rpx;
		margin-top: 42rpx;
	}
	.header_item{
		height: 100%;
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
	}
.header{
	width: 100%;
	height: 184rpx;
	background: #2866FF;
	display: flex;
}
</style>