safetyHome_wxapp/pages/family/family.vue

<template>
	<view>
		<view class="topImg">
			<image src="../../static/care_family.png" style="width: 100%;height: 100%;"></image>
			<view class="topTile">家人关怀</view>
			<view class="topNum">今天有<text style="font-weight:400;">0</text>条出行异常</view>
		</view>
		<!-- <view style="margin-top: 30rpx;"> -->
		<view style="width: 100%;">
			<!-- <view class="img">
				<image src="../../static/null_image_checking@2x.png" style="width: 100%;height: 100%;"></image>
			</view> -->
			<view style="width:520rpx;margin: 0 auto;margin-top: 30rpx;" v-show="visible">
				<image src="../../static/notData.png" style="width:520rpx ;height: 520rpx;"></image>
				<view style="width:144rpx;height:50rpx;font-size:36rpx;margin: 0 auto;margin-top: 46rpx;">暂无数据</view>
			</view>
		<view class="content" v-for="(item,index) in data" :key="index" v-show="!visible">
			<view class="item">
				<view class="left" style="width: 60rpx;">姓名</view><view  style="height:42rpx;margin-left: 138rpx;">{{item.personName}}</view>
				<view class="status" v-show="false">出行异常</view>
			</view>
			<view class="item">
				<view class="left">时间</view><view class="right">{{item.passTime}}</view>
			</view>
			<view class="item">
				<view class="left">通过入口</view><view class="right">{{item.deviceName}}</view>
			</view>
			<view class="item" style="padding-bottom: 20rpx;">
				<view class="left">通过类型</view>
				<view class="right" v-if="item.passType==1">人脸识别</view>
				<view class="right" v-else-if="item.passType==2">门禁卡</view>
				<view class="right" v-else-if="item.passType==3">密码开门</view>
				<view class="right" v-else-if="item.passType==4">app远程开门</view>
				<view class="right" v-else-if="item.passType==5">人脸与身份证比对</view>
				<view class="right" v-else-if="item.passType==6">二维码开门</view>
				<view class="right" v-else-if="item.passType==10">一键开门</view>
				<view class="right" v-else>其他</view>
			</view>
		</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				visible:true,
				moreIndex: '',
				IsFirst: true, //判断是否显示更多数据
				data: [
					
				]
			}
		},
		onShow() {
			// this.getList()
		},
		onTabItemTap(e) {
			uni.pageScrollTo({
			    scrollTop: 0,
			    duration: 300
			});
		this.getList()
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			this.getList()
		},
		onLoad() {

		},
		mounted() {

		},
		methods: {
			// 获取列表数据
			getList() {
				uni.showLoading({
					mask:true,
					title:'加载中'
				})
				this.http.httpRequest('/wxapplet/owner/peolepass/locklist', 'get', {
					cardNo: uni.getStorageSync('idNumber')
				}, true).then((res) => {
					if (res.code == 0) {
						// 判断返回数据是否为空
						if(res.data.rows.length==0){
							this.visible=true
						}else{
							this.visible=false
							this.data = res.data.rows
						}
						setTimeout(() => {
							uni.hideLoading()
							uni.stopPullDownRefresh()
						}, 1000)
					} else {
						uni.hideLoading()  
						uni.showToast({
							title: res.msg,
							"icon": 'none'
						})
					}
				}).catch(()=>{
					uni.hideLoading()
				})
			},
			// 查看更多数据
			seeMore(index) {}
		}
	}
</script>
<style>
	.title{
			width: 510rpx;
			height: 50rpx;
			font-size:36rpx;
			font-family:PingFang SC;
			font-weight:400;
			line-height:50rpx;
			color:rgba(36,36,36,1);
			margin:0 auto;
			margin-top: 30rpx;
			text-align: center;
			}
	.status{
		width:100rpx;
		height:26rpx;
		background:rgba(231,0,30,1);
		opacity:1;
		border-radius:22rpx;
		color: #FFFFFF;
		font-size:16rpx;
		font-family:PingFang SC;
		text-align: center;
		line-height: 26rpx;
		margin-top: 8rpx;
		margin-left:26rpx ;
	}
	.left {
		width: 180rpx;
		height: 42rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		
	}
	.right {
		width: 100%;
		height: 42rpx;
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(153,153,153,1);
		margin-left: 60rpx;
	}
	.rightStatus {
		width: 116rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(41, 138, 253, 1);
	}
	.item {
		width: 700rpx;
		margin: 0 auto;
		padding-top: 40rpx;
		display: flex;
	}

	.content {
		width: 100%;
		min-height: 280rpx;
		background: rgba(255, 255, 255, 1);
		/* box-shadow: 0rpx 6rpx 10rpx rgba(0, 0, 0, 0.1); */
		opacity: 1;
		overflow: hidden;
		border-bottom:2rpx solid rgba(215,215,217,1);
	}

	.topImg {
		width: 100%;
		height: 300rpx;
		position: relative;
	}

	.topTile {
		width: 180px;
		height: 60px;
		font-size: 44rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		position: absolute;
		top: 146rpx;
		left: 28rpx;
	}

	.topNum {
		height: 44rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		color: rgba(255, 255, 255, 1);
		position: absolute;
		top: 216rpx;
		left: 28rpx;
	}

	.rightBox {
		width: 572rpx;
		margin-left: 12rpx;
	}
</style>