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.reportNo}}</view>
		<view class="text-p">报备实验室：{{newData.subName}}({{newData.roomNum}})</view>
		<view class="text-p">上门回收日期：{{newData.expectTime}}({{newData.expectWeek}})</view>
		<view class="text-p">报备人：{{newData.reportName}}({{newData.reportAccount}})</view>
		<view class="text-p">报备时间：{{newData.reportTime}}</view>
		<view class="title-p">报备内容</view>
		<view class="positon-p" :class="newData.status=='0'?'colorA':(newData.status=='1'?'colorB':(newData.listNewData0=='2'?'colorC':''))">{{newData.listNewData0=='0'?'已报备待回收':(newData.status=='1'?'已回收':(newData.status=='2'?'超期未回收':''))}}</view>
		<view class="text-weight-box">
			<view>危险废物种类</view>
			<view>共{{newData.wasteOrderHistoryDetailItemVos.length}}种</view>
		</view>
		<view class="text-box" v-for="(item,index) in newData.wasteOrderHistoryDetailItemVos" :key="index">
			<view>{{item.typeName}}</view>
			<view>{{item.quantity}}{{item.unit}}</view>
		</view>
		<view class="remark-box">
			<view>备注说明</view>
			<view>{{newData.remark}}</view>
		</view>
		<view class="flex-null-p"></view>
		<view class="bottom-button-p" v-if="newData.status=='0'" @click="goPage(1)">修改报备单</view>
		<view class="bottom-button-p" v-if="newData.status=='1'" @click="goPage(2)">称重登记单</view>
	</view>
</template>

<script>
	import {
		parseTime
	} from '@/component/public.js'
	import {
		hwmsAppWasteOrderHistoryDetail,
	} from '@/pages_hazardousWasteRecycling/api/index.js'
	export default {
		data() {
			return {
				newId:'',
				newData:{
					wasteOrderHistoryDetailItemVos:[],
				},
			}
		},
		onLoad(option) {
			this.$set(this,'newId',option.id);
		},
		onShow() {
			this.hwmsAppWasteOrderHistoryDetail(this.newId);
		},
		mounted() {
			
		},
		methods: {
			goPage(type){
				if(type == 1){
					uni.navigateTo({
						url: "/pages_hazardousWasteRecycling/views/recyclingReportRecord/index?subId="+this.newData.subId,
					});
				}else if(type == 2){
					uni.navigateTo({
						url: "/pages_hazardousWasteRecycling/views/weighingRegistration/infoPage?id="+this.newData.registerId,
					});
				}
			},
			async hwmsAppWasteOrderHistoryDetail(id){
				const {
					data
				} = await hwmsAppWasteOrderHistoryDetail({id:id});
				if (data.code == 200) {
					data.data.reportTime = parseTime(data.data.reportTime, "{y}-{m}-{d} {h}:{i}:{s}")
					this.$set(this,'newData',data.data);
				}
			},
		},
	}
</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>