mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-11 03:46:44 +08:00
我的勋章
This commit is contained in:
@@ -2,20 +2,19 @@
|
||||
<div class="medal-box">
|
||||
<h6 class="medal-title">我的勋章 <span class="text">勋章规则 ></span> </h6>
|
||||
<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 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="goView(item)">查看详情</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</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-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" >
|
||||
<div class="medal-index" v-for="item in medalData" :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="goView(item)">查看详情</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog class="medal-dialog" title="提示" :visible.sync="dialogVisible" width="657px" top="200px">
|
||||
<div class="medal-box">
|
||||
<div class="medal-top">
|
||||
@@ -69,7 +68,26 @@
|
||||
import { mapGetters } from 'vuex';
|
||||
export default{
|
||||
computed: {
|
||||
...mapGetters(['userInfo'])
|
||||
...mapGetters(['userInfo']),
|
||||
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;
|
||||
})
|
||||
}
|
||||
return data;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
MedalImg
|
||||
@@ -97,7 +115,6 @@
|
||||
}
|
||||
})
|
||||
for (let index = 0; index < item.medalLevel; index++) {
|
||||
|
||||
this.tableData.push({
|
||||
medalIcon:item.medalIcon,
|
||||
medalLevel:index,
|
||||
|
||||
Reference in New Issue
Block a user