parking_inspection/pages/ownerInquiry/queryResults/queryResults.vue

<template>
	<view class="results">
		<z-paging ref="paging" v-model="resultList" @query="queryList">
			<view class="results-list">
				<view class="results-list-item" v-for="(item, index) in resultList" :key="index">
					<view class="results-list-item-title">
						<view class="left">
							<view>{{ item.cardNo }}</view>
							<view>{{ item.roadName }}</view>
						</view>
						<view class="right">{{ item.status === 0 ? '已完成': '' }}</view>
					</view>
					<view class="results-list-item-content">
						<view class="item">订单编号：{{ item.orderNo }}</view>
						<view class="item" v-if="item.type === 1">开始计费：{{ item.startDate }}</view>
						<view class="item" v-else>入场时间：{{ item.startDate }}</view>
						<view class="item" v-if="item.type === 1">结束计费：{{ item.endDate }}</view>
						<view class="item" v-else>出场时间：{{ item.endDate }}</view>
						<view class="item">免费时长：{{ item.freeDuration }}</view>
						<view class="item">计费时长：{{ item.calcDuration }}</view>
						<view class="item">累计停车时长：{{ item.totalDuration }}</view>
						<view class="item">应缴金额：<text>{{ item.shouldPay || 0 }}元</text></view>
						<view class="item">实缴金额：<text>{{ item.reallyPay || 0 }}元</text></view>
						<view class="item">泊位号：{{ item.parkNo }}</view>
						<view class="item" v-if="item.type === 1">车位锁设备号：{{ item.lockNo }}</view>
					</view>
					<view class="results-list-item-bottom">
						<view>收费标准</view>
						<view>
							<u-icon name="arrow-right" color="#969799" size="18"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				resultList: []
			}
		},
		methods: {
			queryList(pageNo, pageSize) {
				this.$refs.paging.complete([{
					cardNo: '贵AR366Y',
					roadName: '园丁路',
					status: 0,
					orderNo: '617947319799648256',
					startDate: '2021-11-09 15:08:2',
					endDate: '2021-11-10 09:23:43',
					freeDuration: '0天0时15分0秒',
					calcDuration: '0天17时59分16秒',
					totalDuration: '0天18时15分16秒',
					shouldPay: '0.24',
					reallyPay: '0.01',
					parkNo: 'DJ001',
					lockNo: '2015030411',
					type: 1
				}, {
					cardNo: '贵AR366Y',
					roadName: '园丁路',
					status: 0,
					orderNo: '617947319799648256',
					startDate: '2021-11-09 15:08:2',
					endDate: '2021-11-10 09:23:43',
					freeDuration: '0天0时15分0秒',
					calcDuration: '0天17时59分16秒',
					totalDuration: '0天18时15分16秒',
					shouldPay: '0.24',
					reallyPay: '0.01',
					parkNo: 'DJ001',
					lockNo: '2015030411',
					type: 2
				}])
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F6F6FF;
		min-height: calc(100vh - 88rpx);
	}

	.results {
		&-list {
			padding: 30rpx 40rpx;

			&-item {
				background-color: #fff;
				border-radius: 14rpx;
				margin-bottom: 20rpx;

				&-title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24rpx 40rpx;
					border-bottom: 1px solid #dfdfdf;
					margin-bottom: 30rpx;

					.left {
						view {
							&:first-child {
								font-size: 32rpx;
								font-weight: 600;
								color: #3a3a3a;
								line-height: 50rpx;
								letter-spacing: 1px;
							}

							&:last-child {
								color: #858585;
								font-size: 26rpx;
								line-height: 40rpx;
							}
						}
					}

					.right {
						padding: 0 14rpx;
						line-height: 50rpx;
						border-radius: 4rpx;
						border: 1px solid #bdbdbd;
						color: #858585;
					}
				}

				&-content {
					padding: 0 40rpx 24rpx;
					border-bottom: 1px solid #dfdfdf;

					.item {
						margin-bottom: 8rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #595959;
						line-height: 40rpx;
						letter-spacing: 1px;
						text {
							color: #fa6400;
						}
					}
				}

				&-bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 26rpx 32rpx;
					font-size: 28rpx;
					line-height: 54rpx;
					color: #606266;
					background-color: #fff;
					text-align: left;
				}
			}
		}
	}
</style>