FXB/pages/index/income.vue

<template>
	<view class="container" style="padding-top: 100rpx;">
		<topView :backg="'#1A1A17'"></topView>
		<view class="infoBox">
			<view class="navBack" @click="navTo('/pages/index/index')">
				<u-icon name="arrow-left" size="25" color="#fff" style="position: absolute;left: 0;top: 0;font-weight: bold;"></u-icon>
				<view class="title">{{$t("income.我的收益")}}</view>
			</view>
			<view class="infoItem">
				<view class="itemInfo">
					<view class="itemName">{{$t("income.收益统计")}}NICE</view>
					<view class="infos">
						<view class="infoName">{{$t("income.累计收益")}}</view>
						<view class="infoNum">{{info.all_recommend + info.all_group+info.all_same+info.all_mining }}</view>
					</view>
				</view>
				<view class="flex numBox">
					<view class="numTpl">
						<view class="num">{{info.all_extract}}</view>
						<view class="name">{{$t("income.累计提现")}}</view>
					</view>
					<view class="partition"></view>
					<view class="numTpl">
						<view class="num">{{userInfo.NICE * 1}}</view>
						<view class="name">{{$t("income.剩余可提现")}}</view>
					</view>
				</view>
			</view>
			<view class="listBox">
				<view class="listTop flex">
					<view class="tip">{{$t("income.收益明细")}}</view>
					<view class="tip flex_item" @click="navTo('/pages/index/incomeTpl')">
						<view style="font-size: 24rpx;">{{$t("income.明细记录")}}</view>
						<view><u-icon name="arrow-right" size="12" color="#fff" style="margin-left: 5rpx;"></u-icon></view>
					</view>
				</view>
				<view class="listTpl flex">
					<view class="tpl">
						<view class="addr">{{$t("income.直推奖")}}(NICE)</view>
						<view class="time">{{info.all_recommend}}</view>
					</view>
				</view>
				<view class="listTpl flex">
					<view class="tpl">
						<view class="addr">{{$t("income.业绩奖")}}(NICE)</view>
						<view class="time">{{info.all_group}}</view>
					</view>
				</view>
				<view class="listTpl flex">
					<view class="tpl">
						<view class="addr">{{$t("income.平级奖")}}(NICE)</view>
						<view class="time">{{info.all_same}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import topView from '../components/topView.vue';
	import { moneyInfo } from '@/api/index.js';
	import {mapState,mapActions,mapMutations} from "vuex";
	export default {
		components: {
			topView
		},
		data () {
			return {
				info:''
			}
		},
		onLoad () {
			this.loadDate()
		},
		computed: {
			...mapState('user', ['userInfo']),
		},
		methods: {
			loadDate () {
				let obj = this;
				moneyInfo('NICE').then((res) => {
					obj.info = res.data
				})
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		min-height: 100vh;
		.container {
			width: 100%;
			min-height: 100vh;
		}
	}
	.infoBox{
		padding: 0rpx 25rpx;
		color: #fff;
	}
	.navBack{
		position: relative;
		color: #fff;
		text-align: center;
		margin: 30rpx 0rpx 40rpx 0rpx;
		.title{
			font-weight: bold;
			font-size: 34rpx;
		}
	}
	.infoItem{
		background: #1A1A17;
		padding: 35rpx 0rpx;
		border-radius: 20rpx;
		.numBox{
			padding-top: 25rpx;
			.numTpl{
				width: 45%;
				text-align: center;
				.name{
					font-weight: 500;
					font-size: 26rpx;
					color: #FFFFFF;
					padding-top: 10rpx;
				}
				.num{
					font-weight: bold;
					font-size: 34rpx;
					color: #FFFFFF;
				}
			}
			.partition{
				width: 2rpx;
				height: 119rpx;
				background: linear-gradient(0deg, rgba(255,255,255,0), #FFFFFF, rgba(255,255,255,0));
			}
		}
	}
	.itemInfo{
		padding: 0rpx 25rpx;
		.itemName{
			font-weight: bold;
			font-size: 27rpx;
			padding-bottom: 20rpx;
		}
		.infos{
			text-align: center;
			border-bottom:1rpx solid rgba(221, 225, 235, 0.2);
			padding: 25rpx 0rpx;
			padding-bottom: 58rpx;
			.infoName{
				font-weight: bold;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 24rpx;
			}
			.infoNum{
				padding-top: 20rpx;
				font-weight: bold;
				font-size: 34rpx;
				color: #7760EE;
				background: linear-gradient(258deg, #FFF0CF 0%, #CBA16B 30.0048828125%, #FCE9CF 67.67578125%, #C29963 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}
	.listBox{
		margin-top: 25rpx;
		background: #1A1A17;
		padding: 0rpx 25rpx;
		border-radius: 30rpx;
		.listTop{
			padding: 35rpx 0rpx;
			border-bottom: 1rpx solid rgba(83, 72, 72, 0.3);
		}
		.listTpl{
			padding: 30rpx 0rpx;
			border-bottom: 1rpx solid rgba(233, 233, 233, 0.3);
			.tpl{
				.addr{
					font-weight: bold;
					font-size: 24rpx;
					color: #999999;
				}
				.time{
					font-weight: 500;
					font-size: 26rpx;
					padding-top: 15rpx;
				}
			}
			.num{
				font-weight: bold;
				font-size: 34rpx;
				color: #7760EE;
				background: linear-gradient(258deg, #FFF0CF 0%, #CBA16B 30.0048828125%, #FCE9CF 67.67578125%, #C29963 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
		.listTpl:last-child{
			border-bottom: none !important;
		}
	}
</style>