feat: 排行榜
This commit is contained in:
+2
-2
@@ -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'
|
||||
|
||||
|
||||
@@ -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
@@ -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>
|
||||
@@ -302,7 +302,7 @@
|
||||
body: {
|
||||
traId: traId.value,
|
||||
chaId: chaId.value,
|
||||
talkingType: talkingType.value
|
||||
traTyp: talkingType.value
|
||||
}
|
||||
});
|
||||
return;
|
||||
|
||||
Reference in New Issue
Block a user