caimei-applets-caimei/pages/user/account/account.vue

<template>
	<view class="container account clearfix">
		<view class="account-header">
			<view class="h-account">
				<image src="https://img.caimei365.com/group1/M00/03/95/Cmis216Sk_SACLslAAGcgkqy28c861.png" mode=""></image>
				<view class="m-account">
					<view class="m-m title">
						<text class="m-p">可用余额</text>
						<text class="iconfont icon-shuoming" @click="showAccounExp"></text>
					</view>
					<view class="m-m money">
						<text class="m-t s">￥</text>
						<text class="m-t b">{{showIndexOfMoney}}</text>
						<text class="m-t s">{{smallMoney}}</text>
					</view>
				</view>
			</view>
			<view class="h-calendar">
				<!-- 插入模式 切换年月-->
				<uni-calendar :selected="infoData.selected"  @monthSwitch="monthSwitch" />
			</view>
			<view class="h-typeTab clearfix">
				<view
					v-for="(item, index) in navList" :key="index" 
					class="nav-item" 
					:class="{current: tabCurrentIndex === index}"
					@click="tabClick(index)"
				>
					{{item.text}}
				</view>
			</view>
		</view>
		<!--  @scrolltolower="toLower" -->
		<scroll-view class="h-swiper-content"  scroll-y >	
			<!-- 空白页 -->
			<view v-if="isEmpty" class="empty-account">
				<image class="empty-account-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6ADg5RAABQ9EmRCGk830.png" mode="aspectFit"></image>
				<text class="error-text">{{errorText}}</text>
			</view>
			<!-- 余额明细列表 -->
			<view v-else class="list-account">
				<view v-for="(item,index) in accountList" :key="index" class="list-item">
					<view class="list-t">
						<view class="t-t">{{item.addDate}}</view>
						<view class="t-t bold">{{item.type =='1'? '收入' : '支出'}}</view>
					</view>
					<view class="list-b">
						<view class="t-t bold">{{cheakType(item.balanceType)}}</view>
						<view class="t-t">
							<text class="txt">{{item.type =='1'? '+' : '-'}}</text>
							<text class="txt">￥{{item.amount}}</text>
						</view>
					</view>
				</view>
				<!--加载loadding-->
				<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
				<tui-nomore :visible="!pullUpOn" bgcolor="#F7F7F7" :text='nomoreText'></tui-nomore>
				<!--加载loadding-->
			</view>
		</scroll-view>
		<view class="showAccounExp" :class="[isShowAccounExp == true ? 'show':'hide']" @tap="hideAccounExp">
			<image src="https://img.caimei365.com/group1/M00/03/95/Cmis216Sk_SAZeZlAA2oDvspRRU204.png" mode=""></image>
			<text class="iconfont icon-close" @click="hideAccounExp"></text>
		</view>
	</view>
</template>
<script>
	import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
	import tuiNomore from "@/components/tui-components/nomore/nomore"
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	import { accountInfo } from "@/api/use.js"
	var date = new Date();
	export default{
		components: {
			uniCalendar,
			tuiLoadmore,
			tuiNomore
		},
		data() {
			return{
				year: date.getFullYear(),					//年
				month: date.getMonth()+1,					//月
				userID: '',		 							//用户ID
				pageNum:1,    								//页数
				pageSize:10,   								//加载条数
				balanceType: '', 							//查询余额类型
				showIndexOfMoney:'',
				smallMoney:'00',
				ableUserMoney:58656.65,		//可用余额
				balanceTypeText:'',			//根据类型显示文字
				tabCurrentIndex: 0,			//标签选择索引
				infoData: {selected: []}, 		//日期选择
				accountList: [],			//余额列表
				isShowAccounExp:false,		//控制明细说明文字显示
				isRefreshing:false,
				isNomore:false,
				isEmpty:false,
				loadding: false,
				pullUpOn: true,
				hasNextPage: false,
				pullFlag: true,
				nomoreText: '上拉显示更多',
				errorText:'本月没有任何余额收支记录',
				navList: [	
					{state: 0,text: '全部'},
					{state: 1,text: '收入'},
					{state: 2,text: '支出'},
				],
				isCheckObject:{
					0:['','本月没有任何余额收支记录'],
					1:[1, '本月没有余额收入记录！'],
					2:[2, '本月没有余额支出记录！'],
				},
			}
		},
		onLoad() {
			this.getAccountInitData(this.tabCurrentIndex,this.year,this.month)
		},
		methods: {
			getAccountInitData(index,year,month){//获取余额明细数据列表
				Object.keys(this.isCheckObject).forEach(key => {
					 if (+key === +index) {
						this.balanceType = this.isCheckObject[key][0]
						this.errorText = this.isCheckObject[key][1]
					 }
				})
				this.$api.getStorage().then((resolve) =>{
					 this.userID =resolve.userID
					 /**
					  * @余额明细初始化加载  仅加载第一页码
					  * @param：type(查询余额类型:0全部,1收入,2支出)
					  * @param：year(查询年份)
					  * @param：month(查询月份)
					  * @param：index(页码数)
					  * @param：pageSize(每页条数)
					  * @param：userId(用户ID)
					  */ 
					let params = {year:year,month:month,userId:this.userID,pageNum:1,pageSize:this.pageSize, type:this.balanceType,}
					accountInfo(params).then(response =>{
						let infoData = response.data
						this.initAbleUserMoney(infoData.ableUserMoney)
						let resultsData = infoData.pageDate.results
						this.hasNextPage =  infoData.pageDate.hasNextPage;
						if(resultsData && resultsData.length > 0){
							this.isEmpty = false;
							this.accountList = [...resultsData];
						}else{
							this.isEmpty = true
						}
						if(this.hasNextPage){
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						}else{
							if(this.accountList.length < 2){
								this.pullUpOn = true
							}else{
								this.pullUpOn = false
								this.nomoreText = '已至底部'
							}
						}
					}).catch(response =>{
						this.$util.msg(response.msg,2000)
					})
				})	
			},	
			getOnReachBottomData(index,year,month){//上拉加载
				this.pageNum+=1
				let param = {year:year,month:month,userId:this.userID,pageNum:this.pageNum,pageSize:this.pageSize,type:this.balanceType}
				accountInfo(params).then(response =>{
					let infoData = response.data
					this.initAbleUserMoney(infoData.ableUserMoney)
					let resultsData = infoData.pageDate.results
					this.hasNextPage =  infoData.pageDate.hasNextPage;
					this.accountList = this.accountList.concat(resultsData)
					this.pullFlag = false;// 防上拉暴滑
					setTimeout(()=>{this.pullFlag = true;},500)
					if(this.hasNextPage){
						this.pullUpOn = false
						this.nomoreText = '上拉显示更多'
					}else{
						this.loadding = false
						this.pullUpOn = false
						this.nomoreText = '已至底部'
					}
				}).catch(response =>{
					this.$util.msg(response.msg,2000)
				})
			},
			initAbleUserMoney(money){//拆分金额并转千分位格式显示
				if(money == 0){
					this.showIndexOfMoney ='0';
					this.smallMoney=".00"
				}else{
					this.ableUserMoney = this.$api.FormatMoney(money) ;
					let i =  this.ableUserMoney.toString().lastIndexOf('.');
					if(i==-1){
						this.showIndexOfMoney=this.$api.FormatMoney( this.ableUserMoney)
						this.smallMoney=".00"
					}else{
						this.smallMoney = this.ableUserMoney.toString().substring(i);
						this.showIndexOfMoney= this.$api.FormatMoney(this.ableUserMoney.toString().substring(0,i))
					}
				}
			},
			tabClick(index){//tab点击
				this.tabCurrentIndex = index;
				this.pageNum = 1
				this.accountList = []
				this.pullUpOn = true //隐藏
				this.getAccountInitData(this.tabCurrentIndex,this.year,this.month);
			},			
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			monthSwitch(e) {
				this.year = e.year;
				this.month = e.month;
				this.getAccountInitData(this.tabCurrentIndex,this.year,this.month);
			},
			cheakType(type){
				let text;
				switch(type){
					case '1':
						text ='余额抵扣'
						break;
					case '2':
						text ='多收退款到余额'
						break;
					case '3':
						text ='申请退款'
						break;
					case '4':
						text ='余额充值'
						break;
					case '5':
						text ='余额提现'
						break;
				}
				return text;
			},
			showAccounExp(){
				this.isShowAccounExp = true
			},
			hideAccounExp(){
				this.isShowAccounExp = false
			}
		},
		onReachBottom() {
			if(this.hasNextPage){
				this.loadding = true
				this.pullUpOn = true
				this.getOnReachBottomData(this.tabCurrentIndex,this.year,this.month)
			}	
		},
		onPullDownRefresh() {//下拉刷新
			this.getAccountInitData(this.tabCurrentIndex,this.year,this.month)
		},
		onShow() {
			// this.accountList = []
		}
	}
</script>

<style lang="scss">
	
page, .container{
	background: #F7F7F7;
	height: 100%;
}
.account{
	width: 100%;
	height: auto;
	position: relative;
}	
.account-header{
	width: 100%;
	height: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 998;
}
.h-account{
	width: 100%;
	height: 264rpx;
	position: relative;
	image{
		width: 750rpx;
		height: 264rpx;
	}
}
.h-calendar{
	width: 100%;
	height: auto;
}
.m-account{
	width: 702rpx;
	height: 216rpx;
	padding: 24rpx;
	position:absolute;
	left: 0;
	top: 0;
	.m-m{
		width: 702rpx;
	}
	.title{
		height: 74rpx;
		display: flex;
		.m-p{
			flex: 1;
			font-size: 40rpx;
			color: #FFFFFF;
			text-align: left;
			line-height: 74rpx;
		}
		.iconfont{
			flex: 1;
			font-size: 52rpx;
			color: #FFFFFF;
			text-align: right;
			line-height: 74rpx;
		}
	}
	.money{
		height: 142rpx;
		.m-t{
			font-size: 84rpx;
			color: #FFFFFF;
			text-align: left;
			line-height: 142rpx;
			&.b{
				font-weight: bold;
			}
			&.s{
				font-size: 40rpx;
			}
		}
	}
}
.h-swiper{
	width: 702rpx;
	height: 40rpx;
	padding: 24rpx;
	display: flex;
	.uni-input{
		flex: 8;
		font-size: $font-size-28;
		color: $text-color;
		text-align: center;
		line-height: 40rpx;
	}
	.iconfont{
		flex: 1;
		text-align: center;
	}
}
.h-typeTab{
	width: 702rpx;
	padding:0 24rpx;
	background: #fff;
	position: relative;
	z-index: 10;
	.nav-item{
		width: 33.3%;
		height: 40rpx;
		line-height:40rpx;
		padding: 26rpx 0 22rpx 0;
		font-size: $font-size-28;
		float: left;
		color: $text-color;
		text-align: center;
		position: relative;
		&.current{
			color: $color-system;
		}
	}	
}
.h-swiper-content{
	width: 100%;
	padding:478rpx 0 0 0;
	height: calc(100% - 478rpx);
	position: relative;
	background: #F7F7F7;
	.icon-jiazai{
		color: #666666;
		font-size: 36rpx;
	}	
	.loading {
		width: 100%;
		font-size: 28rpx;
		color: #999999;
		line-height: 36rpx;
		text-align: center;
		padding: 20rpx 0;
		&-no .line{
			width: 30%;
			margin: 0 auto;
			position: relative;
			&:before{
				content: "";
				width: 80rpx;
				height: 1px;
				background: #999999;
				position: absolute;
				left: -50rpx;
				top: 18rpx;
			}
			&:after{
				content: "";
				width: 80rpx;
				height: 1px;
				background: #999999;
				position: absolute;
				right: -50rpx;
				top: 18rpx;
			}
		}
		
	}

	.list-item{
		width: 702rpx;
		height: 100rpx;
		padding: 20rpx 24rpx;
		border-bottom: 1px solid #EBEBEB;
		background: #FFFFFF;
		&:last-child{
			border-bottom: none;
		}
		.list-t{
			height: 34rpx;
			line-height: 34rpx;
			font-size: $font-size-28;
			color: $text-color;
			display: flex;
			margin-bottom: 28rpx;
			.t-t{
				flex: 1;
				&:nth-child(1){
					text-align: left;
				}
				&:nth-child(2){
					text-align: right;
				}
				&.bold{
					font-weight: bold;
				}
			}

		}
		.list-b{
			height: 34rpx;
			line-height: 34rpx;
			font-size:$font-size-28;;
			margin-top: 24rpx;
			color: $text-color;
			display: flex;
			.t-t{
				flex: 1;
				&:nth-child(1){
					text-align: left;
				}
				&:nth-child(2){
					text-align: right;
				}
				.txt{
					color: #FF2A2A;
				}
				&.bold{
					font-weight: bold;
				}
			}
		}
	}
}
.showAccounExp{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: fixed;
	left: 0;
	top: 100%;
	display: none;
	background: rgba(0,0,0,.5);
	z-index: 999;
	
	image{
		width: 750rpx;
		height: 1052rpx;
	}
	.icon-close{
		position: relative;
		color: #FFFFFF;
		font-size:60rpx ;
		bottom: 60rpx;
		left: 50%;
		margin-left: -32rpx;

	}
}
.showAccounExp.show{
	top: 0;
	display: block;
	animation:rundtop 0.3s;
}
.showAccounExp.hide{
	top: 100%;
	display: none;
	animation:rundbottom 0.3s;
}
@keyframes rundtop{
	0%{top: 100%;display: none;}
	100%{top:0;display: block;}
}
@keyframes rundbottom{
	0%{top: 0;display: block;}
	100%{top:100%;display: none;}
}
/*空列表显示样式*/
.empty-account {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: $bg-color;
	min-height: 800rpx;
	&-image {
		width: 160rpx;
		height: 158rpx;
	}
	.error-text{
		font-size: $font-size-28;
		color: $text-color;
		line-height: 88rpx;
	}
}
.swiper-box{
	min-height: 750rpx;
}
.list-scroll-content{
	height: 100%;
}
.uni-swiper-item{
	height: auto;
}

/* load-more */
.uni-load-more {
	display: flex;
	flex-direction: row;
	height: 80upx;
	align-items: center;
	justify-content: center
}
.uni-load-more__text {
	font-size: 28upx;
	color: #999
}
.uni-load-more__img {
	height: 24px;
	width: 24px;
	margin-right: 10px
}
.uni-load-more__img>view {
	position: absolute
}
.uni-load-more__img>view view {
	width: 6px;
	height: 2px;
	border-top-left-radius: 1px;
	border-bottom-left-radius: 1px;
	background: #999;
	position: absolute;
	opacity: .2;
	transform-origin: 50%;
	animation: load 1.56s ease infinite
}
.uni-load-more__img>view view:nth-child(1) {
	transform: rotate(90deg);
	top: 2px;
	left: 9px
}

.uni-load-more__img>view view:nth-child(2) {
	transform: rotate(180deg);
	top: 11px;
	right: 0
}

.uni-load-more__img>view view:nth-child(3) {
	transform: rotate(270deg);
	bottom: 2px;
	left: 9px
}

.uni-load-more__img>view view:nth-child(4) {
	top: 11px;
	left: 0
}

.load1,
.load2,
.load3 {
	height: 24px;
	width: 24px
}

.load2 {
	transform: rotate(30deg)
}

.load3 {
	transform: rotate(60deg)
}

.load1 view:nth-child(1) {
	animation-delay: 0s
}

.load2 view:nth-child(1) {
	animation-delay: .13s
}

.load3 view:nth-child(1) {
	animation-delay: .26s
}

.load1 view:nth-child(2) {
	animation-delay: .39s
}

.load2 view:nth-child(2) {
	animation-delay: .52s
}

.load3 view:nth-child(2) {
	animation-delay: .65s
}

.load1 view:nth-child(3) {
	animation-delay: .78s
}

.load2 view:nth-child(3) {
	animation-delay: .91s
}

.load3 view:nth-child(3) {
	animation-delay: 1.04s
}

.load1 view:nth-child(4) {
	animation-delay: 1.17s
}

.load2 view:nth-child(4) {
	animation-delay: 1.3s
}

.load3 view:nth-child(4) {
	animation-delay: 1.43s
}

@-webkit-keyframes load {
	0% {
		opacity: 1
	}

	100% {
		opacity: .2
	}
}

</style>