visitorDetail

pages/workSpace/visit/visitDetail.vue

@@ -85,12 +85,68 @@
 				</view>
 			</view>
 		</view>
+		<view id="visitorWrap" v-if="visitorDetailLimited">
+			<view class="visitorContainer">
+				<view class="visitorInfo">
+					<view class="infoTitle">姓名：</view><view>{{visitorItem.visitor_.name}}</view>
+				</view>
+				<view class="visitorInfo">
+					<view class="infoTitle">手机：</view><view>{{visitorItem.visitor_.phone}}</view>
+				</view>
+				<view class="visitorInfo">
+					<view class="infoTitle">头像：</view>
+					<image :src="visitorItem.photo"  @click="preView(visitorItem.photo)"></image>
+				</view>
+				<view class="visitorInfo">
+					<view class="infoTitle">反乡时间：</view><view>{{visitorItem.return_date}}</view>
+				</view>
+				<view class="visitorInfo">
+					<view class="infoTitle">来源地：</view><view>{{visitorItem.come_place}}</view>
+				</view>
+				<view class="visitorInfo">
+					<view class="infoTitle">行程轨迹：</view><view>{{visitorItem.trip_desc}}</view>
+				</view>
+				<view class="visitorInfo">
+					<view class="infoTitle">管控措施：</view><view>{{visitorItem.measure}}</view>
+				</view>
+				<view class="visitorInfo">
+					<view class="infoTitle">检测日期：</view><view>{{visitorItem.test_date}}</view>
+				</view>
+				<view class="visitorInfo">
+					<view class="infoTitle">是否已报备：</view><view>{{visitorItem.is_reported?'已报备':'未报备'}}</view>
+				</view>
+				<view class="visitorInfo">
+					<view class="infoTitle">是否主访客：</view><view>{{visitorItem.is_main?'是':'否'}}</view>
+				</view>
+				<view class="visitorInfo">
+					<view class="infoTitle">健康码：</view>
+					<view v-if="visitorItem.health_code==''">未上传</view>
+					<image v-else :src="visitorItem.health_code"  @click="preView(visitorItem.health_code)"></image>
+				</view>
+				<view class="visitorInfo">
+					<view class="infoTitle">行程码：</view>
+					<view v-if="visitorItem.travel_code==''">未上传</view>
+					<image v-else :src="visitorItem.travel_code"  @click="preView(visitorItem.travel_code)"></image>
+				</view>
+				<view class="visitorInfo">
+					<view class="infoTitle">核酸报告：</view>
+					<view v-if="visitorItem.test_report==''">未上传</view>
+					<image v-else :src="visitorItem.test_report"  @click="preView(visitorItem.test_report)"></image>
+				</view>
+			</view>
+			<icon class="closeDetailIcon" type="cancel" size="36" color="#fefefe" @click="closeVisitorDetail"/>
+		</view>
+		<img-view ref="imgPreView" :imgSrc="preImgSrc" @cancelPreView="cancelPreView"></img-view>
 	</view>
 </template>
 
 <script>
+	import imgView from "@/components/image-view/image-view.vue";
 	export default {
 		name: "visit",
+		components: {
+			imgView
+		},
 		data() {
 			return {
 				formData:{},
@@ -114,6 +170,9 @@
 					10: "一般",
 					20: "重要",
 				},
+				preImgSrc:null,
+				visitorItem:null,
+				visitorDetailLimited:false,
 			}
 		},
 		onLoad(params) {
@@ -167,11 +226,24 @@
 				})
 			},
 			viewPeople(item) {
-				uni.showToast({
-					title: item.id,
-					icon: 'none'
-				})
-			}
+				this.visitorItem = item;
+				this.visitorItem.photo = item.visitor_.photo!==''?this.vuex_host + item.visitor_.photo:'';
+				this.visitorItem.health_code = item.health_code!==''?(this.vuex_host + item.health_code):'';
+				this.visitorItem.travel_code = item.travel_code!==''?this.vuex_host + item.travel_code:'';
+				this.visitorItem.test_report = item.test_report!==''?this.vuex_host + item.test_report:'';
+				this.visitorDetailLimited = true;
+			},
+			closeVisitorDetail(){
+				this.visitorDetailLimited = false;
+				this.visitorItem = null;
+			},
+			preView(srcImg){
+				this.preImgSrc = srcImg;
+				this.$refs.imgPreView.open();
+			},
+			cancelPreView(){
+				this.preImgSrc = '';
+			},
 		}
 	}
 </script>
@@ -286,4 +358,37 @@
 		    color: #ffffff;
 		    font-size: 25upx;
 	}
+	#visitorWrap{
+		height: 100%;
+		width: 100%;
+		position: fixed;
+		top: 0;
+		left: 0;
+		background: rgba(0,0,0,.6);
+	}
+	.visitorContainer{
+		position: relative;
+		width: 90%;
+		left: 5%;
+		background: #ffffff;
+		padding: 40upx;
+		top: 50%;
+		transform: translateY(-50%);
+		max-height: 80%;
+		overflow-y: scroll;
+		border-radius: 20upx;
+	}
+	.visitorInfo{
+		display: flex;
+		margin: 20upx 0;
+	}
+	.infoTitle{
+		width: 170upx;
+	}
+	.closeDetailIcon{
+		position: absolute;
+		bottom: 5%;
+		left: 50%;
+		transform: translateX(-50%);
+	}
 </style>