mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-06 17:36:45 +08:00
433 lines
15 KiB
Vue
433 lines
15 KiB
Vue
<template>
|
||
<view class="ranking-list-info">
|
||
<view class="ranking-list-box">
|
||
<u-tabs :list="tabList" @click="clickTabs"
|
||
lineColor="#007DFF"
|
||
lineWidth="40"
|
||
lineHeight="4"
|
||
:activeStyle="{
|
||
color: '#333333',
|
||
fontWeight: '600',
|
||
}"></u-tabs>
|
||
<view v-show="activeTab == 0">
|
||
<view class="box-info-top">
|
||
<text class="top-text">我的排名：<text class="text-num">{{experience.data.rankingNo}}</text></text>
|
||
<text class="top-text" style="margin-left: 30upx;">我的经验值：<text class="text-num">{{experience.data.total}}</text></text>
|
||
</view>
|
||
<view class="ran-table">
|
||
<view class="ran-table-haeder">
|
||
<view class="table-cell-one">排名</view>
|
||
<view class="table-cell-tow">姓名</view>
|
||
<view class="table-cell-three">经验值</view>
|
||
</view>
|
||
<view class="ran-table-body" v-for="(exper, index) in experience.list">
|
||
<view class="table-cell-one">
|
||
<image v-if="index == 0" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-one.png" mode=""></image>
|
||
<image v-if="index == 1" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-tow.png" mode=""></image>
|
||
<image v-if="index == 2" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-three.png" mode=""></image>
|
||
<text v-if="index > 2" class="cell-one-index">{{index+1}}</text>
|
||
</view>
|
||
<view class="table-cell-tow">
|
||
<author-img :avatar="exper.authorInfo.avatar" :sex="exper.authorInfo.sex"></author-img>
|
||
<text class="table-cell-tow-name">{{exper.authorInfo.name}}</text>
|
||
<text class="table-cell-tow-org">({{cutOrgNamePath(exper.authorInfo.orgInfo)}})</text>
|
||
</view>
|
||
<view class="table-cell-three">{{exper.total}}</view>
|
||
</view>
|
||
<view class="ranking-dote" v-if="experience.data.rankingNo>5">
|
||
<view>.</view>
|
||
<view>.</view>
|
||
<view>.</view>
|
||
</view>
|
||
<view class="ran-table-body" style="border-bottom: none;margin-bottom: 60upx;" v-if="experience.data.rankingNo>5">
|
||
<view class="table-cell-one">
|
||
<text class="cell-one-index" style="color:#326DFF">{{experience.data.rankingNo}}</text>
|
||
</view>
|
||
<view class="table-cell-tow">
|
||
<author-img :avatar="userInfo.avatar" :sex="userInfo.sex"></author-img>
|
||
<!-- <image style="width: 80upx;height:80upx;vertical-align: middle;" src="../../static/images/woman.png" mode=""></image> -->
|
||
<text class="table-cell-tow-name" style="color:#326DFF">{{userInfo.name}}</text>
|
||
<text class="table-cell-tow-org" style="color:#326DFF">({{cutOrgNamePath(userInfo.departFullName)}})</text>
|
||
</view>
|
||
<view class="table-cell-three" style="color:#326DFF">{{experience.data.total}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-show="activeTab == 1">
|
||
<view class="box-info-top">
|
||
<text class="top-text">我的排名：<text class="text-num">{{learningDuration.data.rankingNo}}</text></text>
|
||
<text class="top-text" style="margin-left: 30upx;">我的学习时长：<text class="text-num">{{formatSecondToHour(learningDuration.data.total)}}</text>h</text>
|
||
</view>
|
||
<view class="ran-table">
|
||
<view class="ran-table-haeder">
|
||
<view class="table-cell-one">排名</view>
|
||
<view class="table-cell-tow">姓名</view>
|
||
<view class="table-cell-three">学习时长(h)</view>
|
||
</view>
|
||
<view class="ran-table-body" v-for="(learning, index) in learningDuration.list">
|
||
<view class="table-cell-one">
|
||
<image v-if="index == 0" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-one.png" mode=""></image>
|
||
<image v-if="index == 1" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-tow.png" mode=""></image>
|
||
<image v-if="index == 2" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-three.png" mode=""></image>
|
||
<text v-if="index > 2" class="cell-one-index">{{index+1}}</text>
|
||
</view>
|
||
<view class="table-cell-tow">
|
||
<author-img :avatar="learning.authorInfo.avatar" :sex="learning.authorInfo.sex"></author-img>
|
||
<text class="table-cell-tow-name">{{learning.authorInfo.name}}</text>
|
||
<text class="table-cell-tow-org">({{cutOrgNamePath(learning.authorInfo.orgInfo)}})</text>
|
||
</view>
|
||
<view class="table-cell-three">{{formatSecondToHour(learning.total)}}</view>
|
||
</view>
|
||
<view class="ranking-dote" v-if="learningDuration.data.rankingNo > 5">
|
||
<view>.</view>
|
||
<view>.</view>
|
||
<view>.</view>
|
||
</view>
|
||
<view class="ran-table-body" style="border-bottom: none;margin-bottom: 60upx;" v-if="learningDuration.data.rankingNo > 5">
|
||
<view class="table-cell-one">
|
||
<text class="cell-one-index" style="color:#326DFF">{{learningDuration.data.rankingNo}}</text>
|
||
</view>
|
||
<view class="table-cell-tow">
|
||
<author-img :avatar="userInfo.avatar" :sex="userInfo.sex"></author-img>
|
||
<!-- <image style="width: 80upx;height:80upx;vertical-align: middle;" src="../../static/images/woman.png" mode=""></image> -->
|
||
<text class="table-cell-tow-name" style="color:#326DFF">{{userInfo.name}}</text>
|
||
<text class="table-cell-tow-org" style="color:#326DFF">({{cutOrgNamePath(userInfo.departFullName)}})</text>
|
||
</view>
|
||
<view class="table-cell-three" style="color:#326DFF">{{formatSecondToHour(learningDuration.data.total)}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-show="activeTab == 2">
|
||
<view class="box-info-top">
|
||
<text class="top-text">我的排名：<text class="text-num">{{learningDays.data.rankingNo}}</text></text>
|
||
<text class="top-text" style="margin-left: 30upx;">我的学习天数：<text class="text-num">{{learningDays.data.total}}</text></text>
|
||
</view>
|
||
<view class="ran-table">
|
||
<view class="ran-table-haeder">
|
||
<view class="table-cell-one">排名</view>
|
||
<view class="table-cell-tow">姓名</view>
|
||
<view class="table-cell-three">学习天数</view>
|
||
</view>
|
||
<view class="ran-table-body" v-for="(days, index) in learningDays.list">
|
||
<view class="table-cell-one">
|
||
<image v-if="index == 0" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-one.png" mode=""></image>
|
||
<image v-if="index == 1" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-tow.png" mode=""></image>
|
||
<image v-if="index == 2" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-three.png" mode=""></image>
|
||
<text v-if="index > 2" class="cell-one-index">{{index+1}}</text>
|
||
</view>
|
||
<view class="table-cell-tow">
|
||
<author-img :avatar="days.authorInfo.avatar" :sex="days.authorInfo.sex"></author-img>
|
||
<text class="table-cell-tow-name">{{days.authorInfo.name}}</text>
|
||
<text class="table-cell-tow-org">({{cutOrgNamePath(days.authorInfo.orgInfo)}})</text>
|
||
</view>
|
||
<view class="table-cell-three">{{days.total}}</view>
|
||
</view>
|
||
<view class="ranking-dote" v-if="learningDays.data.rankingNo > 5">
|
||
<view>.</view>
|
||
<view>.</view>
|
||
<view>.</view>
|
||
</view>
|
||
<view class="ran-table-body" style="border-bottom: none;margin-bottom: 60upx;" v-if="learningDays.data.rankingNo > 5">
|
||
<view class="table-cell-one">
|
||
<text class="cell-one-index" style="color:#326DFF">{{learningDays.data.rankingNo}}</text>
|
||
</view>
|
||
<view class="table-cell-tow">
|
||
<author-img :avatar="userInfo.avatar" :sex="userInfo.sex"></author-img>
|
||
<text class="table-cell-tow-name" style="color:#326DFF">{{userInfo.name}}</text>
|
||
<text class="table-cell-tow-org" style="color:#326DFF">({{cutOrgNamePath(userInfo.departFullName)}})</text>
|
||
</view>
|
||
<view class="table-cell-three" style="color:#326DFF">{{learningDays.data.total}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import apiUser from "@/api/system/user.js";
|
||
import apiStat from '@/api/phase2/stat.js';
|
||
import {cutOrgNamePath,formatSecondToHour} from '@/utils/tools.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
formatSecondToHour,
|
||
cutOrgNamePath,
|
||
tabList:[
|
||
{ name: '经验值'},
|
||
{ name: '学习时长'},
|
||
{ name: '学习天数'},
|
||
],
|
||
activeTab:0,
|
||
rankingList:{},
|
||
userInfo:{},
|
||
learningDays:{
|
||
field:'total',
|
||
name:'累计',
|
||
data:{
|
||
rankingNo:0,
|
||
total:0
|
||
},
|
||
list:[],
|
||
},
|
||
experience:{
|
||
field:'total',
|
||
name:'累计',
|
||
data:{
|
||
rankingNo:0,
|
||
total:0
|
||
},
|
||
list:[],
|
||
},
|
||
learningDuration:{
|
||
field:'total',
|
||
name:'累计',
|
||
data:{
|
||
rankingNo:0,
|
||
total:0
|
||
},
|
||
list:[],
|
||
},
|
||
}
|
||
},
|
||
onPullDownRefresh() {
|
||
|
||
},
|
||
onReachBottom() {
|
||
|
||
},
|
||
onLoad(options) {
|
||
this.$store.dispatch('GetUserInfo').then(rs => {
|
||
this.userInfo = rs;
|
||
this.getExperience();
|
||
this.getDuration();
|
||
this.getDays();
|
||
});
|
||
|
||
},
|
||
methods:{
|
||
clickTabs(item) {
|
||
this.activeTab = item.index;
|
||
},
|
||
getExperience() {//经验值
|
||
let data = {
|
||
aid:this.userInfo.aid,// #用户id
|
||
statType:20, // #统计类型 10学习时长 11 学习天数 20表经验值 30表u币 40表获取天数
|
||
field:'total',// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
|
||
num:5,// #显示的条数
|
||
}
|
||
apiStat.getRanking(data).then(res=>{
|
||
if(res.status==200){
|
||
if(res.result.currentUserRankingData) {
|
||
res.result.currentUserRankingData.authorInfo={
|
||
aid: "",
|
||
name: "",
|
||
orgInfo: "",
|
||
avatar: "",
|
||
sex: null
|
||
}
|
||
this.experience.data = res.result.currentUserRankingData;
|
||
}
|
||
const ids= [];
|
||
res.result.rankingData.forEach(item=>{
|
||
ids.push(item.aid)
|
||
item.authorInfo = {
|
||
aid: "",
|
||
name: "",
|
||
orgInfo: "",
|
||
avatar: "",
|
||
sex: null
|
||
}
|
||
})
|
||
this.getUserData(ids,res.result.rankingData)
|
||
this.experience.list = res.result.rankingData;
|
||
}
|
||
})
|
||
},
|
||
getDuration() {//学习时长
|
||
let data = {
|
||
aid:this.userInfo.aid,// #用户id
|
||
statType:10, // #统计类型 10学习时长 11 学习天数 20表经验值 30表u币 40表获取天数
|
||
field:'total',// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
|
||
num:5,// #显示的条数
|
||
}
|
||
apiStat.getRanking(data).then(res=>{
|
||
if(res.status==200){
|
||
if(res.result.currentUserRankingData) {
|
||
this.learningDuration.data = res.result.currentUserRankingData;
|
||
}
|
||
const ids= [];
|
||
res.result.rankingData.forEach(item=>{
|
||
ids.push(item.aid)
|
||
item.authorInfo = {
|
||
aid: "",
|
||
name: "",
|
||
orgInfo: "",
|
||
avatar: "",
|
||
sex: null
|
||
}
|
||
})
|
||
this.getUserData(ids,res.result.rankingData)
|
||
this.learningDuration.list = res.result.rankingData;
|
||
}
|
||
})
|
||
},
|
||
//学习天数
|
||
getDays() {
|
||
let data = {
|
||
aid:this.userInfo.aid,// #用户id
|
||
statType:11, // #统计类型 10学习时长 11 学习天数 20表经验值 30表u币 40表获取天数
|
||
field:'total',// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
|
||
num:5,// #显示的条数
|
||
}
|
||
apiStat.getRanking(data).then(res=>{
|
||
if(res.status==200){
|
||
if(res.result.currentUserRankingData) {
|
||
this.learningDays.data = res.result.currentUserRankingData;
|
||
}
|
||
|
||
const ids= [];
|
||
res.result.rankingData.forEach(item=>{
|
||
ids.push(item.aid)
|
||
item.authorInfo = {
|
||
aid: "",
|
||
name: "",
|
||
orgInfo: "",
|
||
avatar: "",
|
||
sex: null
|
||
}
|
||
})
|
||
this.getUserData(ids,res.result.rankingData)
|
||
this.learningDays.list = res.result.rankingData;
|
||
}
|
||
})
|
||
},
|
||
getUserData(ids,list) {
|
||
const noReapetIds = [...new Set(ids)];
|
||
apiUser.getByIds(noReapetIds).then(res => {
|
||
if (res.status == 200) {
|
||
list.forEach((item, index) => {
|
||
res.result.some(author => {
|
||
if (author.aid == item.aid) {
|
||
item.authorInfo = author;
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
});
|
||
});
|
||
} else {
|
||
this.$message.error(res.message);
|
||
}
|
||
});
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
::v-deep .u-tabs__wrapper__nav__item__text{
|
||
font-size: 32upx;
|
||
color: #666666 !important;
|
||
}
|
||
.ranking-list-info{
|
||
padding-top: 376upx;
|
||
background: url(../../static/images/ranking-list.png) no-repeat 100% / 100%;
|
||
background-position: 0 0;
|
||
.ranking-list-box{
|
||
padding: 34upx 40upx;
|
||
border-radius: 40upx 40upx 0 0;
|
||
background-color: #fff;
|
||
.box-info-top{
|
||
margin-top: 20upx;
|
||
padding: 10upx 35upx 12upx 38upx;
|
||
height: 100upx;
|
||
line-height: 100upx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0upx 4upx 10upx 2upx rgba(0,0,0,0.05);
|
||
border-radius: 8upx;
|
||
color: #333333;
|
||
font-size: 26upx;
|
||
.text-num{
|
||
font-size: 30upx;
|
||
color: #000;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
.ran-table{
|
||
margin-top: 62upx;
|
||
.ran-table-haeder{
|
||
font-size: 28upx;
|
||
color: #999999;
|
||
display: flex;
|
||
.table-cell-one{
|
||
width: 200upx;
|
||
padding-left: 8upx;
|
||
}
|
||
.table-cell-tow{
|
||
// flex: 100%;
|
||
width: 100%;
|
||
padding-left: 8upx;
|
||
}
|
||
.table-cell-three{
|
||
width: 260upx;
|
||
text-align: right;
|
||
}
|
||
}
|
||
.ran-table-body{
|
||
display: flex;
|
||
padding: 46upx 0 38upx 0;
|
||
border-bottom: 2upx solid rgba($color: #979797, $alpha: 0.1);
|
||
// margin-top: 30upx;
|
||
.table-cell-one{
|
||
width: 200upx;
|
||
padding-top: 10upx;
|
||
.cell-one-index{
|
||
font-size: 32upx;
|
||
color: #333333;
|
||
margin-left: 16upx;
|
||
}
|
||
}
|
||
.table-cell-tow{
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
-webkit-box-orient: vertical;
|
||
display: -webkit-box;-webkit-line-clamp: 1;
|
||
word-break:break-all;
|
||
// flex: 100%;
|
||
width: 100%;
|
||
.table-cell-tow-name{
|
||
font-size: 28upx;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
margin-left: 28upx;
|
||
}
|
||
.table-cell-tow-org{
|
||
font-size: 24upx;
|
||
color: #999999;
|
||
margin-left: 16upx;
|
||
}
|
||
}
|
||
.table-cell-three{
|
||
padding-top: 10upx;
|
||
width: 260upx;
|
||
font-size: 36upx;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
text-align: right;
|
||
}
|
||
}
|
||
.ranking-dote{
|
||
margin-left: 20upx;
|
||
margin-top: 10upx;
|
||
color: #D8D8D8;
|
||
font-size: 36upx;
|
||
line-height: 16upx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|