|
|
@@ -122,7 +122,6 @@ export default defineComponent({
|
|
|
loading: false,
|
|
|
finished: false,
|
|
|
isAllStatus: true, // 当前是否已经为全部了
|
|
|
- isFocus: false,// 是否获取焦点
|
|
|
searchPopup: false,
|
|
|
musicDetailPopup: false,
|
|
|
showVip: false,
|
|
|
@@ -171,7 +170,7 @@ export default defineComponent({
|
|
|
tagActive: {} as any,
|
|
|
childSelectId: null as any
|
|
|
});
|
|
|
- const contentRef = ref()
|
|
|
+ const contentRef = ref();
|
|
|
|
|
|
const searchValue = computed(() => {
|
|
|
if (state.tabActive === 'RECOMMEND') {
|
|
|
@@ -184,7 +183,6 @@ export default defineComponent({
|
|
|
return state.allSearch.name;
|
|
|
}
|
|
|
});
|
|
|
- const mSearchRef = ref()
|
|
|
|
|
|
let isClick = false;
|
|
|
const getMusicList = async () => {
|
|
|
@@ -199,21 +197,21 @@ export default defineComponent({
|
|
|
} as any;
|
|
|
if (state.tabActive === 'RECOMMEND') {
|
|
|
params = Object.assign(params, state.recommendSearch);
|
|
|
- params.page = 1
|
|
|
- params.rows = 60
|
|
|
+ params.page = 1;
|
|
|
+ params.rows = 60;
|
|
|
} else if (state.tabActive === 'HOT') {
|
|
|
params = Object.assign(params, state.hotSearch);
|
|
|
- params.page = 1
|
|
|
- params.rows = 60
|
|
|
+ params.page = 1;
|
|
|
+ params.rows = 60;
|
|
|
} else if (state.tabActive === 'NEW') {
|
|
|
params = Object.assign(params, state.newSearch);
|
|
|
- params.page = 1
|
|
|
- params.rows = 60
|
|
|
+ params.page = 1;
|
|
|
+ params.rows = 60;
|
|
|
} else {
|
|
|
params.name = state.allSearch.name;
|
|
|
params = Object.assign(params, state.allSearch);
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
const res = await api_musicSheetPage(params);
|
|
|
if (res.code === 200 && Array.isArray(res?.data?.rows)) {
|
|
|
const result = res.data.rows || [];
|
|
|
@@ -288,7 +286,7 @@ export default defineComponent({
|
|
|
state.sAPT = '';
|
|
|
data.tagActiveId = '';
|
|
|
data.childSelectId = null;
|
|
|
- data.selectParents = {}
|
|
|
+ data.selectParents = {};
|
|
|
// state.allSearch.bookVersionId = data.childSelectId || data.tagActiveId;
|
|
|
// state.allSearch.audioPlayTypes = state.sAPT
|
|
|
// ? state.sAPT === 'PLAY_SING'
|
|
|
@@ -443,11 +441,17 @@ export default defineComponent({
|
|
|
getMusicList();
|
|
|
|
|
|
window.addEventListener('resize', tabResize);
|
|
|
- useEventListener(document, 'scroll', () => {
|
|
|
- if(state.isFocus) {
|
|
|
- mSearchRef.value?.searchBlur()
|
|
|
- }
|
|
|
- });
|
|
|
+ // useEventListener(document, 'scroll', () => {
|
|
|
+ // if (state.isFocus) {
|
|
|
+ // mSearchRef.value?.searchBlur();
|
|
|
+ // }
|
|
|
+ // // if(state.isFocus2) {
|
|
|
+ // // const header: any = document.querySelector('.van-sticky--fixed')
|
|
|
+ // // header.style.position = 'absolute'
|
|
|
+ // // header.style.top = window.scrollY + 'px'
|
|
|
+ // // console.log(window.scrollY, 'window.scrollY')
|
|
|
+ // // }
|
|
|
+ // });
|
|
|
|
|
|
listenerMessage('webViewOnResume', () => {
|
|
|
tabResize();
|
|
|
@@ -487,42 +491,47 @@ export default defineComponent({
|
|
|
class={styles.tabSection}
|
|
|
v-model:active={state.tabActive}
|
|
|
shrink
|
|
|
- onClickTab={() => {
|
|
|
+ onClickTab={(val) => {
|
|
|
if (state.tabActive === '') {
|
|
|
if (state.isAllStatus) {
|
|
|
state.searchPopup = !state.searchPopup;
|
|
|
if (state.searchPopup) {
|
|
|
- const allSearch = state.allSearch
|
|
|
- if(allSearch.audioPlayTypes.length > 0) {
|
|
|
- if(allSearch.audioPlayTypes.length == 1) {
|
|
|
- state.sAPT = allSearch.audioPlayTypes.join(',')
|
|
|
+ const allSearch = state.allSearch;
|
|
|
+ if (allSearch.audioPlayTypes.length > 0) {
|
|
|
+ if (allSearch.audioPlayTypes.length == 1) {
|
|
|
+ state.sAPT = allSearch.audioPlayTypes.join(',');
|
|
|
} else {
|
|
|
- state.sAPT = 'PLAY_SING'
|
|
|
+ state.sAPT = 'PLAY_SING';
|
|
|
}
|
|
|
} else {
|
|
|
- state.sAPT = ''
|
|
|
+ state.sAPT = '';
|
|
|
}
|
|
|
- state.sNt = allSearch.musicTagIds
|
|
|
- if(allSearch.bookVersionId) {
|
|
|
- let ids: any = []
|
|
|
+ state.sNt = allSearch.musicTagIds;
|
|
|
+ if (allSearch.bookVersionId) {
|
|
|
+ let ids: any = [];
|
|
|
data.tags.forEach((item: any) => {
|
|
|
- if(item.id === allSearch.bookVersionId) {
|
|
|
- ids.push(item.id)
|
|
|
+ if (item.id === allSearch.bookVersionId) {
|
|
|
+ ids.push(item.id);
|
|
|
}
|
|
|
- })
|
|
|
- if(ids.length <= 0) {
|
|
|
- ids = formatParentId(allSearch.bookVersionId, data.tags)
|
|
|
+ });
|
|
|
+ if (ids.length <= 0) {
|
|
|
+ ids = formatParentId(
|
|
|
+ allSearch.bookVersionId,
|
|
|
+ data.tags
|
|
|
+ );
|
|
|
}
|
|
|
// console.log(ids, 'ids', allSearch.bookVersionId)
|
|
|
- data.tagActiveId = ids[0]
|
|
|
+ data.tagActiveId = ids[0];
|
|
|
|
|
|
- if(data.tagActiveId) {
|
|
|
- const item = data.tags.find((item) => item.id === ids[0])
|
|
|
- if(item) changeTag(item, ids[1])
|
|
|
+ if (data.tagActiveId) {
|
|
|
+ const item = data.tags.find(
|
|
|
+ item => item.id === ids[0]
|
|
|
+ );
|
|
|
+ if (item) changeTag(item, ids[1]);
|
|
|
}
|
|
|
} else {
|
|
|
- data.tagActiveId = ''
|
|
|
- data.childSelectId = null
|
|
|
+ data.tagActiveId = '';
|
|
|
+ data.childSelectId = null;
|
|
|
data.selectParents = {};
|
|
|
}
|
|
|
}
|
|
|
@@ -563,20 +572,11 @@ export default defineComponent({
|
|
|
|
|
|
<MSearch
|
|
|
v-model:modelValue={searchValue.value}
|
|
|
- ref={mSearchRef}
|
|
|
background={'transparent'}
|
|
|
inputBackground="transparent"
|
|
|
class={styles.mSearch11}
|
|
|
onFocus={() => {
|
|
|
state.searchPopup = false;
|
|
|
- setTimeout(() => {
|
|
|
- state.isFocus = true;
|
|
|
- }, 300);
|
|
|
- }}
|
|
|
- onBlur={() => {
|
|
|
- setTimeout(() => {
|
|
|
- state.isFocus = false;
|
|
|
- }, 300);
|
|
|
}}
|
|
|
onSearch={(val: any) => {
|
|
|
if (state.tabActive === 'RECOMMEND') {
|
|
|
@@ -592,81 +592,92 @@ export default defineComponent({
|
|
|
onSearch();
|
|
|
}}></MSearch>
|
|
|
</MSticky>
|
|
|
- <List
|
|
|
- loading={state.loading}
|
|
|
- finished={state.finished}
|
|
|
- finishedText=" "
|
|
|
- onLoad={() => {
|
|
|
- if(!state.tabActive) {
|
|
|
- getMusicList()
|
|
|
- }
|
|
|
- }}
|
|
|
- immediateCheck={false}>
|
|
|
- {state.musics.length > 0 && (
|
|
|
- <div class={styles.musicListSection}>
|
|
|
- <div class={styles.musicList}>
|
|
|
- {state.musics.map((item: any) => (
|
|
|
- <Cell
|
|
|
- class={styles.musicItem}
|
|
|
- border={false}
|
|
|
- center
|
|
|
- onClick={() => onDetail(item)}>
|
|
|
- {{
|
|
|
- icon: () => (
|
|
|
- <div class={styles.musicImg}>
|
|
|
- <i
|
|
|
- class={[
|
|
|
- styles.iconType,
|
|
|
- styles[item.paymentType]
|
|
|
- ]}></i>
|
|
|
- <Image class={styles.musicImg} src={item.titleImg} />
|
|
|
- </div>
|
|
|
- ),
|
|
|
- title: () => (
|
|
|
- <div class={styles.musicContnet}>
|
|
|
- <h2>{item.musicSheetName}</h2>
|
|
|
- <div class={styles.allStatus}>
|
|
|
- <span class={styles.hotNum}>
|
|
|
- <img src={iconFire} class={styles.iconFire} />
|
|
|
- {formatUsedNum(item.usedNum)}
|
|
|
- </span>
|
|
|
- {item.audioPlayTypes?.includes('SING') && (
|
|
|
- <span
|
|
|
- class={[styles.iconPlayType, styles.iconSing]}>
|
|
|
- 演唱
|
|
|
- </span>
|
|
|
- )}
|
|
|
- {item.audioPlayTypes?.includes('PLAY') && (
|
|
|
- <span
|
|
|
- class={[styles.iconPlayType, styles.iconPlay]}>
|
|
|
- 演奏
|
|
|
+ <div style="height: calc(100vh - var(--header-height)); overflow-x: hidden; overflow-y: auto;">
|
|
|
+ <List
|
|
|
+ loading={state.loading}
|
|
|
+ finished={state.finished}
|
|
|
+ finishedText=" "
|
|
|
+ onLoad={() => {
|
|
|
+ if (!state.tabActive) {
|
|
|
+ getMusicList();
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ immediateCheck={false}>
|
|
|
+ {state.musics.length > 0 && (
|
|
|
+ <div class={styles.musicListSection}>
|
|
|
+ <div class={styles.musicList}>
|
|
|
+ {state.musics.map((item: any) => (
|
|
|
+ <Cell
|
|
|
+ class={styles.musicItem}
|
|
|
+ border={false}
|
|
|
+ center
|
|
|
+ onClick={() => onDetail(item)}>
|
|
|
+ {{
|
|
|
+ icon: () => (
|
|
|
+ <div class={styles.musicImg}>
|
|
|
+ <i
|
|
|
+ class={[
|
|
|
+ styles.iconType,
|
|
|
+ styles[item.paymentType]
|
|
|
+ ]}></i>
|
|
|
+ <Image
|
|
|
+ class={styles.musicImg}
|
|
|
+ src={item.titleImg}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ title: () => (
|
|
|
+ <div class={styles.musicContnet}>
|
|
|
+ <h2>{item.musicSheetName}</h2>
|
|
|
+ <div class={styles.allStatus}>
|
|
|
+ <span class={styles.hotNum}>
|
|
|
+ <img src={iconFire} class={styles.iconFire} />
|
|
|
+ {formatUsedNum(item.usedNum)}
|
|
|
</span>
|
|
|
- )}
|
|
|
-
|
|
|
- {item.composer && (
|
|
|
- <p>
|
|
|
- {item.composer}
|
|
|
- </p>
|
|
|
- )}
|
|
|
+ {item.audioPlayTypes?.includes('SING') && (
|
|
|
+ <span
|
|
|
+ class={[
|
|
|
+ styles.iconPlayType,
|
|
|
+ styles.iconSing
|
|
|
+ ]}>
|
|
|
+ 演唱
|
|
|
+ </span>
|
|
|
+ )}
|
|
|
+ {item.audioPlayTypes?.includes('PLAY') && (
|
|
|
+ <span
|
|
|
+ class={[
|
|
|
+ styles.iconPlayType,
|
|
|
+ styles.iconPlay
|
|
|
+ ]}>
|
|
|
+ 演奏
|
|
|
+ </span>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {item.composer && <p>{item.composer}</p>}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- ),
|
|
|
- 'right-icon': () => (
|
|
|
- <Image class={styles.musicPlayIcon} src={iconPlayer} />
|
|
|
- )
|
|
|
- }}
|
|
|
- </Cell>
|
|
|
- ))}
|
|
|
+ ),
|
|
|
+ 'right-icon': () => (
|
|
|
+ <Image
|
|
|
+ class={styles.musicPlayIcon}
|
|
|
+ src={iconPlayer}
|
|
|
+ />
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Cell>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </List>
|
|
|
+ )}
|
|
|
+ {!state.loading && state.musics.length === 0 && (
|
|
|
+ <div class={styles.emptyGroup}>
|
|
|
+ <MEmpty description="暂无曲谱" />
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </List>
|
|
|
+ </div>
|
|
|
|
|
|
- {!state.loading && state.musics.length === 0 && (
|
|
|
- <div class={styles.emptyGroup}>
|
|
|
- <MEmpty description="暂无曲谱" />
|
|
|
- </div>
|
|
|
- )}
|
|
|
+
|
|
|
|
|
|
<Teleport to={'body'}>
|
|
|
<div class={[styles.searchBodySection]}>
|
|
|
@@ -755,8 +766,11 @@ export default defineComponent({
|
|
|
onClick={() => {
|
|
|
state.isTagExpand = true;
|
|
|
nextTick(() => {
|
|
|
- contentRef.value?.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
|
|
- })
|
|
|
+ contentRef.value?.scrollIntoView({
|
|
|
+ behavior: 'smooth',
|
|
|
+ block: 'start'
|
|
|
+ });
|
|
|
+ });
|
|
|
}}>
|
|
|
更多 <Icon name="arrow-down" />
|
|
|
</div>
|
