<!-- 我的钱包 -->
<template>
	<view class="body" :style="'padding-top:' + bottomHeight">
		<view class="bg-box">
			<!-- 导航 -->
			<view class="ss-flex-2 ss-col-center ss-margin-width2" style="position: relative">
				<view class="ss-flex-2 ss-col-center">
					<text class="textIcon icon-fanhui icon-navigation" @click="backPage"></text>
					<view style="margin-left: 15rpx; color: #fff; font-size: 28rpx">我的钱包</view>
				</view>
				<view class="ss-flex-1"></view>
				<!-- <text class="textIcon icon-kefu icon-navigation"></text>
					<text class="textIcon icon-tongzhiguanli icon-navigation" style="margin-left: 30rpx"></text> -->
			</view>
			<view class="title-maney-box">账户余额(元)</view>
			<view class="ss-flex-2 ss-col-center" style="margin-top: 5rpx;">
				<view class="ss-flex-1"></view>
				<view style="font-size: 70rpx;color: #fff;">99999999</view>
				<text class="textIcon icon-yanjing" style="font-size: 60rpx;color: #fff;margin-left: 20rpx;"></text>
				<view class="ss-flex-1"></view>
			</view>
			<view class="ss-flex-2 ss-col-center" style="margin-top: 20rpx;">
				<view class="ss-flex-1"></view>
				<view class="bt-pay-box" @click="jumpMember">充值</view>
				<view style="font-size: 26rpx;margin-left: 30rpx;" @click="jumpCommission">提现</view>
				<view class="ss-flex-1"></view>
			</view>
		</view>
		<view class="bottom-box ss-flex-2 ss-col-center">
			<!-- 佣金钱包  红包收入  余额  嘀咚币 -->
			<view class="ss-flex-2" style="flex-wrap: wrap;min-width:150rpx;" @click="jumpCommission">
				<view class="text-title" style="font-size:22rpx;">佣金钱包</view>
				<view class="text-title" style="font-size:30rpx;margin-top:5rpx;">999999.00</view>
			</view>
			<!-- <view class="line-box"></view> -->
		<!-- 	<view class="ss-flex-2" style="flex-wrap: wrap;min-width:150rpx;" @click="jumpRedEnvelope">
				<view class="text-title" style="font-size:22rpx;">红包收入</view>
				<view class="text-title" style="font-size:30rpx;margin-top:5rpx;">999999.00</view>
			</view> -->
			<view class="line-box"></view>
			<view class="ss-flex-2" style="flex-wrap: wrap;min-width:150rpx;" @click="jumpFree">
				<view class="text-title" style="font-size:22rpx;">免费项目(个)</view>
				<view class="text-title" style="font-size:30rpx;margin-top:5rpx;">20</view>
			</view>
			<view class="line-box"></view>
			<view class="ss-flex-2" style="flex-wrap: wrap;min-width:150rpx;" @click="jumpCoin">
				<view class="text-title" style="font-size:22rpx;">嘀咚币</view>
				<view class="text-title" style="font-size:30rpx;margin-top:5rpx;">999999+</view>
			</view>
		</view>
		<!-- 中部 -->
		<view class="list-wrap">
			<scroll-view scroll-y="true" class="list">
				<view class="list-scroll-view">
					<view class="ss-flex-2 ss-col-center go-box" v-for="i in 10">
						<view class="ss-flex-2" style="flex-wrap:wrap;">
							<view style="width:100%;font-size:24rpx;color:#7E8182;">微信充值</view>
							<view style="width:100%;font-size:19rpx;color:#B8B8B8;margin-top:5rpx;">2024-09-12 14:45:12
							</view>
						</view>
						<view class="ss-flex-1"></view>
						<view style="font-size:34rpx;color:#666;font-weight:650;">+0.72</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		computed
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh,
		onReady,
		onReachBottom,
		onShow,
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import $share from '@/sheep/platform/share';
	// 隐藏原生tabBar
	// uni.hideTabBar();

	// 返回我的
	const backPage = async () => {
		uni.reLaunch({
			url: '/pages/XDHome/myHome/myHome',
		});
	};
	// 跳转到充值
	const jumpMember=async()=>{
		uni.reLaunch({
			url: '/pages/XDHome/myFeat/memberRecharge/memberRecharge',
		});
	}
	// 跳转到佣金
	const jumpCommission = async () => {
		uni.reLaunch({
			url: '/pages/XDHome/myFeat/commission/commission',
		});
	}
	// 跳转到红包
	const jumpRedEnvelope = async () => {
		uni.reLaunch({
			url: '/pages/XDHome/myFeat/redEnvelope/redEnvelope',
		});
	}
	// 跳转到嘀咚币
	const jumpCoin = async () => {
		uni.reLaunch({
			url: '/pages/XDHome/myFeat/coinPage/coinPage',
		});
	}
	// 跳到免费项目
	const jumpFree=async()=>{
		uni.reLaunch({
			url: '/pages/XDHome/myFeat/freeProject/freeProject',
		});
	}

	const bottomHeight = ref('0rpx');
	// #ifdef APP-PlUS
	//获取顶部安全距离
	const app = uni.getSystemInfoSync();
	const bottomHeightOne = app.statusBarHeight + 'rpx';
	bottomHeight.value = bottomHeightOne
	// #endif
</script>
<style scoped lang="scss">
	.go-box {
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #DFDFDF;
		margin-bottom: 30rpx;
	}

	.line-box {
		width: 4rpx;
		height: 50rpx;
		background-color: #fff;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.text-title {
		color: #fff;
		text-align: center;
		width: 100%;
	}

	.bottom-box {
		width: 100%;
		min-height: 140rpx;
		background-color: #5FC3D1;
		color: #fff;
	}

	.bt-pay-box {
		padding: 10rpx 100rpx;
		box-sizing: border-box;
		background-color: #fff;
		color: #36AFCA;
		border-radius: 10rpx;
		font-size: 30rpx;
	}

	.title-maney-box {
		margin-top: 30rpx;
		font-size: 35rpx;
		text-align: center;
	}

	.bg-box {
		width: 100%;
		min-height: 350rpx;
		box-sizing: border-box;
		background-color: #36AFCA;
		color: #fff;
	}

	.icon-navigation {
		font-size: 32rpx;
		color: #fff;
		font-weight: 700;
	}

	// 上中下布局样式
	.body {
		display: flex;
		flex-direction: column;
		background-color: #EEEEF0;
		height: 100vh;
		box-sizing: border-box;
	}

	.head {
		text-align: center;
	}

	// 中部滚动
	.list-wrap {
		flex-grow: 1;
		position: relative;
		width: 95%;
		margin-left: 2.5%;
		box-sizing: border-box;
		background-color: #fff;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
	}

	.list {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 50rpx;
		padding: 10rpx;
		border-radius: 15rpx;
		box-sizing: border-box;
	}

	.list-scroll-view {
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx;
	}

	.course-card {
		width: 47vw;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	// 底部
	.tools {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.tools-item {
		width: 45px;
		text-align: center;
		font-size: 14px;
		padding: 20px;
	}
</style>