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

<!-- 分销商信息  -->
<template>
	<!-- 用户资料 -->
	<view class="user-card ss-flex ss-col-bottom">
		<view class="card-top ss-flex ss-row-between">
			<view class="ss-flex">
				<view class="head-img-box">
					<image class="head-img" :src="sheep.$url.cdn(userInfo.avatar)" mode="aspectFill"></image>
				</view>
				<view class="ss-flex-col">
					<view class="user-name" style="color:white;">{{ userInfo.nickname }}</view>
				</view>
			</view>
		</view>
		<!-- 账户信息 -->
		<account-info style="margin: 0 auto;" />
	</view>
	<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-t">
					{{
					    fen2yuan(state.summary.withdrawPrice || 0) 
					}}
				</view>
				<view class="l-text-b">
					累计收益（元）
				</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-t">
					{{
					  state.arr.firstBrokerageUserCount + state.arr.secondBrokerageUserCount ||
					  0
					}}
				</view>
				<view class="l-text-b">
					我的团队
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import accountInfo from './account-info.vue';
	import sheep from '@/sheep';
	import BrokerageApi from '@/sheep/api/trade/brokerage';
	import {
		computed,
		reactive,
		onBeforeMount
	} from 'vue';
	import {
			fen2yuan
	} from '@/sheep/hooks/useGoods';
	const userInfo = computed(() => sheep.$store('user').userInfo);
	const headerBg = sheep.$url.css('/static/img/shop/commission/background.png');
	

	const state = reactive({
		showMoney: false,
		summary:{},
		arr:{}
	});
	
	async function getAgentInfo() {
	  const { code, data } = await BrokerageApi.getBrokerageUserSummary();
	  if (code !== 0) {
	    return;
	  }
	  state.summary = data;
	}
	onBeforeMount(async() => {
	  getAgentInfo();
	  // 概要数据
	  let { data } = await BrokerageApi.getBrokerageUserSummary();
	  state.arr = data;
	});
</script>

<style lang="scss" scoped>
	.new-ljsy {
		width:100%;
		background:white;
		padding: 20px 0;
		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: center;
			&.dd{
				margin-right: 5%;
			}
			.l-text{
				// position:absolute;
				// top:50%;
				// transform: translateY(-50%);
				// left:70px;
				.l-text-t{
					font-size:20px;
					font-weight: 700;
				}
				.l-text-b{
					font-size: 13px;
				}
			}
			.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;
			}
		}
	}
	// 用户资料卡片
	.user-card {
		width: 100%;
		height: 580rpx;
		// margin: -88rpx 20rpx 0 20rpx;
		background: url('https://zysc.fjptzykj.com:3000/shangcheng/c4f941683d41701ac7f182824791ff43b5f7e70fb527b4d4d153416d6065c44f.png') no-repeat;
		// background: url('https://zysc.fjptzykj.com:3000/shangcheng/4bcaa2803c9cc953353d22db804b952b333e97d2a0d57266a00baf0c07379efa.png') no-repeat;
		// background:#ff3000;
		background-size: 100% 100%;
		display: flex;
		flex-wrap: wrap;

		.head-img-box {
			margin-right: 20rpx;
			width: 62rpx;
			height: 62rpx;
			border-radius: 50%;
			position: relative;
			background: #fce0ad;

			.head-img {
				width: 62rpx;
				height: 62rpx;
				border-radius: 50%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.card-top {
			box-sizing: border-box;
			margin-top: 46px;
			margin-left: 16px;

			.user-name {
				font-size: 32rpx;
				font-weight: bold;
				color: #692e04;
				line-height: 30rpx;
			}

			.log-btn {
				width: 84rpx;
				height: 42rpx;
				border: 2rpx solid rgba(#ffffff, 0.33);
				border-radius: 21rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: #ffffff;
				margin-bottom: 20rpx;
			}

			.look-btn {
				color: #fff;
				width: 40rpx;
				height: 40rpx;
			}
		}

		.user-info-box {
			.tag-box {
				background: #ff6000;
				border-radius: 18rpx;
				line-height: 36rpx;

				.tag-img {
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					margin-left: -2rpx;
				}

				.tag-title {
					font-size: 24rpx;
					padding: 0 10rpx;
					font-weight: 500;
					line-height: 36rpx;
					color: #fff;
				}
			}
		}
	}
</style>