ParkApp/pages/live/live.vue

<template>
	<view>
		<u-toast ref="uToast" />
		<view class="bg-white" style="position: sticky;top: 0;z-index: 999;">
			<view class="flex justify-around padding-20 bg-white">
				<view class="" @click="filter(1)">
					<text :class="residentialValue?'text-red':''">所属区域</text>
					<text class="cuIcon-unfold padding-left-10"></text>
				</view>
				<view class="" @click="filter(2)">
					<text :class="buildingValue?'text-red':''">所属楼栋</text>
					<text class="cuIcon-unfold padding-left-10"></text>
				</view>
				<view class="" :class="confirmFilter?'text-red':''" @click="filter(3)">
					<text>其他筛选</text>
					<text class="cuIcon-unfold padding-left-10"></text>
				</view>
			</view>
		</view>
		
		<!-- <view class="" :style="{height:dropdownHeight}"></view> -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<live-card :list="list"></live-card>
		</mescroll-body>
		
		<!-- 所属区域筛选 -->
		<u-select v-model="residentialShow" @confirm="residentialConfirm" :list="residentialList"></u-select>
		<u-select v-model="buildingShow" @confirm="buildingConfirm" :list="buildingList"></u-select>
		
		<u-modal cancel-text="重置" cancel-color="#000000" @cancel="filterReset" confirm-color="#5064eb" :show-cancel-button="true"  @confirm="filterConfirm" title="筛选" :mask-close-able="true" v-model="filterShow" >
			<view class="slot-content" style="margin: 20rpx;">
				<u-form label-width="150"  ref="uForm">
					<u-form-item :border-bottom="false" label="设备名称"><u-input v-model="deviceName" /></u-form-item>
				</u-form>
			</view>
		</u-modal>
		
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
	import liveCard from "./comps/live-card.vue"
	var that;
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components:{
			liveCard
		},
		data() {
			return {
				dropdownHeight:'',
				//筛选设备名称
				confirmFilter:false,//是否点击了筛选按钮，点击了筛选后就让文字显红
				filterShow:false,
				deviceName:'',
				
				//区域
				residentialValue: '',
				residentialShow: false,
				residentialList: [],
				
				//楼栋
				buildingValue:'',
				buildingShow: false,
				buildingList:[],
				
			}
		},
		onLoad() {
			that=this
			this.fetchResidentialList()
		},
		onReady() {
			this.$u.getRect('.dropdown').then(res=>{
				this.dropdownHeight=res.height+'px'
			})
		},
		methods: {
			fetchResidentialList(){
				this.$api.residential.selectPage({size:100}).then(res=>{
					this.residentialList=[{label:'全部',value:''}]
					res.data.forEach(item=>{
						let obj={
							label:item.name,
							value:item.id
						}
						this.residentialList.push(obj)
					})
				})
			},
			fetchBuilding(){
				let params={residentialId:this.residentialValue,size:100}
				this.$api.building.page(params).then(res=>{
					this.buildingList=[{label:'全部',value:''}]
					res.data.records.forEach(item=>{
						let obj={
							label:item.name,
							value:item.id
						}
						this.buildingList.push(obj)
					})
				})
			},
			upCallback(mescroll){
				let params={
					current:mescroll.num,
					size:mescroll.size,
					residentialId:this.residentialValue,
					buildingId:this.buildingValue,
					deviceName:this.deviceName
				}
				try{
					this.$api.live.page(params).then(res=>{
						let data=res.data
						mescroll.endSuccess(data.length);
						if(mescroll.num == 1) that.list = []; //如果是第一页需手动制空列表
						that.list=data; //追加新数据
					})
				}catch(e){
					this.mescroll.endErr()
				}
			},
			//筛选
			open(index) {
				this.$refs.uDropdown.highlight();
			},
			close(index) {
				this.$refs.uDropdown.highlight(index);
			},
			closeDropdown() {
				this.$refs.uDropdown.close();
			},
			reset(){
				this.deviceName=''
				this.residentialValue=''
				this.buildingValue=''
				this.mescroll.resetUpScroll();
				this.closeDropdown()
			},
			filter(type){
				if (type==1) {
					//筛选区域
					this.residentialShow=true
					return
				}
				if (type==2) {
					if (this.$isEmpty(this.residentialValue)) {
						this.$refs.uToast.show({
							title: '请选择区域',
							type: 'error',
							position:'top'
						})
						return
					}
					//筛选楼栋
					this.buildingShow=true
					return
				}
				
				if (type==3) {
					this.filterShow=true
					return
				}
			},
			residentialConfirm(e){
				this.residentialValue=e[0].value
				//获取楼栋列表
				this.fetchBuilding()
				this.reload()
			},
			buildingConfirm(e){
				this.buildingValue=e[0].value
				this.reload()
			},
			filterConfirm(){
				this.confirmFilter=true
				this.reload()
			},
			/**
			 * 重置筛选项
			 */
			filterReset(){
				this.residentialValue=''
				this.buildingValue=''
				this.deviceName=''
				this.confirmFilter=false
				this.reload()
				
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #dadada;
	}
</style>