lex-xin 5 tháng trước cách đây
mục cha
commit
69fd76a7fc

+ 13 - 4
src/components/m-search/index.tsx

@@ -1,5 +1,5 @@
 import { Button, Icon, Search } from 'vant';
-import { PropType, defineComponent, reactive, watch } from 'vue';
+import { PropType, defineComponent, reactive, ref, watch } from 'vue';
 import styles from './index.module.less';
 import iconSearch from '@/common/images/icon-search.svg';
 
@@ -46,20 +46,29 @@ export default defineComponent({
     }
   },
   emits: ['search', 'focus', 'blur'],
-  setup(props, { slots, emit }) {
+  setup(props, { slots, emit, expose }) {
     const forms = reactive({
-      search: props.modelValue || ''
+      search: props.modelValue || '',
     });
-
+    const searchRef = ref()
     watch(
       () => props.modelValue,
       () => {
         forms.search = props.modelValue;
       }
     );
+
+    const searchBlur = () => {
+      searchRef.value?.blur()
+    }
+
+    expose({
+      searchBlur
+    })
     return () => (
       <Search
         class={[styles['m-search'], styles[props.inputBackground]]}
+        ref={searchRef}
         shape={props.shape}
         background={props.background}
         placeholder={props.placeholder}

+ 21 - 4
src/views/hot-music-more/index.tsx

@@ -28,6 +28,7 @@ import { listenerMessage, postMessage } from '@/helpers/native-message';
 import { audioPlayType } from '@/helpers/constant';
 import MusicDetail from './music-detail';
 import TheVip from '@/components/the-vip';
+import { useEventListener } from '@vueuse/core';
 
 const ChildNodeSearch = defineComponent({
   name: 'ChildNodeSearch',
@@ -182,6 +183,7 @@ export default defineComponent({
         return state.allSearch.name;
       }
     });
+    const mSearchRef = ref()
 
     let isClick = false;
     const getMusicList = async () => {
@@ -196,14 +198,21 @@ export default defineComponent({
         } as any;
         if (state.tabActive === 'RECOMMEND') {
           params = Object.assign(params, state.recommendSearch);
+          params.page = 1
+          params.rows = 60
         } else if (state.tabActive === 'HOT') {
           params = Object.assign(params, state.hotSearch);
+          params.page = 1
+          params.rows = 60
         } else if (state.tabActive === 'NEW') {
           params = Object.assign(params, state.newSearch);
+          params.page = 1
+          params.rows = 60
         } else {
           params.name = state.allSearch.name;
           params = Object.assign(params, state.allSearch);
         }
+        
         const res = await api_musicSheetPage(params);
         if (res.code === 200 && Array.isArray(res?.data?.rows)) {
           const result = res.data.rows || [];
@@ -268,8 +277,8 @@ export default defineComponent({
           : [state.sAPT]
         : [];
       state.allSearch.musicTagIds = state.sNt;
-      state.searchPopup = false;
-      onSearch();
+      // state.searchPopup = false;
+      // onSearch();
     };
 
     const onDetail = (item: any) => {
@@ -406,6 +415,9 @@ export default defineComponent({
       getMusicList();
 
       window.addEventListener('resize', tabResize);
+      useEventListener(document, 'scroll', () => {
+        mSearchRef.value?.searchBlur()
+      });
 
       listenerMessage('webViewOnResume', () => {
         tabResize();
@@ -450,7 +462,7 @@ export default defineComponent({
                         if (state.isAllStatus) {
                           state.searchPopup = !state.searchPopup;
                           if (state.searchPopup) {
-
+                            
                           }
                         } else {
                           state.isAllStatus = true;
@@ -489,6 +501,7 @@ export default defineComponent({
 
           <MSearch
             v-model:modelValue={searchValue.value}
+            ref={mSearchRef}
             background={'transparent'}
             inputBackground="transparent"
             class={styles.mSearch11}
@@ -513,7 +526,11 @@ export default defineComponent({
           loading={state.loading}
           finished={state.finished}
           finishedText=" "
-          onLoad={getMusicList}
+          onLoad={() => {
+            if(!state.tabActive) {
+              getMusicList()
+            }
+          }}
           immediateCheck={false}>
           {state.musics.length > 0 && (
             <div class={styles.musicListSection}>

+ 6 - 0
src/views/hot-music-more/music-detail/index.module.less

@@ -56,6 +56,12 @@
         line-height: 25px;
       }
     }
+    .downloadMusicName {
+      width: 95%;
+      .name {
+        width: 100%;
+      }
+    }
 
     .noticeBar {
       padding: 0;

+ 3 - 1
src/views/hot-music-more/music-detail/index.tsx

@@ -599,7 +599,7 @@ export default defineComponent({
               height: 'auto',
             }}>
             <div
-              class={styles['right-musicName']}
+              class={[styles['right-musicName'], styles.downloadMusicName]}
               style={{
                 opacity: !data.musicPdfUrl ? '1' : '0',
                 height: !data.musicPdfUrl ? 'auto' : '0'
@@ -665,6 +665,7 @@ export default defineComponent({
                 v-model:show={data.showChangeVoice}
                 class={'transferStaff transferStaffSection'}
                 actions={trackList.value}
+                showArrow={false}
                 placement="top-start"
                 onSelect={(item: any) => {
                   // console.log(item, 'item')
@@ -687,6 +688,7 @@ export default defineComponent({
                 v-model:show={data.popoverShow}
                 class={'transferStaff'}
                 actions={_actions.value}
+                showArrow={false}
                 placement="top-start"
                 onSelect={(item: any) => {
                   data.showMusicImg = item.value;