jhlapp/pagesT/Finance/CustomerBalanceDetail.vue

<template>
	<view>
		<view class="tabs-view">
			<view class="keyword-view clearfix">
				<u-search
					disabled
					@custom="clearValue"
					action-text="重置"
					:clearabled="true"
					placeholder="请选择客户"
					v-model="keyword"
					@click="goPage('/pagesT/customer/selCustomer')"
				></u-search>
			</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">
				<view class="title">416202103093535051261</view>
				<view class="list-cont">
					<view class="info-li type">应收单</view>
					<view class="info-li">源单号：31202103093505289333</view>
					<view class="money-ul">
						<view class="money-li"><text>销售金额：</text>¥100</view>
						<view class="money-li"><text>优惠金额：</text>¥100</view>
						<view class="money-li"><text>应收金额：</text>¥100</view>
					</view>
					<view class="money-ul">
						<view class="money-li"><text>实收金额：</text>¥100</view>
						<view class="money-li"><text>应收余额：</text><text class="money">¥100</text></view>
					</view>
				</view>
				<view class="remark">
					应收单审核通过，本单据应收12299877.0000元
				</view>
			</view> -->
			<view class="list-li" v-for="(item, index) in order_list">
				<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>
			<!-- <view v-if="!balance_list.length" class="empty-view"><u-empty text="暂无数据" mode="list"></u-empty></view> -->
			<u-loadmore :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>
		<!-- <u-select v-model="show" :list="list" label-name='name' value-name='id' @confirm='confirm'></u-select> -->
	</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,
			tabs_current: 0,
			tabs_list: [
				{
					name: '有财务往来'
				},
				{
					name: '无财务往来'
				}
			],
			keyword: '',
			page: 1,
			pageSize: 10,
			total: 0,
			list: [],
			show: false,
			customerId: '',
			start: '',
			end: '',
			order_list: [],
			openingBalance: 0,
			endingBalance: 0,
			actualReceiveTotal: 0,
			shouldReceiveTotal: 0,
			customerData: ''
		};
	},
	onLoad(options) {
		if(options.customerId){
			this.customerId = options.customerId
			this.getAllCustomerBalanceDetail()
		}
	},
	watch: {
		customerData(val) {
			if (val) {
				this.keyword = val.name;
				this.customerId = val.id;
				this.getAllCustomerBalanceDetail();
			}
		}
	},
	onReachBottom() {
		if (this.total / this.pageSize > this.page) {
			this.page += 1;
			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() {
			let params = {
				page: this.page,
				pageSize: this.pageSize,
				customerId: this.customerId,
				start: this.start,
				end: this.end
			};
			this.$u.api.getAllCustomerBalanceDetail(params).then(res => {
				if (this.page === 1) {
					this.order_list = res.data;
				} else {
					this.order_list = this.order_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;
			});
		},
		// getAllCustomer() {
		// 	let params = {
		// 		page: 1,
		// 		pageSize: 99,
		// 		enableStatus: 5,
		// 		status: 2,
		// 	}
		// 	this.$u.api.getAllCustomer(params).then(res => {
		// 		this.list = res.data
		// 	});
		// },
		// confirm(val) {
		// 	this.keyword = val[0].label
		// 	this.customerId = val[0].value
		// 	this.getAllCustomerBalanceDetail()
		// },
		startconfirm(val) {
			this.start = this.$utils.timeByTimestamp(val.year + '-' + val.month + '-' + val.day + ' 00:00:00');
			this.page = 1;
		},
		endconfirm(val) {
			this.end = this.$utils.timeByTimestamp(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;
	.keyword-view {
		padding: 20rpx 24rpx 0;
	}

	.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: 240rpx;

	.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>