WeChatAppH5/pages/task/ranking.vue

<template>
	<view class="">
		<nav-bar title="排行榜" goBack />
		<view class="ranking-lable">
			<view :class="['ranking-lable-item' , activeRankingLable === 'thisMonth' ? 'active-ranking-lable' :'' ]"
				@click.stop="onRanking('thisMonth')" style="margin-right: 60rpx;">月度排行</view>
			<view :class="['ranking-lable-item' , activeRankingLable === 'thisYear' ? 'active-ranking-lable' :'' ]"
				style="margin-left: 60rpx;" @click.stop="onRanking('thisYear')">年度排行
			</view>
		</view>
		<view class="ranking-list-box">
			<view class="ranking-title">
				<text class="ranking-v title-rank">排名</text>
				<text class="ranking-v title-user zw-one-row">用户</text>
				<text class="ranking-v title-num zw-one-row">已完成数量</text>
			</view>
			<view class="ranking-item" v-for="(item , index) in RankingList">
				<view class="title-rank">
					<template v-if="index <= 2">
						<image :src="`./static/ranking-${index + 1}.png`" mode="aspectFit"></image>
					</template>
					<template v-else>
						{{index + 1}}
					</template>
				</view>
				<view class="title-user zw-one-row">
					<image :src="item.headPhoto || $defaultHadPhoto" mode="aspectFit"></image>
					<text class="zw-one-row">{{ item.nickname }}</text>
				</view>
				<view class="title-num zw-one-row">
					{{ item.num }}
				</view>
			</view>

			<view class="empty-data" v-if="(!RankingList || RankingList.length===0) && loading ">
				<EmptyDate />
			</view>
		</view>

		<view class="my-ranking-box" v-if="myRanking">
			<view class="my-ranking">
				<view class="title-rank">
					<image src="./static/no-rank.png" mode="aspectFit"></image>
				</view>
				<view class="title-user zw-one-row">
					<image :src="myRanking.headPhoto || $defaultHadPhoto" mode="aspectFit"></image>
					<text class="zw-one-row">{{ myRanking.nickname }}</text>
				</view>
				<view class="title-num zw-one-row">
					{{ myRanking.num }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getRankingList_Api,
		myRanking_Api
	} from '@/api/task.js'
	export default {
		data() {
			return {
				config: {
					back: true,
					title: '排行榜',
					color: 'black',
					backgroundColor: [1, '#fff'],
					statusBarFontColor: 'black'
				},
				activeRankingLable: '',
				RankingList: [],
				myRanking: null,
				loading: false

			}
		},
		onLoad() {
			this.onRanking();
		},
		methods: {
			onRanking(type = 'thisMonth') {
				this.activeRankingLable = type;
				this.RankingList = [];
				this.myRanking = null;
				this.getRankingList()
			},
			getRankingList() {
				this.loading = false
				getRankingList_Api({
					limit: 50,
					mode: this.activeRankingLable
				}).then(res => {
					this.RankingList = res.data || [];
					if (this.RankingList && this.RankingList.length > 0) {
						this.getMyRanking()
					}

				}).finally(() => {
					this.loading = true
				})
			},
			getMyRanking() {
				myRanking_Api({
					limit: 50,
					mode: this.activeRankingLable
				}).then(res => {
					const data = res.data;
					if (data) {
						try {
							this.RankingList.forEach((el, index) => {
								if (el.id === data.id) {
									data.ranVal = index + 1;
									this.myRanking = null
									throw new Error()
								}
							})
						} catch (e) {
							//TODO handle the exception
							return
						}
						this.myRanking = data
					}

					// this.myRanking = res.data || null
				})
			}

		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.ranking-lable {
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: center;
		// background-color: red;

		.ranking-lable-item {
			height: 90rpx;
			line-height: 90rpx;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: Regular;
			color: #1a1a1a;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				right: 0;
				height: 4rpx;
				border-radius: 2rpx;
			}
		}

		.active-ranking-lable {
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: Bold;
			color: #3bb7ce;

			&::before {
				background-color: #3BB7CE;
			}
		}
	}

	.ranking-list-box {
		width: 100%;
		padding: 0 60rpx 100rpx 40rpx;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0px 0px;

		.ranking-title {
			width: 100%;
			height: 88rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			.title-user {
				padding-left: 146rpx;
			}

			.ranking-v {
				font-size: 28rpx;
				// font-family: .PingFang SC, .PingFang SC-Light;
				font-weight: Light;
				color: #1a1a1a;
			}
		}

		.ranking-item {
			width: 100%;
			height: 133rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #e6e6e6;

			.title-rank {
				text-align: center;

				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: Regular;
				color: #1a1a1a;

				image {
					width: 75rpx;
					height: 75rpx;
				}
			}


			.title-num {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: Regular;
				color: #3fbbd1;
			}
		}
	}

	.ranking-item,
	.my-ranking {
		.title-user {
			display: flex;
			align-items: center;

			image {
				width: 75rpx;
				height: 75rpx;
				flex-shrink: 0;
			}

			text {
				padding-left: 30rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: Regular;
				text-align: left;
				color: #1a1a1a;
			}
		}

	}

	.title-rank {
		width: 75rpx;
		flex-shrink: 0;
	}

	.title-user {
		width: calc(100% - 75rpx - 180rpx);
		padding: 0 20rpx;

		image {
			border-radius: 50%;
		}
	}

	.title-num {
		width: 180rpx;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: Regular;
		color: #3fbbd1;
	}

	.my-ranking-box {
		width: 100%;
		height: 158rpx;
		// background-color: #F5F5F5;

		.my-ranking {
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;
			background-color: #fff;
			height: 148rpx;
			display: flex;
			flex-direction: row;
			padding: 0 60rpx 0 25rpx;
			box-shadow: 0px 0px 0px 20rpx #F5F5F5;

			.title-rank {
				width: 90rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;

				image {
					width: 90rpx;
					height: 37rpx;
				}

				.title-rank-icon {
					margin-left: 15rpx;
					width: 75rpx;
					height: 75rpx;
				}

			}
		}
	}
</style>