yunshengtai-uniapp/pages/user/mine/index.vue

<template>
	<!--pages/user/index.wxml-->
	<view class="user-index-box">
		<view class="user-index-top">
			<image src="https://download.cyjyyjy.com/userIndex-top-bg.png" class="top-bg"></image>
			<view class="back-btn" :style="'top:' + navTopHeight + 'rpx'" @tap="backUserIndex">
				<image src="/static/images/back.png" mode></image>
			</view>
			<view class="user-info-box acea-row">
				<view class="header-img">
					<image :src="pageData.avatar"></image>
				</view>
				<view class="user-info acea-row row-column row-around">
					<view class="user-name line1">{{pageData.nickname}}</view>
					<view class="user-title acea-row row-middle">
						<image src="/static/images/user-title.png"></image>
						<image class="backhome" src="/static/images/backhome.png" @tap="backUserIndex"></image>
					</view>
				</view>
			</view>
			<view class="menu-box">
				<view class="menu-title-box acea-row row-between row-middle">
					<view>我的特权</view>
					<view class="see-more fz20 acea-row row-middle" style="margin-right:12rpx;" @tap="toMoreMenu">
						<text>查看所有特权</text>
						<image src="/static/images/arrow-r.png"></image>
					</view>
				</view>
				<view class="menu-list">
					<scroll-view class="scroll-view_H" scroll-x="true">
						<view v-for="(item, index) in menuList" :key="index" class="menu-item">
							<image :src="item.icon"></image>
							<view>{{item.name}}</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="myIncome-box">
				<view class="menu-title-box acea-row row-between row-middle">
					<view>我的收益</view>
					<view class="see-more fz20 acea-row row-middle" @tap="toIncomeDetail">
						<text>查看我的收益详情</text>
						<image src="/static/images/arrow-r.png"></image>
					</view>
				</view>
				<view class="income-box">
					<image src="https://download.cyjyyjy.com/income-bg.png"></image>
					<view class="income-l acea-row row-column row-middle row-around">
						<view class="t">累计邀请</view>
						<view class="num">{{pageData.inviterCount}}人</view>
						<view class="btn" @tap="toIncomeDetail">查看</view>
					</view>
					<view class="income-line"></view>
					<view class="income-l income-r acea-row row-column row-middle row-around">
						<view class="t">累计收益</view>
						<view class="num">{{pageData.brokeragePrice}}元</view>
						<view class="btn" @tap="tixian">提现</view>
					</view>
				</view>
			</view>
		</view>
		<view class="invitation-list-box">
			<view class="invi-title">邀请榜</view>
			<view class="list-box">
				<view class="medal-box acea-row row-center">
					<view class="medal medal2">
						<image src="https://download.cyjyyjy.com/no2-bg.png" class="medal-bg"></image>
						<image src="https://download.cyjyyjy.com/no2.png" class="medal-icon"></image>
						<view class="medal-content">
							<view class="user-header">
								<image :src="pageData.userProfitList[1].avatar || 'https://download.cyjyyjy.com/no2.png'"></image>
							</view>
							<view class="user-name line2">{{pageData.userProfitList[1].nickname || '暂无'}}</view>
							<view>已邀请{{pageData.userProfitList[1].inviterCount || 0}}人</view>
							<view>获得收益</view>
							<view class="income-money">{{pageData.userProfitList[1].brokeragePrice || 0}}元</view>
						</view>
					</view>
					<view class="medal medal1" v-if="pageData.userProfitList.length > 0">
						<image src="https://download.cyjyyjy.com/no1-bg.png" class="medal-bg"></image>
						<image src="https://download.cyjyyjy.com/no1.png" class="medal-icon"></image>
						<view class="medal-content">
							<view class="user-header">
								<image :src="pageData.userProfitList[0].avatar || 'https://download.cyjyyjy.com/no1.png'"></image>
							</view>
							<view class="user-name line2">{{pageData.userProfitList[0].nickname}}</view>
							<view>已邀请{{pageData.userProfitList[0].inviterCount}}人</view>
							<view>获得收益</view>
							<view class="income-money">{{pageData.userProfitList[0].brokeragePrice}}元</view>
						</view>
					</view>
					<view class="medal medal3">
						<image src="https://download.cyjyyjy.com/no3-bg.png" class="medal-bg"></image>
						<image src="https://download.cyjyyjy.com/no3.png" class="medal-icon"></image>
						<view class="medal-content">
							<view class="user-header">
								<image :src="pageData.userProfitList[2].avatar || 'https://download.cyjyyjy.com/no3.png'"></image>
							</view>
							<view class="user-name line2">{{pageData.userProfitList[2].nickname || '暂无'}}</view>
							<view>已邀请{{pageData.userProfitList[2].inviterCount || 0}}人</view>
							<view>获得收益</view>
							<view class="income-money">{{pageData.userProfitList[2].brokeragePrice || 0}}元</view>
						</view>
					</view>
				</view>
				<view class="rank-list-box">
					<view v-for="(item, index) in rankList" :key="index"
						class="rank-item acea-row-nowrap row-middle row-between">
						<view class="num">{{index+4}}</view>
						<view class="item-right acea-row row-between row-middle">
							<view class="item-right-l acea-row-nowrap row-middle">
								<image :src="item.avatar"></image>
								<view class="name line1">{{item.nickname}}</view>
							</view>
							<view class="item-right-r">
								<view> 已邀请{{item.inviterCount}}人</view>
								<view class="mondy">收益{{item.brokeragePrice}}元</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="share-btn"></view> -->
			</view>
		</view>
		<button class="share-btn" open-type="share" v-if="shareFlag">
			<image src="https://download.cyjyyjy.com/share-btn.png"></image>
		</button>
	</view>
</template>

<script>
	// pages/user/index.js
	const app = getApp();

	export default {
		data() {
			return {
				navTopHeight: app.globalData.menuTop + app.globalData.navTopHeight + 10,
				userInfo: {},
				pageData: {},
				rankList: [],
				menuList: [{
					name: '需求优先',
					icon: "https://download.cyjyyjy.com/menu1.png"
				}, {
					name: '收益分成',
					icon: "https://download.cyjyyjy.com/menu2.png"
				}, {
					name: '上架特权',
					icon: "https://download.cyjyyjy.com/menu3.png"
				}, {
					name: '活动特权',
					icon: "https://download.cyjyyjy.com/menu4.png"
				}, {
					name: '精品项目',
					icon: "https://download.cyjyyjy.com/menu5.png"
				}, {
					name: '专属推荐码',
					icon: "https://download.cyjyyjy.com/menu6.png"
				}, {
					name: '会员特价',
					icon: "https://download.cyjyyjy.com/menu7.png"
				}, {
					name: '专属活动',
					icon: "https://download.cyjyyjy.com/menu8.png"
				}, {
					name: '增值收益',
					icon: "https://download.cyjyyjy.com/menu9.png"
				}],
				shareFlag: false,
				CustomBar: app.globalData.CustomBar
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.setData({
				userInfo: uni.getStorageSync('userInfo')
			});
			this.getPageData();
			this.getShareFlag();
			uni.hideShareMenu();
		},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function(res) {
			if (this.shareFlag) {
				return {
					title: '禅易云生态',
					imageUrl: "https://download.cyjyyjy.com/shareImg.png",
					path: '/pages/user/agreement/index?id=' + this.userInfo.uid // 路径，传递参数到指定页面。

				};
			} else {
				uni.showToast({
					title: '暂时不能分享哦~',
					icon: 'none'
				});
			}
		},
		methods: {
			backUserIndex() {
				uni.switchTab({
					url: '/pages/user/index'
				});
			},

			getShareFlag() {
				app.http('get', 'user/getShareFlag').then(res => {
					if (res.data.success) {
						this.setData({
							shareFlag: res.data.data
						});
					}
				});
			},

			getPageData() {
				uni.showLoading({
					title: '正在加载中...'
				});
				app.http('get', 'user/myProfit').then(res => {
					if (res.data.success) {
						if (res.data.data.userProfitList.length >= 3) {
							this.setData({
								rankList: res.data.data.userProfitList.slice(3)
							});
						}

						this.setData({
							pageData: res.data.data
						});
						uni.hideLoading();
					}
				});
			},

			toMoreMenu() {
				uni.navigateTo({
					url: '../agreement/index'
				});
			},

			toIncomeDetail() {
				uni.navigateTo({
					url: '../incomeDetail/index'
				});
			},

			tixian() {
				uni.navigateTo({
					url: '/pages/user/withdraw/index'
				});
				// uni.showToast({
				// 	title: '提现功能暂未开放！',
				// 	icon: 'none'
				// });
			}

		}
	};
</script>
<style>
	/* pages/user/index.wxss */
	page {
		background: #212226;
	}

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

	.user-index-box {
		min-height: 100vh;
		color: #EFDACA;
		position: relative;
	}

	.user-index-top {
		width: 100%;
		height: 1070rpx;
		position: relative;
	}

	.user-index-top .top-bg {
		position: absolute;
		top: 0;
		left: 0;
	}

	.user-info-box {
		position: absolute;
		top: 160rpx;
		left: 40rpx;
		z-index: 2;
	}

	.header-img {
		width: 134rpx;
		height: 134rpx;
		margin-right: 34rpx;
	}

	.header-img image {
		width: 134rpx;
		height: 134rpx;
		border-radius: 50%;
	}

	.user-info {
		width: 450rpx;
	}

	.user-title {
		/* width: 242rpx; */
		/* height: 56rpx; */
	}

	.user-title image {
		width: 242rpx;
		height: 56rpx;
	}

	.user-title .backhome {
		width: 146rpx;
		height: 56rpx;
		margin-left: 14rpx;
	}

	.menu-box {
		width: 670rpx;
		height: 244rpx;
		border: 2px solid #EFDACA;
		border-radius: 16rpx;
		position: absolute;
		top: 330rpx;
		left: 40rpx;
		padding: 20rpx 0 16rpx 16rpx;
	}

	.menu-title-box {
		font-size: 32rpx;
		line-height: 44rpx;
		font-weight: bold;
	}

	.fz20 {
		font-size: 20rpx;
		font-weight: normal;
	}

	.see-more image {
		width: 10rpx;
		height: 18rpx;
		display: block;
		margin-left: 10rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.menu-list {
		margin-top: 36rpx;
	}

	.menu-item {
		display: inline-block;
		text-align: center;
		margin-right: 30rpx;
	}

	.menu-item image {
		width: 70rpx;
		height: 70rpx;
		display: inline-block;
		margin-bottom: 6rpx;
	}

	.myIncome-box {
		position: absolute;
		top: 620rpx;
		left: 40rpx;
	}

	.income-box {
		width: 670rpx;
		height: 208rpx;
		border-radius: 12rpx;
		margin-top: 10rpx;
		position: relative;
	}

	.income-box image {
		width: 670rpx;
		height: 208rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.income-l {
		width: 50%;
		height: 100%;
		position: absolute;
		left: 0;
		z-index: 2;
		color: #946F46;
		padding: 30rpx 0 20rpx;
	}

	.num {
		color: #363636;
		font-size: 36rpx;
		font-weight: bold;
	}

	.btn {
		width: 124rpx;
		height: 44rpx;
		line-height: 44rpx;
		text-align: center;
		background: #EFDACA;
		border-radius: 62rpx;
		font-size: 26rpx;
	}

	.income-r {
		left: 50%;
	}

	.invitation-list-box {
		position: relative;
		z-index: 99;
		top: -140rpx;
	}

	.invi-title {
		padding-left: 40rpx;
		font-size: 32rpx;
		color: #EFDACA;
		line-height: 40rpx;
		margin-bottom: 12rpx;
	}

	.list-box {
		width: 100%;
		background: #212226;
		border-radius: 40rpx 40rpx 0px 0px;
		padding-top: 36rpx;
	}

	.medal-box {}

	.medal {
		width: 224rpx;
		height: 336rpx;
		font-size: 20rpx;
		color: #946F46;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		text-align: center;
		line-height: 38rpx;
	}

	.medal .medal-bg {
		width: 224rpx;
		height: 336rpx;
		position: absolute;
	}

	.medal-content {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 22;
	}

	.user-header {
		width: 86rpx;
		height: 86rpx;
		border-radius: 50%;
		overflow: hidden;
		position: absolute;
		left: 50%;
		top: -43rpx;
		transform: translateX(-50%);
	}

	.medal-content .user-name {
		color: #363636;
		font-size: 24rpx;
		line-height: 34rpx;
		margin-bottom: 16rpx;
		margin-top: 56rpx;
	}

	.income-money {
		font-size: 28rpx;
		color: #363636;
		font-weight: bold;
		/* margin-top: 16rpx; */
	}

	.medal-icon {
		width: 136rpx;
		height: 136rpx;
		position: absolute;
		right: -68rpx;
		bottom: -10rpx;
	}

	.medal1 {
		margin: 0 22rpx;
		z-index: 99;
	}

	.medal2,
	.medal3 {
		width: 202rpx;
		height: 303rpx;
		margin-top: 80rpx;
	}

	.medal3 {
		margin-top: 100rpx;
	}

	.medal2 .medal-icon {
		width: 112rpx;
		height: 112rpx;
		bottom: -20rpx;
		right: -20rpx;
	}

	.medal2 .medal-bg,
	.medal3 .medal-bg {
		width: 202rpx;
		height: 303rpx;
	}

	.medal3 .medal-icon {
		width: 100rpx;
		height: 100rpx;
		right: -20rpx;
	}

	.rank-list-box {
		width: 100%;
		max-height: 780rpx;
		padding: 0 40rpx;
		font-size: 24rpx;
		overflow-y: scroll;
	}

	.rank-item .num {
		min-width: 50rpx;
		color: #E4C6B0;
	}

	.item-right-l image {
		width: 74rpx;
		height: 74rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}

	.item-right-l {
		width: 70%;
	}

	.item-right-l .name {
		font-size: 24rpx;
		color: #fff;
		width: 80%;
	}

	.item-right {
		width: 618rpx;
		height: 132rpx;
		border-bottom: 1px solid #6B6158;
	}

	.item-right-r {
		text-align: right;
	}

	.share-btn {
		width: 334rpx !important;
		height: 132rpx !important;
		padding: 0 !important;
		margin: 40rpx auto !important;
		background: transparent !important;
		position: fixed;
		bottom: 0rpx;
		left: 50%;
		margin-left: -162rpx !important;
		z-index: 999;
	}

	.share-btn image {
		width: 334rpx;
		height: 132rpx;
		display: inline-block;
	}
</style>