property/user_ui/work/pages/visitor/index.vue

<template>
	<view class="house" :style="'padding-top:'+nvaHeight+'px;'">
		<view class="flex1">
			<view class="navbox">
				<uni-nav-bar  color="#272727" left-icon="left"  @clickLeft="getBackFn"  :background-color="backgroundColor" :border="false" statusBar='true' fixed="true">
				</uni-nav-bar>
			</view>
			<view class="houtop">
				<!-- 有 -->
				<view class="flexc mb10">
					<view class="tit flex1">访客邀请</view>
					<view class="tbtns flex0 flexc" @click="getListFn">访客记录
						<image :src="more"></image>
					</view>
				</view>
				<view class="txt mb10 fw5">幸福大街幸福小区1号楼3单元1101</view>
				
				<view class="txt">open the door</view>
				<image :src="visbg" class="houseimg"></image>
			</view>
			<view class="hbtns bgb mb18"  @click="getAddFn">邀请访客</view>
			<view class="hbtns bga ">一键开门</view>
			<view class="tips">温馨提示：一键开门只针对已录入的本单元门栋大门</view>
		</view>
		<view class="hfbox">还未录入门洞信息？<text class="co025 tdu">去录入</text></view>
	<loading></loading>	
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	export default{
		components:{},
		data(){
			return{
				visbg:require('@/work/static/visitor/visbg.png'),
				more:require("@/work/static/visitor/more.png"),
				// adrs:require('@/mine/static/house/adrs.png'),
				backgroundColor: "transparent",
				nvaHeight:44,
				list:[{tit:'123'}],
				pageSize: 10,
				pageNum: 1,
				reachflag: true,
				wtdt:'',
			}
		},
		onLoad: function() {
			uni.getSystemInfo({
				success: (e) => {
					this.nvaHeight = Number(e.statusBarHeight)+44;
				}
			})
		},
		onPageScroll(e) {
			var scrollTop = Number(e.scrollTop);
			if (scrollTop > 0) {
				this.backgroundColor = '#CCDDFF'
			} else {
				this.backgroundColor = 'transparent'
			}
		},
		methods:{
			checkPermi, checkRole,
			getAddFn(){
				this.$tab.navigateTo("/work/pages/visitor/vadd")
			},
			getListFn(){
				this.$tab.navigateTo("/work/pages/visitor/vlist")
			},
			getBackFn(){
				uni.navigateBack({
					delta:1
				})
			},
			getDataFn(){
				return
				var params={
					pageSize:this.pageSize,
					pageNum: this.pageNum,
				}
				params.noticeType=this.tabidx
				getNoticeList(params).then(res=>{
					if(res.code==200){
						
					}else{
						this.$toast(res.msg)
					}
				})
				
			},
		}
	}
</script>
<style lang="scss" scoped>
.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;	}
.house{min-height: 100vh;background: linear-gradient(180deg, #CDDDFF 0%, rgba(255,255,255,0) 100%) no-repeat;background-size: 100% 578rpx;padding: 0 54rpx 100rpx;display: flex;flex-direction: column;
	.houtop{padding: 20rpx 4rpx 0 4rpx;height:520rpx;box-sizing: border-box;margin-bottom: 160rpx;position: relative;
		.tit{font-size: 36rpx;font-weight: bold;color: #272727;}
		.txt{font-size: 26rpx;color: #272727;}
		.tita{min-width: 86rpx;font-weight: 500;margin-left: 26rpx;font-size: 24rpx;color: #0156FE;height: 36rpx;border-radius: 18rpx;border: 2rpx solid #0156FE;}
		.houseimg{width: 596rpx;height:244rpx;position: absolute;bottom: 0;right: -58rpx;}
		.tbtns{font-weight: 500;font-size: 26rpx;color: #0256FD;
			image{width: 20rpx;height: 16rpx;margin-left: 10rpx;}
		}
	}
	.tips{font-weight: 500;text-align: center;margin-top: 26rpx;font-size: 22rpx;color: #0256FD;}
	.hbtns{font-weight: bold;display: flex;align-items: center;justify-content: center;font-size: 26rpx;height: 88rpx;border-radius: 44rpx;box-sizing: border-box;color: #FFFFFF;
		&.bga{background: #0256FD;}
		&.bgb{background: #45CB99;}
		
	}
	.hfbox{font-weight: 500;text-align: center;font-size: 24rpx;color: #AAAAAA;margin-top: 40rpx;}
}
</style>