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">嗨，{{nickName}}！</view>
				<view class="tita flexcc" v-if="list[0].isHouseholder=='Y'">户主</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>
		<block v-if="list.length">
			<view class="housebox pr" v-for="(ite,idx) in list" :key="idx" :data-idx="idx"
				@touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="'right:'+ite.right+'px'"
			>
				<view class="delleft pr">
					<view class="hblist">
						<view class="laber"><text>房屋坐落</text>：</view>
						<view class="tit">{{ite.location}}</view>
						<image :src="adrs" class="adrs"></image>
						<view class="flex1"></view>
						<view class="edit flexc flex0" @click.stop="getEdit(ite.houseId)">
							<image :src="edit"></image>
							编辑
						</view>
					</view>
					<view class="flexc">
						<view class="hblist w50">
							<view class="laber"><text>小区名称</text>：</view>
							<view class="tit">{{ite.communityName}}</view>
						</view>
						<view class="hblist w50">
							<view class="laber"><text>门牌号</text>：</view>
							<view class="tit">{{ite.detailedAddress}}</view>
						</view>
					</view>
					<view class="flexc">
						<view class="hblist w50">
							<view class="laber"><text>房屋所属</text>：</view>
							<view class="tit">{{ite.ownerName}}</view>
						</view>
						<view class="hblist w50">
							<view class="laber"><text>建筑面积</text>：</view>
							<view class="tit">{{ite.area}}m²</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">{{ite.hasParkingSpace=='Y'?'有':'无'}}</view>
						</view>
					</view>
				</view>
				<view class="spdel" v-if="ite.right>0&&checkPermi(['wuYe:houseInfo:remove'])" @click.stop="getDelFn(ite.houseId)">删除</view>
			</view>
		</block>
		<!-- 审核信息 -->
		<!-- <view class="cartipa" @click="getChargeFn">您有 <text class="plr5">2</text> 套房屋信息正在审核中，<text class="line">查看信息</text></view> -->
		<view style="height: 76rpx;"></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 {houseInfoList,houseInfoDel} from "@/api/work/work.js"
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	export default{
		components:{},
		data(){
			return{
				rimg: require('@/mine/static/house/rimg.png'),
				housebg:require('@/mine/static/house/house.png'),
				more:require("@/work/static/visitor/more.png"),
				adrs:require('@/mine/static/house/adrs.png'),
				edit:require('@/mine/static/house/edit.png'),
				backgroundColor: "transparent",
				nvaHeight:44,
				list:[],
				pageSize: 10,
				pageNum: 1,
				reachflag: true,
				wtdt:'',
				delBtnWidth:66,//左滑默认宽度
				nickName:this.$store.state.user.nickName,
				userId:this.$store.state.user.userId,
				phonenumber:this.$store.state.user.phonenumber,
			}
		},
		onUnload() {
			uni.$off('refHouseList')
		},
		onLoad: function() {
			uni.$on('refHouseList',(res)=>{
				this.getDataFn()
			})
			uni.getSystemInfo({
				success: (e) => {
					this.nvaHeight = Number(e.statusBarHeight)+44;
				}
			})
			this.getDataFn()
		},
		// 上拉触底加载更多触发事件
		onReachBottom() {
			if (this.reachflag) {
				this.pageNum++
				this.getDataFn()
			}
		},
		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")
			},
			getChargeFn(){
				this.$tab.navigateTo("/mine/pages/house/house")
			},
			getListFn(){
				this.$tab.navigateTo("/mine/pages/house/people")
			},
			getEdit(id){
				this.$tab.navigateTo("/mine/pages/house/addhouse?id="+id)
			},
			getBackFn(){
				uni.navigateBack({
					delta:1
				})
			},
			getDelFn(id){
				var that=this;
				uni.showModal({
					title: '确认删除',
					content: "是否确认删除",
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							houseInfoDel(id).then(res=>{
								if(res.code==200){
									that.$toast('删除成功')
									setTimeout(function(){
										that.getDataFn()
									},1200)
								}else{
									that.$toast(res.msg)
								}
							})
						} else if (res.cancel) {
						}
					}
				});
			},
			getDataFn(){
				var params={
					userId:this.userId,
					pageSize:this.pageSize,
					pageNum: this.pageNum,
				}
				houseInfoList(params).then(res=>{
					if(res.code==200){
						if (res.rows.length < this.pageSize) {
							this.reachflag = false
							this.wtdt = '到底了~';
						} else {
							var num = parseInt(res.rows.length) + parseInt(this.pageSize) * parseInt(this.pageNum -	1)
							if (num < res.total) {
								this.reachflag = true
								this.wtdt = ''
							} else {
								this.reachflag = false
								this.wtdt = '到底了~';
							}
						}
						var newArr=JSON.parse(JSON.stringify(res.rows))
						newArr.forEach(ite=>{
							ite.right=0;
						})
						if (this.pageNum == 1) {
							this.list = newArr;
						} else {
							this.list = this.list.concat(newArr)
						}
					}else{
						this.$toast(res.msg)
					}
				})
				
			},
			//开始触摸滑动
			drawStart(e) {
				console.log("开始触发");
				var touch = e.touches[0];
				this.startX = touch.clientX;
			},
			//触摸滑动
			drawMove(e) {
				// console.log("滑动");
				for (var index in this.list) {
					// this.csListArrl[index].right=0
					this.$set(this.list[index],'right',0);
				}
				var idx=e.currentTarget.dataset.idx
				var touch = e.touches[0];
				var item = this.list[idx];
				var disX = this.startX - touch.clientX;
				if (disX >= 20) {
				        if (disX > this.delBtnWidth) {
					    disX = this.delBtnWidth;
				        }
						// this.csListArrl[idx].right=disX
				        this.$set(this.list[idx],'right',disX);
				} else {
					// this.csListArrl[idx].right=0
					this.$set(this.list[idx],'right',0);
				}
			},
			//触摸滑动结束
			drawEnd(e) {
				// console.log("滑动结束");
				var idx=e.currentTarget.dataset.idx
				var item = this.list[idx];
				if (item.right >= this.delBtnWidth / 2) {
					// this.list[idx].right=this.delBtnWidth
					this.$set(this.list[idx],'right',this.delBtnWidth);
				} else {
					this.list[idx].right=0
				}
			},
		}
	}
</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;box-sizing: border-box;margin-bottom: 24rpx;
		.delleft{
			padding: 36rpx 24rpx 16rpx;
		}
		.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;}
		
	}
}
.edit{font-weight: 500;font-size: 24rpx;color: #06C770;
	image{width: 22rpx;height: 22rpx;margin-right: 4rpx;}
}
.cartips{background: #FFFFFF;border-radius: 20rpx;height: 98rpx;padding: 0 24rpx;
	image{width: 16rpx;height: 28rpx;flex: 0 0 auto;margin-left: 20rpx;}
	.tit{font-weight: bold;font-size: 26rpx;color: #272727;}
}
.cartipa{font-weight: 500;font-size: 24rpx;color: #666666;text-align: center;padding-top: 12rpx;
	text{color: #0256FD;
		&.line{text-decoration: underline;}
	}
}
</style>