优化

src/page-instrument/component/the-music-list/filterList.tsx

@@ -40,7 +40,7 @@ export default defineComponent({
         }
         function handleConfirm() {
             emit("handleConfirm",{
-                audioPlayTypes:  queryObj.audioPlayTypes ? queryObj.audioPlayTypes.split(",") : [],
+                audioPlayTypes:  queryObj.audioPlayTypes,
                 musicTutorialIds: queryObj.grade ? queryObj.grade : queryObj.course,
                 musicTagIds: queryObj.sheetTag,
                 musicalInstrumentId: queryObj.subject.id
@@ -161,7 +161,7 @@ export default defineComponent({
                                         <div class={styles.titCon}>
                                             标签
                                         </div>
-                                        <div class={styles.filterCon}>
+                                        <div class={[styles.filterCon, styles.sheetTag]}>
                                             {
                                                 sheetTagObj.value.map(item => {
                                                     return <div class={[styles.tabBox, queryObj.sheetTag === item.id && styles.tabActive]} onClick={() => { handleSelSheetTag(item) }}>{item.name}</div>
@@ -200,7 +200,7 @@ export default defineComponent({
                                                 })
                                             }
                                             {
-                                                !isExpand.value && 
+                                                !isExpand.value && courseObj.value.length>5 &&
                                                     <div class={[styles.tabBox, styles.zhankaiImg]} onClick={handleExpand}>
                                                         查看更多
                                                         <img src={zhankaiImg} />

src/page-instrument/component/the-music-list/index.module.less

@@ -167,6 +167,78 @@
                 margin: 0 6px 0 4px;
                 width: 9px;
                 height: 5px;
+                &.onImg{
+                    transform: rotate(180deg);
+                }
+            }
+        }
+        .dropdownMenu1{
+            border-right: 1px solid #DADCE5;
+            margin-right: 8px;
+            :global{
+                .van-dropdown-menu__bar{
+                    height: 20px;
+                    background: transparent;
+                    box-shadow: initial;
+                    .van-dropdown-menu__item{
+                        padding: 0 8px 0 0;
+                    }
+                    .van-dropdown-menu__title{
+                        --van-gray-4: #0CA2EA;
+                        font-weight: 400;
+                        font-size: 14px;
+                        color: #0CA2EA;
+                        padding: 0 12px 0 0;
+                        &::after{
+                            right: 0;
+                            opacity: initial;
+                        }
+                    }
+                }
+                .van-dropdown-item.van-dropdown-item--down{
+                    left: 36px;
+                    width: 148px;
+                    margin-top: 7px;
+                    .van-dropdown-item__content{
+                        margin-left: 10px;
+                        padding: 0 10px;
+                        width: 128px;
+                        box-shadow: 0px 2px 14px 0px rgba(0,0,0,0.12);
+                        border-radius: 8px;
+                        .van-cell{
+                            margin-top: 6px;
+                            padding: 0;
+                            font-weight: 400;
+                            font-size: 14px;
+                            color: #323233;
+                            line-height: 32px;
+                            text-align: center;
+                            &::after{
+                                border: none;
+                            }
+                            &:last-child{
+                                margin-bottom: 6px;
+                            }
+                            &.van-dropdown-item__option--active{
+                                background: #EEF8FF;
+                                border-radius: 4px;
+                                color: #1CACF1;
+                                font-weight: 500;
+                            }
+                            .van-cell__value{
+                                display: none;
+                            }
+                        }
+                    }
+                }
+            }
+            &.currItem{
+                :global{
+                    .van-dropdown-menu__bar  .van-dropdown-menu__title{
+                        color: #1CACF1;
+                        --van-gray-4:#1CACF1;
+                    }
+                }
             }
         }
     }
@@ -227,10 +299,16 @@
         }
     }
     .content{
+        padding-right: 15px;
+        flex-grow: 1;
+        overflow: hidden;
         .name{
             font-weight: 600;
             font-size: 16px;
             color: #333333;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
         .detail{
             display: flex;
@@ -245,6 +323,7 @@
                 border-radius: 4px;
                 border: 0.6px solid #FFC5C5;
                 font-size: 10px;
+                flex-shrink: 0;
                 >img{
                     width: 8px;
                     height: 11px;
@@ -256,12 +335,17 @@
                 }
             }
             .author {
+                flex-shrink: 1;
                 margin-left: 6px;
                 font-weight: 400;
                 font-size: 13px;
                 color: rgba(0,0,0,0.5);
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
             }
             .playType,.singType{
+                flex-shrink: 0;
                 margin-left: 5px;
                 width: 26px;
                 height: 14px;
@@ -439,6 +523,12 @@
                         padding: 0 10px;
                     }
                 }
+                &.sheetTag{
+                    .tabBox{
+                        width: calc(33.33% - 10px);
+                        padding: 0 8px;
+                    }
+                }
                 .tabBox{
                     cursor: pointer;
                     width: calc(25% - 10px);
@@ -488,7 +578,7 @@
                             align-items: center;
                             &.actTabBoxPop{
                                 .sjImg{
-                                    transform: rotate(180deg);
+                                    transform: initial;
                                 }
                             }
                             &>div{
@@ -500,6 +590,7 @@
                                 width: 9px;
                                 height: 5px;
                                 margin-left: 4px;
+                                transform: rotate(180deg);
                             }
                         }
                     }

src/page-instrument/component/the-music-list/list.tsx

@@ -24,6 +24,12 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const audioPlayTypesOption = [
+      { text: '全部场景', value: "" },
+      { text: '演奏', value: "PLAY" },
+      { text: '演唱', value: "SING" },
+      { text: '演奏+演唱', value: "PLAY,SING" },
+    ]
     const query: any = getQuery();
     const forms = reactive({
       name: "",
@@ -32,10 +38,10 @@ export default defineComponent({
       musicSheetCategoriesId: state.bizMusicCategoryId,
       recentFlag: props.recentFlag ? true : null,
       excludeMusicId: props.recentFlag ? null : state.examSongId,
-      audioPlayTypes: [],
+      audioPlayTypes: "",
       musicTutorialIds: "",
       musicTagIds: "",
-      musicalInstrumentId: query.instrumentId || ""
+      musicalInstrumentId: props.recentFlag ? "" : query.instrumentId
     });
     const data = reactive({
       isFocus: false,
@@ -49,7 +55,12 @@ export default defineComponent({
       if (!data.hasNext) return;
       data.loading = true;
       try {
-        const res = await api_musicSheetPage(forms);
+        const res = await api_musicSheetPage({
+          ...forms,
+          ...{
+            audioPlayTypes: forms.audioPlayTypes ? forms.audioPlayTypes.split(",") : []
+          }
+        });
         if (res?.code === 200 && Array.isArray(res.data?.rows)) {
           data.list = [...data.list, ...res.data.rows];
         }
@@ -113,10 +124,16 @@ export default defineComponent({
     return () => (
       <div class={styles.wrap}>
         <div class={[styles.searchBox,data.isFocus && styles.isFocus]}>
-          <div class={styles.dropdownMenu} onClick={() => { filterShow.value = true }}>
-            <div>筛选</div>
-            <img src={xiangImg} />
-          </div>
+          {
+            props.recentFlag ?
+            <DropdownMenu class={[styles.dropdownMenu1]} overlay={false}>
+              <DropdownItem onChange={handleQuery} v-model={forms.audioPlayTypes} options={audioPlayTypesOption}/>
+            </DropdownMenu> :
+            <div class={styles.dropdownMenu} onClick={() => { filterShow.value = true }}>
+              <div>筛选</div>
+              <img class={filterShow.value && styles.onImg} src={xiangImg} />
+            </div>
+          }
           <img src={searImg} />
           <Field placeholder="请输入曲目名称" v-model={forms.name} autocomplete="off" onFocus={()=>{ data.isFocus = true }} onBlur={()=>{ data.isFocus = false }} />
           <div class={styles.searchBtn} onClick={handleQuery}>搜索</div>