xiaoyou-h5/pages/activity/more.vue

<template>
	<view class="list">
		<view class="empty"  v-if="active_list== undefined||active_list.length == 0">
			<u-empty text="暂无内容哦!" mode="list">	</u-empty>
		</view>
		<view class="list-item" v-for="(item,index) in active_list" :key='index'>
			<view class="img">
				<image :src="item.user ? item.user.headimg : '../../static/images/avater.jpg'" mode=""></image>
			</view>
			<view class="right">
				<text>{{item.user.name}}</text>
				<view class="label">
					<text class="sex">{{item.user.account}}</text>
					<!-- <text class="degree">{{item.degree}}</text> -->
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data(){
			return{
				active_list:[],
				page: 1,
				last: false
			}
		},
		onLoad(options) {
		
			let id=options.id
			this.getActiveList(id)
		
		},
		onReachBottom() {
			if (!this.last) {
				this.page++
				
			}
			this.getActiveList()
		},
		methods:{
			
			getActiveList(id){
				this.$u.get('/page/activities-sign-ups',{activity_id:id,page:this.page}).then(res=>{
			
					let data = res.data.data
					if (this.page > 1 && data.length == 0) {
						uni.showToast({
							title: '暂无更多',
							icon: 'none'
						})
						this.last = true
					} else {
						this.active_list = this.active_list.concat(data)
					}
					
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F9F9FB;
	}

	.list {
		padding: 15px;
		.empty{
			height: 90vh;
		}
		.list-item {
			padding: 12px 20px;
			border-radius: 10px;
			box-shadow: 0px 8px 12px rgba(12, 20, 61, 0.06);
			display: flex;
			align-items: center;
			margin-bottom: 10px;

			.img {
				width: 55px;
				height: 55px;
				border-radius: 50%;
				overflow: hidden;
				margin: 0 8px 0 20px;

				image {
					width: 55px;
					height: 55px;
				}
			}

			.right {
				text {
					font-size: 15px;
					font-family: Graphit;
					font-weight: 500;
					color: #282828;
				}

				.label {
					margin-top: 8px;

					text {
						display: inline-block;
						
						height: 18px;
						line-height: 18px;
						text-align: center;
						// background: #E7E2DD;
						border-radius: 9px;
						font-size: 12px;
						font-family: PingFang HK;
						font-weight: 400;
						color: #674023;
						margin-right: 8px;
					}
				}
			}
		}
	}
</style>