property/user_ui/mine/pages/house/index.vue

<template>
	<view class="house" :style="'padding-top:'+nvaHeight+'px;'">
		<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" v-if="list.length">
				<view class="tit">嗨，袁玥！</view>
				<view class="tita flexcc">户主</view>
				<view class="flex1"></view>
				<view class="tbtns flex0 flexc" @click="getListFn">家庭成员
					<image :src="more"></image>
				</view>
			</view>
			<!-- 无 -->
			<block v-else>
				<view class="flexc mb10">
					<view class="tit">我的房屋</view>
				</view>
				<view class="txt mb10 fw5">您还未添加房屋信息喔~</view>
			</block>
			
			<view class="txt">Welcome back home</view>
			<image :src="housebg" class="houseimg"></image>
		</view>
		<view class="housebox" v-if="list.length">
			<view class="hblist">
				<view class="laber"><text>房屋坐落</text>：</view>
				<view class="tit">幸福大街88号幸福小区12#1101室</view>
				<image :src="adrs" class="adrs"></image>
			</view>
			<view class="flexc">
				<view class="hblist w50">
					<view class="laber"><text>房屋所属</text>：</view>
					<view class="tit">袁玥</view>
				</view>
				<view class="hblist w50">
					<view class="laber"><text>建筑面积</text>：</view>
					<view class="tit">121.3m²</view>
				</view>
			</view>
			<view class="flexc">
				<view class="hblist w50">
					<view class="laber"><text>房型</text>：</view>
					<view class="tit">3室1厅</view>
				</view>
				<view class="hblist w50">
					<view class="laber"><text>居住人口</text>：</view>
					<view class="tit">3口人</view>
				</view>
			</view>
			<view class="flexc">
				<view class="hblist w50">
					<view class="laber"><text>有无车位</text>：</view>
					<view class="tit">有</view>
				</view>
			</view>
		</view>
		
		<view class="hbtns bga mb18" v-if="list.length">修改信息</view>
		<view class="hbtns bgb" :class="list.length?'':'mt110'" @click="getAddFn">添加房屋</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{
				housebg:require('@/mine/static/house/house.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("/mine/pages/house/addhouse")
			},
			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>
	page{background: #F3F3F0;}
</style>
<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;
	.houtop{padding: 20rpx 4rpx 0 4rpx;height:520rpx;box-sizing: border-box;margin-bottom: 50rpx;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:204rpx;position: absolute;bottom: 0;right: -58rpx;}
		.tbtns{font-weight: 500;font-size: 26rpx;color: #0256FD;
			image{width: 20rpx;height: 16rpx;margin-left: 10rpx;}
		}
	}
	.housebox{width: 100%;background: #FFFFFF;border-radius: 20rpx;padding: 36rpx 24rpx 16rpx;box-sizing: border-box;margin-bottom: 100rpx;
		.hblist{display: flex;margin-bottom: 20rpx;
			.laber{font-weight: 500;font-size: 26rpx;color: #666666;flex: 0 0 auto;
				text{min-width: 104rpx;text-align-last: justify;display: inline-block;}
			}
			.tit{color: #272727;font-weight: 500;font-size: 26rpx;}
			.adrs{width: 20rpx;height: 22rpx;margin-left: 16rpx;flex: 0 0 auto;margin-top: 6rpx;}
		}
	}
	.hbtns{font-weight: bold;display: flex;align-items: center;justify-content: center;font-size: 26rpx;height: 88rpx;border-radius: 44rpx;box-sizing: border-box;
		&.bga{border: 1px solid #0256FD;color: #0256FD;background: #CADBFF;}
		&.bgb{border: 1px solid #45CB99;color: #45CB99;background: #DBF8ED;}
		
	}
}
</style>