WenWuGuanJia/index_fenbao/fuWu/paiMing/paiMing.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" title="志愿排名" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#000000"></u-navbar>

		<view class="tit_box">
			<view class="pm_tit">排名</view>
			<view class="pm_tit">志愿者</view>
			<view class="pm_tit">活跃度</view>
			<view class="pm_tit">任务达标率</view>
			<view class="pm_tit">积分</view>
			<view class="pm_tit">详情</view>
		</view>
		<view class="xx_box">
			<scroll-view style="height: 1000rpx" scroll-y="true" @scrolltolower="LoadMoress">
				<view class="xx_item" @click="detailsBtn(item.id)" v-for="(item, index) in information" :key="item.id">
					<view>
						{{ index + 1 }}
					</view>
					<view style="font-size: 32rpx; width: 106rpx">{{ item.name }}</view>
					<view style="width: 60rpx">{{ item.total_checkins }}</view>
					<view class="">{{ item.completion_rate }}</view>
					<view class="">{{ item.score }}</view>
					<view style="width: 75rpx; height: 40rpx; border: 2rpx solid #fabd7c; line-height: 40rpx; text-align: center">详情</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			page: 1,
			isLoading: false,
			// 信息列表
			information: []
		};
	},
	onLoad() {
		that = this;
		this.rankingList();
	},
	methods: {
		// 排名
		rankingList() {
			this.isLoading = true;
			this.$api.rankingList({ page: this.page, pageSize: '30', main_body_id: 1 }, function (res) {
				that.isLoading = false;
				that.information = [...that.information, ...res.data];
			});
		},
		LoadMoress() {
			if (this.isLoading) {
				return;
			} else {
				this.page++;
				this.rankingList();
			}
		},
		// 详情
		detailsBtn(id) {
			uni.navigateTo({
				url: '/index_fenbao/fuWu/paiMing/paiMingXQ?id=' + id
			});
		}
	}
};
</script>

<style>
.box {
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xy_bgt.png');
	background-repeat: repeat-y;
	background-attachment: fixed;
	background-size: 100% 100%;
	min-height: 100%;
	height: auto;
	/* background-color: #fff9e9; */
}
.tit_box {
	display: flex;
	align-items: center;
	height: 75rpx;
	justify-content: space-around;
	margin-top: 30rpx;
	background: url('/static/img/sj_top_bg.png') no-repeat;
	background-size: 100% 100%;
}

.pm_tit {
	font-size: 26rpx;
	font-weight: 400;

	line-height: 40rpx;
}
.xx_box {
	padding: 0 10rpx 0 10rpx;
}
.xx_item {
	display: flex;
	justify-content: space-between;
	margin-top: 40rpx;
	font-size: 28rpx;
	line-height: 44rpx;
}
</style>