MeiMeiZhuan/pages/wallet/wallets.vue

<template>
	<view class="content">
		<!-- #ifndef MP -->
		<view class="revert flex-upDown-center">
			<view class="revert-1" @click="switchTab('/pages/user/user')"><image src="../../static/img/img03.png"></image></view>
			<view class="revert-2">推广收益</view>
		</view>
		<!-- #endif -->
		<view class="content-money">
			<view class="money-box">
				<view class="money flex1" @click="navto('/pages/award/award')">
					<text>总收益(元)</text>
					<text>佣金明细</text>
				</view>
				<view class="text">￥{{count}}</view>
			</view>
		</view>
		<view class="buttom-box flex">
			<view class="buttom">	
				<view class="money">￥{{money}}</view>
				<text class="text">现有佣金</text>
			</view>
			<view class="interval"></view>
			<view class="buttom">
				<view class="money">￥{{extractTotalPrice}}</view>
				<text class="text">已发放奖励（元）</text>
			</view>
		</view>
		<view class="button">
			<view class="button1" @click="toWechat">转出到余额</view>
			<view class="button2" @click="toAccount">提现</view>
		</view>
	</view>
</template>

<script>
import { spreadCount } from '@/api/wallet.js';
import { userinfos } from '@/api/user.js';
export default {
	data() {
		return {
			money:0,//现有佣金
			count:0,//佣金总金额
			extractTotalPrice:0,//已提佣金
		};
	},
	onShow() {
		this.loadData();
	},
	methods: {
		//获取佣金总金额
		async loadData(source) {
			let type = 3;
			spreadCount({
				type:type
			}).then(({data}) => {
				console.log(data,'data')
				this.count = data.count;
			});
			let that = this;
			userinfos().then(({data}) => {
				console.log(data,'res')
				this.money = data.extractPrice;
				this.extractTotalPrice = data.extractTotalPrice;
			});
		},
		/**
		 * 获取个人用户信息
		 */
		
		// 页面跳转
		switchTab(e) {
			uni.switchTab({
				url: e
			});
		},
		navto(url){
			uni.navigateTo({
				url
			});
		},
		// 跳转到转出到余额
		toWechat(){
			if( this.count <= 0){
				uni.showToast({
				    title: '佣金不足',
				    duration: 2000,
					icon: 'none',
				});
			} else{
				uni.navigateTo({
					url:'/pages/wallet/wechat'
				});
			}
		},
		toAccount(){
			if( this.count <= 0){
				uni.showToast({
				    title: '佣金不足',
				    duration: 2000,
					icon: 'none',
				});
			} else{
				uni.navigateTo({
					url:'/pages/wallet/account'
				});
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background: #ffffff;
	height: 100%;
}	
.revert{
	z-index: 10;
	width: 100%;
	position: absolute;
	top:20rpx;
	padding: 0 30rpx;
	.revert-1{
		width: 20rpx;
		height: 35rpx;
		image{
			width: 20rpx;
			height: 35rpx;
		}
	}
	.revert-2{
		text-align: center;
		width: calc(100% - 20rpx);
		font-size:32rpx;
		font-weight:500;
		color:#ffffff;
	}
}
.content-money {
	background: $page-color-base;
	// border: 2px solid #ffffff;
	.moneyTx {
		position: absolute;
		top: 150rpx;
		right: 0rpx;
		width: 150rpx;
		padding: 10rpx 30rpx;
		border: 2px solid #ffffff;
		border-top-left-radius: 99rpx;
		border-bottom-left-radius: 99rpx;
		color: #ffffff;
		line-height: 1;
		font-size: $font-base;
	}
	.buttom-box {
		background-color: #ffffff;
		text-align: center;
		margin: 0 30rpx;
		padding: 20rpx 0;
		border-radius: $border-radius-sm;
		.buttom {
			font-size: $font-lg;
			flex-grow: 1;
		}
		.interval {
			width: 2px;
			height: 60rpx;
			background-color: #eeeeee;
		}
		.icon {
			height: 50rpx;
			width: 48rpx;
			margin: 0 auto;
			.icon-img {
				width: 100%;
				height: 100%;
			}
		}
	}
}
.buttom-box {
	background-color: #ffffff;
	text-align: center;
	margin: 0 30rpx;
	padding: 30rpx 0;
	border-radius: $border-radius-sm;
	box-shadow:0px 0px 20px 0px rgba(50,50,52,0.06);
	margin-top: -60rpx;
	position: relative;
	.buttom {
		font-size: $font-lg;
		flex-grow: 1;
		.money{
			font-weight: bold;
			font-size: 32rpx;
			color:#222222;
		}
	}
	.text {
		color: #666666;
	}
	.interval {
		width: 2rpx;
		height: 60rpx;
		background-color: #eeeeee;
	}
	.icon {
		height: 50rpx;
		width: 48rpx;
		margin: 0 auto;
		.icon-img {
			width: 100%;
			height: 100%;
		}
	}
}
.button{
	.button1{
		width:480rpx;
		height:80rpx;
		background:linear-gradient(90deg,rgba(254,78,70,1) 0%,rgba(252,65,65,1) 100%);
		border-radius:10rpx;
		font-size:30rpx;
		font-weight:500;
		color:#ffffff;
		line-height: 80rpx;
		text-align: center;
		margin:180rpx auto 0;
	}
	.button2{
		width:480rpx;
		height:80rpx;
		background:#F2F2F2;
		border-radius:10rpx;
		font-size:30rpx;
		font-weight:500;
		color:#FC4141;
		line-height: 80rpx;
		text-align: center;
		margin:30rpx auto 0;
	}
}
.money-box {
	background: $base-color;
	padding-top: var(--status-bar-height);
	height: 600rpx;
	color: #ffffff;
	text-align: center;
	position: relative;
	.text {
		padding-top: 140rpx;
		font-size: 82rpx;
	}
	.money {
		padding:  120rpx 25rpx 0 25rpx;
		font-size: 24rpx;
	}
	.money-accum {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 44rpx;
		.money-frame {
			.money-num {
				font-size: 45rpx;
				font-weight: 500;
				color: rgba(255,255,255,1);
			}
			.mon-text {
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(255,255,255,1);
			}
		}
	}

	.money-loca {
		width: 140rpx;
		height: 50rpx;
		background: #FFFFFF;
		color: #FA2740;
		font-size: $font-base;
		line-height: 50rpx;
		border-radius: 10rpx 0 0 10rpx;
	}
	// 立即提现
	.draw {
		position: absolute;
		right: 0;
		top: 64rpx;
	}
	// 余额支付
	.rech {
		position: absolute;
		right: 0;
		top: 134rpx;
	}
}

.navbar {
	display: flex;
	height: 40px;
	padding: 0 5px;
	background: #fff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
	position: relative;
	z-index: 10;
	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 15px;
		color: $font-color-dark;
		position: relative;
		&.current {
			color: $font-color-spec;
			&:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 44px;
				height: 0;
				border-bottom: 2px solid $font-color-spec;
			}
		}
	}
}
// 列表

.swiper-box {
	padding-top: 10rpx;
	.order-item {
		padding: 20rpx 30rpx;
		line-height: 1.5;
		.title-box {
			.title {
				font-size: $font-lg;
				color: $font-color-base;
			}
			.time {
				font-size: $font-base;
				color: $font-color-light;
			}
		}
		.money {
			color: #fd5b23;
			font-size: $font-lg;
		}
	}
}
.list-scroll-content {
	height: 100%;
}
.content {
	height: 100%;
	.empty-content {
		background-color: #ffffff;
	}
}
</style>