Newer
Older
DH_Apicture / src / App.vue
@ZZJ ZZJ on 30 Nov 3 KB 修改代码
  1. <template>
  2. <router-view> </router-view>
  3. <RongyunCommunication v-if="isRY"></RongyunCommunication>
  4.  
  5. <el-popover :width="407" placement="left" v-if="description">
  6. <template #reference>
  7. <div class="menuIcons">
  8. <img src="../src/assets/images/show_menu.png" style="margin-bottom: -3px" />
  9. </div>
  10. </template>
  11. <template #default>
  12. <div class="menu-description flex flex-v">
  13. <div class="description-title flex flex-align-center">文档标题</div>
  14. <div class="description-content" v-html="description"></div>
  15. </div>
  16. </template>
  17. </el-popover>
  18. </template>
  19.  
  20. <script setup>
  21. import { getToken } from '@/utils/auth';
  22. import { listMenu } from '@/api/menu';
  23. import useSettingsStore from '@/store/modules/settings';
  24. import { handleThemeStyle } from '@/utils/theme';
  25. import { useRouter } from 'vue-router';
  26.  
  27. const router = useRouter();
  28. const description = ref('');
  29. import RongyunCommunication from '@/views/RongyunCommunication/index.vue'; //融云
  30. const isRY = ref(false);
  31. import useUserStore from '@/store/modules/user';
  32. const appStore = useUserStore();
  33. watch(
  34. () => appStore.token,
  35. (newVal, oldVal) => {
  36. console.log('走了这里watch');
  37. if (newVal) {
  38. console.log(' 新的token;', newVal);
  39. isRY.value = true;
  40. } else {
  41. console.log('改变');
  42. isRY.value = false;
  43. }
  44. },
  45. { immediate: false, deep: true }
  46. );
  47.  
  48. watch(
  49. () => router.currentRoute.value.path,
  50. (newValue, oldValue) => {
  51. // 全屏项目中无需说明弹窗
  52. if (router.currentRoute.value.query.type == 'FullScreen') {
  53. // 全屏页面
  54. description.value = '';
  55. } else {
  56. // 非全屏页面
  57. getMenuList(router.currentRoute.value.meta.title);
  58. }
  59. },
  60. { immediate: true }
  61. );
  62. function getMenuList(menuName) {
  63. if (getToken()) {
  64. listMenu({ menuName: menuName }).then(res => {
  65. if (res.data.length) {
  66. description.value = res.data[0].description;
  67. } else {
  68. description.value = '';
  69. }
  70. });
  71. }
  72. }
  73. onMounted(() => {
  74. console.log('走了这里', appStore.token);
  75. if (appStore.token) {
  76. setTimeout(() => {
  77. isRY.value = true;
  78. }, 1000);
  79. } else {
  80. isRY.value = false;
  81. }
  82.  
  83. nextTick(() => {
  84. handleThemeStyle(useSettingsStore().theme);
  85. });
  86. });
  87. </script>
  88. <style lang="scss" scoped>
  89. .menuIcons {
  90. position: absolute;
  91. right: 60px;
  92. bottom: 50px;
  93. z-index: 999;
  94. box-shadow: 0px 0px 3px #000000;
  95. border-radius: 50%;
  96. }
  97. :deep(.el-popper) {
  98. padding: 0 !important;
  99. }
  100. .menu-description {
  101. width: 407px;
  102. border-radius: 2px 2px 0px 0px;
  103.  
  104. .description-title {
  105. width: 400px;
  106. height: 50px;
  107. margin: -12px;
  108. background: #1981ff;
  109. border-radius: 2px 2px 0px 0px;
  110. font-size: 18px;
  111.  
  112. font-weight: 500;
  113. color: #ffffff;
  114. padding-left: 19px;
  115. }
  116. .description-content {
  117. width: 400px;
  118. margin-left: -12px;
  119. margin-right: -12px;
  120. padding: 24px 12px 12px 12px;
  121. font-size: 14px;
  122.  
  123. font-weight: 500;
  124. color: #666666;
  125. }
  126. }
  127.  
  128. :deep(.el-message) {
  129. z-index: 9999999 !important;
  130. }
  131. </style>
  132. <style lang="scss">
  133. .message-zindex {
  134. z-index: 100000000 !important;
  135. }
  136. </style>