Merge branch 'hqy筛选' of http://git.dayaedu.com/liushengqiang/music-score into ktyq-online-new

src/page-instrument/api.ts

@@ -64,6 +64,15 @@ export const api_musicSheetPage = (data: any) => {
   });
 };
 
+/** 获取教程和年级  */
+export const api_musicTagTree = () => {
+  return request.get("/musicTag/tree");
+};
+/** 获取标签  */
+export const api_musicSheetTag = () => {
+  return request.get("/musicSheetTag/queryList");
+};
+
 /**
  * 获取声部列表
  */

src/page-instrument/component/authorName/index.module.less

@@ -4,6 +4,13 @@
 .title{
     width: 280px;
     margin: 0 auto;
+    &.isScroll{
+        :global{
+            .van-notice-bar .van-notice-bar__wrap{
+                justify-content: initial;
+            }
+        }
+    }
     :global{
         .van-notice-bar{
             height: 30px;

src/page-instrument/component/authorName/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, computed } from "vue"
+import { defineComponent, computed, onMounted, ref } from "vue"
 import styles from "./index.module.less"
 import { NoticeBar } from "vant"
 import state from "/src/state"
@@ -11,14 +11,21 @@ export default defineComponent({
 			const context = state.musicLyricist ? state.musicComposer + ' / ' + state.musicLyricist : state.musicComposer;
 			return context
 		});
-
+      const noticeBarDom = ref()
+      const isScroll = ref(false)
+      onMounted(() => {
+         const noticeBarEl = noticeBarDom.value.$el
+         if(noticeBarEl){
+            isScroll.value = noticeBarEl.querySelector(".van-notice-bar__wrap")?.offsetWidth < noticeBarEl.querySelector(".van-notice-bar__content")?.offsetWidth
+         }
+      })
       return () => (
          <>
             {
                !smoothAnimationState.isShow.value && !state.isCombineRender && 
                <div class={["authorName", styles.authorName]}>
-                  <div class={[styles.title, state.isCbsView && styles.blackTitle]}>
-                     <NoticeBar text={state.examSongName} background="none" />
+                  <div class={[styles.title, state.isCbsView && styles.blackTitle, isScroll.value && styles.isScroll]}>
+                     <NoticeBar ref={noticeBarDom} text={state.examSongName} background="none" />
                   </div>
                   <div class={styles.authorCon}>
                      <div class={[styles.author, state.isCbsView && styles.blackTitle]}>

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

@@ -0,0 +1,288 @@
+import { defineComponent, PropType, computed, ref, nextTick, reactive } from "vue";
+import { api_musicTagTree, api_musicSheetTag, api_subjectList } from "../../api";
+import { Popover } from "vant"
+import styles from "./index.module.less";
+import headImg from "./imgs/headImg.png"
+import quedingImg from "./imgs/queding.png"
+import quxiaoImg from "./imgs/quxiao.png"
+import zhankaiImg from "./imgs/zhankai.png"
+import shouqiImg from "./imgs/shouqi.png"
+import sjImg from "./imgs/sj.png"
+import xiangImg from "./imgs/xiang.png"
+import closeImg from "../../header-top/image/closeImg.png"
+import state, { IPlatform } from "/src/state";
+import { getQuery } from "/src/utils/queryString";
+
+export default defineComponent({
+	name: "filterList",
+    emits: ["close", "handleConfirm"],
+	setup(props, { emit }) {
+        const query: any = getQuery();
+        const queryObj = reactive({
+            audioPlayTypes:"",
+            sheetTag:"",
+            course:"",
+            grade:"",
+            subject: {
+                name: "",
+                id: ""
+            }
+        })
+        function handleRefresh(){
+            queryObj.audioPlayTypes = ""
+            queryObj.sheetTag = ""
+            queryObj.course = ""
+            queryObj.grade = ""
+            queryObj.subject = {
+                name: "",
+                id: ""
+            }
+            handleSubjectOne()
+        }
+        function handleConfirm() {
+            emit("handleConfirm",{
+                audioPlayTypes:  queryObj.audioPlayTypes,
+                bookVersionId: queryObj.grade ? queryObj.grade : queryObj.course,
+                musicTagIds: queryObj.sheetTag,
+                musicalInstrumentId: queryObj.subject.id
+            })
+        }
+        // 场景
+        const audioPlayTypesOption = [
+            { text: '全部', value: "" },
+            { text: '演奏', value: "PLAY" },
+            { text: '演唱', value: "SING" },
+            { text: '演奏+演唱', value: "PLAY,SING" },
+        ]
+        function handleSelAudioPlayTypes(item:any){
+            queryObj.audioPlayTypes = item.value
+        }
+        // 获取标签
+        getMusicSheetTag()
+        const sheetTagObj = ref<any[]>([])
+        function getMusicSheetTag(){
+            api_musicSheetTag().then(res=>{
+                if(res.code === 200){
+                    sheetTagObj.value = [{ name:"全部",id:""},...res.data]
+                }
+            })
+        }
+        function handleSelSheetTag(item:any){
+            queryObj.sheetTag = item.id
+        }
+        // 获取教程和年级
+        getMusicTagTree()
+        const courseObj = ref<any[]>([])
+        const gradeObj = ref<any[]>([])
+        function getMusicTagTree(){
+            api_musicTagTree().then(res=>{
+                if(res.code === 200){
+                    courseObj.value = [{ name:"全部",id:""},...res.data]
+                }
+            })
+        }
+        const isExpand = ref(false)
+        const computedCourseObj = computed(()=>{
+            return isExpand.value ? courseObj.value : courseObj.value.slice(0,5)
+        })
+        const courseDom = ref<HTMLDivElement>()
+        const borderBoxConDom = ref<HTMLDivElement>()
+        function handleExpand(){
+            isExpand.value = true
+            nextTick(()=>{
+                const childRect = courseDom.value!.getBoundingClientRect();
+                const parentRect = borderBoxConDom.value!.getBoundingClientRect();
+                const offsetTop = borderBoxConDom.value!.scrollTop + childRect.top - parentRect.top
+                borderBoxConDom.value!.scrollTo({
+                    top: offsetTop,
+                    behavior: 'smooth'
+                });
+            })
+        }
+        function handleSelCourse(item:any){
+            queryObj.course = item.id
+            queryObj.grade = ""
+            gradeObj.value = [{ name:"全部", id:""}, ...(item.children || [])]
+        }
+        function handleSelGrade(item:any){
+            queryObj.grade = item.id
+        }
+        // 获取乐器 
+        state.platform === IPlatform.PC && getSubjectList() // 老师端才加载乐器
+        const subjectList = ref<any[]>([])
+        function getSubjectList(){
+            api_subjectList({
+                delFlag: 0,
+                page: 1,
+                rows: 999,
+            }).then(res => {
+                if(res.code === 200){
+                    subjectList.value = [...res.data.map((item:any)=>{
+                        return item.instruments.length > 1 ? Object.assign(item,{ isExpand: ref(false) }) : item
+                    })]
+                    // 赋默认值
+                    handleSubjectOne()
+                }
+            })
+        }
+        function handleSubjectOne(){
+            if(subjectList.value.length > 0){
+                const instruments = subjectList.value.reduce((arr, item) => {
+                    arr.push(...item.instruments)
+                    return arr
+                }, [])
+                const instrumentId = query.instrumentId
+                // 有id 就用id，没有就默认第一个
+                const instrumentObj = instrumentId ? instruments.find((i: any) => {
+                    return i.id === instrumentId
+                }) : instruments[0]
+                if(instrumentObj){
+                    queryObj.subject.id = instrumentObj.id
+                    queryObj.subject.name = instrumentObj.name
+                }
+            }
+        }
+        function isActiveSubjectPop(item:any) {
+            return item.instruments.some((i:any) => {
+                return i.id === queryObj.subject.id
+            })
+        }
+        function handleSelectPop(item: any) {
+            queryObj.subject.id = item.id
+            queryObj.subject.name = item.name
+        }
+		return () => (
+			<div class={[styles.filterList, styles[state.modeType], state.platform === IPlatform.PC && styles.isPc]}>
+                <div class={[styles.head, "top_draging"]}>
+                    <img class={styles.headTit} src={headImg} />
+				</div>
+                <img class={styles.closeImg} src={closeImg} onClick={()=>{ emit("close") }} />
+				<div class={styles.borderCon}>
+                    <div class={styles.borderBox}>
+                        <div ref={borderBoxConDom} class={styles.borderBoxCon}>
+                            {
+                                sheetTagObj.value.length > 1 &&
+                                    <>
+                                        <div class={styles.titCon}>
+                                            标签
+                                        </div>
+                                        <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>
+                                                })
+                                            }
+                                        </div>  
+                                    </>
+                            }                      
+                            <div class={styles.titCon}>
+                                场景
+                            </div>
+                            <div class={styles.filterCon}>
+                                {
+                                    audioPlayTypesOption.map(item => {
+                                        return <div class={[styles.tabBox, queryObj.audioPlayTypes === item.value && styles.tabActive]} onClick={() => { handleSelAudioPlayTypes(item) }}>{item.text}</div>
+                                    })
+                                }
+                            </div>
+                            {
+                                courseObj.value.length>1 &&
+                                    <>
+                                        <div ref={courseDom} class={styles.titCon}>
+                                            教程
+                                            {
+                                                isExpand.value &&                          
+                                                    <div class={styles.shouqiImg} onClick={() => {isExpand.value = false}}>
+                                                        收起
+                                                        <img src={shouqiImg} />
+                                                    </div>
+                                            }
+                                        </div>
+                                        <div class={[styles.filterCon, styles.courseType]}>
+                                            {
+                                                computedCourseObj.value.map(item => {
+                                                    return <div class={[styles.tabBox, queryObj.course === item.id && styles.tabActive]} onClick={() => { handleSelCourse(item) }}>{item.name}</div>
+                                                })
+                                            }
+                                            {
+                                                !isExpand.value && courseObj.value.length>5 &&
+                                                    <div class={[styles.tabBox, styles.zhankaiImg]} onClick={handleExpand}>
+                                                        查看更多
+                                                        <img src={zhankaiImg} />
+                                                    </div>
+                                            }
+                                        </div> 
+                                    </>
+                            }
+                            {
+                                gradeObj.value.length > 1 &&
+                                    <>
+                                        <div class={styles.titCon}>
+                                            年级
+                                        </div>
+                                        <div class={styles.filterCon}>
+                                            {
+                                                gradeObj.value.map(item => {
+                                                    return <div class={[styles.tabBox, queryObj.grade === item.id && styles.tabActive]} onClick={() => { handleSelGrade(item) }}>{item.name}</div>
+                                                })
+                                            }
+                                        </div>  
+                                    </>
+                            }   
+                            {
+                                subjectList.value.length>1 && queryObj.audioPlayTypes!=='SING' &&
+                                    <>
+                                        <div class={styles.titCon}>
+                                            乐器
+                                        </div>
+                                        <div class={styles.filterCon}>
+                                            {
+                                                subjectList.value.map(item => {
+                                                    return item.instruments.length > 1 ? 
+                                                        <Popover
+                                                            class={styles.subjectPopover} 
+                                                            v-model:show={item.isExpand}
+                                                            trigger="click"
+                                                            show-arrow={false}
+                                                        >
+                                                            {{
+                                                                default: () => (
+                                                                    <div class={styles.tabPopoverBox}>
+                                                                        {
+                                                                            item.instruments.map((row: any) => {
+                                                                                return <div class={[styles.tabPopover, queryObj.subject.id === row.id && styles.active]} onClick={() => { 
+                                                                                    item.isExpand = false
+                                                                                    handleSelectPop(row) 
+                                                                                }}>{row.name}</div>
+                                                                            })
+                                                                        }
+                                                                    </div>
+                                                                ),                                                                
+                                                                reference: () => (
+                                                                    <div class={[styles.tabBox, styles.tabBoxPopCon, isActiveSubjectPop(item) && styles.tabActive]}>
+                                                                        <div class={[styles.tabBoxPop, item.isExpand && styles.actTabBoxPop]}>
+                                                                            <div>{isActiveSubjectPop(item)?queryObj.subject.name:item.name}</div>
+                                                                            <img class={styles.sjImg} src={isActiveSubjectPop(item) ? xiangImg : sjImg} />
+                                                                        </div>
+                                                                    </div>
+                                                                )
+                                                            }}
+                                                        </Popover> 
+                                                        : 
+                                                        <div class={[styles.tabBox, queryObj.subject.id === item.instruments[0].id && styles.tabActive]} onClick={() => { handleSelectPop(item.instruments[0]) }}>{item.name}</div>
+                                                })
+                                            }
+                                        </div>   
+                                    </>
+                            }
+                        </div>
+                    </div>
+				</div>
+                <div class={styles.btnCon}>
+                    <img src={quxiaoImg} onClick={handleRefresh} />
+                    <img src={quedingImg} onClick={handleConfirm} />
+                </div>
+			</div>
+		);
+	},
+});

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

@@ -78,6 +78,17 @@
             }
         }
     }
+    &.isPc{
+        padding: 20px 0;
+        :global{
+            .van-tabs__wrap{
+                display: none !important;
+            }
+            .van-tabs__content{
+                height: 100% !important;
+            }
+        }
+    }
 }
 
 .wrap {
@@ -139,6 +150,31 @@
         .dropdownMenu{
             border-right: 1px solid #DADCE5;
             margin-right: 8px;
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            &:active{
+                opacity: 0.8;
+            }
+            &>div{
+                font-weight: 400;
+                font-size: 14px;
+                color: #0CA2EA;
+                line-height: 20px;
+            }
+            &>img{
+                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;
@@ -211,6 +247,10 @@
             margin-top: 10px;
             height: calc(100% - 44px);
             overflow-y: auto;
+            &::-webkit-scrollbar {
+                width: 0;
+                display: none;
+            }
             .van-loading__circular{
                 color: rgba(0,0,0,0.3);
             }
@@ -226,12 +266,14 @@
     align-items: center;
     background: #FFFFFF;
     border-radius: 16px;
-    padding: 6px;
+    padding: 3px;
+    border: 3px solid transparent;
     margin-bottom: 8px;
-    &.itemActive {
+    cursor: pointer;
+    &.itemActive, &:active{
         background: linear-gradient( 180deg, #FFFFFF 0%, #BFE1FF 100%);
         box-shadow: 0px 2px 4px 0px #499FE4;
-        border: 3px solid #FFFFFF;
+        border-color: #ffffff;
         .content .name{
             color: #2EAAFE;
         }
@@ -259,10 +301,17 @@
         }
     }
     .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;
+            line-height: 1;
         }
         .detail{
             display: flex;
@@ -277,6 +326,7 @@
                 border-radius: 4px;
                 border: 0.6px solid #FFC5C5;
                 font-size: 10px;
+                flex-shrink: 0;
                 >img{
                     width: 8px;
                     height: 11px;
@@ -288,12 +338,18 @@
                 }
             }
             .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;
+                line-height: 1;
             }
             .playType,.singType{
+                flex-shrink: 0;
                 margin-left: 5px;
                 width: 26px;
                 height: 14px;
@@ -314,11 +370,13 @@
     }
 }
 .empty{
-    margin-top: 10px;
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
+    height: 100%;
     >img{
+        margin-top: -10px;
         width: 182px;
     }
     >span{
@@ -326,4 +384,287 @@
         color: rgba(0,0,0,0.46);
         margin-top: 10px;
     }
+}
+
+
+.filterList{
+    width: 408px;
+    height: 316px;
+    background: #B0D8FF;
+    box-shadow: inset 0px -2px 3px 0px #6BA5DD;
+    border-radius: 20px;
+    padding: 10px;
+    position: relative;
+    &.follow{
+        background: #BCE6F1;
+        box-shadow: inset 0px -2px 3px 0px #6397A4;
+        .borderCon{
+            background: #DAEFF5;
+            box-shadow: 0px 0px 3px 0px #98C4D0;
+            .borderBox{
+                border-color: #7CC2E0;
+            }
+        }
+        .btnCon{
+            background: linear-gradient( 180deg, rgba(213,232,255,0) 0%, rgba(218,239,245,0.73) 48%, #DAEFF5 100%);
+        }
+    }
+    &.evaluating{
+        background: #C4DAFF;
+        box-shadow: inset 0px -2px 3px 0px #6F86AD;
+        .borderCon{
+            background: #D5E2FF;
+            box-shadow: 0px 0px 3px 0px #889CBE;
+            .borderBox{
+                border-color: #91AAF9;
+            }
+        }
+        .btnCon{
+            background: linear-gradient( 180deg, rgba(213,232,255,0) 0%, rgba(213,226,255,0.73) 48%, #D5E2FF 100%);
+        }
+    }
+    &.isPc{
+        height:initial !important;
+        .borderBoxCon{
+            height: initial !important;
+            max-height: 70vh;
+        }
+    }
+    .head{
+        position: absolute;
+        top: -11px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 100%;
+        height: 45px;
+        display: flex;
+        justify-content: center;
+        .headTit{
+            width: 164px;
+            height: 100%;
+        }
+    }      
+    .closeImg{
+        position: absolute;
+        top: -9px;
+        right: -40px;
+        width: 32px;
+        height: 32px;
+        cursor: pointer;
+    }
+    .borderCon{
+        width: 100%;
+        height: 100%;
+        background: #D5E8FF;
+        box-shadow: 0px 0px 3px 0px #639ACF;
+        border-radius: 14px;
+        padding: 10px;
+        .borderBox{
+            padding-top: 10px;
+            padding-bottom: 1px;
+            width: 100%;
+            height: 100%;
+            border-radius: 10px 14px 14px 10px;
+            border: 1px dashed rgb(155,201,246);
+            .borderBoxCon{
+                padding: 0 10px 50px 10px;
+                width: 100%;
+                height: 100%;
+                overflow-y: auto;
+                &::-webkit-scrollbar {
+                    width: 0;
+                    display: none;
+                }
+            }
+            .titCon{
+                position: relative;
+                font-weight: 500;
+                font-size: 16px;
+                color: #333333;
+                line-height: 22px;
+                padding-left: 12px;
+                margin-top: 10px;
+                &::before{
+                    content: "";
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    left: 2px;
+                    width: 4px;
+                    height: 11px;
+                    background: #1CACF1;
+                    border-radius: 3px;
+                }
+                .shouqiImg{
+                    position: absolute;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    font-weight: 400;
+                    font-size: 12px;
+                    color: #333333;
+                    right: 0;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    cursor: pointer;
+                    &:active{
+                        opacity: 0.8;
+                    }
+                    >img{
+                        margin-left: 2px;
+                        width: 11px;
+                        height: 10px;
+                    }
+                }
+            }
+            .filterCon{
+                display: flex;
+                flex-wrap: wrap;
+                margin-top: 8px;
+                margin-left: -10px;
+                width: calc(100% + 10px);
+                &.courseType{
+                    .tabBox{
+                        width: calc(50% - 10px);
+                        padding: 0 10px;
+                    }
+                }
+                &.sheetTag{
+                    .tabBox{
+                        width: calc(33.33% - 10px);
+                        padding: 0 8px;
+                    }
+                }
+                .tabBox{
+                    cursor: pointer;
+                    width: calc(25% - 10px);
+                    height: 32px;
+                    margin-bottom: 8px;
+                    flex-shrink: 0;
+                    margin-left: 10px;
+                    background: #F6F6F6;
+                    border-radius: 6px;
+                    font-weight: 400;
+                    font-size: 12px;
+                    text-align: center;
+                    line-height: 32px;
+                    color: #333333;
+                    padding: 0 5px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    border: 1px solid #F6F6F6;
+                    &:active{
+                        opacity: 0.8;
+                    }
+                    &.tabActive{
+                        background: #EBF8FF;
+                        border-color: rgba(28,172,241,0.5);
+                        font-weight: 600;
+                        color: #1CACF1;
+                    }
+                    &.zhankaiImg{
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        >img{
+                            margin-left: 2px;
+                            width: 11px;
+                            height: 10px;
+                        }
+                    }
+                    &.tabBoxPopCon{
+                        width: 100%;
+                        margin-left: 0;
+                        margin-bottom: 0;
+                        .tabBoxPop{
+                            width: 100%;
+                            height: 100%;
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                            &.actTabBoxPop{
+                                .sjImg{
+                                    transform: rotate(180deg);
+                                }
+                            }
+                            &>div{
+                                white-space: nowrap;
+                                overflow: hidden;
+                                text-overflow: ellipsis;  
+                            }
+                            .sjImg{
+                                width: 9px;
+                                height: 5px;
+                                margin-left: 4px;
+                            }
+                        }
+                    }
+                }
+                :global{
+                    .van-popover__wrapper{
+                        width: calc(25% - 10px);
+                        height: 32px;
+                        margin-bottom: 8px;
+                        flex-shrink: 0;
+                        margin-left: 10px;
+                    }
+                }
+            }
+        }
+    }
+    .btnCon{
+        position: absolute;
+        left: 24px;
+        bottom: 21px;
+        padding: 10px 0;
+        width: calc(100% - 48px);
+        display: flex;
+        justify-content: center;
+        background: linear-gradient( 180deg, rgba(213,232,255,0) 0%, rgba(213,232,255,0.73) 48%, #D5E8FF 100%);
+        border-radius: 0px 0px 10px 10px;
+        &>img{
+            width: 139px;
+            height: 39px;
+            cursor: pointer;
+            &:active{
+                opacity: 0.8;
+            }
+            &:first-child{
+                margin-right: 10px;
+            }
+        }
+    }
+}
+.subjectPopover{
+    :global{
+        .van-popover__content{
+            margin-top: -1px;
+        }
+    }
+}
+.tabPopoverBox{
+    width: 120px;
+    background: #FFFFFF;
+    box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.15);
+    border-radius: 8px;
+    padding: 8px;
+    .tabPopover{
+        cursor: pointer;
+        height: 32px;
+        border-radius: 4px;
+        font-weight: 400;
+        font-size: 14px;
+        color: #323233;
+        line-height: 32px;
+        text-align: center;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        &.active,&:hover{
+            background: #EEF8FF;
+            color: #1CACF1;
+            font-weight: 500;
+        }
+    }
 }

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

@@ -9,7 +9,7 @@ import { getQuery } from "/src/utils/queryString";
 
 const query: any = getQuery();
 export const isMusicList = computed(()=>{
-	return !(query.workRecord || query.modelType || state.platform === IPlatform.PC || query.isCbs)
+	return !(query.workRecord || query.isCbs)
 })
 export const musicListShow = ref(false)
 export default defineComponent({
@@ -18,7 +18,7 @@ export default defineComponent({
 		return () => (
 			<>
 				<Popup class={styles.popup} position="left" v-model:show={musicListShow.value} round overlay-style={{background:'rgba(0, 0, 0, 0.3)'}}>
-					<div class={[styles.tabs, styles[state.modeType]]}>
+					<div class={[styles.tabs, styles[state.modeType], state.platform === IPlatform.PC && styles.isPc]}>
 						<Tabs>
 							<Tab title="其他曲谱">
 								<List />

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

@@ -1,13 +1,19 @@
-import { defineComponent, onMounted, reactive, watch } from "vue";
+import { defineComponent, onMounted, reactive, watch, ref} from "vue";
 import styles from "./index.module.less";
 import { api_musicSheetPage } from "../../api";
-import state, { togglePlay } from "/src/state";
-import { List, Image, Field, DropdownMenu, DropdownItem } from "vant";
+import state, { togglePlay, IPlatform } from "/src/state";
+import { List, Image, Field, DropdownMenu, DropdownItem, Popup } from "vant";
 import { postMessage } from "/src/utils/native-message";
 import qs from "query-string";
 import searImg from "./imgs/searImg.png"
 import huoimg from "./imgs/huo.png"
 import emptyImg from "./imgs/empty.png"
+import xiangImg from "./imgs/xiang.png"
+import FilterList from "./filterList"
+import { getQuery } from "/src/utils/queryString";
+import Dragbom from "/src/view/plugins/useDrag/dragbom";
+import { storeData } from "/src/store";
+import useDrag from "/src/view/plugins/useDrag/index";
 
 export default defineComponent({
   name: "TheMusicList-list",
@@ -18,14 +24,24 @@ 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: "",
       page: 1,
       rows: 20,
-      musicSheetCategoriesId: state.bizMusicCategoryId,
+      //musicSheetCategoriesId: state.bizMusicCategoryId,
       recentFlag: props.recentFlag ? true : null,
       excludeMusicId: props.recentFlag ? null : state.examSongId,
-      audioPlayTypes:""
+      audioPlayTypes: "",
+      bookVersionId: "",
+      musicTagIds: "",
+      musicalInstrumentId: props.recentFlag ? "" : query.instrumentId
     });
     const data = reactive({
       isFocus: false,
@@ -34,12 +50,7 @@ export default defineComponent({
       loading: false,
       hasNext: true,
     });
-    const audioPlayTypesOption = [
-      { text: '全部场景', value: "" },
-      { text: '演奏', value: "PLAY" },
-      { text: '演唱', value: "SING" },
-      { text: '演奏+演唱', value: "PLAY,SING" },
-    ]
+    const filterShow = ref(false)
     const getList = async () => {
       if (!data.hasNext) return;
       data.loading = true;
@@ -91,26 +102,44 @@ export default defineComponent({
           type: "fullscreen",
         },
       });
+      const queryObj = {
+        ...query
+      }
+      queryObj.id = item.id
+      forms.musicalInstrumentId && (queryObj.instrumentId = forms.musicalInstrumentId)
       location.href =
         location.origin +
         location.pathname +
-        "?" +
-        qs.stringify({
-          id: item.id,
-          _t: Date.now(),
-        });
+          "?" +
+          qs.stringify(queryObj);
     };
     function formatNumber(num:number) {
       return num >= 10000 
           ? (num / 10000).toFixed(1).replace(/\.0$/, '') + "万" 
           : num.toString();
     }
+    // 拖动
+    const parentClassName = "musicListClass_drag";
+		const userId = storeData.user?.id ? String(storeData.user?.id) : "";
+		const positionInfo =
+        state.platform !== IPlatform.PC
+        ? {
+            styleDrag: { value: null },
+          }
+        : useDrag([`${parentClassName} .top_draging`, `${parentClassName} .bom_drag`], parentClassName, filterShow, userId);
     return () => (
       <div class={styles.wrap}>
         <div class={[styles.searchBox,data.isFocus && styles.isFocus]}>
-          <DropdownMenu class={[styles.dropdownMenu]} overlay={false}>
-							<DropdownItem onChange={handleQuery} v-model={forms.audioPlayTypes} options={audioPlayTypesOption}/>
-					</DropdownMenu>
+          {
+            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>
@@ -152,6 +181,17 @@ export default defineComponent({
                   <span>暂无内容</span>
                 </div>}
         </List>
+        <Popup  style={positionInfo.styleDrag.value} v-model:show={filterShow.value} class="popup-custom van-scale center-closeBtn musicListClass_drag" transition="van-scale" teleport="body" overlay-style={{ background: "rgba(0, 0, 0, 0.3)" }}>
+          <FilterList onClose={() => { filterShow.value = false }} onHandleConfirm={(queryObj) => {
+            filterShow.value = false
+            forms.audioPlayTypes = queryObj.audioPlayTypes
+            forms.bookVersionId = queryObj.bookVersionId
+            forms.musicTagIds = queryObj.musicTagIds
+            forms.musicalInstrumentId = queryObj.musicalInstrumentId
+            handleQuery()
+          }}></FilterList>
+          {state.platform === IPlatform.PC && <Dragbom />}
+        </Popup>
       </div>
     );
   },

src/page-instrument/custom-plugins/the-vip/index.module.less

@@ -1,12 +1,12 @@
 .container {
     position: relative;
     width: 278px;
-    height: 252px;
+    height: 213px;
     background: url('./icon_bg.png') no-repeat;
     background-size: contain;
     display: flex;
     flex-direction: column;
-    padding-top: 126px;
+    padding-top: 90px;
 }
 
 .close {