修改

src/views/xiaoku-list/api.ts

@@ -0,0 +1,17 @@
+import request from '@/utils/request';
+
+/**
+ * 获取热门、推荐、最新三个标签下曲目列表
+ */
+export const api_musicSheetQueryByTag = (params?: any) => {
+  return request.post('/edu-app/musicSheet/queryByTag', {
+    data: params
+  });
+};
+
+/**
+ * 获取标签
+ */
+export const api_musicSheetTagQueryList = () => {
+  return request.get('/edu-app/musicSheetTag/queryList');
+};

src/views/xiaoku-list/detail.module.less

@@ -1,4 +1,11 @@
+.xiaokuDetail {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+
+}
 .detailContainer {
+  flex: 1 auto;
   background: #ffffff;
   border-radius: 20px;
   :global {
@@ -7,7 +14,7 @@
     }
 
     .n-tabs-nav {
-      padding: 12px 32px 20px;
+      padding: 22px 32px 18px;
     }
 
     .n-tabs-tab {
@@ -44,7 +51,7 @@
     }
 
     .n-tab-pane {
-      padding-top: 4px !important;
+      padding-top: 0px !important;
     }
   }
 
@@ -56,6 +63,13 @@
     position: relative;
     margin: 0 32px;
   }
+
+  .searchSectionHide {
+    visibility: hidden;
+    opacity: 0;
+    height: 0 !important;
+    line-height: 0 !important;
+  }
 }
 
 .searchGroup {
@@ -64,6 +78,13 @@
   padding: 24px 24px 34px;
   position: relative;
 
+  .hideItem {
+    visibility: hidden;
+    opacity: 0;
+    height: 0 !important;
+    line-height: 0 !important;
+  }
+
   .btnType {
     gap: 0px 24px !important;
 
@@ -120,8 +141,29 @@
     transform: translateX(-50%);
     font-size: 17px;
     color: #000000;
-    line-height: 24px;
     cursor: pointer;
+    background: url('./images/search-bg.png') no-repeat center;
+    background-size: contain;
+    width: 222px;
+    line-height: 34px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &::after {
+      content: '';
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      background: url('./images/icon-arrow-down.png') no-repeat center;
+      background-size: contain;
+      margin-left: 6px;
+    }
+    
+    &.activeSearch::after {
+      transform: rotate(180deg);
+      
+    }
   }
 }
 
@@ -130,7 +172,7 @@
 }
 
 .spaceSection {
-  width: 75%;
+  width: 100%;
   transition: 1s all ease-in;
 
   & > div {
@@ -195,7 +237,7 @@
 }
 
 .spaceSection2 {
-  width: 76%;
+  width: 100%;
   transition: 1s all ease-in;
   padding-right: 40px;
 
@@ -210,7 +252,7 @@
 }
 
 .textBtn {
-  background: #fff;
+  background: transparent;
   border-radius: 8px;
   padding: 4px 20px;
   font-size: max(17px, 12px);
@@ -251,6 +293,51 @@
   flex: 1 auto;
   display: flex;
   flex-wrap: wrap;
+
+  &.noSearchContainer {
+    padding-top: 0;
+  }
+}
+
+.wrapList {
+  min-height: 100%;
+  height: calc(100vh - 64px - 64px - 56px - 80px);
+
+  &.wrapListEmpty {
+    :global {
+      .n-scrollbar-content {
+        min-height: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    .empty {
+      height: 100%;
+      flex: 1 auto;
+    }
+    
+  }
+}
+
+.empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  // height: 50vh;
+  // height: 100%;
+}
+
+.loadingWrap {
+  display: flex;
+  justify-content: center;
+  min-height: 80px;
+
+  &.showLoading {
+    height: 0;
+    opacity: 0;
+    min-height: 0;
+    display: none;
+  }
 }
 
 .sectionItem {

src/views/xiaoku-list/detail.tsx

@@ -1,10 +1,15 @@
-import { defineComponent, reactive, ref } from 'vue';
+import { computed, defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from './detail.module.less';
 import CBreadcrumb from '/src/components/CBreadcrumb';
 import { useRoute } from 'vue-router';
-import { NForm, NFormItem, NTabPane, NTabs } from 'naive-ui';
+import { NForm, NFormItem, NScrollbar, NSpin, NTabPane, NTabs } from 'naive-ui';
 import SearchGroupResources from './search-group-resources';
 import TheSearch from '/src/components/TheSearch';
+import TheEmpty from '/src/components/TheEmpty';
+import { audioPlayType } from '/src/utils/contants';
+import { api_musicSheetPage } from '../xiaoku-ai/api';
+import { api_musicSheetTagQueryList } from './api';
+import { formatUsedNum } from '.';
 
 export default defineComponent({
   name: 'xiaoku-detail',
@@ -14,11 +19,135 @@ export default defineComponent({
       { name: 'AI学练', path: '/xiaoku-list' },
       { name: '全部曲目', path: '' }
     ]);
+    const forms = reactive({
+      page: 1,
+      rows: 24,
+      status: true,
+      searchType: '',
+    });
     const state = reactive({
-      tabName: 'name'
+      loading: true,
+      finshed: false,
+      reshing: false,
+      tabName: '',
+      list: [] as any,
+      allSearch: {
+        name: '',
+        musicTagIds: '',
+        audioPlayTypes: null as any,
+        bookVersionId: null as any,
+        subjectId: null
+      },
+      hotSearch: {
+        name: '',
+      },
+      newSearch: {
+        name: '',
+      },
+      recommendSearch: {
+        name: '',
+      }
+    });
+
+    const searchValue = computed(() => {
+      if(state.tabName === 'RECOMMEND') {
+        return state.recommendSearch.name
+      } else if(state.tabName === 'HOT') {
+        return state.hotSearch.name
+      } else if(state.tabName === 'NEW') {
+        return state.newSearch.name
+      } else {
+        return state.allSearch.name
+      }
+    })
+
+    const onSearch = async (item: any) => {
+      forms.page = 1;
+      state.reshing = true;
+      state.finshed = false;
+
+      const { subjectId, ...res } = item;
+      state.allSearch = Object.assign(state.allSearch, {
+        ...res,
+        musicalInstrumentId: subjectId,
+        subjectId: null
+      });
+
+      getList();
+    };
+
+
+    const spinRef = ref();
+    const handleResh = () => {
+      if (state.loading || state.finshed) return;
+      forms.page = forms.page + 1;
+      getList();
+    };
+
+    const getList = async () => {
+      state.loading = true;
+      let res = {} as any;
+      try {
+        const { ...result } = forms;
+        let params = {
+          ...result,
+          searchType: state.tabName
+        } as any
+        if(state.tabName === 'RECOMMEND') {
+          params = Object.assign(params, state.recommendSearch);
+        } else if(state.tabName === 'HOT') {
+          params = Object.assign(params, state.hotSearch);
+        } else if(state.tabName === 'NEW') {
+          params = Object.assign(params, state.newSearch);
+        } else {
+          params.name = state.allSearch.name
+          const { audioPlayTypes, ...more } = state.allSearch
+          params = Object.assign(params, { ...more });
+          params.audioPlayTypes =  audioPlayTypes
+            ? audioPlayTypes === 'PLAY_SING'
+              ? ['PLAY', 'SING']
+              : [audioPlayTypes]
+            : []
+        }
+        res = await api_musicSheetPage(params);
+      } catch (error) {
+        console.log(error);
+      }
+      if (state.reshing) {
+        state.list = [];
+        state.reshing = false;
+      }
+
+      if (res?.code === 200 && Array.isArray(res?.data?.rows)) {
+        const tempResult = res?.data?.rows || [];
+        tempResult.forEach((item: any) => {
+          item.audioPlayTypeArray = item.audioPlayTypes
+            ? item.audioPlayTypes.split(',')
+            : [];
+        });
+        state.list = [...state.list, ...res.data.rows];
+        state.finshed = forms.page >= res.data.pages; 
+      } else {
+        state.finshed = true;
+      }
+      state.loading = false;
+    };
+
+    const __initSpin = () => {
+      const obv = new IntersectionObserver(entries => {
+        if (entries[0].intersectionRatio > 0) {
+          handleResh();
+        }
+      });
+      obv.observe(spinRef.value);
+    }
+
+    onMounted(async () => {
+      // getList();
+      __initSpin()
     });
     return () => (
-      <div>
+      <div class={styles.xiaokuDetail}>
         <CBreadcrumb list={routerList.value}></CBreadcrumb>
         <div class={styles.detailContainer}>
           <NTabs
@@ -27,50 +156,96 @@ export default defineComponent({
             // animated
             paneWrapperClass={styles.paneWrapperContainer}
             v-model:value={state.tabName}
+            onUpdate:value={(val: any) => {
+              forms.page = 1;
+              state.finshed = false;
+              state.reshing = true;
+              state.list = []
+              getList();
+
+              __initSpin()
+            }}
             v-slots={{
-              suffix: () => <TheSearch
-              round
-              class={styles.inputSearch}
-              onSearch={val => {
-                // forms.keyword = val;
-                // getList();
-              }}
-            />
+              suffix: () => (
+                <TheSearch
+                  placeholder='请输入曲目名称'
+                  round
+                  value={searchValue.value}
+                  class={styles.inputSearch}
+                  onSearch={val => {
+                    if(state.tabName === 'RECOMMEND') {
+                      state.recommendSearch.name = val
+                    } else if(state.tabName === 'HOT') {
+                      state.hotSearch.name = val
+                    } else if(state.tabName === 'NEW') {
+                      state.newSearch.name = val
+                    } else {
+                      state.allSearch.name = val
+                    }
+                    forms.page = 1;
+                    state.finshed = false;
+                    state.list = []
+                    getList();
+                  }}
+                />
+              )
             }}>
-            <NTabPane name={`name`} tab={'全部曲目'}></NTabPane>
-            <NTabPane name={`name1`} tab={'推荐曲目'}></NTabPane>
-            <NTabPane name={`name2`} tab={'热门曲目'}></NTabPane>
-            <NTabPane name={`name3`} tab={'最新曲目'}></NTabPane>
+            <NTabPane name={``} tab={'全部曲目'}></NTabPane>
+            <NTabPane name={`RECOMMEND`} tab={'推荐曲目'}></NTabPane>
+            <NTabPane name={`HOT`} tab={'热门曲目'}></NTabPane>
+            <NTabPane name={`NEW`} tab={'最新曲目'}></NTabPane>
           </NTabs>
 
-          <div class={styles.searchSection}>
-            <SearchGroupResources />
-          </div>
-
-          <div class={styles.sectionContainer}>
-            {[1,2,3,4,4,5,6,7,8,9].map(() => <div class={styles.sectionItem}>
-              <div class={styles.img}>
-                <img
-                  referrerpolicy="no-referrer"
-                  src="https://lanhu-oss.lanhuapp.com/SketchPnge5215a88a6a2d4a1aba30956f78102bf01fac5e63f33b045c1427d94330297dd"
-                />
+          <NScrollbar class={[[styles.wrapList, !state.loading && state.list.length === 0 && styles.wrapListEmpty]]}>
+              <div class={[styles.searchSection, state.tabName ? styles.searchSectionHide : '']}>
+                <SearchGroupResources onSearch={(val: any) => {
+                  onSearch(val)
+                }} />
               </div>
-              <div class={styles.infos}>
-                <div class={styles.topName}>
-                  <span>玩具</span>
-                  兵进行曲玩具兵进行曲玩具兵进行曲玩具兵进行曲玩具兵进行曲玩具兵进行曲
-                </div>
-                <div class={styles.types}>
-                  <div class={styles.hot}>
-                    <span>1.8万</span>
+            
+            {state.list.length > 0 && <div
+              class={[
+                styles.sectionContainer,
+                state.tabName && styles.noSearchContainer
+              ]}>
+              {state.list.map((item: any) => (
+                <div class={styles.sectionItem}>
+                  <div class={styles.img}>
+                    <img referrerpolicy="no-referrer" src={item.titleImg} />
+                  </div>
+                  <div class={styles.infos}>
+                    <div class={styles.topName}>{item.musicSheetName}</div>
+                    <div class={styles.types}>
+                      <div class={styles.hot}>
+                        <span>{formatUsedNum(item.usedNum)}</span>
+                      </div>
+                      {item.audioPlayTypes?.includes('SING') && (
+                        <div class={styles.sing}>演唱</div>
+                      )}
+                      {item.audioPlayTypes?.includes('PLAY') && (
+                        <div class={styles.song}>演奏</div>
+                      )}
+
+                      <div class={styles.author}>{item.composer}</div>
+                    </div>
                   </div>
-                  <div class={styles.sing}>演唱</div>
-                  <div class={styles.song}>演奏</div>
-                  <div class={styles.author}>耶寒尔</div>
                 </div>
+              ))}
+            </div>}
+            
+
+            <div
+              ref={spinRef}
+              class={[styles.loadingWrap, state.finshed && styles.showLoading]}>
+              <NSpin show={true}></NSpin>
+            </div>
+
+            {!state.loading && state.list.length === 0 && (
+              <div class={styles.empty}>
+                <TheEmpty></TheEmpty>
               </div>
-            </div>)}
-          </div>
+            )}
+          </NScrollbar>
         </div>
       </div>
     );

src/views/xiaoku-list/index.module.less

@@ -10,13 +10,18 @@
 .topTitle {
   padding-top: 30px;
   padding-bottom: 24px;
-  font-size: 50px;
-  color: #131415;
-  line-height: 60px;
-  letter-spacing: 1px;
+  font-size: 0;
+  // color: #131415;
+  // height: 60px;
+  // letter-spacing: 1px;
+  // text-align: center;
+  // font-style: normal;
+  // color: #004aff;
   text-align: center;
-  font-style: normal;
-  color: #004aff;
+  img {
+    height: 60px;
+    margin: 0 auto;
+  }
 }
 
 .searchSection {
@@ -261,10 +266,42 @@
   }
 }
 
-.sectionContainer {
-  padding: 24px 60px;
-  gap: 0 30px;
+.searchContainer {
   flex: 1 auto;
+  padding: 24px 0;
+  .empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    // height: 100%;
+  }
+  
+  .loadingWrap {
+    display: flex;
+    justify-content: center;
+    // min-height: 80px;
+    padding-bottom: 10px;
+  
+    &.showLoading {
+      height: 0;
+      opacity: 0;
+      min-height: 0;
+      display: none;
+    }
+  }
+
+  :global {
+    .n-scrollbar {
+      max-height: calc(100vh - 64px - 160px - 40px);
+    }
+  }
+}
+
+.sectionContainer {
+  padding: 0 48px;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .sectionItem {
@@ -274,9 +311,10 @@
   cursor: pointer;
   padding: 15px 12px;
   border-radius: 12px;
-  width: 407px;
+  width: 405px;
   background: #FFFFFF;
   cursor: pointer;
+  box-sizing: border-box;
 
   .img {
     width: 60px;

src/views/xiaoku-list/index.tsx

@@ -1,165 +1,332 @@
-import {
-  defineComponent
-} from 'vue';
+import { defineComponent, nextTick, onMounted, reactive, ref } from 'vue';
 import styles from './index.module.less';
 import TheSearch from '/src/components/TheSearch';
 import recommendTitle from './images/reommon_title.png';
 import newTitle from './images/new_title.png';
 import hotTitle from './images/hot_title.png';
-import { NScrollbar } from 'naive-ui';
+import { NScrollbar, NSpin } from 'naive-ui';
 import TheNoticeBar from '/src/components/TheNoticeBar';
 import { useRouter } from 'vue-router';
+import { api_musicSheetQueryByTag } from './api';
+import { api_musicSheetPage } from '../xiaoku-ai/api';
+import TheEmpty from '/src/components/TheEmpty';
+import titleBg from './images/title-bg.png'
+
+export const formatUsedNum = (num: number) => {
+  if (num < 10000) {
+    return num;
+  } else {
+    const n = num / 10000;
+    return Number(n.toFixed(1)) + '万';
+  }
+};
 
 export default defineComponent({
   name: 'xiaoku-list',
   setup() {
-    const router = useRouter()
+    const router = useRouter();
+    const state = reactive({
+      HOT: [] as any,
+      NEW: [] as any,
+      RECOMMEND: [] as any,
+      isSearch: false, // 是否点击搜索
+      keyword: null as any,
+      list: [] as any,
+      loading: false as any,
+      finshed: false,
+      page: 1,
+      rows: 20
+    });
+
+    
+
+    /** 获取三个模块 */
+    const getDetail = async () => {
+      try {
+        const { data } = await api_musicSheetQueryByTag();
+        state.RECOMMEND = data.RECOMMEND || [];
+        state.HOT = data.HOT || [];
+        state.NEW = data.NEW || [];
+      } catch {
+        //
+      }
+    };
+
+    /** 获取更多 */
+    const getList = async () => {
+      state.loading = true;
+      try {
+        const { data } = await api_musicSheetPage({ keyword: state.keyword, page: state.page, rows: state.rows });
+        const result = data.rows || [];
+        result.forEach((item: any) => {
+          if (item.musicSheetName) {
+            const regex = new RegExp(state.keyword, 'gi');
+            const highlightedText = item.musicSheetName.replace(
+              regex,
+              `<span>$&</span>`
+            );
+            item.musicNameReg = highlightedText;
+          }
+        });
+        state.list = [...state.list, ...data.rows];
+        state.finshed = state.page >= data.pages;
+        console.log(data, state.list, 'list');
+      } catch (e) {
+        //
+        console.log(e, 'e');
+      }
+      state.loading = false;
+    };
+
+    const spinRef = ref();
+    const handleResh = () => {
+      if (state.loading || state.finshed) return;
+      state.page = state.page + 1;
+      getList();
+    };
+
+    const __initSpin = () => {
+      const obv = new IntersectionObserver(entries => {
+        if (entries[0].intersectionRatio > 0) {
+          handleResh();
+        }
+      });
+      obv.observe(spinRef.value);
+    }
+
+    // 查看更多
+    const onMore = (type?: '' | 'RECOMMEND' | 'NEW' | 'HOT') => {
+      router.push({
+        path: '/xiaoku-detail',
+        query: {
+          type: type
+        }
+      });
+    };
+
+    onMounted(() => {
+      getDetail();
+    });
     return () => (
       <div class={styles.list}>
-        <h2 class={styles.topTitle}>海量曲目 任你选择</h2>
+        <h2 class={styles.topTitle}>
+          <img src={titleBg} />
+        </h2>
 
         <div class={styles.searchSection}>
           <TheSearch
             round
             class={styles.searchInput}
             onSearch={val => {
-              // forms.keyword = val;
-              // getList();
+              if(val && val.trim()) {
+                state.isSearch = true;
+                state.keyword = val.trim()
+                state.loading = true;
+                state.finshed = false;
+                state.list = []
+                getList();
+                nextTick(() => {
+                  __initSpin()
+                })
+              } else {
+                state.isSearch = false;
+              }
             }}
           />
 
-          <div class={styles.moreMusic}>全部曲目</div>
+          <div class={styles.moreMusic} onClick={() => onMore()}>全部曲目</div>
         </div>
 
-         <div class={styles.container}>
-          <>
-          <div class={[styles.section, styles.recommendSection]}>
-            <div class={styles.sectionTitle}>
-              <img src={recommendTitle} class={styles.imgTitle} />
-
-              <div class={styles.moreBtn}>更多</div>
-            </div>
-
+        {state.isSearch ? (
+          <div class={styles.searchContainer}>
             <NScrollbar>
-              {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(() => (
-                <div class={styles.item} onClick={() => {
-                  router.push({
-                    path: '/xiaoku-detail'
-                  })
-                }}>
-                  <div class={[styles.num]}>01</div>
-                  <div class={styles.img}>
-                    <img
-                      referrerpolicy="no-referrer"
-                      src="https://lanhu-oss.lanhuapp.com/SketchPnge5215a88a6a2d4a1aba30956f78102bf01fac5e63f33b045c1427d94330297dd"
-                    />
+            <div class={styles.sectionContainer}>
+              {state.list.map((item: any) => (
+                <div class={styles.sectionItem}>
+                  <div class={styles.img} style={{ marginLeft: 0 }}>
+                    <img referrerpolicy="no-referrer" src={item.titleImg} />
                   </div>
                   <div class={styles.infos}>
-                    <div class={styles.topName}>
-                      <TheNoticeBar text='玩具兵进行曲玩具兵进行曲玩具兵进行曲玩具兵进行曲玩具兵进行曲玩具兵进行曲' />
-                    </div>
+                    <div
+                      class={styles.topName}
+                      v-html={item.musicNameReg}></div>
                     <div class={styles.types}>
                       <div class={styles.hot}>
-                        <span>1.8万</span>
+                        <span>{formatUsedNum(item.usedNum)}</span>
                       </div>
-                      <div class={styles.sing}>演唱</div>
-                      <div class={styles.song}>演奏</div>
-                      <div class={styles.author}>耶寒尔</div>
+                      {item.audioPlayTypes?.includes('SING') && (
+                        <div class={styles.sing}>演唱</div>
+                      )}
+                      {item.audioPlayTypes?.includes('PLAY') && (
+                        <div class={styles.song}>演奏</div>
+                      )}
+
+                      <div class={styles.author}>{item.composer}</div>
                     </div>
                   </div>
                 </div>
               ))}
+            </div>
+            <div
+              ref={spinRef}
+              class={[styles.loadingWrap, state.finshed && styles.showLoading]}>
+              <NSpin show={true}></NSpin>
+            </div>
             </NScrollbar>
+
+            {!state.loading && state.list.length === 0 && (
+              <div class={styles.empty}>
+                <TheEmpty></TheEmpty>
+              </div>
+            )}
           </div>
-          <div class={[styles.section, styles.hotSection]}>
-            <div class={styles.sectionTitle}>
-              <img src={hotTitle} class={styles.imgTitle} />
+        ) : (
+          <div class={styles.container}>
+            <div class={[styles.section, styles.recommendSection]}>
+              <div class={styles.sectionTitle}>
+                <img src={recommendTitle} class={styles.imgTitle} />
 
-              <div class={styles.moreBtn}>更多</div>
-            </div>
+                <div class={styles.moreBtn}>更多</div>
+              </div>
 
-            <NScrollbar>
-              {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(() => (
-                <div class={styles.item}>
-                  <div class={[styles.num]}>01</div>
-                  <div class={styles.img}>
-                    <img
-                      referrerpolicy="no-referrer"
-                      src="https://lanhu-oss.lanhuapp.com/SketchPnge5215a88a6a2d4a1aba30956f78102bf01fac5e63f33b045c1427d94330297dd"
-                    />
-                  </div>
-                  <div class={styles.infos}>
-                    <div class={styles.topName}>玩具兵进行曲玩具兵进行曲玩具兵进行曲玩具兵进行曲玩具兵进行曲玩具兵进行曲</div>
-                    <div class={styles.types}>
-                      <div class={styles.hot}>
-                        <span>1.8万</span>
+              <NScrollbar>
+                {state.RECOMMEND.map((item: any, index: number) => (
+                  <div
+                    class={styles.item}
+                    onClick={() => {
+                      onMore('RECOMMEND');
+                    }}>
+                    <div
+                      class={[
+                        styles.num,
+                        index === 0 ? styles.num1 : '',
+                        index === 1 ? styles.num2 : '',
+                        index === 2 ? styles.num3 : ''
+                      ]}>
+                      {(index + 1).toString().padStart(2, '0')}
+                    </div>
+                    <div class={styles.img}>
+                      <img referrerpolicy="no-referrer" src={item.titleImg} />
+                    </div>
+                    <div class={styles.infos}>
+                      <div class={styles.topName}>
+                        <TheNoticeBar text={item.musicSheetName} />
+                      </div>
+                      <div class={styles.types}>
+                        <div class={styles.hot}>
+                          <span>{formatUsedNum(item.usedNum)}</span>
+                        </div>
+                        {item.audioPlayTypes?.includes('SING') && (
+                          <div class={styles.sing}>演唱</div>
+                        )}
+                        {item.audioPlayTypes?.includes('PLAY') && (
+                          <div class={styles.song}>演奏</div>
+                        )}
+
+                        <div class={styles.author}>{item.composer}</div>
                       </div>
-                      <div class={styles.sing}>演唱</div>
-                      <div class={styles.song}>演奏</div>
-                      <div class={styles.author}>耶寒尔</div>
                     </div>
                   </div>
-                </div>
-              ))}
-            </NScrollbar>
-          </div>
-          <div class={[styles.section, styles.newSection]}>
-            <div class={styles.sectionTitle}>
-              <img src={newTitle} class={styles.imgTitle} />
-
-              <div class={styles.moreBtn}>更多</div>
+                ))}
+              </NScrollbar>
             </div>
+            <div class={[styles.section, styles.hotSection]}>
+              <div class={styles.sectionTitle}>
+                <img src={hotTitle} class={styles.imgTitle} />
+                <div class={styles.moreBtn}>更多</div>
+              </div>
 
-            <NScrollbar>
-              {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(() => (
-                <div class={styles.item}>
-                  <div class={[styles.num]}>01</div>
-                  <div class={styles.img}>
-                    <img
-                      referrerpolicy="no-referrer"
-                      src="https://lanhu-oss.lanhuapp.com/SketchPnge5215a88a6a2d4a1aba30956f78102bf01fac5e63f33b045c1427d94330297dd"
-                    />
-                  </div>
-                  <div class={styles.infos}>
-                    <div class={styles.topName}>玩具兵进行曲玩具兵进行曲玩具兵进行曲玩具兵进行曲玩具兵进行曲玩具兵进行曲</div>
-                    <div class={styles.types}>
-                      <div class={styles.hot}>
-                        <span>1.8万</span>
+              <NScrollbar>
+                {state.HOT.map((item: any, index: number) => (
+                  <div
+                    class={styles.item}
+                    onClick={() => {
+                      onMore('HOT');
+                    }}>
+                    <div
+                      class={[
+                        styles.num,
+                        index === 0 ? styles.num1 : '',
+                        index === 1 ? styles.num2 : '',
+                        index === 2 ? styles.num3 : ''
+                      ]}>
+                      {(index + 1).toString().padStart(2, '0')}
+                    </div>
+                    <div class={styles.img}>
+                      <img referrerpolicy="no-referrer" src={item.titleImg} />
+                    </div>
+                    <div class={styles.infos}>
+                      <div class={styles.topName}>
+                        <TheNoticeBar text={item.musicSheetName} />
+                      </div>
+                      <div class={styles.types}>
+                        <div class={styles.hot}>
+                          <span>{formatUsedNum(item.usedNum)}</span>
+                        </div>
+                        {item.audioPlayTypes?.includes('SING') && (
+                          <div class={styles.sing}>演唱</div>
+                        )}
+                        {item.audioPlayTypes?.includes('PLAY') && (
+                          <div class={styles.song}>演奏</div>
+                        )}
+
+                        <div class={styles.author}>{item.composer}</div>
                       </div>
-                      <div class={styles.sing}>演唱</div>
-                      <div class={styles.song}>演奏</div>
-                      <div class={styles.author}>耶寒尔</div>
                     </div>
                   </div>
-                </div>
-              ))}
-            </NScrollbar>
-          </div></> 
-        </div>
-
-        {/* <div class={styles.sectionContainer}>
-          <div class={styles.sectionItem}>
-            <div class={styles.img}>
-              <img
-                referrerpolicy="no-referrer"
-                src="https://lanhu-oss.lanhuapp.com/SketchPnge5215a88a6a2d4a1aba30956f78102bf01fac5e63f33b045c1427d94330297dd"
-              />
+                ))}
+              </NScrollbar>
             </div>
-            <div class={styles.infos}>
-              <div class={styles.topName}>
-                <span>玩具</span>兵进行曲玩具兵进行曲玩具兵进行曲玩具兵进行曲玩具兵进行曲玩具兵进行曲
-              </div>
-              <div class={styles.types}>
-                <div class={styles.hot}>
-                  <span>1.8万</span>
-                </div>
-                <div class={styles.sing}>演唱</div>
-                <div class={styles.song}>演奏</div>
-                <div class={styles.author}>耶寒尔</div>
+            <div class={[styles.section, styles.newSection]}>
+              <div class={styles.sectionTitle}>
+                <img src={newTitle} class={styles.imgTitle} />
+
+                <div class={styles.moreBtn}>更多</div>
               </div>
+
+              <NScrollbar>
+                {state.NEW.map((item: any, index: number) => (
+                  <div
+                    class={styles.item}
+                    onClick={() => {
+                      onMore('NEW');
+                    }}>
+                    <div
+                      class={[
+                        styles.num,
+                        index === 0 ? styles.num1 : '',
+                        index === 1 ? styles.num2 : '',
+                        index === 2 ? styles.num3 : ''
+                      ]}>
+                      {(index + 1).toString().padStart(2, '0')}
+                    </div>
+                    <div class={styles.img}>
+                      <img referrerpolicy="no-referrer" src={item.titleImg} />
+                    </div>
+                    <div class={styles.infos}>
+                      <div class={styles.topName}>
+                        <TheNoticeBar text={item.musicSheetName} />
+                      </div>
+                      <div class={styles.types}>
+                        <div class={styles.hot}>
+                          <span>{formatUsedNum(item.usedNum)}</span>
+                        </div>
+                        {item.audioPlayTypes?.includes('SING') && (
+                          <div class={styles.sing}>演唱</div>
+                        )}
+                        {item.audioPlayTypes?.includes('PLAY') && (
+                          <div class={styles.song}>演奏</div>
+                        )}
+
+                        <div class={styles.author}>{item.composer}</div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </NScrollbar>
             </div>
           </div>
-        </div> */}
+        )}
       </div>
     );
   }

src/views/xiaoku-list/search-group-resources.tsx

@@ -17,10 +17,11 @@ import {
   NSpace
 } from 'naive-ui';
 // import iconAdd from '../../images/icon-add.png';
-import TheSearch from '/src/components/TheSearch';
-import { resourceTypeArray } from '/src/utils/searchArray';
+// import TheSearch from '/src/components/TheSearch';
+// import { resourceTypeArray } from '/src/utils/searchArray';
 import { useCatchStore } from '/src/store/modules/catchData';
 import { audioPlayType } from '/src/utils/contants';
+import { api_musicSheetTagQueryList } from './api';
 // import isCollaose from '../../images/isCollaose.png';
 
 const ChildNodeSearch = defineComponent({
@@ -112,19 +113,19 @@ export default defineComponent({
   setup(props, { emit }) {
     const catchStore = useCatchStore();
     const forms = reactive({
-      type: 'MUSIC', //
-      name: '',
-      // grade: null as any,
+      musicTagIds: '',
       audioPlayTypes: '',
       bookVersionId: null as any,
       subjectId: null
     });
     const state = reactive({
+      showMore: false,
       tempSubjectId: null
     });
     const data = reactive({
       audioPlayTypeList: [] as any, // 场景
       selectParents: {}, // 选中的数据
+      newTags: [] as any, // 最新标签
       tags: [] as any[],
       tagActiveId: '' as any,
       tagActive: {} as any,
@@ -144,6 +145,11 @@ export default defineComponent({
       });
     };
 
+    const onShowMore = () => {
+      // 
+      state.showMore = !state.showMore
+    }
+
     const selectChildObj = (item: any) => {
       const obj: any = {};
       item?.forEach((child: any) => {
@@ -209,6 +215,25 @@ export default defineComponent({
         }
       }
     };
+
+    const getTags = async () => {
+      try {
+        const res = await api_musicSheetTagQueryList()
+        const result = res.data || []
+        data.newTags = [{
+            name: '全部',
+            id: ''
+        }, ...result.map((item: any) => {
+          return {
+            name: item.name,
+            id: item.id
+          }
+        })]
+      } catch {
+        // 
+      }
+    }
+
     onMounted(async () => {
       // 场景
       const tempAudio = Object.keys(audioPlayType).map(key => {
@@ -219,9 +244,8 @@ export default defineComponent({
       });
       data.audioPlayTypeList = [{ name: '全部', value: '' }, ...tempAudio];
 
-      // console.log('加载');
+      await getTags()
       // 获取教材分类列表
-      // await catchStore.getMusicSheetCategory();
       await catchStore.getMusicTagTreeApi();
       _initTags();
       // console.log(data, 'data');
@@ -234,6 +258,26 @@ export default defineComponent({
     return () => (
       <div class={styles.searchGroup}>
         <NForm labelAlign="left" labelPlacement="left">
+        {data.newTags.length > 0 && (
+            <NFormItem label={'标签：'}>
+              <NSpace class={styles.spaceSection}>
+                {data.newTags.map((subject: any) => (
+                  <span
+                    class={[
+                      styles.textBtn,
+                      forms.musicTagIds === subject.id && styles.textBtnActive
+                    ]}
+                    onClick={() => {
+                      forms.musicTagIds = subject.id;
+                      onSearch();
+                    }}>
+                    {subject.name}
+                  </span>
+                ))}
+              </NSpace>
+            </NFormItem>
+          )}
+
           {data.tags.length > 0 && (
             <NFormItem label={data.tags[0]?.columnName + '：'}>
               <NSpace class={styles.spaceSection}>
@@ -261,7 +305,7 @@ export default defineComponent({
             }}
           />
 
-          <NFormItem label="场景：">
+          <NFormItem label="场景：" class={!state.showMore && styles.hideItem}>
             <NSpace class={styles.spaceSection}>
               {data.audioPlayTypeList.map((subject: any) => (
                 <span
@@ -282,7 +326,7 @@ export default defineComponent({
           </NFormItem>
 
           {forms.audioPlayTypes !== 'SING' && (
-            <NFormItem label="乐器：">
+            <NFormItem label="乐器：" class={!state.showMore && styles.hideItem}>
               <NSpace class={styles.spaceSection}>
                 {catchStore.getSubjectInstrumentOnly.map((subject: any) =>
                   subject.instruments && subject.instruments.length > 1 ? (
@@ -331,7 +375,7 @@ export default defineComponent({
           )}
         </NForm>
 
-        <div class={styles.moreSearch}>展开更多</div>
+        <div class={[styles.moreSearch, state.showMore ? styles.activeSearch:'']} onClick={onShowMore}>{state.showMore ? '收起选项' : '展开更多'}</div>
       </div>
     );
   }