samehome/pages/me/myTeam.vue

<template>
	<view class="main">
		<!-- nav -->
		<navigation>{{ i18n.MyTeam }}</navigation>
		<view class="body">
			<view class="top flex">
				<view class="item">
					<view class="t1">
						{{inviteData.totalPeople}}
					</view>
					<view class="t2">
						{{i18n.Numberofclionts}}
					</view>
				</view>
				<view class="item">
					<view class="t1">
						{{inviteData.yestodayRevenue}}
					</view>
					<view class="t2">
						{{i18n.Earnlingsyesterday}}
					</view>
				</view>
				<view class="item">
					<view class="t1">
					{{inviteData.totalRevenue}}
					</view>
					<view class="t2">
						{{i18n.Totalincome}}
					</view>
				</view>
			</view>
			<u-subsection :list="list" activeColor="#00E8A2" inactiveColor="#fff" :current="curNow"
				@change="sectionChange" bgColor="#211F32"></u-subsection>
			<view class="container">
				<table class="table">
					<thead class="thead">
						<tr>
							<td>{{i18n.User}}</td>
							<td>{{i18n.Financialfunds}}</td>
							<td>{{i18n.Time}}</td>
						</tr>
					</thead>
					<tbody  class="tbody">
						<tr>
							<td>98374354705</td>
							<td>349849</td>
							<td>2021.10.14</td>
						</tr>
						<tr>
							<td>98374354705</td>
							<td>349849</td>
							<td>2021.10.14</td>
						</tr>
						<tr>
							<td>98374354705</td>
							<td>349849</td>
							<td>2021.10.14</td>
						</tr>
					</tbody>
				</table>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/utils/api'
	import constant from '@/utils/constant.js';
	export default {
		name: "myTeam",
		data() {
			return {
				form: {
					pageNumber: 1,
					pageSize: 20,
				},
				isLoadMore: false, //是否加载中
				loadStatus: 'loadmore',
				loadingText: this.$t("login").toload,
				loadmoreText: this.$t("login").pullup,
				nomoreText: this.$t("login").Nomore,
				userInfoObj: [],
				
				inviteData:{},
				list: [ this.$t("me").Myclient, this.$t("me").Incomerecord],
				// 或者如下，也可以配置keyName参数修改对象键名
				// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
				curNow: 0,

			};
		},
		computed: {
			i18n() {
				return this.$t("me");
			},
		},
		onReachBottom() {
			if (!this.isLoadMore) {
				this.form.pageNumber += 1
				this.getList();
			}
		},
		onLoad() {
			this.invitation()
			this.getList()
		},
		onShow() {},
		methods: {
			// 获取用户下级列表
			getList() {
				this.isLoadMore = true
				api.promotionRecords(this.form).then(res => {
					if (res.content.length) {
						if (this.form.pageNumber > 1) {
							this.userInfoObj = this.userInfoObj.concat(res.content)
							for (var i = 0; i < this.userInfoObj.length; i++) {
								if (this.userInfoObj[i].addTime) {
									this.userInfoObj[i].timestr = this.$index.formatyymmddhhmmss(this.userInfoObj[
										i].addTime)
								}
							
							}
						} else {
							this.userInfoObj = res.content
							for (var i = 0; i < this.userInfoObj.length; i++) {
								if (this.userInfoObj[i].addTime) {
									this.userInfoObj[i].timestr = this.$index.formatyymmddhhmmss(this.userInfoObj[
										i].addTime)
								}
							}
						}
						if (this.userInfoObj.length >= Number(res.totalElements)) { // 判断接口返回数据量小于请求数据量，则表示此为最后一页
							this.isLoadMore = true
							this.loadStatus = 'nomore'
						} else {
							this.isLoadMore = false
						}
					} else {
						this.isLoadMore = true
						this.loadStatus = 'nomore'
						this.userInfoObj = []
					}
					this.$forceUpdate()
				})
			},
			
			//获取用户邀请数据
			invitation() { 
				api.invitData().then(res => {
					this.inviteData=res
				})
			},
			sectionChange(index) {
				this.curNow = index;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.table{
		width: 100%;
		text-align: center;
		border-collapse: collapse;
		.thead{
			height: 84rpx;
			line-height: 84rpx;
			tr{
				td{
					color: #A1A0A8;
					font-size: 24rpx;
				}
			}
		}
		.tbody{
			tr{
				height: 84rpx;
				line-height: 84rpx;
				border-top: 2rpx solid #323045 !important;
				td{
					color: #fff;
					font-size: 24rpx;
				}
			}
		}
	}
	.container {
		padding: 0 32rpx;
	}

	/deep/ .u-subsection--button {
		height: 80rpx;
	}

	/deep/ .u-subsection--button__bar {
		background: #323045;
		height: 80rpx;
	}

	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.top {
		padding: 68rpx 32rpx;
		background: url('@/static/me/myTeambg.png') no-repeat;
		background-size: cover;

		.item {
			text-align: center;
			line-height: 60rpx;
		}

		.t2 {
			font-size: 24rpx;
			color: #A1A0A8;
		}

		.t1 {
			color: #00E8A2;
			font-size: 32rpx;
			font-weight: bolder;
		}
	}

	.main {

		.body {
			overflow: hidden;
			margin-top: 200rpx;

			.userItem {
				position: relative;
				background: #211F32;
				border-radius: 32rpx;
				display: flex;
				flex-wrap: wrap;
				margin-top: 32rpx;

				.icon {
					height: 160rpx;
					margin-left: 20rpx;
					margin-right: 26rpx;
				}

				.email {
					width: 520rpx;
					height: 52rpx;
					line-height: 52rpx;
					margin-top: 28rpx;
					font-size: 32rpx;
				}

				.date {
					width: 180rpx;
					height: 52rpx;
					line-height: 52rpx;
					font-size: 28rpx;
				}

				.button {
					position: absolute;
					top: 72rpx;
					right: 32rpx;
					width: 120rpx;
					height: 48rpx;
					line-height: 48rpx;
					font-size: 28rpx;
					color: #15141F !important;
					margin-left: 200rpx;
					margin-top: 20rpx;
					border-radius: 16rpx;
				}
			}

		}

	}
</style>