parking_operation/pages/dataOverview/statisticalReport/components/arrearsReport.vue

<!-- 欠费统计 -->
<template>
	<view class="container">
		<view class="tab">
			<u-tabs
				:list="tabList"
				lineColor="#fff"
				:activeStyle="{
					color: '#fff',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:inactiveStyle="{
					color: '#000',
					transform: 'scale(1)'
				}"
				@click="tabClick">
			</u-tabs>
		</view>
		<view class="table">
			<view class="table-date" v-if="currentDate">{{ currentDate.join(' 至 ') }}</view>
			<view class="table-box">
				<TableRanking :loading="loading" :padding="'0'" :tableTh="tableTh" :tableData="tableData"
					@pageChange="pageChange" />
			</view>
		</view>
		<view class="total">
			<view>
				欠费次数<text>{{ totalData.oweCount || 0 }}</text>次，欠费金额<text>{{ totalData.amtOwe || 0 }}</text>元
			</view>
		</view>
	</view>
</template>

<script>
	import TableRanking from '@/components/tableRanking.vue'
	export default {
		components: {
			TableRanking
		},
		props: {
			tableTh: {
				type: Array,
				default: () => {
					return [
						{ field: '车牌号', key: 'vehicleNo', width: 100 },
						{ field: '车主姓名', key: 'name', width: 100 },
						{ field: '联系方式', key: 'mobile', width: 100 },
						{ field: '欠费次数(次)', width: 80, key: 'oweCount' },
						{ field: '欠费金额(元)', width: 80, key: 'amtOwe' }
					]
				}
			}
		},
		data() {
			return {
				loading: false,
				totalData: {},
				tableData: {
					current: 1,
					total: 0,
					list: []
				},
				tabCurName: 'road',
				currentDate: [],
				beginTime: undefined,
				endTime: undefined,
				tabList: [
					{ name: '路段', value: 'road' },
					{ name: '停车场', value: 'parking' }
				]
			}
		},
		methods: {
			tabClick(item) {
				this.tabCurName = item.value
				this.tableData.current = 1
				if (this.tabCurName === 'road') {
					this.getArreasReportTotal()
					this.getArreasReportList()
				} else {
					this.getParkingArreasReportTotal()
					this.getParkingArreasReportList()
				}
			},
			getData(data) {
				if (data.length) {
					this.beginTime = data[0]
					this.endTime = data[1]
				}
				this.currentDate = data
				this.tableData.current = 1
				if (this.tabCurName === 'road') {
					this.getArreasReportTotal()
					this.getArreasReportList()
				} else {
					this.getParkingArreasReportTotal()
					this.getParkingArreasReportList()
				}
			},
			getArreasReportTotal() {
				uni.$u.api.statisticalReportApi.getArrearsReportTotalApi({
					beginTime: this.beginTime,
					endTime: this.endTime
				}).then(res => {
					if (res.code === 200) {
						this.totalData = res.data
					}
				})
			},
			getParkingArreasReportTotal() {
				uni.$u.api.statisticalReportApi.getParkingArrearsReportTotalApi({
					beginTime: this.beginTime,
					endTime: this.endTime
				}).then(res => {
					if (res.code === 200) {
						this.totalData = res.data
					}
				})
			},
			getArreasReportList() {
				this.loading = true
				uni.$u.api.statisticalReportApi.getArrearsReportListApi({
					beginTime: this.beginTime,
					endTime: this.endTime,
					pageNum: this.tableData.current,
					pageSize: 10
				}).then(res => {
					if (res.code === 200) {
						this.tableData.list = res.rows
						this.tableData.total = res.total
					}
					this.loading = false
				})
			},
			getParkingArreasReportList() {
				this.loading = true
				uni.$u.api.statisticalReportApi.getParkingArrearsReportListApi({
					beginTime: this.beginTime,
					endTime: this.endTime,
					pageNum: this.tableData.current,
					pageSize: 10
				}).then(res => {
					if (res.code === 200) {
						this.tableData.list = res.rows
						this.tableData.total = res.total
					}
					this.loading = false
				})
			},
			pageChange(cur) {
				this.tableData.current = cur
				if (this.tabCurName === 'road') {
					this.getArreasReportList()
				} else {
					this.getParkingArreasReportList()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './report.scss';
	.tab {
		margin-bottom: 10px;
	}
</style>