FE-lab-xcx/pages_hazardousWasteRecycling/views/historicalRecords/infoPage.vue

<!-- 历史记录详情 -->
<template>
	<view class="historicalRecordsInfoPage">
		<view class="title-p" style="margin-top:20rpx;">基础信息</view>
		<view class="title-weight-p">报备单编号：{{newData.listNewData1}}</view>
		<view class="text-p">报备实验室：{{newData.listNewData2}}</view>
		<view class="text-p">上门回收日期：{{newData.listNewData3}}</view>
		<view class="text-p">报备人：{{newData.listNewData4}}</view>
		<view class="text-p">报备时间：{{newData.listNewData5}}</view>
		<view class="title-p">报备内容</view>
		<view class="positon-p" :class="newData.listNewData0==1?'colorA':(newData.listNewData0==2?'colorB':(newData.listNewData0==3?'colorC':''))">{{newData.listNewData0==1?'已报备待回收':(newData.listNewData0==2?'已回收':(newData.listNewData0==3?'超期未回收':''))}}</view>
		<view class="text-weight-box">
			<view>危险废物种类</view>
			<view>共{{dataList.length}}种</view>
		</view>
		<view class="text-box" v-for="(item,index) in dataList" :key="index">
			<view>{{item.name}}</view>
			<view>{{item.value}}{{item.unit}}</view>
		</view>
		<view class="remark-box">
			<view>备注说明</view>
			<view>{{newData.listNewData6}}</view>
		</view>
		<view class="flex-null-p"></view>
		<view class="bottom-button-p" v-if="newData.listNewData0==1">修改报备单</view>
		<view class="bottom-button-p" v-if="newData.listNewData0==2">称重登记单</view>
	</view>
</template>

<script>
	import {
		demo1,
		demo2
	} from '@/pages_hazardousWasteRecycling/api/index.js'
	export default {
		data() {
			return {
				newData:{
					listNewData0:'1',
					listNewData1:'HW202510400001',
					listNewData2:'植物营养实验室(A201)',
					listNewData3:'2025-11-05（星期四）',
					listNewData4:'王二小（2020110010）',
					listNewData5:'2025-11-04 10:10:09',
					listNewData6:'若为空则显示无，若有值则显示对应的备注内容，若为空则显示无，若有值则显示对应的数据内容，若为空则显示无，若有值则显示对应的数据内容，若为空则显示无，若有值则显示对应的数据内容，若为空则显示无，若有值则显示对应的数据内容。若为空则显示无，若有值则显示对应的备注内容，若为空则显示无，若有值则显示对应的数据内容，若为空则显示无，若有值则显示对应的数据内容，若为空则显示无，若有值则显示对应的数据内容，若为空则显示无，若有值则显示对应的数据内容。',
				},
				dataList:[
					{name:'实验室废液',value:'1',unit:'桶'},
					{name:'实验室废固',value:'2',unit:'袋'},
					{name:'动物解剖废弃物',value:'3',unit:'袋'},
					{name:'废旧试剂',value:'4',unit:'支'},
					{name:'剧毒废弃化学品',value:'5',unit:'瓶'},
					{name:'电池',value:'6',unit:'枚'},
				],
			}
		},
		onLoad(option) {
			
		},
		onShow() {

		},
		mounted() {
			
		},
		methods: {
			
		},
	}
</script>

<style lang="stylus" scoped>
	.historicalRecordsInfoPage{
		height: 100%;
		display flex;
		flex-direction column;
		background-color: #fff;
		position: relative;
		overflow-x: hidden;
		overflow-y: scroll;
		.title-p{
			line-height:80rpx;
			font-size:32rpx;
			padding:0 30rpx;
			color:#666;
		}
		.title-weight-p{
			line-height:60rpx;
			font-size:32rpx;
			padding:0 50rpx;
			color:#333;
			font-weight:700;
		}
		.text-p{
			line-height:60rpx;
			font-size:32rpx;
			padding:0 50rpx;
			color:#333;
		}
		.positon-p{
			position: absolute;
			top:20rpx;
			right:30rpx;
		}
		.text-weight-box{
			display: flex;
			line-height:60rpx;
			font-size:32rpx;
			padding:0 50rpx;
			color:#333;
			font-weight:700;
			view:nth-child(1){
				flex:1;
			}
			view:nth-child(2){
				
			}
		}
		.text-box{
			display: flex;
			line-height:60rpx;
			font-size:32rpx;
			padding:0 50rpx;
			color:#333;
			view:nth-child(1){
				flex:1;
			}
			view:nth-child(2){
				
			}
		}
		.remark-box{
			line-height:60rpx;
			font-size:32rpx;
			padding:0 30rpx;
			color:#333;
			view:nth-child(1){
				line-height:80rpx;
				font-size:32rpx;
				color:#333;
				font-weight:700;
			}
			view:nth-child(2){
				padding:0 20rpx;
				line-height:50rpx;
				font-size:32rpx;
				color:#333;
			}
		}
		.flex-null-p{
			flex:1;
		}
		.bottom-button-p{
			width:700rpx;
			height:80rpx;
			line-height:80rpx;
			font-size:34rpx;
			color:#fff;
			background-color: #0183FA;
			margin:40rpx 25rpx;
			border-radius:10rpx;
			text-align: center;
		}
		.colorA{
			color:#0183FA;
		}
		.colorB{
			color:#00CD66;
		}
		.colorC{
			color:#FF6A6A;
		}
	}
</style>