uni-zhks-app/pages/m-worksheet/m-worksheet-pass/m-worksheet-pass.vue

<template>
	<view>
		<view class="user">
			<view class="img">
				<image src="../icon/user.png" mode=""></image>
			</view>
			<view class="info">
				<view class="name">测试用户</view>
				<view class="tip">信息监测中心-科员</view>
			</view>
		</view>
		<!-- section-1 -->
		<view class="section_1">
			<view class="item_box">
				<view class="text_box">
					<view class="label">工单分类：</view>
					<view class="inner">物资领用</view>
				</view>
			</view>
			<view class="item_box">
				<view class="text_box">
					<view class="label">工单编号132：</view>
					<view class="inner">3E9MH27</view>
				</view>
			</view>
			<view class="item_box">
				<view class="text_box" v-if="false">
					<view class="label">工单分类：</view>
					<view class="inner">物资领用</view>
				</view>
				<view class="img_box">
					<view class="label">图片：</view>
					<view class="img_list" @click="view_img()">
						<view class="img">
							<image src="https://images.pexels.com/photos/572056/pexels-photo-572056.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" mode="aspectFill"></image>
						</view>
						<view class="img">
							<image src="https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" mode="aspectFill"></image>
						</view>
						<view class="img">
							<image src="https://images.pexels.com/photos/67112/pexels-photo-67112.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" mode="aspectFill"></image>
						</view>
						<view class="img">
							<image src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" mode="aspectFill"></image>
						</view>
					</view>
				
				</view>
			</view>
		</view>
		
		<view class="steps" style="margin-top: 10rpx;">
			<view class="label">固定审批流程：</view>
			<YSteps color='#fff' backgroundColor='#009FE8' :infoList='list'></YSteps>
		</view>
	</view>
</template>

<script>
	import YSteps from '../../../components/Y-Steps/Y-Steps.vue'
	export default {
		components: {
			YSteps
		},
		onLoad(options) {
			// console.log(options.id)
			this.Authorization = uni.getStorageSync('token_type') +' '+uni.getStorageSync('Authorization')
			
			this.get_detail(options.id)
		},
		data() {
			return {
				Authorization:'',
				list: [
					{
						date: '2020-1-4',
						info: '的'
					},

					{
						date: '2020-1-4',
						info: '看见阿萨德和封口机撒的护肤科技撒地方即可撒地方就开始看见阿萨德和封口机撒的护肤科技撒地方即可撒地方就开始看见阿萨德和封口机撒的护肤科技撒地方即可撒地方就开始'
					},
				],
				
				
			};
		},
		methods:{
			view_img(){
				 // 预览图片
				uni.previewImage({
					urls: [
						"https://images.pexels.com/photos/572056/pexels-photo-572056.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
						"https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
						"https://images.pexels.com/photos/67112/pexels-photo-67112.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
						"https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
						
					],
					
				});
			},
			
			async get_detail(id){
				console.log(id)
				const Authorization = this.Authorization
				const res = await this.$myRequest({
					url:'/worksheet/checked/'+id,
					header:{
						Authorization:Authorization
					}
				})
				console.log(res.data.data)
			}
		}
	}
</script>

<style lang="scss">
	page{
		box-sizing: border-box;
		padding: 30rpx;
		padding-top: 10rpx;
	}
	.user{
		height: 158rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0 30rpx;
		.img{
			width: 108rpx;
			height: 108rpx;
			border-radius: 50%;
			overflow: hidden;
			image{
				width: 108rpx;
				height: 108rpx;
			}
		}
		.info{
			margin-left: 30rpx;
			.name{
				font-size: 34rpx;
				font-family: MicrosoftYaHei;
				color: #2C3E50;
				line-height: 46rpx;

			}
			.tip{
				margin-top: 10rpx;
				font-size: 24rpx;
				font-family: MicrosoftYaHei;
				color: #6C6F74;
				line-height: 32rpx;

			}
		}
	}

	.section_1{
		margin-top: 30rpx;
		.item_box{
			width: 690rpx;
			box-sizing: border-box;
			padding-left: 44rpx;
			padding-top: 25rpx;
			padding-bottom: 25rpx;
			padding-right: 30rpx;
			
			border-bottom: 2rpx solid #e0e0e0;
			.text_box{
				display: flex;
				justify-content: space-between;
				.label{
					width: 200rpx;
					font-size: 25rpx;
					font-family: MicrosoftYaHei;
					color: #2C3E50;
				
				}
				.inner{
					width: 400rpx;
					font-size: 25rpx;
					font-family: MicrosoftYaHei;
					color: #3498DB;
				
				}
			}
			.img_box{
				width: 616rpx;
				.label{
					width: 200rpx;
					font-size: 25rpx;
					font-family: MicrosoftYaHei;
					color: #2C3E50;
				
				}
				.img_list{
					overflow: hidden;
					margin-top: 18rpx;
					border: 4px dashed #ECF0F1;
					
					box-sizing: border-box;
					padding: 30rpx;
					.img{
						float: left;
						margin-right: 45rpx;
						margin-bottom: 30rpx;
						width: 150rpx;
						height: 150rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.img:nth-child(3n){
						margin-right: 0;
					}
				}
			}
			.file_box{
				width: 616rpx;
				.label{
					width: 200rpx;
					font-size: 25rpx;
					font-family: MicrosoftYaHei;
					color: #2C3E50;
				
				}
				.file_list{
					overflow: hidden;
					margin-top: 18rpx;
					border: 4px dashed #ECF0F1;
					
					box-sizing: border-box;
					padding: 30rpx;
					.file{
						float: left;
						margin-right: 45rpx;
						margin-bottom: 30rpx;
						image{
							width: 150rpx;
							height: 150rpx;
						}
					}
					.img:nth-child(3n){
						margin-right: 0;
					}
				}
			}
		}
	}
	
	.steps{
		box-sizing: border-box;
		padding-left: 44rpx;
		padding-top: 25rpx;
		padding-bottom: 25rpx;
		padding-right: 30rpx;
		.label{
			font-size: 25rpx;
			font-family: MicrosoftYaHei;
			color: #2C3E50;
		}
	}
</style>