FE-V2-XCX/pages/pages_safetyExamine/inforSign.vue

<!-- 安全信息牌 -->
<template>
  <view class="examine">
	<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
		<view class="header">
			<view class="header_l">
				<text>{{itemData.typeName}}</text>
				<text></text>
				<text>{{itemData.levelName}}</text>
			</view>
			<view class="header_r">{{itemData.deptName}}-{{itemData.room}}</view>
		</view>
		<view  class="basics">
			<view class="grade">
				<text>责任单位：</text>
				<text>{{itemData.deptName}}</text>
			</view>
			<view class="grade">
				<text>实验室负责人：</text>
				<text >{{itemData.adminName}}-{{itemData.adminPhone?itemData.adminPhone:'未填写'}}</text>
			</view>
			<view class="duty">
				<view class="duty_l">安全责任人：</view>
				<view class="duty_r">
					<text>{{itemData.safeUserNameAdminPhone}}</text>
				</view>
			</view>
		</view>
		<view class="category" v-if="item.privateList.length>0 && item.classifyType==1" v-for="(item,index) in  itemData.classifyList">
			<view class="title" :style="'background:'+item.showColour">{{item.classifyName}}</view>
			<view class="category_li" v-for="(item2,index2) in item.privateList" :key="index2"><text></text><text>{{item2.infoName}}</text></view>
		</view>
		<view class="category" v-if="item.privateList.length>0 && item.classifyType==2" v-for="(item,index) in  itemData.classifyList">
			<view class="title">{{item.classifyName}}</view>
			<view class="identify_img" @click="lockImg(item.privateList)">
				<img :src="baseUrl+item2.infoContent" v-for="(item2,index2) in item.privateList" :key="index2"/>
			</view>
		</view>
		<view class="category" v-if="item.privateList.length>0 && item.isSpecial==2" v-for="(item,index) in  itemData.classifyList">
			<view class="title">{{item.classifyName}}</view>
			<view class="telephone_li" v-for="(item3,index3) in item.privateList" :key="index3">{{item3.infoContent}}</view>
		</view>
		
	</scroll-view>
	<view  class="bottom_btn" @click="handleClick('start')">开展检查</view>
  </view>

</template>

<script>
import { config } from '@/api/request/config.js'
import { getSelectInfoByRoom,getInforSign} from '@/api/index.js'
export default {
  name: "rectifyList",
  components: {
   
  },
  data() {
    return {
		baseUrl:config.base_url,
		pageType:2,
		id:'',
		itemData:{},
	}
  },
  onLoad(option) {
	 if(option.subId){
	 	this.id=option.subId;
	 }
  },
  onShow() {
	  
  },
  mounted(){
	  this.getInforSign()
  },
  methods: {
		//滚动事件
		scrollGet(){},
		//查询详情
		async getInforSign(){
		  let self = this;
		  let id = uni.getStorageSync('saoCodeId');
		  const {data} = await getInforSign(id);
		  if(data.code == 200){
		    this.itemData = data.data;
			console.log(this.itemData)
		  }
		},
		//查看图片
		lockImg(list){
			console.log(list)
			if(!list[0]){
				return
			}
			let urlList=[];
			for(let i=0;i<list.length;i++){
				urlList.push(this.baseUrl+list[i].infoContent)
			}
			wx.previewImage({
				urls: urlList, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				current: '', // 当前显示图片的http链接，默认是第一个
				success: function(res) {},
				fail: function(res) {},
				complete: function(res) {},
			})
		},
	    handleClick(doType){
		  let self=this;
		  if(doType=='start'){//提交
			  uni.navigateTo({
			      url: '/pages/pages_safetyExamine/examineManage/examineAdd?id='+ uni.getStorageSync('saoCodeId')
			  });
		  }
	    },
  }
}
</script>

<style lang="stylus" scoped>
.examine{
	height:100%;
	display flex;
	box-sizing: border-box;
	.info-max-box{
		flex: 1;
		overflow: scroll;
		padding-bottom: 128rpx;
		box-sizing: border-box;
	}
	.header{
		width: 690rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx 30rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.header_l{
			width: auto;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			opacity: 1;
			border: 1rpx solid #DF4848;
			padding: 0 20rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-right: 26rpx;
			
			>text:nth-of-type(1){
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #DF4848;
				line-height: 60rpx;
			}
			>text:nth-of-type(2){
				display: inline-block;
				width: 0rpx;
				height: 19rpx;
				opacity: 1;
				border: 1rpx solid #A2A2A2;
				margin: 0 10rpx;
			}
			>text:nth-of-type(3){
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #DF4848;
				line-height: 60rpx;
			}
		}
		.header_r{
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 60rpx;
			flex: 1;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	.basics{
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 0rpx 30rpx;
		box-sizing: border-box;
		margin: 20rpx 30rpx ;
		.grade{
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #D8D8D8;
			>text:nth-of-type(1){
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 100rpx;
			}
			>text:nth-of-type(2){
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 100rpx;
				text-align: right;
			}
		}
		.duty{
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0rpx;
			box-sizing: border-box;
			.duty_l{
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 60rpx;
			}
			.duty_r{
				flex: 1;
				>text{
					display: block;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 60rpx;
					text-align: right;
				}
			}
		}
		
	}
	.category{
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx 30rpx ;
		padding-bottom: 20rpx;
		box-sizing: border-box;
		.title{
			width: 690rpx;
			height: 80rpx;
			background: #133E93;
			border-radius: 10rpx 10rpx 0rpx 0rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
			margin-bottom:20rpx;
		}
		.category_li{
			margin-left: 34rpx;
			display: flex;
			justify-content: flex-start;
			>text:nth-of-type(1){
				display: inline-block;
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				background: #D8D8D8;
				margin-right: 14rpx;
				margin-top: 20rpx;
			}
			>text:nth-of-type(2){
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 60rpx;
			}
		}
		/* 安全警示标识 */
		.identify_img{
			display: flex;
			justify-content: flex-start;
			flex-wrap:wrap;
			margin-left: 34rpx;
			>img{
				width: 67rpx;
				height: 90rpx;
				margin-right: 24rpx;
				margin-bottom: 20rpx;
			}
		}
		/* 紧急报警电话 */
		.telephone_li{
			flex: 1;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 60rpx;
			margin-left: 34rpx;
		}
	}
	/* 待整改 */
		
    .bottom_btn{
		position: fixed;
		bottom: 26rpx;
		left: 30rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 90rpx;
		width: 690rpx;
		height: 90rpx;
		background: #0183FA;
		border-radius: 20rpx;
		text-align: center;
		
	}
}
</style>