ParkApp/pages/index/access-record/access-record.vue

<template>
	<view class="container">
		<view class="tabs" style="width: 420rpx;margin: 0rpx  auto;padding-top: 20rpx;">
			<scroll-view scroll-x class="nav" >
				<view class="flex text-center">
					<view  style="border: 1rpx solid #59a5f0;padding:15rpx 20rpx;" class="flex-sub" :class="index==subsectionCurrent?'nav-checked':'nav-unchecked'" v-for="(item,index) in subsectionList" :key="index" @tap="subsectionChange(index)" >
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view style="height: 100%;">
			<swiper style="height: 100%;" :current="subsectionCurrent"  @change="swiperChange"
				@animationfinish="animationfinish">
				<swiper-item >
					<scroll-view scroll-y style="height: 100%;">
						<view class="history">
							<u-time-line>
								<u-time-line-item nodeTop="2" v-for="(item,index) in dataList" :key="index">
									<template v-slot:node>
										<view class="u-node bg-white" >
											<u-icon name="clock-fill" color="#59a5f0" :size="28"></u-icon>
										</view>
									</template>
									<template v-slot:content>
										<view>
											<view class="">{{item.time}}</view>
											<view style="width: 636rpx;">
												<view class="content">
													<view class="flex justify-between">
														<view class="">
															<view class="nav-title">
																<text class="">人员姓名：</text>
																<text class="">{{item.name}}</text>
															</view>
															<view class="nav-title">
																<text >所属企业：</text>
																<text>{{item.enterpriseName}}</text>
															</view>
															<view class="nav-title">
																<text >开门设备：</text>
																<text>{{item.device}}</text>
															</view>
														</view>
														<view class="" v-if="item.faceImg">
															<image @click="preViewImg(item.faceImg)" :src="item.faceImg" style="width: 110rpx;height: 110rpx;border-radius: 10rpx;" mode=""></image>
														</view>
													</view>
													<view class="nav-title">
														<text >开门方式：</text>
														<text>{{item.openType}}</text>
													</view>
												</view>
												
											</view>
										</view>
									</template>
								</u-time-line-item>
							</u-time-line>
						</view>
						<u-divider height="80">到底了</u-divider>	
					</scroll-view>
				</swiper-item>
				<swiper-item >
					<scroll-view scroll-y style="height: 100%;">
						<view class="history">
							<u-time-line>
								<u-time-line-item v-if="index==1" nodeTop="2" v-for="(item,index) in dataList" :key="index">
									<template v-slot:node>
										<view class="u-node bg-white" >
											<u-icon name="clock-fill" color="#59a5f0" :size="28"></u-icon>
										</view>
									</template>
									<template v-slot:content>
										<view>
											<view >{{item.time}}</view>
											<view style="width: 636rpx;">
												<view class="content">
													<view class="flex justify-between">
														<view class="">
															<view class="nav-title">
																<text class="">人员姓名：</text>
																<text class="">{{item.name}}</text>
															</view>
															<view class="nav-title">
																<text >所属企业：</text>
																<text>{{item.enterpriseName}}</text>
															</view>
															<view class="nav-title">
																<text >开门设备：</text>
																<text>{{item.device}}</text>
															</view>
														</view>
														<view class="" v-if="item.faceImg">
															<image @click="preViewImg(item.faceImg)" :src="item.faceImg" style="width: 110rpx;height: 110rpx;border-radius: 10rpx;" mode=""></image>
														</view>
													</view>
													<view class="nav-title">
														<text >开门方式：</text>
														<text>{{item.openType}}</text>
													</view>
												</view>
												
											</view>
										</view>
									</template>
								</u-time-line-item>
							</u-time-line>
						</view>
						<u-divider height="80">到底了</u-divider>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script>
	export default {
		components:{
			
		},
		data() {
			return {
				dateShow:false,
				dataList:[],
				subsectionCurrent:0,
				swiperCurrent:0,
				subsectionList:[
					{
						name: '全部记录'
					},
					{
						name: '迟到记录'
					}
				]
				
			}
		},
		onLoad() {
			this.fetchStaticData()
		},
		methods: {
			subsectionChange(index){
				this.subsectionCurrent=index
			},
			swiperChange(e) {
			  uni.pageScrollTo({
			      scrollTop: 0,
			      duration: 0
			  });
			  this.subsectionCurrent = e.detail.current
			},
			animationfinish({detail: { current }}) {
				this.swiperCurrent = current;
				this.subsectionCurrent = current;
			},
			preViewImg(img){
				let urls=[img]
				uni.previewImage({
					urls:urls
				})
			},
			fetchStaticData(){
				this.dataList=[
					{
						name:'张文祥',
						enterpriseName:'宁夏新金凰印刷有限公司',
						device:'园区大门',
						openType:'小程序一键开门',
						time:'2020-12-19 17:02:45'
					},
					{
						name:'张文祥',
						enterpriseName:'宁夏新金凰印刷有限公司',
						device:'园区大门',
						openType:'面部识别开门',
						faceImg:'http://139.9.103.171:1888/miniofile/cyzhyc/adcb07fe-d31c-4fdf-80cd-d35385936814-template.png',
						time:'2020-12-19 17:02:45'
					},
					{
						name:'张文祥',
						enterpriseName:'宁夏新金凰印刷有限公司',
						device:'园区大门',
						openType:'小程序一键开门',
						time:'2020-12-19 17:02:45'
					},
				]
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #FFFFFF;
}
.nav .cu-item {
    height: 70rpx;
    display: inline-block;
    line-height: 70rpx;
    margin: 0 10rpx;
    padding: 0 20rpx;
}

.nav-title {
	font-size: 28upx;
	font-weight: 300;
	padding-top: 20rpx;
}
.history{
	box-sizing: border-box;
	padding: 40rpx 20rpx 20rpx 50rpx;
}
.content{
	box-shadow: 0 8rpx 10rpx rgba(234, 234, 234, 0.5),8rpx 0rpx 10rpx rgba(234, 234, 234,.5),-8rpx 0rpx 10rpx rgba(234, 234, 234,.5);
	background-color: #FFFFFF;
	padding: 20rpx;
	border-radius: 10rpx;
	margin: 20rpx 0;
}

.nav-checked{
	background-color: #59a5f0;
	color: #FFFFFF;
	font-weight: 800;
}

.nav-unchecked{
	background-color: #FFFFFF;
	color: #59a5f0;
}
	
.text-checked{
	font-weight: 800;
	background-color: #FFFFFF;
	color: #2f7ff5;
	font-size: 800;
}
view{
	box-sizing: border-box;
}
.container {
	  height: calc(100vh);
	  padding: 120rpx 0rpx 0rpx;
	 .tabs {
		height: 120rpx;
		position: fixed;
		top: 0rpx;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 3;
	  }
}
	.scroll-view {
		height: 150rpx;
		white-space: nowrap;
		width: 100%;
		position: relative;
		top: -30rpx;
	}
	.scroll-view-item {
		color: #FFFFFF;
		background-image: linear-gradient(to right, #2f7ff5, #2f7ff5);
		display: inline-block;
		text-align: left;
		padding: 20rpx 40rpx;
		margin:0 8rpx;
		width:24%;
		border-radius: 12rpx;
	}
	.scroll-view-item:first-child{
		margin-left: 30rpx;
	}
	.scroll-view-item:last-child{
		margin-right: 30rpx;
	}
</style>