FE-lab-xcx/pages/views/pages_patrolInspector/chemicalDetail.vue

<!-- 化学品详情-扫码 -->
<template>
  <view class="course">
	<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
		<view class="header">
			<view class="header-l">
				<img  :src="circularLogo">
			</view>
			<view class="header-r">
				<view class="header-r-t">
					<view>{{newData.chemicalName}}</view>
					<view>{{newData.chemicalLevel==1?'管控':'非管控'}}</view>
					<view :class="newData.status==0?'color-A':(newData.status==1?'color-B':'color-C')">{{newData.statusTag}}</view>
				</view>
				<view class="header-r-b">编码：{{newData.tagCode}}</view>
				<view class="header-r-b2">余量：{{newData.surplus}}{{newData.specUnit}}</view>
			</view>
		</view>
		<view class="tabTitle">
			<view class="tabTitle-li" @tap="tabClick(index)"  :key="index" v-for="(item,index) in tabText">
				<view :class="{on:curTab==index}" class="tabTitle-text">{{item}}</view>
			    <view :class="{on:curTab==index}" class="tabTitle-across"></view>
			</view>
		</view>
		<view class="list" v-if="pageType==0">
			<view class="list-border">
				<view class="list-li"><text>CAS：</text><text>{{newData.casNum}}</text></view>
				<view class="list-li"><text>别名：</text><text>{{newData.anotherName}}</text></view>
				<view class="list-li"><text>类别：</text><text>{{newData.chemicalCategoryName}}</text></view>
				<view class="list-li"><text>规格：</text><text>{{newData.specNum}}{{newData.specUnit}}/{{newData.packUnit}}</text></view>
				<view class="list-li"><text>归属人：</text><text>{{newData.belongName}}</text></view>
			</view>
			<view class="list-border">
				<view class="list-li"><text>学院：</text><text>{{newData.deptName}}</text></view>
				<view class="list-li"><text>楼栋：</text><text>{{newData.buildName}}-{{newData.floorName}}</text></view>
				<view class="list-li"><text>实验室：</text><text>{{newData.subName}}({{newData.subRoom}})</text></view>
				<view class="list-li"><text>存储位置：</text><text>{{newData.cabinetName}}-{{newData.doorName}}-{{newData.layers}}层</text></view>
			</view>
		</view>
		<viw class="list-tow" v-if="pageType==1" >
			<view class="list-tow-li" v-for="(item,index) in newData.chemicalUseList" :key="index">
				<view class="list-tow-li-t">
					<view class="list-tow-li-t-l"></view>
					<view class="list-tow-li-t-c">{{item.collectTime}}</view>
					<view class="list-tow-li-t-c2" :class="item.tagCode==1?'color-E':'color-D'">{{item.tagType}}</view>
					<view class="list-tow-li-t-r"></view>
				</view>
				<!-- tagCode 1领用，0是归还，3是空瓶出库-->
				<view class="list-tow-li-b">
					<view class="list-tow-li-b-li" v-if="item.tagCode==1 || item.tagCode==3"><text>领用人：</text><text>{{item.userName}}</text></view>
					<view class="list-tow-li-b-li" v-if="item.tagCode==1 || item.tagCode==3"><text>领用量：</text><text>{{item.collectNowNum}}{{item.specUnit}}</text></view>


					<view class="list-tow-li-b-li" v-if="item.tagCode==0"><text>归还人：</text><text>{{item.userName}}</text></view>
					<view class="list-tow-li-b-li" v-if="item.tagCode==0 || item.tagCode==3"><text>使用量：</text><text>{{item.useAmount}}{{item.specUnit}}</text></view>
					<view class="list-tow-li-b-li" v-if="item.tagCode==0"><text>余 量：</text><text>{{item.returnStockNum}}{{item.specUnit}}</text></view>
					<view class="list-tow-li-b-li"><text>双人认证：</text><text>{{item.doubleAuthen}}</text></view>
				</view>
			</view>
		</viw>
		<img class="null-img" v-if="pageType!=0 && !newData.chemicalUseList[0]" :src="imagesUrl('commonality/chemicalsInfoNull.png')">
		<p class="null-p" v-if="pageType!=0 && !newData.chemicalUseList[0]">暂无数据</p>
		<view class="tip" v-if="pageType!=0 && newData.chemicalUseList[0]">仅展示最近三个月的使用记录</view>
	</scroll-view>
  </view>

</template>

<script>
import { config } from '@/api/request/config.js'
import {chemicalAppletGetStockDetail} from '@/pages/api/index.js'
export default {
  name: "rectifyList",
  components: {

  },
  data() {
    return {
		circularLogo:uni.getStorageSync('circularLogo'),
		baseUrl:config.base_url,
		pageType:0,//0基本信息 1使用记录 2申领记录
		form:{
		},
		tabText:['基本信息','使用记录'],
		curTab:0,
		newData:{
			chemicalName:'',
			chemicalLevel:'',
			status:'',
			tagCode:'',
			surplus:'',
			specUnit:'',
			casNum:'',
			anotherName:'',
			chemicalCategoryName:'',
			specNum:'',
			specUnit:'',
			packUnit:'',
			belongName:'',
			deptName:'',
			buildName:'',
			floorName:'',
			subName:'',
			subRoom:'',
			cabinetName:'',
			doorName:'',
			layers:'',
			chemicalUseList:[],
		},
		tagCode:'',
		dataList:[],
		nickName:'',
	}
  },
  onLoad(option) {
	 this.tagCode=option.code;

  },
  onShow() {

  },
  mounted(){
	 this.chemicalAppletGetStockDetail();
  },
  methods: {
		//滚动事件
		scrollGet(){},
		tabClick(index) {
			this.curTab = index;
			this.pageType = index;
		},
		//详情
		async chemicalAppletGetStockDetail(){
			let self = this;
			const {data} = await chemicalAppletGetStockDetail({tagCode:this.tagCode});
			if(data.code == 200){
				this.$set(this, 'newData', data.data);
			}
		},
  }
}
</script>

<style lang="stylus" scoped>
.course{
	height:100%;
	display flex;
	box-sizing: border-box;
	.info-max-box{
		flex: 1;
		overflow: scroll;
	}
	.header{
		width: 750rpx;
		min-height: 200rpx;
		background: #fff;
		display: flex;
		justify-content: flex-start;
		.header-l{
			width: 120rpx;
			height: 120rpx;
			background: #FFFFFF;
			border-radius: 60rpx;
			margin:40rpx 40rpx 0 30rpx;
			>img{
				width: 120rpx;
				height: 120rpx;
			}
		}
		.header-r{
			flex: 1;
			.header-r-t{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-top: 24rpx;
				>view:nth-of-type(1){
					font-weight: 400;
					font-size: 30rpx;
					color: #333333;
					line-height: 42rpx;
				}
				>view:nth-of-type(2){
					font-weight: 400;
					font-size: 24rpx;
					color: #0183FA;
					background: #FFFFFF;
					border-radius: 6rpx;
					border: 1rpx solid #0183FA;
					padding: 6rpx 16rpx;
					box-sizing: border-box;
					margin: 0 10rpx 0 14rpx;
				}
				>view:nth-of-type(3){
					font-size: 24rpx;
					border-radius: 6rpx;
					padding: 6rpx 14rpx;
					box-sizing: border-box;
				}
				.color-A{
					color: #999999;
					background: #EDEDED;
				}
				.color-B{
					color: #0183FA;
					background: rgba(1,131,250,0.2);
				}
				.color-C{
					color: #2B80FF;
					background: rgba(43,128,255,0.2);
				}

			}
			.header-r-b{
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 42rpx;
				margin-top: 24rpx;

			}
			.header-r-b2{
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 42rpx;
				margin-top: 24rpx;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;

			    .risk{
					width: 180rpx;
					height: 50rpx;
					border-radius: 80rpx;
					opacity: 1;
					border: 1rpx solid #FF0000;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #FF0000;
					line-height: 50rpx;
					text-align: center;
					margin-right: 24rpx;
				}
				.ordinary{
					width: 180rpx;
					height: 50rpx;
					border-radius: 80rpx;
					opacity: 1;
					border: 1rpx solid #2BCB1D;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #2BCB1D;
					line-height: 50rpx;
					text-align: center;
					margin-right: 24rpx;
				}

			}
		}
	}
	.tabTitle{
		width:100%;
		height: 100rpx;
		display flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom:20rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		.tabTitle-li{
			position: relative;
			width:120rpx;
			text-align center;
			margin-right: 48rpx;
			.tabTitle-text{
				display: inline-block;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 82rpx;
				position: relative;
				>text{
					position:absolute;
					min-width: 30rpx;
					min-height: 30rpx;
					border-radius:54%;
					background: #E80000;
					font-size: 18rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
					line-height: 30rpx;
					margin-left: 6rpx;
					padding:2rpx;
					box-sizing: border-box;
				}
				&.on{
					color:#0183FA;
				}
			}
			.tabTitle-across{
				width: 92rpx;
				height: 4rpx;
				background: #0183FA;
				border-radius: 2rpx;
				margin-left: 10rpx;
				display none;
				&.on{
					display block;
				}
			}

		}
	}
	.list{
		width: 750rpx;
		margin-top:20rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		.list-border{
			width: 690rpx;
			height: auto;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			.list-li{
				border-bottom: 1rpx solid #D8D8D8;
				display: flex;
				justify-content: space-between;
				>text:nth-of-type(1){
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 80rpx;
				}
				>text:nth-of-type(2){
					flex:1;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 80rpx;
					text-align: right;
					overflow: hidden;//溢出隐藏
					text-overflow: ellipsis;//省略号
					white-space: nowrap;//强制文本不换行

				}
			}
			.list-li:last-child{
				border-bottom: none;
			}
		}


	}
	.list-tow{
		.list-tow-li{
			width: 690rpx;
			height:auto;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding-bottom: 20rpx;
			box-sizing: border-box;
			margin: 0 30rpx 20rpx;
			.list-tow-li-t{
				position: relative;
				min-height: 110rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.list-tow-li-t-l{
					position: absolute;
					left:-15rpx;
					top: 76rpx;
					width: 30rpx;
					height: 30rpx;
					background:#F5F5F5;
					border-radius: 15rpx;
				}
				.list-tow-li-t-c{
					min-height: 40rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					line-height: 36rpx;
					margin-left: 30rpx;
					margin-right: 20rpx;
					border-radius: 20rpx;
					padding: 20rpx 20rpx;
					box-sizing: border-box;

				}
				.list-tow-li-t-c2{
					background: rgba(31,165,13,0.2);
					border-radius: 0rpx 6rpx 0rpx 6rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #1FA50D;
					text-align: center;
					padding: 6rpx 12rpx;
					box-sizing: border-box;
					position: absolute;
					right: 0;
					top: 0;
				}

				.list-tow-li-t-r{
					position: absolute;
					right:-15rpx;
					top: 76rpx;
					width: 30rpx;
					height: 30rpx;
					background:#F5F5F5;
					border-radius: 15rpx;
				}
				.color-D{
					color: #07BC11;
					background: rgba(7,188,17,0.2);
				}
				.color-E{
					color: #0183FA;
					background: rgba(1,131,250,0.2);
				}
			}
			.list-tow-li-b{
				height:auto;
				border-top:1px dotted #D8D8D8;
				margin:0 30rpx;
				padding-top:14rpx;
				box-sizing: border-box;
				.list-tow-li-b-li{
					display: flex;
					justify-content: space-between;
					>text:nth-of-type(1){
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 74rpx;
					}
					>text:nth-of-type(2){
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 74rpx;
					}

				}
			}
		}
	}
	.null-img{
		width:300rpx;
		height:300rpx;
		display: block;
		margin:140rpx auto 15rpx;
	}
	.null-p{
		text-align: center;
		color:#999;
		font-size:28rpx;
	}
	.tip{
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 37rpx;
		text-align: center;
		margin-top: 42rpx;
		padding-bottom:140rpx;
	}
}

</style>