colexiu-project/src/views/musicLibrary/index.tsx

// import { PaperClipIcon } from '@heroicons/vue/solid'
import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
import arrow from '@/views/home/images/moreArrow.png'
import styles from './index.module.less'
import albumItem from './modals/albumItem'
import videoDetailItem from '@/components/videoDetailItem'
import musicLIstItem from '@/components/musicLIstItem'
import hotSearch from '@/components/hotSearch'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
import request from '@/helpers/request'
import silder from '@/components/silder'
import searchInput from '@/components/searchInput'
import banner from '@/components/banner'
import titleDot from '@/views/home/images/titleDot.png'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
import pagination from '@/components/pagination'
import { useRoute, useRouter } from 'vue-router'
import { state as baseState } from '@/state'
import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
import { getUserType } from '@/helpers/utils'
import ColEmpty from '@/components/col-empty'
export default defineComponent({
  name: 'musicLibrary',
  components: {
    albumItem,
    videoDetailItem,
    musicLIstItem,
    hotSearch,
    silder,
    searchInput,
    pagination,
    ColEmpty,
    banner
  },
  setup() {
    const route = useRoute()
    let subjectId = 0
    const subjectIds = baseState.user.data?.subjectId || ''
    if (subjectIds) {
      subjectId = Number(subjectIds.split(',')[0])
    }
    // 判断是否在默认的声部
    const subjects: any = useSubjectId(SubjectEnum.SEARCH)
    subjectId = subjects.id || subjectId
    const state = reactive({
      albumList: [],
      musicList: [],
      tagTree: [],
      hideSearch: true,
      isshowData: false,
      pageInfo: {
        // 分页规则
        limit: 20, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [5, 10, 20, 40, 50] // 选择限制显示条数
      },
      searchs: {
        musicTagIds: route.query.musicTagIds || '',
        search: route.query.search || '',
        subject: subjectId || ''
      }
    })

    const getMusicList = async () => {
      try {
        const { search, subject, ...more } = state.searchs
        const res = await request.post('/api-website/open/music/sheet/list', {
          data: {
            auditStatus: 'PASS',
            ...more,
            idAndName: search,
            subjectIds: subject,
            page: state.pageInfo.page,
            rows: state.pageInfo.limit,
            state: 1
          }
        })

        // state.musicList = res.data.rows
        state.musicList = res.data.rows.map(n => {
          if (typeof n.paymentType === 'string')
            n.paymentType = n.paymentType.split(',')
          return n
        })

        state.pageInfo.total = res.data.total
        if (state.pageInfo.total == 0) {
          state.isshowData = true
        } else {
          state.isshowData = false
        }
      } catch (e) {
        console.log(e)
      }
    }
    const getTagTree = async () => {
      try {
        const res = await request.get('/api-website/open/MusicTag/tree', {
          params: {
            type: 'MUSIC'
          }
        })
        const tree = res.data || []
        state.tagTree = [
          {
            name: '全部',
            id: '',
            isCheck: true
          },
          ...tree
        ] as any

        if (state.searchs.musicTagIds) {
          state.tagTree.forEach((tag: any) => {
            tag.isCheck = false
            if (tag.id == state.searchs.musicTagIds) {
              tag.isCheck = true
            }
          })
        }
      } catch (e) {
        console.log(e)
      }
    }

    const searchRust = (val: any) => {
      // const smallTag = (val || ([] as any)).filter(tag => tag < 0)
      const maxTag = (val || ([] as any)).filter(tag => tag > 0)
      state.searchs.musicTagIds = maxTag.join(',') as string
      startSearch(state.searchs)
    }

    const startSearch = (val: any) => {
      state.searchs = { ...state.searchs, ...val }
      getMusicList()
    }
    onMounted(() => {
      getTagTree()
      getMusicList()
    })
    return () => (
      <div>
        <banner></banner>
        <div class="bg-white">
          <div class={styles.w1200}>
            <div class={styles.section} style="padding-bottom: 0;">
              <div class={styles.tagList}>
                <div
                  class={[styles.tagContainer, state.hideSearch && styles.hide]}
                >
                  {state.tagTree.map((tag: any) => (
                    <span
                      class={[styles.tagItem, tag.isCheck && styles.active]}
                      onClick={() => {
                        state.tagTree.forEach((item: any) => {
                          item.isCheck = false
                        })
                        tag.isCheck = true

                        startSearch({ musicTagIds: tag.id })
                      }}
                    >
                      {tag.name}
                    </span>
                  ))}
                </div>
                <div
                  class={styles.wrapRight}
                  onClick={() => {
                    state.hideSearch = !state.hideSearch
                  }}
                >
                  <span>{state.hideSearch ? '更多' : '收起'}</span>
                  <img
                    class={[styles.arrow, !state.hideSearch && styles.active]}
                    src={arrow}
                    alt=""
                  />
                </div>
              </div>

              <searchInput
                isWhile={false}
                type="search"
                showSearch
                placeholder="搜索你想练习的专辑"
                searchVal={{ ...state.searchs }}
                onStartSearch={(val: any) => {
                  state.pageInfo.page = 1
                  startSearch(val)
                }}
              ></searchInput>
              <div class={styles.hotSearch}>
                <hotSearch
                  onSearchRust={(val: any) => searchRust(val)}
                  onHotTag={(val: string) => {
                    state.searchs.search = val
                    getMusicList()
                  }}
                  type={''}
                  isChiose={true}
                ></hotSearch>
              </div>

              {state.musicList && state.musicList.length > 0 && (
                <>
                  <div
                    class={[styles.section, styles.pb40]}
                    style="padding-top: 0"
                  >
                    <div class={styles.musicList}>
                      {state.musicList.map(item => {
                        return <musicLIstItem item={item}></musicLIstItem>
                      })}
                    </div>
                  </div>
                </>
              )}
              {state.isshowData && <ColEmpty></ColEmpty>}

              <pagination
                total={state.pageInfo.total}
                v-model:page={state.pageInfo.page}
                v-model:limit={state.pageInfo.limit}
                pageSizes={state.pageInfo.page_size}
                pagination={getMusicList}
              />
            </div>
          </div>
        </div>
        <silder></silder>
      </div>
    )
  }
})