fb/fb-app/pages/center/walletinfo.vue

<template>
	<view>
		<u-navbar title="电子钱包" :border-bottom="false">
		</u-navbar>
		<view class="userinfo-panel">
			<view class="userinfo-panel-bd">
				<view class="weui-media-box__title">
					<text class="userinfo-nickname">{{userInfo.nickName}}</text>
				</view>
				<view class="weui-media-box__desc">
					<view class="">
						<text class="userinfo-nickname">余额</text>
						<text class="money">¥{{allowanceBalance}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="records-list">
		    <view class="weui-media-box weui-media-box_text">
		        <view class="weui-cell weui-cell-content">
		            <view class="weui-cell__bd">
		                <view class="picker">
		                    {{date}}
		                </view>
		            </view>
		            <view class="weui-cell__ft">
		                <view class="middle-left-rili">
		                    <u-picker mode="time" v-model="showDate" :default-time="data" :params="params" @confirm="ckDate">
							</u-picker>
							<image class="middle-left-rili-image" src="/static/ico_date.png" @click="openPicker"></image>
		                </view>
		            </view>
		        </view>
		        <view class="weui-media-box__desc">支出 ¥{{payMoney}} 收入 ¥{{incomeMoney}}（充值¥{{rechargeMoney}} 补贴¥{{allowanceMoney}}）</view>
		    </view>
			<!--无数据-->
			<view class="prompt-container"  v-if="tradeInfoList.length === 0">
			    <view class="prompt-message">
			        <image class="prompt-icon" src="/static/iconfont-empty.png"></image>
			        <view class="prompt-title">空空如也</view>
			        <view class="prompt-text">暂时没有相关数据</view>
			    </view>
			</view>
			<!--列表区域-->
			<scroll-view scroll-y scroll-with-animation class="data-list" @scrolltolower="pullList" v-if="tradeInfoList.length > 0">
				<view class="weui-media-box weui-media-box_text" v-for="(item,index) in tradeInfoList" :key="index">
				    <view class="weui-cell weui-cell-content">
				        <view class="weui-cell__bd">{{item.consumeType}}</view>
				        <view class="weui-cell__ft">{{item.payment}}</view>
				    </view>
				    <view class="weui-media-box__desc">{{item.consumeTime}}</view>
				</view>
			</scroll-view>
			<u-toast ref="uToast" />
		</view>
	</view>	
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				allowanceBalance: 0,
				payMoney: 0,
				incomeMoney: 0,
				rechargeMoney: 0,
				allowanceMoney: 0,
				date: 2018-7,
				params: {
					year: true,
					month: true,
					day: false
				},
				tradeInfoList:[],
				showDate: false
			}
		},
		onReady() {
			this.userInfo = this.vuex_userInfo;
			console.log("当前登录用户对象",this.userInfo);
			this.date = this.$u.timeFormat(new Date(), 'yyyy-mm');
			this.getTradeInfo(this.date);
			this.getWalletInfomMonth(this.date);
		},
		onShow() {
			//余额
			this.$u.api.getBalance().then(({data}) => {
				this.allowanceBalance = data;
			})
		},
		methods: {
			//弹出选择
			openPicker() {
				this.showDate= true;
			},
			//选择年月
			ckDate(o) {
				console.log("选择的>>>",o)
				let oldDate = this.$u.timeFormat(new Date(), 'yyyy-mm').split("-");
				let b= false;
				if(o.year >oldDate[0]){
					b=true;
				}else if(o.year <= oldDate[0] && o.month> oldDate[1]){
					b=true;
				}
				if(b){
					this.$refs.uToast.show({
						title: '不能选择超过当前的日期',
						type: 'error'
					})
					return;
				}
				
				this.date= o.year+"-"+o.month;
				this.tradeInfoList= [];
				this.getTradeInfo(this.date);
				this.getWalletInfomMonth(this.date);
			},
			//查询消费记录
			getTradeInfo(date) {
				this.$u.api.getTradeInfo({"tradeTime":date}).then((res) => {
					if(res.code == 200){
						if(res.rows.length>0){
							res.rows.map(item => {
								this.tradeInfoList.push({
									id: item.tradeId,
									consumeTime:item.tradeTime,
									consumeType:item.tradeType,
									payment:item.payment
								});
							})
						}
					}
					console.log(res)
				})
			},
			//查询月总支出、收入、充值、补贴
			getWalletInfomMonth(date) {
				this.$u.api.getWalletInfomMonth({"tradeTime":date}).then((res) => {
					console.log("响应记录",res.data)
					if(res.code == 200){
						this.incomeMoney= res.data.rechargeMoney + res.data.allowanceMoney;
						this.payMoney=res.data.payMoney;
						this.rechargeMoney=res.data.rechargeMoney;
						this.allowanceMoney=res.data.allowanceMoney;
					}
				})
			},
			//下滤获取数据
			pullList() {
				console.log("下拉查询昨天数据，暂不实现")
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #ededed;
	}
	
	
	.userinfo-panel {
	    background-color: #fff;
	    margin-bottom: 34rpx;
	}
	
	.userinfo-panel-bd {
	    padding: 24rpx 75rpx 22rpx 79rpx;
	    background-color: #fff;
	}
	
	.money {
	    color: #f36838;
	    padding-left: 10rpx;
	}
	
	.records-list {
	    background-color: #fff;
	}
	
	
	.middle-left-rili-image {
	    width: 65rpx;
	    height: 65rpx;
	    background-size: 65rpx 65rpx;
	}
	
	.middle-left-rili-image {
	    width: 65rpx;
	    height: 65rpx;
	    background-size: 65rpx 65rpx;
	}
	
	.data-list {
	    height: 800rpx;
	    border-top: 1rpx solid #F2f2f2;
	}
	
	
</style>