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

<!-- 登记称重详情 -->
<template>
	<view class="confirmationPage">
		<view class="title-p" style="margin-top:20rpx;">基础信息</view>
		<view class="title-weight-p">报备单编号：{{info.reportNo}}</view>
		<view class="text-p">实验室：{{info.subName}}({{info.roomNum}})</view>
		<view class="text-p">上门回收日期：{{info.expectTime}}({{info.expectWeek}})</view>
		<view class="text-p">报备人：{{info.reportName}}({{info.reportAccount}})</view>
		<view class="text-p">报备时间：{{info.reportTime}}</view>
		<view class="text-p">称重登记人：{{userName}}({{user}})</view>
		<view class="text-p">称重登记时间：{{currentTime}}</view>
		<view class="title-p">称重登记内容</view>
		<view class="text-weight-box">
			<view>危险废物种类</view>
			<view>共{{info.details.length}}种</view>
		</view>
		<view class="text-box" v-for="(item,index) in info.details" :key="index">
			<view>{{item.typeName}}</view>
			<view>{{item.weight}}kg</view>
		</view>
		<view class="title-p" v-if="info.images[0]">图片</view>
		<view class="img-box" v-if="info.images[0]">
			<view>
				<img :src="baseUrl+img" v-for="(img,imgIndex) in info.images" :key="imgIndex">
			</view>
		</view>
		<view class="flex-null-p"></view>
		<view class="bottom-button-p" @click="confirmatinButton()">回收人员确认</view>
	</view>
</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	export default {
		data() {
			return {
				baseUrl:config.base_url,
				newData:{
					images:[],
				},
				info:{
					details:[],
					images:[],
				},
				userName:uni.getStorageSync('user-name'),
				user:uni.getStorageSync('userName'),
				currentTime:'',
			}
		},
		onLoad(option) {
      this.currentTime = this.formatDate(new Date());
			this.$set(this,'newData',JSON.parse(decodeURIComponent(option.data)));
			this.$set(this,'info',JSON.parse(decodeURIComponent(option.info)));
		},
		onShow() {

		},
		mounted() {
			
		},
		methods: {
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			confirmatinButton(){
				uni.navigateTo({
					url: "/pages_hazardousWasteRecycling/views/weighingRegistration/signatureComponent?data=" + encodeURIComponent(JSON.stringify(this.newData))
				});
			},
		},
	}
</script>

<style lang="stylus" scoped>
	.confirmationPage{
		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(1){
				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>