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

<!-- 登记称重详情 -->
<template>
	<view class="weighingRegistrationInfoPage">
		<view class="title-p" style="margin-top:20rpx;">基础信息</view>
		<view class="title-weight-p">称重登记单编号：{{newData.registerNo}}</view>
		<view class="text-p">实验室：{{newData.subName}}({{newData.roomNum}})</view>
		<view class="text-p">上门回收日期：{{newData.recycleTime}}({{newData.recycleWeek}})</view>
		<view class="text-p">报备人：{{newData.reportName}}({{newData.reportAccount}})</view>
		<view class="text-p">报备时间：{{newData.reportTime}}</view>
		<view class="text-p">称重登记人：{{newData.register}}({{newData.registerNum}})</view>
		<view class="text-p">称重登记时间：{{newData.registerTime}}</view>
		<view class="text-p">回收人员确认时间：{{newData.confirmTime}}</view>
		<view class="signature-box">
			<view>回收人员签名：</view>
			<img :src="baseUrl+newData.collectorSign">
		</view>
		<view class="title-p">称重登记内容</view>
		<view class="text-weight-box">
			<view>危险废物种类</view>
			<view>共{{newData.details.length}}种</view>
		</view>
		<view class="text-box" v-for="(item,index) in newData.details" :key="index">
			<view>{{item.typeName}}</view>
			<view>{{item.weight}}kg</view>
		</view>
		<view class="img-box" v-if="newData.images[0]">
			<view>图片</view>
			<view>
				<img :src="baseUrl+img" v-for="(img,imgIndex) in newData.images" :key="imgIndex">
			</view>
		</view>
		<view class="flex-null-p"></view>
	</view>
</template>

<script>
	import {
		parseTime
	} from '@/component/public.js'
	import { config } from '@/api/request/config.js'
	import {
		hwmsAppRegisterOrderDetail,
	} from '@/pages_hazardousWasteRecycling/api/index.js'
	export default {
		data() {
			return {
				baseUrl:config.base_url,
				newData:{
					images:[],
				},
			}
		},
		onLoad(option) {
			this.hwmsAppRegisterOrderDetail(option.id);
		},
		onShow() {

		},
		mounted() {
			
		},
		methods: {
			async hwmsAppRegisterOrderDetail(id){
				const {
					data
				} = await hwmsAppRegisterOrderDetail({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>
	.weighingRegistrationInfoPage{
		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:34rpx;
			padding:0 30rpx;
			color:#0183FA;
		}
		.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;
		}
		.signature-box{
			display: flex;
			line-height:60rpx;
			font-size:32rpx;
			padding:0 50rpx;
			view{
				flex:1;
			}
			img{
				width:400rpx;
				height:160rpx;
				margin-top:15rpx;
			}
		}
		.img-box{
			line-height:60rpx;
			font-size:32rpx;
			padding:0 50rpx;
			margin-bottom:80rpx;
			view:nth-child(1){
				line-height:60rpx;
				font-size:32rpx;
				color:#333;
				font-weight:700;
			}
			view:nth-child(2){
				img{
					display: inline-block;
					width:210rpx;
					height:210rpx;
				}
				img:nth-child(2){
					margin:0 10rpx;
				}
			}
		}
		.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{
			width:2rpx;
			height:20rpx;
		}
		.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>