colexiu-project/src/views/home/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 titleDot from './images/titleDot.png'
import hotSearch from '@/components/hotSearch'
import banner from '@/components/banner'
import moreArrow from './images/moreArrow.png'
import searchIcon from './images/search.png'
import request from '@/helpers/request'
import tagItem from '@/components/tagItem'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
import { useRouter } from 'vue-router'
import { ElInput } from 'element-plus'
export default defineComponent({
  name: 'home',
  components: {
    albumItem,
    videoDetailItem,
    musicLIstItem,
    hotSearch,
    banner,
    tagItem
  },
  setup() {
    const state = reactive({
      albumList: [],
      videoList: [],
      search: '',
      tagTree: []
    })
    const router = useRouter()
    const getAlbumList = async () => {
      try {
        const res = await request.post('/api-website/open/music/album/list', {
          data: {
            albumStatus: 1,
            page: 1,
            rows: 8
          }
        })

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

        state.videoList = res.data.rows
      } catch (e) {
        console.log(e)
      }
    }
    const gotoSearch = (val: string,type:any) => {
      router.push({ name: 'searchdetail', params: { search: val,type } })
    }
    const getTagTree = async () => {
      try {
        const res = await request.get('/api-website/open/MusicTag/tree', {})
        state.tagTree = res.data

        // state.hotList = res.data
      } catch (e) {
        console.log(e)
      }
    }
    const gotoVideoList = () => {
      router.push({ path: '/videoDetailList',  })
    }
    //
    onMounted(() => {
      getAlbumList()
      getVideoList()
      getTagTree()
    })
    return () => (
      <div>
        <banner />
        <div class="bg-white">
          <div class={styles.w1200}>
            <div class={styles.section}>
              {/* <hotSearch
                searchType="MUSIC"
                onHotTag={(val: string) => {
                  gotoSearch(val)
                }}
              ></hotSearch> */}
              <div class={styles.albumMoudel}>
                <div class={styles.albumWrap}>
                  <div class={[styles.titleWrap, styles.hotAlbum]}>
                    <div class={[styles.titleWrapLeft]}>
                      <h4>热门专辑</h4>
                      <img src={titleDot} class={styles.dotImg} alt="" />
                    </div>
                    <div class={[styles.titleWrapMore]}    onClick={() => gotoSearch('','album')}>
                      <span>更多</span>
                      <img src={moreArrow} alt="" />
                    </div>
                  </div>
                  <div class={styles.albumList}>
                    {state.albumList.map(item => {
                      return <albumItem detail={item}></albumItem>
                    })}
                  </div>
                  <div class={styles.line}></div>
                </div>
                <div class={styles.albumSearch}>
                  <div class={styles.inputWrap}>
                    <img
                      src={searchIcon}
                      class={styles.searchIcon}
                      onClick={()=>gotoSearch(state.search,'music')}
                      alt=""
                    />
                    <ElInput
                      placeholder="搜索你想要的曲目"
                      v-model={state.search}
                      //  onKeyup={(e:any) => {
                      //   if (e.keyCode === 13) {
                      //     gotoSearch(state.search,'music')
                      //   }
                      // }}
                      // onkeyup= { gotoSearch(state.search,'music')}
                    ></ElInput>
                  </div>
                  <div class={styles.chioseLineWrap}>
                    {state.tagTree.map((tree: any) => {
                      return (
                        <div class={styles.chioseRow}>
                          <p>{tree.name}：</p>
                          <div class={[styles.chioseTagWrap, 'chioseTagWrap']}>
                            {tree.children.map((tag: any) => {
                              return (
                                //  effect={isChiose(tag)}

                                <tagItem
                                  class={styles.tags}
                                  title={tag.name}
                                  onSearchTag={() => {
                                    gotoSearch(tag.name,'')
                                  }}
                                >
                                  {/* {} */}
                                </tagItem>
                              )
                            })}
                          </div>
                        </div>
                      )
                    })}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bg-white">
          <div class={styles.w1200}>
            <div class={[styles.section,styles.pt41]}>
              <div class={[styles.titleWrap]}>
                {/* <img src={titleDot} class={styles.dotImg} alt="" /> */}
                <div class={[styles.titleWrapLeft]}>
                  <h4>热门专辑</h4>
                  <img src={titleDot} class={styles.dotImg} alt="" />
                </div>
                <div class={[styles.titleWrapMore]} onClick={()=>gotoVideoList()}>
                  <span>更多</span>
                  <img src={moreArrow} alt="" />
                </div>
              </div>
              <div class={styles.videoList}>
                {state.videoList.map(item => {
                  return <videoDetailItem detail={item}></videoDetailItem>
                })}
              </div>
            </div>

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