|
|
@@ -2,104 +2,108 @@ import { defineComponent, onMounted, reactive, watch } from "vue";
|
|
|
import styles from "./index.module.less";
|
|
|
import { api_musicSheetPage } from "../../api";
|
|
|
import state, { togglePlay } from "/src/state";
|
|
|
-import { List } from "vant";
|
|
|
+import { List, Image } from "vant";
|
|
|
import { postMessage } from "/src/utils/native-message";
|
|
|
import qs from "query-string";
|
|
|
|
|
|
export default defineComponent({
|
|
|
- name: "TheMusicList-list",
|
|
|
- props: {
|
|
|
- recentFlag: {
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
- },
|
|
|
- },
|
|
|
- setup(props) {
|
|
|
- const forms = reactive({
|
|
|
- page: 1,
|
|
|
- rows: 20,
|
|
|
- musicSheetCategoriesId: state.bizMusicCategoryId,
|
|
|
- recentFlag: props.recentFlag ? true : null,
|
|
|
- excludeMusicId: props.recentFlag ? null : state.examSongId,
|
|
|
- });
|
|
|
- const data = reactive({
|
|
|
- list: [] as any[],
|
|
|
- finished: false,
|
|
|
- loading: false,
|
|
|
- hasNext: true,
|
|
|
- });
|
|
|
- const getList = async () => {
|
|
|
- if (!data.hasNext) return
|
|
|
- data.loading = true;
|
|
|
- try {
|
|
|
- const res = await api_musicSheetPage({
|
|
|
- ...forms,
|
|
|
- });
|
|
|
- if (res?.code === 200 && Array.isArray(res.data?.rows)) {
|
|
|
- data.list = [...data.list, ...res.data.rows];
|
|
|
- }
|
|
|
- data.finished = res.data?.rows?.length < forms.rows;
|
|
|
- data.hasNext = res.data?.total > data.list.length
|
|
|
- } catch (error) {
|
|
|
- console.log(error);
|
|
|
- }
|
|
|
+ name: "TheMusicList-list",
|
|
|
+ props: {
|
|
|
+ recentFlag: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ setup(props) {
|
|
|
+ const forms = reactive({
|
|
|
+ page: 1,
|
|
|
+ rows: 20,
|
|
|
+ musicSheetCategoriesId: state.bizMusicCategoryId,
|
|
|
+ recentFlag: props.recentFlag ? true : null,
|
|
|
+ excludeMusicId: props.recentFlag ? null : state.examSongId,
|
|
|
+ });
|
|
|
+ const data = reactive({
|
|
|
+ list: [] as any[],
|
|
|
+ finished: false,
|
|
|
+ loading: false,
|
|
|
+ hasNext: true,
|
|
|
+ });
|
|
|
+ const getList = async () => {
|
|
|
+ if (!data.hasNext) return;
|
|
|
+ data.loading = true;
|
|
|
+ try {
|
|
|
+ const res = await api_musicSheetPage({
|
|
|
+ ...forms,
|
|
|
+ });
|
|
|
+ if (res?.code === 200 && Array.isArray(res.data?.rows)) {
|
|
|
+ data.list = [...data.list, ...res.data.rows];
|
|
|
+ }
|
|
|
+ data.finished = res.data?.rows?.length < forms.rows;
|
|
|
+ data.hasNext = res.data?.total > data.list.length;
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error);
|
|
|
+ }
|
|
|
|
|
|
- data.loading = false;
|
|
|
- };
|
|
|
- watch(
|
|
|
- () => props.recentFlag,
|
|
|
- () => {
|
|
|
- data.hasNext = true
|
|
|
- }
|
|
|
- );
|
|
|
- onMounted(() => {
|
|
|
- getList();
|
|
|
- });
|
|
|
+ data.loading = false;
|
|
|
+ };
|
|
|
+ watch(
|
|
|
+ () => props.recentFlag,
|
|
|
+ () => {
|
|
|
+ data.hasNext = true;
|
|
|
+ }
|
|
|
+ );
|
|
|
+ onMounted(() => {
|
|
|
+ getList();
|
|
|
+ });
|
|
|
|
|
|
- const openAccomapina = (item: any) => {
|
|
|
- if (item.id === state.examSongId) return;
|
|
|
- // 暂停播放
|
|
|
- togglePlay("paused");
|
|
|
- postMessage({
|
|
|
- api: "cloudLoading",
|
|
|
- content: {
|
|
|
- show: true,
|
|
|
- type: "fullscreen",
|
|
|
- },
|
|
|
- });
|
|
|
- location.href =
|
|
|
- location.origin +
|
|
|
- location.pathname +
|
|
|
- "?" +
|
|
|
- qs.stringify({
|
|
|
- id: item.id,
|
|
|
- _t: Date.now(),
|
|
|
- });
|
|
|
- };
|
|
|
- return () => (
|
|
|
- <div class={styles.wrap}>
|
|
|
- <List
|
|
|
- loading={data.loading}
|
|
|
- finished={data.finished}
|
|
|
- immediateCheck={false}
|
|
|
- onLoad={() => {
|
|
|
- forms.page++;
|
|
|
- getList();
|
|
|
- }}
|
|
|
- >
|
|
|
- {data.list.map((item: any) => {
|
|
|
- return (
|
|
|
- <div
|
|
|
- class={[styles.item, state.examSongId == item.id && styles.itemActive]}
|
|
|
- onClick={() => openAccomapina(item)}
|
|
|
- >
|
|
|
- {item.musicSheetName}
|
|
|
- </div>
|
|
|
- );
|
|
|
- })}
|
|
|
- {!data.loading && data.list.length === 0 && <div class={styles.noData}>暂无数据</div>}
|
|
|
- </List>
|
|
|
- </div>
|
|
|
- );
|
|
|
- },
|
|
|
+ const openAccomapina = (item: any) => {
|
|
|
+ if (item.id === state.examSongId) return;
|
|
|
+ // 暂停播放
|
|
|
+ togglePlay("paused");
|
|
|
+ postMessage({
|
|
|
+ api: "cloudLoading",
|
|
|
+ content: {
|
|
|
+ show: true,
|
|
|
+ type: "fullscreen",
|
|
|
+ },
|
|
|
+ });
|
|
|
+ location.href =
|
|
|
+ location.origin +
|
|
|
+ location.pathname +
|
|
|
+ "?" +
|
|
|
+ qs.stringify({
|
|
|
+ id: item.id,
|
|
|
+ _t: Date.now(),
|
|
|
+ });
|
|
|
+ };
|
|
|
+ return () => (
|
|
|
+ <div class={styles.wrap}>
|
|
|
+ <List
|
|
|
+ loading={data.loading}
|
|
|
+ finished={data.finished}
|
|
|
+ immediateCheck={false}
|
|
|
+ onLoad={() => {
|
|
|
+ forms.page++;
|
|
|
+ getList();
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {data.list.map((item: any) => {
|
|
|
+ return (
|
|
|
+ <div class={[styles.item, state.examSongId == item.id && styles.itemActive]} onClick={() => openAccomapina(item)}>
|
|
|
+ <div class={styles.titleImg}>
|
|
|
+ <i class={[styles.iconType, styles[item.paymentType]]}></i>
|
|
|
+ <Image src={item.titleImg} class={styles.img} />
|
|
|
+ </div>
|
|
|
+ <div class={styles.content}>
|
|
|
+ <p class={styles.name}>{item.musicSheetName}</p>
|
|
|
+ {item.composer && <p class={styles.author}>{item.composer}</p>}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ {!data.loading && data.list.length === 0 && <div class={styles.noData}>暂无数据</div>}
|
|
|
+ </List>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ },
|
|
|
});
|
