qd_81fang/pages/term/manage.vue

<template>
	<block>


		<view class="iNav iflex">
			<view class="iflexC aliCen tabItem" @tap="changeNav" :data-index="index" v-for="(item, index) in navs"
				:key="index">
				<text :class="'iNav-text ' + (navIndex == index ? '' : '')">{{ item.name }}</text>

				<image
					src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/0d08dcd267a9ecfb5aec198436d00646.png"
					v-if="navIndex == index"></image>
			</view>
		</view>



		<view class="content1">





			<view class="mItem" v-for="(item, index) in list" :key="index">



				<view class="mtop">
					<image class="avatar"
						:src="item.avatar || 'https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/a035c7dae49cc9904c7b0977895ffb1e.png'">
					</image>

					<view class="mInfo">
						<view class="info1">
							<view>
								{{ item.username }}
							</view>
							<view>入团:{{ item.jointime }}</view>
						</view>
						<view class="info2">
							<view>{{ item.mobile }}</view>
							<view>自购(单):

								<text class="fw700">{{ item.selfBuy }} </text>
							</view>
						</view>
					</view>

				</view>

				<view class="mbot">

					<view class="mleve">
						{{item.name}}
					</view>

					<view class="mInfo2">
						<view class="info3">
							<view>
								下级(人): <text class="fw700"> {{ item.subLevelNum }} </text>
							</view>
							<view>下级推广(单):<text class="fw700">{{ item.subLevelShareNum }} </text> </view>
						</view>
					</view>

				</view>


				<view class="newData">

					<view class="newDataitem">
						<view>直推业绩(元)</view>
						<view>{{ item.direct}}</view>
					</view>


					<view class="newDataitem">
						<view>间推业绩(元)</view>
						<view>{{ item.directReward }}</view>
					</view>

				</view>

				<view class="newData">

					<view class="newDataitem">
						<view>直推佣金(元)</view>
						<view>{{ item.indirect }}</view>
					</view>


					<view class="newDataitem">
						<view>间推佣金(元)</view>
						<view>{{ item.indirectReward }}</view>
					</view>

				</view>


			</view>



			<view v-if="!list.length" style="color: #999; text-align: center; margin: 100rpx 0">暂无数据</view>


		</view>




	</block>
</template>
<script module="parse" lang="wxs">
	module.exports = {
		filterTime: function(value) {

			var nowDate = getDate(value * 1000); //过期时间

			var year = nowDate.getFullYear(); //当前年份
			var month = nowDate.getMonth() + 1; //当前月份
			var date = nowDate.getDate(); //当前几号
			var hours = nowDate.getHours(); //当前几小时


			return year + '-' + month + '-' + date
		}

	}
</script>
<script>
	// pages/tabbar/index/index.js
	var app = getApp();
	export default {
		data() {
			return {
				navs: [{
						name: "黄钻",
						group: 5
					},

					{
						name: "金钻",
						group: 4
					},

					{
						name: "银钻",
						group: 3
					},
				],
				navIndex: 0,

				list: [],
				loaded: false,
				page: 1,

				pageSize: 10
			};
		},
		onLoad: function(options) {

			// uni.setNavigationBarTitle({
			// 	title: '团队管理'
			// });


			this.getlist();
		},
		onPullDownRefresh: function() {},
		onReachBottom: function() {
			this.loaded || this.getlist();
		},
		onShareAppMessage: function() {},
		methods: {


			changeNav(e) {
				let index = e.currentTarget.dataset.index;
				console.log(index);

				if (this.navIndex != index) {

					this.navIndex = index
					this.page = 1
					this.list = []
					this.loaded = false

					this.getlist();
				}
			},




			toPage(e) {
				app.globalData.toPage(e);
			},

			init() {

				this.page = 1
				this.loaded = false
				this.list = []

			},

			async getlist() {
				var that = this;

				let res = await this.$api.request('/stats/teamManage', 'GET', {
					page: that.page,
					count: that.pageSize,
					group: that.navs[that.navIndex].group,

				});
				console.log(res)
				if (res) {

					if (res.rows.length > 0) {

						this.list = this.list.concat(res.rows);
						this.page++;

						uni.setNavigationBarTitle({
							// title: '团队管理(' + res.total + ')'

							title: '团队管理'
						});



					} else {
						this.loaded = true
						this.$api.msg('没有更多数据');
					}
				}


			}
		}
	};
</script>
<style>
	page {
		background: #f4f5f9;
	}

	.select {
		padding: 30rpx 0 20rpx 0;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.selectItem {
		display: flex;
		align-items: center;
	}

	.selectItem>view {
		font-size: 28rpx;
	}

	.selectItem>image {
		width: 26rpx;
		margin-left: 12rpx;
	}

	.mItem {
		margin: 25rpx 0rpx 0;
		background: #fff;
		padding: 28rpx 20rpx;

	}

	.mtop {
		display: flex;
		align-items: center;
	}

	.mleve {
		width: 130rpx;
		height: 40rpx;

		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #FB4C6F;
		color: #fff;
		margin-left: -10rpx;
		font-size: 24rpx;
		margin-top: 12rpx;
	}


	.mbot {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.mInfo {
		flex: 1;
		height: 110rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-bottom: 1px solid #F3F0F3;
		padding-bottom: 14rpx;
	}

	.mInfo2 {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-top: 12rpx;
		margin-left: 20rpx;
	}

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

	.info1>view:nth-child(1) {
		font-size: 30rpx;
		color: ;
	}

	.fz28 {
		font-size: 28rpx;
	}

	.info1>view:nth-child(2) {
		color: #8E8E8E;
		font-size: 24rpx;
	}

	.info2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 26rpx;
	}

	.info2>view:nth-child(1) {
		color: #010101;
		font-size: 24rpx;
	}

	.info2>view:nth-child(2) {
		color: #8E8E8E;
	}

	.fb {
		height: 112rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.info3 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		color: #8E8E8E;

	}


	.fw700 {
		font-weight: 700;
		color: #010101;
		margin-left: 4rpx;
	}

	.addAddress {
		width: 670rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		background: #1479ff;
		border-radius: 50rpx;
	}

	.addAddress>view {
		color: #fff;
		font-size: 30rpx;
	}

	.addAddress>image {
		width: 30rpx;
		margin-right: 14rpx;
	}

	view {
		font-size: 24rpx;
	}



	.iNav {
		/* padding: 0 20rpx 0; */
		/* margin-top: 34rpx; */
		line-height: 1;
		padding: 0 30rpx;
		background: #fff;
	}

	.iNav .iNav-text {
		padding: 30rpx 0rpx 28rpx;
		/* padding-top: 34rpx;
	  padding-bottom: 28rpx; */
		color: #010101;
		font-size: 28rpx;
	}

	.iNav image {
		width: 68rpx;
		height: 10rpx;
		margin-top: -28rpx;
	}

	.jsbet {
		justify-content: space-between;
	}

	.iflex {
		display: flex;
		justify-content: space-around;
	}

	.aliCen {
		align-items: center;
	}

	.iflexC {
		display: flex;
		flex-direction: column;
	}

	.ifontweight {
		font-weight: 700;
	}

	.content1 {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.tabItem {
		margin-right: 70rpx;
	}

	.newData {
		margin-top: 20rpx;
		padding-top: 26rpx;
		margin-left: 150rpx;
		padding-top: 1px solid #F3F0F3;
		display: flex;
		align-items: center;
	}



	.newDataitem {
		flex: 1;
	}

	.newDataitem>view:nth-child(1) {
		font-size: 24rpx;
		color: #8E8E8E;
	}

	.newDataitem>view:nth-child(2) {
		font-size: 26rpx;
		color: #010101;
		font-weight: 700;
		margin-top: 12rpx;
	}

	.newData>.newDataitem:nth-child(2) {
		padding-left: 70rpx;
	}
</style>