|  | @@ -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>
 | 
	
		
			
				|  |  | +		);
 | 
	
		
			
				|  |  | +	},
 | 
	
		
			
				|  |  | +});
 |