reservation-uniapp-250509/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"></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 : '收益记录' }
				]
			}
		},
		onShow() {
			this.getAgentFlow()
			this.$store.commit('getUserInfo')
		},
		methods: {
			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()
				})
			},
			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, #4899a6, #6fc6ad);
			}

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

				.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: #4C9FA6;
							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 #96C8CB;
							color: #76B7BA;
							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>