筛选

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/the-music-list/filterList.tsx

@@ -0,0 +1,282 @@
+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 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 ? queryObj.audioPlayTypes.split(",") : [],
+                musicTutorialIds: 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({}).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}>
+                                            {
+                                                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 && 
+                                                    <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
+                                                            v-model:show={item.isExpand}
+                                                            trigger="click"
+                                                            class={styles.subjectPopover}
+                                                        >
+                                                            {{
+                                                                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={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,70 +150,23 @@
         .dropdownMenu{
             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;
-                            }
-                        }
-                    }
-                }
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            &:active{
+                opacity: 0.8;
             }
-            &.currItem{
-                :global{
-                    .van-dropdown-menu__bar  .van-dropdown-menu__title{
-                        color: #1CACF1;
-                        --van-gray-4:#1CACF1;
-                    }
-                }
+            &>div{
+                font-weight: 400;
+                font-size: 14px;
+                color: #0CA2EA;
+                line-height: 20px;
+            }
+            &>img{
+                margin: 0 6px 0 4px;
+                width: 9px;
+                height: 5px;
             }
         }
     }
@@ -211,6 +175,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);
             }
@@ -326,4 +294,273 @@
         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;
+                    }
+                }
+                .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;
+                    &:active{
+                        opacity: 0.8;
+                    }
+                    &.tabActive{
+                        background: #EBF8FF;
+                        border: 1px solid 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;
+            }
+        }
+    }
+}
+.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{
+            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,6 +24,7 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const query: any = getQuery();
     const forms = reactive({
       name: "",
       page: 1,
@@ -25,7 +32,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 || ""
     });
     const data = reactive({
       isFocus: false,
@@ -34,22 +44,12 @@ 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;
       try {
-        const res = await api_musicSheetPage({
-          ...forms,
-          ...{
-            audioPlayTypes: forms.audioPlayTypes ? forms.audioPlayTypes.split(",") : []
-          }
-        });
+        const res = await api_musicSheetPage(forms);
         if (res?.code === 200 && Array.isArray(res.data?.rows)) {
           data.list = [...data.list, ...res.data.rows];
         }
@@ -91,26 +91,32 @@ export default defineComponent({
           type: "fullscreen",
         },
       });
-      location.href =
-        location.origin +
-        location.pathname +
-        "?" +
-        qs.stringify({
-          id: item.id,
-          _t: Date.now(),
-        });
+      let href = location.href.replace(/id=\d+/, `id=${item.id}`); // 替换id
+      href = href.replace(/instrumentId=\d+/, `instrumentId=${forms.musicalInstrumentId}`); // 替换乐器
+      location.href = href
+      location.reload()
     };
     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>
+          <div class={styles.dropdownMenu} onClick={() => { filterShow.value = true }}>
+            <div>筛选</div>
+            <img 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 +158,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.musicTutorialIds = queryObj.musicTutorialIds
+            forms.musicTagIds = queryObj.musicTagIds
+            forms.musicalInstrumentId = queryObj.musicalInstrumentId
+            handleQuery()
+          }}></FilterList>
+          {state.platform === IPlatform.PC && <Dragbom />}
+        </Popup>
       </div>
     );
   },

vite.config.ts

@@ -76,8 +76,8 @@ export default defineConfig({
         // target: "https://kt.colexiu.com",
         // target: "https://test.lexiaoya.cn",
         // target: "https://kt.colexiu.com",
-        target: "https://test.resource.colexiu.com", // 内容平台开发环境，内容平台开发，需在url链接上加上isCbs=true
-        // target: "https://test.kt.colexiu.com",
+        //target: "https://test.resource.colexiu.com", // 内容平台开发环境，内容平台开发，需在url链接上加上isCbs=true
+        target: "https://dev.kt.colexiu.com",
         // target: "https://mec.colexiu.com",
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/instrument/, ""),