YwxAppThink/addon/wxchat/YwxMakeFriends/pages/my/ranking.uvue

<template>
	<view class="page">
		<view class="tabs">
			<view class="tab" :class="{ active: type === 'charm' }" @click="switchTab('charm')">
				<text>魅力榜</text>
			</view>
			<view class="tab" :class="{ active: type === 'rich' }" @click="switchTab('rich')">
				<text>财富榜</text>
			</view>
		</view>

		<scroll-view direction="vertical" :show-scrollbar="false" style="flex:1;"
			:refresher-enabled="true" :refresher-triggered="refreshing" @refresherrefresh="onRefresh">
			<view class="list">
				<view v-for="(u, idx) in list" :key="idx" class="rank-item" @click="openUser(u)">
					<view class="rank-no" :class="'top' + u.rank">
						<text v-if="u.rank <= 3">{{ ['', '①', '②', '③'][u.rank] }}</text>
						<text v-else>{{ u.rank }}</text>
					</view>
					<image class="rank-avatar" :src="imgUrl(u.avatar)" mode="aspectFill"></image>
					<view class="rank-info">
						<text class="rank-name">{{ u.nickname }}</text>
					</view>
					<view class="rank-value">
						<text class="value-num">{{ u.value }}</text>
						<text class="value-unit">{{ type === 'rich' ? '金币' : '粉丝' }}</text>
					</view>
				</view>

				<view v-if="list.length === 0 && !loading" class="empty-state">
					<uni-icons type="list" size="60" color="#ddd"></uni-icons>
					<text class="empty-text">暂无排行数据</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="uts">
	import Api from '@/common/api-service.uts'

	const BASE = 'https://dev.xixingwl.cn'

	type IRank = {
		rank : number
		uid : number
		nickname : string
		avatar : string
		value : number
		coins : number
	}

	const type = ref<string>('charm')
	const list = reactive<IRank[]>([])
	const loading = ref<boolean>(false)
	const refreshing = ref<boolean>(false)

	function imgUrl(src : string) : string {
		if (! src) return ''
		return src.startsWith('http') ? src : (BASE + src)
	}

	function switchTab(t : string) {
		if (type.value === t) return
		type.value = t
		loadData()
	}

	function openUser(u : IRank) {
		uni.navigateTo({ url: '/pages/user/profile?uid=' + u.uid })
	}

	function loadData() {
		if (loading.value) return
		loading.value = true
		Api.user.ranking({ type: type.value })
			.then((res : UTSJSONObject) => {
				const arr = (res.get('list') as Array<IRank>) ?? []
				list.splice(0, list.length)
				arr.forEach((u : IRank) => list.push(u))
			})
			.catch(() => {
				uni.showToast({ title: '加载失败', icon: 'none' })
			})
			.finally(() => {
				loading.value = false
				refreshing.value = false
			})
	}

	function onRefresh() {
		refreshing.value = true
		loadData()
	}

	onMounted(() => { loadData() })
	onShow(() => { loadData() })
</script>

<style lang="scss">
	.page {
		flex: 1;
		background-color: #f7f7f7;
		display: flex;
		flex-direction: column;
	}

	.tabs {
		display: flex;
		flex-flow: row nowrap;
		background-color: #fff;
		padding: 16rpx 0;
	}

	.tab {
		flex: 1;
		text-align: center;
		font-size: 30rpx;
		color: #999;
		padding: 12rpx 0;
		position: relative;
	}

	.tab.active {
		color: #FF6B6B;
		font-weight: bold;
	}

	.tab.active::after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		width: 48rpx;
		height: 6rpx;
		border-radius: 3rpx;
		background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
	}

	.list {
		margin: 24rpx 30rpx;
	}

	.rank-item {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 16rpx;
	}

	.rank-no {
		width: 56rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #999;
	}

	.rank-no.top1 { color: #FF9500; }
	.rank-no.top2 { color: #FF6B6B; }
	.rank-no.top3 { color: #AF52DE; }

	.rank-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #f0f0f0;
		margin: 0 20rpx;
	}

	.rank-info {
		flex: 1;
	}

	.rank-name {
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
	}

	.rank-value {
		display: flex;
		flex-flow: row nowrap;
		align-items: baseline;
	}

	.value-num {
		font-size: 34rpx;
		font-weight: bold;
		color: #FF6B6B;
	}

	.value-unit {
		font-size: 22rpx;
		color: #999;
		margin-left: 4rpx;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 120rpx 0;
	}

	.empty-text {
		font-size: 28rpx;
		color: #bbb;
		margin-top: 20rpx;
	}
</style>