|
|
@@ -1,23 +1,73 @@
|
|
|
-import { defineComponent } from 'vue';
|
|
|
+import { defineComponent, onMounted, reactive } from 'vue';
|
|
|
import styles from './index.module.less';
|
|
|
import { browser } from '@/helpers/utils';
|
|
|
import MSticky from '@/components/m-sticky';
|
|
|
import MHeader from '@/components/m-header';
|
|
|
import { useRouter } from 'vue-router';
|
|
|
import MSearch from '@/components/m-search';
|
|
|
+import { Cell, Image, List, Popup } from 'vant';
|
|
|
+import iconPlayer from './images/icon-player.png';
|
|
|
+import { api_musicSheetPage } from '../co-ai/api';
|
|
|
+import { useEventListener, useWindowScroll } from '@vueuse/core';
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'hot-music-more',
|
|
|
setup() {
|
|
|
const router = useRouter();
|
|
|
+ const state = reactive({
|
|
|
+ background: 'transparent',
|
|
|
+ loading: false,
|
|
|
+ finished: false,
|
|
|
+ searchPopup: false,
|
|
|
+ musics: [] as any
|
|
|
+ });
|
|
|
+
|
|
|
+ const musicForms = reactive({
|
|
|
+ page: 1,
|
|
|
+ rows: 20,
|
|
|
+ status: 1,
|
|
|
+ keyword: '', // 关键词
|
|
|
+ musicSheetCategoriesId: ''
|
|
|
+ });
|
|
|
+
|
|
|
+ const getMusicList = async () => {
|
|
|
+ state.loading = true;
|
|
|
+ try {
|
|
|
+ const res = await api_musicSheetPage({
|
|
|
+ ...musicForms
|
|
|
+ });
|
|
|
+ if (res.code === 200 && Array.isArray(res?.data?.rows)) {
|
|
|
+ state.musics = [...state.musics, ...res.data.rows];
|
|
|
+ state.finished = !res.data.next;
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ // console.log('🚀 ~ error:', error);
|
|
|
+ }
|
|
|
+ state.loading = false;
|
|
|
+ };
|
|
|
+
|
|
|
+ const getSubjectList = async () => {};
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ useEventListener(document, 'scroll', () => {
|
|
|
+ const { y } = useWindowScroll();
|
|
|
+ if (y.value > 32) {
|
|
|
+ state.background = '#fff';
|
|
|
+ } else {
|
|
|
+ state.background = 'transparent';
|
|
|
+ }
|
|
|
+ });
|
|
|
+ getMusicList();
|
|
|
+ });
|
|
|
return () => (
|
|
|
+ // sortType： 2
|
|
|
<div
|
|
|
class={[
|
|
|
styles.hotMusicMore,
|
|
|
browser().isTablet ? styles.hotMusicMoreTablet : ''
|
|
|
]}>
|
|
|
<MSticky position="top">
|
|
|
- <MHeader border={false} background="transparent">
|
|
|
+ <MHeader border={false} background={state.background}>
|
|
|
{{
|
|
|
content: () => (
|
|
|
<div class={styles.woringHeader}>
|
|
|
@@ -43,10 +93,15 @@ export default defineComponent({
|
|
|
}}
|
|
|
</MHeader>
|
|
|
|
|
|
- <MSearch background="transparent">
|
|
|
+ <MSearch background={state.background}>
|
|
|
{{
|
|
|
left: () => (
|
|
|
- <div class={styles.searchContent}>
|
|
|
+ <div
|
|
|
+ class={[
|
|
|
+ styles.searchContent,
|
|
|
+ state.searchPopup && styles.active
|
|
|
+ ]}
|
|
|
+ onClick={() => (state.searchPopup = true)}>
|
|
|
<span>筛选</span>
|
|
|
<i></i>
|
|
|
</div>
|
|
|
@@ -54,6 +109,95 @@ export default defineComponent({
|
|
|
}}
|
|
|
</MSearch>
|
|
|
</MSticky>
|
|
|
+
|
|
|
+ <List
|
|
|
+ loading={state.loading}
|
|
|
+ finished={state.finished}
|
|
|
+ finishedText=" "
|
|
|
+ onLoad={getMusicList}
|
|
|
+ immediateCheck={false}
|
|
|
+ class={styles.musicList}>
|
|
|
+ {state.musics.map((item: any) => (
|
|
|
+ <Cell class={styles.musicItem} border={false} center>
|
|
|
+ {{
|
|
|
+ icon: () => (
|
|
|
+ <Image class={styles.musicImg} src={item.titleImg} />
|
|
|
+ ),
|
|
|
+ title: () => (
|
|
|
+ <div class={styles.musicContnet}>
|
|
|
+ <h2>{item.musicSheetName}</h2>
|
|
|
+ {item.composer && <p>{item.composer}</p>}
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ 'right-icon': () => (
|
|
|
+ <Image class={styles.musicPlayIcon} src={iconPlayer} />
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Cell>
|
|
|
+ ))}
|
|
|
+ </List>
|
|
|
+
|
|
|
+ {/* {!data.skelete && data.list.length === 0 && (
|
|
|
+ <MEmpty description="暂无记录" />
|
|
|
+ )} */}
|
|
|
+
|
|
|
+ <Popup position="bottom" round v-model:show={state.searchPopup}>
|
|
|
+ <div class={styles.searchContainer}>
|
|
|
+ <div class={styles.searchHead}>
|
|
|
+ <span
|
|
|
+ class={styles.cancel}
|
|
|
+ onClick={() => (state.searchPopup = false)}>
|
|
|
+ 取消
|
|
|
+ </span>
|
|
|
+ <span>筛选</span>
|
|
|
+ <span
|
|
|
+ class={styles.confirm}
|
|
|
+ onClick={() => (state.searchPopup = false)}>
|
|
|
+ 确定
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class={styles.changeSubjectContainer}>
|
|
|
+ <div class={styles.title}>声部</div>
|
|
|
+
|
|
|
+ <div class={styles.subjectContainer}>
|
|
|
+ <div
|
|
|
+ class={[
|
|
|
+ styles.subjectItem
|
|
|
+ // item.children.length > 0 && styles.arrow,
|
|
|
+ // item.id === state.subjectValue && styles.active
|
|
|
+ ]}>
|
|
|
+ 测试
|
|
|
+ </div>
|
|
|
+ <div class={[styles.subjectItem, styles.arrow, styles.active]}>
|
|
|
+ 测试
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class={styles.title}>乐器</div>
|
|
|
+ <div class={styles.subjectContainer}>
|
|
|
+ <div
|
|
|
+ class={[
|
|
|
+ styles.subjectItem
|
|
|
+ // styles.active
|
|
|
+ ]}>
|
|
|
+ 测试
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class={styles.title}>曲谱教材</div>
|
|
|
+ <div class={styles.subjectContainer}>
|
|
|
+ <div
|
|
|
+ class={[
|
|
|
+ styles.subjectItem
|
|
|
+ // styles.active
|
|
|
+ ]}>
|
|
|
+ 一年级上册
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Popup>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
