|
@@ -11,23 +11,43 @@ import TheSearch from '@/components/TheSearch';
|
|
|
import { NButton, NImage, NSpace } from 'naive-ui';
|
|
|
import { useRouter } from 'vue-router';
|
|
|
import mock from './mock.json';
|
|
|
+import { api_musicTagTree } from './api';
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'XiaokuAi',
|
|
|
setup() {
|
|
|
const router = useRouter();
|
|
|
const data = reactive({
|
|
|
- tags: [
|
|
|
- { name: '全部', id: '0' },
|
|
|
- { name: '人教版', id: '1' },
|
|
|
- { name: '人音版', id: '2' }
|
|
|
- ],
|
|
|
- tagIndex: '0',
|
|
|
+ tags: [] as any[],
|
|
|
+ tagIndex: 0,
|
|
|
+ tagActive: {} as any,
|
|
|
list: mock.list
|
|
|
});
|
|
|
- const _list = computed(() => {
|
|
|
- if (data.tagIndex === '0') return data.list;
|
|
|
- return data.list.filter(item => data.tagIndex === item.category);
|
|
|
+ const getTags = async () => {
|
|
|
+ const res = await api_musicTagTree();
|
|
|
+ if (Array.isArray(res?.data)) {
|
|
|
+ data.tags = res.data;
|
|
|
+ const list = renderTag(res.data);
|
|
|
+ console.log(list);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 递归渲染标签
|
|
|
+ const renderTag = (_data: any[]): any => {
|
|
|
+ const item = {
|
|
|
+ columnName: _data[0].columnName,
|
|
|
+ list: _data.map((item: any) => {
|
|
|
+ return {
|
|
|
+ name: item.name,
|
|
|
+ list: Array.isArray(item.children) ? renderTag(item.children) : []
|
|
|
+ };
|
|
|
+ })
|
|
|
+ };
|
|
|
+
|
|
|
+ return item;
|
|
|
+ };
|
|
|
+ onMounted(() => {
|
|
|
+ getTags();
|
|
|
});
|
|
|
return () => (
|
|
|
<div class={styles.container}>
|
|
@@ -36,57 +56,26 @@ export default defineComponent({
|
|
|
<div class={styles.tags}>
|
|
|
<NSpace size={[24, 12]}>
|
|
|
<NButton quaternary disabled>
|
|
|
- 类型
|
|
|
- </NButton>
|
|
|
- {data.tags.map((item, index) => (
|
|
|
- <NButton
|
|
|
- round
|
|
|
- secondary={data.tagIndex !== item.id}
|
|
|
- type={data.tagIndex === item.id ? 'primary' : 'default'}
|
|
|
- class={[
|
|
|
- styles.tag,
|
|
|
- data.tagIndex === item.id ? styles.active : ''
|
|
|
- ]}
|
|
|
- onClick={() => (data.tagIndex = item.id)}>
|
|
|
- {item.name}
|
|
|
- </NButton>
|
|
|
- ))}
|
|
|
- </NSpace>
|
|
|
- </div>
|
|
|
- <div class={styles.tags}>
|
|
|
- <NSpace size={[24, 12]}>
|
|
|
- <NButton quaternary disabled>
|
|
|
- 学段
|
|
|
- </NButton>
|
|
|
- <NButton round secondary type={'default'}>
|
|
|
- 小学
|
|
|
- </NButton>
|
|
|
- <NButton round secondary type={'default'}>
|
|
|
- 初中
|
|
|
+ {data.tags[0]?.columnName}
|
|
|
</NButton>
|
|
|
- <NButton round secondary type={'default'}>
|
|
|
- 高中
|
|
|
- </NButton>
|
|
|
- </NSpace>
|
|
|
- </div>
|
|
|
- <div class={styles.tags}>
|
|
|
- <NSpace size={[24, 12]}>
|
|
|
- <NButton quaternary disabled>
|
|
|
- 年级
|
|
|
- </NButton>
|
|
|
- {['一', '二', '三', '四', '五', '六'].map((item, index) => (
|
|
|
- <NButton secondary round>
|
|
|
- {item}年级
|
|
|
- </NButton>
|
|
|
- ))}
|
|
|
+
|
|
|
+ {data.tags.map((item: any, index: number) => {
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <NButton round secondary type={'default'}>
|
|
|
+ {item.name}
|
|
|
+ </NButton>
|
|
|
+ </>
|
|
|
+ );
|
|
|
+ })}
|
|
|
</NSpace>
|
|
|
</div>
|
|
|
</div>
|
|
|
<TheSearch round />
|
|
|
</div>
|
|
|
- <div class={styles.content}>
|
|
|
+ {/* <div class={styles.content}>
|
|
|
<NSpace size={[50, 40]}>
|
|
|
- {_list.value.map((item, index) => {
|
|
|
+ {data.list.map((item, index) => {
|
|
|
return (
|
|
|
<div
|
|
|
class={styles.item}
|
|
@@ -111,7 +100,7 @@ export default defineComponent({
|
|
|
);
|
|
|
})}
|
|
|
</NSpace>
|
|
|
- </div>
|
|
|
+ </div> */}
|
|
|
</div>
|
|
|
);
|
|
|
}
|