|
|
@@ -1,49 +1,183 @@
|
|
|
<template>
|
|
|
<div class="accompanimentModal">
|
|
|
- <van-dropdown-menu class="cateDropDown">
|
|
|
- <van-dropdown-item v-model="value1" :options="option1" />
|
|
|
- <van-dropdown-item v-model="value2" :options="option2" />
|
|
|
- </van-dropdown-menu>
|
|
|
- <van-search
|
|
|
- v-model="search"
|
|
|
- show-action
|
|
|
- placeholder="请输入搜索关键词"
|
|
|
- @search="onSearch"
|
|
|
+ <van-sticky>
|
|
|
+ <van-dropdown-menu class="cateDropDown">
|
|
|
+ <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">
|
|
|
- <van-dropdown-item v-model="value1" :options="option1" />
|
|
|
- </van-dropdown-menu>
|
|
|
- </template>
|
|
|
- <template #action>
|
|
|
- <div @click="onSearch">搜索</div>
|
|
|
- </template>
|
|
|
- </van-search>
|
|
|
+ <template #label>
|
|
|
+ <van-dropdown-menu class="headDropDown">
|
|
|
+ <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="没有更多数据了"
|
|
|
+ @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" />
|
|
|
+ </template>
|
|
|
+ <template slot="title">
|
|
|
+ <!-- {{ item.examSongName }} -->
|
|
|
+ <van-notice-bar
|
|
|
+ background="none"
|
|
|
+ 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 {
|
|
|
data() {
|
|
|
return {
|
|
|
- value1: 0,
|
|
|
- value2: 'a',
|
|
|
- option1: [
|
|
|
- { text: '全部商品', value: 0 },
|
|
|
- { text: '新款商品', value: 1 },
|
|
|
- { text: '活动商品', value: 2 },
|
|
|
+ MusicIcon,
|
|
|
+ levelId: 0,
|
|
|
+ subjectId: 0,
|
|
|
+ levelOptions: [
|
|
|
+ // { text: '全部等级', value: 0 },
|
|
|
],
|
|
|
- option2: [
|
|
|
- { text: '默认排序', value: 'a' },
|
|
|
- { text: '好评排序', value: 'b' },
|
|
|
- { text: '销量排序', value: 'c' },
|
|
|
+ subjectOptions: [
|
|
|
+ { text: '全部声部', value: 0 }
|
|
|
],
|
|
|
+ typeId: 0,
|
|
|
+ typeOptions: [],
|
|
|
search: null,
|
|
|
+ loading: false,
|
|
|
+ finished: false,
|
|
|
+ show: true,
|
|
|
+ params: {
|
|
|
+ page: 1,
|
|
|
+ rows: 20,
|
|
|
+ },
|
|
|
+ list: []
|
|
|
}
|
|
|
},
|
|
|
+ async mounted() {
|
|
|
+ this.FetchLevel()
|
|
|
+ },
|
|
|
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.subjectId = 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)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -51,17 +185,39 @@ export default {
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.accompanimentModal {
|
|
|
- /deep/.van-cell {
|
|
|
- font-size: 0.14rem;
|
|
|
- padding: 0.05rem 0.08rem;
|
|
|
- line-height: 0.24rem;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ min-height: 100vh;
|
|
|
+ /deep/.van-search {
|
|
|
+ .van-cell {
|
|
|
+ font-size: 0.14rem;
|
|
|
+ padding: 0.05rem 0.08rem;
|
|
|
+ line-height: 0.24rem;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.headDropDown {
|
|
|
height: .36rem;
|
|
|
background: transparent;
|
|
|
- .van-dropdown-menu {
|
|
|
+ /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;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
</style>
|
