<template>
    <view class="pages">
        <view v-if="tableList.length == 0" style="text-align: center;margin-top: 60rpx;color:#808080;">暂无数据</view>
        <view class="contents">
            <view class="box" v-for="(item,index) in tableList" :key="index">
                <view style="width:50%">
                    <view class="title">
                        姓名：{{item.signUpName}}
                    </view>
                    <view class="desc">
                        <view>手机号：{{item.signUpPhone}}</view>
                    </view>
                </view>
                <view class="more">
                    <view class="icon-more">{{item.signUpTime}}</view>
                </view>
            </view>
        </view>
        <!-- 加载提示 -->
        <view v-if="isLoading" style="text-align: center; padding: 20rpx;">加载中...</view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            tableList: [],
            pageindex: {
                activityApplicationId: '',
                pageNumber: 0,
                pageSize: 20,
            },
            isLoading: false, // 加载状态
        };
    },
    onLoad(option) {
        this.pageindex.activityApplicationId = option.ids
        this.getALL();
    },
    onReachBottom() {
        // 滚动到底部时加载更多数据
        this.loadMoreData();
    },
    methods: {

        getALL() {
            this.isLoading = true;
            this.$http.sendRequest('/cereActivityApplicationSignUp/queryByPage', 'POST', this.pageindex, 1).then(res => {
                this.tableList = res.data.data.content;
                this.isLoading = false;
            });
        },
        loadMoreData() {
            if (this.isLoading) return; // 如果正在加载，不重复请求
            this.isLoading = true;
            this.pageindex.pageNumber++;
            this.$http.sendRequest('/cereActivityApplicationSignUp/queryByPage', 'POST', this.pageindex, 1).then(res => {
                this.tableList = this.tableList.concat(res.data.data.content);
                this.isLoading = false;
            });
        },
    },
};
</script>


<style lang="scss" scoped>
	.more{
		text-align: right;
		.more-num {
			display: inline-block;
			background-color: #f04746;
			border-radius: 100rpx;
			color: #fff;
			font-size: 20rpx;
			width: 36rpx;
			height: 36rpx;
			text-align: center;
			line-height: 36rpx;
		}
		.icon-more {
			margin-top: 14rpx;
			font-size: 28rpx;
			color: #afafaf;
		}
	}
	.pages {
		width: 100vw;
		height: 100%;
		position: relative;
		overflow-y: auto;
		background-color: #f6f6f6;

		.contents {
			width: 100%;

			background-color: #fff;
			margin-top: 20rpx;

			.box {
				width: 94%;
				margin: 0 auto;
				padding: 28rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-size: 28rpx;
					font-weight: bold;
				}

				.time {
					margin: 20rpx 0;
					color: #888D9C;
					font-size: 24rpx;
				}

				.desc {
					color: #888D9C;
					font-size: 24rpx;
					text-align: justify;
					margin-top: 10px;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style>