hwnc/pagesA/pages/distribution/distribution.vue

<template>
	<view :class="[AppTheme]" class="distribution">
		<view class="ff bg-primary">

			<view class="b-money">
				<view class="b-money-l">
					<view class="money">
						￥{{money}}
					</view>
					<view class="b-keti">
						可提现金额
					</view>
				</view>
				<view class="b-money-r">
					<view class="" @click="navTo('/pagesA/pages/mypurse/withdraw/withdraw')">
						提现
					</view>
				</view>
			</view>

			<view class="b-yongjin">
				<view class="">
					<view class="b-yong">
						{{bc_money}}
					</view>
					<view class="b-zi">
						待收佣金
					</view>
				</view>
				<text class="line"></text>
				<view class="">
					<view class="b-yong">
						{{total_yj}}
					</view>
					<view class="b-zi">
						佣金总额
					</view>
				</view>
				<text class="line"></text>
				<view class="">
					<view class="b-yong">
						{{xxsub}}
					</view>
					<view class="b-zi">
						团队人数
					</view>
				</view>
			</view>
		</view>

		<view class="f-n">
			<view class="" @click="navTo('/pagesA/pages/mypurse/txinfo/txinfo')">
				<u-icon labelSize="13" label="提现明细" labelPos="bottom" :name="settingFile.root_img+'/static/app/imgs/mine/dis/19.png'" :color="primary" size="40">
				</u-icon>
			</view>

			<view class="" @click='goCode'>
				<u-icon labelSize="13" label="推广分享" labelPos="bottom" name="share-square" :color="primary" size="40">
				</u-icon>
			</view>

			<view class="" @click='goMyteam()'>
				<u-icon labelSize="13" label="我的团队" labelPos="bottom" :name="settingFile.root_img+'/static/app/imgs/mine/dis/20.png'" :color="primary" size="40">
				</u-icon>
			</view>

		</view>

		<view class="f-c">

			<view class="aui-info aui-margin-t-10 aui-padded-l-10 aui-padded-r-10"
				@click="goPolicies('/pagesA/pages/distribution/records/records')">
				<view class="aui-info-item">
					<image :src="settingFile.root_img+'/static/app/imgs/mine/dis/30.png'" class="aui-img-round" /><text
						class="alist">佣金记录</text>
					<image :src="settingFile.root_img+'/static/app/imgs/mine/dis/right.png'" class="img_l" alt="" />
				</view>
			</view>
			<view class="aui-info aui-margin-t-10 aui-padded-l-10 aui-padded-r-10"
				@click="goPolicies('/pagesA/pages/distribution/policy/policy')">
				<view class="aui-info-item">
					<image :src="settingFile.root_img+'/static/app/imgs/mine/dis/22.png'" class="aui-img-round" /><text
						class="alist">分销政策</text>
					<image :src="settingFile.root_img+'/static/app/imgs/mine/dis/right.png'" class="img_l" alt="" />
				</view>
			</view>
			<view class="aui-info aui-margin-t-10 aui-padded-l-10 aui-padded-r-10"
				@click="goPolicies('/pagesA/pages/distribution/extension/extension')">
				<view class="aui-info-item">
					<image :src="settingFile.root_img+'/static/app/imgs/mine/dis/31.png'" class="aui-img-round" /><text
						class="alist">推广记录</text>
					<image :src="settingFile.root_img+'/static/app/imgs/mine/dis/right.png'" class="img_l" alt="" />
				</view>
			</view>
		</view>
		<u-popup :show="show" round="12" mode="center">
			<view class="code">
				<image :src="code1" mode=""></image>
			</view>
		</u-popup>
		<admyself  :opshow="true"></admyself>
		<!-- 分享 -->
		<sharebox ref="sbox" v-if="sharedata" :data="sharedata"></sharebox>
	</view>
</template>

<script>
	// App/Fx/tjlog 	我的推广
	// App/Fx/fxlog		已收佣金
	// App/Fx/about		分销政策
	import mineApi from '@/api/mine/index';
	import tabbar from '@/components/tabbar/tabbar.vue';
	export default {
		data() {
			return {
				primary: this.$theme.primary,
				settingFile: getApp().globalData.siteinfo,
				isShow: false,
				uid: '',
				token: '',
				total_xxyj: 0,
				money: 0,
				bc_money: 0,
				xxsub: 0,
				nickname: '',
				imgurl: '',
				vipid: '',
				phone: '15539352763',
				show: false,
				code1: '',
				sharedata: null,
				total_yj: 0
			};
		},
		components: {
			tabbar
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url
				});
			},
			showOther: function() {
				if (this.isShow) {
					this.isShow = false;
				} else {
					this.isShow = true;
				}
			},
			handleCall() {
				//客服电话
				uni.makePhoneCall({
					phoneNumber: this.phone
				});
			},
			goPolicies: function(url) {
				//分销策略
				uni.navigateTo({
					url: url
				})
			},
			goCode: function() {
				this.$refs.sbox.opensharebox(this.sharedata);
			},
			goMyteam: function() {
				//一级用户
				uni.navigateTo({
					url: '/pagesA/pages/distribution/myteam/myteam?totalMoney' + this.total_xxyj
				})
			},
		},
		onLoad(options) {
			let that = this
			that.$bindid.getbindid(options, that.$store);
			that.$init_config(1, function(res) {
				that.sharedata = res.sharedata
			})
		},
		onShow() {
			this.vipid = uni.getStorageSync('userInfo').id
			var that = this;
			mineApi.fxindex().then(ret => {
				that.total_yj = ret.data.total_yj; //佣金总金额
				that.money = ret.data.money; //提现金额
				that.bc_money = ret.data.bc_money; //待收佣金
				that.xxsub = ret.data.xxsub; //人数
				that.nickname = ret.data.nickname; //名字
				that.imgurl = ret.data.headimgurl; //头像
				that.phone = ret.data.phone; //头像
			})
		},
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		width: 100%;
	}

	.code {
		height: 800rpx;
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		background: #fff;

		image {
			height: 80%;
		}
	}

	.distribution {
		width: 100%;
		height: 100%;
		background: #f1f1f1;
	}

	.alist {
		font-size: 28rpx;
	}

	.aui-info-item {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
		overflow: hidden;
		padding: 20rpx 0rpx;
		border-bottom: 1rpx solid #f1f1f1;
	}

	.b-money {
		width: 100%;
		height: 170rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 37rpx;
		box-sizing: border-box;

		.b-money-l {
			width: 100%;

			.money {
				font-size: 50rpx;
				color: #fff;
				margin-bottom: 23rpx;
			}

			.b-keti {
				color: #fff;
				font-size: 26rpx;
			}
		}

		.b-money-r {
			width: 100%;
			display: flex;
			justify-content: flex-end;

			view {
				border: 1px solid #fff;
				height: 45rpx;
				width: 120rpx;
				line-height: 45rpx;
				padding:10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50rpx;
				margin-top: 30rpx;
				margin-left: 34rpx;
				color: #fff;
			}
		}
	}

	.b-yongjin {
		width: calc(100% - 10rpx);
		margin: 0 auto;
		display: flex;
		justify-content: space-between;

		text {
			display: block;
			width: 1rpx;
			height: 30rpx;
			background-color: #f1f1f1;
			margin-top: 30rpx;
		}

		view {
			flex: 1;
			text-align: center;
			color: #fff;

			.b-yong {
				margin-bottom: 20rpx;
				font-size: 38rpx;
			}

			.b-zi {
				font-size: 22rpx;
			}
		}
	}

	.f-n {
		width: 100%;
		height: 190rpx;
		display: flex;
		background: #FFFFFF;
		align-items: center;
		margin-bottom: 15rpx;

		>view {
			width: 100%;
			text-align: center;

			.f-zi {
				width: 100%;
				margin-top: 15rpx;
				font-size: 26rpx;
			}

			.icon {
				width: 65rpx !important;
				height: 65rpx !important;
				margin: 0 auto;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.aui-bar.aui-bar-nav {
		position: fixed;
		top: 0;
		width: 100%;
		background-color: #FE5828;
	}

	.aui-img-round {
		width: 50rpx;
		height: 50rpx;
		margin-left: 20rpx;
		margin-right: 25rpx;
	}

	.img_l {
		width: 45rpx;
		height: 45rpx;
		position: absolute;
		right: 10rpx;
	}

	.ff {
		height: 370rpx;
		width: 100%;
		padding-top: 80rpx;
		box-sizing: border-box;
	}

	.photo {
		padding-top: 80rpx;
		font-size: 34rpx;
		font-weight: 800;
		color: rgb(255, 255, 255);
		text-align: center;
	}

	.photo image {
		margin: 0 auto;
		margin-top: 50rpx;
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
	}

	.photo .name {
		margin-top: 18rpx;
		color: white;
	}

	.ccc {
		margin-top: 20rpx;
	}

	.bg-b {
		width: calc(100% - 132rpx);
		margin: 0 auto;
		margin-top: 10rpx;
		/*margin-top: 20px;*/
		display: flex;
		justify-content: space-between;
	}

	.bg-b view {
		text-align: center;
	}

	.bg-b view view {
		margin-top: 20upx;
		font-size: 30rpx;
		font-weight: bold;
		color: white;
	}

	.f-c {
		background-color: #ffffff;
	}

	.aui-info text {
		font-size: 27rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}
</style>


<!-- 佣金記錄  推广记录 -->