iot-ui-app/pages/intelligent/region/index.vue

<template>
	<view class="region-box">
		<mescroll-body class="new-mescroll" ref="mescrollRef" bottom="130" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" >
			<view class="region-list" v-if="dataList && dataList.length > 0">
				<view class="region-item">
					<view class="item-left">
						<view class="item-name">
							全部
						</view>
					</view>
					<view class="item-right">
						<view class="iconfont icon-xiangyou1"></view>
					</view>
				</view>
				<view class="region-item" v-for="(item,index) in dataList" :key="item.id">
					<view class="item-left">
						<view class="item-name">
							{{item.name}}
						</view>
						<view class="item-info">
							{{item.deviceNum?item.deviceNum:0}}个设备
						</view>
					</view>
					<view class="item-right">
						<view class="sort-box" v-if="sortStatus">
							<view class="iconfont icon-help"></view>
							<view class="iconfont icon-help"></view>
						</view>
						<view class="iconfont icon-xiangyou1"></view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<view class="btn-box">
			<button type="primary" @tap="refundBatteryFn">新增</button>
			<button type="primary" @tap="toggleSortStatus">{{sortStatus?'取消排序':'排序'}}</button>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default{
		data(){
			return{
				dataList:[
					{
						id:0,
						name:'客厅',
						deviceNum:10,
						sort:1,
					},
					{
						id:1,
						name:'主卧',
						deviceNum:4,
						sort:2,
					},
					{
						id:2,
						name:'次卧',
						deviceNum:3,
						sort:3,
					},
					{
						id:0,
						name:'客厅',
						deviceNum:10,
						sort:1,
					},
					{
						id:1,
						name:'主卧',
						deviceNum:4,
						sort:2,
					},
					{
						id:2,
						name:'次卧',
						deviceNum:3,
						sort:3,
					},
					{
						id:0,
						name:'客厅',
						deviceNum:10,
						sort:1,
					},
					{
						id:1,
						name:'主卧',
						deviceNum:4,
						sort:2,
					},
					{
						id:2,
						name:'次卧',
						deviceNum:3,
						sort:3,
					}
				],
				sortStatus:false,
				upOption:{
					page:{
						num : 0 ,
						size : 10 ,
						time : null
					},
					noMoreSize: 4, 
					empty:{
						// icon:'https://hcwl-cdn.cdn.bcebos.com/hcapp/iotos/app/iconImg/new.png',
						use : true ,
						tip: '~ 区域列表为空 ~',
					  fixed: true,
						top: "200rpx",
					},
					bgColor:"#fff"
				},
			}
		},
		mixins:[MescrollMixin],
		methods:{
			/*上拉加载的回调*/
			upCallback(page) {
				console.log("查询数据",page)
				// this.dataList = list; //追加新数据
				this.mescroll.endBySize(8, 10); // 推荐
				this.loading = false;
				// let pageNum = page.num; // 页码, 默认从1开始
				// let pageSize = page.size; // 页长, 默认每页10条
				// let obj = {
				// 	page:pageNum,
				// 	limit:pageSize,
				// 	msgType:this.tabIndex==0?'private':'public'
				// }
				// if (this.isToken) {
				// 	this.$api.getNewList(obj).then((res)=>{
				// 		console.log("当前获取到消息",res)
				// 		if (res.data.rows && res.data.rows.length>0) {
				// 			// 接口返回的当前页数据列表 (数组)
				// 			let curPageData = res.data.rows; 
				// 			// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
				// 			let curPageLen = curPageData && curPageData.length; 
				// 			//设置列表数据
				// 			console.log(curPageLen,res.data.total);
				// 			if(pageNum == 1){
				// 				this.newsList = []; //如果是第一页需手动置空列表
				// 				// this.getUnreadNewIdList(); //
				// 				this.getUnreadNewNum();
				// 			} 
				// 			this.newsList = this.newsList.concat(curPageData); //追加新数据
				// 			this.mescroll.endBySize(curPageLen, res.data.total); // 推荐
				// 			this.loading = false;
				// 			console.log("newsList",this.newsList)
				// 		} else{
				// 			this.newsList = [];
				// 			this.mescroll.endErr();
				// 			this.mescroll.showEmpty();
				// 			this.loading = false;
				// 			// this.mescroll.endUpScroll(true)
				// 		}
				// 	}).catch(()=>{
				// 		this.$u.toast('服务器开小差了呢，请您稍后再试')
				// 		this.newsList = [];
				// 		//联网失败, 结束加载
				// 		this.mescroll.endErr();
				// 		this.mescroll.showEmpty();
				// 		this.loading = false;
				// 	})
				// }else{
				// 	this.newsList = [];
				// 	this.mescroll.endErr();
				// 	this.mescroll.showEmpty();
				// 	this.loading = false;
				// }
			},
			toggleSortStatus(){
				this.sortStatus = !this.sortStatus;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.region-box{
		height: 100%;
		.region-list{
			.region-item{
				padding: 20rpx 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.item-left{
					.item-name{
						font-weight: bold;
					}
					.item-info{
						margin-top: 5rpx;
						font-size: 22rpx;
						color: #666;
					}
				}
				.item-right{
					display: flex;
					align-items: center;
					.sort-box{
						display: flex;
						.iconfont{
							margin-right: 42rpx;
							font-size: 48rpx;
							color: $mainColor;
						}
					}
					.icon-xiangyou1{
						font-size: 32rpx;
					}
				}
			}
		}
	}
	.btn-box{
		position: fixed;
		width: 100%;
		height: 130rpx;
		padding: 10rpx;
		padding-bottom: 20rpx;
		box-sizing: border-box;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #fff;
		button{
			width: 45%;
			background-color: $mainColor;
			color: #fff;
		}
		.bg-grey{
			background: #e7e7e7;
			color: #8a8c90;
		}
	}
</style>