junzitang/pagesT/Distribution/Distribution.vue

<template>
	<view class="Distribution">
		<view class="top-view">
			<view class="lever-view clearfix">
				<view class="lever-view-left float_left">
					<image class="user-avator" :src="avator" mode="aspectFill"></image>
					<text>{{ businessman_detail.gradeName }}</text>
				</view>
				<view class="float_right ew-code" @click="goPage('/pagesT/Distribution/Poster')"><text class="ibonfont ibonerweima-copy"></text></view>
			</view>
			<view class="cash-out clearfix">
				<view class="float_left">
					<view class="cash-tit">{{ text_set.commission_w || '可提现佣金' }}(元)</view>
					<view class="cash-num">{{ businessman_detail.balance || 0 }}</view>
				</view>
				<view class="float_right" @click="goPage('/pagesT/Distribution/Withdrawal?balance=' + (businessman_detail.balance || 0) + '&id=' + businessman_detail.id)">
					<view class="cash-btn">{{ text_set.withdrawal || '提现' }}</view>
				</view>
			</view>
			<view class="money-num">
				<view class="money-num-li" @click="goAddUpMoney">
					<text>{{ text_set.commission_c || '累计佣金' }}</text>
					<view class="money-num-text">
						<text class="rmb-icon">¥</text>
						{{ businessman_detail.totalMoney || 0 }}
					</view>
				</view>
				<view class="money-num-li" @click="goPage('/pagesT/Distribution/NotRecorded?waitMoney=' + businessman_detail.waitMoney || 0)">
					<text>{{ text_set.commission_r || '待入账佣金' }}</text>
					<view class="money-num-text">
						<text class="rmb-icon">¥</text>
						{{ businessman_detail.waitMoney || 0 }}
					</view>
				</view>
			</view>
		</view>
		<view class="handel-ul">
			<view class="handel-li clearfix" @click="goPage('/pagesT/Distribution/DOrder?id=' + businessman_detail.id)">
				<view class="float_left icon-left-view"><text class="ibonfont ibondingdan icon-left" style="color:#f46248"></text></view>
				<view class="float_left clearfix handel-right">
					<text class="float_left">{{ text_set.distribution_order || '分销订单' }}</text>
					<view class="float_right handel-right-r">
						<text>{{ businessman_detail.statistics.orderNum || 0 }}笔</text>
						<text class="ibonfont ibonjinru"></text>
					</view>
				</view>
			</view>
			<view class="handel-li clearfix" @click="goPage('/pagesT/Distribution/MyGroup?id=' + businessman_detail.id)">
				<view class="float_left icon-left-view"><text class="ibonfont ibonicon-test icon-left" style="color:#f46248"></text></view>
				<view class="float_left clearfix handel-right">
					<text class="float_left">{{ text_set.self || '我的团队' }}</text>
					<view class="float_right handel-right-r">
						<text>{{ businessman_detail.statistics.sub || 0 }}人</text>
						<text class="ibonfont ibonjinru"></text>
					</view>
				</view>
			</view>
			<view class="handel-li clearfix" @click="goPage('/pagesT/Distribution/IncomeDetails?id=' + businessman_detail.id)">
				<view class="float_left icon-left-view"><text class="ibonfont ibontixian icon-left" style="color:#46c09b"></text></view>
				<view class="float_left clearfix handel-right">
					<text class="float_left">{{ text_set.withdrawal_m || '提现明细' }}</text>
					<view class="float_right handel-right-r"><text class="ibonfont ibonjinru"></text></view>
				</view>
			</view>
			<view class="handel-li clearfix" @click="goPage('/pagesT/Distribution/GradeDescription?gradeName=' + businessman_detail.gradeName)">
				<view class="float_left icon-left-view"><text class="ibonfont ibonhuiyuan icon-left" style="color:#2d5dc9"></text></view>
				<view class="float_left clearfix handel-right">
					<text class="float_left">等级说明</text>
					<view class="float_right handel-right-r"><text class="ibonfont ibonjinru"></text></view>
				</view>
			</view>
			<view class="handel-li clearfix" @click="goPage('/pagesT/Distribution/Ranking?id=' + businessman_detail.id)">
				<view class="float_left icon-left-view"><text class="ibonfont ibondianshang icon-left" style="color:#fed261"></text></view>
				<view class="float_left clearfix handel-right">
					<text class="float_left">排行榜</text>
					<view class="float_right handel-right-r"><text class="ibonfont ibonjinru"></text></view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
import { getAvator } from '@/access/common.js';
export default {
	data() {
		return {
			isLoding: false,
			text_set: {},
			avator: '',
			businessman_detail: {
				statistics: {}
			}
		};
	},
	onShareAppMessage() {
		return {
			title: this.$store.state.baseSet.shop,
			path: '/pages/index/index?businessmanId=' + this.$store.state.userStatus.id,
			imageUrl: this.$store.state.baseSet.images,
			success: res => {
				console.log(res);
			}
		};
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.getInfoBusinessman();
	},
	onLoad() {
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#fe582e'
		});
		this.text_set = this.$store.state.distributionTextSet;
		this.avator = getAvator();
	},
	onShow() {
		this.getInfoBusinessman();
	},
	methods: {
		goAddUpMoney() {
			this.goPage(
				`/pagesT/Distribution/AddUpMoney?id=${this.businessman_detail.id}&totalMoney=${this.businessman_detail.totalMoney || 0}&waitMoney=${this.businessman_detail
					.waitMoney || 0}&balance=${this.businessman_detail.balance || 0}&auditWithdraw=${this.businessman_detail.auditWithdraw || 0}&waitAuditWithdraw=${this
					.businessman_detail.waitAuditWithdraw || 0}`
			);
		},
		// 分销商详情
		 getInfoBusinessman() {
			this.$u.api.getInfoBusinessman().then(res=>{
				uni.stopPullDownRefresh();
				this.businessman_detail = res.data;
			});

		}
	}
};
</script>

<style lang="scss">
body {
	background: $page-color-base;
}
.top-view {
	color: #ffffff;
	background-color: #fe582e;
	.lever-view {
		padding: 30upx 24upx;
		.lever-view-left {
			font-size: 22upx;
			font-weight: bold;
			line-height: 38upx;
			height: 42upx;
			padding-right: 16upx;
			border-radius: 22upx;
			background-color: rgba($color: #ffffff, $alpha: 0.3);
			text {
				transform: translateY(4upx);
				display: inline-block;
			}
			.user-avator {
				margin-right: 8upx;
				width: 42upx;
				height: 42upx;
				border-radius: 100%;
				vertical-align: middle;
				transform: translateY(-2upx);
			}
		}
		.ew-code {
			line-height: 36upx;
			height: 36upx;
			opacity: 0.5;
			.ibonerweima-copy {
				font-size: 48upx;
			}
		}
	}
	.cash-out {
		padding: 0 24upx 30upx;
		.cash-tit {
			font-size: 24upx;
		}
		.cash-num {
			font-size: 60upx;
			font-weight: bold;
			padding-top: 20upx;
		}
		.cash-btn {
			margin-top: 76upx;
			font-size: 24upx;
			width: 146upx;
			height: 46upx;
			line-height: 46upx;
			text-align: center;
			background-color: #ffffff;
			border-radius: 40upx;
			color: #fe582e;
		}
	}
	.money-num {
		background-color: #f03b28;
		display: flex;
		padding: 34upx 0;
		.money-num-li {
			flex: 2;
			font-size: 24upx;
			padding-left: 24upx;
			&:first-child {
				border-right: 1px solid rgba($color: #ffffff, $alpha: 0.3);
			}

			.money-num-text {
				font-size: 32upx;
				margin-left: 16upx;
				display: inline-block;
				transform: translateY(4upx);
				.rmb-icon {
					font-size: 24upx;
					margin-right: 6upx;
				}
			}
		}
	}
}
.handel-ul {
	.handel-li {
		background-color: #ffffff;
		padding-left: 20upx;
		line-height: 100upx;
		font-size: 28upx;
		.icon-left-view {
			line-height: 100upx;
			height: 100upx;
			.icon-left {
				font-size: 36upx;
				margin-right: 30upx;
			}
		}

		.handel-right {
			width: 660upx;
			border-bottom: 1px solid #f5f5f5;
			.handel-right-r {
				color: #999999;
				padding-right: 20upx;
				.ibonjinru {
					font-size: 28upx;
					margin-left: 20upx;
				}
			}
		}
		&:last-child {
			.handel-right {
				border-bottom: 0 none;
			}
		}
	}
}
</style>