|  | @@ -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>
 | 
	
		
			
				|  |  |      );
 | 
	
		
			
				|  |  |    }
 |