Jelajahi Sumber

功能引导

黄琪勇 1 tahun lalu
induk
melakukan
f0ab10c648

TEMPAT SAMPAH
src/components/layout/images/gnyd.png


+ 5 - 2
src/components/layout/index.module.less

@@ -247,7 +247,10 @@
         flex-direction: row;
         align-items: center;
         cursor: pointer;
-
+        &.booxToolDisabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
         img {
           width: 100%;
           height: 100%;
@@ -586,4 +589,4 @@
 
 .popBox {
   z-index: 9999;
-}
+}

+ 4 - 4
src/components/layout/index.tsx

@@ -687,7 +687,7 @@ export default defineComponent({
                 <img src={setTimeIcon} alt="" />
                 计时器
               </div>
-              <div
+              {/* <div
                 class={[
                   styles.booxToolItem,
                   !startClassStatus.value && styles.booxToolDisabled
@@ -702,10 +702,10 @@ export default defineComponent({
                   alt=""
                 />
                 开始上课
-              </div>
+              </div> */}
             </div>
             <div>
-              <div
+              {/* <div
                 class={[
                   styles.booxToolItem,
                   !helpNoteStatus.value && styles.booxToolDisabled
@@ -718,7 +718,7 @@ export default defineComponent({
                 }}>
                 <img src={iconNote} alt="" />
                 功能引导
-              </div>
+              </div> */}
 
               <div
                 class={styles.booxToolItem}

+ 66 - 9
src/components/layout/layoutTop.tsx

@@ -1,4 +1,12 @@
-import { defineComponent, ref, onMounted, nextTick, onUnmounted, reactive } from 'vue';
+import {
+  defineComponent,
+  ref,
+  onMounted,
+  nextTick,
+  onUnmounted,
+  reactive,
+  computed
+} from 'vue';
 import styles from './index.module.less';
 import { NImage, NBadge, NPopover, NIcon, NModal, NTooltip } from 'naive-ui';
 import styles2 from './modals/suggestion-option.module.less';
@@ -16,10 +24,11 @@ import inBack from './images/inBack.png';
 import submitBtn from './images/submitBtn.png';
 import sealing from './images/sealing.png';
 import boxBg from './images/boxBg.png';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import opinionIcon from './images/opinionIcon.png';
 import inviteIcon from './images/invite_student_icon.png';
+import gnydIcon from './images/gnyd.png';
 import classHistoryIcon from './images/classHistoryIcon.png';
 import 'animate.css';
 import ForgotPassword from '/src/views/setting/modal/forgotPassword';
@@ -30,7 +39,7 @@ import ClassModal from '/src/views/home/modals/class-modal';
 import { suggestMessageUnread } from '/src/api/user';
 import { eventGlobal } from '/src/utils';
 import { usePrepareStore } from '/src/store/modules/prepareLessons';
-import { schoolDetail } from '/src/views/studentList/api'
+import { schoolDetail } from '/src/views/studentList/api';
 import AddStudentModel from '/src/views/studentList/modals/addStudentModel';
 
 export default defineComponent({
@@ -50,7 +59,7 @@ export default defineComponent({
     const prepareStore = usePrepareStore();
     const state = reactive({
       addStudentVisible: false,
-      activeRow: {} as any,
+      activeRow: {} as any
     });
 
     const oncheckEditStatus = (callBack: any) => {
@@ -92,8 +101,7 @@ export default defineComponent({
     const showInviteQrcode = async () => {
       try {
         const { schoolInfos } = users.getUserInfo;
-        const schoolId =
-          schoolInfos.length > 0 ? schoolInfos[0].id : null;
+        const schoolId = schoolInfos.length > 0 ? schoolInfos[0].id : null;
         if (schoolId) {
           const { data } = await schoolDetail({ id: schoolId });
           state.activeRow = data;
@@ -103,7 +111,7 @@ export default defineComponent({
       } catch {
         //
       }
-    }
+    };
 
     const suggestionStatus = ref(false);
     const getSuggestMessageUnread = async () => {
@@ -180,6 +188,30 @@ export default defineComponent({
       }
     };
     loadImg(imglist);
+
+    // 功能引导
+    const route = useRoute();
+    const helpNoteList = reactive({
+      baseListTab: ''
+    });
+    const helpNoteStatus = computed(() => {
+      const routePath = route.path;
+      const hidePath = [
+        '/classDetail',
+        '/classStudentDetail',
+        '/notation',
+        '/xiaoku-ai',
+        '/studentDetail',
+        '/classStudentRecode',
+        '/afterWorkDetail'
+      ];
+      // 单独判断个人信息页面[学校设置]有引导
+      if (route.path === '/setting') {
+        return helpNoteList.baseListTab === 'school' ? true : false;
+      } else {
+        return hidePath.includes(routePath) ? false : true;
+      }
+    });
     return () => (
       <>
         <div class={styles.layoutTop}>
@@ -198,6 +230,29 @@ export default defineComponent({
             <NTooltip showArrow={false}>
               {{
                 trigger: () => (
+                  <div
+                    class={[
+                      styles.optons,
+                      !helpNoteStatus.value && styles.booxToolDisabled
+                    ]}
+                    onClick={() => {
+                      if (!helpNoteStatus.value) return;
+                      // 默认滚动到页面顶部,在显示指引
+                      document
+                        .querySelector('#WrapcoreViewWrap')
+                        ?.scrollTo(0, 0);
+                      console.log(route.name, 'guideInfo');
+                      eventGlobal.emit('teacher-guideInfo', route.name);
+                    }}>
+                    <NImage src={gnydIcon} previewDisabled></NImage>
+                  </div>
+                ),
+                default: '功能引导'
+              }}
+            </NTooltip>
+            <NTooltip showArrow={false}>
+              {{
+                trigger: () => (
                   <div class={styles.optons} onClick={showInviteQrcode}>
                     <NBadge dot={suggestionStatus.value} color={'#FF1036'}>
                       <NImage src={inviteIcon} previewDisabled></NImage>
@@ -206,7 +261,7 @@ export default defineComponent({
                 ),
                 default: '邀请学生'
               }}
-            </NTooltip>            
+            </NTooltip>
             <NPopover
               width={380}
               class={styles.popoverClassModel}
@@ -425,7 +480,9 @@ export default defineComponent({
           </NModal>
 
           {state.addStudentVisible ? (
-            <div v-model:show={state.addStudentVisible} class={['n-modal-mask', styles.popBox]}>
+            <div
+              v-model:show={state.addStudentVisible}
+              class={['n-modal-mask', styles.popBox]}>
               <AddStudentModel
                 activeRow={state.activeRow}
                 onClose={() => {