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]" class="img-data-list-max-box">
			<view class="img-data-list-text-p">检查项</view>
			<view class="img-data-list-for-box" v-for="(item,index) in imgDataList" :key="index">
				<img :src="baseUrl+item.subUrl" v-if="item.subUrl">
				<view :class="item.subUrl?'img-data-list-name-box-one':'img-data-list-name-box-tow'"
					class="img-data-list-name-box">
					<view class="img-data-list-name">{{item.checkOutName}}</view>
					<uni-icons class="img-data-list-icon-box" type="checkmarkempty" color='#fff' size="24"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import {
		laboratoryAppletPhotoInspectList
	} from '@/pages_basics/api/index.js'
	export default {
		data() {
			return {
				baseUrl: config.base_url,
				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;
			}
		}

		.img-data-list-max-box {
			.img-data-list-text-p {
				line-height: 100rpx;
				font-size: 30rpx;
				padding: 0 30rpx;
			}

			.img-data-list-for-box {
				padding-bottom: 40rpx;

				img {
					margin:0 30rpx;
					width:690rpx;
					height: 250rpx;
					border-top-left-radius:20rpx;
					border-top-right-radius:20rpx;
				}

				.img-data-list-name-box-one {
					border: 1px dashed #dedede;
					border-top:none;
					border-bottom-left-radius:20rpx;
					border-bottom-right-radius:20rpx;
				}

				.img-data-list-name-box-tow {
					border: 1px dashed #dedede;
					border-radius: 20rpx;
				}

				.img-data-list-name-box {
					position: relative;
					height: 80rpx;
					margin: 0 30rpx;
					background-color: #fff;

					.img-data-list-name {
						font-size: 28rpx;
						line-height: 80rpx;
						margin-left: 30rpx;
						display: block;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.img-data-list-icon-box {
						position: absolute;
						right: 0;
						bottom: 0;
						background-color: #0183FA;
						border-top-left-radius: 20rpx;
						border-bottom-right-radius: 20rpx;
					}
				}
			}
		}
	}
</style>