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

<template>
	<view class="container account clearfix">
		<au-custom :navbar-data='nvabarData' @navigateBack="hanldNavigateBack"></au-custom>
		<view class="account-header">
			<view class="h-account" :style="{paddingTop:CustomBar+'px',backgroundImage: 'url('+account_bg+')'}">
				<view class="m-account">
					<view class="m-m money">
						<text class="m-t b">{{ userBeans }}</text>
					</view>
					<view class="m-m title">
						<text class="m-p">可用数量</text>
					</view>
					<text class="iconfont icon-tishi" @click="showAccounExp"></text>
				</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 class="line"></view>
				</view>
			</view>
		</view>
		<!--  @scrolltolower="toLower" -->
		<scroll-view class="h-swiper-content"  scroll-y :style="{paddingTop:CustomBar+234+'px'}">	
			<!-- 空白页 -->
			<view v-if="isEmpty" class="empty-account">
				<image class="empty-account-image" :src="StaticUrl+'icon/icon-empty-account.png'" mode="aspectFit"></image>
				<text class="error-text">{{errorText}}</text>
			</view>
			<!-- 余额明细列表 -->
			<view v-else class="list-account">
				<view v-for="(item,index) in beansList" :key="index" class="list-item">
					<view class="list-t">
						<view class="t-t">{{ item.beansType | BeansStatusFilter }}</view>
						<view class="t-t bold" :style="{color:item.type == '1' ? '#ff2a2a' : '#15C47A'}">
							<text class="txt">{{item.type == 1 ? '+' : '-'}}</text>
							<text class="txt">￥{{item.num}}</text>
						</view>
					</view>
					<view class="list-b">
						<view class="t-t">{{item.addTime}}</view>
						<view class="t-t">{{item.type =='1'? '收入' : '支出'}}</view>
					</view>
				</view>
				<!--加载loadding-->
				<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
				<tui-nomore :visible="!pullUpOn" bgcolor="#FFFFFF" :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'
	var date = new Date();
	export default{
		components: {
			uniCalendar,
			tuiLoadmore,
			tuiNomore
		},
		data() {
			return{
				StaticUrl:this.$Static,
				nvabarData: {		//顶部自定义导航
					showCapsule:1, // 是否显示左上角图标  1表示显示  0表示不显示,
					showSearch: 0,
					title: '采美豆明细',  // 导航栏 中间的标题
					haveBack:true,
					textColor:'#ffffff',
					textLeft:this.$store.state.isIphone,
				},
				account_bg:'https://img.caimei365.com/group1/M00/03/D0/Cmis21-PpUqAbubBAADf1kTyhjs098.png',
				isIphoneX:this.$store.state.isIphoneX,
				CustomBar:this.CustomBar,// 顶部导航栏高度
				listQuery:{
					year: date.getFullYear(),					//年
					month: date.getMonth()+1,					//月
					userId: '',		 							//用户ID
					pageNum:1,    								//页数
					pageSize:10,   								//加载条数
					type: 0, 							//查询余额类型
				},
				userBeans:0,
				tabCurrentIndex: 0,			//标签选择索引
				infoData: {selected: []}, 		//日期选择
				beansList: [],			//余额列表
				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.$api.getStorage().then((resolve) =>{
				 this.listQuery.userId =resolve.userId ? resolve.userId : 0
				 this.GetAccountInitData()
			})
		},
		filters: {
			BeansStatusFilter: function(state){
				let stateText = ''
				let	stateTextObject={
						1:'注册机构',
						2:'升级会员机构',
						3:'普通机构完善资料',
						4:'会员机构完善资料',
						5:'下单',
						6:'线上支付订单',
						7:'确认收货',
						8:'系统发放',
						9:'抵用退回',
						10:'抵用运费',
						11:'退款回收'
					};
				Object.keys(stateTextObject).forEach(function(key){
					if(key == state){
						stateText = stateTextObject[key]
					}
				});
				return stateText;
},
		},
		methods: {
			GetAccountInitData(index){//获取余额明细数据列表
				Object.keys(this.isCheckObject).forEach(key => {
					 if (+key === +index) {
						this.listQuery.type = this.isCheckObject[key][0]
						this.errorText = this.isCheckObject[key][1]
					 }
				})
				this.UserService.GetUserClubBeansList(this.listQuery).then(response =>{
					let data = response.data
					let list = data.pageInfo.list
					this.userBeans = data.userBeans
					this.hasNextPage =  data.pageInfo.hasNextPage;
					if(list && list.length > 0){
						this.isEmpty = false;
						this.beansList = [...list];
					}else{
						this.isEmpty = true
					}
					if(this.hasNextPage){
						this.pullUpOn = false
						this.nomoreText = '上拉显示更多'
					}else{
						if(this.beansList.length < 10){
							this.pullUpOn = true
						}else{
							this.pullUpOn = false
							this.nomoreText = '已至底部'
						}
					}
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},	
			GetOnReachBottomData(index){//上拉加载
				this.listQuery.pageNum += 1
				this.UserService.GetUserClubBeansList(this.listQuery).then(response =>{
					let data = response.data
					let list = data.pageInfo.list
					this.userBeans = data.userBeans
					this.hasNextPage =  data.pageInfo.hasNextPage;
					this.beansList = this.beansList.concat(list)
					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(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			tabClick(index){//tab点击
				this.tabCurrentIndex = index;
				this.listQuery.type = index;
				this.pageNum = 1
				this.beansList = []
				this.pullUpOn = true //隐藏
				this.GetAccountInitData();
			},			
			monthSwitch(e) {
				this.listQuery.year = e.year;
				this.listQuery.month = e.month;
				this.GetAccountInitData();
			},
			cheakType(type){
				let typeTextHtml,
					typeObject={
						1:'余额抵扣',
						2:'多收退款到余额',
						3:'申请退款',
						4:'余额充值',
						5:'余额提现',
						6:'订金订单充值',
						7:'余额订单充值',
						8:'订金订单退款',
						9:'余额订单退款'
					};
				Object.keys(typeObject).forEach(function(key){
					if(key == type){
						typeTextHtml = typeObject[key]
					}
				});	
				return typeTextHtml;
			},
			hanldNavigateBack(){
				uni.navigateBack({
					delta: 1
				});
			},
			showAccounExp(){
				this.isShowAccounExp = true
			},
			hideAccounExp(){
				this.isShowAccounExp = false
			}
		},
		onReachBottom() {
			if(this.hasNextPage){
				this.loadding = true
				this.pullUpOn = true
				this.GetOnReachBottomData()
			}	
		},
		onPullDownRefresh() {//下拉刷新
			this.listQuery.pageNum = 1;
			this.GetAccountInitData()
			uni.stopPullDownRefresh()
		},
		onShow() {
			// this.beansList = []
		}
	}
</script>

<style lang="scss">
	
page, .container{
	background: #FFFFFF;
	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: 258rpx;
	position: relative;
	background-size: cover;
}
.h-calendar{
	width: 100%;
	height: auto;
}
.m-account{
	width: 100%;
	height: 258rpx;
	padding:50rpx 24rpx;
	box-sizing: border-box;
	position: relative;
	.icon-tishi{
		position: absolute;
		right: 30rpx;
		top: 20rpx;
		font-size: 44rpx;
		color: #FFFFFF;
		text-align: right;
		line-height: 74rpx;
	}
	.m-m{
		width: 100%;
	}
	.title{
		height: 48rpx;
		text-align: center;
		.m-p{
			width: 100%;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 40rpx;
		}
	}
	.money{
		height: 90rpx;
		text-align: center;
		.m-t{
			font-size:58rpx;
			color: #FFFFFF;
			line-height: 90rpx;
			&.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;
		.line{
			width: 70rpx;
			height: 4rpx;
			background-color: #FFFFFF;
			position: absolute;
			bottom: 10rpx;
			left: 50%;
			margin-left: -35rpx;
		}
		&.current{
			color: $color-system;
			.line{
				background-color: $color-system;
			}
		}
	}	
}
.h-swiper-content{
	width: 100%;
	height: calc(100% - 478rpx);
	position: relative;
	background: #FFFFFF;
	box-sizing: border-box;
	.list-account{
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 0 24rpx;
		background: #FFFFFF;
	}
	.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: 100%;
		height: 140rpx;
		padding: 20rpx 0;
		border-bottom: 1px solid #EBEBEB;
		box-sizing: border-box;
		background: #FFFFFF;
		&:last-child{
			border-bottom: none;
		}
		.list-t{
			height: 54rpx;
			line-height: 54rpx;
			font-size: $font-size-32;
			color: #333333;
			display: flex;
			.t-t{
				flex: 1;
				&:nth-child(1){
					text-align: left;
				}
				&:nth-child(2){
					text-align: right;
				}
				&.bold{
					font-weight: bold;
				}
			}

		}
		.list-b{
			height: 46rpx;
			line-height: 46rpx;
			font-size:$font-size-28;;
			color: $text-color;
			display: flex;
			.t-t{
				flex: 1;
				color: #9aa5b5;
				&: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%;
	opacity: 0;
	background: rgba(0,0,0,.5);
	z-index: 999;
	image{
		width: 750rpx;
		height: 1052rpx;
	}
	.icon-close{
		position: absolute;
		color: #FFFFFF;
		font-size:60rpx ;
		bottom: 15%;
		left: 50%;
		margin-left: -32rpx;

	}
}
.showAccounExp.show{
	top: 0;
	opacity: 1;
	animation:rundtop 0.3s;
}
.showAccounExp.hide{
	top: 100%;
	opacity: 0;
	animation:rundbottom 0.3s;
}
@keyframes rundtop{
	0%{top: 100%;opacity: 0;}
	100%{top:0;opacity: 1;}
}
@keyframes rundbottom{
	0%{top: 0;opacity: 1;}
	100%{top:100%;opacity: 0;}
}
/*空列表显示样式*/
.empty-account {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: $bg-color;
	min-height: 800rpx;
	&-image {
		width: 260rpx;
		height: 260rpx;
	}
	.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;
}
.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>