juliancheng/pages/tuijian/jiangjin.vue

<template>
	<view class="main">
		<view class="top">
			<view class="title">推广奖金</view>
			<view class="num">{{ promoteRewardDetail.promote_reward }}元</view>
			<view class="mingxi" @click="mingxi()">提现明细</view>
		</view>
		<view class="keti">
			<view class="keti-name">可提现奖金</view>
			<view class="keti-money">{{ promoteRewardDetail.balance }}元</view>
		</view>
		<view class="box">
			<view class="line" style="border-bottom: 1px solid #eee;">
				<view class="line-name">已提现奖金</view>
				<view class="line-money">{{ promoteRewardDetail.withdrawn }}元</view>
			</view>
			<view class="line">
				<view class="line-name">待打款佣金</view>
				<view class="line-money">{{ promoteRewardDetail.audit_balance }}元</view>
			</view>
		</view>
		<!-- <view class="xuzhi">
				<view class="name">
					用户须知
				</view>
				<view class="money">
					>
				</view>
		</view> -->
		<view class="tixian" @click="tixian()">立即提现</view>
	</view>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex';
export default {
	computed: {	
		...mapGetters({
			hasLogin: 'verifyJwt'
		}),
		...mapState(['user'])
	},
	data() {
		return {
			promoteRewardDetail: { balance: '', withdrawn: '', audit_balance: '', promote_reward: '' }
		};
	},
	onLoad() {
		this.getPromoteRewardDetail();
	},
	methods: {
		getPromoteRewardDetail: async function() {
			let res = await this.$request.post('/api/userPromote/getPromoteRewardDetail', {});
			if (res.code == 200) {
				this.promoteRewardDetail = res.data;
			} else {
				uni.showToast({
					icon: 'none',
					title: res.message
				});
			}
		},
		tixian() {
			console.log('123456');
			uni.navigateTo({
				url: '/pages/tuijian/cash'
			});
		},
		mingxi() {
			uni.navigateTo({
				url: '/pages/tuijian/cashdetail'
			});
		}
	}
};
</script>

<style>
page {
	background: #f5f5f5;
}
.main {
	width: 100vw;
	height: auto;
	margin-bottom: 20px;
}
.top {
	width: 100%;
	height: 75px;
	padding: 10px 0;
	background: #f1c554;
}
.top .title {
	width: auto;
	height: 30px;
	line-height: 30px;
	color: #fff;
	text-indent: 20px;
}
.top .num {
	width: auto;
	height: 30px;
	line-height: 30px;
	color: #fff;
	text-indent: 20px;
}
.top .mingxi {
	width: auto;
	height: 20px;
	line-height: 20px;
	padding: 0 10px;
	border-radius: 20px;
	border: 1px solid #fff;
	color: #fff;
	position: absolute;
	top: 30px;
	right: 10px;
}
.keti,
.xuzhi,
.line {
	display: flex;
	justify-content: space-between;
	background: #fff;
	line-height: 30px;
	padding: 10px 15px;
}
.box {
	width: 100vw;
	padding: 0 15px;
	background: #fff;
	margin: 15px 0;
}
.line {
	padding: 10px 0;
}
.tixian {
	width: 80vw;
	height: 40px;
	line-height: 40px;
	border-radius: 40px;
	background: #f1c554;
	text-align: center;
	margin: 20px 10vw;
	color: #fff;
}
.keti .keti-name,.line .line-name{
	font-size: 30rpx;
	font-family: PingFangSC-Regular, sans-serif;
	font-weight:400;
}
.keti .keti-money,.line .line-money{
	font-size: 30rpx;
	font-family: PingFangSC-Regular, sans-serif;
	font-weight:400;
}
</style>