chore: 重写初始提交(清空历史,整理后全量提交)
This commit is contained in:
ywxapp
@@ -0,0 +1,215 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user