From 9173f8c3474656ca5d24a3fb5b6a71213e3e6d5b Mon Sep 17 00:00:00 2001
From: 77 <270260644@qq.com>
Date: Mon, 4 Nov 2024 11:14:50 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AC=AC=E4=B8=80=E7=89=88=E6=AD=A3=E5=BC=8F?=
 =?UTF-8?q?=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/account-info-tow.vue           | 191 +++++++++++++++
 .../components/commission-info-tow.vue        | 227 ++++++++++++++++++
 .../components/commission-menu2.vue           | 226 +++++++++++++++++
 3 files changed, 644 insertions(+)
 create mode 100644 pages/commission/components/account-info-tow.vue
 create mode 100644 pages/commission/components/commission-info-tow.vue
 create mode 100644 pages/commission/components/commission-menu2.vue

diff --git a/pages/commission/components/account-info-tow.vue b/pages/commission/components/account-info-tow.vue
new file mode 100644
index 0000000..5700fcd
--- /dev/null
+++ b/pages/commission/components/account-info-tow.vue
@@ -0,0 +1,191 @@
+<!-- 分销账户：展示基本统计信息 -->
+<template>
+	<view class="new-main">
+		<view class="account-card">
+			<view class="account-card-box">
+				<view class="ss-flex ss-row-between card-box-header">
+					<view class="ss-flex">
+						<!-- <view class="header-title ss-m-r-16">账户信息</view> -->
+						<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="ss-flex 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>
+				<!-- 收益 -->
+				<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>
+
+		</view>
+
+		
+	</view>
+</template>
+
+<script setup>
+	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: false,
+		summary: {},
+		brokerageInfo: {}, // 分销信息
+		arr:{}
+	});
+	
+	// 获得分销信息
+	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>
+	.new-main{
+		width: 100%;
+	}
+	.account-card {
+		width: 694rpx;
+		margin: 0 auto;
+		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/423af1ff70d4e80ca7bd4ede17b9fe63800aaffd2e4e8b5b7584ab5bf5884996.png') no-repeat;
+		background-size: cover;
+
+		
+
+		.account-card-box {
+
+			// background: #ffefd6;
+			.new-cont {
+				padding: 0 45rpx;
+
+				.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(139, 105, 87, 1);
+				}
+
+				.item-detail {
+					color: rgba(81, 41, 24, 1);
+					font-size: 31px;
+				}
+			}
+
+			.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(139, 105, 87, 1);
+					line-height: 30rpx;
+					margin-bottom: 24rpx;
+				}
+
+				.item-detail {
+					font-size: 36rpx;
+					font-family: OPPOSANS;
+					font-weight: bold;
+					color: #692e04;
+					line-height: 30rpx;
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/commission/components/commission-info-tow.vue b/pages/commission/components/commission-info-tow.vue
new file mode 100644
index 0000000..e78e57e
--- /dev/null
+++ b/pages/commission/components/commission-info-tow.vue
@@ -0,0 +1,227 @@
+<!-- 分销商信息  -->
+<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>
\ No newline at end of file
diff --git a/pages/commission/components/commission-menu2.vue b/pages/commission/components/commission-menu2.vue
new file mode 100644
index 0000000..f160acd
--- /dev/null
+++ b/pages/commission/components/commission-menu2.vue
@@ -0,0 +1,226 @@
+<!-- 分销：商菜单栏 -->
+<template>
+	<view class="ss-flex-col new-menu">
+		<view class="new-menu-list">
+			<view class="new-menu-item" v-for="(item, index) in state.menuListnew" :key="index"
+				@tap="sheep.$router.go(item.path)">
+				<view class="l">
+					<image class="menu-icon " :src="sheep.$url.static(item.img)" mode="aspectFill"></image>
+					<view>{{ item.title }}</view>
+				</view>
+				<view class="r">
+					<image class="menu-icon-you" src="@/static/images/dayu.png" mode="aspectFill"></image>
+				</view>
+			</view>
+		</view>
+	</view>
+	<!-- <view class="menu-box ss-flex-col">
+		<view class="header-box">
+			<image class="header-bg"
+				src="https://zysc.fjptzykj.com:3000/shangcheng/eb9244a1f0662a699869d47287a477bd16147030ff25c9573395036192b86d91.png" />
+			<view class="ss-flex header-title">
+				<view class="title">功能专区</view>
+				<text class="cicon-forward"></text>
+			</view>
+		</view>
+		<view class="menu-list ss-flex ss-flex-wrap">
+			<view v-for="(item, index) in state.menuList" :key="index" class="item-box ss-flex-col ss-col-center"
+				@tap="sheep.$router.go(item.path)">
+				<image class="menu-icon ss-m-b-10" :src="sheep.$url.static(item.img)" mode="aspectFill"></image>
+				<view>{{ item.title }}</view>
+			</view>
+		</view>
+	</view> -->
+</template>
+
+<script setup>
+	import sheep from '@/sheep';
+	import {
+		reactive
+	} from 'vue';
+
+	const state = reactive({
+		menuListnew: [{
+				img: 'https://zysc.fjptzykj.com:3000/shangcheng/82255ab9cb8fa91b261a1976c81a7c761c34a8aa3d3fc12864b3b83158d22267.png',
+				title: '推广名片',
+				path: 'action:showShareModal',
+			},
+			{
+				img: 'https://zysc.fjptzykj.com:3000/shangcheng/3aca872c5c25923b883b98364ca7525bcb7d176cf89769bab429fed090c75adb.png',
+				title: '佣金明细',
+				path: '/pages/commission/wallet',
+			},
+			{
+				img: 'https://zysc.fjptzykj.com:3000/shangcheng/512aaaf15aeedc1fd5ad6dc14161d83a4c4ecee33ae2428986c8ecbf0c420fa7.png',
+				title: '分销订单',
+				path: '/pages/commission/order',
+			},
+			{
+				img: 'https://zysc.fjptzykj.com:3000/shangcheng/6b61f1357f2f5a4a211c0bb4bac3d85c6e85958e0bfd04d0045d6c83e98085b7.png',
+				title: '推广商品',
+				path: '/pages/commission/goods',
+			},
+			{
+				img: 'https://zysc.fjptzykj.com:3000/shangcheng/e488e0f84bd4da1edfe75ccfbcc16acf8c60073409f03406bb350573b43769a8.png',
+				title: '推广排行',
+				path: '/pages/commission/promoter',
+			},
+			{
+				img: 'https://zysc.fjptzykj.com:3000/shangcheng/28d6bf4595172ed0a1cdc693483eef018f7f1242be35106bb12ce3ca21940753.png',
+				title: '佣金排行',
+				path: '/pages/commission/commission-ranking',
+			},
+		],
+		menuList: [{
+				img: 'https://zysc.fjptzykj.com:3000/shangcheng/ec41e4f5b45c087232aab8d088019a1e9d781b9bde0f54ddbb18e90230b83255.png',
+				title: '我的团队',
+				path: '/pages/commission/team',
+			},
+			{
+				img: 'https://zysc.fjptzykj.com:3000/shangcheng/228c9cd847514f99ca1181b4d413c24e482ab46459a557e3b934facb32ab546d.png',
+				title: '佣金明细',
+				path: '/pages/commission/wallet',
+			},
+			{
+				img: 'https://zysc.fjptzykj.com:3000/shangcheng/bb763f93be24f6d5c8c2948e512b95597d748f576277cc2d91f452fb3741e5a3.png',
+				title: '分销订单',
+				path: '/pages/commission/order',
+			},
+			{
+				img: 'https://zysc.fjptzykj.com:3000/shangcheng/326f6fe148cd6c8328297731bd63674a3a86340f937dfd1a376e435e34b5073e.png',
+				title: '推广商品',
+				path: '/pages/commission/goods',
+			},
+			// {
+			//   img: 'https://zysc.fjptzykj.com:3000/shangcheng/fe729044c3c0874d93435151bb204dede3d1dfbc0e2d03d09e2f76534e7cb8ba.png',
+			//   title: '我的资料',
+			//   path: '/pages/commission/apply',
+			//   isAgentFrom: true,
+			// },
+			// todo @芋艿：邀请海报需要登录后的个人数据
+			{
+				img: 'https://zysc.fjptzykj.com:3000/shangcheng/f238f60d6e45080cdbbd294c344d3e2fc3a30c34ccb9345e931b0c5aa9e90645.png',
+				title: '邀请海报',
+				path: 'action:showShareModal',
+			},
+			// TODO @芋艿：缺少 icon
+			{
+				img: 'https://zysc.fjptzykj.com:3000/shangcheng/d6bc7dbec1333e554a4781cbfae023e590a555dfca12784615023ae43bd2bf46.png',
+				title: '推广排行',
+				path: '/pages/commission/promoter',
+			},
+			{
+				img: 'https://zysc.fjptzykj.com:3000/shangcheng/4332d64835bb4aedc05636950f7cd7dcbab085f0f72f42eee4d87799947a7108.png',
+				title: '佣金排行',
+				path: '/pages/commission/commission-ranking',
+			},
+		],
+	});
+</script>
+
+<style lang="scss" scoped>
+	.new-menu {
+		width: 100%;
+		background: white;
+
+		.new-menu-list {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			padding: 0 20px;
+
+			.new-menu-item {
+				display: flex;
+				flex-wrap: wrap;
+				width: 100%;
+				align-items: center;
+				justify-content: space-between;
+				margin-bottom:19px;
+				.l {
+					display: flex;
+					flex-wrap: wrap;
+					align-items: center;
+					width: 50%;
+					.menu-icon{
+						margin-right: 10px;
+					}
+				}
+
+				.r {
+					width: 4%;
+					display: flex;
+					align-items: center;
+				}
+			}
+		}
+	}
+
+	.menu-box {
+		margin: 0 auto;
+		width: 690rpx;
+		margin-bottom: 20rpx;
+		margin-top: 20rpx;
+		border-radius: 12rpx;
+		z-index: 3;
+		position: relative;
+	}
+
+	.header-box {
+		width: 690rpx;
+		height: 76rpx;
+		position: relative;
+
+		.header-bg {
+			width: 690rpx;
+			height: 76rpx;
+		}
+
+		.header-title {
+			position: absolute;
+			left: 20rpx;
+			top: 24rpx;
+		}
+
+		.title {
+			font-size: 28rpx;
+			font-weight: 500;
+			color: #ffffff;
+			line-height: 30rpx;
+		}
+
+		.cicon-forward {
+			font-size: 30rpx;
+			font-weight: 400;
+			color: #ffffff;
+			line-height: 30rpx;
+		}
+	}
+
+	.menu-list {
+		padding: 50rpx 0 10rpx 0;
+		background: #fdfae9;
+		border-radius: 0 0 12rpx 12rpx;
+	}
+
+	.item-box {
+		width: 25%;
+		margin-bottom: 40rpx;
+	}
+
+	.menu-icon {
+		width: 45rpx;
+		height: 45rpx;
+		background: #ffffff;
+		border-radius: 50%;
+	}
+	.menu-icon-you{
+		width: 48rpx;
+		height: 48rpx;
+	}
+
+	.menu-title {
+		font-size: 26rpx;
+		font-weight: 500;
+		color: #ffffff;
+	}
+</style>
\ No newline at end of file