feat：工作台阳光采购引导

apps/bigmember_pc/src/api/modules/public.js

@@ -167,6 +167,7 @@ export function getZhiMaFilterData() {
 
 // 功能引导(阳光直采)
 export function showFunctionGuide(data) {
+  data = qs.stringify(data)
   return request({
     url: '/publicapply/userbase/tipInfo',
     method: 'POST',

apps/bigmember_pc/src/views/workspace/dashboard.vue

@@ -62,6 +62,8 @@ import MyEquityList from './components/MyEquityList.vue'
 const BusinessProfile = () => import('./components/BusinessProfile.vue')
 // const MyCustomer = () => import('./components/MyCustomer.vue')
 // const CustomerWatcher = () => import('./components/CustomerWatcher.vue')
+import { showFunctionGuide } from '@/api/modules/'
+import { tryCallHooks } from '@jianyu/easy-inject-qiankun'
 export default {
   name: 'WorkspaceDashboard',
   components: {
@@ -94,7 +96,8 @@ export default {
     return {
       dialog: {
         checkUserShow: false
-      }
+      },
+      showSunshineGuide: false
     }
   },
   computed: {
@@ -128,11 +131,51 @@ export default {
       'customerWatcherShow',
       'hasMemberNJPower',
       'dataReportShow'
-    ]),
+    ])
+  },
+  mounted() {
+    tryCallHooks({
+      fn: () => {
+        this.$BRACE.$on('close-guide', (data) => {
+          // 关闭引导
+          console.log(data, 'data')
+          this.handleFunctionGuide('know')
+        })
+      },
+      spareFn: () => {
+        console.log('err')
+      }
+    })
   },
   methods: {
     initNextDialog(key) {
       this.dialog[key] = true
+      // 获取引导
+      this.handleFunctionGuide()
+    },
+    async handleFunctionGuide(know) {
+      const params = {
+        tipName: 'sunshine_guide',
+        doType: know || ''
+      }
+      const { error_code: code, data } = await showFunctionGuide(params)
+      if (code === 0) {
+        const tipTimes = data || 0
+        this.showSunshineGuide = tipTimes < 2
+        if (know && data === 1) {
+          this.showSunshineGuide = false
+        }
+        try {
+          window.$BRACE.$emit('menu-guide', {
+            name: '直采',
+            show: this.showSunshineGuide,
+            title: '阳光直采上线了！',
+            content: '海量企业直发采购需求，供应商可直接对接采购部门'
+          })
+        } catch (error) {
+          console.log(error)
+        }
+      }
     }
   }
 }

packages/work-bench-frame/packages/components/Menu/index.vue

@@ -6,7 +6,8 @@
           class="aside-menu--first-item"
           :class="{
             active: String(active.apex) === first._compute._key,
-            'tip-active': String(tipActive) === first._compute._key
+            'guide-active':
+              String(guideActive) === first._compute._key && menuGuide.show
           }"
           v-for="(first, index) in filterMenus"
           :key="first._compute._key"
@@ -100,7 +101,7 @@
       </el-menu>
     </div>
     <div
-      v-if="tipActive !== -1"
+      v-if="menuGuide.show"
       v-loading.fullscreen="loading"
       element-loading-background="transparent"
       element-loading-spinner="el-empty-spinner"
@@ -110,9 +111,9 @@
       <div class="guide-line"></div>
       <div class="guide-dialog">
         <div class="dialog-content">
-          <h3 class="content-title">阳光直采上线了！</h3>
+          <h3 class="content-title">{{ menuGuide.title }}</h3>
           <p class="content-text">
-            海量企业直发采购需求，供应商可直接对接采购部门
+            {{ menuGuide.content }}
           </p>
         </div>
         <div class="dialog-footer">
@@ -147,8 +148,10 @@ export default {
     newFilterSubMenus() {
       return this.filterSubMenus.filter((v) => v.child && v.child.length > 0)
     },
-    tipActive() {
-      return this.filterMenus.findIndex((ele) => ele.name === '直采')
+    guideActive() {
+      return this.filterMenus.findIndex(
+        (ele) => ele.name === this.menuGuide.name
+      )
     }
   },
   data() {
@@ -157,16 +160,27 @@ export default {
       floatMenusList: [],
       openedSubMenu: [], // 鼠标悬浮默认打开的子菜单索引（index）列表
       asideTipTop: 0,
-      loading: true
+      loading: true,
+      menuGuide: {
+        name: '',
+        show: false,
+        title: '',
+        content: ''
+      }
     }
   },
   watch: {
-    tipActive(val) {
+    guideActive(val) {
       if (val > 0) {
-        this.setTipBoxStyle()
+        this.setGuideBoxStyle()
       }
     }
   },
+  mounted() {
+    this.onListenGuideInfo()
+    // 模拟子应用冒泡过来的事件
+    //
+  },
   methods: {
     ...mapMutations('work-bench/menu', ['setActiveOfType']),
     ...mapActions('work-bench/menu', ['setMenuType']),
@@ -277,21 +291,28 @@ export default {
       this.showFloatMenus = false
       this.floatMenusList = []
     },
-    setTipBoxStyle() {
+    onListenGuideInfo() {
+      this.$BRACE.$on('menu-guide', (data = {}) => {
+        Object.assign(this.menuGuide, data)
+        console.log(this.menuGuide)
+        this.setGuideBoxStyle()
+      })
+    },
+    setGuideBoxStyle() {
       setTimeout(() => {
-        const tipActive = document.querySelector(
-          '.aside-menu--first-item.tip-active'
+        const guideActive = document.querySelector(
+          '.aside-menu--first-item.guide-active'
         )
-        console.log(tipActive.offsetTop)
-        if (tipActive) {
-          const offsetTop = tipActive?.offsetTop
+        if (guideActive) {
+          const offsetTop = guideActive?.offsetTop
           this.asideTipTop = offsetTop + 6 - 20
         }
       }, 0)
     },
     onKnow() {
       try {
-        this.$BRACE.$emit('update-sunshine-guide', 'close')
+        this.menuGuide.show = false
+        this.$BRACE.$emit('close-guide', 'close')
       } catch (e) {}
     }
   }
@@ -382,7 +403,7 @@ $aside-menu--apex-bg: $aside-menu--color-black;
         background: $aside-menu--color-secondary;
         color: $aside-menu--color;
       }
-      &.tip-active {
+      &.guide-active {
         position: relative;
         &::after {
           position: absolute;