xiaochengxu/pages/Wallet/Wallet.vue

<!--钱包界面-->
<template>
	<view class="main">
		<view class="back" />
		<u-navbar
			title="钱包"
			:safeAreaInsetTop="true"
			:fixed="true"
			bgColor="#FFFFFF"
			:placeholder="true"
			@leftClick="onBackTouched"
		/>
		<view style="position: relative;top: 10rpx;">
			<image class="top_image" src="../../static/images/wallet/bg_4.png">
				<text class="title_text" style="left: 45rpx;top: 45rpx;">可用金额(元)</text>
				<text class="title_text" style="left: 45rpx;top: 193rpx;">入账中的金额(元)</text>
				<text class="title_text" style="left: 404rpx;top: 193rpx;">代理商分佣(元)</text>
				<text class="money_text" style="left: 45rpx;top: 91rpx;position: absolute;">{{formatMoney(pageData.availableamount)}}</text>
				
				<view class="more_flex_ruzhang_panel"  @click="onTouchShowMore(0)">
					<text class="money_text" :key="pageData.recordedamount">{{formatMoney(pageData.recordedamount)}}</text>
					<view style="width: 20rpx;" />
					<image class="more_image" src="../../static/images/more.png"/>
				</view>
				
				<view class="more_flex_fenyong_panel" @click="onTouchShowMore(1)">
					<text class="money_text" :key="pageData.agencycommi">{{formatMoney(pageData.agencycommi)}}</text>
					<view style="width: 20rpx;" />
					<image class="more_image" src="../../static/images/more.png" />
				</view>
				<button class="tixian_button" lang="zh_CN" type='primary' @click="onTouchShowMore(2)">提现</button>
			</image>
		</view>
		<u-gap height="20rpx"/>
		<view class="body">
			<view class="calender_box" @click="onShowDateSelect" :key="currentTime.toString()">
				<text style="font-weight: bold;left: 20rpx;color: #333333;font-size: 26rpx;">{{year + '年' + month + '月'}}</text>
				<view style="width: 20rpx;" />
				<u-icon name="arrow-down" size="32rpx"></u-icon>
			</view>
			<u-line customStyle="width: 662rpx;height: 1rpx;border: 1px solid #E2E2E2;position: relative;left: 20rpx;"/>	
			<u-gap height="10rpx"/>
			<u-list
				height="900rpx"
				preLoadScreen=10
				@scrolltolower="onScrollListToBottom"
			>
				<u-list-item v-for="(item,index) in pageData.amountrecord" :key="index">
					<WalletListItem 
						:record="item"
						:index="index"
					/>
				</u-list-item>
			</u-list>
		</view>
		<min-picker
			:startTime="startTime"
			:endTime="endTime"
			@cancel="onDateSelectCanceled"
			@sure="onDateSelectConfirm"
			:show="isDateSelectShowing"
			heightRpx="500"
			:currentTime="currentTime"
			showType="1"
		></min-picker>
	</view>
</template>

<script>
	var currentTime = [2022,1,1];
	import WalletListItem from "@/components/WalletListItem/WalletListItem.vue";
	import WalletMainPage from "./WalletMainPage.js"
	var Player	= getApp().globalData.Player;
	var pageData = new WalletMainPage();
	export default {
		components:{
			WalletListItem
		},
		onLoad() {
			this.getCurrentDateSelectTime();
		},
		/**
		 * 每次从其他地方返回，要求刷新，不过这个地方需要优化
		 */
		onShow() {
			this.pageData.clear();
			pageData.getPageData();
			pageData.getNextPage(this.year,this.month);
		},
		destroyed() {
			this.pageData = null;
		},
		data() {
			return {
				pageData,
				isDateSelectShowing : false,
				startTime : pageData.recordStartTime,
				endTime : 2022,
				//当前时间：年
				year : '',
				//当前时间：月
				month : '',
				currentTime,
			};
		},
		methods:{
			/**
			 * 点击了导航上的返回按钮
			 */
			onBackTouched(){
				uni.navigateBack({
					
				});
			},
			///点击了代理商分佣右边的箭头
			onTouchShowMore(index){
				if(index == 2){
					//判断是否实名了，
					if(Player.needrealname == 1 || Player.bankcard == ''){
						uni.$u.toast("请先进行实名认证");
						return;
					}
					//进入提现页面
					uni.navigateTo({
						url:'/pages/TiXian/TiXian'
					})
					return;
				}
				
				uni.navigateTo({
					url:'/pages/RzAndFyView/RzAndFyView?index='+index,
				});
			},
			///获取当前时间
			getCurrentDateSelectTime(){
				const time 	= new Date();
				const year 	= time.getFullYear();
				const month = time.getMonth() + 1;
				this.month 	= month;
				this.year 	= year;
				var ct 		=  [parseInt(this.year),parseInt(this.month),1];
				this.currentTime = ct;
				return ct;
			},
			///现实日期选择器
			onShowDateSelect(){
				this.isDateSelectShowing = true;
			},
			onDateSelectConfirm(e){
				this.year = e.a;
				this.month = e.b;
				//关闭选择器
				this.isDateSelectShowing = false;
				this.pageData.getNextPage(this.year,this.month);
			},
			///生日选择器取消了选择
			onDateSelectCanceled(){
				this.isDateSelectShowing = false;
			},
			
			formatMoney(num){
				return "￥" + this.$utils.formatMoney(num / 100);
			},
			///滑动列表到达了底部，需要去获取一下
			onScrollListToBottom(){
				console.log("托到底了！");
				this.pageData.getNextPage(this.year,this.month);
			},
			
		},
	}
</script>

<style lang="scss" scoped>
	.top_image{
		width: 702rpx;
		height: 331rpx;
		position: relative;
		top: 0;
		left: 24rpx;
		right: 24rpx;
	}
	
	.title_text{
		height: 37rpx;
		font-size: 26rpx;
		font-weight: 400;
		line-height: 37rpx;
		color: #FFFFFF;
		opacity: 1;
		position: absolute;
	}
	.money_text{
		height: 50rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
		opacity: 1;
	}
	
	.more_image{
		width: 24rpx;
		height: 24rpx;
	}
	
	.more_flex_fenyong_panel{
		display: flex;
		flex-direction: row;
		//flex-wrap: wrap;
		//background-color: #0081FF;
		position: absolute;
		left: 404rpx;
		top: 243rpx;
		width: 310rpx;
		height: 45rpx;
		align-items: center;
	}
	
	.more_flex_ruzhang_panel{
		display: flex;
		flex-direction: row;
		//flex-wrap: wrap;
		//background-color: #0081FF;
		position: absolute;
		left: 44rpx;
		top: 243rpx;
		width: 310rpx;
		height: 45rpx;
		align-items: center;
	}
	
	.tixian_button{
		width: 130rpx;
		height: 50rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 30rpx;
		position: absolute;
		right: 57rpx;
		top: 48rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #D49B4B;
		justify-content: center;
		align-items: center;
		display: flex;
	}
	
	.body{
		width: 702rpx;
		height: auto;
		position: relative;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		left: 24rpx;
	}
	
	.calender_box{
		width: 702rpx;
		height: 100rpx;
		position: relative;
		display: flex;
		flex-direction:row;
		align-items: center;
		margin-left: 20rpx;
	}
</style>