yxk_h5_master/pages/eqAccount/eqSupervise.vue

<template>
	<view class="page">
		<view class="example-body"  v-if="listCards.length>0">
			<view v-for="item in listCards" :key="item.id" class="example-box">
				<dev-block :title="item.title" :titleNumber="item.titleNumber" :note="item.note" 
				:extra="item.extra"  :tagType="item.tagType"
				:contentList="item.contentList"></dev-block>
			</view>
			<uni-load-more  :loadingType="loadingType" :contentText="contentText" ></uni-load-more>
		</view>
		<view class="example-body" v-else>
			<no-record ></no-record>
		</view>
		<view class="goHome" @click='goMain()'>
			<img src="../../static/img/gohome.png">
		</view>
	</view>
</template>

<script>
   
import devBlock from '@/components/xinsoft-dev-block/xinsoft-dev-block.vue'
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import noRecord from '@/components/xinsoft-no-record/xinsoft-no-record';

export default {    
	components: {
		devBlock,uniLoadMore,noRecord
	},
	data() {
		return {
			deviceId:'', //设备id
			pageSize:5, //一页多少条记录
			page:1,
	        title: 'list-triplex-row',
			listCards: [],
			//上拉刷新，下拉加载
			loadingText: '加载中...',
			loadingType: 0,//定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
			contentText: {
				contentdown:'上拉显示更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			}
	    }
	},
	onLoad(options) {
		this.deviceId = options.deviceId ;
		//初始化当前列表。
		this.getSupervise(this.deviceId);
	},
	onPullDownRefresh: function() {
	// 	//下拉刷新的时候请求一次数据
	    this.getSupervise(this.deviceId);
	},
	onReachBottom: function() {
		this.getSuperviseMore(this.deviceId);
	},
	methods: {
		getSupervise(deviceId){
			this.loadingType = 0;		
			this.$http.request({
			  url: '/apis/deviceSupervise/list',
			  params:{
				  pageno: this.page,
				  pagesize: this.pageSize,
				  deviceid:deviceId
			  },
			}).then(res=>{
				if(res.data.code == 0){
					this.page++;//得到数据之后page+1
					uni.hideNavigationBarLoading();
					uni.stopPullDownRefresh();//得到数据后停止下拉刷新
					if(res.data.data && res.data.data.datas.length>0){
						this.listCards = this.formaterData(res.data.data.datas);
					}
				}
			}).catch(err=>{
			});
		},
		getSuperviseMore(deviceId){
			if (this.loadingType !== 0) {//loadingType!=0;直接返回
				return false;
			}
			this.loadingType = 1;
			uni.showNavigationBarLoading();//显示加载动画
			this.$http.request({
				url: '/apis/deviceSupervise/list',
				params:{
				   pageno: this.page,
				   pagesize: this.pageSize,
				   deviceid:deviceId
				},
			}).then(res=>{
				if (!res.data.data|| res.data.data.length==0) {//没有数据
					this.loadingType = 2;
					uni.hideNavigationBarLoading();//关闭加载动画
					return;
				}
				if(res.data.code == 0){
					this.page++;//每触底一次 page +1
					this.loadingType = 0;//将loadingType归0重置
					uni.hideNavigationBarLoading();//关闭加载动画
					var resultData = this.formaterData(res.data.data.datas);
					this.listCards = [...this.listCards,...resultData];
				}
			}).catch(err=>{
			});
		},
		formaterData(data){
			var resData = [];
			data.forEach((vals,index)=>{
				var combineJSON = {
					id: vals.id,
					title: vals.checkitem+(vals.regulatorname?"-"+vals.regulatorname:''),
					contentList: [
						{
							id:1,
							isDouble:true,
							labelName:'检查人',
							labelContent:vals.rummager
						},						
						{
							id:2,
							isDouble:true,
							labelName:'检查周期',
							labelContent:(vals.period||'')+'天'
						},
						{
							id:3,
							isDouble:false,
							labelName:'检查时间',
							labelContent:vals.checktime
						},
						{
							id:4,
							isDouble:false,
							labelName:'下次检查',
							labelContent:vals.nextchecktime
						},
						{
							id:5,
							isDouble:false,
							labelName:'检查备注',
							labelContent:vals.remark
						},
					],
					note: '',
				}
				resData.push(combineJSON);
			});
			return resData;
		}
	}
};
</script>