feat: 排行榜

This commit is contained in:
杨航
2025-11-19 15:35:13 +08:00
parent 4ca46f6665
commit 3c1266d801
4 changed files with 251 additions and 22 deletions
+2 -2
View File
@@ -4,8 +4,8 @@ ENV = 'development.yh'
VITE_APP_BASE_API_Url = 'http://25.18.122.65:7001'
# VITE_APP_BASE_H5_API_Url = 'http://25.18.122.78:9786'
# VITE_APP_BASE_H5_API_Url = 'http://25.18.122.91:9786'
# VITE_APP_BASE_H5_API_Url_TRAEXAM = 'http://25.64.32.154:9604'
# VITE_APP_BASE_H5_API_Url_TRAPRACTICE = 'http://25.64.32.156:9603'
# VITE_APP_BASE_H5_API_Url_TRAAPP = 'http://25.64.32.154:9601'
VITE_APP_BASE_H5_API_Url_TRAAPP = 'http://25.64.32.154:9601'
+10
View File
@@ -0,0 +1,10 @@
import request from '@/api/request'
// 获取list
export const leaderBoardApi = (data) => {
return request({
url: '/traapp/myLeaderBoard/leaderBoard ',
method: 'post',
data
});
};
+238 -19
View File
@@ -16,10 +16,26 @@
</view>
<view class="ranking-body">
<view class="tabs-view">
<uv-tabs :list="tabList" @click="changeTab" :scrollable="false" :current="chooseTyp" active-style="font-weight:bold; color:#000;"
class="font_pf my_tabs" :inactive-style="{ color: '#333333', fontSize: '30rpx', fontWeight: '500' }"
:activeStyle="{ color: '#333333', fontSize: '30rpx', fontWeight: '600' }"></uv-tabs>
<uv-tabs :list="tabSecList" @click="changeTabSec" :scrollable="false" :current="chooseTypSec"
active-style="font-weight:bold; color:#000;" class="font_pf my_tabs2"
:inactive-style="{ color: '#333333', fontSize: '24rpx', fontWeight: '500' }"
:activeStyle="{ color: '#0066FF', fontSize: '24rpx', fontWeight: '500' }" :lineColor="`#06f`"></uv-tabs>
<!-- :lineColor="`url(${LineBg}) 2% 2%`" -->
<uv-scroll-list class="tags-view" :indicator="false">
<uv-tags :text="item.label" v-for="item in tagsList" :key="item.value" size="medium" :bgColor="'#f6f8fa'"
:borderColor="activeTag === item.value ? '#06f' : '#f6f8fa'"
:color="activeTag === item.value ? '#06f' : '#333'" @click="chooseTag(item)"
:class="activeTag === item.value ? 'tags-item active-tags-item' : 'tags-item'"></uv-tags>
</uv-scroll-list>
</view>
<view class="list-header list-item">
<view class="rank-column">排名</view>
<view class="user-column">用户名/所属机构</view>
<view class="score-column">最高分</view>
<view class="score-column">{{activeNameSec}}</view>
</view>
<scroll-view :scroll-y="true" class="scroll-items-view">
<view v-for="(item,index) in userList" :class="['list-item', 'item-'+(index+1)]">
@@ -34,7 +50,7 @@
<view class="user-name">{{item.userName}}</view>
<view class="user-org">{{item.orgName}}</view>
</view>
<view class="score-column">{{item.examGrade}}</view>
<view class="score-column">{{item.grade}}</view>
</view>
<list-no-data v-if="userList.length == 0">暂无数据</list-no-data>
</scroll-view>
@@ -64,17 +80,10 @@
</template>
<script>
import { queryTraCrsRankingList } from "@/api/courseDetail.js"
import { queryPaperExamRankingList } from "@/api/examination.js"
import { defaultAvatar } from "@/enum.js"
import {
getLeaderBoardStdyTmApi,
getLeaderBoardPractCntApi,
getLeaderBoardExamCntApi,
getLeaderBoardCrsCntApi
} from "@/api/leaderBoard.js"
// 我的排行榜
import { getUserInfo } from '@/common/common';
import { leaderBoardApi } from '@/api/charts.js'
import {
reactive,
ref,
@@ -89,19 +98,135 @@
return {
crsId: '',
papersId : '',
userList: [],
userRankObj:{},
defaultAvatarSrc: defaultAvatar
defaultAvatarSrc: defaultAvatar,
chooseTyp: 0,
chooseTypSec: 0,
tagsList:[{
label: '本周',
value: 'WEEK',
},{
label: '本月',
value: 'MONTH',
},{
label: '本年',
value: 'YEAR',
}],
activeTag: 'WEEK',
rankList: []
}
},
onLoad(params){
this.getList()
},
// onLoad(params){
// this.getList()
// },
onShow(){
this.getList()
},
computed: {
tabList() {
return [{
name: '课程排行榜',
value: 0,
key: '01'
},{
name: 'AI陪练排行榜',
value: 1,
key: '02'
},{
name: '考试排行榜',
value: 2,
key: '03'
}]
},
tabSecList() {
let _arr = []
if(this.chooseTyp === 0){
_arr = [
{
name: '学习时长',
value: 0,
},
{
name: '练习完成次数',
value: 1
},
{
name: '考试通过次数',
value: 2
},
{
name: '完成课程数',
value: 3
}
]
} else if(this.chooseTyp === 1){
_arr = [
{
name: '练习通过次数',
value: 0
},
{
name: '考试通过次数',
value: 1
},
{
name: '完成AI陪练数',
value: 2
}
]
} else if(this.chooseTyp === 2){
_arr = [
{
name: '考试通过次数',
value: 0
},
{
name: '完成考试数',
value: 1
}
]
}
return _arr
},
activeNameSec(){
if(this.tabSecList.length >= this.chooseTypSec){
return this.tabSecList[this.chooseTypSec].name|| '--'
}else{
return '--'
}
},
userRankObj(){
if(this.rankList.length >= this.chooseTypSec){
return this.rankList[this.chooseTypSec] || {}
}else{
return {}
}
},
userList(){
return this.userRankObj.rankingListVos || []
},
},
methods: {
getList(){
leaderBoardApi({
leaderBoardType: this.tabList[this.chooseTyp].key,
timeType: this.activeTag
}).then(res=>{
console.log(res)
this.rankList = res.body||[]
})
},
changeTab(item){
if(this.chooseTyp === item.value) return
this.chooseTyp = item.value
this.chooseTypSec = 0
this.getList()
},
changeTabSec(item){
this.chooseTypSec = item.value
},
chooseTag (item){
this.activeTag = item.value
this.getList()
},
backRouter(){
common.navigateBack()
@@ -212,7 +337,7 @@
padding-top: 20rpx;
box-sizing: border-box;
.scroll-items-view{
height: calc(100% - 54rpx);
height: calc(100% - 308rpx);
}
}
@@ -307,7 +432,7 @@
}
.user-column {
width: 450rpx;
width: 375rpx;
float: left;
padding: 15rpx 0;
@@ -353,13 +478,14 @@
}
.score-column {
width: 75rpx;
width: 150rpx;
text-align: right;
float: left;
font-weight: 600;
line-height: 108rpx;
color: #333;
font-size: 31rpx;
white-space: nowrap;
}
}
.ranking-self {
@@ -369,4 +495,97 @@
padding-top: 4rpx;
}
}
.tags-view {
height: 84rpx;
display: block;
padding: 15rpx 20rpx 15rpx 20rpx;
box-sizing: border-box;
white-space: nowrap;
// border-bottom: 2rpx solid #eee;
.tags-item {
margin-right: 30rpx;
display: inline-block;
&.active-tags-item {
position: relative;
overflow: hidden;
border-radius: 4rpx;
overflow: hidden;
&::before {
content: '';
display: block;
width: 40rpx;
height: 40rpx;
position: absolute;
right: -20rpx;
bottom: -20rpx;
transform: rotateZ(-45deg);
background-color: #06f;
overflow: hidden;
z-index: 10;
}
&::after {
content: '';
display: block;
width: 8rpx;
height: 4rpx;
position: absolute;
right: 3rpx;
bottom: 8rpx;
transform: rotateZ(-45deg);
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
z-index: 11;
}
}
::v-deep .uv-tags {
padding: 0 20rpx;
.uv-tags__text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200rpx;
}
}
}
}
.my_tabs {
// 解决这个圆角的图片,开穿透
:deep(.uv-tabs__wrapper__nav__line) {
// height: 30rpx !important;
// left: 60rpx;
// background-size: 24rpx !important;
// background-repeat: no-repeat !important;
background: linear-gradient(90deg, #06f 0%, rgb(0, 159, 255) 50%, rgb(255, 255, 255) 100%) !important;
}
:deep(.uv-tabs__wrapper__nav__item) {
padding: 0 30rpx !important;
}
}
.my_tabs2 {
// 解决这个圆角的图片,开穿透
:deep(.uv-tabs__wrapper__nav__line) {
background-size: 24rpx !important;
background: linear-gradient(90deg, #06f 0%, rgb(0, 159, 255) 50%, rgb(255, 255, 255) 100%) !important;
}
:deep(.uv-tabs__wrapper__nav__item) {
padding: 0 20rpx !important;
}
}
</style>
+1 -1
View File
@@ -302,7 +302,7 @@
body: {
traId: traId.value,
chaId: chaId.value,
talkingType: talkingType.value
traTyp: talkingType.value
}
});
return;