colexiu-project/src/views/musicLibrary/modals/searchAlbum.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 request from '@/helpers/request'
import silder from '@/components/silder'
import searchInput from '@/components/searchInput'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
import { ElTabPane, ElTabs } from 'element-plus'
export default defineComponent({
  name: 'searchdetail',
  components: {
    hotSearch,
    silder,
    searchInput,
    albumItem
  },
  setup() {
    const state = reactive({
      albumList: [],
      musicList: []
    })

    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)
    //   }
    // }

    onMounted(() => {
      getAlbumList()
      // getMusicList()
    })
    return () => (
      <div>
        <div >
          <div class={styles.w1200}>
            <div class={styles.section}>
            <div class={styles.albumList}>
                {state.albumList.map(item=>{
                  return  <albumItem detail={item}></albumItem>
                })}


              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
})