QianNiaoShop/pagesT/Finance/CustomerBalance.vue

<template>
	<view v-if="$accessCheck($Access.CustomerBalanceGetAllCustomerBalance)">
		<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>
			<u-tabs-swiper ref="tabs" font-size="28" :current="tabs_current" :list="tabs_list" @change="tabsChange"
				:is-scroll="false"></u-tabs-swiper>
		</view>
		<view class="list-ul">
			<!-- <view class="list-li" @click="goPage('/pagesT/Finance/CustomerBalanceDetail')">
				<view class="title clearfix">康</view>
				<view class="list-cont">
					<view class="list-cont-li">期初：¥12,299,077.00</view>
					<view class="list-cont-li">期中：¥0.00</view>
					<view class="list-cont-li">期末：¥12,299,077.00</view>
					<view class="icon">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view> -->
			<view class="list-li" @click="goPage(`/pagesT/Finance/CustomerBalanceDetail?customerId=${item.customerId}`)"
				v-for="item,index in order_list" :key='index'>
				<view class="title clearfix">{{item.name}}</view>
				<view class="list-cont">
					<view class="list-cont-li">期初：{{$utils.formattedNumber(item.openingBalance)}}</view>
					<view class="list-cont-li">期中：{{$utils.formattedNumber(item.interimBalance)}}</view>
					<view class="list-cont-li">期末：{{$utils.formattedNumber(item.endingBalance)}}</view>
					<view class="icon">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</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>
		<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',
				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,
				tag: 5,
				start: '',
				end: '',
				order_list: [],
				list: [],
				show: false,
				customerId: '',
				customerData: ''
			};
		},
		watch:{
			customerData(val) {
				if (val) {
					this.keyword = val.name;
					this.customerId = val.id;
					this.getAllCustomerBalance()
				}
			},
		},
		onLoad() {
			this.getAllCustomerBalance()
			// this.getAllCustomer()
		},
		onReachBottom() {
			if (this.total / this.pageSize > this.page) {
				this.page += 1;
				this.getAllCustomerBalance()
			}
		},
		methods: {
			clearValue(){
				this.keyword = '';
				this.customerId = '';
				this.page = 1;
				this.getAllCustomerBalance()
			},
			tabsChange(index) {
				this.tabs_current = index;
				if (!this.tabs_current) {
					this.tag = 5
				} else {
					this.tag = 4
				}
				this.page = 1;
				this.getAllCustomerBalance()
			},
			timeShow(params) {
				this[params] = true;
			},
			getAllCustomerBalance() {
				let params = {
					page: this.page,
					pageSize: this.pageSize,
					customerId: this.customerId,
					start: this.start,
					end: this.end,
					tag: this.tag,
				};
				this.$u.api.getAllCustomerBalance(params).then(res => {
					if (this.page === 1) {
						this.order_list = res.data;
					} else {
						this.order_list = this.order_list.concat(res.data);
					}
					this.load_status = this.$utils.loadStatus(this.page, this.pageSize, res.pageTotal);
					this.total = res.pageTotal;
				});
			},
			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.getAllCustomerBalance()
			},
			// 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.getAllCustomerBalance()
			// }
		}
	};
</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;
			}
		}
	}

	.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;
				font-weight: bold;
			}

			.list-cont {
				margin-top: 10rpx;
				position: relative;

				.list-cont-li {
					line-height: 50rpx;
				}

				.icon {
					position: absolute;
					top: 50%;
					right: 24rpx;
					transform: translateY(-50%);
				}
			}
		}
	}
</style>