mteacher/src/views/audition/modal/accompanimentModal.vue

<template>
    <div class="accompanimentModal">
        <van-sticky :offset-top="isHead ? '.46rem' : 0">
            <van-dropdown-menu class="cateDropDown" active-color="#01C1B5">
                <van-dropdown-item v-model="levelId" :options="levelOptions" @change="levelChange" />
                <van-dropdown-item v-model="subjectId" :options="subjectOptions" @change="subjectChange" />
            </van-dropdown-menu>
            <van-search
                v-model="search"
                show-action
                placeholder="请输入搜索关键词"
                shape="round"
            >
                <template #label>
                    <van-dropdown-menu class="headDropDown" active-color="#01C1B5">
                        <van-dropdown-item v-model="typeId" :options="typeOptions" @change="typeChange" />
                    </van-dropdown-menu>
                </template>
                <template #action>
                    <div @click="onSearch">搜索</div>
                </template>
            </van-search>
        </van-sticky>

        <van-list
            v-model="loading"
            v-if="show"
            key="data"
            :finished="finished"
            finished-text="没有更多数据了"
            :immediate-check="false"
            @load="FetchList"
        >
            <van-cell-group>
                <van-cell
                    v-for="(item, index) in list"
                    :key="index"
                    class="input-cell"
                    clickable
                    @click="onSelect(item)"
                    :center="true"
                >
                    <template slot="icon">
                        <van-icon class="iconMusic" :name="MusicIcon" />
                        <div class='icon' v-if="item.rankIds">
                            <img src='./icons/vip_icon.png' />
                        </div>
                    </template>
                    <template slot="title">
                        <!-- {{ item.examSongName }} -->
                        <van-notice-bar
                            background="none"
                            :style="{ paddingLeft: (item.rankIds ? '.04rem' : '.15rem') + '!important' }"
                            color="#444"
                            :scrollable="false"
                            :text="item.examSongName"
                        />
                    </template>
                </van-cell>
            </van-cell-group>
        </van-list>
        <m-empty class="empty" v-else key="data" />
    </div>
</template>

<script>
import { find } from 'lodash'
import { sysMusicScoreCategoriesTree, queryPageLimit, querySubjectIds } from './api'
import MusicIcon from './icons/music.png'
export default {
    props: {
        isHead: {
            type: Boolean,
            default() {
                return false
            }
        },
        searchSubjectId: {
            type: [Number, String],
            default: 0
        }
    },
    data() {
        return {
            MusicIcon,
            levelId: 0,
            tempSubjectId: 0,
            levelOptions: [
                // { text: '全部等级', value: 0 },
            ],
            subjectOptions: [
                { text: '全部声部', value: 0 }
            ],
            typeId: 0,
            typeOptions: [],
            search: null,
            loading: false,
            finished: false,
            show: true,
            params: {
                page: 1,
                rows: 20,
            },
            list: [],
        }
    },
    computed: {
        subjectId() {
            return this.tempSubjectId || Number(this.searchSubjectId)
        }
    },
    async mounted() {
        await this.FetchLevel()
        await this.FetchList()
    },
    methods: {
        async FetchLevel() {
            try {
                const res = await sysMusicScoreCategoriesTree({ parentId: 1 })
                // console.log(res)
                this.levelOptions = [...res.data.map((item) => ({value: item.id, text: item.name, childs: item.sysMusicScoreCategoriesList}))]
                if (this.levelOptions.length && !this.levelId) {
                    // console.log(this.levelOptions)
                    this.levelId = this.levelOptions[0].value
                    const active = find(this.levelOptions, {value: this.levelId})
                    if (active) {
                        if (active.childs) {
                            this.typeOptions = [{value: 0, text: '全部练习'}, ...active.childs.map((item) => ({value: item.id, text: item.name}))]
                        } else {
                            this.typeOptions = null
                        }
                    }
                }
            } catch(error) {
                //
            }
        },
        async FetchCats() {
            try {
                const res = await querySubjectIds()
                this.subjectOptions = [...this.subjectOptions, ...res.data.filter((item) => !!item).map((item) => ({value: item.id, text: item.name}))]
            } catch (error) {
                //
            }
        },
        async FetchList() {
            if (this.subjectOptions.length === 1) {
                await this.FetchCats()
            }
            try {
                let params = this.params
                const res = await queryPageLimit({
                    ...params,
                    clientType: 'SMART_PRACTICE',
                    subjectId: this.subjectId === 0 ? undefined : this.subjectId,
                    categoriesId: (this.levelId || this.typeId) === 0 ? undefined : this.typeId || this.levelId,
                    search: this.search
                })
                this.loading = false;
                const { data } = res
                this.list = [...this.list, ...data.rows]
                if(params.page >= Math.ceil(data.totalPage)) {
                    this.finished = true
                    // Toast('列表加载完成')
                }
                this.params.page = data.nextPage
                if(this.list.length <= 0) {
                    this.show = false
                }
            } catch {
                //
            }
        },
        levelChange(val) {
            this.levelId = val
            this.typeId = 0
            const active = find(this.levelOptions, {value: val})
            if (active) {
                if (active.childs) {
                    this.typeOptions = [{value: 0, text: '全部练习'}, ...active.childs.map((item) => ({value: item.id, text: item.name}))]
                } else {
                    this.typeOptions = null
                }
            }
            this.onSearch()
        },
        subjectChange(val) {
            this.tempSubjectId = val
            this.onSearch()
        },
        typeChange(val) {
            this.typeId = val
            this.onSearch()
        },
        onSearch() {
            this.params.page = 1
            this.list = []
            this.show = true
            this.finished = false
            this.FetchList()
        },
        onSelect(item) {
            this.$emit('onSelectMusic', item)
        }
    }
}
</script>

<style lang="less" scoped>
.accompanimentModal {
    background-color: #f5f5f5;
    min-height: 100vh;

    /deep/.van-search {
        .van-cell {
            font-size: 0.14rem;
            padding: 0.05rem 0.08rem;
            line-height: 0.24rem;
        }
        .van-dropdown-menu__bar {
            height: .36rem;
            background: transparent;
            box-shadow: none;
        }
    }

    .headDropDown {
        height: .36rem;
        background: transparent;
        /deep/.van-dropdown-menu__title {
            font-size: .14rem;
        }
    }
    /deep/.van-field__control {
        font-size: .14rem;
    }
    /deep/.van-dropdown-item .van-cell {
        padding: 0.12rem 0.16rem;
    }

    .iconMusic {
        /deep/.van-icon__image {
            width: .38rem;
            height: .38rem;
            margin: auto;
            vertical-align: middle;
            // padding-right: .1rem;
        }
    }

    .icon{
        display: flex;
        align-items: center;
        margin-left: .15rem;
        img{
            width: .4rem;
            // margin-top: -.02rem;
        }
    }

}
</style>