mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-21 00:36:44 +08:00
我的u币经验值排行榜
This commit is contained in:
zhaofang
@@ -88,7 +88,7 @@
|
||||
import apiUser from "@/api/system/user.js";
|
||||
import {cutFullName} from "@/utils/tools.js";
|
||||
import apiDict from "@/api/modules/dict.js";
|
||||
import ItemVue from '../../layout/components/Sidebar/Item.vue'
|
||||
import ItemVue from '../../layout/components/Sidebar/Item.vue'
|
||||
|
||||
export default{
|
||||
components:{top,UcHeader,CaseList,CourseList,NoteList,PutList,AnswerList,ArticleList,FollowList,BookList},
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="u-currency" >
|
||||
<div class="myubi">
|
||||
<div class="ubi-hear">
|
||||
<h6>我的U币:367</h6><span class="cursor-pointer" @click="dialogVisible = true">U币规则 <i class="el-icon-arrow-right"></i> </span>
|
||||
<h6>我的U币:367</h6><span class="pointer" @click="dialogVisible = true">U币规则 <i class="el-icon-arrow-right"></i> </span>
|
||||
<el-button @click="exportRecord()">导出记录</el-button>
|
||||
</div>
|
||||
<div style="max-height:600px;overflow-y:auto;padding-right:50px">
|
||||
@@ -23,29 +23,29 @@
|
||||
<div class="experience">
|
||||
<div class="exp-hear">
|
||||
<div class="exp-hear-text">
|
||||
经验值排行榜
|
||||
经验值排行榜<svg-icon style="margin-left: 5px;font-size:20px;padding-top: 4px;" icon-class="doubt"></svg-icon>
|
||||
<span class="exp-hear-textbor"></span>
|
||||
</div>
|
||||
<div class="exp-hear-xiala">
|
||||
<el-dropdown trigger="click">
|
||||
<span class="el-dropdown-link">
|
||||
累计<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>累计</el-dropdown-item>
|
||||
<el-dropdown-item>本周</el-dropdown-item>
|
||||
<el-dropdown-item>本月</el-dropdown-item>
|
||||
<el-dropdown-item disabled>本年</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
<el-dropdown trigger="click" @command="handleCommand">
|
||||
<span class="el-dropdown-link pointer">
|
||||
累计<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="total">累计</el-dropdown-item>
|
||||
<el-dropdown-item command="weeks">本周</el-dropdown-item>
|
||||
<el-dropdown-item command="months">本月</el-dropdown-item>
|
||||
<el-dropdown-item command="years">本年</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="myselftext">
|
||||
<div class="myranking">
|
||||
我的排名 : <span> 128</span>
|
||||
我的排名 : <span> {{currentUserRankingData.rankingNo}}</span>
|
||||
</div>
|
||||
<div class="myexperience">
|
||||
我的经验值 : <span> 367</span>
|
||||
我的经验值 : <span> {{currentUserRankingData.total}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exp-bar">
|
||||
@@ -58,52 +58,25 @@
|
||||
<span>LV2</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exp-table">
|
||||
<div class="exp-table" style="height:550px;overflow-y:auto">
|
||||
<div class="table-hear">
|
||||
<div style="margin-left:5px">排名</div>
|
||||
<div style="margin-left:5px">姓名</div>
|
||||
<div class="bm">部门</div>
|
||||
<div class="jy">经验值</div>
|
||||
</div>
|
||||
<div style="height:450px;overflow-y:auto">
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||||
<div class="tab-rank" ><img src="../../../public/images/rank1.png" alt=""></div>
|
||||
<div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
|
||||
<div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px" v-for="(ran,index) in rankingData" :key="ran.id">
|
||||
<div class="tab-rank">
|
||||
<img v-if="index == 0" src="../../../public/images/rank1.png" alt=""/>
|
||||
<img v-if="index == 1" src="../../../public/images/rank2.png" alt=""/>
|
||||
<img v-if="index == 2" src="../../../public/images/rank3.png" alt=""/>
|
||||
<div v-if="index > 2" style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">{{index+1}}</div>
|
||||
</div>
|
||||
<div class="tab-name"><author-img :avatar="ran.authorInfo.avatar" :aid="ran.authorInfo.aid" :sex="ran.authorInfo.sex"></author-img> <span>{{ran.authorInfo.name}}</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;">{{ran.authorInfo.orgInfo}}</div>
|
||||
<div class="jy tab-jy">
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||||
<div class="tab-rank" ><img src="../../../public/images/rank2.png" alt=""></div>
|
||||
<div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
|
||||
<div class="jy tab-jy">
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||||
<div class="tab-rank" ><img src="../../../public/images/rank3.png" alt=""></div>
|
||||
<div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
|
||||
<div class="jy tab-jy">
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||||
<div style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">4</div>
|
||||
<div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
|
||||
<div class="jy tab-jy">
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||||
<div style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">5</div>
|
||||
<div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
|
||||
<div class="jy tab-jy">
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;">{{ran.total}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -111,11 +84,11 @@
|
||||
<div>.</div> <div>.</div> <div>.</div>
|
||||
</div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||||
<div style="color: #0059FF;line-height: 40px;padding-left:15px;font-size: 16px;" class="tab-rank" >128</div>
|
||||
<div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span style="color: #0059FF;">小李</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;color: #0059FF;">BOE / 企划中心 / 数据资产部</div>
|
||||
<div style="color: #0059FF;line-height: 40px;padding-left:15px;font-size: 16px;" class="tab-rank" >{{currentUserRankingData.rankingNo}}</div>
|
||||
<div class="tab-name"><author-img :avatar="currentUserRankingData.authorInfo.avatar" :aid="currentUserRankingData.authorInfo.aid" :sex="currentUserRankingData.authorInfo.sex"></author-img> <span style="color: #0059FF;">{{currentUserRankingData.authorInfo.name}}</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;color: #0059FF;">{{currentUserRankingData.authorInfo.orgInfo}}</div>
|
||||
<div class="jy tab-jy">
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">1093</div>
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{currentUserRankingData.total}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -130,7 +103,8 @@
|
||||
<p style="font-size: 26px;font-weight: 600;margin-bottom: 4px;">U币规则</p>
|
||||
<p style="font-size: 14px;line-height: 20px;">学员每日通过积分规则获得积分的上限为150积分，当天达到上限后，将 不能通过积分规则获得积分</p>
|
||||
</div>
|
||||
<div class="box-table">
|
||||
<div style="max-height:420px;overflow-y: auto;">
|
||||
<div class="box-table">
|
||||
<p class="table-title portal-title-tow"><span></span>学习</p>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
@@ -145,19 +119,19 @@
|
||||
label="描述"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<!-- {{scope.row}} -->
|
||||
<p v-for="(rem,index) in scope.row.hear" :key="index">{{rem}}</p>
|
||||
<p style="font-size:12px;color: #999999;" v-if="scope.row.label">{{scope.row.label}}</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
align="right"
|
||||
label="经验值/U币">
|
||||
<template slot-scope="scope">
|
||||
<p v-for="(val,index) in scope.row.value" :key="index">{{val}}</p>
|
||||
<p style="font-size:16px;color: #999999;" v-for="(val,index) in scope.row.value" :key="index">{{val}}</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="upperlimit"
|
||||
prop="upperlimit" align="right"
|
||||
label="每日上限">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -177,23 +151,24 @@
|
||||
label="描述"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<!-- {{scope.row}} -->
|
||||
<p v-for="(rem,index) in scope.row.hear" :key="index">{{rem}}</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
align="right"
|
||||
label="经验值/U币">
|
||||
<template slot-scope="scope">
|
||||
<p v-for="(val,index) in scope.row.value" :key="index">{{val}}</p>
|
||||
<p style="font-size:16px;color: #333333;font-weight: 600;" v-for="(val,index) in scope.row.value" :key="index">{{val}}</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="upperlimit"
|
||||
prop="upperlimit" align="right"
|
||||
label="每日上限">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dialog-close" @click="dialogVisible=false">
|
||||
<img style="width:86px;height:86px" src="/images/homeWu/u-close.png" alt="">
|
||||
</div>
|
||||
@@ -206,38 +181,104 @@
|
||||
import apiStat from '@/api/phase2/stat.js';
|
||||
import { mapGetters } from 'vuex';
|
||||
import {getUType} from '@/utils/tools.js'
|
||||
import authorImg from '@/components/Portal/authorImg.vue';
|
||||
import author from '@/components/Portal/authorInfo.vue';
|
||||
import apiUser from "@/api/system/user.js";
|
||||
import * as echarts from 'echarts'
|
||||
export default{
|
||||
computed: {
|
||||
...mapGetters(['userInfo']),
|
||||
|
||||
},
|
||||
components: {},
|
||||
components: {authorImg,author},
|
||||
data(){
|
||||
return{
|
||||
cycle:'total',
|
||||
getUType,
|
||||
dialogVisible:false,
|
||||
tableData:[
|
||||
{name:'试听学习',hear:['每日累计学习10分钟','每日累计学习20分钟','每日累计学习30分钟','每日累计学习45分钟','每日累计学习60分钟',],value:[10,20,30,40,50],upperlimit:50},
|
||||
{name:'案例学习',hear:['完成一个案例的阅读（最低三分钟）',],value:[5],upperlimit:30},
|
||||
{name:'文章学习',hear:['完成一个文章的阅读（最低2分钟）',],value:[5],upperlimit:30},
|
||||
{name:'试听学习',hear:['每日累计学习10分钟','每日累计学习20分钟','每日累计学习30分钟','每日累计学习45分钟','每日累计学习60分钟',],value:['+10','+20','+30','+40',"+50"],upperlimit:50},
|
||||
{name:'案例学习',hear:['完成一个案例的阅读',],value:['+5'],upperlimit:30,label:'（最低3分钟）'},
|
||||
{name:'文章学习',hear:['完成一个文章的阅读',],value:['+5'],upperlimit:30,label:'（最低2分钟）'},
|
||||
],
|
||||
tableList:[
|
||||
{name:'发布音视频课程',hear:['完成一个案音视频课',],value:[60],upperlimit:null},
|
||||
{name:'面授课记录',hear:['有一个完成的面授课记录（<4h）','有一个完成的面授课记录（>=4h）'],value:[40,60],upperlimit:null},
|
||||
{name:'发布文章',hear:['每发布1篇文章',],value:[40],upperlimit:null},
|
||||
{name:'发布案例',hear:['每发布1篇案例',],value:[50],upperlimit:null},
|
||||
{name:'发布笔记',hear:['每发布公开笔记1篇',],value:[5],upperlimit:30},
|
||||
{name:'发表评论',hear:['在课程，问答，案例中发表1个评论',],value:[2],upperlimit:20},
|
||||
{name:'发布音视频课程',hear:['完成一个案音视频课',],value:['+60'],upperlimit:null},
|
||||
{name:'面授课记录',hear:['有一个完成的面授课记录（<4h）','有一个完成的面授课记录（>=4h）'],value:['+40','+60'],upperlimit:null},
|
||||
{name:'发布文章',hear:['每发布1篇文章',],value:['+40'],upperlimit:null},
|
||||
{name:'发布案例',hear:['每发布1篇案例',],value:['+50'],upperlimit:null},
|
||||
{name:'发布笔记',hear:['每发布公开笔记1篇',],value:["+5"],upperlimit:30},
|
||||
{name:'发表评论',hear:['在课程，问答，案例中发表1个评论',],value:['+2'],upperlimit:20},
|
||||
],
|
||||
uCoinRecord:[],
|
||||
chart:null,
|
||||
currentUserRankingData:{},
|
||||
rankingData:[]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList();
|
||||
this.getRanking();
|
||||
},
|
||||
methods:{
|
||||
handleCommand(e) {
|
||||
this.cycle = e;
|
||||
this.getRanking();
|
||||
},
|
||||
getRanking() {
|
||||
let data = {
|
||||
aid:this.userInfo.aid,// #用户id
|
||||
statType:20, // #统计类型 10学习时长 11 学习天数 20表经验值 30表u币 40表获取天数
|
||||
field:this.cycle,// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
|
||||
num:4,// #显示的条数
|
||||
}
|
||||
apiStat.getRanking(data).then(res=>{
|
||||
if(res.status==200){
|
||||
res.result.currentUserRankingData.authorInfo={
|
||||
aid: "",
|
||||
name: "",
|
||||
orgInfo: "",
|
||||
avatar: "",
|
||||
sex: null
|
||||
}
|
||||
this.getUserData([res.result.currentUserRankingData.aid],[res.result.currentUserRankingData])
|
||||
this.currentUserRankingData = res.result.currentUserRankingData;
|
||||
console.log(this.currentUserRankingData,'this.currentUserRankingData');
|
||||
const ids= [];
|
||||
res.result.rankingData.forEach(item=>{
|
||||
item.aid = '952948626497724414'
|
||||
ids.push(item.aid)
|
||||
item.authorInfo = {
|
||||
aid: "",
|
||||
name: "",
|
||||
orgInfo: "",
|
||||
avatar: "",
|
||||
sex: null
|
||||
}
|
||||
})
|
||||
this.getUserData(ids,res.result.rankingData)
|
||||
this.rankingData = 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);
|
||||
}
|
||||
});
|
||||
},
|
||||
exportRecord() {
|
||||
let urlPre=window.location.protocol+'//'+window.location.host;
|
||||
window.open(urlPre + '/xboe/m/stat/usercoinrecord/export?aid='+this.userInfo.aid)
|
||||
@@ -329,12 +370,26 @@
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-dialog{
|
||||
border-radius: 8px;
|
||||
|
||||
}
|
||||
::v-deep .el-dialog__header{
|
||||
display: none;
|
||||
}
|
||||
::v-deep .el-dialog__body{
|
||||
padding: 0;
|
||||
// ::v-deep .el-table td.el-table__cell{
|
||||
// font-size: 14px;
|
||||
// color: #333333;
|
||||
// }
|
||||
}
|
||||
::v-deep .el-table__body-wrapper{
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
.experience{
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
.dialog-box{
|
||||
position: relative;
|
||||
@@ -447,6 +502,7 @@
|
||||
.exp-table{
|
||||
width: 100%;
|
||||
padding-left: 25px;
|
||||
padding-right: 20px;
|
||||
.table-hear{
|
||||
display: flex;
|
||||
div{
|
||||
@@ -518,12 +574,18 @@
|
||||
line-height: 40px;
|
||||
}
|
||||
.tab-name{
|
||||
display: flex;
|
||||
::v-deep .item-author{
|
||||
min-width: 50px !important;
|
||||
}
|
||||
img{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
span{
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
|
||||
Reference in New Issue
Block a user