添加搜索

src/views/hot-music-more/index.tsx

@@ -13,6 +13,7 @@ import { useEventListener, useWindowScroll } from '@vueuse/core';
 import request from '@/helpers/request';
 import MEmpty from '@/components/m-empty';
 import { postMessage } from '@/helpers/native-message';
+import dayjs from 'dayjs';
 
 export default defineComponent({
   name: 'hot-music-more',
@@ -23,11 +24,16 @@ export default defineComponent({
       loading: false,
       finished: false,
       searchPopup: false,
+      musicTagList: [] as any,
+      gradeList: [] as any,
+      musicCategory: [] as any,
       musics: [] as any,
       types: [] as any,
       subjectList: [] as any,
       sMSCI: '',
-      sMII: ''
+      sMII: '',
+      sBookId: null as any,
+      sGrade: null as any
     });
 
     const musicForms = reactive({
@@ -35,6 +41,8 @@ export default defineComponent({
       rows: 20,
       status: 1,
       keyword: '', // 关键词
+      grade: '',
+      bookVersionId: null as any,
       musicSheetCategoriesId: '',
       musicalInstrumentId: ''
     });
@@ -148,9 +156,68 @@ export default defineComponent({
       });
     };
 
+    const onChangeSearch = (type: string, list: any, search = false) => {
+      if (type === 'version') {
+        state.gradeList = list || [];
+        if (state.gradeList.length > 0) {
+          if (search) {
+            state.sGrade = state.gradeList[0].id;
+          } else {
+            musicForms.grade = state.gradeList[0].id;
+          }
+
+          state.musicCategory = state.gradeList[0].children || [];
+          if (state.musicCategory.length > 0) {
+            if (search) {
+              state.sMSCI = state.musicCategory[0].id;
+            } else {
+              musicForms.musicSheetCategoriesId = state.musicCategory[0].id;
+            }
+          }
+        }
+      } else if (type === 'grade') {
+        state.musicCategory = list || [];
+        if (state.musicCategory.length > 0) {
+          // musicForms.musicSheetCategoriesId = state.musicCategory[0].id;
+          if (search) {
+            state.sMSCI = state.musicCategory[0].id;
+          } else {
+            musicForms.musicSheetCategoriesId = state.musicCategory[0].id;
+          }
+        }
+      }
+    };
+    const getMusicTagTree = async () => {
+      try {
+        const { data } = await request.get(
+          '/edu-app/musicTag/tree?queryCategory=true'
+        );
+        console.log(data);
+        const result = data || [];
+        result.forEach((item: any) => {
+          if (item.children && item.children.length > 0) {
+            item.children.forEach((child: any) => {
+              child.children = child.categoriesList || [];
+            });
+          }
+        });
+        console.log(result, 'result');
+        state.musicTagList = result;
+        if (result.length > 0) {
+          musicForms.bookVersionId = result[0].id;
+          onChangeSearch('version', result[0].children);
+        }
+      } catch {
+        //
+      }
+    };
+
     // 判断是否有数据
     const isSearch = computed(() => {
-      return state.subjectList.length > 2 || state.types.length > 0
+      return state.subjectList.length > 2 ||
+        state.musicCategory.length > 0 ||
+        state.musicTagList.length > 0 ||
+        state.gradeList.length > 0
         ? true
         : false;
     });
@@ -164,9 +231,11 @@ export default defineComponent({
       //     state.background = 'transparent';
       //   }
       // });
+
       state.loading = true;
       // await getSubjecList();
-      await getMusicSheetCategories();
+      // await getMusicSheetCategories();
+      await getMusicTagTree();
       getMusicList();
     });
     return () => (
@@ -223,6 +292,8 @@ export default defineComponent({
                     ]}
                     onClick={() => {
                       state.sMSCI = musicForms.musicSheetCategoriesId;
+                      state.sBookId = musicForms.bookVersionId;
+                      state.sGrade = musicForms.grade;
                       state.sMII = musicForms.musicalInstrumentId;
                       state.searchPopup = true;
                     }}>
@@ -295,6 +366,8 @@ export default defineComponent({
                 onClick={() => {
                   musicForms.musicSheetCategoriesId = state.sMSCI;
                   musicForms.musicalInstrumentId = state.sMII;
+                  musicForms.bookVersionId = state.sBookId;
+                  musicForms.grade = state.sGrade;
                   state.searchPopup = false;
                   musicForms.page = 1;
                   state.musics = [];
@@ -328,7 +401,49 @@ export default defineComponent({
               )}
               */}
 
-              {state.types.length > 0 && (
+              {state.musicTagList.length > 0 && (
+                <>
+                  <div class={styles.title}>版本</div>
+                  <div class={styles.subjectContainer}>
+                    {state.musicTagList.map((subject: any) => (
+                      <div
+                        class={[
+                          styles.subjectItem,
+                          subject.id === state.sBookId && styles.active
+                        ]}
+                        onClick={() => {
+                          state.sBookId = subject.id;
+                          onChangeSearch('version', subject.children, true);
+                        }}>
+                        {subject.name}
+                      </div>
+                    ))}
+                  </div>
+                </>
+              )}
+
+              {state.gradeList.length > 0 && (
+                <>
+                  <div class={styles.title}>年级</div>
+                  <div class={styles.subjectContainer}>
+                    {state.gradeList.map((subject: any) => (
+                      <div
+                        class={[
+                          styles.subjectItem,
+                          subject.id === state.sGrade && styles.active
+                        ]}
+                        onClick={() => {
+                          state.sGrade = subject.id;
+                          onChangeSearch('grade', subject.children, true);
+                        }}>
+                        {subject.name}
+                      </div>
+                    ))}
+                  </div>
+                </>
+              )}
+
+              {state.musicCategory.length > 0 && (
                 <>
                   <div class={styles.title}>曲谱教材</div>
                   <div
@@ -336,26 +451,16 @@ export default defineComponent({
                       styles.subjectContainer,
                       styles.subjectContainerTwo
                     ]}>
-                    <div
-                      class={[
-                        styles.subjectItem,
-                        state.sMSCI === '' && styles.active
-                      ]}
-                      onClick={() => {
-                        state.sMSCI = '';
-                      }}>
-                      全部
-                    </div>
-                    {state.types.map((item: any) => (
+                    {state.musicCategory.map((item: any) => (
                       <div
                         class={[
                           styles.subjectItem,
-                          item.value === state.sMSCI && styles.active
+                          item.id === state.sMSCI && styles.active
                         ]}
                         onClick={() => {
-                          state.sMSCI = item.value;
+                          state.sMSCI = item.id;
                         }}>
-                        {item.text}
+                        {item.name}
                       </div>
                     ))}
                   </div>

vite.config.ts

@@ -16,7 +16,7 @@ function resolve(dir: string) {
 // const proxyUrl = 'https://test.lexiaoya.cn/';
 // const proxyUrl = 'https://kt.colexiu.com/';
 // const proxyUrl = 'http://192.168.3.143:7093/';
-const proxyUrl = 'https://test.kt.colexiu.com/';
+const proxyUrl = 'https://dev.kt.colexiu.com/';
 export default defineConfig({
   base: './',
   plugins: [