QianNiaoShop/pagesT/customer/components/moneyDetail.vue

<template>
	<view class="out-box">
		<view class="time-search">
			<view class="time-li">
				<picker mode="date" @change="bindDateStartChange">
					<text class="date-li">{{ start_time ? $u.timeFormat(start_time, 'yyyy-mm-dd') : '开始日期' }}</text>
				</picker>
			</view>
			<view class="icon"><u-icon name="arrow-right" size="36"></u-icon></view>
			<view class="time-li">
				<picker mode="date" @change="bindDateendChange">
					<text class="date-li">{{ end_time ? $u.timeFormat(end_time, 'yyyy-mm-dd') : '结束日期' }}</text>
				</picker>
			</view>
		</view>
		<view class="list-view">
			<view class="start-time clearfix">
				<view class="float_left">期初余额</view>
				<view class="float_right">{{ $utils.formattedNumber(openingBalance) }}</view>
			</view>
			<view class="th-view">
				<view class="th-li">应收</view>
				<view class="th-li">实收</view>
				<view class="th-li">应收余额</view>
			</view>
			<view class="td-view" v-for="(item, index) in money_list" :key="index">
				<view class="td-li">{{ $utils.formattedNumber(item.receivableAmount) }}</view>
				<view class="td-li">{{ $utils.formattedNumber(item.actualReceivableAmount) }}</view>
				<view class="td-li">{{ $utils.formattedNumber(item.receivableBalance) }}</view>
			</view>
			<u-loadmore :status="load_status" @loadmore="loadmore" :load-text="loadText" />
		</view>
		<view class="start-time end-time clearfix">
			<view class="float_left">期末余额</view>
			<view class="float_right">{{ $utils.formattedNumber(endingBalance) }}</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		customerId: {
			type: [Number, String],
			default: ''
		}
	},
	data() {
		return {
			loadText: {
				loadmore: '点击加载更多',
				loading: '努力加载中',
				nomore: '没有更多了'
			},
			load_status: 'nomore',
			start_time: '',
			end_time: '',
			page: 1,
			pageSize: 10,
			money_list: [],
			total: 0,
			openingBalance: 0,
			endingBalance: 0
		};
	},
	created() {
		this.start_time = this.$utils.timeByTimestamp(this.$utils.funDate(-30) + ' 00:00:00');
		this.end_time = parseInt(new Date().getTime() / 1000);
		this.getAllCustomerBalanceDetail();
	},
	methods: {
		loadmore() {
			if (this.total / this.pageSize > this.page) {
				this.page += 1;
				this.getAllCustomerBalanceDetail();
			}
		},
		getAllCustomerBalanceDetail() {
			this.load_status = 'loading';
			this.$u.api
				.getAllCustomerBalanceDetail({
					customerId: this.customerId,
					end: this.end_time,
					page: this.page,
					pageSize: this.pageSize,
					start: this.start_time
				})
				.then(res => {
					if (this.page === 1) {
						this.money_list = res.data;
					} else {
						this.money_list = this.money_list.concat(res.data);
					}
					//期初余额
					this.openingBalance = res.openingBalance;
					//期末余额
					this.endingBalance = res.endingBalance;
					this.total = res.pageTotal;
					this.load_status = this.$utils.loadStatus(this.page, this.pageSize, this.total);
				});
		},
		bindDateStartChange(obj) {
			this.start_time = this.$utils.timeByTimestamp(obj.detail.value + ' 00:00:00');
			this.page = 1;
			this.getAllCustomerBalanceDetail();
		},
		bindDateendChange(obj) {
			this.end_time = this.$utils.timeByTimestamp(obj.detail.value + ' 23:59:59');
			this.page = 1;
			this.getAllCustomerBalanceDetail();
		}
	}
};
</script>

<style lang="scss" scoped>
	.out-box{
		width: 710rpx;
		margin: 24rpx auto;
	}
.time-search {
	line-height: 80rpx;
	border-bottom: 1px solid #f5f5f5;
	.time-li {
		display: inline-block;
		width: 334rpx;
		text-align: center;
		font-weight: bold;
	}
	.icon {
		display: inline-block;
	}
}
.start-time {
	line-height: 80rpx;
	font-weight: bold;
	border-bottom: 1px solid #f5f5f5;
	.float_right {
		color: $uni-color-error;
	}
}
.list-view {
	.th-view {
		display: flex;
		line-height: 80rpx;
		border-bottom: 1px solid #f5f5f5;
		.th-li {
			color: #999999;
			flex: 3;
			text-align: center;
		}
	}
	.td-view {
		display: flex;
		line-height: 80rpx;
		border-bottom: 1px solid #f5f5f5;
		.td-li {
			text-align: center;
			color: $uni-color-primary;
			flex: 3;
			font-weight: bold;
		}
	}
}
</style>