598 lines
13 KiB
Vue
598 lines
13 KiB
Vue
<template>
|
||
<view class="exam-ranking">
|
||
<!-- <image src="@/static/images/charts/bg-top.png" mode="aspectFit" class="bg-box"></image> -->
|
||
<view class="bg-box"></view>
|
||
<view class="ranking-box">
|
||
|
||
<view class="nav-div">
|
||
<view class="back_div" @click="backRouter()">
|
||
<view class="back-icon"></view>
|
||
</view>
|
||
</view>
|
||
<view class="title-view">
|
||
<!-- <view class="title-info">考试排行榜</view> -->
|
||
<image class="title-image" src="@/static/images/charts/text.png" mode="aspectFit"></image>
|
||
<!-- <view class="title-desc">吾日三省吾身，传不习乎？</view> -->
|
||
<image class="cup-image" src="@/static/images/charts/cup.png" mode="aspectFit"></image>
|
||
|
||
</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">{{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)]">
|
||
<view class="rank-column">
|
||
{{item.ranking}}
|
||
</view>
|
||
<view class="user-column">
|
||
<view class="avatar-box">
|
||
<image-preview v-if="item.ossAddr" class="avatar-image" :src="item.ossAddr" mode="aspectFit"></image-preview>
|
||
<image v-else class="avatar-image" :src="defaultAvatarSrc"></image>
|
||
</view>
|
||
<view class="user-name">{{item.userName}}</view>
|
||
<view class="user-org">{{item.orgName}}</view>
|
||
</view>
|
||
<view class="score-column">{{item.grade}}</view>
|
||
</view>
|
||
<list-no-data v-if="userList.length == 0">暂无数据</list-no-data>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="ranking-self">
|
||
<view class="list-header list-item">
|
||
<view class="rank-column">我的排名
|
||
</view>
|
||
</view>
|
||
<view class="list-item item-me">
|
||
<view class="rank-column">
|
||
{{userRankObj.ranking}}
|
||
</view>
|
||
<view class="user-column">
|
||
<view class="avatar-box">
|
||
<image-preview v-if="userRankObj.ossAddr" class="avatar-image" :src="userRankObj.ossAddr" mode="aspectFit"></image-preview>
|
||
<image class="avatar-image" v-else :src="defaultAvatarSrc"></image>
|
||
</view>
|
||
<view class="user-name">{{userRankObj.userName}}</view>
|
||
<view class="user-org">{{userRankObj.orgName}}</view>
|
||
</view>
|
||
<view class="score-column">{{userRankObj.grade}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { defaultAvatar } from "@/enum.js"
|
||
// 我的排行榜
|
||
import { getUserInfo } from '@/common/common';
|
||
import { leaderBoardApi } from '@/api/charts.js'
|
||
import {
|
||
reactive,
|
||
ref,
|
||
computed,
|
||
nextTick,
|
||
onMounted,
|
||
watch
|
||
} from 'vue';
|
||
import common from '@/common/common';
|
||
export default {
|
||
data() {
|
||
return {
|
||
crsId: '',
|
||
papersId : '',
|
||
defaultAvatarSrc: defaultAvatar,
|
||
chooseTyp: 0,
|
||
chooseTypSec: 0,
|
||
tagsList:[{
|
||
label: '本周',
|
||
value: 'WEEK',
|
||
},{
|
||
label: '本月',
|
||
value: 'MONTH',
|
||
},{
|
||
label: '本年',
|
||
value: 'YEAR',
|
||
}],
|
||
activeTag: 'WEEK',
|
||
rankList: []
|
||
}
|
||
},
|
||
// 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()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
$top-height: var(--status-bar-height);
|
||
|
||
.exam-ranking {
|
||
position: relative;
|
||
height: 100vh;
|
||
width: 100vw;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
padding-top: $top-height;
|
||
|
||
// background:url(@/static/images/examRanking/bg.png) no-repeat top center;
|
||
.bg-box {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 400rpx;
|
||
background: linear-gradient(0deg , #F8F8FA 0%, #6DA7FF 100%);
|
||
z-index: 1;
|
||
}
|
||
|
||
.ranking-box {
|
||
height: calc(100% - $top-height);
|
||
overflow: hidden;
|
||
position: absolute;
|
||
top: $top-height;
|
||
width: 100%;
|
||
z-index: 2;
|
||
}
|
||
|
||
.nav-div {
|
||
position: relative;
|
||
overflow: hidden;
|
||
height: 70rpx;
|
||
|
||
.back_div {
|
||
margin-right: 10rpx;
|
||
position: absolute;
|
||
left: 25rpx;
|
||
top: 0;
|
||
padding: 15rpx;
|
||
|
||
.back-icon {
|
||
position: relative;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.back-icon::before,
|
||
.back-icon::after {
|
||
content: '';
|
||
position: absolute;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.back-icon::after {
|
||
top: 25%;
|
||
left: 25%;
|
||
width: 40%;
|
||
height: 40%;
|
||
border-top: 4rpx solid #000;
|
||
border-left: 4rpx solid #000;
|
||
transform: rotate(-45deg);
|
||
}
|
||
}
|
||
}
|
||
|
||
.title-view {
|
||
height: 180rpx;
|
||
position: relative;
|
||
padding-top: 20rpx;
|
||
|
||
.cup-image {
|
||
position: absolute;
|
||
right: 46rpx;
|
||
bottom: -33rpx;
|
||
width: 208rpx;
|
||
height: 208rpx;
|
||
z-index: 0;
|
||
}
|
||
|
||
.title-desc {
|
||
color: #666;
|
||
line-height: 34rpx;
|
||
font-size: 25rpx;
|
||
}
|
||
|
||
.title-image {
|
||
width: 230rpx;
|
||
height: 111rpx;
|
||
position: absolute;
|
||
bottom: 20rpx;
|
||
left: 46rpx;
|
||
}
|
||
}
|
||
|
||
.ranking-body {
|
||
height: calc(100% - 170rpx - 180rpx - 70rpx);
|
||
overflow: hidden;
|
||
background-color: #fff;
|
||
border-radius: 31rpx 31rpx 0 0;
|
||
padding-top: 20rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
z-index: 2;
|
||
.scroll-items-view{
|
||
height: calc(100% - 308rpx);
|
||
}
|
||
}
|
||
|
||
.list-item {
|
||
height: 108rpx;
|
||
border-bottom: 2rpx solid #efefef;
|
||
overflow: hidden;
|
||
|
||
&.list-header {
|
||
height: 54rpx;
|
||
line-height: 54rpx;
|
||
color: #999;
|
||
font-size: 25rpx;
|
||
border-bottom: 0;
|
||
.rank-column {
|
||
height: 54rpx;
|
||
line-height: 54rpx;
|
||
color: #999;
|
||
font-weight: normal;
|
||
font-size: 25rpx;
|
||
font-style: initial;
|
||
text-indent: 0;
|
||
}
|
||
.user-column {
|
||
padding: 0;
|
||
}
|
||
.score-column {
|
||
line-height: 54rpx;
|
||
color: #999;
|
||
font-weight: normal;
|
||
font-size: 25rpx;
|
||
}
|
||
}
|
||
|
||
&.item-1 {
|
||
border-bottom: 0;
|
||
margin-bottom: 8rpx;
|
||
background: linear-gradient(90deg, #fbf9f5 0%, #fffffd 100%);
|
||
.rank-column{
|
||
color: #ffffff00;
|
||
background: url(@/static/images/examRanking/no-1.png) no-repeat ;
|
||
background-position: 40rpx center;
|
||
background-size: 44rpx 66rpx;
|
||
text-indent: 8rpx;
|
||
}
|
||
}
|
||
|
||
&.item-2 {
|
||
border-bottom: 0;
|
||
margin-bottom: 8rpx;
|
||
background: linear-gradient(90deg, #f4f8f9 0%, #f7fbfe 100%);
|
||
.rank-column{
|
||
color: #ffffff00;
|
||
background: url(@/static/images/examRanking/no-2.png) no-repeat ;
|
||
background-position: 40rpx center;
|
||
background-size: 44rpx 66rpx;
|
||
text-indent: 8rpx;
|
||
}
|
||
}
|
||
|
||
&.item-3 {
|
||
border-bottom: 0;
|
||
margin-bottom: 8rpx;
|
||
background: linear-gradient(90deg, #faf6f5 0%, #fcfbfc 100%);
|
||
.rank-column{
|
||
color: #ffffff00;
|
||
background: url(@/static/images/examRanking/no-3.png) no-repeat ;
|
||
background-position: 40rpx center;
|
||
background-size: 44rpx 66rpx;
|
||
text-indent: 8rpx;
|
||
}
|
||
}
|
||
|
||
&.item-me{
|
||
border-bottom: 0;
|
||
.rank-column {
|
||
color: #06f;
|
||
}
|
||
}
|
||
|
||
.rank-column {
|
||
width: 170rpx;
|
||
padding-left: 40rpx;
|
||
float: left;
|
||
font-weight: 600;
|
||
line-height: 92rpx;
|
||
height: 108rpx;
|
||
color: #333;
|
||
font-size: 38rpx;
|
||
font-style: italic;
|
||
text-indent: 8rpx;
|
||
}
|
||
|
||
.user-column {
|
||
width: 375rpx;
|
||
float: left;
|
||
padding: 15rpx 0;
|
||
|
||
.avatar-box{
|
||
width: 77rpx;
|
||
height: 77rpx;
|
||
overflow: hidden;
|
||
float: left;
|
||
background-color: #eee;
|
||
border-radius: 50%;
|
||
.avatar-image{
|
||
width: 77rpx;
|
||
height: 77rpx;
|
||
}
|
||
}
|
||
.user-name{
|
||
float: left;
|
||
width: calc(100% - 77rpx);
|
||
padding-left: 18rpx;
|
||
padding-right: 18rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
font-size: 29rpx;
|
||
color: #000;
|
||
font-weight: 500;
|
||
}
|
||
.user-org{
|
||
float: left;
|
||
width: calc(100% - 77rpx);
|
||
padding-left: 18rpx;
|
||
padding-right: 18rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
height: 34rpx;
|
||
line-height: 34rpx;
|
||
font-size: 25rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.score-column {
|
||
width: 150rpx;
|
||
text-align: right;
|
||
float: left;
|
||
font-weight: 600;
|
||
line-height: 108rpx;
|
||
color: #333;
|
||
font-size: 31rpx;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
.ranking-self {
|
||
height: 170rpx;
|
||
overflow: hidden;
|
||
background-color: #f5f9ff;
|
||
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> |