shop_h5/pages/vip/distribution/invite.vue

<template>
	<view class="whole">
		<view class="oneBox">
			<view class="row">
				<view class="num"><text>{{report.invite_count || 0}}</text>人</view>
				<view class="tit">邀请人数</view>
			</view>
			<view class="row">
				<view class="num"><text>{{report.group_count || 0}}</text>人</view>
				<view class="tit">团队人数</view>
			</view>
		</view>
		
		<view class="search">
			<!-- <view class="selbox" @click="typeFilter">
				<text>{{Type[type_id]}}</text>
				<up-icon name="arrow-down" size="14" color="#999" />
			</view> -->
			<input class="inpt" type="text" v-model="text_val" placeholder="输入用户昵称进行搜索" @confirm="updateList" />
		</view>
		
		<view class="twoBox">
			<view class="head">
				<view class="row"><text>用户信息</text></view>
				<view class="row" style="justify-content: flex-end;"><text>邀请时间</text></view>
			</view>
			<view class="item" v-for="item in list" :key="item.id">
				<view class="top">
					<view class="row" v-if="item.user">
						<image mode="aspectFill" :src="item.user.avatar"></image>
						<text>{{item.user.nickname}}({{sf[item.role_level]}})&nbsp;&nbsp;</text>
						<view class="solid" @click="copyText(item.user.nickname)">复制</view>
					</view>
					<view class="row time">{{item.created_at}}</view>
				</view>
				<view class="numbox">
					<view class="col">
						<view class="num">{{item.person_amount}}</view>
						<view class="tit">个人销售额</view>
					</view>
					<view class="col">
						<view class="num">{{item.invite_user_count}}</view>
						<view class="tit">邀请人数</view>
					</view>
					<view class="col">
						<view class="num">{{item.group_amount}}</view>
						<view class="tit">团队销售额</view>
					</view>
					<view class="col">
						<view class="num">{{item.group_user_count}}</view>
						<view class="tit">团队人数</view>
					</view>
				</view>
			</view>
			<view class="empty" v-if="!list.length">您还没有邀请人喔</view>
		</view>
		
	</view>
		
</template>

<script>
	import { reactive, toRefs } from 'vue'
	import { get } from '@/api/request.js'
	import { copyText } from '@/components/common.js'
	
	export default {
		setup() {
			const data = reactive({
				Color: uni.getStorageSync('theme_color'),
				list: [],
				page: 1,
				lastPage: 0,
				report: {},
				itemList: ['直接邀请', '团队成员'],
				Type: {
					'invite': '直接邀请',
					'group': '团队成员'
				},
				type_id: 'invite',
				text_val: '',
				sf: {
					'0': '合伙人',
					'1': '服务商',
					'2': '店主'
				}
			})
			
			function getInviteList(val) {
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				let params = {
					page: data.page,
					pageSize: 20,
					list_type: data.type_id,
					nickname: data.text_val
				}
				get('/api/v1/sales/distributor/invitationList', params).then((res) => {
					data.list = val == 0 ? res.data : data.list.concat(res.data)
					data.report = res
					data.lastPage = res.meta.last_page
					uni.hideLoading()
				}).catch(() => {
					uni.hideLoading()
				})
			}
			
			function typeFilter() {
				uni.showActionSheet({
					itemList: data.itemList,
					success: (res) => {
						data.type_id = res.tapIndex == 0 ? 'invite' : 'group'
						updateList()
					},
					fail: (err) => {
						console.log('取消', err)
					}
				})
			}
			
			function updateList() {
				data.page = 1
				getInviteList(0)
			}
			
			return {
				copyText,
				...toRefs(data),
				getInviteList,
				updateList,
				typeFilter
			}
		},
		onLoad() {
			this.getInviteList(0)
		},
		onReachBottom() {
			if (this.page < this.lastPage) {
				this.page++
				this.getInviteList(1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.whole{
		padding: 24rpx;
		.oneBox{
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-around;
			background-color: v-bind('Color');
			border-radius: 12rpx;
			padding: 60rpx 20rpx;
			.row{
				font-size: 28rpx;
				.num{
					margin-bottom: 10rpx;
					text{
						font-size: 36rpx;
						font-weight: 600;
					}
				}
			}
		}
		.twoBox{
			margin-top: 20rpx;
			font-size: 28rpx;
			background: #fff;
			.head{
				display: flex;
				align-items: center;
				.row{
					padding: 24rpx;
				}
			}
			.row{
				width: 50%;
				padding: 24rpx 0;
				box-sizing: border-box;
				border-bottom: 1px solid #f2f2f2;
				display: flex;
				align-items: center;
			}
			.item{
				padding: 0 24rpx;
				.top{
					display: flex;
				}
				image{
					width: 30px;
					height: 30px;
					border-radius: 50%;
					margin-right: 10rpx;
				}
				.numbox{
					display: flex;
					padding: 24rpx 0;
					.col{
						width: 25%;
						text-align: center;
						font-size: 24rpx;
						.num{
							font-size: 30rpx;
						}
					}
				}
			}
			.time{
				color: #888;
				justify-content: flex-end;
				font-size: 24rpx;
			}
		}
	}
	.search{
		padding: 20rpx 0 0;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		.selbox{
			width: 200rpx;
			border: 1rpx solid #e5e5e5;
			padding: 0 14rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			height: 60rpx;
			justify-content: space-between;
			background-color: #fff;
		}
		.inpt{
			flex: 1;
			border: 1rpx solid #e5e5e5;
			padding: 0 14rpx;
			border-radius: 10rpx;
			font-size: 24rpx;
			height: 60rpx;
			box-sizing: border-box;
			// margin-left: 20rpx;
			background-color: #fff;
		}
	}
	.empty{
		padding: 40rpx 0;
		text-align: center;
		color: #999;
		font-size: 24rpx;
	}
</style>