mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-16 06:16:44 +08:00
422 lines
15 KiB
Vue
422 lines
15 KiB
Vue
<template>
|
||
<div class="medal-box">
|
||
<h6 class="medal-title">我的勋章 <span class="text"> <router-link to="/user/urules" >勋章规则 <i class="el-icon-arrow-right"></i> </router-link></span> </h6>
|
||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||
<el-tab-pane label="全部勋章" name="first"></el-tab-pane>
|
||
<el-tab-pane label="学习勋章" name="second"></el-tab-pane>
|
||
<el-tab-pane label="社交勋章" name="third"></el-tab-pane>
|
||
<el-tab-pane label="成就勋章" name="fourth"></el-tab-pane>
|
||
</el-tabs>
|
||
<div class="medal-list" v-if="medalData.length > 0">
|
||
<div v-for="item in medalData" :key="item.id">
|
||
<div class="medal-index" v-if="item.medalId != 5">
|
||
<medal-img :item="item"></medal-img>
|
||
<p class="index-title">{{item.medalName}}</p>
|
||
<p class="index-text">您已超过{{item.exceed}}人</p>
|
||
<el-button class="btn" type="primary" @click="goView(item)">查看详情</el-button>
|
||
</div>
|
||
<div class="medal-index" v-else>
|
||
<img style="width:143px;height:161px" :src="`${webBaseUrl}/images/login_medal.png`" alt="">
|
||
<p class="index-title">{{item.medalName}}</p>
|
||
<!-- <p class="index-text">您已超过{{item.exceed}}人</p> -->
|
||
<el-button class="btn" style="margin-top:30px" type="primary" @click="showLoginMedal = true">查看详情</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else class="home-no-list">
|
||
<img class="img" style="width:360px;height:226px" :src="`${webBaseUrl}/images/homeWu/no-madel.png`" alt="" srcset="">
|
||
<p class="text" style="color: #333333;margin-top:50px;font-size: 14px">您目前还没有勋章哦～</p>
|
||
</div>
|
||
<el-dialog class="medal-dialog" title="提示" :visible.sync="dialogVisible" width="657px" top="13%">
|
||
<div class="medal-box">
|
||
<div class="medal-top">
|
||
<div>
|
||
<h4 class="title-medal">{{medal.medalName}} <span style="font-weight: 600;">LV{{medal.medalLevel}}</span> </h4>
|
||
<p class="title-medal-info">您已经超过 {{medal.exceed}} 人</p>
|
||
<p class="title-medal-info" v-html="nextmsg"></p>
|
||
</div>
|
||
<div class="medal-img">
|
||
<medal-img style="width:186px;height:210px" :item="medal"></medal-img>
|
||
</div>
|
||
</div>
|
||
<div class="medal-steps">
|
||
<el-steps :space="200" :active="medal.medalLevel-1">
|
||
<el-step v-for="set in 8" :key="set" :title="'L'+set"></el-step>
|
||
</el-steps>
|
||
</div>
|
||
<el-table :data="rules" style="width: 100%;height:200px;overflow-y: auto;">
|
||
<el-table-column prop="name" angin="center" label="勋章" width="80">
|
||
<template slot-scope="scope">
|
||
<img style="width:40px;height:40px" :src="`${webBaseUrl}/images/medal.png`" alt="" srcset="">
|
||
<!-- <medal-img class="table-medal" style="width:46px;height:52px" :item="medal"></medal-img> -->
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="level" angin="center" label="等级" width="80">
|
||
<template slot-scope="scope">LV{{scope.row.level}}</template>
|
||
</el-table-column>
|
||
<el-table-column prop="remark" angin="center" label="获得条件">
|
||
</el-table-column>
|
||
<el-table-column prop="num" angin="center" width="120" label="获得人数">
|
||
<template slot-scope="scope">{{scope.row.num?scope.row.num:0}}</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog width="540px" class="medalbox" :visible.sync="showLoginMedal" :append-to-body="true" >
|
||
<div class="jinian-medal-img" :style="`background: url(${webBaseUrl}/images/jinian_medal.png) no-repeat;`">
|
||
<!--登录勋章显示，根据UI显示修改-->
|
||
<span style="position: absolute; right:60px;top:60px;cursor: pointer;">
|
||
<img @click="showLoginMedal = false" :src="`${webBaseUrl}/images/close.png`" width="26px" height="26px" alt="">
|
||
</span>
|
||
<div style="text-align: center;"><img :src="`${webBaseUrl}/images/login_medal.png`" width="206px" height="269px" alt=""></div>
|
||
<div style="text-align: left;padding:20px 60px 100px 60px">
|
||
<div class="jntext1">感谢有你 一路相办</div>
|
||
<div class="jntext2">勋章领取条件:</div>
|
||
<div class="jntext3">2022年10月31日-11月15日登录过平台学习的校友</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import apiStat from '@/api/phase2/stat.js';
|
||
import MedalImg from '@/components/Portal/medalImg.vue';
|
||
import { mapGetters } from 'vuex';
|
||
export default{
|
||
computed: {
|
||
...mapGetters(['userInfo']),
|
||
nextmsg(){
|
||
let msg='';
|
||
if(this.medal.medalId){
|
||
if(this.medal.medalId==1){ //学习时长
|
||
msg='继续学习 <span class="next-num">'+this.medal.dvalue+'</span> 小时可升级进入下一级';
|
||
}else if(this.medal.medalId==2){ //学习天数
|
||
msg='继续学习 <span class="next-num">'+this.medal.dvalue+'</span> 天可升级进入下一级';
|
||
}else if(this.medal.medalId==3){ //上传的知识
|
||
msg='继续发布 <span class="next-num">'+this.medal.dvalue+'</span> 个知识可升级进入下一级';
|
||
}else if(this.medal.medalId==4){ //被点赞数
|
||
msg='再被点赞 <span class="next-num">'+this.medal.dvalue+'</span> 次可升级进入下一级';
|
||
}
|
||
}
|
||
return msg;
|
||
},
|
||
medalData(){
|
||
let data = [];
|
||
if(this.activeName == 'first') {
|
||
data = this.medalList
|
||
} else if(this.activeName == 'second') {
|
||
data = this.medalList.filter(item=>{
|
||
return item.medalId == 1 || item.medalId == 2;
|
||
})
|
||
} else if(this.activeName == 'third') {
|
||
data = this.medalList.filter(item=>{
|
||
return item.medalId == 4;
|
||
})
|
||
} else if(this.activeName == 'fourth') {
|
||
data = this.medalList.filter(item=>{
|
||
return item.medalId == 3;
|
||
})
|
||
}
|
||
console.log(data,'data');
|
||
return data;
|
||
}
|
||
},
|
||
components: {
|
||
MedalImg
|
||
},
|
||
data(){
|
||
return{
|
||
showLoginMedal:false,
|
||
baseUrl:process.env.VUE_APP_FILE_BASE_URL,
|
||
activeName:'first',
|
||
dialogVisible:false,
|
||
medalList:[],
|
||
medal:{},
|
||
tableData:[],
|
||
medalConfig:[],
|
||
rules:[],
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getMedal();
|
||
this.getConfig();
|
||
},
|
||
methods:{
|
||
|
||
getConfig() {// 获取勋章配置
|
||
apiStat.userMedalConfig().then(res=>{
|
||
if(res.status == 200) {
|
||
this.medalConfig = res.result;
|
||
}
|
||
})
|
||
},
|
||
goView(item) {
|
||
this.dialogVisible = true;
|
||
this.medal = item;
|
||
|
||
let data = this.medalConfig.find(it=>it.id ==item.medalId);
|
||
this.rules = JSON.parse(data.rules);
|
||
apiStat.userMedalLevelInfo(item.medalId).then(res=>{
|
||
if(res.status == 200) {
|
||
this.rules.forEach((it,index)=>{
|
||
it.num = 0;
|
||
res.result.some(con => {
|
||
if (con.medalLevel == it.level) {
|
||
it.num = con.currentLeverUserCount;
|
||
this.$set(this.rules[index],this.rules[index].num,con.currentLeverUserCount)
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
});
|
||
})
|
||
}
|
||
})
|
||
},
|
||
getMedal() {
|
||
apiStat.userMedal(this.userInfo.aid).then(res=>{
|
||
if(res.status == 200) {
|
||
this.medalList = res.result
|
||
}
|
||
})
|
||
},
|
||
handleClick() {
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.medalbox {
|
||
background: transparent !important;
|
||
::v-deep .el-dialog{
|
||
background: transparent !important;
|
||
box-shadow:none !important;
|
||
.el-dialog__header{
|
||
display: none !important;
|
||
}
|
||
.el-dialog__body{
|
||
// width: 320px !important;
|
||
// height: 420px !important;
|
||
background: transparent !important;
|
||
}
|
||
}
|
||
}
|
||
.jinian-medal-img{
|
||
text-align: center;
|
||
padding-top: 10px;
|
||
.jntext1{
|
||
height: 56px;
|
||
font-size: 40px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #924504;
|
||
line-height: 56px;
|
||
}
|
||
.jntext2{
|
||
margin-top: 30px;
|
||
height: 30px;
|
||
font-size: 22px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #924504;
|
||
line-height: 30px;
|
||
}
|
||
.jntext3{
|
||
margin-top: 10px;
|
||
height: 50px;
|
||
font-size: 18px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #924504;
|
||
line-height: 25px;
|
||
}
|
||
}
|
||
::v-deep .el-dialog__body{
|
||
border-radius: 27px !important;
|
||
}
|
||
.next-num{
|
||
color:#333333;
|
||
font-size:18px;
|
||
font-weight: 600;
|
||
}
|
||
::v-deep .table-medal{
|
||
.medal-text{
|
||
display: none;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
::v-deep .el-dialog{
|
||
border-radius: 27px !important;
|
||
}
|
||
.medal-dialog{
|
||
::v-deep .el-dialog__header{
|
||
display: none;
|
||
}
|
||
::v-deep .el-dialog__body{
|
||
background: rgba(216, 216, 216, 0.1);
|
||
padding: 0;
|
||
}
|
||
.medal-box{
|
||
height: 538px;
|
||
border-radius: 27px !important;
|
||
background: linear-gradient(360deg, #FCFCFC 70%, #E1F0FD 90%, #E1F0FE 100%);
|
||
padding: 48px 16px 40px 60px;
|
||
.el-table{
|
||
background: #fcfcfc;
|
||
}
|
||
::v-deep .el-table th.el-table__cell{
|
||
background: #fcfcfc;
|
||
font-size: 14px;
|
||
color: #666666;
|
||
}
|
||
::v-deep .el-table th.el-table__cell.is-leaf {
|
||
border-bottom: 1px solid #fcfcfc;
|
||
}
|
||
::v-deep .el-table td.el-table__cell{
|
||
border-bottom: 1px solid #fcfcfc;
|
||
}
|
||
::v-deep .el-table::before{
|
||
background-color: none;
|
||
}
|
||
.medal-steps{
|
||
margin: 34px 0 60px 0;
|
||
::v-deep .el-step__icon-inner{
|
||
display: none;
|
||
}
|
||
::v-deep .el-step__head.is-finish {
|
||
.el-step__icon{
|
||
width: 12px;
|
||
height: 12px;
|
||
background-color: #387DF7;
|
||
margin-top: 7px;
|
||
}
|
||
.el-step__line{
|
||
background-color: #387DF7;
|
||
}
|
||
|
||
}
|
||
::v-deep .el-step__title.is-finish{
|
||
font-size: 16px;
|
||
color: #333333 !important;
|
||
}
|
||
::v-deep .el-step__head.is-process{
|
||
.el-step__icon{
|
||
width: 20px;
|
||
height: 20px;
|
||
background: #387DF7;
|
||
margin-top: 3px;
|
||
}
|
||
}
|
||
::v-deep .el-step__head.is-wait {
|
||
.el-step__icon{
|
||
width: 12px;
|
||
height: 12px;
|
||
background-color: #cedffa;
|
||
margin-top: 7px;
|
||
}
|
||
}
|
||
::v-deep .el-step__icon.is-text{
|
||
border: 2px solid #387DF7;
|
||
}
|
||
::v-deep .el-step__line{
|
||
height: 4px;
|
||
background-color: #cedffa;
|
||
// border: 4px solid #387DF7;
|
||
}
|
||
}
|
||
.medal-top{
|
||
position: relative;
|
||
// display: flex;
|
||
h4{
|
||
margin: 0;
|
||
}
|
||
.title-medal{
|
||
font-weight: 400;
|
||
font-size: 28px;
|
||
color: #333333;
|
||
}
|
||
.title-medal-info{
|
||
font-size: 16px;
|
||
color: #666666;
|
||
margin-top: 14px;
|
||
}
|
||
::v-deep .medal-img{
|
||
position: absolute;
|
||
right:84px;
|
||
top:-104px;
|
||
.medal-text{
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.medal-box{
|
||
padding: 15px 18px;
|
||
.medal-list{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
.medal-index{
|
||
width: 144px;
|
||
|
||
text-align: center;
|
||
|
||
|
||
.index-title{
|
||
margin-top: 26px;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
}
|
||
.index-text{
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
margin-top: 10px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.btn{
|
||
width: 140px;
|
||
}
|
||
}
|
||
.medal-title{
|
||
margin: 0;
|
||
font-size: 18px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
margin-bottom: 24px;
|
||
.text{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
margin-left: 12px;
|
||
}
|
||
}
|
||
::v-deep .el-tabs__item{
|
||
height: 46px;
|
||
font-size: 18px;
|
||
color: #666666;
|
||
padding: 0 30px;
|
||
}
|
||
::v-deep .el-tabs__item.is-active{
|
||
|
||
}
|
||
::v-deep .el-tabs__nav-wrap::after{
|
||
background-color: #fff !important;
|
||
}
|
||
::v-deep .el-tabs__active-bar{
|
||
height: 4px;
|
||
width: 80px;
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
</style>
|