v3-lab-xcx/pages_manage/laboratory/safetyCard.vue

<!-- 安全信息牌 -->
<template>
	<view class="safetyCard">
		<view class="liability-unit">责任单位:{{newData.deptName}}</view>
		<view class="small-title">实验室负责人</view>
		<view class="sub-head" style="border:none;">
			<view>{{newData.adminName}}</view>
			<view @click="callPhone(newData.adminPhone)">
				<img src="@/images/basicsModules/icon_aqxxp_dh.png">
				<view>{{newData.adminPhone}}</view>
			</view>
		</view>
		<view class="small-title">安全员</view>
		<view class="sub-head" v-for="(item,index) in newData.safeUserList">
			<view>{{item.safeUserName}}</view>
			<view @click="callPhone(item.safeUserPhone)">
				<img src="@/images/basicsModules/icon_aqxxp_dh.png">
				<view>{{item.safeUserPhone}}</view>
			</view>
		</view>
		<view class="classify" v-for="(item,index) in newData.labInfoBrandModels">
			<view v-if="item.privateList.length>0 && item.brandType==1" class="small-title">{{item.brandName}}</view>
			<view v-if="item.privateList.length>0 && item.brandType==1" class="small-items" v-for="(item2,index2) in item.privateList">
				<view>● </view>
				<view>{{item2.infoName}}</view>
			</view>
			<view  v-if="item.privateList.length>0 && item.brandType==2" class="logotype">{{item.brandName}}</view>
			<view  v-if="item.privateList.length>0 && item.brandType==2" class="logotype-img">
				<img v-for="(item3,index3) in item.privateList" :src="baseUrl+item3.infoContent">
			</view>
		</view>
		<!-- 二维码 -->
		<img v-if="newData.qrCode" class="code-img" :src="newData.qrCode">
	</view>
</template>

<script>
	import {} from '@/api/basicsModules/index.js'
	import { config } from '@/api/request/config.js'
	export default {
		name: "safetyCard",
		props: {
			subjectData: {},
		},
		data() {
			return {
				baseUrl:config.base_url,
				newData:{
					data1:'学院名称',
					data2:'曹秀康',
					data3:'155222663355',
					data4:[{name:'曹秀康',phone:'155222663355'},{name:'曹秀康',phone:'155222663355'},],
					data5:[
						{	type:1,
							name:'主要危险类别',
							child:[{name:'火灾'},{name:'盗窃'},{name:'高温'},{name:'化学试剂使用不当引发的燃烧、爆炸等风险化学试剂使用不当引发的燃烧、爆炸等风险'},]
						},
						{	type:1,
							name:'风险防控措施',
							child:[{name:'配备灭火器、灭火毯'},{name:'安装监控、无人时关闭门窗'}]
						},
						{	type:1,
							name:'灭火要点',
							child:[{name:'干粉灭火'},{name:'灭火毯灭火'}]
						},
						{	type:2,
							name:'安全警示标识',
							child:[
								{img: require('@/images/basicsModules/icon_yw_yc.png')},
								{img: require('@/images/basicsModules/icon_yw_yc.png')},
								{img: require('@/images/basicsModules/icon_yw_yc.png')},
								{img: require('@/images/basicsModules/icon_yw_yc.png')},
								{img: require('@/images/basicsModules/icon_yw_yc.png')},
								{img: require('@/images/basicsModules/icon_yw_yc.png')},
								{img: require('@/images/basicsModules/icon_yw_yc.png')},
								{img: require('@/images/basicsModules/icon_yw_yc.png')},
								{img: require('@/images/basicsModules/icon_yw_yc.png')},
								]
						},
					],
					qrCode:require('@/images/basicsModules/icon_yw_yc.png'),
				}
			}
		},
		created() {

		},
		mounted() {
			this.$set(this, 'newData',this.subjectData);
		},
		methods: {
			//拨打电话
			callPhone(tel){
				uni.makePhoneCall({
					phoneNumber: tel
				})
			},
		},
	}
</script>

<style lang="stylus" scoped>
	.safetyCard {
		width: 750rpx;
		.liability-unit{
			width: 750rpx;
			height: 100rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #222222;
			line-height: 100rpx;
			padding-left: 20rpx;
			box-sizing: border-box;
			background: #fff;
		}
		.small-title{
			width: 750rpx;
			height: 100rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #222222;
			line-height: 100rpx;
			padding-left: 20rpx;
			box-sizing: border-box;
		}
		.sub-head{
			width: 750rpx;
			height: 100rpx;
			background: #fff;
			padding:0 20rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #E0E0E0;
			>view:nth-of-type(1){
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;
				line-height: 30rpx;
			}
			>view:nth-of-type(2){
				display: flex;
				justify-content: flex-end;
				align-items: center;
				>img{
					width: 34rpx;
					height: 34rpx;
					margin-right: 14rpx;
				}
				>view{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #0183FA;
					line-height: 30rpx;
				}
			}
		}
		.sub-head:last-child{
			border-bottom: none;
		}
		.classify{
			.small-items{
				padding-left: 20rpx;
				box-sizing: border-box;
				background: #fff;
				display: flex;
				justify-content: flex-start;
				padding: 20rpx;
				box-sizing: border-box;
				>view:nth-of-type(1){
					color: #999999;
					margin-right: 12rpx;
				}
				>view:nth-of-type(2){
					display: block;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					line-height: 34rpx;
					color: #999999;
				}
				
			}
			.logotype{
				width: 750rpx;
				height: 100rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				line-height: 100rpx;
				padding-left: 20rpx;
				box-sizing: border-box;
				background: #0183FA;
			}
			.logotype-img{
				padding: 26rpx 0 34rpx 0;
				box-sizing: border-box;
				background: #fff;
				>img{
					display: inline-block;
					width: 86rpx;
					height: 114rpx;
					margin-left: 30rpx;
					margin-bottom: 20rpx;
				}
			}
		}
		.code-img{
			width: 178rpx;
			height: 178rpx;
			margin: 22rpx 0 50rpx 276rpx;
		}
	}
</style>