parking_operation/pages/dataOverview/statisticalReport/components/reallyReceivable.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.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-tr>
				</uni-table>
			</view>
			<view class="table-pagination">
				<uni-pagination show-icon="true" :total="tableData.total" :current="tableData.current"></uni-pagination>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			currentDate: {
				type: Array,
				default: []
			},
			tableTh: {
				type: Array,
				default: () => {
					return [
						{ field: '时间', width: 120 },
						{ field: '应收金额(元)', width: 80 },
						{ field: '实收金额(元)', width: 80 },
						{ field: '逃费金额(元)', width: 80 },
						{ field: `“一分钱停车”减免`, width: 120 },
						{ field: '“八折停车”减免', width: 110 },
						{ 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
							}
						]
					}
				}
			}
		}
	}
</script>

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