CBB3/pages/user/detail/detail.vue

<template>
	<view>
		<view class="app-bg">
			<image src="/static/img/detail_bg.png"></image>
			<view class="body fx-h fx-bc fx-ac">
				<view class="count">{{ user.good_integral || 0 }}</view>
				<view class="label">我的余额</view>
			</view>
		</view>
		<uni-nav-bar color="#fff" :border="false" statusBar backgroundColor="transparent" left-icon="left" @clickLeft="utils.navigateBack()" fixed title="提货积分"></uni-nav-bar>
		<view class="htop" :style="'height:calc(61vw - ' + statusBarHeight + 'px - 44px);'"></view>
		<view class="app-body">
				<!--列表数据-->
				<view class="nav-list fx-r fx-bc">
					<view class="item fx-h fx-bc" @tap="tapNav(item.code)" :class="form.type == item.code  ? 'active' : ''"  v-for="(item,index) in navList">
						<view class="label">{{ item.name }}</view>
						<image class="icon" v-if="form.type == item.code" src="/static/img/detail_d.png"></image>
					</view>		
	
					<view class="fx-g1"></view>
					
					<view class="time fx-r fx-bc" @tap="isPicker = true">
						<view class="count">{{ form.dateStr || "" }}</view>
						<image class="icon" src="/static/img/detail_next.png"></image>
					</view>	
				</view>	
				<scroll-view scroll-y class="scroll" :style="'height: calc(100vh - 61vw -  100rpx);'" @scrolltolower="loadMoreData">
					<view class="sc-body">
						
						<view class="detail-list" v-if="data.length > 0">
							<view class="top fx-r">
								<view class="label">{{ this.form.dateStr }}</view>
								<view class="fx-g1"></view>
								<view class="label">收入：{{ this.total.inMoney || '0.00' }}  支出：{{ this.total.outMoney || '0.00' }}</view>
							</view>
							
							<view class="item fx-r fx-bc" v-for="(item,index) in data">
								<image class="icon" v-if="item.type == 0" src="/static/img/detail_in.png"></image>
								<image class="icon" v-if="item.type == 1" src="/static/img/detail_in.png"></image>
								<image class="icon" v-if="item.type == 2" src="/static/img/detail_out.png"></image>
								<view class="info">  
									<view class="title">{{ item.title }}</view>
									<view class="tag">{{ item.content }}</view>
									<view class="time">{{ item.title }}</view>
								</view>
								<view class="fx-g1"></view>
								<view class="right fx-h">
									<view class="money" style="color:#e2a622;" v-if="item.type == 1">+{{item.v}}</view>
									<view class="money" v-if="item.type == 2">-{{item.v}}</view>
									<view class="fx-g1"></view>
									<view class="balance">余额：{{ item.money }}</view>
								</view>
								
							</view>
							
							
						</view>
						
						<view v-if="data.length > 0">
							<view class="loading fx-r fx-ac fx-bc" v-if="page.isFrite && !page.isFoot">
								<image src="/static/img/xloading.png"></image>
								<text>正在载入更多...</text>
							</view>
							<view class="loading complete" :hidden="!page.isFoot">已加载全部</view>
						</view>
						
						
						<u-empty
									v-if="data.length == 0 && isFirst"
									mode="data"
									icon="/static/img/no-empty.png"
								></u-empty>		
						
					</view>
				</scroll-view>	
			</view>	
	 <u-datetime-picker :show="isPicker" v-model="datetime" @confirm="tapConfirm" @cancel="isPicker = false" @close="isPicker = false" mode="year-month"></u-datetime-picker>		
		</view>	
	</view>
</template>

<style lang="scss">
	.app-bg{
		position: absolute;
		image{width: 100vw;height: 61vw;}
		.body{
			position: absolute;
			height: 61vw;
			width: 100vw;
			top: 0;
			.count{
				font-weight: 500;
				font-size: 64rpx;
				color: #fff;
			}
			.label{
				margin-top: 4px;
				color: #fff;
			}
		}
	}
	.app-body{
		padding: 0px 20rpx;
	}
	.nav-list{
		height: 100rpx;
		.item{
			margin-right: 50rpx;
			.label{
				font-weight: bold;
				font-size: 30rpx;
				color: #5C5C5C;
			}
			&.active{
				.label{
					font-weight: bold;
					font-size: 36rpx;
					color: #2C2C2C;
				}
				.icon{
					width: 36rpx;
					height: 14rpx;
					margin-top: 4rpx;
				}
			}
			
		}
		
		.time{
			
			.count{
				font-weight: bold;
				font-size: 28rpx;
				color: #2C2C2C;
			}
			
			.label{
				font-weight: bold;
				font-size: 30rpx;
				color: #2C2C2C;
				margin-left: 6rpx;
			}
		
			.icon{
				margin-left: 10rpx;
				width: 20rpx;
				height: 12rpx;
			}
		}
	}
	
	.detail-list{
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		.top{
			margin-bottom: 40rpx;
			.label{font-weight: 500;font-size: 25rpx;color: #979797;}
		}
		.item{
			margin-bottom: 40rpx;
			.icon{width: 84rpx;height: 84rpx;}
			.info{
				width: calc(100% - 280rpx);
				margin-left: 16rpx;
				.title{font-weight: bold;font-size: 28rpx;color: #333333;}
				.tag{font-size: 24rpx;color: #979797; margin-top: 6rpx;}
				.time{font-size: 24rpx;color: #979797;}
			}
			.right{
				text-align: right;
				width: 160rpx;
				.money{
					font-weight: bold;
					font-size: 34rpx;
					color: #FF4C4C;
				}
				.balance{
					font-weight: 500;
					font-size: 24rpx;
					color: #979797;
				}
			}
			
		}
	}


</style>

<script>
	import {mapState,mapMutations } from 'vuex';
	export default {
		computed: mapState(['user']),
		data() {
		    return {
				statusBarHeight : 20,
				isFirst:false,
				isPicker : false,
				datetime : "",
				total : {},
				data:[],
				page:{
					isFirst:false,
					isLoad:false,
					isFoot:false,
					page:1
				},
				form:{
					dateStr : "",
					date : "",
					type : "all"
				},
				navList : [
					{"name" : "全部","code" : "all"},
					{"name" : "收入","code" : "income"},
					{"name" : "支出","code" : "disburse"}
				]
		    }
		}, 
		onLoad(options) {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.form.dateStr = this.utils.date('Y年m月');
			this.form.date = this.utils.date('Y-m');
			this.datetime = this.utils.strtotime() * 1000;
			this.initView();
		},
			 
		methods: {
			...mapMutations(['checkUserLogin']),
			/**
			 * 加载基础配置
			 */
			initView:function(){
				this.totalData();
				this.getData(true);
			},	
			/**
			 * 获取数据
			 */
			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;
			
				this
					.request
					.post("userDetail",{
						...this.form,
						page : this.page.page
					})
					.then(res => {
						uni.hideLoading();
						this.page.isFirst = true;
						this.page.isLoad = false;
						this.isFirst = true;
						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});
					});
			},
			
			totalData:function(){
				this
					.request
					.post("userDetailTotal",{
						...this.form
					})
					.then(res => {
						if(res.code == 200) {
							this.total = res.data;
						}
					})
			},
			
			
			
			loadMoreData:function() {
				if(this.page.isFoot || this.page.isLoad) {
					return;
				}
				this.page.page ++;
				this.getData();			
			},
			
			tapNav:function(ev) {
				this.form.type = ev;
				this.getData(true);
				
			},
			
			tapConfirm:function(ev) {
				this.form.dateStr = this.utils.date('Y年m月',ev.value / 1000);
				this.form.date = this.utils.date('Y-m',ev.value / 1000);
				this.isPicker = false;
				this.totalData();
				this.getData(true);
			}
	},
}
</script>	
		
<style>
</style>