zyejMAll-mobile/pages/commission/components/account-info.vue

<!-- 分销账户：展示基本统计信息 -->
<template>
	<view class="new-main">
		<view class="account-card">
			<view class="new-ljsy">
				<view class="l dd">
					<!-- <view class="l-img">
						<image src="https://zysc.fjptzykj.com:3000/shangcheng/7624fd0e447748a5f8f4532d89a416cf7f962644e588c99d7e8c8baeab7ee91f.png" class="img"></image>
					</view> -->
					<view class="l-text">

						<view class="l-text-b">
							累计收益（元）
						</view>
						<view class="l-text-t">
							{{
							    fen2yuan(state.summary2.withdrawPrice || 0) 
							}}
						</view>
					</view>
				</view>
				<view class="l r" @click="sheep.$router.go('/pages/commission/team')">
					<!-- <view class="l-img">
						<image src="https://zysc.fjptzykj.com:3000/shangcheng/6575e409f7656efb2821b2159ca0a26916f83f037fc533f9f19aa141c412ee2c.png" class="img"></image>
					</view> -->
					<view class="l-text">

						<view class="l-text-b">
							我的团队
						</view>
						<view class="l-text-t">
							{{
							  state.arr2.firstBrokerageUserCount + state.arr2.secondBrokerageUserCount ||
							  0
							}}
						</view>
					</view>
				</view>
			</view>

			<view class="account-card-box">
				<!--<view class="ss-flex ss-row-between card-box-header">
					<view class="ss-flex">
						<button class="ss-reset-button look-btn ss-flex" @tap="state.showMoney = !state.showMoney">
							<uni-icons :type="state.showMoney ? 'eye-filled' : 'eye-slash-filled'" color="#A57A55"
								size="20" />
						</button>
					</view>
					 <view class="ss-flex" @tap="sheep.$router.go('/pages/commission/wallet')">
						<view class="header-title ss-m-r-4">提现记录</view>
						<text class="cicon-play-arrow" />
					</view>
				</view> -->
				<!-- 提现金额 -->
				<view class="new-cont">
					<view class="ss-flex-1 ss-flex-col ">
						<view class="item-title">可提现(元)</view>
						<view class="item-detail">
							{{ state.showMoney ? fen2yuan(state.brokerageInfo.brokeragePrice) : '***' }}
						</view>
					</view>
					<!-- <view class="ss-flex-1 ss-flex-col ss-col-center new-btn"
						@tap="sheep.$router.go('/pages/commission/withdraw')"
					>
						立即提现
					</view> -->
					<view class="sss" @tap="sheep.$router.go('/pages/commission/wallet')">
						<view class="header-title ss-m-r-4">提现记录</view>
						<image class="menu-icon-you" src="@/static/images/dayu.png" mode="aspectFill"></image>
					</view>
				</view>
				<!-- 收益 -->
				<view class="card-content ss-flex">
					<view class="ss-flex-1 ss-flex-col ss-col-center">
						<view class="item-title">当前收益(元)</view>
						<view class="item-detail">
							{{ state.showMoney ? fen2yuan(state.summary.brokeragePrice || 0) : '***' }}
						</view>
					</view>
					<view class="ss-flex-1 ss-flex-col ss-col-center">
						<view class="item-title">昨天收益(元)</view>
						<view class="item-detail">
							{{ state.showMoney ? fen2yuan(state.summary.yesterdayPrice || 0) : '***' }}
						</view>
					</view>
					<view class="ss-flex-1 ss-flex-col ss-col-center">
						<view class="item-title">累计已提(元)</view>
						<view class="item-detail">
							{{ state.showMoney ? fen2yuan(state.summary.withdrawPrice || 0) : '***' }}
						</view>
					</view>
				</view>
				<view class="ss-flex-1 ss-flex-col ss-col-center new-btn"
					@tap="sheep.$router.go('/pages/commission/withdraw')">
					立即提现
				</view>
			</view>




		</view>
		<!-- 菜单栏 -->
		<commission-menu />

	</view>
</template>

<script setup>
	import commissionMenu from './commission-menu.vue';
	import sheep from '@/sheep';
	import {
		computed,
		reactive,
		onMounted,
		onBeforeMount
	} from 'vue';
	import BrokerageApi from '@/sheep/api/trade/brokerage';
	import {
		fen2yuan
	} from '@/sheep/hooks/useGoods';

	const userInfo = computed(() => sheep.$store('user').userInfo);

	const state = reactive({
		showMoney: true,
		summary: {},
		brokerageInfo: {}, // 分销信息
		arr: {},
		summary2: {},
		arr2: {}
	});

	async function getAgentInfo() {
		const {
			code,
			data
		} = await BrokerageApi.getBrokerageUserSummary();
		if (code !== 0) {
			return;
		}
		state.summary2 = data;
	}
	onBeforeMount(async () => {
		getAgentInfo();
		// 概要数据
		let {
			data
		} = await BrokerageApi.getBrokerageUserSummary();
		state.arr2 = data;
	});

	// 获得分销信息
	async function getBrokerageUser() {
		const {
			data,
			code
		} = await BrokerageApi.getBrokerageUser();
		if (code === 0) {
			state.brokerageInfo = data;
		}
	}



	onMounted(async () => {
		let {
			code,
			data
		} = await BrokerageApi.getBrokerageUserSummary();
		if (code === 0) {
			state.summary = data || {};
		}
	});
	onBeforeMount(() => {
		getBrokerageUser();
	});
</script>

<style lang="scss" scoped>
	.menu-icon-you {
		width: 38rpx;
		height: 38rpx;
	}

	.new-btn {
		width: 85%;
		margin: 0 auto;
		background: rgba(235, 70, 39);
		padding: 12px 0;
		border-radius: 20px;
		color: white;
		font-weight:700;
	}

	.new-ljsy {
		// width: 100%;
		// background:white;
		padding: 8px 13px;
		display: flex;
		justify-content: center;

		.l {
			// background: rgba(254,244,237);
			// background:url('https://zysc.fjptzykj.com/admin-api/infra/file/25/get/8e878e15d22f68e0187a953aeba31b80423b7e3fafa8e4aa9f237477ac0fd519.png') rgba(254,244,237,1);
			width: 43%;
			height: 85px;
			border-radius: 12px;
			background-size: cover;
			// position:relative;
			display: flex;
			align-items: center;
			justify-content: left;

			&.dd {
				margin-right: 5%;
			}

			.l-text {

				// position:absolute;
				// top:50%;
				// transform: translateY(-50%);
				// left:70px;
				.l-text-t {
					font-size: 27px;
					font-weight: 700;
				}

				.l-text-b {
					font-size: 24rpx;
				}
			}

			.l-img {
				width: 40px;
				height: 40px;
				margin-right: 10px;

				.img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.r {

			// background:url('https://zysc.fjptzykj.com/admin-api/infra/file/25/get/b18f31e528ad0ab1026441faba07cb9e64723ffa511d103324fcd65fcaaf1557.png') rgba(254,244,237,1);
			// background-size: cover;
			.l-text {
				// left:80px;
			}
		}
	}

	.new-main {
		width: 100%;
		margin: 15px auto !important;
	}

	.account-card {
		// width: 694rpx;
		margin: 0 15px;
		padding: 2rpx;
		// background: linear-gradient(180deg, #ffffff 0.88%, #fff9ec 100%);
		// border-radius: 12rpx 12rpx 0 0;
		z-index: 3;
		position: relative;
		background: url('https://zysc.fjptzykj.com:3000/shangcheng/cbbe23772e68ed5fc5c18d193f9f674d6e87ccddd422e0df6af6cab5dfea6c27.png') no-repeat;
		background-size: 100%;
		padding-bottom: 25px;
		border-radius: 18px;

		.account-card-box {

			// background: #ffefd6;
			.new-cont {
				padding: 0 45rpx;
				display: flex;
				justify-content: space-between;
				margin-top: 13px;
				.sss{
					display:flex;
					height:20px;
					align-items:center;
					.header-title{
						color:rgba(194,194,194);
					}
				}
				.new-btn {
					background: rgba(178, 102, 67);
					border-radius: 22px;
					padding: 8px 0;
					font-size: 16px;
					color: white;
					font-weight: 700;
				}

				.item-title {
					color: rgba(142, 144, 145, 1);
					font-size: 24rpx;
				}

				.item-detail {
					color: rgba(231, 91, 79, 1);
					font-size: 20px;
				}
			}

			.card-box-header {
				padding: 0 45rpx;
				height: 72rpx;
				// box-shadow: 0px 2px 6px #f2debe;

				.header-title {
					font-size: 24rpx;
					font-weight: 500;
					color: #a17545;
					line-height: 30rpx;
				}

				.cicon-play-arrow {
					color: #a17545;
					font-size: 24rpx;
					line-height: 30rpx;
				}
			}

			.card-content {
				height: 190rpx;
				// background: #fdfae9;

				.item-title {
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(142, 144, 145, 1);
					line-height: 30rpx;
					margin-bottom: 24rpx;
				}

				.item-detail {
					font-size: 20px;
					font-family: OPPOSANS;
					font-weight: bold;
					color: rgba(80, 80, 80, 1);
					line-height: 30rpx;
				}
			}
		}
	}
</style>