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

import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
import hold from '@/components/albumItem/images/hold.png'
import start from '@/components/albumItem/images/start.png'
import lineStart from '@/components/albumItem/images/lineStart.png'
import smallPan from '@/components/albumItem/images/pan.png'
import classes from './index.module.less'
import arrow from '@/components/musicLIstItem/images/arrow.png'
import hot from '@/components/hotSearch/images/hot.png'
import pan from './images/pan.png'
import somePan from './images/somePan.png'
import tagItem from '@/components/tagItem'
import pagination from '@/components/pagination'
import albumItem from './modals/albumItem'
import request from '@/helpers/request'
import musicLIstItem from '@/components/musicLIstItem'
import { getUserInfo, getUserType, getAuth } from '@/helpers/utils'
import ColEmpty from '@/components/col-empty'
import { useRoute, useRouter } from 'vue-router'
// import start from '@/common/images/start.png'
// import lineStart from '@/common/images/lineStart.png'
import { watch } from 'fs'
export default defineComponent({
  name: 'albumDetail',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  components: { tagItem, pagination, albumItem, musicLIstItem, ColEmpty },
  setup(props, conent) {
    const state = reactive({
      title: props.title,
      hotList: [],
      hotTagList: [],
      relatedMusicAlbum: [],
      id: '',
      musicList: [],
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      details: {} as any,
      userType: '',
      isshowData: false
    })
    const route = useRoute()
    const router = useRouter()
    const getList = async () => {
      try {
        const res = await request.post('/api-website/open/music/album/detail', {
          data: {
            id: state.id,
            page: state.pageInfo.page,
            rows: state.pageInfo.limit
          }
        })
        state.details = res.data
        state.pageInfo.total = res.data.musicSheetList.total
        if (state.pageInfo.total == 0) {
          state.isshowData = true
        } else {
          state.isshowData = false
        }
        state.musicList = res.data.musicSheetList.rows
        state.hotList = res.data.hotMusicAlbum
        state.hotTagList = res.data.musicTagNames.split(',') || []
        state.relatedMusicAlbum = res.data.relatedMusicAlbum
      } catch (e) {
        console.log(e)
      }
    }

    const favoriteAlbum = async () => {
      try {
        const res = await request.post(
          `/api-website/music/album/favorite/${state.id}`,
          {}
        )
        getList()
      } catch (e) {
        console.log(e)
      }
    }
    onMounted(() => {
      if (route.query.id) {
        state.id = route.query.id as string
      }
      state.userType = getUserType()
      getList()
    })
    const getDetail = (id: number | string) => {
      state.id = id as string
      getList()
    }

    const gotoMore = () => {
      router.push({ path: '/searchdetail' })
    }
    return () => (
      <>
        <div class={[classes.wrap]}>
          <div class={classes.wall}></div>
          <div class={[classes.w1200]}>
            <div class={classes.left}>
              <div class={classes.albumInfo}>
                <div class={classes.albumTitle}>
                  <h2>{state.details.albumName}</h2>
                  <img src={state.details.favorite ? lineStart : start} alt="" />
                </div>

                <div class={classes.albumInfoTop}>
                  <div class={classes.albumInfoTopImg}>
                    <img
                      src={
                        state.details.albumCoverUrl
                          ? state.details.albumCoverUrl
                          : hold
                      }
                      alt=""
                      class={classes.albumCover}
                    />
                    {/* <img src={pan} alt="" class={classes.pan} /> */}
                  </div>
                  <div class={classes.albumInfoTopConent}>
                    <p>{state.details.albumDesc}</p>
                    <div class={classes.tagWrap}>
                      {state.hotTagList.map((item: any) => {
                        return <tagItem title={item}></tagItem>
                      })}
                    </div>
                  </div>
                </div>
                <div class={classes.albumInfoBottom}>
                  <div class={classes.albumInfoLeft}>
                    <div class={classes.itemBottomL}>
                      <img src={smallPan} alt="" />
                      <span>{state.details.musicSheetCount}首</span>
                    </div>
                    <div class={classes.itemBottomR}>
                      <img src={start} alt="" />
                      <span>{state.details.favorite}人收藏</span>
                    </div>
                  </div>
                  {state.userType == 'STUDENT' ? (
                    <div class={classes.albumInfoRight}>
                      <div
                        class={classes.itemBottomR}
                        onClick={() => favoriteAlbum()}
                      >
                        <img
                          src={state.details.favorite ? lineStart : start}
                          alt=""
                        />
                        <span>
                          {state.details.favorite ? '已收藏' : '收藏'}
                        </span>
                      </div>
                    </div>
                  ) : null}
                </div>
              </div>
              <div class={classes.musicWrap}>
                <div class={classes.title}>
                  <div class={classes.dot}></div>
                  <span>曲目列表</span>
                </div>
                <div>
                  {state.musicList.map(item => {
                    return <musicLIstItem item={item}></musicLIstItem>
                  })}
                  {state.isshowData && <ColEmpty></ColEmpty>}
                </div>
              </div>
              <pagination
                total={state.pageInfo.total}
                v-model:page={state.pageInfo.page}
                v-model:limit={state.pageInfo.limit}
                pageSizes={state.pageInfo.page_size}
                pagination={getList}
              ></pagination>
            </div>
            <div class={classes.right}>
              <div class={classes.some}>
                <div class={classes.someTitle}>
                  <div class={classes.tilteL}>
                    <img src={somePan} alt="" />
                    <span>相关专辑</span>
                  </div>
                  <div
                    class={classes.tilteR}
                    onClick={() => {
                      gotoMore()
                    }}
                  >
                    <span>更多</span>
                    <img class={classes.arrow} src={arrow} alt="" />
                  </div>
                </div>

                <div class={classes.someWrap}>
                  {state.relatedMusicAlbum.map(item => (
                    <albumItem
                      detail={item}
                      onAlbumDetail={id => getDetail(id)}
                    ></albumItem>
                  ))}
                </div>
              </div>
              <div class={classes.some}>
                <div class={classes.someTitle}>
                  <div class={classes.tilteL}>
                    <img src={hot} alt="" />
                    <span>热门专辑</span>
                  </div>
                  <div
                    class={classes.tilteR}
                    onClick={() => {
                      gotoMore()
                    }}
                  >
                    <span>更多</span>
                    <img class={classes.arrow} src={arrow} alt="" />
                  </div>
                </div>

                <div class={classes.someWrap}>
                  {state.hotList.map(item => (
                    <albumItem
                      detail={item}
                      onAlbumDetail={id => getDetail(id)}
                    ></albumItem>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </>
    )
  }
})