h5-colexiu/src/student/music/search/index.tsx

import { Sticky, Cell, Tag, Icon, Popup, Tabs, Tab } from 'vant'
import { defineComponent, onMounted, ref } from 'vue'
import Search from '@/components/col-search'
import { useLocalStorage } from '@vueuse/core'
import AlbumItem from '../album/item'
import AlbumList from '../album'
import MusicItem from '../list/item'
import MusicList from '../list'
import styles from './index.module.less'
import classNames from 'classnames'
import request from '@/helpers/request'
import SelectTag from './select-tag'
import ColResult from '@/components/col-result'

export default defineComponent({
  name: 'MusicSearch',
  setup() {
    const loading = ref(false)
    const keyword = ref('')
    const tagids = ref('')
    const albumRows = ref([])
    const sheetRows = ref([])
    const tagVisibility = ref(false)
    const words = useLocalStorage<string[]>('music-search', [])
    const activeTab = ref('album')
    const FetchList = async () => {
      // loading.value = true
      // try {
      //   const res = await request.post(
      //     '/api-student/music/sheet/albumAndSheetList',
      //     {
      //       data: {
      //         albumRow: 3,
      //         sheetRow: 10,
      //         search: keyword.value,
      //         musicTagIds: tagids.value
      //       }
      //     }
      //   )
      //   albumRows.value = res.data.musicAlbumList.rows
      //   sheetRows.value = res.data.musicSheetList.rows
      // } catch (error) {}
      // loading.value = false
    }
    const onSearch = val => {
      keyword.value = val
      const indexOf = words.value.indexOf(val)
      if (indexOf > -1) {
        words.value.splice(indexOf, 1)
      }
      if (val) {
        words.value.unshift(val)
        words.value.length = Math.min(words.value.length, 5)
      }
      const activeRef = activeTab.value === 'album' ? albumList : musicList
      ;(activeRef.value as any).onSearch?.(val)
      // FetchList()
    }

    const onComfirm = tags => {
      const data = Object.values(tags).flat().filter(Boolean).join(',')
      tagids.value = data
      // FetchList()
      const activeRef = activeTab.value === 'album' ? albumList : musicList
      ;(activeRef.value as any).onComfirm?.(tags)
      tagVisibility.value = false
    }

    const albumList = ref(null)
    const musicList = ref(null)

    onMounted(() => {
      const activeRef = activeTab.value === 'album' ? albumList : musicList
      ;(activeRef.value as any).onSearch?.('')
    })
    return () => {
      return (
        <div class={styles.search}>
          <Sticky class={styles.sticky}>
            <Search
              modelValue={keyword.value}
              showAction
              autofocus
              onSearch={onSearch}
              onFilter={() => (tagVisibility.value = true)}
              filterDot={!!tagids.value}
            />
            <Tabs
              color="var(--van-primary)"
              background="transparent"
              lineWidth={20}
              shrink
              v-model:active={activeTab.value}
              onChange={val => (activeTab.value = val)}
            >
              <Tab title="专辑" name="album"></Tab>
              <Tab title="单曲" name="songe"></Tab>
            </Tabs>
          </Sticky>
          {words.value.length > 0 && (
            <div class={classNames(styles.keywords, 'van-hairline--bottom')}>
              <div class={styles.content}>
                {words.value.map(item => (
                  <Tag
                    round
                    class={styles.searchKeyword}
                    key={item}
                    onClick={() => onSearch(item)}
                  >
                    {item}
                  </Tag>
                ))}
              </div>
              <Icon
                class={styles.remove}
                name="delete-o"
                onClick={() => (words.value = [])}
              />
            </div>
          )}

          {/* {albumRows.value.length > 0 && (
            <>
              <Cell
                class={styles.title}
                title="专辑"
                is-link
                to={{
                  path: '/music-album',
                  query: {
                    search: keyword.value,
                    tagids: tagids.value
                  }
                }}
                value="更多"
              />
              {albumRows.value.map(item => (
                <AlbumItem data={item} />
              ))}
            </>
          )} */}
          {/* <Cell
            class={styles.title}
            title="曲谱"
            is-link
            to={{
              path: '/music-list',
              query: {
                search: keyword.value,
                tagids: tagids.value
              }
            }}
            value="更多"
          /> */}
          {activeTab.value === 'album' ? (
            <AlbumList
              hideSearch
              ref={albumList}
              defauleParams={{
                search: keyword.value,
                tagids: tagids.value
              }}
            />
          ) : (
            <MusicList
              hideSearch
              ref={musicList}
              defauleParams={{
                search: keyword.value,
                tagids: tagids.value
              }}
            />
          )}
          {/* {sheetRows.value.map(item => (
            <MusicItem data={item} />
          ))} */}
          {/* {!loading.value && sheetRows.value.length === 0 && (
            <ColResult
              tips={activeTab.value === 'album' ? '暂无专辑' : '暂无曲目'}
              classImgSize="SMALL"
              btnStatus={false}
            />
          )} */}
          <Popup
            show={tagVisibility.value}
            round
            closeable
            position="bottom"
            style={{ height: '60%' }}
            teleport="body"
            onUpdate:show={val => (tagVisibility.value = val)}
          >
            <SelectTag onComfirm={onComfirm} onCancel={() => {}} />
          </Popup>
        </div>
      )
    }
  }
})