dangfei-weapp/pages/payList/payList.vue

<template>
	<view class="payList">
		<view class="timeSeletParent" v-if="list.length>0">
			<picker 
				mode="date"
				fields="month"
				:value="date"
				:start="startDate"
				:end="endDate"
				@change="bindDateChange"
				>
				<view class="timeSeletBox">{{date}}</view>
			</picker>
			<view
				v-if="isToggle"
				class="seeAll"
				@click="seeAll"
			>
				查看全部
			</view>
		</view>
		
		<!-- top="xxx"下拉布局往下偏移,防止被悬浮菜单遮住 -->
		<mescroll-uni 
			top="100"
			@down="downCallback"
			:up="upOption"
			@up="upCallback"
			@init="mescrollInit"
		>
			<!-- 数据列表 -->
			<view class="payItem" v-for="item in list" :key="item.id" v-if="list.length>0">
				<view class="payInfoBox">
					<image class="fixedIcon" src="/static/pay_icon.png"></image>
					<view class="payMain">
						<view>
							<text class="payTitle">缴纳月份: {{item.month}}\n</text>
							<text class="payTime">{{item.pays_at}}</text>
						</view>
						<view>
							<text class="payPrice">{{item.fee}}\n</text>
							<text class="payStatus">交易成功</text>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
	
	import { payList } from "../../api/index.js"
	
	export default{
		components: {
			MescrollUni
		},
		data(){
			const currentDate = this.getDate({
				format: true
			})
			return {
				mescroll: null, //mescroll实例对象
				upOption:{
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量
					},
					noMoreSize: 10,
					empty:{
						tip: '~ 搜索无数据 ~', // 提示
						btnText: '去看看'
					}
				},
				list:[],
				date:currentDate,
				isToggle:false,
				hideHeader:false,
				loading:true
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods:{
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 mescroll.num=1, 再触发upCallback方法 )
				mescroll.resetUpScroll()
			},
			/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
			upCallback(mescroll) {
				//联网加载数据
				this.getListDataFromNet(mescroll.num, mescroll.size, (curPageData)=>{
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					mescroll.endSuccess(curPageData.length);
					//设置列表数据
					if(mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list=this.list.concat(curPageData); //追加新数据
				}, () => {
					//联网失败的回调,隐藏下拉刷新的状态
					mescroll.endErr();
				})
			},
			getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
				const month=this.isToggle ? this.date : ''
				payList({
					page_index:pageNum,
					page_size:pageSize,
					month
				}).then(res=>{
					successCallback && successCallback(res.data);
				}).catch(e=>{
					errorCallback && errorCallback();
				})
			},
			seeAll(){
				this.isToggle=false
				this.date=this.getDate({
					format: true
				})
				this.getListDataFromNet(1,10,(data)=>{
					this.mescroll.resetUpScroll()
					this.mescroll.endSuccess(data.length);
					this.list=data
				},()=>{
					
				})
			},
			bindDateChange(e) {
				this.isToggle=true
				this.date = e.target.value
				this.getListDataFromNet(1,10,(data)=>{
					this.mescroll.endSuccess(data.length);
					this.list=data
				},()=>{
					
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
	
				if (type === 'start') {
					year = year - 1;
				} else if (type === 'end') {
					year = year+1;
				}
				month = month > 9 ? month : '0' + month;;
				return `${year}-${month}`;
			}
		}
	}
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100%;
		background: $uni-bg-color-normal;
	}
	.timeSeletParent{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: $uni-bg-color-normal;
		padding: 0 30rpx;
		
		.seeAll{
			font-size: 24rpx;
			color: #2E8BFC;
		}
		
	}
	.timeSeletBox{
		width: 150rpx;
		padding: 0 35rpx;
		height: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #323332;
		border-radius: 28rpx;
		background: $uni-bg-color;
	}
	.timeSeletBox::after{
		content: "";
		display: block;
		width: 28rpx;
		height: 16rpx;
		background: url(../../static/arrow_all_down.png);
		background-size: 100% 100%;
	}
	.payInfoBox{
		width: calc(100% - 97rpx);
		height: 156rpx;
		background: $uni-bg-color;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left:67rpx;
		padding-right: 30rpx;
	}
	.payItem{
		border-bottom: 1px solid #e1e1e1;
		
		&:nth-last-of-type(2){
			border-bottom: none;
		}
	}
	.fixedIcon{
		display: block;
		width: 48rpx;
		height: 48rpx;
	}
	.payMain{
		width: calc(100% - 101rpx);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.payTitle{
		font-size: 28rpx;
		color: #323332;
	}
	.payTime,.payStatus{
		font-size: 24rpx;
		color: #999999;
	}
	.payPrice{
		font-size: 32rpx;
		color: #323332;
	}
	.noList{
		text-align: center;
		padding: 10px 0;
		font-size: 28rpx;
	}
	.loading{
		font-size: 24rpx;
		text-align: center;
		padding: 10px 0;
	}
	.scrollView{
		position: absolute;
		top: 100rpx;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
	}
	.hideHeader{
		font-size: 24rpx;
		padding: 100rpx;
		text-align: center;
	}
</style>