wx_oms/salesRanking/page/rechargeRecord/rechargeRecord.vue

<template>
	<view class="re_body">
		<view :style="{height:showDetails?'':'184rpx'}" class="header">
			<view class="header_item">
				<view class="dd">
					<view class="page-1">
						<text style="font-size: 48rpx;color: #FFFFFF;">{{dedata.gasStationBalance|price}}</text>
						<text style="color: #BBBBBB;font-size:26rpx ;">￥</text>
						<view @click="xxFn"
							style=" font-size: 24rpx;color: #FFFFFF; margin-top: 14rpx; text-align: center;width: 100%;display: flex;justify-content:center;">
							{{dedata.routerIndex?'站点':'企业'}}账户余额
							<view v-if="!dedata.routerIndex" :style="{transform:`rotate(${showDetails?'180':''}deg)`}"
								style="transition: all .3s;margin-left: 10rpx;">
								<uni-icons type="bottom" size="13" color="#bbbbbb" style=""></uni-icons>
							</view>
						</view>
					</view>
				</view>
				<view v-if="!dedata.routerIndex" class="header_item-details-container">
					<view class="header_item-details">
						<view style="width: 155rpx;text-align: right;">
							<text class="header_item-details-label">外请</text>
						</view>
						<view style="flex: 1;text-align: left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
							{{dedata.outCountBalance|price}}
							<text class="smalltext">￥</text>
						</view>
					</view>
					<view class="header_item-details">
						<view style="width: 155rpx;text-align: right;">
							<text class="header_item-details-label">自营</text>
						</view>
						<view style="flex: 1;text-align: left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
							{{dedata.inCountBalance|price}}
							<text class="smalltext">￥</text>
						</view>
					</view>
				</view>
			</view>
			<view class="header_item">
				<view class="dd">
					<view class="page-1">
						<text style="font-size: 48rpx;color: #FFFFFF;">{{dedata.amountYesterday|price}}</text>
						<text style="color: #BBBBBB;font-size:26rpx ;">￥</text>
						<view
							style="font-size: 24rpx;color: #FFFFFF; margin-top: 14rpx; text-align: center;width: 100%;">
							昨日充值金额
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="header_item">
				<view class="dd">
					<view class="page-1">
						<text style="font-size: 48rpx;color: #FFFFFF;">{{dedata.amountYesterday|price}}</text>
						<text style="color: #BBBBBB;font-size:26rpx ;">￥</text>
						<view style="font-size: 24rpx;color: #FFFFFF; margin-top: 14rpx; text-align: center;width: 100%;">昨日充值金额
						</view>
					</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: [],
				showDetails: false,
				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),'detailsDatadetailsDatadetailsDatadetailsData')
				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: {
			xxFn() {
				this.showDetails = !this.showDetails
			},
			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>
	.header_item-details-label {
		background-color: #BBBBBB;
		color: #FFFFFF;
		padding: 5rpx;
		margin-right: 10rpx;
	}

	.header_item-details-container {
		height: 100rpx;
		width: 100%;
		text-align: center;
		overflow: hidden;
	}

	.header_item-details {
		color: #FFFFFF;
		font-size: 24rpx;
		box-sizing: border-box;
		margin-bottom: 15rpx;
		display: flex;
		justify-content: center;
	}

	.page-1 {
		width: 100%;
		text-align: center;
	}

	.dd {
		width: 100%;
		height: 184rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.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;
		flex-wrap: wrap;
		overflow: hidden;
	}

	.header {
		width: 100%;
		height: 284rpx;
		background: #2866FF;
		display: flex;
		overflow: hidden;
		box-sizing: border-box;
		transition: all .3s;
	}
</style>