提交

src/components/Portal/medalDlg.vue

@@ -1,31 +1,139 @@
 <template>
-<!--  <el-dialog
+ <el-dialog
       :close-on-click-modal="false"
-      :visible.sync="interestCollection"
+      :visible.sync="medalDlg"
-      :append-to-body="true"  top="7vh" @close="closeDialog" custom-class="hobby-dialog">
+      :append-to-body="true" width="490px" top="7vh" custom-class="medalDlg-dialog">
-      <div class="interest_title">
+      <div class="medal-dlg-box">
-        <span class="text_84">请选择您的</span>
+        <img class="medal-del" @click="medalDlg = false" style="width:32px;height:32px" :src="`${webBaseUrl}/images/homeWu/medal-del.png`" alt="">
-        <span class="text_85">学习兴趣</span>
+        <div class="medal-img">
-        <span class="text_86">，至少三个，可随时调整</span>
+          <img style="width:196px;height:246px" :src="tabImg(medalData.id)" alt="" srcset="">
+           <span class="img-level">{{medalData.level}}</span>
         </div>
-      <div style="margin-top:0px;min-width: 770px;max-width:950px;">
         
-        <div class="interest" v-for="(sys,index) in sysTypeListMap" :key="sys.id">
+        <p class="medalDlg-title">{{medalData.name}}  {{medalData.level}}</p>
-           <p class="portal-title-tow interest-title">{{sys.name}}</p>
+        <p v-if="medalData.id == 1" class="medalDlg-text">您的累积学时已可解锁“{{medalData.name}}”{{medalData.level}} 勋章，继续加油！</p>
-           <el-checkbox-group v-model="checkboxGroup" v-if="sys.children.length > 0">
+        <p v-if="medalData.id == 2" class="medalDlg-text">您的知识贡献已可解锁“{{medalData.name}}”{{medalData.level}}勋章，继续加油！</p>
-            <el-checkbox size="medium" border v-for="ch in sys.children" :label="ch.id" :key="ch.id">{{ch.name}}</el-checkbox>
+        <p v-if="medalData.id == 3" class="medalDlg-text">您的持续学习记录已可解锁“{{medalData.name}}”{{medalData.level}}勋章，继续加油！</p>
-          </el-checkbox-group>
+        <p v-if="medalData.id == 4" class="medalDlg-text">您的累积学时已可解锁“{{medalData.name}}”{{medalData.level}}勋章，继续加油！</p>
       </div>
-      </div>
+    </el-dialog>
-      <div slot="footer" class="dialog-footer">
-        <div><el-button type="primary" class="btn-one" @click="saveInterest()">生成我的兴趣偏好</el-button></div>
-        <div><el-button @click="notYet()" class="btn-tow" type="text">暂不选择</el-button></div>
-      </div>
-    </el-dialog> -->
 </template>
 
 <script>
+    import { mapGetters, mapActions } from 'vuex';
+    // import apiUserhobby from "@/api/phase2/userhobby.js"
+    import apiGuide from "@/api/phase2/guide.js"
+    import { swiper, swiperSlide } from 'vue-awesome-swiper';
+	export default {
+		props:{
+          // show:{
+          //   type:Boolean,
+          //   default:false
+          // }
+		},
+    data(){
+    	return {
+            dlgHeight:'650px',
+            dlgWidth:'688px',
+            leftWidth:'160px',
+            description:'',
+            fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
+            medalDlg:true,// 兴趣采集
+            medalData:{
+              id:1,
+              name:'学霸之路',
+              level:'LV.1'
+            }
+           
+    	}
+    },
+    created() {
+      //这里的以后要去掉的，不应该是这样计算的
+
+
+      //这里必须放在当前的Session存储中，不能每次都调用
+      // apiGuide.hasUser().then(res=>{
+      //    if(res.result) {
+      //     this.guideCollection = false;
+      //    } else {
+      //     this.guideCollection = true;
+
+      //    }
+      // });
+      //只是在显示时才调用
+    },
+    mounted() {
+    },
+    methods:{
+      tabImg(id) {
+        if(id==1){
+          return `${this.webBaseUrl}/images/homeWu/medal-good.png`
+        } else if(id==2) {
+          return `${this.webBaseUrl}/images/homeWu/medal-day.png`
+        } else if(id==3) {
+          return `${this.webBaseUrl}/images/homeWu/medal-study.png`
+        }  else if(id==3) {
+          return `${this.webBaseUrl}/images/homeWu/medal-up.png`
+        }
+      }
+
+    },
+    watch:{
+
+    },
+    computed:{
+      ...mapGetters(['userInfo','studyTaskCount']),
+    
+		},
+
+	}
 </script>
 
-<style>
+<style  scoped lang="scss">
+   ::v-deep .medalDlg-dialog .el-dialog__header{
+      display: none;
+    }
+    ::v-deep .medalDlg-dialog .el-dialog__body{
+      padding: 0;
+      border-radius: 30px !important;
+      background: url('../../../public/images/homeWu/medal-bg-dlg.png');
+    }
+    ::v-deep .medalDlg-dialog{
+    border-radius: 30px !important;
+     .medal-dlg-box{
+      text-align: center;
+      box-sizing: border-box;
+      padding: 75px 90px 88px 90px;
+      position: relative;
+      .medal-img{
+        position: relative;
+        .img-level{
+          position: absolute;
+          top:46px;
+          left: 144px;
+          font-size: 16px;
+          color: #fff;
+          font-style:oblique;
+        }
+      }
+      .medal-del{
+        position: absolute;
+        top:46px;
+        right:46px;
+        
+      }
+      .medalDlg-title{
+        margin-top: 26px;
+        font-size: 30px;
+        font-weight: 600;
+        color: #333333;
+      }
+      .medalDlg-text{
+        margin-top: 26px;
+        font-size: 18px;
+        color: #666666;
+      }
+      
+     }
+  }  
 </style>

src/views/Index.vue

@@ -429,6 +429,7 @@
     <portalFloatTools></portalFloatTools>
     <interest-Collection ref="userCollection"></interest-Collection> <!-- 兴趣偏好 -->
     <guide-box ref="guide" @close="closeGuide"></guide-box> <!-- 引导页 -->
+    <medalDlg></medalDlg>
     <!--登录勋章-->
     <el-dialog width="320px"  class="medalbox"  :show-close="true"  :visible.sync="showLoginMedal"  :append-to-body="true" >
         <div class="medal-img">
@@ -459,6 +460,7 @@
   import articleImage from '@/components/Article/articleImage.vue';
   import InterestCollection from '@/components/Portal/interestCollection.vue'
   import GuideBox from '@/components/Portal/guideBox.vue'
+  import medalDlg from '@/components/Portal/medalDlg.vue'
   import { toScore,formatUserNumber,cutOrgNamePath} from '@/utils/tools.js';
   import {swiper,swiperSlide} from 'vue-awesome-swiper';
   import apiPlace from "@/api/phase2/place.js"
@@ -479,7 +481,8 @@
       interactBar,
       courseImage,
       InterestCollection,
-      GuideBox
+      GuideBox,
+      medalDlg
     },
     created() {
       this.$store.dispatch('refrashStudyTaskCount');
@@ -501,7 +504,7 @@
     },
     data() {
       return {
-        showLoginMedal:true,//是否显示登录勋章
+        showLoginMedal:false,//是否显示登录勋章
         lastStudy:{},
         overlayShow:false,
         userData: {  uvalue:0, totalStudyHour:0  },