293 lines
7.0 KiB
Vue
293 lines
7.0 KiB
Vue
<template>
|
|
<view class="container">
|
|
<scroll-view class="scroll-list-view" scroll-y="true" scroll-with-animation>
|
|
<view class="header">
|
|
<image src="@/static/rank/back.png" mode="" class="back-icon" @click="goBack"></image>
|
|
<!-- <view class="rank-darw" @click="darwCk">上期奖励</view> -->
|
|
</view>
|
|
<view v-if="rankingList.length === 0" style="padding-top: 200rpx;">
|
|
<empty></empty>
|
|
</view>
|
|
|
|
<view class="list">
|
|
<view class="list-item" v-for="(item, index) in rankingList" :key="index">
|
|
<view class="rank-num">
|
|
<image src="@/static/rank/l-dym.png" mode="" v-if="item.num == 1" class="num-icon"></image>
|
|
<image src="@/static/rank/l-dem.png" mode="" v-else-if="item.num == 2" class="num-icon"></image>
|
|
<image src="@/static/rank/l-dsm.png" mode="" v-else-if="item.num == 3" class="num-icon"></image>
|
|
<rankNumCom :rank="item.num" v-else></rankNumCom>
|
|
</view>
|
|
|
|
<view class="rank-avatar">
|
|
<image :src="item.avatarResource.url" mode="" class="rank-avatar-icon"></image>
|
|
</view>
|
|
<view class="rank-detail">
|
|
<view class="detail">
|
|
<view class="name">{{ item.nickname | maskString }}</view>
|
|
<view class="point">{{ item.points }}积分</view>
|
|
</view>
|
|
<view class="prize" v-if="item.rewardEntityList.length > 0">
|
|
<template v-for="(childItem,childIndex) in item.rewardEntityList">
|
|
<!-- {{Number(childItem.info.salePrice)}}元 -->
|
|
{{childItem.info.abbreviation}}
|
|
<text v-if="childIndex+1 < item.rewardEntityList.length">、</text>
|
|
</template>
|
|
|
|
</view>
|
|
<!-- <view class="prize">{{ item.nickname }}</view> -->
|
|
</view>
|
|
</view>
|
|
<template v-if="Object.keys(selfData).length > 0">
|
|
<view style="height: 180rpx;"></view>
|
|
<view class="self">
|
|
<view class="self-info">
|
|
<view class="self-avatar">
|
|
<image :src="selfData.avatarResource.url" mode="" class="self-avatar-icon"></image>
|
|
</view>
|
|
<view class="self-num">
|
|
我的排名：
|
|
<span v-if="selfData.num == -1" class="self-num-txt">999+</span>
|
|
<template v-else>
|
|
<rankNumCom :rank="selfData.num"></rankNumCom>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
<view class="self-point">{{ selfData.points }}积分</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</scroll-view>
|
|
<!-- 榜单奖励 -->
|
|
<popup-view v-model="show" mode="center" border-radius="18" z-index="1000">
|
|
<listBonusCom @close="show = false"></listBonusCom>
|
|
</popup-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import rankNumCom from './components/rankNum.vue';
|
|
import listBonusCom from './components/listBonus.vue'
|
|
import {
|
|
topUserListLastApi,
|
|
topUserSelfLastApi,
|
|
} from '@/API/ranking.js'
|
|
export default{
|
|
data(){
|
|
return{
|
|
rankingList:[],
|
|
selfData:{},
|
|
show:false
|
|
}
|
|
},
|
|
components:{
|
|
rankNumCom,listBonusCom
|
|
},
|
|
onLoad(option) {
|
|
this.getTopUserListLast(option.type)
|
|
this.getTopUserSelfLast(option.type)
|
|
},
|
|
|
|
filters: {
|
|
maskString(value) {
|
|
if (!value) return ''; // 如果值为空，直接返回空字符串
|
|
if (value.length > 2) {
|
|
// 字符串长度超过两个字符时
|
|
return value.charAt(0) + '**' + value.charAt(value.length - 1);
|
|
} else if (value.length === 2) {
|
|
// 字符串长度为两个字符时
|
|
return value.charAt(0) + '**';
|
|
} else {
|
|
// 字符串长度小于或等于一个字符时，直接返回原字符串
|
|
return value;
|
|
}
|
|
}
|
|
},
|
|
methods:{
|
|
darwCk(){
|
|
this.show = true
|
|
},
|
|
goBack(){
|
|
uni.redirectTo({
|
|
url:`/pages/index/ranking`
|
|
})
|
|
},
|
|
// 获取上期所有排行榜
|
|
getTopUserListLast(type) {
|
|
topUserListLastApi({
|
|
type
|
|
}).then(res => {
|
|
this.rankingList = []
|
|
if (res.code === 200) {
|
|
this.rankingList = res.data
|
|
} else {
|
|
this.$api.msg(res.message)
|
|
}
|
|
})
|
|
},
|
|
|
|
// 当前上期自己的排名
|
|
getTopUserSelfLast(type) {
|
|
topUserSelfLastApi({
|
|
type
|
|
}).then(res => {
|
|
this.selfData = {}
|
|
if (res.code === 200 && res.data) {
|
|
this.selfData = res.data
|
|
} else if (res.code !== 200) {
|
|
this.$api.msg(res.message)
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page{
|
|
background-color: #fff;
|
|
}
|
|
.container{
|
|
.scroll-list-view{
|
|
padding-top: 114rpx;
|
|
.header{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 20rpx 0 22rpx;
|
|
width: 100%;
|
|
height: 114rpx;
|
|
background-color: #fff;
|
|
z-index: 3;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
.back-icon{
|
|
width: 49rpx;
|
|
height: 49rpx;
|
|
}
|
|
.rank-darw{
|
|
width: 158rpx;
|
|
height: 63rpx;
|
|
font-size: 23rpx;
|
|
color: #000000;
|
|
background-image: url('@/static/rank/sqjc.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
display: flex;
|
|
padding-top: 18rpx;
|
|
padding-right: 10rpx;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
.list {
|
|
padding: 0 25rpx 0 30rpx;
|
|
|
|
.list-item {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 142rpx;
|
|
border-bottom: 1px solid #eee;
|
|
|
|
.rank-num {
|
|
width: 69rpx;
|
|
height: 87rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.num-icon {
|
|
width: 40rpx;
|
|
height: 64rpx;
|
|
}
|
|
}
|
|
|
|
.rank-avatar {
|
|
width: 87rpx;
|
|
height: 87rpx;
|
|
|
|
.rank-avatar-icon {
|
|
width: 87rpx;
|
|
height: 87rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.rank-detail {
|
|
margin-left: 15rpx;
|
|
height: 87rpx;
|
|
width: 528rpx;
|
|
padding-top: 15rpx;
|
|
|
|
.detail {
|
|
width: 528rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.name {
|
|
font-size: 23rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.point {
|
|
font-size: 23rpx;
|
|
color: #7CCEF0;
|
|
}
|
|
}
|
|
|
|
.prize {
|
|
height: 32rpx;
|
|
width: 528rpx;
|
|
line-height: 32rpx;
|
|
padding-left: 6rpx;
|
|
margin-top: 11rpx;
|
|
font-size: 23rpx;
|
|
color: #FF1253;
|
|
background-color: #e9e9e9;
|
|
}
|
|
}
|
|
}
|
|
.self{
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 160rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 25rpx 0 23rpx;
|
|
background-color: #fff;
|
|
.self-info{
|
|
display: flex;
|
|
align-items: center;
|
|
.self-avatar{
|
|
width: 52rpx;
|
|
height: 52rpx;
|
|
.self-avatar-icon{
|
|
width: 52rpx;
|
|
height: 52rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.self-num{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 23rpx;
|
|
color: #000000;
|
|
margin-left: 20rpx;
|
|
.self-num-txt{
|
|
font-weight: 600;
|
|
font-size: 31rpx;
|
|
color: #5CD1F4;
|
|
}
|
|
}
|
|
}
|
|
.self-point{
|
|
font-size: 23rpx;
|
|
color: #5CD1F4;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |