H5InfoBoard/pages/home/infoBoard.vue

<template>
	<view id="infoBoard">
		
		<view class="sub-info-box">
			<view class="top-border-box"></view>
			<img class="positionImg" src="@/static/img_xyzc_bg@1x.png">
			<view class="sub-info-min-bnox">
				<view class="left-max-box">
					<view class="null-p"></view>
					<img src="@/static/346@1x.png" alt="">
					<view class="null-p"></view>
				</view>
				<view class="center-max-box">
					<view class="center-top-p">
						<view class="center-name">{{dataInfo.subName}}</view>
						<view class="center-text" v-if="dataInfo.levelName||dataInfo.typeName"
						:style="'border:4rpx solid '+(dataInfo.levelColor?dataInfo.levelColor:'#999')+';color:'+(dataInfo.levelColor?dataInfo.levelColor:'#999')+';'">
							<view v-if="dataInfo.levelName">{{dataInfo.levelName}}</view>
							<view v-if="dataInfo.levelName&&dataInfo.typeName" class="null-p" :style="'background-color:'+(dataInfo.levelColor?dataInfo.levelColor:'#999')+';'"></view>
							<view v-if="dataInfo.typeName">{{dataInfo.typeName}}</view>
						</view>
					</view>
					<view class="center-bottom-p">
						{{dataInfo.roomNum?dataInfo.roomNum+' ＆ ':''}}{{dataInfo.buildName?dataInfo.buildName:''}}{{dataInfo.floorName?dataInfo.floorName:''}}
					</view>
				</view>
				<view class="right-max-box" v-if="dataInfo.subArea">
					<view class="null-p"></view>
					<view>{{dataInfo.subArea}}㎡</view>
					<view class="null-p"></view>
				</view>
			</view>
			<view class="dept-box" v-if="dataInfo.deptName">
				<view>学院单位</view>
				<view>{{dataInfo.deptName}}</view>
			</view>
			<view class="user-max-box">
				<view class="user-title-box" @click="viewButton(1)">
						<view>实验室负责人</view>
						<img v-if="manageType" src="@/static/icon_06_1.png">
						<img v-else src="@/static/icon_06.png">
				</view>
				<Transition name="slide" appear>
					<view class="user-for-box" v-if="manageType" @click="makePhoneCall(dataInfo.adminPhone)">
						<view>{{dataInfo.adminName}}</view>
						<img src="@/static/icon_aqxxp_dh.png">
						<view>{{dataInfo.adminPhone}}</view>
					</view>
				</Transition>
			</view>
			<view class="user-max-box" v-if="dataInfo.safeUserList[0]">
				<view class="user-title-box" @click="viewButton(2)">
						<view>实验室安全员</view>
						<img v-if="secureType" src="@/static/icon_06_1.png">
						<img v-else src="@/static/icon_06.png">
				</view>
				<Transition name="slide" appear>
					<view v-if="secureType">
						<view class="user-for-box" @click="makePhoneCall(item.safeUserPhone)"
						v-for="(item,index) in dataInfo.safeUserList" :key="index">
							<view>{{item.safeUserName}}</view>
							<img src="@/static/icon_aqxxp_dh.png">
							<view>{{item.safeUserPhone}}</view>
						</view>
					</view>
				</Transition>
			</view>
			<view class="for-models-max-box"
			v-for="(item,index) in dataInfo.labInfoBrandModels" :key="index">
				<view class="for-models-title-box" @click="viewButton(3,index)">
					<view>{{item.brandName}}</view>
					<img v-if="item.showType" src="@/static/icon_06_1.png">
					<img v-else src="@/static/icon_06.png">
				</view>
				<Transition name="slide" appear>
					<view class="for-models-text-box" v-if="item.showType && item.brandType == 1">
						<view v-for="(minItem,minIndex) in item.publicList" :key="minIndex">
							{{minIndex+1}}. {{minItem.infoName}}
						</view>
					</view>
					<view class="for-models-img-box" v-if="item.showType && item.brandType == 2">
						<img v-for="(minItem,minIndex) in item.publicList" :key="minIndex"
						:src="baseUrl+minItem.infoContent">
					</view>
				</Transition>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	export default {
		name:'infoBoard',
		props: {
			dataInfo:{},
		},
		data() {
			return {
				baseUrl:config.base_url+'/',
				manageType:true,
				secureType:true,
			}
		},
		methods: {
			//收起展开
			viewButton(type,index){
				if(type == 1){
					this.manageType = !this.manageType;
				}else if(type == 2){
					this.secureType = !this.secureType;
				}else if(type == 3){
					this.dataInfo.labInfoBrandModels[index].showType = !this.dataInfo.labInfoBrandModels[index].showType;
				}
			},
			//拨打电话
			makePhoneCall(phone){
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
		}
	}
</script>

<style lang="stylus" scoped>
	#infoBoard {
		flex:1;
		display: flex;
		flex-direction: column;
		overflow-y: scroll;
		padding-top:28rpx;
		.sub-info-box{
			position: relative;
			.positionImg{
				position: absolute;
				top:-28rpx;
				left:105rpx;
				display: inline-block;
				height:31rpx;
				width:47rpx;
			}
			.top-border-box{
				height:3rpx;
				background-color: #F5F5F5;
			}
			.sub-info-min-bnox{
				display: flex;
				min-height:150rpx;
				border-bottom:20rpx solid #F5F5F5;
				.left-max-box{
					display: flex;
					flex-direction: column;
					.null-p{
						flex:1;
					}
					img{
						display: inline-block;
						width:80rpx;
						height:80rpx;
						margin:0 25rpx 0 30rpx;
					}
				}
				.center-max-box{
					flex:1;
					font-size: 30rpx;
					padding-bottom: 28rpx;
					.center-top-p{
						margin-top:28rpx;
						min-height:42rpx;
						line-height:42rpx;
						display: flex;
						.center-name{
							margin-right:16rpx;
							max-width:320rpx;
							display block
							// overflow hidden
							// text-overflow ellipsis
							// white-space nowrap
							word-wrap: break-word;
							overflow-wrap: break-word;
						}
						.center-text{
							height:34rpx;
							padding:0 8rpx;
							line-height:32rpx;
							font-size:24rpx;
							display: flex;
							border-radius:8rpx;
							.null-p{
								width:4rpx;
								margin:0 8rpx;
							}
						}
					}
					.center-bottom-p{
						margin-top:11rpx;
						min-height:42rpx;
						line-height:42rpx;
						color:#666;
						display block
						// overflow hidden
						// text-overflow ellipsis
						// white-space nowrap
						word-wrap: break-word;
						overflow-wrap: break-word;
						max-width:500rpx;
					}
				}
				.right-max-box{
					display: flex;
					flex-direction: column;
					width:100rpx;
					background: rgba(1,131,250,0.2);
					color:#0183FA;
					font-size:28rpx;
					text-align: center;
					.null-p{
						flex:1;
					}
				}
			}
			.dept-box{
				display: flex;
				view{
					flex:1;
					line-height:100rpx;
					font-size:30rpx;
				}
				view:nth-child(1){
					margin-left:30rpx;
					color:#333;
				}
				view:nth-child(2){
					margin-right:26rpx;
					text-align: right;
					color:#666;
				}
			}
			.user-max-box{
				.user-title-box{
					display: flex;
					border-top:1rpx solid #E0E0E0;
					view{
						flex:1;
						line-height:100rpx;
						margin-left:30rpx;
					}
					img{
						display: inline-block;
						width:18rpx;
						height:10rpx;
						margin:48rpx 32rpx 0;
					}
				}
				.user-for-box{
					display: flex;
					border-top:1rpx solid #E0E0E0;
					view{
						line-height:100rpx;
						font-size:30rpx;
					}
					view:nth-child(1){
						color:#666;
						flex:1;
						margin-left:30rpx;
					}
					img:nth-child(2){
						display: inline-block;
						width:30rpx;
						height:30rpx;
						margin-right:7rpx;
						margin-top:37rpx;
					}
					view:nth-child(3){
						color:#0183FA;
						margin-right:38rpx;
					}
				}
			}
			.for-models-max-box{
				.for-models-title-box{
					display: flex;
					border-top:1rpx solid #E0E0E0;
					view{
						flex:1;
						line-height:100rpx;
						margin-left:30rpx;
					}
					img{
						display: inline-block;
						width:18rpx;
						height:10rpx;
						margin:48rpx 32rpx 0;
					}
				}
				.for-models-text-box{
					border-top:1rpx solid #E0E0E0;
					padding:26rpx 0 26rpx;
					view{
						font-size:28rpx;
						line-height:39rpx;
						margin:13rpx 30rpx;
						color:#666;
						
					}
				}
				.for-models-img-box{
					border-top:1rpx solid #E0E0E0;
					padding:10rpx 0 20rpx;
					img{
						display: inline-block;
						width:112rpx;
						height:151rpx;
						margin:20rpx 0 0 32rpx;
					}
				}
			}
		}
		
		/* 进入动画的起始点 */
		.slide-enter{
		  opacity: 0;
			transform: translateX(20px);
		}
		/* 进入动画的过程 */
		.slide-enter-active{
		  transition: all .3s ease-out;
		}
		/* 进入动画的最终位置 */
		.slide-enter-to{
		  opacity: 1;
		}
		/* 离开动画的起始点 */
		.slide-leave{
		  opacity: 1;
		}
		/* 离开动画的过程 */
		.slide-leave-active{
			transition: all 0.4s cubic-bezier(1, 0.5, 0.8, 1);
		}
		/* 离开动画的最终位置 */
		.slide-leave-to{
			transform: translateX(20px);
		  opacity: 0;
		}
	}
</style>