PropertyApp/pages/user/user.vue

<template>
	<view>
		<!-- 筛选标签条 -->
		<view class="cu-bar bg-white flex" style="padding: 0 10rpx;z-index: 100;width: 100%;position: fixed;top: -2rpx;">
			<view class="u-line-1" @click="showDown(index)" v-for="(item,index) in filterMenu" :key="index" style="width: 25%;text-align: center;height: 100%;">
				<text v-text="data[index]==''?item:data[index]" :class="data[index]==''?'':'text-red'"></text>
				<u-icon v-if="index!=4" name="arrow-down-fill" size="20" style="padding-left: 10rpx;"></u-icon>
				<text class="cuIcon-filter padding-left-10" v-else></text>
				<u-badge :offset="[10, 8]" v-if="index==4" size="mini" type="error" :count="filterCount"></u-badge>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view style="margin-top: 110rpx;">
				<card @deleteItem="delItem" :list="list"></card>
			</view>
		</mescroll-body>
		<!-- 小区 -->
		<u-popup  border-radius="60" height="60%"  mode="bottom" v-model="residentailShow">
			<view class="fixed cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<u-input style="width: 90%;" v-model="residentailKeyWord" type="text" :adjust-position="false" placeholder="请输入关键字搜索" confirm-type="search"/>
				</view>
			</view>
			<scroll-view v-if="!$isEmpty(residentailList)"  style="padding-top: 110rpx;height: 100%;" :scroll-y="true" >
				<view @click="residentailConfirm(item)" hover-class="hoverClass" class="text-center padding-30 solid-bottom"  v-for="(item,index) in residentailList" :key="index">
					<text>{{item.label}}</text>
				</view>
				<u-divider v-if="residentailList.length>=10" height="80">只显示十条数据</u-divider>
			</scroll-view>
			<u-empty v-else name="search"></u-empty>
		</u-popup>
		
		<!-- 楼栋 -->
		<u-popup  border-radius="60" height="60%"  mode="bottom" v-model="buildingShow">
			<view class="fixed cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<u-input style="width: 90%;" v-model="buildingKeyWord" type="text" :adjust-position="false" placeholder="请输入关键字搜索" confirm-type="search"/>
				</view>
			</view>
			<scroll-view v-if="!$isEmpty(buildingList)"  style="padding-top: 110rpx;height: 100%;" :scroll-y="true" >
				<view @click="buildingConfirm(item)" hover-class="hoverClass" class="text-center padding-30 solid-bottom"  v-for="(item,index) in buildingList" :key="index">
					<text>{{item.name}}</text>
				</view>
				<u-divider v-if="buildingList.length>=10" height="80">只显示十条数据</u-divider>
			</scroll-view>
			<u-empty v-else name="search"></u-empty>
		</u-popup>
		
		<!-- 单元选择器 -->
		<u-picker @confirm="unitConfirm" range-key="name" :range="unitList" v-model="unitShow" mode="selector"></u-picker>
		<!-- 人脸状态 -->
		<u-picker @confirm="faceStatusConfirm" range-key="name" :range="faceStatusList" v-model="faceShow" mode="selector"></u-picker>
		<!-- 筛选 -->
		<u-modal :show-cancel-button="true" cancel-text="重置"   @cancel="reset" @confirm="mescroll.resetUpScroll()" title="筛选" :mask-close-able="true" v-model="filterShow" >
			<view class="slot-content" style="margin: 20rpx;">
				<u-form label-width="150" :model="params" ref="uForm">
					<u-form-item label="姓名"><u-input v-model="params.name" /></u-form-item>
					<u-form-item :border-bottom="false" label="手机号"><u-input type="number"  v-model="params.tel" /></u-form-item>
				</u-form>
			</view>
		</u-modal>
		
		
		<!-- 添加按钮 -->
		<wm-list-add bgColor="#7fc6ac"  ref="add" @clickAdd="add"/>
		<!-- <add-btn @click.native="add"></add-btn> -->
		<!-- 通知alert -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import card from "./comps/card.vue"
	import wmListAdd from '@/components/wm-list-add/wm-list-add';
	import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
	let that;
	export default {
		components:{
			card,wmListAdd
		},
		mixins:[MescrollMixin],
		data() {
			return {
				//顶部菜单栏
				filterMenu: ["小区","楼栋","单元","人脸状态","筛选"],
				data:['','','','',''],
				
				//小区
				residentailShow:false,
				residentailList:[],
				residentailKeyWord:'',
				
				//楼栋
				buildingShow:false,
				buildingList:[],
				buildingKeyWord:'',
				
				//单元
				unitShow:false,
				unitList:[],
				
				//人脸状态
				faceShow:false,
				faceStatusList:[
					{
						'name':'待审核',
						'value':'0'
					},
					{
						'name':'审核通过',
						'value':'1'
					},
					{
						'name':'审核未通过',
						'value':'2'
					},
					{
						'name':'待上传',
						'value':'-1'
					},
				],
				
				//筛选框
				filterShow:false,
				filterCount:0,
				
				params:{},
				list: [],
				downOption: { 
					use: true,
					auto: false
				},
				upOption: {
					page: {
						page: 0,
						size: 10
					},
					noMoreSize: 5, 
					empty: {
						tip: '暂无相关数据'
					}
				},
			}
		},
		onLoad(){
			that=this
			this.getResidentailList()
		},
		onShow() {
			if (this.canReset) {
				this.mescroll.resetUpScroll()
			}
			this.canReset=true
		},
		watch:{
			residentailKeyWord(){
				let that=this
				//节流函数
				if (this.timer){
					clearTimeout(this.timer)//阻止setTimeout函数的执行
				}
				this.timer = setTimeout(() => {
					that.residentailList=[]
					this.getResidentailList()
				}, 500)
			},
			buildingKeyWord(){
				let that=this
				//节流函数
				if (this.timer){
					clearTimeout(this.timer)//阻止setTimeout函数的执行
				}
				this.timer = setTimeout(() => {
					that.buildingList=[]
					that.fetchBuildingList()
				}, 500)
			},
		},
		methods: {
			
	/* 小区 */
	
			//获取小区列表
			getResidentailList(){
				let params={
					isSelect:true,
					name: that.residentailKeyWord,
				}
				let list = [];
				this.$api.residential.page(params).then(res=>{
					let list=[]
					res.list.forEach(item=>{
						let obj={
							label:item.name,
							value:item.id
						}
						list.push(obj)
					})
					this.residentailList = list;
				})
			},
			//点击选择小区，获取楼栋列表
			residentailConfirm(res){
				this.params.residentialId =res.value
				this.data[0] = res.label
				this.residentailShow = false
				//获取楼栋列表
				this.fetchBuildingList()
				this.mescroll.resetUpScroll()
			},
			
	/* 楼栋 */		
			
			//获取楼栋列表
			fetchBuildingList(){
				let params={
					residentialId:this.params.residentialId,
					name:that.buildingKeyWord
				}
				this.$api.building.page(params).then(res=>{
					this.buildingList=res.data.records
				})
			},
			//点击选择楼栋，获取单元列表
			buildingConfirm(res){
				console.log(res);
				this.params.buildingId=res.id
				this.data[1] = res.name
				this.buildingShow = false
				
				this.getUnitByResidentialId()
				this.mescroll.resetUpScroll()
			},
			
			
	/* 单元 */		
			
			
			//获取单元列表
			getUnitByResidentialId(){
				let params={
					residentialId:this.params.residentialId,
					buildingId:this.params.buildingId
				}
				this.$api.unit.page(params).then(res=>{
					this.unitList=res.list
				})
			},
			//点击选择单元
			unitConfirm(index){
				this.data[2]=this.unitList[index].name
				this.params.unitId=this.unitList[index].id
				this.mescroll.resetUpScroll()
			},
			
	/* 人脸状态 */
	
			faceStatusConfirm(e){
				this.data[3]=this.faceStatusList[e].name
				this.params.checkState=this.faceStatusList[e].value
				this.mescroll.resetUpScroll()
			},
			
	/* 筛选 */
			//重置
			reset(){
				this.params={}
				this.data=['','','','','']
				this.residentailList=[]
				this.buildingList=[]
				this.unitList=[]
				this.residentailKeyWord=''
				this.buildingKeyWord='',
				this.list=[],
				this.getResidentailList()
				this.mescroll.resetUpScroll()
			},
			
			//获取筛选的条件数
			getFilterCount(){
				let n=0
				if (!this.$isEmpty(this.params.residentialId)) {
					//小区
					n++
				}
				if (!this.$isEmpty(this.params.buildingId)) {
					//楼栋
					n++
				}
				if (!this.$isEmpty(this.params.unitId)) {
					//单元
					n++
				}
				if (!this.$isEmpty(this.params.checkState)) {
					//人脸状态
					n++
				}
				if (!this.$isEmpty(this.params.name)) {
					//姓名
					n++
				}
				if (!this.$isEmpty(this.params.tel)) {
					//手机号
					n++
				}
				this.filterCount=n
			},
			
			/**
			 * 下拉回调
			 */
			downCallback(){
				setTimeout(()=>{
					this.mescroll.resetUpScroll()
				},1500)
			},
			/**
			 * 上拉回调
			 * @param {Object} mescroll
			 */
			upCallback(mescroll) {
				let params=this.params
				params.current=mescroll.num
				params.size=mescroll.size
				this.getFilterCount()
				try{
					this.$api.user.page(params).then(res=>{
						let data=res.data.records
						let length=data.length
						let total=res.data.total
						mescroll.endBySize(length, total);
						if(mescroll.num == 1) this.list = []; 
						this.list=this.list.concat(data); 
					})
				}catch(e){
					mescroll.endErr();
				}
			},
			
			/**
			 * 顶部菜单选择
			 * @param {Object} index 菜单下标
			 */
			showDown(index){
				if (index==0) {
					//小区
					this.residentailShow=true
				}else if (index==1) {
					//楼栋
					if (this.$isEmpty(this.params.residentialId)) {
						this.$u.toast('请选择小区')
					}else{
						this.buildingShow=true
					}
					return
				}else if (index==2) {
					//单元
					if (this.$isEmpty(this.params.buildingId)) {
						this.$u.toast('请选择楼栋')
					}else{
						this.unitShow=true
					}
					return
				}else if (index==3) {
					//人脸状态
					this.faceShow=true
				}else if (index==4) {
					//筛选
					this.filterShow=true
				}
			},
			//添加
			add(){
				uni.navigateTo({
					url:"./add"
				})
			},
			//删除
			delItem(item){
				this.$dialog.showModal('确定要删除此项吗?').then(res=>{
					this.$api.user.del({id:item.id}).then(res=>{
						if (res.data==true) {
							this.$u.toast('删除成功')
							that.mescroll.resetUpScroll()
						}
					})
				})
			}
		}
	}
</script>

<style>

</style>