mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-10 19:36:43 +08:00
我的勋章
This commit is contained in:
zhaofang
@@ -55,10 +55,19 @@ const userDynamicList = function(data) {
|
||||
const userCoinList = function(aid,days) {
|
||||
return ajax.get(baseURL,'/xboe/m/stat/usercoinrecord/list?aid='+aid+'&days='+days);
|
||||
}
|
||||
/**
|
||||
* 获取用户全部勋章
|
||||
* @param {String} aid 用户的id
|
||||
*
|
||||
*/
|
||||
const userMedal = function(aid) {
|
||||
return ajax.get(baseURL,'/xboe/m/stat/medal/user-medal?aid='+aid);
|
||||
}
|
||||
|
||||
export default {
|
||||
sendEvent,
|
||||
userTotal,
|
||||
userDynamicList,
|
||||
userCoinList
|
||||
userCoinList,
|
||||
userMedal
|
||||
}
|
||||
|
||||
@@ -38,6 +38,8 @@
|
||||
// this.userAvatar=require("@/assets/images/user/default.png");
|
||||
apiUserhobby.has().then(res=>{
|
||||
if(res.status == 200) {
|
||||
let time = localStorage.getItem('notYet');
|
||||
if(time == '') {
|
||||
this.interestCollection = true;
|
||||
} else {
|
||||
let time = localStorage.getItem('notYet');
|
||||
@@ -46,6 +48,8 @@
|
||||
this.interestCollection = true;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
|
||||
66
src/components/Portal/medalImg.vue
Normal file
66
src/components/Portal/medalImg.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="medal-icon">
|
||||
<img :src="baseUrl+item.medalIcon" alt="" srcset="">
|
||||
<span class="medal-text medal-level">LV.{{item.medalLevel}}</span>
|
||||
<span class="medal-text medal-name">{{item.medalName}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
item:{
|
||||
type:Object,
|
||||
default:()=>{}
|
||||
}
|
||||
},
|
||||
|
||||
data(){
|
||||
return {
|
||||
baseUrl:process.env.VUE_APP_FILE_BASE_URL,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.userAvatar=require("@/assets/images/user/default.png");
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
computed:{
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.medal-icon{
|
||||
position: relative;
|
||||
width: 143px;
|
||||
height: 161px;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.medal-text{
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
color: #e7d9cc;
|
||||
font-weight: 600;
|
||||
left:50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.medal-level{
|
||||
top:22%;
|
||||
font-style: italic;
|
||||
}
|
||||
.medal-name{
|
||||
bottom: 10%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="uc-layout">
|
||||
<div style="height: 50px;"><top></top></div>
|
||||
<div style="height: 72px;"><top></top></div>
|
||||
<!-- <div style="position: fixed;left: 0px; top: 60px;" :style="{width:isCollapse? '54px':'200px'}">
|
||||
<div :style="{width:isCollapse? '64px':'200px'}">
|
||||
<div>
|
||||
|
||||
@@ -4,11 +4,11 @@
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="全部勋章" name="first">
|
||||
<div class="medal-list" >
|
||||
<div class="medal-index" v-for="item in 5">
|
||||
<img src="/images/medal.png" alt="" srcset="">
|
||||
<p class="index-title">持之以恒</p>
|
||||
<div class="medal-index" v-for="item in medalList" :key="item.id">
|
||||
<medal-img :item="item"></medal-img>
|
||||
<p class="index-title">{{item.medalName}}</p>
|
||||
<p class="index-text">您已超过367人</p>
|
||||
<el-button class="btn" type="primary" @click="dialogVisible = true">查看详情</el-button>
|
||||
<el-button class="btn" type="primary" @click="goView(item)">查看详情</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
@@ -16,40 +16,88 @@
|
||||
<el-tab-pane label="社交勋章" name="third">社交勋章</el-tab-pane>
|
||||
<el-tab-pane label="成就勋章" name="fourth">成就勋章</el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-dialog
|
||||
class="medal-dialog"
|
||||
title="提示"
|
||||
:visible.sync="dialogVisible"
|
||||
width="657px"
|
||||
top="200px"
|
||||
>
|
||||
<el-dialog class="medal-dialog" title="提示" :visible.sync="dialogVisible" width="657px" top="200px">
|
||||
<div class="medal-box">
|
||||
<div class="medal-top">
|
||||
<div>
|
||||
<h4 class="title-medal">跬步千里 <span style="font-weight: 600;">LV3</span> </h4>
|
||||
<h4 class="title-medal">{{medal.medalName}} <span style="font-weight: 600;">LV{{medal.medalLevel}}</span> </h4>
|
||||
<p class="title-medal-info">你已经超过 387 人</p>
|
||||
<p class="title-medal-info">继续学习 40 小时可升级进入下一级</p>
|
||||
<p class="title-medal-info">继续学习 <span style="color:#333333;font-size:18px;font-weight: 600;">{{medal.nextValue - medal.curValue}}</span> 小时可升级进入下一级</p>
|
||||
</div>
|
||||
<div class="medal-img">
|
||||
<img style="width:186px;height:210px" src="/images/medal.png"/>
|
||||
<medal-img style="width:186px;height:210px" :item="medal"></medal-img>
|
||||
<!-- <img style="width:186px;height:210px" src="/images/medal.png"/> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="medal-steps">
|
||||
<el-steps :space="200" :active="medal.medalLevel-1">
|
||||
<el-step v-for="set in 8" :title="'L'+set"></el-step>
|
||||
</el-steps>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="date" angin="center"
|
||||
label="勋章"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name" angin="center"
|
||||
label="等级"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address" angin="center"
|
||||
label="获得条件">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address" angin="center"
|
||||
label="获得人数">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</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'])
|
||||
},
|
||||
components: {
|
||||
MedalImg
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
baseUrl:process.env.VUE_APP_FILE_BASE_URL,
|
||||
activeName:'first',
|
||||
dialogVisible:false,
|
||||
medalList:[],
|
||||
medal:{},
|
||||
tableData:[]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getMedal()
|
||||
},
|
||||
methods:{
|
||||
|
||||
goView(item) {
|
||||
this.dialogVisible = true;
|
||||
this.medal = item;
|
||||
console.log(item,'item');
|
||||
},
|
||||
getMedal() {
|
||||
apiStat.userMedal(this.userInfo.aid).then(res=>{
|
||||
if(res.status == 200) {
|
||||
this.medalList = res.result
|
||||
}
|
||||
})
|
||||
},
|
||||
handleClick() {
|
||||
|
||||
}
|
||||
@@ -58,6 +106,9 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-dialog{
|
||||
border-radius: 27px !important;
|
||||
}
|
||||
.medal-dialog{
|
||||
::v-deep .el-dialog__header{
|
||||
display: none;
|
||||
@@ -69,8 +120,62 @@
|
||||
.medal-box{
|
||||
height: 538px;
|
||||
border-radius: 27px !important;
|
||||
background: linear-gradient(360deg, #FCFCFC 0%, #E1F0FD 76%, #E1F0FE 100%);
|
||||
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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
}
|
||||
::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;
|
||||
@@ -87,10 +192,14 @@
|
||||
color: #666666;
|
||||
margin-top: 14px;
|
||||
}
|
||||
.medal-img{
|
||||
::v-deep .medal-img{
|
||||
position: absolute;
|
||||
right:84px;
|
||||
top:-104px;
|
||||
.medal-text{
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -103,10 +212,11 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.medal-index{
|
||||
|
||||
width: 144px;
|
||||
margin: 40px 60px 0 60px;
|
||||
text-align: center;
|
||||
|
||||
|
||||
.index-title{
|
||||
margin-top: 26px;
|
||||
font-size: 18px;
|
||||
|
||||
Reference in New Issue
Block a user