添加

src/views/hot-music-more/index.module.less

@@ -125,7 +125,7 @@
 }
 
 .changeSubjectContainer {
-  min-height: 317px;
+  min-height: 217px;
   max-height: 367px;
   overflow-x: hidden;
   overflow-y: auto;

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

@@ -7,8 +7,11 @@ import { useRouter } from 'vue-router';
 import MSearch from '@/components/m-search';
 import { Cell, Image, List, Popup } from 'vant';
 import iconPlayer from './images/icon-player.png';
-import { api_musicSheetPage } from '../co-ai/api';
+import { api_musicSheetCategoriesPage, api_musicSheetPage } from '../co-ai/api';
+import { state as baseState } from '@/state';
 import { useEventListener, useWindowScroll } from '@vueuse/core';
+import request from '@/helpers/request';
+import MEmpty from '@/components/m-empty';
 
 export default defineComponent({
   name: 'hot-music-more',
@@ -19,7 +22,10 @@ export default defineComponent({
       loading: false,
       finished: false,
       searchPopup: false,
-      musics: [] as any
+      musics: [] as any,
+      types: [] as any,
+      subjectList: [] as any,
+      subjectItem: {} as any
     });
 
     const musicForms = reactive({
@@ -46,9 +52,74 @@ export default defineComponent({
       state.loading = false;
     };
 
-    const getSubjectList = async () => {};
+    const getSubjecList = async () => {
+      try {
+        let subjectIds = baseState.user.data?.subjectId || '';
+        subjectIds = subjectIds.split(',');
+        const subjectId = subjectIds[0] || '';
+        const res = await request.post('/edu-app/subject/list', {
+          enableFlag: true,
+          delFlag: 0,
+          page: 1,
+          subjectId: subjectId || '',
+          rows: 999
+        });
+
+        if (subjectId) {
+          const result = res.data || [];
+          let tempSubjects: any = [];
+          result.forEach((item: any) => {
+            const instruments = item.instruments || [];
+            if (Number(subjectId) === item.id && instruments.length > 0) {
+              instruments.forEach((child: any, index: number) => {
+                tempSubjects.push({
+                  text: child.name,
+                  value: child.id,
+                  className: index === 0 ? 'selected' : ''
+                });
+              });
+            }
+          });
+
+          if (tempSubjects.length > 0) {
+            state.subjectList = [{ text: '全部', value: '' }, ...tempSubjects];
+            state.subjectItem = tempSubjects[0];
+          }
+        }
+        // console.log(state.subjectList, state.subjectItem);
+      } catch {
+        //
+      }
+    };
+
+    /** 获取音乐教材列表 */
+    const getMusicSheetCategories = async () => {
+      try {
+        let subjectIds = baseState.user.data?.subjectId || '';
+        subjectIds = subjectIds.split(',');
+        const subjectId = subjectIds[0] || '';
+        const res = await api_musicSheetCategoriesPage({
+          page: 1,
+          rows: 999,
+          subjectId: subjectId
+          // musicTagIds: route.query.musicTagId ? [route.query.musicTagId] : []
+        });
+        if (res.code === 200 && Array.isArray(res?.data?.rows)) {
+          const temp: any = [];
+          res.data.rows.forEach((item: any) => {
+            temp.push({
+              value: item.id,
+              text: item.name
+            });
+          });
+          state.types = temp;
+        }
+      } catch (error) {
+        console.log('🚀 ~ error:', error);
+      }
+    };
 
-    onMounted(() => {
+    onMounted(async () => {
       useEventListener(document, 'scroll', () => {
         const { y } = useWindowScroll();
         if (y.value > 32) {
@@ -57,6 +128,9 @@ export default defineComponent({
           state.background = 'transparent';
         }
       });
+      state.loading = true;
+      await getSubjecList();
+      await getMusicSheetCategories();
       getMusicList();
     });
     return () => (
@@ -137,9 +211,9 @@ export default defineComponent({
           ))}
         </List>
 
-        {/* {!data.skelete && data.list.length === 0 && (
-          <MEmpty description="暂无记录" />
-        )} */}
+        {!state.loading && state.musics.length === 0 && (
+          <MEmpty description="暂无曲谱" />
+        )}
 
         <Popup position="bottom" round v-model:show={state.searchPopup}>
           <div class={styles.searchContainer}>
@@ -158,43 +232,39 @@ export default defineComponent({
             </div>
 
             <div class={styles.changeSubjectContainer}>
-              <div class={styles.title}>声部</div>
-
-              <div class={styles.subjectContainer}>
-                <div
-                  class={[
-                    styles.subjectItem
-                    // item.children.length > 0 && styles.arrow,
-                    // item.id === state.subjectValue && styles.active
-                  ]}>
-                  测试
-                </div>
-                <div class={[styles.subjectItem, styles.arrow, styles.active]}>
-                  测试
-                </div>
-              </div>
-
-              <div class={styles.title}>乐器</div>
-              <div class={styles.subjectContainer}>
-                <div
-                  class={[
-                    styles.subjectItem
-                    // styles.active
-                  ]}>
-                  测试
-                </div>
-              </div>
+              {state.subjectList.length > 2 && (
+                <>
+                  <div class={styles.title}>乐器</div>
+                  <div class={styles.subjectContainer}>
+                    {state.subjectList.map((subject: any) => (
+                      <div
+                        class={[
+                          styles.subjectItem
+                          // styles.active
+                        ]}>
+                        {subject.text}
+                      </div>
+                    ))}
+                  </div>
+                </>
+              )}
 
-              <div class={styles.title}>曲谱教材</div>
-              <div class={styles.subjectContainer}>
-                <div
-                  class={[
-                    styles.subjectItem
-                    // styles.active
-                  ]}>
-                  一年级上册
-                </div>
-              </div>
+              {state.types.length > 0 && (
+                <>
+                  <div class={styles.title}>曲谱教材</div>
+                  <div class={styles.subjectContainer}>
+                    {state.types.map((item: any) => (
+                      <div
+                        class={[
+                          styles.subjectItem
+                          // styles.active
+                        ]}>
+                        {item.text}
+                      </div>
+                    ))}
+                  </div>
+                </>
+              )}
             </div>
           </div>
         </Popup>