<template>
	<view>
		<view class="">
			<view class="" style="text-align: center;height: 120upx;line-height: 120upx;font-weight: bold;font-size: 32upx;">
				以有 <text style="color: #21B94C;font-size: 60upx;">{{receivePeopleNumber}}</text>人领取   还剩{{unreceivePeopleNumber}}人未领取
			</view>
		</view>
		<view class="" style="height: 160upx;padding: 0 24upx;background-color: rgb(255, 255, 255);margin-bottom: 20upx;" v-if="getDetail.length > 0 " v-for="(item,index) in getDetail">
			<view class="fx "  style="justify-content: space-between;background-color: #fff;    align-items: center;
    height: 100%">
				<view class="fx" style="width: 75%;align-items: center;" >
					<view style="height: 120upx;width: 120upx;border-radius: 120upx;text-align: center;line-height: 80upx;overflow: hidden;">
						<image :src="item.face" style="display: inline;"></image>

					</view>
					<view style="margin:0 0 0 10upx;width: 75%;padding: 20upx 10upx;">
						<view style="font: 34upx 微软雅黑;padding-bottom:10upx ;" class="oneline">{{item.nickname}}</view>
						<view style="font-size:20upx;color:rgb(116, 113, 113);padding-top: 10upx;">{{item.verification_time}}</view>
					</view>

				</view>

				<view style="width: 15%;height: 104upx;">
					<!-- <text style="color:#DC143C;padding: 0 12upx;border-radius: 10upx;font-size: 32upx;">
						
					</text> -->
					<image src="/static/lingqu.png" mode="" style="width:100% ;height: 100%;display: inline;"></image>
				</view>
				<!-- 关注插槽 -->
				<!-- <slot name="before"></slot> -->

			</view>

			<!-- <slot name="content"> </slot> -->
		</view>
		
		
		<view v-if="getDetail.length <= 0" style="text-align: center;width: 100%;height:1000upx;line-height: 1000upx;font-size: 50upx;color:#8C8C8C ;">
			还没有人领取~~
		</view>
	</view>
</template>

<script>
	import {
		activity_user
	} from '@/utils/api/merchant.js';
	export default {
		data(){
			return {
				shop_id:'',
				activity_id:'',
				getDetail:[],
				page:1,
				receivePeopleNumber:0,
				unreceivePeopleNumber:0,
			}
		},
		onReachBottom() {
			activity_user({
				shop_id:this.shop_id,
				activity_id:this.activity_id,
				nucleus:1,
				page:this.page
			}).then(res=>{
				if(res.code==0&&res.data.list.length>0){
					this.page++
					this.getDetail = res.data.list;
					this.receivePeopleNumber=res.data.receivePeopleNumber;
					this.unreceivePeopleNumber=res.data.unreceivePeopleNumber;
					uni.stopPullDownRefresh();
				}else{
					uni.$api.msg('没有更多数据了')
				}
			})
		},
		
		onPullDownRefresh() {
			this.page = 1
			activity_user({
				shop_id:this.shop_id,
				activity_id:this.activity_id,
				nucleus:1
			}).then(res=>{
				if(res.code==0){
					this.getDetail = res.data.list
					this.receivePeopleNumber=res.data.receivePeopleNumber;
					this.unreceivePeopleNumber=res.data.unreceivePeopleNumber;
					uni.stopPullDownRefresh();
				}
			})
		},
		
		onLoad(options) {
			let that = this
			that.activity_id = options.activity_id
			uni.getStorage({
				key: 'userInfo',
				success(res) {
					that.shop_id = res.data.shop_id
				}
			})
			
			activity_user({
				shop_id:that.shop_id,
				activity_id:that.activity_id,
				nucleus:1
			}).then(res=>{
				if(res.code==0){
					this.getDetail = res.data.list;
					this.receivePeopleNumber=res.data.receivePeopleNumber;
					this.unreceivePeopleNumber=res.data.unreceivePeopleNumber;
				}
			})
			
		},
		
	}
</script>

<style>
	page{
		background-color: #EEEEEE;
	}
	.fx {
		display: flex;
	}

	.guanzhu {
		padding: 24upx;
		border-top: 2upx solid #eee;
		/* border-bottom: 1upx solid #eee; */
	}

	.pd24 {
		padding: 24upx
	}
</style>
