zhapp/pages/tool/distributionCenter.vue

<template>
	<view class="page">
		<!-- 佣金总计 -->
		<view class="commissionTotal">
			<view class="user-info dis a-c j-s ">
				<view class="dis a-c">
					<image src="/static/image/avatar.png" mode=""></image>
					<text class="name">某某某</text>
				</view>
				<text class="time">2025年12月1日加入</text>
			</view>
			<view class="totals dis j-s">
				<view class="item  dis f-c a-c">
					<text>￥<text class="sum">{{distributionInfo.totalAmount || 0 }}</text> </text>
					<text>累计佣金</text>
				</view>
				<view class="item  dis f-c a-c ">
					<text>￥<text class="sum">{{distributionInfo.pendingAmount || 0 }}</text> </text>
					<text>待结算</text>
				</view>
				<view class="item  dis f-c a-c">
					<text>￥<text class="sum">{{distributionInfo.returnAmount || 0 }}</text> </text>
					<text>退回佣金</text>
				</view>
			</view>
		</view>
		<!-- 分类统计 -->
		<view class="categoryStatistics mt-2 dis a-c j-s">
			<view class="item" @click="toPage('distributeTeam')">
				<view class="title dis a-c j-c ">
					团队管理
				</view>
				<view class="content dis a-c f-c">
					<view class=" totalCount dis a-c ">
						<text class="sum">{{distributionInfo.teamNum || 0}}</text>
						<text class="unit">人</text>
					</view>
					<view class="today  dis a-c mt-1 ">
						<text>今日新增</text>
						<image src="/static/image/income.png" mode=""></image>
						<text class="sum">{{distributionInfo.todayNewNum || 0}}</text>
						<text class="unit">人</text>
					</view>
				</view>
			</view>
			<view class="item" @click="toPage('distributionOrders')">
				<view class="title dis a-c j-c " style="background: #F6FBE5;">
					分销订单
				</view>
				<view class="content dis a-c f-c">
					<view class=" totalCount dis a-c ">
						<text class="sum">{{distributionInfo.distributionOrderNum || 0}}</text>
						<text class="unit">笔 </text>
					</view>
					<view class="today  dis a-c mt-1 ">
						<text>今日新增</text>
						<image src="/static/image/income.png" mode=""></image>
						<text class="sum">{{distributionInfo.todayDistributionOrderNum || 0}}</text>
						<text class="unit">笔</text>
					</view>
				</view>
			</view>
			<view class="item" @click="toPage('distributionOrders')">
				<view class="title dis a-c j-c ">
					保费
				</view>
				<view class="content dis a-c f-c">
					<view class=" totalCount dis a-c ">
						<text class="sum">{{distributionInfo.totalPremium / 10000 || 0}}</text>
						<text class="unit">万</text>
					</view>
					<view class="today  dis a-c mt-1 ">
						<text>今日新增</text>
						<image src="/static/image/income.png" mode=""></image>
						<text class="sum">{{distributionInfo.todayPremium / 10000 || 0}}</text>
						<text class="unit">万</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 佣金收益 等级划分 -->
		<view class="commissionEarnings mt-2 dis  j-s a-c " @click="orderDetails(1)">
			<!-- 今日收益 -->
			<view class="today-earnings dis f-c ">
				<view class="dis a-c">
					<image src="/static/image/tool/level1.png" mode=""></image>
					<text class="title">一级佣金收益</text>
				</view>
				<view class="dis a-c mt-1">
					<text class="today">今日</text>
					<text class="sum">+{{distributionInfo.todayFirstLevelCommission || 0}}</text>
				</view>
			</view>
			<!-- 总收益 -->
			<view class="total-earnings dis a-c ">
				<text class="mr-2">￥{{distributionInfo.firstLevelCommission || 0}}</text>
				<u-icon name="arrow-right" color="#666666" size="16" bold></u-icon>
			</view>
		</view>
		<view class="commissionEarnings mt-2 dis  j-s a-c " @click="orderDetails(2)">
			<!-- 今日收益 -->
			<view class="today-earnings dis f-c ">
				<view class="dis a-c">
					<image src="/static/image/tool/level2.png" mode=""></image>
					<text class="title">二级佣金收益</text>
				</view>
				<view class="dis a-c mt-1">
					<text class="today">今日</text>
					<text class="sum">+{{distributionInfo.todaySecondLevelCommission || 0}}</text>
				</view>
			</view>
			<!-- 总收益 -->
			<view class="total-earnings dis a-c ">
				<text class="mr-2">￥{{distributionInfo.secondLevelCommission || 0}}</text>
				<u-icon name="arrow-right" color="#666666" size="16" bold></u-icon>
			</view>
		</view>
		<view class="commissionEarnings mt-2 dis  j-s a-c " @click="orderDetails(3)">
			<!-- 今日收益 -->
			<view class="today-earnings dis f-c ">
				<view class="dis a-c">
					<image src="/static/image/tool/level3.png" mode=""></image>
					<text class="title">三级佣金收益</text>
				</view>
				<view class="dis a-c mt-1">
					<text class="today">今日</text>
					<text class="sum">+{{distributionInfo.todayThirdLevelCommission || 0}}</text>
				</view>
			</view>
			<!-- 总收益 -->
			<view class="total-earnings dis a-c ">
				<text class="mr-2">￥{{distributionInfo.thirdLevelCommission || 0 }}</text>
				<u-icon name="arrow-right" color="#666666" size="16" bold></u-icon>
			</view>
		</view>
		<!-- 邀请入口 -->
		<view class="inviteEntrance mt-2">
			<image src="/static/image/my/inviteEntrance.png" mode=""
				@click="showLargeImage('/static/image/my/inviteDistribution.png')"></image>
		</view>
		<!-- 大图预览弹窗 -->
		<u-overlay :show="showLargeImageShow" @click="showLargeImageShow = false" :opacity="0.6" class="u-overlay">
			<view class="close-btn dis a-c j-c" @click="showLargeImageShow = false">×</view>
			<view class="panelcanvas " id="panelcanvas">
				<view class="posterview dis f-c" @tap.stop>
					<image class="promoImage" :src="sctiveimg" mode=""></image>
					<view class="userinfo dis a-c j-s">
						<view class="dis a-c">
							<image class="avatar" src="/static/image/avatar.png" mode=""></image>
							<text class="ml-3">扫码成为分销员</text>
						</view>
						<image :src="qrcodeImg" class="qrcodeImg" mode="widthFix" lazy-load></image>
					</view>
				</view>
			</view>
			<!-- 分享操作栏 -->
			<view class="share-prop" @tap.stop>
				<view class="header-title dis a-c j-c">分享到</view>
				<view class="foo-btn dis a-c j-s">
					<view class="interact-item dis f-c a-c" @click="saveImage">
						<image src="/static/icon/tool/saveImg.png" mode=""></image>
						<text>保存到相册</text>
					</view>
					<view class="interact-item dis f-c a-c" @click="sendPayCode">
						<image src="/static/icon/tool/wx.png" mode=""></image>
						<text>微信</text>
					</view>
					<view class="interact-item dis f-c a-c" @click="shareMoments">
						<image src="/static/icon/tool/friendsCircleLogo.png" mode=""></image>
						<text>朋友圈</text>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import QR from "@/common/wxqrcode.js"
	import {
		pathToBase64,
		base64ToPath
	} from '@/common/pdf.js'
	import {
		turnBase64Image
	} from '@/plugins/utils.js';
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				showLargeImageShow: false, //大图预览弹窗
				sctiveimg: "", // 放大显示的图片
				shareImage: "", //分享图片
				qrcodeImg: "", //二维码图片
				imageCache: {}, // 缓存已转换的Base64图片
				distributionInfo: {},
				Info: {}
			}
		},
		onShow() {

		},
		onLoad() {
			this.getUserInfo() //获取用户信息

			this.getDistribution();
			this.qrcodeImg = QR.createQrCodeImg(this.$base.h5BaseUrl + `/#/pages/registr/h5Registr?systemCode=${this
				.system_code}&page=分销员注册&info=${JSON.stringify({
					name: this.Info.name,
					infoId: this.Info.infoId,
					id: this.Info.id,
					headSculpture: this.Info.headSculpture,
					deptName: this.Info.deptName,
				})}`, {
				size: parseInt(300), //二维码大小
			})

		},
		computed: {
			...mapState(['userInfo', 'system_code'])
		},
		methods: {
			async getUserInfo() {
				let res = await this.$http.get('/appUser/userInfoGet'); //获取人员信息
				if (res.code == '200') {
					this.Info = res.data
				}
			},
			aaaa() {
				uni.navigateTo({
					url: `/pages/registr/h5Registr?systemCode=${this.system_code}&page=分销员注册`
				})
			},
			async orderDetails(value) {
				uni.navigateTo({
					url: `/pages/tool/distributionOrders?level=` + value,
				})
			},
			//数据格式化
			numberFormat(value) {
				return (value).toLocaleString('en-US');
			},
			async getDistribution() {
				let res = await this.$http.post('/sysDistributionSetting/distributionCenter');
				if (res.code == 200) {
					this.distributionInfo = res.data;
				}
			},
			// 显示大图（带缓存优化）
			async showLargeImage(item) {
				try {
					if (!this.imageCache[item]) {
						this.imageCache[item] = await turnBase64Image(item);
					}
					this.sctiveimg = this.imageCache[item];
					this.showLargeImageShow = true;
					setTimeout(() => {
						this.canvasImage.generateImage()
					}, 1000);
				} catch (error) {
					console.error("图片转换失败:", error);
					uni.showToast({
						title: "图片加载失败",
						icon: "none"
					});
				}
			},
			//分销页面跳转
			toPage(pageName) {
				uni.navigateTo({
					url: `/pages/tool/${pageName}`
				})
			},
			//发送到微信
			sendPayCode() {
				if (this.shareImage) {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 2,
						imageUrl: this.shareImage
					})
				}
			},
			//发送到朋友圈
			shareMoments() {
				if (this.shareImage) {
					uni.share({
						provider: "weixin",
						scene: "WXSceneTimeline",
						type: 2,
						imageUrl: this.shareImage
					})
				}
			},
			//保存图片
			saveImage() {
				base64ToPath(this.shareImage)
					.then(path => {
						uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
							filePath: path, //图片文件路径
							success: function() {
								uni.showToast({
									title: '已保存到相册',
									icon: 'none',
								});
							},
							fail: function(e) {
								uni.showToast({
									title: '图片保存失败',
									icon: 'none',
								});
							}
						});
					})
			},
			//页面截图转路径
			receiveRenderData(val) {
				this.shareImage = val.replace(/[\r\n]/g, ''); // 去除base64位中的空格
			},
			showLoading() {
				uni.showLoading({
					title: '正在生成图片'
				});
			},
			hideLoading() {
				uni.hideLoading();
			},
		}
	}
</script>
<script module="canvasImage" lang="renderjs">
	import html2canvas from 'html2canvas'
	export default {
		data() {
			return {

			}
		},
		mounted() {

		},
		methods: {
			generateImage() {
				setTimeout(() => {
					this.$ownerInstance.callMethod('showLoading')
					const dom = document.getElementById('panelcanvas') // 需要生成图片内容的 dom 节点
					html2canvas(dom, {
						width: dom.clientWidth, //dom 原始宽度
						height: dom.clientHeight,
						scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
						scrollX: 0,
						useCORS: true, //支持跨域
						// allowTaint: false,
						scale: 2, // 设置生成图片的像素比例，默认是1，如果生成的图片模糊的话可以开启该配置项
					}).then((canvas) => {
						console.log(canvas);
						// 生成成功
						this.$ownerInstance.callMethod('hideLoading')
						this.$ownerInstance.callMethod('receiveRenderData', canvas.toDataURL('image/png'))
					}).catch(err => {
						// 生成失败 弹出提示弹窗
						this.$ownerInstance.callMethod('_errAlert', `【生成图片失败，请重试】${err}`)
					})
				}, 300)
			}
		},
	}
</script>
<style lang="scss" scoped>
	.page {
		background-color: #f8f8f8;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		height: calc(100vh - 88rpx);
	}

	.commissionTotal {
		padding: 10rpx 6rpx 6rpx;
		box-sizing: border-box;
		background: #FDEA48;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.user-info {
			padding: 0 14rpx;
			box-sizing: border-box;

			image {
				width: 54rpx;
				height: 54rpx;
			}

			.name {
				font-size: 32rpx;
				color: #1f1f1f;
				font-weight: bold;
				margin-left: 16rpx;
			}

			.time {
				font-size: 22rpx;
				color: #999;
			}
		}

		.totals {
			margin-top: 8rpx;
			padding: 20rpx 24rpx;
			box-sizing: border-box;
			background: linear-gradient(88deg, #FFFFFF 0%, rgba(255, 255, 255, 0.9) 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: auto;
			column-gap: 70rpx;

			.item {
				>:first-child {
					font-size: 24rpx;
					color: #333;
					font-weight: bold;

					.sum {
						font-size: 36rpx;
					}
				}

				>:last-child {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}

	.categoryStatistics {
		width: 100%;

		.item {
			width: 29%;
			padding: 2rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.title {
				height: 50rpx;
				background: #FFF6EB;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				border: 2rpx solid #FFFFFF;
				font-size: 24rpx;
				color: #834A11;
			}

			.content {
				padding: 10rpx 0 20rpx;
				box-sizing: border-box;



				.totalCount {
					.sum {
						font-size: 36rpx;
						color: #333;
						font-weight: bold;
						line-height: 1;
					}

					.unit {
						font-size: 24rpx;
						color: #999;
						margin-left: 4rpx;
					}
				}

				.today {
					font-size: 22rpx;
					color: #999;

					.sum {
						color: #333;
					}

					image {
						width: 24rpx;
						height: 24rpx;
						margin: 0 2rpx;
					}
				}
			}
		}

		.item:last-child {
			width: 36%;

			.title {
				background: #EBFBF7;
			}
		}

	}

	//佣金收益
	.commissionEarnings {
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 30rpx;
		box-sizing: border-box;

		.today-earnings {

			image {
				width: 40rpx;
				height: 36rpx;

			}

			.title {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
				margin-left: 4rpx;
			}

			.today {
				font-size: 26rpx;
				color: #999;
			}

			.sum {
				font-size: 26rpx;
				color: #FF4545;
			}
		}

		.total-earnings {
			text {
				font-size: 36rpx;
				color: #333;
				font-weight: bold;
			}
		}

	}

	//分销入口
	.inviteEntrance {
		image {
			width: 100%;
			height: 146rpx;
			border-radius: 20rpx;
		}
	}

	//海报弹窗样式
	/* 分享操作栏 */
	.share-prop {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;

		.header-title {
			padding: 24rpx;
			font-size: 36rpx;
			color: #333;
			font-weight: bold;
			border-bottom: 1rpx solid #eee;
		}

		.foo-btn {
			padding: 30rpx 128rpx;

			.interact-item {
				image {
					width: 88rpx;
					height: 88rpx;
					margin-bottom: 10rpx;
				}

				text {
					font-size: 24rpx;
					color: #333;
				}
			}
		}
	}

	// 右上角关闭按钮
	.close-btn {
		position: absolute;
		width: 50rpx;
		height: 50rpx;
		right: 20rpx;
		top: 20rpx;
		font-size: 36rpx;
		line-height: 0.8;
		font-weight: bold;
		z-index: 10;
		background-color: #fff;
		border-radius: 50%;
	}

	/* 大图预览弹窗 */
	.posterview {
		margin: 20% 80rpx 0;
		background-color: #fff;
		border-radius: 10rpx;
		position: relative;



		.promoImage {
			width: 100%;
			height: 860rpx;
			border-radius: 10rpx 10rpx 0 0;
		}

		.userinfo {
			padding: 25rpx 40rpx;

			.avatar {
				width: 76rpx;
				height: 76rpx;
			}

			.qrcodeImg {
				width: 100rpx;
				height: 100rpx;
			}

			text {
				font-size: 28rpx;
				color: #333;
			}

			.panelcanvas {
				position: relative;


			}

		}
	}
</style>