我的勋章

src/api/phase2/stat.js

@@ -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
 }

src/components/Portal/interestCollection.vue

@@ -38,13 +38,17 @@
       // this.userAvatar=require("@/assets/images/user/default.png");
       apiUserhobby.has().then(res=>{
         if(res.status == 200) {
-          this.interestCollection = true;
+            let time = localStorage.getItem('notYet');
-        } else {
+            if(time == '') {
-          let time = localStorage.getItem('notYet');
+                this.interestCollection = true;
-          let day = (new Date() - new Date(time))/(1000*60*60*24);
+            } else {
-          if(day > 15){
+                let time = localStorage.getItem('notYet');
-            this.interestCollection = true;
+                let day = (new Date() - new Date(time))/(1000*60*60*24);
-          }
+                if(day > 15){
+                    this.interestCollection = true;
+                }
+            }
+          
         }
       })
     },

src/components/Portal/medalImg.vue

@@ -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>

src/layout/index.vue

@@ -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>

src/views/medal/Index.vue

@@ -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">
+                <div class="medal-index" v-for="item in medalList" :key="item.id">
-                    <img src="/images/medal.png" alt="" srcset="">
+                    <medal-img :item="item"></medal-img>
-                    <p class="index-title">持之以恒</p> 
+                    <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,48 +16,99 @@
           <el-tab-pane label="社交勋章" name="third">社交勋章</el-tab-pane>
           <el-tab-pane label="成就勋章" name="fourth">成就勋章</el-tab-pane>
       </el-tabs>
-      <el-dialog
+      <el-dialog class="medal-dialog" title="提示" :visible.sync="dialogVisible" width="657px" top="200px">
-        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">
-        </div>
+                <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:[]
               }
           },
-      methods:{
+          mounted() {
-       
+             this.getMedal()
-        handleClick() {
+          },
+        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() {
 
+            }
         }
-       }
       }
   </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;