|
@@ -15,13 +15,13 @@ 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 iconFire from './images/icon-fire.png';
|
|
|
import { api_musicSheetCategoriesPage, api_musicSheetPage } from '../co-ai/api';
|
|
|
import { state as baseState } from '@/state';
|
|
|
-import { useEventListener, useWindowScroll } from '@vueuse/core';
|
|
|
import request from '@/helpers/request';
|
|
|
import MEmpty from '@/components/m-empty';
|
|
|
import { postMessage } from '@/helpers/native-message';
|
|
|
-import dayjs from 'dayjs';
|
|
|
+import { audioPlayType } from '@/helpers/constant';
|
|
|
|
|
|
const ChildNodeSearch = defineComponent({
|
|
|
name: 'ChildNodeSearch',
|
|
@@ -119,6 +119,8 @@ export default defineComponent({
|
|
|
musics: [] as any,
|
|
|
types: [] as any,
|
|
|
subjectList: [] as any,
|
|
|
+ audioPlayTypeList: [] as any, // 场景
|
|
|
+ sAPT: '', // 场景
|
|
|
sMSCI: '',
|
|
|
sMII: '',
|
|
|
sBookId: '' as any,
|
|
@@ -131,6 +133,7 @@ export default defineComponent({
|
|
|
status: 1,
|
|
|
keyword: '', // 关键词
|
|
|
grade: '',
|
|
|
+ audioPlayTypes: [] as any,
|
|
|
bookVersionId: null as any,
|
|
|
musicSheetCategoriesId: '',
|
|
|
musicalInstrumentId: ''
|
|
@@ -151,6 +154,12 @@ export default defineComponent({
|
|
|
...musicForms
|
|
|
});
|
|
|
if (res.code === 200 && Array.isArray(res?.data?.rows)) {
|
|
|
+ const result = res.data.rows || [];
|
|
|
+ result.forEach((item: any) => {
|
|
|
+ item.audioPlayTypeArray = item.audioPlayTypes
|
|
|
+ ? item.audioPlayTypes.split(',')
|
|
|
+ : [];
|
|
|
+ });
|
|
|
state.musics = [...state.musics, ...res.data.rows];
|
|
|
state.finished = !res.data.next;
|
|
|
musicForms.page = res.data.current + 1;
|
|
@@ -311,20 +320,29 @@ export default defineComponent({
|
|
|
// onSearch();
|
|
|
};
|
|
|
|
|
|
+ const formatUsedNum = (num: number) => {
|
|
|
+ if (num < 10000) {
|
|
|
+ return num;
|
|
|
+ } else {
|
|
|
+ const n = num / 10000;
|
|
|
+ return Number(n.toFixed(1)) + '万';
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
// 判断是否有数据
|
|
|
const isSearch = computed(() => {
|
|
|
return data.tags.length > 0 ? true : false;
|
|
|
});
|
|
|
|
|
|
onMounted(async () => {
|
|
|
- // useEventListener(document, 'scroll', () => {
|
|
|
- // const { y } = useWindowScroll();
|
|
|
- // if (y.value > 32) {
|
|
|
- // state.background = '#fff';
|
|
|
- // } else {
|
|
|
- // state.background = 'transparent';
|
|
|
- // }
|
|
|
- // });
|
|
|
+ // 场景
|
|
|
+ const tempAudio = Object.keys(audioPlayType).map(key => {
|
|
|
+ return {
|
|
|
+ id: key,
|
|
|
+ name: audioPlayType[key]
|
|
|
+ };
|
|
|
+ });
|
|
|
+ state.audioPlayTypeList = [{ name: '全部', id: '' }, ...tempAudio];
|
|
|
|
|
|
state.loading = true;
|
|
|
// await getSubjecList();
|
|
@@ -377,24 +395,27 @@ export default defineComponent({
|
|
|
getMusicList();
|
|
|
}}>
|
|
|
{{
|
|
|
- left: () =>
|
|
|
- isSearch.value && (
|
|
|
- <div
|
|
|
- class={[
|
|
|
- styles.searchContent,
|
|
|
- state.searchPopup && styles.active
|
|
|
- ]}
|
|
|
- onClick={() => {
|
|
|
- // state.sMSCI = musicForms.musicSheetCategoriesId;
|
|
|
- state.sBookId = musicForms.bookVersionId;
|
|
|
- // state.sGrade = musicForms.grade;
|
|
|
- // state.sMII = musicForms.musicalInstrumentId;
|
|
|
- state.searchPopup = true;
|
|
|
- }}>
|
|
|
- <span>筛选</span>
|
|
|
- <i></i>
|
|
|
- </div>
|
|
|
- )
|
|
|
+ left: () => (
|
|
|
+ // 由于添加了场景,必然有搜索条件
|
|
|
+ // isSearch.value && (
|
|
|
+ <div
|
|
|
+ class={[
|
|
|
+ styles.searchContent,
|
|
|
+ state.searchPopup && styles.active
|
|
|
+ ]}
|
|
|
+ onClick={() => {
|
|
|
+ state.sBookId = musicForms.bookVersionId;
|
|
|
+ state.sAPT =
|
|
|
+ musicForms.audioPlayTypes.length > 1
|
|
|
+ ? 'PLAY_SING'
|
|
|
+ : musicForms.audioPlayTypes.join('');
|
|
|
+ state.searchPopup = true;
|
|
|
+ }}>
|
|
|
+ <span>筛选</span>
|
|
|
+ <i></i>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ // )
|
|
|
}}
|
|
|
</MSearch>
|
|
|
</MSticky>
|
|
@@ -427,7 +448,27 @@ export default defineComponent({
|
|
|
title: () => (
|
|
|
<div class={styles.musicContnet}>
|
|
|
<h2>{item.musicSheetName}</h2>
|
|
|
- {item.composer && <p>{item.composer}</p>}
|
|
|
+ <div class={styles.allStatus}>
|
|
|
+ <span class={styles.hotNum}>
|
|
|
+ <img src={iconFire} class={styles.iconFire} />
|
|
|
+ {formatUsedNum(item.usedNum)}
|
|
|
+ </span>
|
|
|
+ {item.audioPlayTypes.includes('PLAY') && (
|
|
|
+ <span
|
|
|
+ class={[styles.iconPlayType, styles.iconPlay]}>
|
|
|
+ 演奏
|
|
|
+ </span>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {item.audioPlayTypes.includes('SING') && (
|
|
|
+ <span
|
|
|
+ class={[styles.iconPlayType, styles.iconSing]}>
|
|
|
+ 演唱
|
|
|
+ </span>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {item.composer && <p>{item.composer}</p>}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
),
|
|
|
'right-icon': () => (
|
|
@@ -463,6 +504,11 @@ export default defineComponent({
|
|
|
musicForms.bookVersionId =
|
|
|
data.childSelectId || data.tagActiveId;
|
|
|
// musicForms.grade = state.sGrade;
|
|
|
+ musicForms.audioPlayTypes = state.sAPT
|
|
|
+ ? state.sAPT === 'PLAY_SING'
|
|
|
+ ? ['PLAY', 'SING']
|
|
|
+ : [state.sAPT]
|
|
|
+ : [];
|
|
|
state.searchPopup = false;
|
|
|
musicForms.page = 1;
|
|
|
state.musics = [];
|
|
@@ -474,6 +520,26 @@ export default defineComponent({
|
|
|
</div>
|
|
|
|
|
|
<div class={styles.changeSubjectContainer}>
|
|
|
+ {state.audioPlayTypeList.length > 0 && (
|
|
|
+ <>
|
|
|
+ <div class={styles.title}>场景</div>
|
|
|
+ <div class={styles.subjectContainer}>
|
|
|
+ {state.audioPlayTypeList.map((subject: any) => (
|
|
|
+ <div
|
|
|
+ class={[
|
|
|
+ styles.subjectItem,
|
|
|
+ subject.id === state.sAPT && styles.active
|
|
|
+ ]}
|
|
|
+ onClick={() => {
|
|
|
+ state.sAPT = subject.id;
|
|
|
+ }}>
|
|
|
+ {subject.name}
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+
|
|
|
{data.tags.length > 0 && (
|
|
|
<>
|
|
|
<div class={styles.title}>{data.tags[0]?.columnName}</div>
|