hwnc/pagesA/pages/distribution/myteam/myteam.vue

<template>
	<view :class="[AppTheme]" class="all_box onelevel">
		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<u-sticky offsetTop="0" style="z-index: 10;">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<u-sticky offsetTop="-45" style="z-index: 10;">
				<!-- #endif -->
				<view class="navbar">
					<u-tabs ref="uTabs" :list="modelData" :activeStyle="{
				        color: primary,
				        transform: 'scale(1.05)'
				    }" :inactiveStyle="{
				        color: '#606266',
				        transform: 'scale(1)'
				    }" lineWidth="30" :scrollable="false" keyName="label" :lineColor="primary" :current="initIndex"
						@click="handle">
					</u-tabs>
				</view>
			</u-sticky>
			<view class="user bg-linear-gradient">
				<view>
					<view style="color: #fff;" class="red" v-cloak>{{ yaoqing || 0 }}</view>
					<view style="color: #fff;" class="name">已邀请人数</view>
				</view>
				<view>
					<view style="color: #fff;" class="red" v-cloak>{{ tMoney || 0 }}</view>
					<view style="color: #fff;" class="name">推荐总奖金</view>
				</view>
			</view>
			<view class="bonus ">
				<view class="detail">奖金明细</view>
				<view class="bonus-t">
					<text>头像</text>
					<text style="margin-left:46rpx;">昵称</text>
					<text>累计奖励</text>
				</view>
				<ul class="bonus-b">
					<li v-for="(item, index) in mingXi" :key="index">
						<image :src="item.headimgurl" alt="" v-if="item.headimgurl" />
						<image :src="settingFile.root_img+'/static/app/tab-my.png'" alt="" v-else="item.headimgurl" />
						<text class="nickname" v-if="item.nickname" v-cloak>{{ item.nickname }}</text>
						<text class="name" v-else>xx用户</text>
						<text class="red text-neutral" v-cloak>{{ item.total_yj }}</text>
					</li>
				</ul>
				<u-loadmore v-if="mingXi.length" :line="true" :status="status" :dashed='false' />
				<u-empty margin-top="60" style="height: 0% !important;width: 100%;" v-if="mingXi.length == 0"
					text="暂无更多数据" mode="list"></u-empty>
			</view>
	</view>
</template>

<script>
	import mineApi from '@/api/mine/index';
	export default {
		data() {
			return {
				primary: this.$theme.primary,
				settingFile: getApp().globalData.siteinfo,
				index: 0,
				newList: [],
				oldList: [],
				initIndex: 0,
				content: '<p></p>',
				modelData: [{
					label: '一级用户'
				}, {
					label: '二级用户'
				}],
				yaoqing: 0,
				mingXi: [],
				name: '',
				tMoney: 0,
				page: 1,
				status: 'loadmore',
			};
		},
		methods: {
			handle(e) {
				this.index = e.index;
				this.initIndex = e.index;
				this.page = 1;
				if (this.index == 0) {
					this.getlist(1);
				} else {
					this.getlist(2);
				}
			},
			getlist(type) {
				var that = this;
				mineApi.myuser({
					type: type,
					p: that.page
				}).then(ret => {
					that.status = 'nomore'
					if (that.page == 1) {
						that.mingXi = [];
					}
					ret.data.cache.forEach(item => {
						that.mingXi.push(item);
					});
					if (ret.data.cache.length == 10) {
						that.status = 'loadmore'
					} else {
						that.status = 'nomore'
					}
					that.yaoqing = ret.data.total;
				});
			},
		},
		onReachBottom() {
			console.log('上拉加载了', this.initIndex)
			this.page++
			this.status = 'loading'
			if (this.initIndex == 0) {
				this.getlist(1);
			} else {
				this.getlist(2);
			}
		},
		onLoad(options) {
			this.getlist(1);
			this.tMoney = options.totalMoney;
		}
	};
</script>

<style lang="scss">
	.navbar {
		background-color: #ffffff;
	}

	.block {
		width: 100%;
		height: 75rpx;
		background: #f1f1f1;
		padding-top: 70rpx;

		.fle {
			width: 100%;
			margin-top: 90rpx;

			display: flex;
			align-items: center;
			height: 70rpx;
			position: fixed;
			background-color: #ffffff;
			top: 0;
			width: 100%;

			.item {
				width: 50%;
				text-align: center;
				line-height: 70rpx;
			}

			.line50 {
				position: absolute;
				bottom: -4rpx;
				left: 0;
				width: 18%;
				height: 6rpx;
				background-color: #ff8300;
			}

			.line100 {
				position: absolute;
				bottom: -4rpx;
				left: 0;
				transform: translateX(100%);
				width: 18%;
				height: 6rpx;
				background-color: #ff8300;
			}
		}
	}

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

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

	.user {
		width: calc(100% - 35rpx);
		margin: 0 auto;
		height: 176rpx;
		margin-top: 15rpx;
		display: flex;
		justify-content: space-around;
		border-radius: 10rpx;
	}

	.user view {
		text-align: center;
	}

	.user view .red {
		margin-left: 10rpx;
		margin-top: 48rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ff1f1f;
	}

	.user view .name {
		margin-top: 24rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.bonus {
		width: calc(100% - 38rpx);
		margin: 0 auto;
		padding-bottom: 40rpx;
		margin-top: 20rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		min-height: 75vh;
	}

	.bonus .detail {
		padding-top: 34rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}

	.bonus .bonus-t {
		display: flex;
		width: calc(100% - 68rpx);
		margin: 40rpx auto;
		justify-content: space-between;
	}

	.bonus .bonus-t text {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(153, 153, 153, 1);
	}

	.bonus-b {
		width: calc(100% - 68rpx);
	}

	.bonus-b li {
		width: calc(100% - 68rpx);
		margin: 30rpx auto;
		display: flex;
		justify-content: space-between;
		height: 72rpx;
		align-items: center;
	}

	.bonus-b li image {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
	}

	.bonus-b li .name {
		width: 170rpx;
		text-align: center;
		font-size: 24rpx;
		font-weight: bold;
		color: #666666;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.bonus-b li .nickname {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.bonus-b li .red {
		/*width:104rpx;*/
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
	}
</style>