pco/app/pages/inout-record/inout-record.vue

<template>
	<view>
		<view class="box">
			<view class="top">
				<text class="title">出入记录</text>
			</view>
		</view>
		<u-sticky offset-top="-90">
			<u-tabs :list="tabs" @change="change" :current="current" :is-scroll="false"></u-tabs>
		</u-sticky>
		<view class="card-box">
			<view class="card" v-for="(recordItem,index) in recordItemList" :key="index">
				<view class="t">
					<image class="icon" src="../../static/home-icon-01.png"></image>
					<text class="title">{{recordItem.companyName}}</text>
				</view>
				<view class="c">
					<view class="item car-num-item">
						<text class="car-num">{{recordItem.carNum}}</text>
					</view>
					<view class="item">
						<text class="p1">联系人:</text>
						<text class="p2">{{recordItem.user}}</text>
					</view>
					<view class="item">
						<text class="p1">联系电话:</text>
						<text class="p2">{{recordItem.phone}}</text>
					</view>
					<view class="item">
						<text class="p1">入场时间:</text>
						<text class="p2">{{recordItem.intime}}</text>
					</view>
					<view class="item">
						<text class="p1">出场时间:</text>
						<text class="p2">{{recordItem.outtime}}</text>
					</view>
					<view class="item">
						<text class="p1">状态:</text>
						<text class="p2">{{recordItem.state}}</text>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore style="margin: 30rpx;" :status="status"/>
		<uni-popup ref="shpopup" type="dialog">
		    <uni-popup-dialog type="success" title="确定审核吗？" :duration="2000" @confirm="shconfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:0,
				status: 'loadmore',
				page: 0,
				tabs: [
					{
						name: '全部',
					},
					{
						name: '未入场',
					},
					{
						name: '已入场',
					},
					{
						name: '已出场',
					}
				],
				recordItemList:[
					{
						companyName:'广西医科大一附院',
						carNum:'桂A.B5W61',
						user:'张三',
						phone:'18888888888',
						intime:'2022-01-17 19:02.01',
						outtime:'022-01-17 23:22.41',
						state:'未入场'
					},
					{
						companyName:'广西医科大一附院',
						carNum:'桂A.B5W61',
						user:'张三',
						phone:'18888888888',
						intime:'2022-01-17 19:02.01',
						outtime:'022-01-17 23:22.41',
						state:'已入场'
					},
					{
						companyName:'广西医科大一附院',
						carNum:'桂A.B5W61',
						user:'张三',
						phone:'18888888888',
						intime:'2022-01-17 19:02.01',
						outtime:'022-01-17 23:22.41',
						state:'已出场'
					}
				]
			}
		},
		methods: {
			//点击上方切换栏，根据点击项重新加载数据
			change(index) {
				this.current = index;
				if(index==0){
					//加载全部
				}
				if(index==1){
					//加载未入场
				}
				if(index==2){
					//只加载已入场
				}
				if(index==3){
					//只加载已出场
				}
			},
			//------------------------------------------
			//上拉加载更多，分页模拟数据
			onReachBottom() {
				if(this.page >= 3) return ;
				this.status = 'loading';
				this.page = ++ this.page;
				setTimeout(() => {
					this.recordItemList += 5;//接接口后把数据加上，懒得写假数据了
					if(this.page >= 3) this.status = 'nomore';
					else this.status = 'loading';
				}, 2000)
			}
		}
	}
</script>

<style lang="scss">
	.card-box{
		display: flex;
		width: 100%;
		flex-direction: column;
		.card{
			background-color: #fff;
			border-radius: 20rpx;
			margin: 20rpx 20rpx 0 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			.t{
				width: 100%;
				display: flex;
				align-items: center;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #f5f5f5;
				.icon{
					width: 40rpx;
					height: 40rpx;
				}
				.title{
					font-size: 30rpx;
					font-weight: bold;
					margin-left: 20rpx;
				}
			}
			.c{
				padding:15rpx 0 0 0;
				display: flex;
				flex-wrap: wrap;
				//border-bottom: 1rpx solid #f5f5f5;
				.item{
					width: 50%;
					padding: 20rpx 0;
					display: flex;
					.car-num{
						background-color: #edf6ff;
						color: #0080ff;
						font-size: 44rpx;
						padding: 15rpx 0;
						text-align: center;
						width: 100%;
						border-radius: 10rpx;
						font-weight: bold;
						letter-spacing: 20rpx;
					}
					.p1{
						font-size: 28rpx;
						color: #999;
						flex: 5;
					}
					.p2{
						font-size: 28rpx;
						color: #191919;
						font-weight: bold;
						margin-left: 20rpx;
						flex: 7;
					}
				}
				.car-num-item{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			.b{
				display: flex;
				width: 100%;
				align-items: center;
				justify-content: space-between;
				.btn{
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					//width: calc(50% - 15rpx);
					width: 100%;
					margin: 30rpx 0 0 0;
					border-radius: 10rpx;
					border-width: 1rpx;
					box-sizing: border-box;
				}
				.b1{
					background-color: #0080ff;
					color: #fff;
				}
				.b2{
					background-color: #f7f7f7;
					color: #191919;
				}
				.b3{
					background-color: #fff;
					color: #0080ff;
					border: 1rpx solid #0080ff;
				}
			}
		}
	}
	.t-btn{
		width: 400rpx;
		margin: 0 auto 80rpx auto;
		height: 88rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		color: #191919;
		font-size: 28rpx;
		background-color: #fff;
		border: 1px solid #eee;
	}
	@import '@/common/common.scss'
</style>