wechat_yxcl/pages/cashAudit/list.vue

<template>
	<view class="content">
		<div class="uni-flex ai-center screen-box">
			<text>账期：</text>
			<picker mode="date" @change="bindDateChange($event,0)" :value="searchTime[0]" :end="pageData.endDate" start="2019-12-01" class="screen-unit">
				<text>{{searchTime[0]}}</text>
				<image src="/static/images/tab_down.png" mode="aspectFit"></image>
			</picker>
			<text class="mr20">至</text>
			<picker mode="date" @change="bindDateChange($event,1)" :value="searchTime[1]" :end="pageData.endDate" start="2019-12-01" class="screen-unit">
				<text>{{searchTime[1]}}</text>
				<image src="/static/images/tab_down.png" mode="aspectFit"></image>
			</picker>
			<button type="primary" size="mini" class="search-button" @tap="searchList">查询</button>
		</div>	
		<view v-if="pageList.length>0">
			<list-unit v-for="(item,index) in pageList" :key="index" :item="item" :i="index" @goDetail="goDetail"></list-unit>
			
		</view>
		<view v-else-if="pageData.isLoading===false" >
			<noFound :nodata="pageList.length>0 ? false : true" :text="searchTime[0]+'至'+searchTime[1]+'无数据，'">
				<text name="other">
					请选择其它日期进行查询。
				</text>
			</noFound>
		</view>
		<view class="load-more" v-if="pageList.length>0">
			<text>{{!pageData.isEnd ? '正在加载,请稍后...':'——— 我是有底线的 ———'}}</text>
		</view>
		
	</view>
</template>

<script>
	import {mapGetters,mapMutations} from 'vuex'
	import ListUnit from './components/listUnit.vue'
	export default {	
		data() {
			let stime = this.$util.cutDate(new Date(),'YYYY-MM-DD',-6)
			let etime = this.$util.cutDate(new Date(),'YYYY-MM-DD')
			return {
				searchTime:[stime,etime],
				pageData: {
					pageIndex:1,
					pageSize:10,
					isEnd: false,
					isLoading: true,
					endDate: etime
				},
				pageList:[]
			}
		},
		components:{
			ListUnit
		},
		computed:{
			...mapGetters({reloading:'shouldReLoadingList'})
		},
		methods: {
			...mapMutations(['shouldReLoadingList']),
			bindDateChange(e,index){
				
				this.searchTime[index] = e.detail.value
				this.$forceUpdate()
			},
			searchList(){
				uni.showLoading({
					title:'正在加载'
				})
				// this.pageData.isLoading =true
				this.pageData.isEnd = false
				this.pageData.pageIndex = 1
				this.getList()
			},
			getList() {
				let _this = this
				
				_this.$request.$webGet('Audit/GetAuditList',{
					pageIndex: this.pageData.pageIndex,
					pageSize: this.pageData.pageSize,
					startTime: this.searchTime[0],
					endTime: this.searchTime[1],
				}).then(res => {
					
					if(!res.Result_Code ||res.Result_Code!='100'){
						_this.pageData.isLoading =false
						_this.pageList = []
					}else{
						let list = res.Result_Data.List
						if (list.length > 0) {
							if( this.pageData.pageIndex==1 ) {
								_this.pageList = list
								
							}else{
								_this.pageList = [..._this.pageList,...list]
							}
						}
						if (list.length < _this.pageData.pageSize) { // 返回条数小于每页条数
							_this.pageData.isEnd = true
						}
						_this.$forceUpdate()
					}
					uni.hideLoading()
					setTimeout(function(){
						_this.pageData.isLoading = false
					},500)
				})
			},
			loadMore(){
				if(!this.pageData.isEnd) {
					this.pageData.pageIndex += 1
					this.getList()
				}
			},
			goDetail(item){
				this.$util.toNextRoute('navigateTo', '/pages/cashAudit/detail?id='+item.CheckAccount_ID)
			
			}
		},
		onPullDownRefresh() {
			uni.showLoading({
				title:'正在加载'
			})
			this.pageData.pageIndex = 1
			this.pageData.isEnd = false
			this.getList()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onReachBottom(){
			this.loadMore()
		},
		onShow() {
			let _this = this
			
			if(this.reloading) {
				uni.showLoading({
					title:'正在加载'
				})
				this.pageData.isLoading = true
				this.pageData.pageIndex = 1
				this.pageData.isEnd = false
				
				this.getList()
				this.shouldReLoadingList(false)
			}
		},
		onLoad() {
			uni.showLoading({
				title:'正在加载'
			})
			this.pageData.isLoading = true
			this.getList()
		},
		onUnload() {
			this.$util.addUserBehavior()
		},
		onHide() {
			
		}
	}
</script>

<style scoped>
	/* .content {
		padding-top: 6upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		
	} */
	.screen-box {
		background-color: #fff;
		padding: 0 20rpx;
		position: sticky;
		top: 0;
		z-index: 1;
	}
	.screen-box .screen-unit {
		display: flex;
		align-items: center;
		/*width: 200rpx;*/
		padding: 0 14rpx;
		line-height: 3;
	}
	.screen-box text {
		line-height: 3;
	}
	.screen-box image{
		width: 12rpx;
		height: 8rpx;
		margin: 0 16rpx;
		vertical-align: middle;
	}
	.search-button {
		font-size: 24rpx;
		padding: 0 20rpx;
		color: #417CF7;
		background-color: #F8FCFF;
		border: 3rpx solid #6695F8;
		line-height: 1.8;
		border-radius: 6rpx;
	}
	.mr20 {
		/*margin: 0 30rpx 0 16rpx;*/
	}
</style>