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

<!-- 欠费统计 -->
<template>
	<view class="container">
		<view class="table">
			<view class="table-date" v-if="currentDate">{{ currentDate.join(' 至 ') }}</view>
			<view class="table-box">
				<uni-table emptyText="暂无更多数据">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th class="table-box-th" align="center" v-for="(item, index) in tableTh" :key="index" :width="item.width || ''">{{ item.field }}
						</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item, index) in tableData.list" :key="index">
						<uni-td class="table-box-td" align="center">{{ item.road }}</uni-td>
						<uni-td class="table-box-td" align="center">{{ item.road }}</uni-td>
						<uni-td class="table-box-td" align="center">{{ item.num }}</uni-td>
						<uni-td class="table-box-td" align="center">{{ item.really }}</uni-td>
						<uni-td class="table-box-td" align="center">{{ item.really }}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			<view class="table-pagination">
				<uni-pagination show-icon="true" :total="tableData.total" :current="tableData.current"></uni-pagination>
			</view>
		</view>
		<view class="total">
			<view>
				欠费次数<text>{{ totalData.num }}</text>次，欠费金额<text>{{ totalData.really }}</text>元
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			currentDate: {
				type: Array,
				default: []
			},
			tableTh: {
				type: Array,
				default: () => {
					return [
						{ field: '车牌号', width: 120 },
						{ field: '车主姓名', width: 120 },
						{ field: '联系方式', width: 80 },
						{ field: '欠费次数(次)', width: 80 },
						{ field: '欠费金额(元)', width: 80 }
					]
				}
			},
			tableData: {
				type: Object,
				default: () => {
					return {
						current: 1,
						total: 30,
						list: [{
								num: 1001,
								name: 'xxx',
								road: '金科路',
								really: 80
							},
							{
								num: 1001,
								name: 'xxx',
								road: '金科路',
								should: 100,
								really: 80
							},
							{
								num: 1001,
								name: 'xxx',
								road: '金科路',
								should: 100,
								really: 80
							},
							{
								num: 1001,
								name: 'xxx',
								road: '金科路',
								should: 100,
								really: 80
							},
							{
								num: 1001,
								name: 'xxx',
								road: '金科路',
								should: 100,
								really: 80
							},
							{
								num: 1001,
								name: 'xxx',
								road: '金科路',
								should: 100,
								really: 80
							},
							{
								num: 1001,
								name: 'xxx',
								road: '金科路',
								should: 100,
								really: 80
							},
							{
								num: 1001,
								name: 'xxx',
								road: '金科路',
								should: 100,
								really: 80
							},
							{
								num: 1001,
								name: 'xxx',
								road: '金科路',
								should: 100,
								really: 80
							}
						]
					}
				}
			},
			totalData: {
				type: Object,
				default: () => {
					return {
						num: 100,
						really: 80
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './report.scss';
</style>