updates

pages/roadmap/index.vue

 <template>
   <div>
     <div class="banner">
-      <div v-for="(item, index) in roadList" :key="index" class="banner_roadList">
+      <div v-for="(item, index) in list" :key="index" class="banner_roadList">
         <el-popover
-          title="我的项目"
+          :title="item.project_name"
           width="340"
           trigger="hover"
           popper-class="popover"
           :placement="item.position"
           v-model="item.isShow"
           visible-arrow="true"
+          @show="handleShow(item)"
         >
-          <!-- <div> -->
           <div v-for="(it, indexItem) in item.projectList" :key="indexItem" class="project_name">
             <AppLink :data="it">
               {{ it.name }}
@@ -24,7 +24,6 @@
               {{ itTwo.name }}
             </AppLink>
           </div>
-          <!-- </div> -->
 
           <div slot="reference" class="banner_roadList_con">
             <img :src="item.icon" alt="" />
@@ -60,17 +59,37 @@
 </template>
 
 <script>
+import { getUser } from '@/api/my'
 import { roadMapList, homeList } from '@/utils/roadMap.js'
 import ProjectCard from '@/components/ProjectCard.vue'
 import AppLink from '@/components/Link.vue'
 
 export default {
   components: { ProjectCard, AppLink },
-  computed: {},
+  computed: {
+    learning() {
+      return this.learningInfo.filter(item => item.status === '1')
+    },
+    list() {
+      if (this.learningInfo.length) {
+        this.roadList.forEach(item => {
+          if (item.projectList.find(it => it.tenant === this.learning[0].tenant)) {
+            item.isShow = true
+            item.project_name = '我的项目'
+            item.projectList = item.projectList.filter(it => it.tenant === this.learning[0].tenant)
+          }
+        })
+        return this.roadList
+      } else {
+        return this.roadList
+      }
+    }
+  },
   data() {
     return {
-      roadList: [],
-      homeList: [],
+      learningInfo: [],
+      roadList: roadMapList,
+      homeList: homeList,
       // 热门专业
       internationalDegreeProjectList: [
         {
@@ -103,18 +122,21 @@ export default {
       ]
     }
   },
-  mounted() {
-    console.log(this.$store.state.user, 'user')
-    this.roadList = roadMapList
-    this.homeList = homeList
-    this.$nextTick(() => {
-      // 获取子元素的个数
-      this.roadList.map(item => {
-        console.log(item.title, 'title')
-        if (item.title === '职业教育') {
-          item.isShow = true
+  methods: {
+    handleShow(val) {
+      this.list.map(item => {
+        if (item.title !== val.title) {
+          item.isShow = false
         }
       })
+    }
+  },
+  created() {
+    getUser().then(res => {
+      if (res.code === 0) {
+        this.learningInfo = res.data.learning_info
+        console.log(this.learningInfo)
+      }
     })
   }
 }
@@ -123,6 +145,8 @@ export default {
 <style lang="scss">
 .el-popover.popover {
   background: rgba(255, 255, 255, 0.39);
+  border-radius: 20px;
+  padding: 26px 0 40px 27px;
   .el-popover__title {
     font-weight: 400;
     color: #ffffff;
@@ -134,6 +158,9 @@ export default {
     color: #ffffff;
     cursor: pointer;
   }
+  .project_name:hover {
+    text-shadow: 2px 2px 5px rgb(143, 141, 141);
+  }
   .line {
     width: 281px;
     border: 1px dashed #ccc;

store/index.js

@@ -50,7 +50,6 @@ export const actions = {
     console.log('000')
     const isLogin = await getUser()
       .then(response => {
-        console.log(response, 'response')
         commit('setUser', response.data)
         return true
       })

utils/roadMap.js

 export const roadMapList = [
   {
+    project_name: '项目名称',
     isShow: false,
     position: 'top',
     icon: 'https://webapp-pub.ezijing.com/www/pc/lifeLearning/icon1.png',
     title: '职业教育',
     projectList: [
       {
-        tenant: '',
+        tenant: 'x1',
         name: '紫荆数字经济产业学院',
         href: 'https://www.baidu.com/'
       }
@@ -23,8 +24,10 @@ export const roadMapList = [
     ]
   },
   {
+    project_name: '项目名称',
+
     isShow: false,
-    position: 'top',
+    position: 'left-end',
     icon: 'https://webapp-pub.ezijing.com/www/pc/lifeLearning/icon2.png',
     title: '本科',
     projectList: [
@@ -34,7 +37,9 @@ export const roadMapList = [
       },
       {
         name: '国际大一（1+3）即将推出',
-        onClick: ''
+        onClick() {
+          alert('即将推出')
+        }
       }
     ],
     checkList: [
@@ -49,6 +54,8 @@ export const roadMapList = [
     ]
   },
   {
+    project_name: '项目名称',
+
     position: 'right-start',
     isShow: false,
 
@@ -80,6 +87,8 @@ export const roadMapList = [
     ]
   },
   {
+    project_name: '项目名称',
+
     position: 'right-start',
     isShow: false,
     icon: 'https://webapp-pub.ezijing.com/www/pc/lifeLearning/icon4.png',
@@ -114,6 +123,8 @@ export const roadMapList = [
     ]
   },
   {
+    project_name: '项目名称',
+
     position: 'bottom-start',
     isShow: false,