qd_81fang/pages/term/index.vue

<template>
	<block>
<!-- 				<view class="select">
			<view class="selectItem" @tap="changeStatus" data-status="id">
				<view>入团时间排序</view>
				<image :src="
                        order == 'id'
                            ? sort == 'asc'
                                ? 'https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/762843841e1964468d3b1f72117a7a6e.png'
                                : 'https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/0c180f41253fc7bc5ac4fd2d69f5d480.png'
                            : 'https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/996fff6601b828ee6fcc46b1217b2d1a.png'
                    " mode="widthFix"></image>
			</view>

			<view class="selectItem" @tap="changeStatus" data-status="order">
				<view>订单数量</view>
				<image :src="
                        order == 'order_num'
                            ? sort == 'asc'
                                ? 'https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/762843841e1964468d3b1f72117a7a6e.png'
                                : 'https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/0c180f41253fc7bc5ac4fd2d69f5d480.png'
                            : 'https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/996fff6601b828ee6fcc46b1217b2d1a.png'
                    " mode="widthFix"></image>
			</view>
		</view> -->

		<!-- 	<view class="mItem" v-for="(item, index) in list" :key="index">
			<image
				: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 }}
						<text class="fz28">{{ item.mobile	 }}</text>
					</view>
					<view>{{ item.orderNum }}</view>
				</view>
				<view class="info2">
					<view>入团:{{ parse.filterTime(item.createtime) }}</view>
					<view>推广订单</view>
				</view>
			</view>
		</view> -->


		<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>入团:{{ parse.filterTime(item.createtime) }}</view>
					</view>
					<view class="info2">
						<view>{{ item.mobile || '暂无手机号码'}}</view>
						<view>自购(单): 
						
						<text class="fw700"> {{ item.orderNum }} </text> 
						</view>
					</view>
				</view>

			</view>
			
			<view class="mbot">
				
				<view class="mleve">
					{{item.groupName}}
				</view>
			
				<view class="mInfo2">
					<view class="info3">
						<view>
							下级(人): <text class="fw700"> {{item.childCount}} </text> 
						</view>
						<view>下级推广(单):<text class="fw700">{{item.childOrderNum}}  </text> </view>
					</view>
				</view>
			
			</view>
			
			
		</view>



		<view v-if="!list.length" style="color: #999; text-align: center; margin: 100rpx 0">暂无数据</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 {
				list: [],
				loaded: false,
				page: 1,
				order: 'id',

				//id是入团时间 order_num是订单数
				//asc升序，desc降序
				sort: 'asc',

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

			uni.setNavigationBarTitle({
				title: '我的团队'
			});


			this.getlist();
		},
		onPullDownRefresh: function() {},
		onReachBottom: function() {
			this.loaded || this.getlist();
		},
		onShareAppMessage: function() {},
		methods: {
			changeStatus(e) {
				var that = this;
				var status = e.currentTarget.dataset.status;
				var order = this.order;
				var sort = this.sort;

				if (status == 'id') {
					//点的是入团时间排序
					if (order == 'id') {
						// 之前也是筛选的入团时间
						if (sort == 'asc') {

							that.sort = 'desc'

						} else {

							that.sort = 'asc'

						}
					} else {
						//之前筛选的订单数量 那就要变成入团时间排序 并且默认升序

						that.order = 'id'
						that.sort = 'asc'

					}
				} else {
					//点的是订单数量
					if (order == 'order_num') {
						// 之前也是筛选的入团时间
						if (sort == 'asc') {

							that.sort = 'desc'

						} else {

							that.sort = 'asc'

						}
					} else {
						//之前筛选的订单数量 那就要变成入团时间排序 并且默认升序

						that.order = 'order_num'
						that.sort = 'asc'

					}
				}

				that.init();
				that.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('/team/index', 'GET', {
					page: that.page,
					pagesize: that.pageSize,
					order: that.order,
					sort: that.sort
				});
				console.log(res)
				if (res) {

					if (res.data.length > 0) {

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

						// uni.setNavigationBarTitle({
						//     title: '我的团队(' + res.total + ')'
						// });

					} 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 30rpx 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: 25rpx;
	}

	.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: 12rpx;
	}
	.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;
	}
</style>