wechat_yxcl/pages/dataSummary/dataSummary.vue

<template>
	<view class="content">
		
		<view v-if="pageList.length>0">
			<div class="box-card" v-for="(item,i) in pageList" :key="i" @tap="goDetail(item)">
				<div class="box-top-title">
					<span class="title-clock">{{$util.cutDate(item.ENDACCOUNT_DATE,'YYYY年MM月DD日')}}</span>
					<span class="title-fn">{{item.SERVERPART_NAME}}</span>
				</div>
				
				<div class="box-bottom-tab">
					<div class="tab-unit">
						<i class="tab-icon1"></i>
						<span>待办理：</span>
						<span class="tab-unit-num">{{item.DEAL_COUNT}}</span>
					</div>
				
				</div>
			</div>
			
			
		</view>
		<view v-else-if="pageData.isLoading===false" >
			<noFound :nodata="pageList.length>0 ? false : true"/>
		</view>
		<view class="load-more" v-if="pageList.length>0">
			<text>{{!pageData.isEnd ? '正在加载,请稍后...':'——— 我是有底线的 ———'}}</text>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
				let nowTime = this.$util.cutDate(new Date(), 'YYYY/MM/DD')
			return {
				
				pageData: {
					pageIndex:1,
					pageSize:10,
					sDate: nowTime,
					isEnd: false,
					isLoading: true
				},
				pageList:[]
			}
		},
		methods: {
			getList () {
				let _this = this
				
				_this.$request.get({
					action_type:'GetEndaccountTotalList',
					// action_record: this.searchTime,
					pageIndex: this.pageData.pageIndex,
					pageSize: this.pageData.pageSize,
					statisticalDate:this.pageData.sDate, //  '2019/12/27'
					
				}).then(res=>{
					
					uni.hideLoading()
					if(!res.ResultCode ||res.ResultCode!='100'){
						
					} else {
					
						let list = res.Data.List
						
						_this.pageList = _this.pageData.pageIndex===1 ? list  :_this.pageList.concat(list)
					
						if (list.length < _this.pageData.pageSize) {
						
							_this.pageData.isEnd = true
						} 
					}
					_this.pageData.isLoading = false
				})
			},
			goDetail(item){
				uni.navigateTo({
					url: '/pages/dataSummary/dayDetail?seviceId='+item.SERVERPART_ID+'&date='+item.ENDACCOUNT_DATE
				})
			}
		},
		onPullDownRefresh() {
			uni.showLoading({
				title:'正在加载'
			})
			this.pageData.pageIndex = 1
			this.pageData.isEnd = false
			this.getList()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onLoad() {
			uni.showLoading({
				title:'正在加载'
			})
			this.getList()
		},
		onReachBottom(){
			if(!this.pageData.isEnd) {
				uni.showLoading({
					title:'正在加载'
				})
				this.pageData.pageIndex += 1
				this.getList()
			}
		},
		onShow() {
			let _this = this
			this.$eventHub.$once('datasummary', function (data){
				if(data) {
					uni.showLoading({
						title:'正在加载'
					})
					_this.pageData.pageIndex = 1
					_this.pageData.isEnd = false
					_this.getList()
					
				}
			});
		},
		onUnload() {
			this.$util.addUserBehavior()
		},
		onHide() {
			this.$eventHub.$off('datasummary', function (data) {
			 	// console.log('scanResult - '+data);
			});
		}
	}
</script>

<style scoped>
/* 内容卡片 */
	.box-card {
		
		margin: 30upx 24upx;
		background-color: #fff;
		box-shadow: 0px 0upx 8upx 0.4upx #e2e2e2;
		border-radius: 6upx;
		overflow: hidden;
	}
	.box-top-title {
		padding: 16upx 24upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fafafa;
	}
	.title-clock {
		font-size: 28upx;
		color: #454545;
		display: inline-block;
	}
	.title-fn {
		font-size: 26upx;
		color: #636363;
		display: flex;
		align-items: center;
	} 
	.title-fn:before {
		content: '';
		display: block;
		margin-right: 20upx;
		width: 28upx;
		height: 20upx;
		background-repeat: no-repeat;
		background-size: contain;
	
	}
	
	.title-clock:before {
		content: '';
		display: inline-block;
		margin-right: 12upx;
		width: 24upx;
		height: 24upx;
		background: url(../../static/images/effective/jt.png) no-repeat center;
		background-size: contain;
	}
	.box-center-title {
		color: #6A6A6A;
		padding-left: 36upx;
		font-size: 26upx;
	}
	.box-bottom-tab{
		display: flex;
		align-items: center;
	
		padding: 24upx 24upx;
	}
	.tab-unit {
		display: flex;
		align-items: center;
		/* padding-left: 36upx; */
		color: #636363;
		font-size: 26upx;
		flex: 1;
	}
	.tab-unit:after{
		content: '';
		display: block;
		/* margin-left: 16upx; */
		flex: 1;
		height: 24upx;
		background: url(../../static/images/effective/sj.png) no-repeat center right;
		background-size: contain;
	}
	.tab-icon1:before {
		content: '';
		display: block;
		margin-right: 20upx;
		width: 32upx;
		height: 32upx;
		background-repeat: no-repeat;
		background-size: contain;
	
	}
	.tab-icon1:before {
		background-image: url(../../static/images/mbwa/rw.png);
	}
	.title-fn:before {
		background-image: url(../../static/images/effective/rjjy_fwq.png);
	}
	.tab-unit-num {
		font-size: 30upx;
		color: #454545;
		font-weight: bold;
	}
</style>