sct/pagesT/money/CustomerBalanceDetail.vue

<template>
	<view :class="['qn-page-' + theme]">
		<view class="tabs-view">
			<view class="time-search">
				<view class="time-li" @click="timeShow('start_show')">{{ $u.timeFormat(start, 'yyyy-mm-dd') }}</view>
				<view class="icon"><u-icon name="arrow-right"></u-icon></view>
				<view class="time-li" @click="timeShow('end_show')">{{ $u.timeFormat(end, 'yyyy-mm-dd') }}</view>
			</view>
			<view class="start-view clearfix">
				<text class="float_left">期初余额</text>
				<text class="float_right">{{ $_utils.formattedNumber(openingBalance) }}</text>
			</view>
		</view>
		<view class="list-ul">
			<view class="list-li" v-for="(item, index) in balance_list" :key="index">
				<view class="title">{{ item.no }}</view>
				<view class="list-cont">
					<view class="info-li type">{{ item.financeType }}</view>
					<view class="info-li">源单号：{{ item.sourceNo }}</view>
					<view class="money-ul">
						<view class="money-li">
							<text>销售金额：</text>
							{{ $_utils.formattedNumber(item.salesAmount) }}
						</view>
						<view class="money-li">
							<text>优惠金额：</text>
							{{ $_utils.formattedNumber(item.discountMoney) }}
						</view>
						<view class="money-li">
							<text>应收金额：</text>
							{{ $_utils.formattedNumber(item.receivableAmount) }}
						</view>
					</view>
					<view class="money-ul">
						<view class="money-li">
							<text>实收金额：</text>
							{{ $_utils.formattedNumber(item.actualReceivableAmount) }}
						</view>
						<view class="money-li">
							<text>应收余额：</text>
							<text class="money">{{ $_utils.formattedNumber(item.receivableBalance) }}</text>
						</view>
					</view>
				</view>
				<view class="remark">{{ item.remark }}</view>
			</view>
			<Aempty v-if="!balance_list.length" text="暂无数据" src="https://onlineimg.qianniao.vip/data.png"></Aempty>
			<u-loadmore v-else :status="load_status" />
		</view>
		<view class="bottom-view">
			<view class="end-view clearfix">
				<text class="float_left">期末余额</text>
				<text class="float_right">{{ $_utils.formattedNumber(endingBalance) }}</text>
			</view>
			<view class="clearfix total-view">
				<text class="float_left">合计</text>
				<view class="float_right">
					<view class="money-li">实收金额：{{ $_utils.formattedNumber(actualReceiveTotal) }}</view>
					<view class="money-li">
						应收余额：
						<text>{{ $_utils.formattedNumber(shouldReceiveTotal) }}</text>
					</view>
				</view>
			</view>
		</view>
		<u-picker v-model="start_show" mode="time" :params="time_params" @confirm="startconfirm"></u-picker>
		<u-picker v-model="end_show" mode="time" :params="time_params" @confirm="endconfirm"></u-picker>
	</view>
</template>

<script>
export default {
	data() {
		return {
			load_status: 'nomore',
			balance_list: [],
			time_params: {
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false
			},
			start_show: false,
			end_show: false,
			keyword: '',
			page: 1,
			pageSize: 10,
			total: 0,
			show: false,
			customerId: '',
			start: '',
			end: '',
			openingBalance: 0,
			endingBalance: 0,
			actualReceiveTotal: 0,
			shouldReceiveTotal: 0,
			customerData: ''
		};
	},
	computed:{
		userInfo(){
			return this.$store.state.userStatus
		}
	},
	onReachBottom() {
		if (this.total / this.pageSize > this.page) {
			this.page += 1;
			this.getAllCustomerBalanceDetail();
		}
	},
	onLoad() {
		// 开始时间本月第一天 结束时间当前时间
		this.start = this.$_utils.dateToStamp(this.$_utils.showMonthFirstDay())
		this.end = parseInt(new Date().getTime()/1000)
		this.getAllCustomerBalanceDetail();
	},
	methods: {
		clearValue(){
			this.keyword = '';
			this.customerId = '';
			this.page = 1;
			this.getAllCustomerBalanceDetail()
		},
		tabsChange(index) {
			this.tabs_current = index;
			this.page = 1;
		},
		timeShow(params) {
			this[params] = true;
		},
		getAllCustomerBalanceDetail() {
			this.load_status='loading'
			let params = {
				page: this.page,
				pageSize: this.pageSize,
				customerId: this.userInfo.id,
				start: this.start,
				end: this.end
			};
			this.$u.api.getAllCustomerBalanceDetail(params).then(res => {
				if (this.page === 1) {
					this.balance_list = res.data;
				} else {
					this.balance_list = this.balance_list.concat(res.data);
				}
				this.openingBalance = res.openingBalance;
				this.endingBalance = res.endingBalance;
				this.actualReceiveTotal = res.actualReceiveTotal;
				this.shouldReceiveTotal = res.shouldReceiveTotal;
				this.load_status = this.$_utils.loadStatus(this.page, this.pageSize, res.pageTotal);
				this.total = res.pageTotal;
			});
		},
		startconfirm(val) {
			this.start = this.$_utils.dateToStamp(val.year + '-' + val.month + '-' + val.day + ' 00:00:00');
			this.page = 1;
		},
		endconfirm(val) {
			this.end = this.$_utils.dateToStamp(val.year + '-' + val.month + '-' + val.day + ' 23:59:59');
			this.page = 1;
			if (!this.customerId) {
				this.$u.toast('请选择客户');
				return;
			}
			this.getAllCustomerBalanceDetail();
		}
	}
};
</script>

<style lang="scss" scoped>
.tabs-view {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #ffffff;
	z-index: 99;
	.time-search {
		line-height: 80rpx;
		text-align: center;
		border-bottom: 1px solid #eeeeee;

		.time-li {
			display: inline-block;
			width: 350rpx;
		}

		.icon {
			width: 50rpx;
			display: inline-block;
		}
	}

	.start-view {
		line-height: 80rpx;
		padding: 0 30rpx;
		background-color: #ffffff;

		.float_right {
			color: $uni-color-error;
			font-size: 32rpx;
			font-weight: bold;
		}
	}
}

.list-ul {
	padding-top: 160rpx;
	padding-bottom: 200rpx;
	.list-li {
		width: 710rpx;
		margin: 20rpx auto;
		padding: 0 30rpx 24rpx;
		background-color: #ffffff;
		border-radius: 20rpx;

		.title {
			line-height: 80rpx;
			border-bottom: 1px solid #eeeeee;
		}

		.remark {
			line-height: 80rpx;
			border-top: 1px solid #eeeeee;
			margin-top: 20rpx;
		}

		.list-cont {
			margin-top: 10rpx;
			font-size: 24rpx;
			line-height: 40rpx;

			.type {
				font-weight: bold;
				font-size: 28rpx;
				padding: 10rpx 0;
			}

			.money-ul {
				margin-top: 10rpx;
				display: flex;

				.money-li {
					flex: 3;
					text-align: center;
					font-weight: bold;

					text {
						color: #999999;
						font-weight: normal;
					}

					.money {
						color: $uni-color-error;
						font-weight: bold;
					}

					&:last-child {
						text-align: right;
					}

					&:first-child {
						text-align: left;
					}
				}
			}
		}
	}
}

.bottom-view {
	box-shadow: 0px 2px 12rpx rgba(0, 0, 0, 0.2);
	position: fixed;
	bottom: 0;
	width: 100%;
	left: 0;
	background-color: #ffffff;
	padding: 20rpx 30rpx;
	z-index: 9;
	// line-height: 90rpx;
	.end-view {
		padding-bottom: 20rpx;
		border-bottom: 1px solid #eeeeee;
		margin-bottom: 20rpx;

		.float_right {
			color: $uni-color-error;
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	.total-view {
		color: #6c6c6c;

		.float_right {
			font-size: 24rpx;

			.money-li {
				margin-left: 30rpx;
				display: inline-block;

				text {
					color: $uni-color-error;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
	}
}
</style>