hz-zhhq-app/pages/visitor-management/visitor-index.vue

<template>
	<view class="hzIndex">
		<hzHeader title="访客管理"></hzHeader>
		<view class="hzContent" style="padding-top: 200upx;">
			<view style="padding: 20upx;">
				<view class="box box-wrap" style="width: 100%;padding: 20upx 20upx;border-radius: 10upx;background-color: white;position: relative;">
					<view :style="permissions.length==5?'width: 20%;':'width: 25%;'" style=" margin-bottom: 15upx;" @click="navTo(item.pageUrl,item.children)" class="box box-column box-align-center" v-for="(item, index) in permissions" :key="index" v-if="item.isOpen == 0">
						<image class="box" style="width: 100upx; height: 100upx;" :src="item.iconUrl"></image>
						<view style="font-size: 26upx;color: grey;">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view>
				<text style="font-size: 30upx;padding: 0upx 20upx;font-weight: 600;">访客预约记录</text>
				<text class="more" @tap="moreList()">查看更多</text>
			</view>
			<view style="padding: 20upx;">
				<view v-if="visitorReservationList.length>0" style="border-radius: 10upx;">
					<view  v-for="(item, index) in visitorReservationList" :key="index"
						class="list-cell "
						@tap="detail(item)"
						style="border-bottom:2px solid #e7e7e7;border-radius:20upx"
					>	
						<view class="box box-between" >
							<view>
								<view class="cell-title-box" >
									<view class="cell-title">被访人员：{{ item.USER_NAME }}</view>
									<view class="cell-title">访客姓名：{{ item.PERSONNEL_NAME }}</view>
									<view class="cell-title">联系方式：{{ item.PERSONNEL_PHONE }}</view>
									
									<view class="cell-title">访问时间：{{ formatDate(item.VISITING_TIME) }}</view>
									<!-- <view class="cell-title">创建时间：{{ formatDate(item.CREATE_TIME) }}</view> -->
								</view>
							</view>
							<view class="box box-align-center">
								<image style="width: 20upx;height: 30upx;" src="/static/imgs/select.png"></image>
							</view>
						</view>
						
					</view>
					
					
				</view>
				<view v-else style="padding:20upx;text-align: center;color: #666;font-size: 30upx;background-color: white;border-radius: 10upx;">
					暂无数据
				</view>
			</view>
			<view  class="occupied" style="height: 200upx;"></view>
		</view>

		
	</view>
</template>

<script>
	import {getUserPermission3,getIssueVisitorByUserId} from '@/common/api.js';
	import {callbackRequest,formatDate,getStorage,callbackRequestNoLoading  } from '@/common/util.js';
	export default {
		data() {
			return {
				formatDate:formatDate,
				permissions:[],
				visitorReservationList:[],
				userId: getStorage('userInfo').userId,
				examineBatch:''
			}
		},
		onLoad(option) {
			let code = option.code||"";
			this.permissions = JSON.parse(option.permissions) ||[];
			this.examineBatch = option.examineBatch || 1;
			// console.log(this.permissions)
			// console.log(this.examineBatch)
			// this.getUserPermissions(code);
			this.getVisitorList();
		},
		methods: {
			getUserPermissions(code) {
				let that = this;
				// if (!that.userId) {
				// 	return;
				// }
				let userId= getStorage('userInfo').userId;
				callbackRequestNoLoading({ method: getUserPermission3, data: { userId: userId,parentCode:code } }).then(res => {
					if (res.data.returnCode == 1) {
						that.permissions = res.data.returnData;
					} else {
						console.log('获取权限失败');
					}
				});
			},
			getVisitorList() {
				let that = this;
				var data = {};
				data = {
					userId: that.userId,
					pageNum: 1, 
					pageSize: 4,
					type:'0'
					};
				callbackRequestNoLoading({ method: getIssueVisitorByUserId, data: data }).then(res => {
					if (res.data.returnCode == 1) {
						that.visitorReservationList = res.data.returnData;
						// console.log(res.data)
					} else {
						console.log('获取权限失败');
					}
				});
			},
			detail(item) {
				uni.navigateTo({
					url: `/pages/visitor-management/visitor-reservation-detail?item=`+JSON.stringify(item)+'&queryType=1&examineBatch='+this.examineBatch
				});
			},
			moreList(){
				// console.log(this.permissions)
				var url="/pages/visitor-management/visitor-reservation";
				var item=this.permissions.find(function (item) {
				    return item.pageUrl === url;
				});
				this.navTo(url,item.children)
			},
			navTo(url,child) {
				for(let i = 0;i<child.length;i++){
					if(child[i].type==1){
						if(url.indexOf('?')!=-1){
							url = url+'&'+child[i].pageUrl;
						}else{
							url = url+'?'+child[i].pageUrl;
						}
					}
				}
				uni.navigateTo({
					url
				});
			},
		}
	}
</script>

<style lang="scss">
	uni-page-body {
		background-color:#F6F9FF!important;
		min-height: 100% !important;
		height: auto !important;
	}
	
	.banner-box {
		width: 100%;
		height: 240upx;
		position: absolute;
		top: 0;
		left: 0;
		image {
			width: 100%;
			height: 100%;
		}
	}
.box {
	display: flex;
	display: -webkit-flex;
}

.box-row-reverse {
	flex-direction: row;
}

.box-column {
	flex-direction: column;
}

.box-left {
	justify-content: flex-start;
}

.box-right {
	justify-content: flex-end;
}

.box-center {
	justify-content: center;
}

.box-between {
	justify-content: space-between;
}
.box-around {
	justify-content: space-around;
}
.box-align-center {
	align-items: center;
}
// .box-align-be {
// 	align-items: b;
// }

.box-wrap {
	flex-wrap: wrap;
}	
	
.tab-banner{
	width: 100%;
	position: relative;
	
	.image{
		width: 100%;
		height: 200upx;
		position: absolute;
		top: 0upx;
	}
	.image2{
		position: absolute;
		top: 40upx;
		width: 100%;
		padding: 0px 20upx;
		height: 240upx;
	}
}

.list-cell {
		padding: 20upx 20upx;
		box-sizing: border-box;
		background: #fff;
		margin-bottom: 20upx;
	}
.cell-title {
	font-size: 28upx;
	/* line-height: 56upx; */
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}
.sub-title {
		padding-top: 10upx;
		font-size: 28upx;
		color: #bcbcbc;
	}
.more {
	font-size: 20upx;
	padding: 10upx 40upx;
	float: right;
	color: rgb(77, 180, 234);
}
</style>