hz-zhhq-app/pages/malfunc-repair/pass-visualization-detail.vue

<template>
	<view class="hzIndex">
		<hzHeader title="通行可视化详情"></hzHeader>
		<view class="container hzContent">
			<view class="details">
				<view class="detail_msg">
					<view class="info-item status">
						<text class="label">申请状态</text>
						<text v-if="item.isAuth =='0'" class="infoSpan2">未授权</text>
						<text v-if="item.isAuth =='1'" class="infoSpan" style="color: green;">已授权</text>
					</view>
				</view>
			</view>
			<view class="details">
				<view class="detail_msg">
					<view class="info-item">
						<text class="label">姓名:</text>
						<text class="infoSpan">{{ item.userName }}</text>
					</view>
					<view class="info-item">
						<text class="label">部门:</text>
						<text class="infoSpan">{{item.userDept}}</text>
					</view>
					<view class="info-item">
						<text class="label">联系方式:</text>
						<text
							class="infoSpan">{{item.userPhone}}</text>
					</view>

					<view class="info-item">
						<text class="label">申请时间:</text>
						<text class="infoSpan">{{item.applyTime}}</text>
					</view>
					<view class="info-item">
						<text class="label">人脸照片:</text>
						<view class="img-box">
							<image v-for="(itemImg,imgIndex) in item.userPhoto" :key="imgIndex" :src="formatImgUrl(itemImg)"
								mode="" @click="vbPicture(new Array(formatImgUrl(itemImg)))"></image>
						</view>
					</view>
					
					<view class="info-item">
						<text class="label">备注:</text>
						<text class="infoSpan">{{item.remark}}</text>
					</view>
				</view>

			</view>
			</view>
	</view>
</template>

<script>
	import {
		getUserInfo
	} from '@/common/api.js';
	import {
		callbackRequest,
		getStorage,
		alertTip,
		formatDate,
		sureAlterTip,
		vbPicture,
		formatImgUrl
	} from '@/common/util.js';
	export default {

		data() {
			return {
				vbPicture: vbPicture,
				formatImgUrl: formatImgUrl,
				userInfo: getStorage('userInfo'),
				userId: getStorage('userInfo').userId,
				formatDate: formatDate,
				item: {},
				pageTitle: ['报修', '报事'],
				id: 0,
			}
		},
		onLoad(option) {
			console.log(option)
			this.id = JSON.parse(option.item).id;
			console.log(this.id)
			this.getUserInfo();
		},
		methods: {
			getUserInfo() {
				let params = {
					method: getUserInfo,
					data: {
						userId: this.userId,
						id: this.id
					}
				};
				callbackRequest(params).then(res => {
					res = res.data;
					if (res.returnCode == 1) {
						this.item = res.returnData[0];
						if(this.item.userPhoto){
							this.item.userPhoto = this.item.userPhoto.split(',')
							console.log(this.item.userPhoto)
						}
					} else {
						alertTip(res.returnMsg);
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	@import '@/static/css/common.scss';

	.container {
		.details {
			font-size: 28upx;
			color: #555555;
			// height: 550upx;
			background: white;
			margin: 15upx;
			border-radius: 15upx;

			.detail_msg {
				margin-left: 24upx;
				border-radius: 10upx;

				.info-item {
					border-bottom: 1px solid #f8f8f8;
					line-height: 96upx;

					.label {
						display: inline-block;
						width: 168upx;
						font-size: 28upx;
						color: #333;
						font-weight: 400;
					}
				}

				.status {
					.infoSpan {
						color: #00c277;
					}

					.infoSpan2 {
						color: #FB8107;
					}
				}

				.img-box {

					// background: #fff;
					image {
						width: 200upx;
						height: 200upx;
						margin: 20upx 20upx 0 0;
					}
				}
			}
		}
	}

	.dateTit {
		width: 100%;
		display: flex;
		align-items: center;
		// margin-left: 16upx;

		image {
			width: 35upx;
			height: 35upx;
			margin-right: 10upx;
		}

		.leftIcon {
			width: 8upx;
			height: 30upx;
			background-image: linear-gradient(to bottom, #82E7B3, #94B8EF);
			border-radius: 5px;
			margin-right: 10upx;
		}
	}
</style>