HaniBlindBox/honey_box/pages/shouye/yaoqing_ranking.vue

<template>
	<page-container title="邀请排行榜" :showBack="true">
		<view class="content-container">
			<image :src="$img('/static/image/reward_rule.png')" style="width: 686rpx; height: 120rpx; margin-top: 30rpx;"
				@click="$refs.rulePop.getRule(25, '规则说明')" mode=""></image>

			<view class="top-three" v-if="list.length > 0">
				<!-- 第二名 -->
				<view class="common_bg second-place"
					:style="{ 'background-image': `url(${$img('/static/image/invite2.png')})` }">
					<image :src="topThree[1].headimg" class="avatar"></image>
					<text class="hang1 nickname">{{ topThree[1].nickname }}</text>
					<text class="hang1 value">{{ topThree[1].value }}<text class="unit">人</text></text>
				</view>

				<!-- 第一名 -->
				<view class="common_bg first-place"
					:style="{ 'background-image': `url(${$img('/static/image/invite1.png')})` }">
					<image :src="topThree[0].headimg" class="avatar"></image>
					<text class="hang1 nickname">{{ topThree[0].nickname }}</text>
					<text class="hang1 value">{{ topThree[0].value }}<text class="unit">人</text></text>
				</view>

				<!-- 第三名 -->
				<view class="common_bg third-place"
					:style="{ 'background-image': `url(${$img('/static/image/invite3.png')})` }">
					<image :src="topThree[2].headimg" class="avatar"></image>
					<text class="hang1 nickname">{{ topThree[2].nickname }}</text>
					<text class="hang1 value">{{ topThree[2].value }}<text class="unit">人</text></text>
				</view>
			</view>

			<view class="ranking-list">
				<view class="ranking-item" v-for="(item, index) in restList" :key="index"
					:style="{ backgroundColor: setBgColor(index + 3) }">

					<view class="rank-number">
						{{ index + 4 }}
					</view>

					<view class="" style="width: 94rpx; height: 94rpx; margin-left: 30rpx;">
						<image :src="item.headimg" style="width: 94rpx; height: 94rpx; border-radius: 50%;"></image>
					</view>
					<view class="" style="display: flex; flex-direction: column; margin-left: 28rpx;flex: 1;">
						<text style="font-size: 20rpx; color: #333333;">{{ item.nickname }}</text>
					</view>
					<view class="" style="margin-right: 20rpx;">
						<span style="color: #333333; font-size: 32rpx;">{{ item.value }}<text
								style="font-size: 16rpx; color: #8A8A8A;">人</text></span>
					</view>
				</view>
			</view>

			<view class="bottom-btn">
				<view class="invite-btn" @click="$c.nav('/pages/user/tui-guang')">
					<text>立即邀请</text>
				</view>
			</view>
		</view>
		<rule-pop ref="rulePop"></rule-pop>
	</page-container>
</template>

<script>
import { getAdvert } from '@/common/server/config'
import { getInviteRank } from '@/common/server/rank'
export default {
	data() {
		var list;
		return {
			advert: [], //轮播图
			list: [],
			colors: ['#F8DE61', '#E0E0E0', '#E5967F', '#F8F8F8'],
		}
	},
	computed: {
		topThree() {
			return this.list.slice(0, 3);
		},
		restList() {
			return this.list.slice(3);
		}
	},
	onLoad() {
		this.load();
	},
	methods: {
		async load() {
			const advert = await getAdvert(4)
			this.advert = advert
			
			const res = await getInviteRank()
			console.log(res);
			if (res.status == 1) {
				this.list = res.data
				if (this.list.length < 3) {
					let l = 3 - this.list.length;
					for (let i = 0; i < l; i++) {
						this.list.push({
							nickname: "虚位以待",
							value: 0
						});
					}
					console.log(this.list);

				}
			}
		},

		setBgColor(index) {
			if (index == 0) {
				return this.colors[index];
			} else if (index == 1) {
				return this.colors[index];
			} else if (index == 2) {
				return this.colors[index];
			} else {
				return this.colors[3];
			}
		},
	}
}
</script>

<style lang="scss">
.content-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 30rpx;
	box-sizing: border-box;
}

.top-three {
	width: 100%;
	height: 480rpx;
	margin-top: 20rpx;
	display: flex;
	flex-direction: row;
	justify-content: center;
	
	.common_bg {
		width: 200rpx;
		height: 379rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	
	.avatar {
		width: 94rpx;
		height: 94rpx;
		border-radius: 50%;
		margin-top: 38rpx;
	}
	
	.nickname {
		width: 100%;
		text-align: center;
		margin-top: 24rpx;
	}
	
	.value {
		width: 100%;
		text-align: center;
		margin-top: 24rpx;
		font-size: 32rpx;
	}
	
	.unit {
		font-size: 16rpx;
	}
	
	.first-place {
		margin-top: 10rpx;
	}
	
	.second-place, .third-place {
		margin-top: 52rpx;
	}
	
	.second-place {
		margin-right: 42rpx;
	}
	
	.third-place {
		margin-left: 42rpx;
	}
}

.ranking-list {
	width: 100%;
	margin-bottom: 260rpx;
	display: flex;
	flex-direction: column;
	overflow: auto;
}

.ranking-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 30rpx;
	border-radius: 14rpx;
	padding-top: 15rpx;
	padding-bottom: 15rpx;
}

.rank-number {
	width: 43rpx;
	height: 47rpx;
	color: #333333;
	text-align: center;
	margin-left: 32rpx;
}

.bottom-btn {
	position: fixed;
	bottom: 0px;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	width: 100%;
}

.invite-btn {
	width: 386rpx;
	height: 102rpx;
	background-color: #D8FD24;
	border-radius: 26rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	
	text {
		font-size: 32rpx;
		color: #333333;
		font-weight: 600;
	}
}
</style>