ParkApp/pages/index/staff-temperature/staff-temperature.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="" v-if="!this.$isEmpty(dataList)">
							<view v-for="(item,index) in dataList" :key="index"  @click="goDetail(item)" class="mine_order_statue" >
								<view class="flex justify-between" style="padding: 10rpx 0 10rpx 10rpx ;">
									<view class="flex">
										<image  :src="item.faceUrl"  ></image>
										<view  class="flex flex-direction justify-around padding-left-30">
											<view class="">
												<text class="text-bold">姓名：</text>
												<text>{{item.personName}}</text>
											</view>
											<view class="">
												<text class="text-bold">温度：</text>
												<text>{{item.temperature}} ℃ </text>
											</view>
											<view class="">
												<text class="text-bold">测温时间：</text>
												<text>{{item.recogTime}}</text>
											</view>
										</view>
									</view>
									<view class="flex align-center justify-center">
										<text class="cuIcon-right"></text>
									</view>
								</view>
							</view>
							<u-divider bgColor="#f1f1f1" height="80">到底了</u-divider>
						</view>
						<u-empty v-else marginTop="-100"  text="暂无记录" src="http://139.9.103.171:1888/miniofile/xlyq/empty/empty.png"></u-empty>
					</scroll-view>
				</swiper-item>
				<swiper-item >
					<scroll-view scroll-y style="height: 100%;">
						<u-empty marginTop="-100"  text="暂无异常记录" src="http://139.9.103.171:1888/miniofile/xlyq/empty/empty.png"></u-empty>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		components:{
		},
		data() {
			return {
				subsectionCurrent:0,
				swiperCurrent:0,
				subsectionList:[
					{
						name: '全部记录'
					},
					{
						name: '异常记录'
					}
				],
				dataList:[]
				
			}
		},
		onLoad() {
			this.fetchStaffTemperature()
		},
		methods: {
			fetchStaffTemperature(){
				let creditCode=this.$cache.get('creditCode')
				if (this.$isEmpty(creditCode)) {
					this.$showModel('系统异常').then(res=>{
						uni.navigateBack({
							delta:1
						})
					})
				}
				this.$api.temperatureRecord.page({enterpriseCreditCode:creditCode,size:300}).then(res=>{
					this.dataList=res.data.records
				})
			},
			goDetail(item){
				getApp().globalData.staffTemperature=item
				uni.navigateTo({
					url:"/pages/index/staff-temperature/detail"
				})
			},
			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;
			},
		}
	}
</script>

<style lang="scss">
	.container {
		  height: calc(100vh);
		  background-color: #F6F6F6;
		  padding: 90rpx 0rpx 0rpx;
		 .tabs {
			 height: 90rpx;
		    position: fixed;
		    top: 0rpx;
			left: 0;
			right: 0;
			width: 100%;
			z-index: 3;
		  }
	}
	
	.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;
	}
	.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;
	}
.mine_order_statue {
	margin: 18upx 14upx 0;
	background: #fff;
	padding: 10upx 20upx;
	border-radius: 20rpx;
	image{
		background-color: #FFFFFF;
		width: 160rpx;
		height: 160rpx;
	}
}
</style>