<template>
	<view class="min-page color-333 u-font-28 ">
		<view class="u-font-32 font-bold ">助力人（{{totalRow}}人）</view>
		<view class="list u-m-t-40">
			<view class="item" v-for="(item,index) in list" :key="index">
				<up-avatar size="140rpx" :src="item.userAvator"></up-avatar>
				<view class="u-m-t-16 u-line-1">{{item.userName}}</view>
			</view>
		</view>
		<up-empty v-if="!list.length" text="暂无助力人"></up-empty>
		
	</view>
</template>

<script setup>
	
import { onReachBottom } from '@dcloudio/uni-app'
import * as Api from '@/common/api/market/package.js'
	const query=reactive({
		page:1,size:50
	})
	
	const totalRow=ref(0)
	const isEnd=ref(false)
	const list=ref([])
	function getList(){
		Api.helpPage(query).then(res=>{
			totalRow.value=res.totalRow||0
			isEnd.value= query.page>= res.totalPage*1 ?true :false
			if(query.page==1){
				list.value=res.records
			}else{
				list.value.push(...res.records)
			}
		})
	}
	
	onReachBottom(()=>{
		if(isEnd.value){
			return 
		}
		query.page++
		getList()
	})
	onLoad((opt)=>{
		Object.assign(query,opt)
		getList()
	})
	
</script>

<style lang="scss" scoped>
.min-page{
	padding: 32rpx 52rpx;
}
.list{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-column-gap: 28rpx;
	grid-row-gap: 32rpx;
	.item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		.u-line-1{
			max-width: 140rpx;
		}
	}
}
</style>