v3-lab-xcx/pages_basics/views/record/infoPage.vue

<!-- 进出记录 -->
<template>
	<view class="record-list-page">
		<view class="for-min-box">
			<view class="top-name-box">
				<view class="position-left"></view>
				<img v-if="minItem.avatar" :src="baseUrl+minItem.avatar">
				<img v-else src="@/pages_basics/images/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 v-if="imgDataList[0]">
			<view>检查项</view>
			<view v-for="(item,index) in imgDataList" :key="index">
				
			</view>
		</view>
	</view>
</template>

<script>
	import {
		laboratoryAppletPhotoInspectList
	} from '@/pages_basics/api/index.js'
	export default {
		data() {
			return {
				minItem: null,
				imgDataList:[],
			}
		},
		onLoad(option) {
			this.minItem = JSON.parse(decodeURIComponent(option.item));
		},
		onShow() {
			this.laboratoryAppletPhotoInspectList();
		},
		methods: {

			//查询实验室
			async laboratoryAppletPhotoInspectList() {
				let self = this;
				const {
					data
				} = await laboratoryAppletPhotoInspectList({passOutId:this.minItem.passOutId});
				if (data.code == 200) {
					this.$set(this,'imgDataList',data.data);
				}
			},
		}
	}
</script>

<style lang="stylus" scoped>
	.record-list-page {
		height: 100%;

		.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;
			}
		}
	}
</style>