|
|
@@ -16,17 +16,19 @@ import {
|
|
|
Popup,
|
|
|
Dialog,
|
|
|
Sticky,
|
|
|
- Swipe,
|
|
|
- SwipeItem,
|
|
|
- Picker
|
|
|
+ Picker,
|
|
|
+ DropdownMenu,
|
|
|
+ DropdownItem,
|
|
|
+ Tag
|
|
|
} from 'vant'
|
|
|
import styles from './index.module.less'
|
|
|
import TheSticky from '@/components/the-sticky'
|
|
|
import ColHeader from '@/components/col-header'
|
|
|
-import { useWindowScroll, useEventListener } from '@vueuse/core'
|
|
|
+// import { useWindowScroll, useEventListener } from '@vueuse/core'
|
|
|
import request from '@/helpers/request'
|
|
|
-import iconMenu from './images/icon-menu.png'
|
|
|
-import iconRightTop from './images/icon-right-top.png'
|
|
|
+// import iconMenu from './images/icon-menu.png'
|
|
|
+// import iconRightTop from './images/icon-right-top.png'
|
|
|
+import Search from '@/components/col-search'
|
|
|
import iconAlbumCover from '../../images/icon-album-cover.png'
|
|
|
import iconTimer from './images/icon-timer.png'
|
|
|
import iconArrow from './images/icon-arrow.png'
|
|
|
@@ -47,6 +49,21 @@ import 'swiper/css'
|
|
|
import 'swiper/css/pagination'
|
|
|
import CourseItem from '../lessonCourseware/component/CourseItem'
|
|
|
|
|
|
+enum courseEmnu {
|
|
|
+ PERCUSSION_SINGLE = '打击乐',
|
|
|
+ FLUTE_SINGLE = '长笛',
|
|
|
+ SAX_SINGLE = '萨克斯',
|
|
|
+ CLARINET_SINGLE = '单簧管',
|
|
|
+ TRUMPET_SINGLE = '小号',
|
|
|
+ TROMBONE_SINGLE = '长号',
|
|
|
+ HORN_SINGLE = '圆号',
|
|
|
+ BARITONE_TUBA_SINGLE = '上低音号-大号',
|
|
|
+ MUSIC_THEORY = '乐理',
|
|
|
+ INSTRUMENTAL_ENSEMBLE = '合奏',
|
|
|
+ EUPHONIUM_SINGLE = '上低音号',
|
|
|
+ TUBA_SINGLE = '大号'
|
|
|
+}
|
|
|
+
|
|
|
export default defineComponent({
|
|
|
name: 'train-tool',
|
|
|
setup() {
|
|
|
@@ -59,7 +76,7 @@ export default defineComponent({
|
|
|
const route = useRoute()
|
|
|
const router = useRouter()
|
|
|
const background = ref<string>('rgba(55, 205, 177, 0)')
|
|
|
- const color = ref<string>('#fff')
|
|
|
+ // const color = ref<string>('#fff')
|
|
|
const state = reactive({
|
|
|
userId: '',
|
|
|
details: {} as any,
|
|
|
@@ -73,7 +90,7 @@ export default defineComponent({
|
|
|
isError: false,
|
|
|
list: [] as any,
|
|
|
popupStatus: false,
|
|
|
- selectMember: {} as any, // 购买的月份
|
|
|
+ // selectMember: {} as any, // 购买的月份
|
|
|
ensembleCounts: false,
|
|
|
musicCounts: false,
|
|
|
subjectCounts: false,
|
|
|
@@ -91,7 +108,34 @@ export default defineComponent({
|
|
|
teacherSubjectIndex: 0,
|
|
|
subjectList: [] // 声部列表
|
|
|
})
|
|
|
+ // const params = reactive({
|
|
|
+ // keyword: (route.query.search as string) || '',
|
|
|
+ // subjectType: subjectType,
|
|
|
+ // page: 1,
|
|
|
+ // subjectId: null,
|
|
|
+ // albumId: route.query.albumId,
|
|
|
+ // albumName: '',
|
|
|
+ // level: '',
|
|
|
+ // type: '',
|
|
|
+ // title: title
|
|
|
+ // })
|
|
|
+ const searchObj = ref<any>({
|
|
|
+ COURSEWARE: {},
|
|
|
+ SUBJECT: {},
|
|
|
+ MUSIC: {},
|
|
|
+ ENSEMBLE: {}
|
|
|
+ })
|
|
|
+ const searchRef = ref()
|
|
|
const params = reactive({
|
|
|
+ keyword: null as any,
|
|
|
+ // subjectType: '',
|
|
|
+ subjectId: null,
|
|
|
+ // albumId: route.query.albumId,
|
|
|
+ // albumName: '',
|
|
|
+ level: '',
|
|
|
+ type: '',
|
|
|
+ courseTypeCode: '',
|
|
|
+ // title: '',
|
|
|
page: 1,
|
|
|
rows: 20
|
|
|
})
|
|
|
@@ -108,6 +152,44 @@ export default defineComponent({
|
|
|
}
|
|
|
})
|
|
|
|
|
|
+ const isSearchStatus = computed(() => {
|
|
|
+ const obj = searchObj.value[state.activeTab]
|
|
|
+ let status = false
|
|
|
+ if (state.activeTab === 'COURSEWARE') {
|
|
|
+ if (obj.courseTypeList && obj.courseTypeList.length > 0) {
|
|
|
+ status = true
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (obj.subjects && obj.subjects.length > 0) {
|
|
|
+ status = true
|
|
|
+ }
|
|
|
+ if (obj.levelList && obj.levelList.length > 0) {
|
|
|
+ status = true
|
|
|
+ }
|
|
|
+ if (obj.typeList && obj.typeList.length > 0) {
|
|
|
+ status = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return status
|
|
|
+ })
|
|
|
+
|
|
|
+ const courseTypeCodeList = computed(() => {
|
|
|
+ const obj =
|
|
|
+ state.activeTab === 'COURSEWARE' ? searchObj.value[state.activeTab] : []
|
|
|
+ const list = obj.courseTypeList || []
|
|
|
+ const temp = list?.map((item: any) => {
|
|
|
+ return {
|
|
|
+ text: courseEmnu[item],
|
|
|
+ value: item
|
|
|
+ }
|
|
|
+ })
|
|
|
+ temp.unshift({
|
|
|
+ text: '全部教材',
|
|
|
+ value: ''
|
|
|
+ })
|
|
|
+ return temp
|
|
|
+ })
|
|
|
+
|
|
|
const getDetails = async () => {
|
|
|
state.loadingAlbum = true
|
|
|
try {
|
|
|
@@ -179,6 +261,23 @@ export default defineComponent({
|
|
|
state.loadingAlbum = false
|
|
|
}
|
|
|
|
|
|
+ const getSelectCondition = async (type: string) => {
|
|
|
+ // 判断是否已经查询过数据
|
|
|
+ if(Object.keys(searchObj.value[type]).length > 0) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const { data } = await request.post(
|
|
|
+ `${apiSuffix.value}/tenantAlbumMusic/selectCondition`,
|
|
|
+ {
|
|
|
+ data: {
|
|
|
+ subjectType: type,
|
|
|
+ tenantAlbumId: state.details.id
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ searchObj.value[type] = data || {}
|
|
|
+ }
|
|
|
+
|
|
|
watch(
|
|
|
() => state.details,
|
|
|
() => {
|
|
|
@@ -208,9 +307,12 @@ export default defineComponent({
|
|
|
state.loading = true
|
|
|
state.isError = false
|
|
|
const tempParams = {
|
|
|
+ ...params,
|
|
|
+ // level: '',
|
|
|
+ // type: '',
|
|
|
+ // subjectId: params.subjectId
|
|
|
albumId: state.details.id || null,
|
|
|
- subjectType: state.activeTab,
|
|
|
- ...params
|
|
|
+ subjectType: state.activeTab
|
|
|
} as any
|
|
|
|
|
|
// 老师端默认查询声部
|
|
|
@@ -284,6 +386,23 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ // 获取信息
|
|
|
+ const activeTypeParams = async () => {
|
|
|
+ if (state.activeTab === 'COURSEWARE') {
|
|
|
+ await getSelectCondition(state.activeTab)
|
|
|
+ } else if (['SUBJECT', 'MUSIC', 'ENSEMBLE'].includes(state.activeTab)) {
|
|
|
+ await getSelectCondition(state.activeTab)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const onSearch = (value?: string) => {
|
|
|
+ params.page = 1
|
|
|
+ // state.finished = false
|
|
|
+ params.keyword = value
|
|
|
+ state.list = []
|
|
|
+ FetchList()
|
|
|
+ }
|
|
|
+
|
|
|
onMounted(async () => {
|
|
|
// useEventListener(document, 'scroll', evt => {
|
|
|
// const { y } = useWindowScroll()
|
|
|
@@ -318,10 +437,16 @@ export default defineComponent({
|
|
|
state.loadingAlbum = true
|
|
|
await getDetails()
|
|
|
await FetchList()
|
|
|
- getSubjectList()
|
|
|
+ //
|
|
|
+ if (baseState.platformType === 'TEACHER') {
|
|
|
+ getSubjectList()
|
|
|
+ }
|
|
|
+
|
|
|
+ activeTypeParams()
|
|
|
state.loadingAlbum = false
|
|
|
state.loading = false
|
|
|
|
|
|
+ console.log(state.activeTab, 'activeTab')
|
|
|
// 为了处理 swiper 会不显示的问题
|
|
|
document.body.scrollIntoView()
|
|
|
window.scrollTo(1, 0)
|
|
|
@@ -533,6 +658,11 @@ export default defineComponent({
|
|
|
pagination={{ clickable: true }}
|
|
|
// onTransitionEnd={(swiper: any) => {}} onSlideChange
|
|
|
onSlideChange={(swiper: any) => {
|
|
|
+ params.subjectId = null;
|
|
|
+ params.keyword = null;
|
|
|
+ params.level = ''
|
|
|
+ params.type = ''
|
|
|
+ params.courseTypeCode = ''
|
|
|
state.details = state.albumList[swiper.activeIndex]
|
|
|
// 等tab渲染完了之后再切换 不然tab会自动重新赋值
|
|
|
nextTick(() => {
|
|
|
@@ -613,7 +743,7 @@ export default defineComponent({
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class={styles.musicList}>
|
|
|
+ <div class={[styles.musicList, 'musicList']}>
|
|
|
<Sticky position="top" offsetTop={state.heightV}>
|
|
|
<Tabs
|
|
|
color="var(--van-primary)"
|
|
|
@@ -622,7 +752,14 @@ export default defineComponent({
|
|
|
shrink
|
|
|
v-model:active={state.activeTab}
|
|
|
onClick-tab={val => {
|
|
|
+ params.subjectId = null;
|
|
|
+ params.keyword = null;
|
|
|
+ params.level = ''
|
|
|
+ params.type = ''
|
|
|
+ params.courseTypeCode = ''
|
|
|
+
|
|
|
state.activeTab = val.name
|
|
|
+ activeTypeParams()
|
|
|
params.page = 1
|
|
|
state.list = []
|
|
|
FetchList()
|
|
|
@@ -641,6 +778,214 @@ export default defineComponent({
|
|
|
<Tab title="合奏云练" name="ENSEMBLE"></Tab>
|
|
|
)}
|
|
|
</Tabs>
|
|
|
+ <Search
|
|
|
+ placeholder={state.activeTab === 'COURSEWARE' ? '请输入教材关键词' : '请输入曲谱关键词'}
|
|
|
+ class={styles.search}
|
|
|
+ onSearch={onSearch}
|
|
|
+ type="tenant"
|
|
|
+ v-slots={{
|
|
|
+ left: () =>
|
|
|
+ isSearchStatus.value && (
|
|
|
+ <DropdownMenu zIndex={2999}>
|
|
|
+ {state.activeTab === 'COURSEWARE' ? (
|
|
|
+ <DropdownItem
|
|
|
+ teleport="body"
|
|
|
+ onOpen={() => {
|
|
|
+ const targetElement: any = document.querySelector('.musicList')
|
|
|
+ const targetPosition = targetElement.getBoundingClientRect().top + window.scrollY;
|
|
|
+ // 设置距离顶部的像素值
|
|
|
+ window.scrollTo({
|
|
|
+ top: targetPosition - state.heightV + 1,
|
|
|
+ behavior: 'smooth'
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ v-model={params.courseTypeCode}
|
|
|
+ options={courseTypeCodeList.value}
|
|
|
+ onUpdate:modelValue={() => {
|
|
|
+ onSearch()
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <DropdownItem
|
|
|
+ onOpen={() => {
|
|
|
+ const targetElement: any = document.querySelector('.musicList')
|
|
|
+ const targetPosition = targetElement.getBoundingClientRect().top + window.scrollY;
|
|
|
+
|
|
|
+ window.scrollTo({
|
|
|
+ top: targetPosition - state.heightV + 1,
|
|
|
+ behavior: 'smooth'
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ teleport="body"
|
|
|
+ titleClass={
|
|
|
+ params.subjectId ||
|
|
|
+ params.type ||
|
|
|
+ params.level
|
|
|
+ ? styles.titleActive
|
|
|
+ : ''
|
|
|
+ }
|
|
|
+ title="筛选"
|
|
|
+ ref={searchRef}
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class={styles.searchResult}
|
|
|
+ style={{
|
|
|
+ maxHeight: '45vh',
|
|
|
+ overflowY: 'auto'
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {searchObj.value[state.activeTab].subjects &&
|
|
|
+ searchObj.value[state.activeTab].subjects.length > 0 && (
|
|
|
+ <>
|
|
|
+ <div class={styles.searchTitle}>
|
|
|
+ 声部
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class={[
|
|
|
+ styles['radio-group'],
|
|
|
+ styles.radio,
|
|
|
+ styles['organ-radio']
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ {searchObj.value[state.activeTab].subjects.map(
|
|
|
+ (subject: any) => {
|
|
|
+ const isActive =
|
|
|
+ subject.id === params.subjectId
|
|
|
+ const type = isActive
|
|
|
+ ? 'primary'
|
|
|
+ : 'default'
|
|
|
+ return (
|
|
|
+ <Tag
|
|
|
+ size="large"
|
|
|
+ plain={isActive}
|
|
|
+ type={type}
|
|
|
+ round
|
|
|
+ onClick={() => {
|
|
|
+ params.subjectId =
|
|
|
+ subject.id
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {subject.name}
|
|
|
+ </Tag>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ {searchObj.value[state.activeTab].levelList &&
|
|
|
+ searchObj.value[state.activeTab].levelList.length > 0 && (
|
|
|
+ <>
|
|
|
+ <div class={styles.searchTitle}>
|
|
|
+ 级别
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class={[
|
|
|
+ styles['radio-group'],
|
|
|
+ styles.radio,
|
|
|
+ styles['organ-radio']
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ {searchObj.value[state.activeTab].levelList.map(
|
|
|
+ (subject: any) => {
|
|
|
+ const isActive =
|
|
|
+ subject.id === params.level
|
|
|
+ const type = isActive
|
|
|
+ ? 'primary'
|
|
|
+ : 'default'
|
|
|
+ return (
|
|
|
+ <Tag
|
|
|
+ size="large"
|
|
|
+ plain={isActive}
|
|
|
+ type={type}
|
|
|
+ round
|
|
|
+ onClick={() => {
|
|
|
+ params.level = subject.id
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {subject.value}
|
|
|
+ </Tag>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ {searchObj.value[state.activeTab].typeList &&
|
|
|
+ searchObj.value[state.activeTab].typeList.length > 0 && (
|
|
|
+ <>
|
|
|
+ <div class={styles.searchTitle}>
|
|
|
+ 类型
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class={[
|
|
|
+ styles['radio-group'],
|
|
|
+ styles.radio,
|
|
|
+ styles['organ-radio']
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ {searchObj.value[state.activeTab].typeList.map(
|
|
|
+ (subject: any) => {
|
|
|
+ const isActive =
|
|
|
+ subject.id === params.type
|
|
|
+ const type = isActive
|
|
|
+ ? 'primary'
|
|
|
+ : 'default'
|
|
|
+ return (
|
|
|
+ <Tag
|
|
|
+ size="large"
|
|
|
+ plain={isActive}
|
|
|
+ type={type}
|
|
|
+ round
|
|
|
+ onClick={() => {
|
|
|
+ params.type = subject.id
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {subject.value}
|
|
|
+ </Tag>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class={['btnGroup', 'btnMore']}>
|
|
|
+ <Button
|
|
|
+ class={styles.resetting}
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ round
|
|
|
+ onClick={() => {
|
|
|
+ params.subjectId = null
|
|
|
+ params.level = ''
|
|
|
+ params.type = ''
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 重 置
|
|
|
+ </Button>
|
|
|
+
|
|
|
+ <Button
|
|
|
+ class={styles.confirm}
|
|
|
+ type="primary"
|
|
|
+ color="linear-gradient( 270deg, #FF204B 0%, #FE5B71 100%)"
|
|
|
+ round
|
|
|
+ block
|
|
|
+ onClick={() => {
|
|
|
+ onSearch()
|
|
|
+ searchRef.value?.toggle()
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 确 认
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </DropdownItem>
|
|
|
+ )}
|
|
|
+ </DropdownMenu>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ />
|
|
|
</Sticky>
|
|
|
|
|
|
<div
|
|
|
@@ -735,7 +1080,10 @@ export default defineComponent({
|
|
|
</div>
|
|
|
</div>
|
|
|
{baseState.platformType === 'STUDENT' && state.buy != '1' && (
|
|
|
- <TheSticky position="bottom">
|
|
|
+ <TheSticky
|
|
|
+ position="bottom"
|
|
|
+ varName="--bottom-train-tool-height"
|
|
|
+ >
|
|
|
<div class={styles.btnGroup}>
|
|
|
<Button
|
|
|
round
|
