serviceHome-uniapp-241015/service-uniapp-client/pages/mine/distribution.vue

<template>
	<view class="distribution">
		<mNavbar title="分销代理" :leftClick="leftClick" />

		<view class="box">
			<view class="box1" />

			<view class="content">
				<view class="content-box">
					<view class="content-box1">
						<view>可用余额（元）</view>
						<view>累计提现</view>
						<view>累积收益（元）</view>
					</view>
					<view class="content-box2">
						<view>￥{{ agentFlow.use_money }}</view>
						<view>￥{{ agentFlow.lei_give }}</view>
						<view>￥{{ agentFlow.lei_set }}</view>
					</view>
					<view class="content-box3">
						<view @click="toNodes">
							<text>粉丝</text>
						</view>
						<view @click="toWithdraw">
							<text>提现</text>
						</view>
						<view @click="showQrcode">
							<text>二维码</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<van-tabs v-model:active="active" @change="tagChange">
			<van-tab v-for="(item,index) in tabs" :key="index" :title="item.title"></van-tab>
		</van-tabs>

		<view class="tab-box">
			<view class="tab-box1" v-if="agentFlow.pageList && agentFlow.pageList.total">
				<van-cell center border :title="item.title" v-for="(item, index) in agentFlow.pageList.records"
					:value="x[item.type] + item.money" :label="item.createTime" />
			</view>
			<van-empty v-else description="暂无数据" image="/static/ms/empty.png" />
		</view>

		<van-overlay :show="show" @click="show = false" z-index="999999">
			<div style="display: flex;justify-content: center;
			height: 100%;align-items: center;">
				<placard ref="placard" :userInfo="userInfo"></placard>
			</div>
		</van-overlay>
	</view>
</template>

<script>
	import mNavbar from '@/components/base/m-navbar.vue'
	import placard from '@/components/placard.vue'
	export default {
		components: {
			mNavbar,
			placard
		},
		data() {
			return {
				imageUrl: '',
				show: false,
				agentFlow: {},
				x: ['+', '-', '+'],
				type: 0,
				active : 0,
				tabs : [
					{ title : '费用明细' },
					{ title : '提现记录' },
					{ title : '收益记录' }
				],
				userInfo : {},
			}
		},
		onShow() {
			this.getAgentFlow()
			this.getUserInfo()
		},
		methods: {
			//获取用户信息
			getUserInfo() {
				this.$api('getUserInfo', {}, res => {
					if (res.code == 200) {
						this.userInfo = res.result;
					}
				})
			},
			getAgentFlow() {
				this.$api('getAgentFlow', {
					type: this.type
				}, res => {
					if (res.code == 200) {
						this.agentFlow = res.result
					}
				})
			},
			toNodes() {
				uni.navigateTo({
					url: '/pages/mine/nodes'
				})
			},
			leftClick() { //返回个人中心
				uni.switchTab({
					url: '/pages/index/center'
				})
			},
			showQrcode() {
				this.show = true
				// this.$api('showQrcode', {}, res => {
				// 	if (res.code == 200) {
				// 		this.imageUrl = res.result
				// 	}
				// })
				setTimeout(() => {
					this.$refs.placard.draw()
				})
			},
			wxshare() {
				window.jWeixin.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  
					appId: 'wxe934cebcbc89d869', // 必填，公众号的唯一标识  
					// timestamp: res.data.timestamp, // 必填，生成签名的时间戳  
					// nonceStr: res.data.nonceStr, // 必填，生成签名的随机串  
					// signature: res.data.signature, // 必填，签名，见附录1  
					// surl: res.data.surl, //自己添加的，debug为true的时候可以网页打印出对应的URL是否正确  
					jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"]
				});
				window.jWeixin.ready(() => {
					//自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
					window.jWeixin.updateAppMessageShareData({
						title: '邀请新用户', // 分享标题
						desc: "邀请新用户，成为你的粉丝", // 分享描述
						link: "http://tairoudj.natapp1.cc", // 分享链接
						imgUrl: res.result, // 分享图标
						success: res => {
							//点击分享时提示用户分享图，
							this.wxsharetip = true
						},
						cancel: function() {
							// 用户取消分享后执行的回调函数  
						}
					});
					//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）  
					window.jWeixin.updateTimelineShareData({
						title: '标题', // 分享标题                                  
						link: "http://tairoudj.natapp1.cc", // 分享链接  
						imgUrl: res.result, // 分享图标                                
						success: res => {
							//点击分享时提示用户分享图，
							this.wxsharetip = true
						},
						cancel: function() {
							// 用户取消分享后执行的回调函数  
						}
					});
				})
			},
			tagChange(index) { //选中标签发生改变
				this.type = index;
				this.getAgentFlow()
			},
			toWithdraw() { //跳转充值页面
				uni.navigateTo({
					url: '/pages/mine/withdraw'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.distribution {
		background-color: #f3f3f3;
		min-height: 100vh;

		.box {
			position: relative;
			width: 100%;
			height: 175px;
			background-color: #fff;

			.box1 {
				height: 100px;
				background: linear-gradient(to right, #ecb978, #ffe6ed);
			}

			.content {
				position: absolute;
				display: flex;
				justify-content: space-around;
				width: 94%;
				height: 140px;
				background-color: #F0F0F0;
				top: 20px;
				left: 3%;
				z-index: 9;
				border-radius: 10px;
				box-shadow: 0px 1px 7px 1px #6e300955;

				.content-box {
					display: flex;
					width: 94%;
					height: 94%;
					flex-direction: column;
					align-items: self-end;

					.content-box1 {
						display: flex;
						width: 100%;
						height: 60px;
						justify-content: center;
						align-items: center;

						view {
							width: 200rpx;
							display: flex;
							justify-content: space-around;
						}
					}

					.content-box2 {
						display: flex;
						width: 100%;
						height: 60px;
						justify-content: center;
						align-items: center;

						view {
							width: 200rpx;
							display: flex;
							justify-content: space-around;
							color: #6e3009;
							font-size: 18px;

						}
					}

					.content-box3 {
						display: flex;
						width: 100%;
						height: 60px;
						justify-content: center;
						align-items: center;

						view {
							width: 200rpx;
							display: flex;
							justify-content: space-around;
							align-items: center;
						}

						text {
							display: inline-block;
							padding: 5px 20px;
							text-align: center;
							border: 1px solid #6e3009;
							color: #6e3009;
							border-radius: 5px;

						}
					}
				}
			}
		}

		.tab-box {
			width: 96%;
			margin-top: 10px;
			margin-left: 2%;
			background-color: #fff;
			border-radius: 10px;
			overflow: hidden;

			.tab-box1 {
				margin-top: 10px;
			}
		}

	}
</style>