FE-lab-xcx/pages_student/views/myRecord/index.vue

<!-- 进出记录详情 -->
<template>
	<view class="record-info-page">
		<view class="top-button-box">
			<!-- <view class="sub-box">
				<picker class="sub-box-min-box" @change="bindPickerChange" :value="subIndex" :range="subNameList">
					<view class="uni-input sub-box-name">{{subNameList[subIndex]}}</view>
					<view class="sub-box-button">v</view>
				</picker>
			</view> -->
			<view class="right-time-box">
				<uni-section class="section-time-box" :title="'日期范围用法：' + '[' + range + ']'" type="line"></uni-section>
				<uni-datetime-picker v-model="range" type="daterange" @change="changeLog($event)" />
			</view>
		</view>

		<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
			<view class="for-box" v-for="(item,index) in dataList" :key="index">
				<view class="time-p">{{item.showInTime}}</view>
				<view class="for-min-box" v-for="(minItem,minIndex) in item.list" :key="minIndex" @click="tableButton(minItem)">
					<view class="top-name-box">
						<view class="position-left"></view>
						<img v-if="minItem.avatar" :src="baseUrl+minItem.avatar">
						<img v-else :src="imagesUrl('commonality/icon_01.png')">
						<view class="top-name-p">{{minItem.userName}}</view>
						<view class="top-type-p"
							:class="minItem.accessStatus==1?'colorA':(minItem.accessStatus==2?'colorB':(minItem.accessStatus==3?'colorC':''))">
							{{minItem.accessStatusStr}}
						</view>
						<view class="position-right"></view>
					</view>
					<view class="titme-bottom-p">签到时间：{{minItem.inTime?minItem.inTime:'-'}}</view>
					<view class="titme-bottom-p">离开时间：{{minItem.outTime?minItem.outTime:'-'}}</view>
					<view class="titme-bottom-p">停留时间：{{minItem.hoursMinutes?minItem.hoursMinutes:'-'}}</view>
				</view>
			</view>
			<view class="get-data-null-p" v-if="getDataType">- 没有更多数据 -</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import {
		laboratoryAppletMyPassOutList
	} from '@/pages_student/api/index.js'
	export default {
		data() {
			return {
				baseUrl: config.base_url,
				range: [],
				subNameList: [],
				subList: [],
				subIndex: 0,
				// 查询参数
				queryParams: {
					page: 1,
					pageSize: 10,
				},
				//数据列表
				dataList: [],
				total: 0,
				getDataType: false,
			}
		},
		onLoad(option) {
			this.getList();
		},
		onShow() {
		},
		methods: {
			//选中数据
			tableButton(item) {
				if(item.accessStatus == 2){
					uni.navigateTo({
						url: '/pages_student/views/myRecord/infoPage?item=' + encodeURIComponent(JSON.stringify(item))
					});
				}
			},
			changeLog(e) {
				this.$set(this.queryParams,'page',1);
				this.$nextTick(() => {
					this.getList();
				})
			},
			bindPickerChange(e) {
				this.$set(this, 'subIndex', e.detail.value);
				this.$set(this.queryParams,'page',1);
				this.$nextTick(() => {
					this.getList();
				})
			},
			//滚动加载事件
			scrollGet() {
				if (this.total / this.queryParams.pageSize <= this.queryParams.page) {
					this.$set(this, 'getDataType', true);
				} else {
					this.queryParams.page += 1;
					this.$nextTick(() => {
						this.getList();
					})
				}
			},
			//获取数据列表
			async getList() {
				let self = this;
				let obj = JSON.parse(JSON.stringify(this.queryParams));
				console.log('this.range',this.range)
				console.log('this.range',this.range[0])
				if (this.range[0]) {
					obj.startTime = this.range[0] + 'T00:00:00'
					obj.endTime = this.range[1] + 'T23:59:59'
				} else {
					obj.startTime = '';
					obj.endTime = '';
				}
				const {
					data
				} = await laboratoryAppletMyPassOutList(obj);
				if (data.code == 200) {
					let list = [];
					if(this.queryParams.page != 1){
						list = JSON.parse(JSON.stringify(this.dataList));
					}
					data.data.records.forEach((item) => {
						let num = 0;
						list.forEach((minItem) => {
							if (item.showInTime == minItem.showInTime) {
								num++
								minItem.list.push(item)
							}
						})
						if (num == 0) {
							list.push({
								showInTime: item.showInTime,
								list: [item]
							})
						}
					})
					this.$set(this, 'dataList', list);
					this.$set(this, 'total', data.data.total);
					if (data.data.total / this.queryParams.pageSize <= this.queryParams.page) {
						this.$set(this, 'getDataType', true);
					}
				}
			},
		}
	}
</script>

<style lang="stylus" scoped>
	.record-info-page {
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.top-button-box {
			padding: 20rpx;
			display: flex;

			.sub-box {
				width: 250rpx;
				height: 70rpx;
				border-radius: 10rpx;
				margin-right: 10rpx;
				border: 1px solid #dedede;
				background-color: #fff;
				overflow: hidden;

				.sub-box-min-box {
					.sub-box-name {
						padding-left: 10rpx;
						line-height: 70rpx;
						display: inline-block;
						width: 200rpx;
						overflow: hidden
					}

					.sub-box-button {
						display: inline-block;
						line-height: 70rpx;
						width: 40rpx;
						text-align: center;
						color: #dedede;
						overflow: hidden
					}
				}
			}

			.right-time-box {
				flex: 1;
				height: 80rpx;
			}
		}

		.info-max-box {
			flex: 1;
			overflow-y scroll;

			.for-box {
				.time-p {

					margin: 0 32rpx;
					font-size: 30rpx;
				}

				.for-min-box {
					background: #fff;
					margin: 32rpx;
					padding-bottom: 30rpx;
					.top-name-box {
						position: relative;
						display: flex;
						border-bottom: 1rpx dashed #dedede;
						margin-bottom: 30rpx;

						img {
							width: 70rpx;
							height: 70rpx;
							border-radius: 50%;
							margin: 27rpx 31rpx 33rpx 31rpx;
						}

						.top-name-p {
							line-height: 130rpx;
							font-size: 28rpx;
							flex: 1;
							display: block;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.top-type-p {
							line-height: 130rpx;
							margin-right: 40rpx;
							font-size: 28rpx;
							display: block;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.colorA {
							color: #0183FA;
						}

						.colorB {
							color: #999999;
						}

						.colorC {
							color: #FA5801;
						}

						.position-left {
							position: absolute;
							left: -15rpx;
							top: 114rpx;
							width: 30rpx;
							height: 30rpx;
							background: #f5f5f5;
							border-radius: 15rpx;
						}

						.position-right {
							position: absolute;
							right: -15rpx;
							top: 114rpx;
							width: 30rpx;
							height: 30rpx;
							background: #f5f5f5;
							border-radius: 15rpx;
						}
					}

					.titme-bottom-p {
						line-height: 50rpx;
						font-size: 28rpx;
						margin: 0 32rpx;
					}
				}
			}

			.get-data-null-p {
				text-align: center;
				line-height: 40rpx;
				padding-bottom: 40px;
				color: #999;
			}
		}

	}
</style>