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;">999,998.00</text>
				<text class="money_text" style="left: 45rpx;top: 243rpx;position: absolute;">5000.00</text>
				<view class="more_flex_panel">
					<text class="money_text" :key="fenyong">{{fenyong}}</text>
					<view style="width: 20rpx;" />
					<image class="more_image" src="../../static/images/more.png" @click="onTouchShowMore"/>
				</view>
				<button class="tixian_button" lang="zh_CN" type='primary'>提现</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
				:enableFlex="true"
				:enableBackToTop="true"	
				height="900rpx"
			>
				<u-list-item>
					<WalletListItem 
						cashNumber="-6000"
					/>
				</u-list-item>
				<u-list-item>
					<WalletListItem 
						cashNumber="1000"
						dType="2"
					/>
				</u-list-item>
				<u-list-item>
					<WalletListItem 
						cashNumber="-6"
						dType="1"
					/>
				</u-list-item>
				<u-list-item>
					<WalletListItem 
						cashNumber="-23"
						dType="3"
					/>
				</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";
	export default {
		components:{
			WalletListItem
		},
		mounted() {
			this.getCurrentDateSelectTime();
		},
		data() {
			return {
				fenyong : 0.00,
				isDateSelectShowing : false,
				startTime : [2021,12,1],
				endTime : 2022,
				//当前时间：年
				year : '',
				//当前时间：月
				month : '',
				currentTime,
			};
		},
		methods:{
			/**
			 * 点击了导航上的返回按钮
			 */
			onBackTouched(){
				
			},
			///点击了代理商分佣右边的箭头
			onTouchShowMore(){
				var num = this.fenyong;
				num = parseFloat(num);
				console.log(num);
				num = num + 10.52;
				num = num.toFixed(2);
				this.fenyong = num;
			},
			///获取当前时间
			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];
				console.log(ct);
				this.currentTime = ct;
				return ct;
			},
			///现实日期选择器
			onShowDateSelect(){
				this.isDateSelectShowing = true;
			},
			onDateSelectConfirm(e){
				console.log(e);
				this.year = e.a;
				this.month = e.b;
				//关闭选择器
				this.isDateSelectShowing = false;
			},
			///生日选择器取消了选择
			onDateSelectCanceled(){
				this.isDateSelectShowing = false;
			},
		},
	}
</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_panel{
		display: flex;
		flex-direction: row;
		//flex-wrap: wrap;
		//ackground-color: #0081FF;
		position: absolute;
		left: 404rpx;
		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>