添加

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

@@ -84,13 +84,16 @@
 //   background: url('./images/woring-bg-tablet.png') no-repeat top center;
 //   background-size: contain;
 // }
+.emptyGroup {
+  height: calc(100vh - var(--header-height));
+}
 
 .musicList {
   margin: 8px 13px 13px;
   background: #FFFFFF;
   border-radius: 16px;
   overflow: hidden;
-  min-height: 50vh;
+  // min-height: 50vh;
 
   .musicItem {
     padding: 15px 12px;
@@ -196,6 +199,7 @@
   .subjectItem {
     width: 31%;
     height: 34px;
+    padding: 0 8px;
     line-height: 34px;
     text-align: center;
     background: #F6F6F6;
@@ -204,6 +208,10 @@
     color: #333333;
     border: 1px solid #F6F6F6;
     margin-bottom: 12px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
 
     &:nth-child(3n + 2) {
       margin-left: 2.333%;

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

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, reactive } from 'vue';
+import { computed, defineComponent, onMounted, reactive } from 'vue';
 import styles from './index.module.less';
 import { browser } from '@/helpers/utils';
 import MSticky from '@/components/m-sticky';
@@ -12,6 +12,7 @@ import { state as baseState } from '@/state';
 import { useEventListener, useWindowScroll } from '@vueuse/core';
 import request from '@/helpers/request';
 import MEmpty from '@/components/m-empty';
+import { postMessage } from '@/helpers/native-message';
 
 export default defineComponent({
   name: 'hot-music-more',
@@ -25,7 +26,8 @@ export default defineComponent({
       musics: [] as any,
       types: [] as any,
       subjectList: [] as any,
-      subjectItem: {} as any
+      sMSCI: '',
+      sMII: ''
     });
 
     const musicForms = reactive({
@@ -33,7 +35,8 @@ export default defineComponent({
       rows: 20,
       status: 1,
       keyword: '', // 关键词
-      musicSheetCategoriesId: ''
+      musicSheetCategoriesId: '',
+      musicalInstrumentId: ''
     });
 
     const getMusicList = async () => {
@@ -83,7 +86,7 @@ export default defineComponent({
 
           if (tempSubjects.length > 0) {
             state.subjectList = [{ text: '全部', value: '' }, ...tempSubjects];
-            state.subjectItem = tempSubjects[0];
+            // musicForms.musicalInstrumentId = tempSubjects[0].value;
           }
         }
         // console.log(state.subjectList, state.subjectItem);
@@ -119,6 +122,28 @@ export default defineComponent({
       }
     };
 
+    const onDetail = (item: any) => {
+      let src = `${location.origin}/instrument?id=${item?.id}&showGuide=true`;
+      postMessage({
+        api: 'openAccompanyWebView',
+        content: {
+          url: src,
+          orientation: 0,
+          isHideTitle: true,
+          statusBarTextColor: false,
+          isOpenLight: true,
+          c_orientation: 0 // 0 横屏 1 竖屏
+        }
+      });
+    };
+
+    // 判断是否有数据
+    const isSearch = computed(() => {
+      return state.subjectList.length > 2 && state.types.length > 0
+        ? true
+        : false;
+    });
+
     onMounted(async () => {
       useEventListener(document, 'scroll', () => {
         const { y } = useWindowScroll();
@@ -169,17 +194,22 @@ export default defineComponent({
 
           <MSearch background={state.background}>
             {{
-              left: () => (
-                <div
-                  class={[
-                    styles.searchContent,
-                    state.searchPopup && styles.active
-                  ]}
-                  onClick={() => (state.searchPopup = true)}>
-                  <span>筛选</span>
-                  <i></i>
-                </div>
-              )
+              left: () =>
+                isSearch.value && (
+                  <div
+                    class={[
+                      styles.searchContent,
+                      state.searchPopup && styles.active
+                    ]}
+                    onClick={() => {
+                      state.sMSCI = musicForms.musicSheetCategoriesId;
+                      state.sMII = musicForms.musicalInstrumentId;
+                      state.searchPopup = true;
+                    }}>
+                    <span>筛选</span>
+                    <i></i>
+                  </div>
+                )
             }}
           </MSearch>
         </MSticky>
@@ -189,30 +219,39 @@ export default defineComponent({
           finished={state.finished}
           finishedText=" "
           onLoad={getMusicList}
-          immediateCheck={false}
-          class={styles.musicList}>
-          {state.musics.map((item: any) => (
-            <Cell class={styles.musicItem} border={false} center>
-              {{
-                icon: () => (
-                  <Image class={styles.musicImg} src={item.titleImg} />
-                ),
-                title: () => (
-                  <div class={styles.musicContnet}>
-                    <h2>{item.musicSheetName}</h2>
-                    {item.composer && <p>{item.composer}</p>}
-                  </div>
-                ),
-                'right-icon': () => (
-                  <Image class={styles.musicPlayIcon} src={iconPlayer} />
-                )
-              }}
-            </Cell>
-          ))}
+          immediateCheck={false}>
+          {state.musics.length > 0 && (
+            <div class={styles.musicList}>
+              {state.musics.map((item: any) => (
+                <Cell
+                  class={styles.musicItem}
+                  border={false}
+                  center
+                  onClick={(item: any) => onDetail(item)}>
+                  {{
+                    icon: () => (
+                      <Image class={styles.musicImg} src={item.titleImg} />
+                    ),
+                    title: () => (
+                      <div class={styles.musicContnet}>
+                        <h2>{item.musicSheetName}</h2>
+                        {item.composer && <p>{item.composer}</p>}
+                      </div>
+                    ),
+                    'right-icon': () => (
+                      <Image class={styles.musicPlayIcon} src={iconPlayer} />
+                    )
+                  }}
+                </Cell>
+              ))}
+            </div>
+          )}
         </List>
 
         {!state.loading && state.musics.length === 0 && (
-          <MEmpty description="暂无曲谱" />
+          <div class={styles.emptyGroup}>
+            <MEmpty description="暂无曲谱" />
+          </div>
         )}
 
         <Popup position="bottom" round v-model:show={state.searchPopup}>
@@ -226,7 +265,15 @@ export default defineComponent({
               <span>筛选</span>
               <span
                 class={styles.confirm}
-                onClick={() => (state.searchPopup = false)}>
+                onClick={() => {
+                  musicForms.musicSheetCategoriesId = state.sMSCI;
+                  musicForms.musicalInstrumentId = state.sMII;
+                  state.searchPopup = false;
+                  musicForms.page = 1;
+                  state.musics = [];
+                  state.finished = false;
+                  getMusicList();
+                }}>
                 确定
               </span>
             </div>
@@ -239,9 +286,12 @@ export default defineComponent({
                     {state.subjectList.map((subject: any) => (
                       <div
                         class={[
-                          styles.subjectItem
-                          // styles.active
-                        ]}>
+                          styles.subjectItem,
+                          subject.value === state.sMII && styles.active
+                        ]}
+                        onClick={() => {
+                          state.sMII = subject.value;
+                        }}>
                         {subject.text}
                       </div>
                     ))}
@@ -253,12 +303,25 @@ export default defineComponent({
                 <>
                   <div class={styles.title}>曲谱教材</div>
                   <div class={styles.subjectContainer}>
+                    <div
+                      class={[
+                        styles.subjectItem,
+                        state.sMSCI === '' && styles.active
+                      ]}
+                      onClick={() => {
+                        state.sMSCI = '';
+                      }}>
+                      全部
+                    </div>
                     {state.types.map((item: any) => (
                       <div
                         class={[
-                          styles.subjectItem
-                          // styles.active
-                        ]}>
+                          styles.subjectItem,
+                          item.value === state.sMSCI && styles.active
+                        ]}
+                        onClick={() => {
+                          state.sMSCI = item.value;
+                        }}>
                         {item.text}
                       </div>
                     ))}