WenWuGuanJia/answer_pages/examine/top.vue

<template>
	<view class="wrap">
		<u-navbar title="答题榜单" :placeholder="true" bgColor="rgba(255,255,255,0.3)" leftText="返回" :autoBack="true" titleStyle="font-weight:bold;color:#7a5831"></u-navbar>
		<view class="top-bg">
			<image src="https://huli-app.wenlvti.net/app_static/wuyuan/static/static/imgs/top_bg.png" mode="widthFix"></image>
		</view>

		<view class="main">
			<scroll-view class="top-scroll" scroll-y scroll-with-animation :lower-threshold="100" @scrolltolower="onScrollToLower" :style="{ height: scrollHeight + 'px' }">
				<!-- 数据列表 -->
				<view class="user-list">
					<view class="b-item" v-for="(item, index) in userData.items" :key="index">
						<view class="b-sort">
							<image :src="'https://huli-app.wenlvti.net/app_static/wuyuan/static/static/imgs/top_' + (index + 1) + '.png'" mode="aspectFit" v-if="index < 3"></image>
							<text v-else>{{ index + 1 }}</text>
						</view>
						<view class="b-avatar">
							<image :src="item.avatar_url || '/static/imgs/user.png'" mode="aspectFill"></image>
						</view>
						<view class="b-user">
							<view class="s-name">{{ item.name }}</view>
							<view class="s-org">{{ item.group_name }}</view>
						</view>
						<view class="b-data">
							<view class="s-score">{{ item.max_score }}分</view>
							<view class="s-time">{{ costTime(item.cost_time) }}</view>
						</view>
					</view>
				</view>
				<!-- 加载中 -->
				<load-more :loadingType="loadingType" :loadingText="loadingText"></load-more>
			</scroll-view>
		</view>

		<view class="navbar">
			<view class="b-mine" @click="onGoLast('max', mineData.max_sid)">
				<view class="s-tit1">第</view>
				<view class="s-num">{{ mineData.group_top }}</view>
				<view class="s-tit2">名</view>
				<view class="s-mine">
					<image :src="mineData.avatar_url || '/static/imgs/user.png'" mode="aspectFill"></image>
				</view>
				<view class="s-score">{{ mineData.max_score }}分</view>
				<view class="s-time">{{ costTime(mineData.cost_time) }}</view>
			</view>
			<picker class="b-group" @change="onFilter" :value="groupIndex" :range="groupList" range-key="name">
				<view class="b-main">
					<view class="s-icon iconfont icon-unfold"></view>
					<view class="s-name">{{ groupList[groupIndex].name }}排行</view>
				</view>
			</picker>
		</view>
	</view>
</template>

<script>
import { getTopList, getMineTop } from '@/service/api/examine.js';
import Util from '../../common/util';
import mixinsCommon from '@/mixins/common.js';
import mixinsAuth from '../../mixins/auth.js';
// import noneData from '@/components/none-data/none-data.vue';
// import loadMore from '@/components/load-more/load-more.vue';
export default {
	mixins: [mixinsCommon, mixinsAuth],
	data() {
		return {
			hasLoad: false,
			refreshTime: 0,
			scrollHeight: 100,
			userData: {
				items: []
			},
			mineData: {},
			groupList: [
				{
					id: 0,
					name: '全部'
				}
			],
			groupIndex: 0,
			loadingType: 1,
			loadingText: ''
		};
	},
	onLoad(options) {
		// switchTab不支持传参，单页才有效
		console.log('onLoad', options);
		this.initScrollHeight();
		if (this.$store.state.examine.topGroupId == -1) {
			const groupId = options.groupId || 0;
			this.refreshTime = Util.getTimestamp();
			this.loadTopList(groupId, true);
			this.loadMineTop(groupId, true);
		}
	},
	onShow() {
		// switchTab时通过这种方式传参
		console.log('onShow', this.$store.state.examine.topGroupId);
		const groupId = this.$store.state.examine.topGroupId;
		if (groupId != -1) {
			this.$store.commit('examine/delTopGroupId');
			this.refreshTime = Util.getTimestamp();
			this.loadTopList(groupId, true);
			this.loadMineTop(groupId, true);
		} else {
			if (this.hasLoad) {
				const timestamp = Util.getTimestamp();
				if (timestamp - this.refreshTime >= 5) {
					this.refreshTime = timestamp;
					this.loadTopList(this.groupList[this.groupIndex].id, true);
					this.loadMineTop(this.groupList[this.groupIndex].id, false);
				}
			}
		}
	},
	computed: {},
	methods: {
		loadTopList(group, refresh) {
			console.log('loadTopList', group, refresh);
			if (refresh) {
				this.page = 1;
				this.userData.items = [];
			} else {
				this.page++;
			}
			this.loadingType = 1;
			this.loadingText = '';
			getTopList(group, this.page, 10).then(([err, res]) => {
				console.log('getTopList', err, res);
				this.loadingType = -1;
				this.hasLoad = true;
				if (!err) {
					if (res.items.length > 0) {
						this.userData.items = [...this.userData.items, ...res.items];
					} else {
						this.loadingType = 2;
						if (this.page == 1) {
							this.loadingText = '暂无数据';
						}
						this.page--; // 重置分页
					}
				} else {
					this.loadingType = 3;
				}
			});
		},
		loadMineTop(group, init) {
			console.log('loadMineTop', group, init);
			getMineTop(group).then(([err, res]) => {
				console.log('getMineTop', err, res);
				if (!err) {
					this.mineData = res.mineData;
					this.groupList = res.userGroups;
					if (init) {
						this.groupList.map((item, index) => {
							if (item.id == group) {
								this.groupIndex = index;
							}
						});
					}
				}
			});
		},
		onFilter(e) {
			console.log('onFilter', e.detail.value);
			this.groupIndex = e.detail.value;
			this.loadTopList(this.groupList[this.groupIndex].id, true);
			this.loadMineTop(this.groupList[this.groupIndex].id, false);
		},
		initScrollHeight() {
			const systemInfo = uni.getSystemInfoSync();
			const windowHeight = systemInfo.windowHeight;
			const searchBarHeight = this.$logic.rpx2px(360);
			this.scrollHeight = windowHeight - searchBarHeight;
		},
		onScrollToLower(e) {
			console.log('onScrollToLower', e);
			this.loadTopList(this.groupList[this.groupIndex].id, false);
		},
		onGoLast(from, sessionId) {
			if (!sessionId) {
				return;
			}
			uni.navigateTo({
				url: '/answer_pages/examine/summary?from=' + from + '&session_id=' + sessionId
			});
		}
	}
};
</script>

<style lang="scss">
// page {
// 	padding-bottom: env(safe-area-inset-bottom);
// 	background: $pq-bg-color;
// }

.wrap {
}

.top-bg {
	position: relative;

	image {
		width: 100%;
		height: 460upx;
	}
}

.main {
	padding: 40upx 40upx 160upx 40upx;
	display: flex;
	flex-direction: column;
}

.top-scroll {
	margin-top: -250upx;
	padding-bottom: 20upx;
	position: relative;
	width: 670upx;
	height: 100%;
	background: #fff;
	border-radius: 20upx;
	z-index: 100;
}

.user-list {
	padding: 40upx 40upx 20upx 10upx;

	.b-item {
		margin-bottom: 50upx;
		height: 100upx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		&:last-child {
			margin-bottom: 0;
		}

		.b-sort {
			width: 100upx;
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				font-size: 36upx;
				color: #808080;
			}

			image {
				width: 60upx;
				height: 60upx;
			}
		}

		.b-avatar {
			width: 100upx;
			height: 100upx;

			image {
				width: 100upx;
				height: 100upx;
				border-radius: 50%;
			}
		}

		.b-user {
			margin-left: 20upx;
			flex: 1;
			display: flex;
			flex-direction: column;

			.s-name {
				font-size: 32upx;
			}

			.s-org {
				margin-top: 10upx;
				font-size: 26upx;
				color: #a6a6a6;
			}
		}

		.b-data {
			display: flex;
			flex-direction: column;
			align-items: flex-end;

			.s-score {
				color: #ffc300;
				font-size: 40upx;
			}

			.s-time {
				margin-top: 10upx;
				color: #a6a6a6;
				font-size: 24upx;
			}
		}
	}
}

.navbar {
	position: fixed;
	z-index: 999;
	left: 0;
	/* #ifdef  H5 */
	bottom: calc(100upx + env(safe-area-inset-bottom));
	/* #endif */
	/* #ifdef  MP-WEIXIN */
	bottom: 0upx;
	/* #endif */
	width: 100%;
	height: 120upx;
	display: flex;
	align-items: center;
	background: #fff;
	border-top: 1upx solid #f7f7f7;
	justify-content: space-between;

	.b-mine {
		margin-left: 20upx;
		display: flex;
		align-items: center;

		.s-tit1,
		.s-tit2 {
			color: #808080;
			font-size: 28upx;
		}

		.s-num {
			margin: 0 10upx;
			font-size: 50upx;
			color: #da5650;
			font-weight: bold;
		}

		.s-mine {
			margin-left: 20upx;
			width: 70upx;
			height: 70upx;

			image {
				width: 70upx;
				height: 70upx;
				border-radius: 50%;
			}
		}

		.s-score {
			margin-left: 20upx;
			color: #ffc300;
			font-size: 36upx;
		}

		.s-time {
			margin-left: 20upx;
			color: #808080;
			font-size: 24upx;
		}
	}

	.b-group {
		margin-right: 20upx;

		.b-main {
			padding: 0 20upx;
			display: flex;
			align-items: center;
			background: $pq-bg-color;
			border-radius: 30upx;
			height: 60upx;

			.s-icon {
				color: #a6a6a6;
				font-size: 30upx;
			}

			.s-name {
				margin-left: 10upx;
				font-size: 28upx;
				color: #a6a6a6;
			}
		}
	}
}
</style>