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

// import { PaperClipIcon } from '@heroicons/vue/solid'
import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
import arrow from '@/components/musicLIstItem/images/arrow.png'
import styles from './index.module.less'
import albumItem from '@/components/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 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
import { useRoute,useRouter } from 'vue-router'
export default defineComponent({
  name: 'musicLibrary',
  components: {
    albumItem,
    videoDetailItem,
    musicLIstItem,
    hotSearch,

    silder,
    searchInput,
    banner
  },
  setup() {
    const state = reactive({

      albumList: [],
      musicList: []
    })
    const router = useRouter()
    const getAlbumList = async () => {
      try {
        const res = await request.post('/api-website/open/music/album/list', {
          data: {
            albumStatus: 1,
            page: 1,
            rows: 10
          }
        })

        state.albumList = res.data.rows
      } catch (e) {
        console.log(e)
      }
    }
    const getMusicList = async () => {
      try {
        const res = await request.post('/api-website/open/music/sheet/list', {
          data: {
            albumStatus: 'PASS',
            page: 1,
            rows: 5,
            state: 1
          }
        })

        state.musicList = res.data.rows
      } catch (e) {
        console.log(e)
      }
    }
    const gotoSearch = (val:string|object)=>{
      if(typeof val == 'string'){
        router.push({path:'/searchdetail',query:{search:val}})
      }else{
        router.push({path:'/searchdetail',query:{...val}})
      }

    }
    const gotoMusic=()=>{
      router.push({path:'/searchdetail',query:{type:'music'}})
    }
    onMounted(() => {
      getAlbumList()
      getMusicList()
    })
    return () => (
      <div>
        <banner></banner>
        <div class="bg-white">
          <div class={styles.w1200}>
            <div class={styles.section}>
              {/* <div class={styles.titleWrap}>
                <img src={titleDot} class={styles.dotImg} alt="" />
                <h4>热门专辑</h4>
                <img src={titleDot} class={styles.dotImg} alt="" />
              </div> */}
              <searchInput isWhile={false} onStartSearch={(val:any)=>gotoSearch(val)}></searchInput>
              <hotSearch onHotTag={(val:string)=>{gotoSearch(val)}} type={''}></hotSearch>
              <h5 class={styles.hotAlbum}>热门专辑</h5>
              <div class={styles.albumList}>
                {state.albumList.map(item => {
                  return <albumItem detail={item}></albumItem>
                })}
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class={styles.w1200}>
            <div class={styles.section}>
              <div class={styles.videoNav}>
                <h5>热门乐谱</h5>
                <div class={styles.wrapRight} onClick={()=>gotoMusic()}>
                  <span>更多</span>
                  <img class={styles.arrow} src={arrow} alt="" />
                </div>
              </div>
              <div class={styles.musicList}>
                {state.musicList.map(item => {
                  return <musicLIstItem item={item}></musicLIstItem>
                })}
              </div>
            </div>

            {/* <musicLIstItem></musicLIstItem> */}
          </div>
        </div>
        <silder></silder>
      </div>
    )
  }
})