zz--front/pages2/wd/ranking.vue

<template>
	<view style="position: relative;height: 100%;">
		<view style="width: 100%;"><image src="/static/rank_bg.png" style="width: 100%;position: relative;top: -80rpx;"></image></view>
		<view class="box">
			<view style="margin-top: 15rpx;display: flex;align-items: center;">
				<view class="leftTitle" style="width: 64rpx;font-size: 32rpx;color: #0183fe;margin-left: 31rpx;margin-right: 51rpx;">我的成绩</view>
				<view class="centerNameLogo" style="display: flex;align-items: center;">
					<image :src="userInfo != null ? $method.splitImgHost(userInfo.avatar) : ''" style="width: 80rpx;height: 80rpx;border-radius: 50%;margin-right: 22rpx;"></image>
					<span style="font-size: 32rpx;color: #32467b;font-weight: 800;width: 200rpx;">{{ userInfo.nickname }}</span>
				</view>
				<view v-if="current == 0" class="right_mc" style="display: flex;justify-content: center;flex: 1;">
					<view class="fie" v-if="info.rank > 0" style="display: flex;align-items: center;font-size: 28rpx;color: #0183fe;font-weight: 500;">
						<span>第{{ info.rank }}名</span>
						<view class="ics" style="margin: 0rpx 17rpx;width: 1rpx;height: 26rpx;background-color: #d9edff;border-radius: 1rpx;"></view>
						<span>{{ info.hourse === null ? '0' : info.hourse}}h</span>
					</view>
					<view v-else style="display: flex;align-items: center;font-size: 28rpx;color: #0183fe;font-weight: 500;">
						暂未上榜
					</view>
				</view>
				<view v-if="current == 1" class="right_mc" style="display: flex;justify-content: center;flex: 1;">
					<view class="fie" v-if="info2.rank > 0" style="display: flex;align-items: center;font-size: 28rpx;color: #0183fe;font-weight: 500;">
						<span>第{{ info2.rank }}名</span>
						<view class="ics" style="margin: 0rpx 17rpx;width: 1rpx;height: 26rpx;background-color: #d9edff;border-radius: 1rpx;"></view>
						<span>{{info2.hourse === null ? '0' : info2.hourse }}h</span>
					</view>
					<view v-else style="display: flex;align-items: center;font-size: 28rpx;color: #0183fe;font-weight: 500;">
						暂未上榜
					</view>
				</view>

				<!-- <u-row gutter="16" justify="center">
					<u-col span="2" text-align="center">
						<view class="r_t1" >
							我的<br>
							成绩
						</view>
					</u-col>
					<u-col span="6">
						<view style="vertical-align: middle;display: flex;">
							<image :src="userInfo!=null?$method.splitImgHost(userInfo.avatar):''" style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
							<view class="r_t2">{{userInfo.nickname}}</view>
						</view>
					</u-col>
					<u-col span="4" v-if="current==0">
						<view style="color: #0183FE;font-size: 28rpx;" >
							<view style="line-height: 80rpx;" v-if="info.rank>0">
								<text>第{{info.rank}}名</text>
								<text style="margin-left: 30rpx;">{{info.hourse}}h</text>
							</view>
							<view style="line-height: 80rpx;" v-else>
								<text>暂未上榜</text>
								
							</view>
						</view>
					</u-col>
					<u-col span="5" v-if="current==1">
						<view style="color: #0183FE;font-size: 28rpx;">
							<view style="line-height: 80rpx;">
								<text>第{{info2.rank}}名</text>
								<text style="margin-left: 30rpx;">{{info2.hourse}}h</text>
							</view>
						</view>
					</u-col>
				</u-row> -->
			</view>
			<view>
				<view><u-tabs :list="list" font-size="24" :current="current" @change="change" active-color="#32467B"></u-tabs></view>
				<view>
					<u-row>
						<u-col span="2" text-align="center"><view class="rank_t3">排名</view></u-col>
						<u-col span="8"><view class="rank_t3">姓名</view></u-col>
						<u-col span="2"><view class="rank_t3">时长</view></u-col>
					</u-row>
				</view>
				<scroll-view class="main-scroll" scroll-y>
					<view v-for="(item, index) in list2" :key="index" class="rank_item" v-if="current == 0">
						<u-row>
							<u-col span="2" text-align="center">
								<view class="rank_t3">
									<image src="/static/sort_1.png" class="rank_img" v-if="index == 0"></image>
									<image src="/static/sort_2.png" class="rank_img" v-if="index == 1"></image>
									<image src="/static/sort_3.png" class="rank_img" v-if="index == 2"></image>
									<view v-if="index > 2" class="rank_t5">{{ index + 1 }}</view>
								</view>
							</u-col>
							<u-col span="8">
								<view style="vertical-align: middle;display: flex;">
									<image :src="$method.splitImgHost(item.avatar)" style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
									<view class="rank_t4" style="padding-left: 30rpx;">{{ item.nickname }}</view>
								</view>
							</u-col>
							<u-col span="2" text-align="left">
								<view class="rank_t4">{{ item.hourse }}</view>
							</u-col>
						</u-row>
					</view>
					<view v-for="(item, index) in list3" :key="index" class="rank_item" v-if="current == 1">
						<u-row>
							<u-col span="2" text-align="center">
								<view class="rank_t3">
									<image src="/static/sort_1.png" class="rank_img" v-if="index == 0"></image>
									<image src="/static/sort_2.png" class="rank_img" v-if="index == 1"></image>
									<image src="/static/sort_3.png" class="rank_img" v-if="index == 2"></image>
									<view v-if="index > 2" class="rank_t5">{{ index + 1 }}</view>
								</view>
							</u-col>
							<u-col span="8">
								<view style="vertical-align: middle;display: flex;">
									<image :src="$method.splitImgHost(item.avatar)" style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
									<view class="rank_t4" style="padding-left: 30rpx;">{{ item.nickname }}</view>
								</view>
							</u-col>
							<u-col span="2" text-align="left">
								<view class="rank_t4">{{ item.hourse }}</view>
							</u-col>
						</u-row>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			list: [
				{
					name: '日榜'
				},
				{
					name: '总榜'
				}
			],
			current: 0,
			list2: [],
			list3: [],
			info: {
				hourse: 0,
				rank: 0
			},
			info2: {
				hourse: 0,
				rank: 0
			}
		};
	},
	onLoad(option) {
		this.rankList();
		this.rankList2();
	},
	onShow() {},
	methods: {
		change(index) {
			this.current = index;
		},
		rankList() {
			let self = this;
			this.$api.rankList({ status: 0 }).then(res => {
				self.info = res.data.data;
				self.list2 = res.data.data.ranKingUsers;
			});
		},
		rankList2() {
			let self = this;
			this.$api.rankList({ status: 1 }).then(res => {
				self.info2 = res.data.data;
				self.list3 = res.data.data.ranKingUsers;
				console.log(self.info2, 333);
			});
		}
	},
	computed: { ...mapGetters(['userInfo']) }
};
</script>

<style scope>
.main-scroll {
	position: absolute;
	left: 0;
	right: 0;
	top: 300rpx;
	bottom: 0;
}
.rank_t5 {
	color: #aab1b9;
	text-align: center;
}
.rank_t3 {
	line-height: 80rpx;
}
.rank_t4 {
	line-height: 80rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #32467b;
}
.rank_item {
	height: 100rpx;
	vertical-align: middle;
	padding: 0 25rpx;
}
.rank_img {
	width: 54rpx;
	height: 54rpx;
}
.rank_list {
	width: 100%;
	height: 100%;
	position: relative;
}
.rank_t3 {
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #959ea8;
}
.r_t2 {
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #32467b;
	line-height: 80rpx;
	margin-left: 30rpx;
}
.r_t1 {
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #0183fe;
}

page {
	background: #ffffff;
	height: 100%;
}
.box {
	height: 75%;
	width: 100%;
	border-top-right-radius: 32rpx;
	border-top-left-radius: 32rpx;
	z-index: 999;
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
	padding: 25rpx;
}
</style>