rongtong_301_app/wasteCheck/unusualDealInfo.vue

<template>
	<view class="content">
		<view class="status_bar">
			<view class="left" @click="goBack"><u-icon name="arrow-left"></u-icon>返回</view>
			<span style="font-size: 36rpx;">详情</span>
			<view class="right"></view>
		</view>
		<view class="mainCont">
			<view class="title">YU20212334234345<span style="float: right; color: #BCBCBC">已完成</span></view>
			<u-cell-group style="margin-bottom: 10px">
				<u-cell-item :arrow="false" :value-style="{textAlign: 'left',paddingLeft: '10px'}">
					<view slot="title"><span class="red"></span>科&emsp;&emsp;室：</view>
					脑科
				</u-cell-item>
			</u-cell-group>
			<u-cell-group style="margin-bottom: 10px">
				<u-cell-item :arrow="false" :value-style="{textAlign: 'left',paddingLeft: '10px'}">
					<view slot="title"><span class="red"></span>分&emsp;&emsp;类：</view>
					损伤性废物
				</u-cell-item>
				<u-cell-item :arrow="false" :value-style="{textAlign: 'left',paddingLeft: '10px'}">
					<view slot="title"><span class="red"></span>重&emsp;&emsp;量：</view>
					2.03kg
				</u-cell-item>
				<u-cell-item :arrow="false" :value-style="{textAlign: 'left',paddingLeft: '10px'}">
					<view slot="title"><span class="red"></span>打&ensp;包&ensp;人：</view>
					张雯雯
				</u-cell-item>
				<u-cell-item :arrow="false" :value-style="{textAlign: 'left',paddingLeft: '10px'}">
					<view slot="title"><span class="red"></span>打包时间：</view>
					2021-05-18 12:23:09
				</u-cell-item>
				<u-cell-item :arrow="false" :value-style="{textAlign: 'left',paddingLeft: '10px'}">
					<view slot="title"><span class="red"></span>暂&ensp;存&ensp;点：</view>
					西区内科大楼6层污洗室
				</u-cell-item>
			</u-cell-group>
			<view class="imgupload">
				<!-- <view>备注内容</view> -->
				<view class="imgbox">
					<img v-for="(item,index) in imgList" :src="item" alt="">
				</view>
				<!-- <u-upload :action="action" :file-list="fileList"></u-upload> -->
			</view>
			<u-cell-group style="margin-bottom: 10px">
				<u-cell-item :arrow="false" :value-style="{textAlign: 'left',paddingLeft: '10px'}">
					<view slot="title"><span class="red"></span>收&ensp;集&ensp;人：</view>
					顾一野
				</u-cell-item>
				<u-cell-item :arrow="false" :value-style="{textAlign: 'left',paddingLeft: '10px'}">
					<view slot="title"><span class="red"></span>收集时间：</view>
					2021-05-18 12:23:09
				</u-cell-item>
			</u-cell-group>
			<u-cell-group style="margin-bottom: 10px">
				<u-cell-item :arrow="false" :value-style="{textAlign: 'left',paddingLeft: '10px'}">
					<view slot="title"><span class="red"></span>验&ensp;收&ensp;人：</view>
					王菲菲
				</u-cell-item>
				<u-cell-item :arrow="false" :value-style="{textAlign: 'left',paddingLeft: '10px'}">
					<view slot="title"><span class="red"></span>验收时间：</view>
					2021-05-18 12:23:09
				</u-cell-item>
			</u-cell-group>
			<view class="imgupload">
				<view>异常内容：垃圾袋上的标签码扫不了</view>
				<view class="imgbox">
					<img v-for="(item,index) in imgList2" :src="item" alt="">
				</view>
				<!-- <u-upload :action="action" :file-list="fileList"></u-upload> -->
			</view>
			<view class="pcTop">异常处理</view>
			<u-cell-group style="margin-bottom: 10px">
				<u-cell-item :arrow="false" :value-style="{textAlign: 'left',paddingLeft: '10px'}">
					<view slot="title"><span class="red"></span>异常类型：</view>
					医废垃圾丢失
				</u-cell-item>
				<u-cell-item :arrow="false" :value-style="{textAlign: 'left',paddingLeft: '10px'}">
					<view slot="title"><span class="red"></span>备注说明：</view>
					内容
				</u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				remark: "",
				action: "",
				fileList: [],
				imgList: [
					'https://axure-file.lanhuapp.com/5d491d5c-5cae-4e6d-82e5-5cf1e34fce95__8f82b5f60d5110abb671e8328d88222a.png',
					'https://axure-file.lanhuapp.com/5d491d5c-5cae-4e6d-82e5-5cf1e34fce95__8f82b5f60d5110abb671e8328d88222a.png'
				],
				imgList2: [
					'https://axure-file.lanhuapp.com/5d491d5c-5cae-4e6d-82e5-5cf1e34fce95__8f82b5f60d5110abb671e8328d88222a.png',
					'https://axure-file.lanhuapp.com/5d491d5c-5cae-4e6d-82e5-5cf1e34fce95__8f82b5f60d5110abb671e8328d88222a.png'
				]
			}
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>

<style lang="scss">
	.mainCont {
		height: calc(100% - 80rpx);
		padding-bottom: 10px;
		overflow-y: scroll;
	}

	.title {
		height: 40px;
		line-height: 20px;
		padding: 10px;
	}

	.red {
		display: inline-block;
		width: 10px;
		height: 10px;
		color: red;
	}

	.imgupload {
		margin-bottom: 10px;
		padding: 10px 25px;
		background: #fff;

		.imgbox {
			img {
				width: 80px;
				height: 80px;
				margin: 10px 10px 10px 0;
			}
		}
	}

	.slot-btn {
		width: 80px;
		height: 80px;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #c0c4cc;
		border-radius: 5px;
	}

	.pcTop {
		width: calc(100% - 20px);
		padding: 0 10px;
		height: 20px;
		line-height: 20px;
		margin: 0 auto;
		margin-top: 10px;
		margin-bottom: 10px;
		position: relative;

		&:after {
			content: '';
			position: absolute;
			height: 20px;
			top: 0;
			left: 0;
			width: 2px;
			background-color: #6aa0f7;
		}
	}

	/deep/ .u-cell__value {
		color: #1c1c1c;
	}
</style>