MeiMeiZhuan/pages/user/spread.vue

<template>
	<view class="conteiner" style="height: 100%;">
		<view class="img"><image src="https://mmz.liuniu946.com/statics/img/img02.png"></image></view>
		<view class="spread-content">
			<!-- #ifndef MP -->
			<view class="spread-header">
				<!-- <view class="box-bg">
					
				</view> -->
				<view class="return" @click="switchTab('/pages/user/user')"><image src="../../static/img/img03.png"></image></view>
				<view class="spread-title">我的推广</view>
			</view>
			<!-- #endif -->
			<view class="current-money">当前佣金</view>
			<view class="money">￥{{ money | getMoneyStyle }}</view>
		</view>

		<view class="spread-box">
			<!-- pages/user/share -->
			<!-- #ifndef APP-PLUS -->
			<navigator class="box-item" url="/pages/user/ShareIndex">
				<view class="box-bg"><image src="../../static/img/erweima.png"></image></view>
				<view class="box-info">邀请好友</view>
			</navigator>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view class="box-item" @click="shareMp">
				<view class="box-bg"><image src="../../static/img/erweima.png"></image></view>
				<view class="box-info">邀请好友</view>
			</view>
			<!-- #endif -->
			<navigator class="box-item" url="/pages/extension/extension">
				<view class="box-bg"><image class="img" src="https://mmz.liuniu946.com/statics/img/team.png"></image></view>
				<view class="box-info">我的团队</view>
			</navigator>
			<navigator class="box-item" url="/pages/award/award">
				<view class="box-bg"><image src="../../static/img/detaile.png"></image></view>
				<view class="box-info">佣金明细</view>
			</navigator>
			<navigator class="box-item" url="/pages/recommen/order">
				<view class="box-bg"><image src="../../static/img/list.png"></image></view>
				<view class="box-info">推广人订单</view>
			</navigator>
		</view>
	</view>
</template>

<script>
import { commission } from '@/api/wallet.js';
import { getMoneyStyle } from '@/utils/rocessor.js';
export default {
	filters: {
		getMoneyStyle
	},
	data() {
		return {
			money: '' // 佣金
		};
	},
	onLoad() {
		
	},
	onShow() {
		this.onfirst();
	},
	methods: {
		onfirst(){
			// 获取用户佣金
			commission({}).then(({ data }) => {
				this.money = data.commissionCount;
			});
		},
		// #ifdef APP-PLUS
		shareMp(){
			uni.showModal({
				title: '提示',
				content: '需要微信开发平台进行配置',
				showCancel: false,
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
			uni.share({
				provider:'weixin',
				scene: "WXSceneSession",
				title:'邀请好友',
				type:'5',//5为小程序
				miniProgram:{
					id:'gh_ae4872203499',//微信小程序原始id
					path:'pages/user/ShareIndex',//链接地址
					type:0, //0-正式版； 1-测试版； 2-体验版。 默认值为0
				},//分享小程序必要值
				imageUrl:'',//图片地址
				success	(){
					console.log('成功')
				},
				fail(res) {
					console.log(res,'失败')
				}
			})
		},
		// #endif
		onLoad() {
			if (this.isLogin) {
				this.getUserInfo();
			} else {
				// #ifdef H5 || APP-PLUS
				// toLogin();
				// #endif
				// #ifdef MP
				// this.isAuto = true;
				// this.$set(this, 'isShowAuth', true)
				// #endif
			}
		},
		switchTab(url) {
			uni.switchTab({
				url
			});
		},
		// 跳转
		navTo(url) {
			uni.navigateTo({
				url: '/pages/user/user'
			});
		},
		/**
		 * 获取个人用户信息
		 */
		getUserInfo: function() {
			let that = this;
			getUserInfo().then(res => {
				that.$set(that, 'userInfo', res.data);
			});
		}
	}
};
</script>

<style lang="scss">
page,
.conteiner {
	background-color: #f0f0f0;
	height: 100%;
}
.conteiner {
	width: 100%;
	height: 100%;
	position: relative;
	// background-color: pink;
	.img {
		width: 100%;
		image {
			width: 100%;
		}
	}
	.spread-content {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 600rpx;
		padding: 0 24rpx;
		.spread-header {
			margin-top: 30rpx;
			display: flex;
			.return {
				width: 21rpx;
				height: 36rpx;
				image {
					width: 21rpx;
					height: 36rpx;
				}
			}
			.spread-title {
				width: 100%;
				text-align: center;
				color: #fff;
				font-size: 32rpx;
			}
		}
		.current-money {
			color: #fff;
			font-size: 24rpx;
			margin-top: 54rpx;
		}
		.money {
			font-size: 82rpx;
			color: #fff;
			margin: 82rpx auto;
			text-align: center;
		}
	}
	.spread-box {
		width: 94%;
		height: 600rpx;
		background-color: #fff;
		margin: 0 24rpx 216rpx 24rpx;
		position: absolute;
		top: 420rpx;
		margin-left: 24rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		border-radius: 10rpx;
		// margin-right: 224rpx;
		left: 0;
		.box-item {
			width: 50%;
			.box-bg {
				width: 88rpx;
				height: 88rpx;
				margin: 0 auto;
				margin-top: 66rpx;
				image {
					width: 88rpx;
					height: 88rpx;
					// margin: 77rpx auto;
				}
				.img {
					width: 99rpx;
					height: 75rpx;
					// margin: 77rpx auto;
				}
			}

			.box-info {
				color: #666666;
				font-size: 30rpx;
				text-align: center;
				margin-top: 40rpx;
			}
		}
	}
}
</style>