CBB3/pages/user/detail/anticipate_gift_log.vue

<style lang="scss">
	.app{padding: 10px;}
	.list{border-radius:  0 0 15px 15px;background: #fff;padding: 0 10px; }
	.list .item{border-bottom: 1px solid #F1F1F1; padding:10px 0;}
	.list .item:last-child{border-bottom: 0;}
	.list .item .avatar image{width: 40px;height: 40px;}
	.list .item .info{width: calc(100% - 140px); margin-left: 10px;}
	.list .item .info .text{font-size: 12px;}
	.list .item .price{text-align: right;}
	.list .item .price .pricex{background: #F7F7F7;border-radius: 12px;font-size: 14px;padding: 2px 12px;text-align: center;color: #696ecc;}
	.list .item .price .time{color: #999;font-size: 12px; margin-top: 4px;}
	.not-img{}
	.not-img image{width: 80%;}		
		
</style>
<template>
	<view class="app">
		
		<view class="not-img fx-h fx-bc fx-ac" v-if="data.length == 0 && page.isLoad == false && page.isFirst">
			<image src="/static/img/no-empty.png" mode="widthFix"></image>
		</view>
		<view class="list" v-else>
			<view class="item fx-r" v-for="item in data">
				<view class="info">
					<view class="title">{{item.title}}</view>
					<view class="text">{{item.content}}</view>
				</view>
				<view class="fx-g1"></view>
				<view class="price fx-h fx-be fx-ae">
					<view class="pricex" v-if="item.type == 1">+{{item.v}}</view>
					<view class="pricex" v-if="item.type == 2">-{{item.v}}</view>
					<view class="time">{{item.time}}</view>
				</view>
			</view>
		</view>
		
		<view class="loading fx-r fx-ac fx-bc" v-if="page.isFrite && !page.isFoot">
			<image src="/static/img/xloading-white.png"></image>
			<text>正在载入更多...</text>
		</view>
		<view class="loading complete" :hidden="!page.isFoot">已加载全部</view>
	</view>
	
	
	
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	var page = 0;//页码
	var isLoad = false;//加载
	var isFoot = false;//是否到底
	export default {
		computed: mapState(['user']),
		data() {
			return {
				barHeight:20,
				topViewHeight:90,
				navActive:0,
				page:{
					page:1,
					isLoad:false,
					isFoot:false,
					isFirst : false
				},
				navList:[
					{name:"全部","type":"all"},
					{name:"收入","type":"income"},
					{name:"支出","type":"disburse"}
				],
				data:[]
			}
		},
		onShow(options) {
			this.checkUserLogin({page:this,isLogion:false,fn:this.initView});
		},
		onLoad(option) {
			if(option.type != null) {
				for(var i in this.navList) {
					if(this.navList[i].type == option.type){
						this.navActive = i;
					}
				}
			}	
				
			uni.getSystemInfo({
				success:(res) => {
					this.barHeight = res.statusBarHeight;
				}
			});
			
		},
	
	onReachBottom() {
		if(this.page.isFoot || this.page.isLoad) {
			return;
		}
		this.page.page ++;
		this.getData();		
	},
		methods: {
			...mapMutations(['checkUserLogin']),
			/**
			 * initView数据
			 */
			initView:function(){
				this.getData(true);
			},
			tapNav:function(index){
				this.navActive = index;
				this.getData(true);
			},
			
			loadMoreData:function() {
				if(this.page.isFoot || this.page.isLoad) {
					return;
				}
				this.page.page ++;
				this.getData();			
			},
			/**
			 * 获取数据
			 */
			getData:function(isPull = false){
				if(this.page.isLoad) return;
				this.page.isLoad = true;
				if(isPull) {
					this.page.page = 1;
					this.page.isLoad = false;
					this.page.isFoot = false;
				}
				uni.showLoading({ title: '获取数据中..' });
				var post = {};
				post.page = this.page.page;
				post.code = "give_jdd";
				this
					.request
					.post("userAnticipate",post)
					.then(res => {
						uni.hideLoading();
						this.page.isFirst = true;
						this.page.isLoad = false;
						if(isPull) {
							this.data = res.data.list;
						} else {
							this.data = this.data.concat(res.data.list);
						}
						//是否到底
						if(res.data.list.length != res.data.pageSize) {
							this.page.isFoot = true;
						} 
					})
					.catch((res)=>{
						console.log(res);
						uni.hideLoading();
						uni.showModal({title: '系统提示',content: '加载失败，返回在尝试',showCancel: false});
					});
			}
			
		},
	}
	
</script>