jp-charge/pagesFinance/statistics/recharge.vue

<template>
	<view>
		<ujp-navbar :is-back="false" title="充值明细">

			<view class="navbar-screen" slot="right" @click="showdate = true"><span>筛选</span>
				<u-icon name="filter-2-fill" custom-prefix="custom-icon" color="#b0b8c8" size="32"></u-icon>
			</view>
		</ujp-navbar>
		<u-calendar v-model="showdate" mode="date" @change="changedate"></u-calendar>


<view class="topBodyMain" v-if="list.length">
				<view class="topBody1">
					<view>{{form.startDate}}</view>
					<view>充值人次：{{recordsTotal}}</view>
				</view>

				<view class="topBody2">
					<view>充值：{{topBody.totalFee}}元</view>
					<view>退款：{{topBody.refundFee}}元</view>
					<view>汇总：{{topBody.sumFee}}元</view>
				</view>

			</view>
		<view class="detailed">
			<view style="text-align: center;margin-top: 100px" v-if="!list.length">
				<img src="@/assets/img/blankpage.png">
				<view>查询为空</view>
			</view>
			
			<view class="detailed-list" v-for="(item ,index) in list" :key="index">

				<view class="detailed-item detailed-item-body">
					<view class="nickNameBody">

						<view class="line1">

							<view class="span nickName">{{item.nickName}} </view>
							<view class="span">{{item.phone}} </view>
						</view>
						<view class="line2">
							<view class="span">充值：{{item.totalFee}}</view>
							<view class="span" :class="{
								refundFee:item.refundFee
							}">退款：{{item.refundFee}}</view>
						</view>

						<view class="line3">
							<view class="span">
								<u-icon name="clock"></u-icon>{{item.payTime?item.payTime.slice(11):''}}
							</view>
							<view class="span">
								{{item.outOrderNo}}
							</view>
						</view>


					</view>
					<view class="totalFee" :class="{
								refundFee:item.refundFee
							}">
						{{item.showFee?item.showFee.toFixed(2):0}}元
					</view>
				</view>

			</view>

			<u-divider v-if="list.length&&list.length == recordsTotal" color="#B6BDC3" style="margin-top:20px;"
				bg-color="#f7f7f7">已经到底了</u-divider>


		</view>


		<Tabbar :current="2" ref="tabbarMain"></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/components/TabbarFinance.vue'
	import * as API from '@/apis/finance.js'
	import {
		beforeTimeStamp,
		currentTimeStamp,
		parseUnixTime
	} from '@/utils'

	export default {
		data() {
			return {
				showdate: false,

				form: {

				},

				pageIndex: 1,
				recordsTotal: 0,
				list: [],
				topBody: {
					totalFee: 0,
					refundFee: 0,
					sumFee: 0
				}

			}
		},
		components: {
			Tabbar

		},
		onReachBottom() {

			this.myLoadmore();

		},
		onShow() {
			if (this.$refs.tabbarMain) {
				this.$refs.tabbarMain.setcount(1);
			}
		},
		onLoad() {

		},
		onReady() {
			this.info = this.carhelp.getPersonInfo()
			this.form.startDate = parseUnixTime(new Date(), '{y}-{m}-{d}')
			this.form.endDate = parseUnixTime(new Date(), '{y}-{m}-{d}')

			this.getList()

			//this.getStation()

		},
		methods: {

			changedate(e) {
				//	this.queryDate = e.result
				this.form.startDate = e.result
				this.form.endDate = e.result
				this.getList()
			},


			getList() {

				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				this.form.pageIndex = this.pageIndex
				this.form.pageSize = 999

				API.rechargeList(this.form).then((res) => {




					this.list = res.data.data;
					this.topBody.totalFee = 0
					this.topBody.refundFee = 0

					this.list.forEach(item => {
						item.showFee = item.totalFee - item.refundFee
						this.topBody.totalFee += item.totalFee
						this.topBody.refundFee += item.refundFee

					})
					this.topBody.totalFee = this.topBody.totalFee.toFixed(2)
					this.topBody.refundFee = this.topBody.refundFee.toFixed(2)
					this.topBody.sumFee = this.topBody.totalFee - this.topBody.refundFee;
					this.topBody.sumFee = this.topBody.sumFee.toFixed(2)

					this.recordsTotal = res.data.recordsTotal
					uni.hideLoading()

				}).catch(error => {
					uni.showToast({

						title: error
					})
				})
			},


			myLoadmore() {
				if (this.list.length < this.recordsTotal) {
					this.pageIndex += 1;
					this.getList()
				}


			},

		}
	}
</script>
<style>
	page {
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.topBodyMain {
		padding: 20rpx 40rpx;
		display: flex;
		justify-content: space-between;

		position: fixed;
		top: 90rpx;
		
		width: 100%;
	
		background: #dbd9d9;
		z-index: 999;
	}

	.detailed {
		padding-top:  160rpx;
		.detailed-list {
			padding: 20rpx 40rpx;
			border-bottom: 1px solid #d6c0c0;
			background-color: #fff;

			.detailed-item-body {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.refundFee {
					color: #fd8008;
				}

				.nickNameBody {

					.line1,
					.line2 {
						display: flex;
						font-size: 32rpx;

						.span {
							margin-right: 20rpx;
						}

					}

					.line1 {
						color: #777777
					}

					.line2 {
						margin: 8rpx 0;
					}

					.line3 {
						display: flex;
						color: #777777;
						.span {
							margin-right: 20rpx;
						}
					}

					.nickName {
						width: 200rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

				}

				.totalFee {
					font-weight: bold;
					font-size: 48rpx;
					white-space: pre;
					// margin-left: 40rpx;
				}

			}
		}
	}
</style>