|
@@ -1,8 +1,8 @@
|
|
|
import { defineComponent, nextTick, onMounted, reactive, ref } from 'vue'
|
|
|
-import { useRoute } from 'vue-router'
|
|
|
+import { useRoute, useRouter } from 'vue-router'
|
|
|
import request from '@/helpers/request'
|
|
|
import ColHeader from '@/components/col-header'
|
|
|
-import { Button, Icon, Image, List, Sticky } from 'vant'
|
|
|
+import { Button, Icon, Image, List, NavBar, Sticky } from 'vant'
|
|
|
import classNames from 'classnames'
|
|
|
import Footer from '../album/footer'
|
|
|
import FavoriteIcon from '../album/favorite.svg'
|
|
@@ -10,10 +10,15 @@ import FavoritedIcon from '../album/favorited.svg'
|
|
|
import styles from './index.module.less'
|
|
|
import Item from '../list/item'
|
|
|
import { useRect } from '@vant/use'
|
|
|
+import { useEventListener, useWindowScroll } from '@vueuse/core'
|
|
|
import { getRandomKey, musicBuy } from '../music'
|
|
|
import { state } from '@/state'
|
|
|
import IconPan from './pan.png'
|
|
|
import oStart from './oStart.png'
|
|
|
+import Title from '../component/title'
|
|
|
+import Song from '../component/song'
|
|
|
+import ColResult from '@/components/col-result'
|
|
|
+import MusicGrid from '../component/music-grid'
|
|
|
|
|
|
const noop = () => {}
|
|
|
|
|
@@ -27,9 +32,11 @@ export default defineComponent({
|
|
|
},
|
|
|
setup({ onItemClick }) {
|
|
|
localStorage.setItem('behaviorId', getRandomKey())
|
|
|
+ const router = useRouter()
|
|
|
const params = reactive({
|
|
|
search: '',
|
|
|
- page: 1
|
|
|
+ page: 1,
|
|
|
+ rows: 200
|
|
|
})
|
|
|
const albumDetail = ref<any>(null)
|
|
|
const data = ref<any>(null)
|
|
@@ -40,7 +47,8 @@ export default defineComponent({
|
|
|
const favorited = ref(0)
|
|
|
const albumFavoriteCount = ref(0)
|
|
|
const headers = ref(null)
|
|
|
- let heights = ref(0)
|
|
|
+ const background = ref<string>('rgba(55, 205, 177, 0)')
|
|
|
+ const heightInfo = ref<any>('auto')
|
|
|
|
|
|
const route = useRoute()
|
|
|
const FetchList = async () => {
|
|
@@ -75,6 +83,14 @@ export default defineComponent({
|
|
|
|
|
|
const favoriteLoading = ref(false)
|
|
|
|
|
|
+ onMounted(() => {
|
|
|
+ FetchList()
|
|
|
+ useEventListener(document, 'scroll', evt => {
|
|
|
+ const { y } = useWindowScroll()
|
|
|
+ background.value = `rgba(55, 205, 177, ${y.value / 100})`
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
const toggleFavorite = async (id: number) => {
|
|
|
favoriteLoading.value = true
|
|
|
try {
|
|
@@ -88,132 +104,107 @@ export default defineComponent({
|
|
|
favoriteLoading.value = false
|
|
|
}
|
|
|
|
|
|
- onMounted(() => {
|
|
|
- nextTick(() => {
|
|
|
- setTimeout(() => {
|
|
|
- const { height } = useRect(headers as any)
|
|
|
- console.log(height, 'height')
|
|
|
- heights.value = height
|
|
|
- }, 100)
|
|
|
- })
|
|
|
- })
|
|
|
-
|
|
|
return () => {
|
|
|
- // console.log(albumFavoriteCount.value)
|
|
|
return (
|
|
|
<div class={styles.detail}>
|
|
|
+ <div ref={headers}>
|
|
|
+ <ColHeader
|
|
|
+ background={background.value}
|
|
|
+ border={false}
|
|
|
+ color="#fff"
|
|
|
+ backIconColor="white"
|
|
|
+ onHeaderBack={() => {
|
|
|
+ nextTick(() => {
|
|
|
+ const { height } = useRect(headers as any)
|
|
|
+ heightInfo.value = height
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
<img class={styles.bgImg} src={albumDetail.value?.albumCoverUrl} />
|
|
|
- <div class={styles.musicContent}>
|
|
|
- <div class={styles.bg}>
|
|
|
- <div class={styles.alumWrap}>
|
|
|
- <div class={styles.img}>
|
|
|
- {/* <TheImage src={albumDetail.value?.albumCoverUrl} /> */}
|
|
|
- <Image
|
|
|
- class={styles.image}
|
|
|
- width="100%"
|
|
|
- height="100%"
|
|
|
- lazy-load
|
|
|
- fit="cover"
|
|
|
- src={albumDetail.value?.albumCoverUrl}
|
|
|
- />
|
|
|
+ <div class={styles.musicContent}></div>
|
|
|
+ <div class={styles.bg}>
|
|
|
+ <div class={styles.alumWrap}>
|
|
|
+ <div class={styles.img}>
|
|
|
+ <Image
|
|
|
+ class={styles.image}
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ fit="cover"
|
|
|
+ src={albumDetail.value?.albumCoverUrl}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class={styles.alumDes}>
|
|
|
+ <div class={[styles.alumTitle, 'van-ellipsis']}>
|
|
|
+ {albumDetail.value?.albumName}
|
|
|
</div>
|
|
|
- <div class={styles.alumDes}>
|
|
|
- <div class={[styles.alumTitle, 'van-ellipsis']}>
|
|
|
- {albumDetail.value?.albumName}
|
|
|
- </div>
|
|
|
- <div class={styles.tags}>
|
|
|
- {albumDetail.value?.musicTagNames?.map((tag: any) => (
|
|
|
- <span class={styles.tag}>{tag}</span>
|
|
|
- ))}
|
|
|
- </div>
|
|
|
- <div class={[styles.des, 'van-multi-ellipsis--l3']}>
|
|
|
- {albumDetail.value?.albumDesc}
|
|
|
- </div>
|
|
|
+ <div class={styles.tags}>
|
|
|
+ {albumDetail.value?.musicTagNames?.map((tag: any) => (
|
|
|
+ <span class={styles.tag}>{tag}</span>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class={[styles.des, 'van-multi-ellipsis--l3']}
|
|
|
+ style={{
|
|
|
+ height: '48px',
|
|
|
+ lineHeight: '16px'
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {albumDetail.value?.albumDesc}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class={styles.alumCollect}>
|
|
|
- <img src={IconPan} />
|
|
|
- <span>共{albumDetail.value?.musicSheetCount}首曲目</span>
|
|
|
- <img class={styles.right} src={oStart} />
|
|
|
- <span>{albumDetail.value?.albumFavoriteCount}人收藏</span>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class={styles.alumCollect}>
|
|
|
+ <img src={IconPan} />
|
|
|
+ <span>共{albumDetail.value?.musicSheetCount}首曲目</span>
|
|
|
+ <img class={styles.right} src={oStart} />
|
|
|
+ <span>{albumDetail.value?.albumFavoriteCount}人收藏</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- {/* <Sticky
|
|
|
- class={[styles.base, 'sticky']}
|
|
|
- style={{
|
|
|
- height: heights.value + 'px !important',
|
|
|
- width: '100%'
|
|
|
- }}
|
|
|
- >
|
|
|
- <div ref={headers}>
|
|
|
- <ColHeader
|
|
|
- class={styles.header}
|
|
|
- background="transparent"
|
|
|
- color="#fff"
|
|
|
- title="专辑详情"
|
|
|
- backIconColor="white"
|
|
|
- border={false}
|
|
|
- isFixed={false}
|
|
|
+ <div class={styles.alumnContainer}>
|
|
|
+ <div class={styles.alumnList}>
|
|
|
+ <Title title="曲目列表" isMore={false} />
|
|
|
+ <Song
|
|
|
+ list={rows.value}
|
|
|
+ onDetail={(item: any) => {
|
|
|
+ if (onItemClick === noop || !onItemClick) {
|
|
|
+ musicBuy(item, () => {}, {
|
|
|
+ albumId: route.params.id
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ onItemClick(item)
|
|
|
+ }
|
|
|
+ }}
|
|
|
/>
|
|
|
- <div class={styles.detailContent}>
|
|
|
- <div class={classNames(styles.main, 'van-hairline--bottom')}>
|
|
|
- <Image
|
|
|
- class={styles.img}
|
|
|
- src={albumDetail.value?.albumCoverUrl}
|
|
|
- />
|
|
|
- <div class={styles.content}>
|
|
|
- <h4 class="van-ellipsis">{albumDetail.value?.albumName}</h4>
|
|
|
- <p class="van-multi-ellipsis--l3">
|
|
|
- {albumDetail.value?.albumDesc}
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class={styles.footerBar}>
|
|
|
- <Footer
|
|
|
- musicSheetCount={albumDetail.value?.musicSheetCount}
|
|
|
- albumFavoriteCount={albumFavoriteCount.value}
|
|
|
- />
|
|
|
- {state.platformType === 'STUDENT' && (
|
|
|
- <Button
|
|
|
- class={styles.favoriteContaineer}
|
|
|
- loading={favoriteLoading.value}
|
|
|
- onClick={() => toggleFavorite(albumDetail.value?.id)}
|
|
|
- size="mini"
|
|
|
- >
|
|
|
- <Icon
|
|
|
- key={favorited.value}
|
|
|
- class={styles.favorite}
|
|
|
- name={favorited.value ? FavoritedIcon : FavoriteIcon}
|
|
|
- />{' '}
|
|
|
- <span>{favorited.value ? '已' : ''}收藏</span>
|
|
|
- </Button>
|
|
|
- )}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+
|
|
|
+ {rows.value && rows.value.length <= 0 && (
|
|
|
+ <ColResult btnStatus={false} tips="暂无曲目" />
|
|
|
+ )}
|
|
|
</div>
|
|
|
- </Sticky> */}
|
|
|
- <List
|
|
|
- loading={loading.value}
|
|
|
- finished={finished.value}
|
|
|
- finished-text="没有更多了"
|
|
|
- onLoad={FetchList}
|
|
|
- >
|
|
|
- {rows.value.length
|
|
|
- ? rows.value.map(item => (
|
|
|
- <Item
|
|
|
- data={item}
|
|
|
- onClick={() => {
|
|
|
- if (onItemClick === noop || !onItemClick) {
|
|
|
- musicBuy(item)
|
|
|
- } else {
|
|
|
- onItemClick(item)
|
|
|
- }
|
|
|
+
|
|
|
+ {albumDetail.value?.relatedMusicAlbum &&
|
|
|
+ albumDetail.value?.relatedMusicAlbum.length > 0 && (
|
|
|
+ <>
|
|
|
+ <Title
|
|
|
+ title="相关专辑"
|
|
|
+ onMore={() => {
|
|
|
+ router.push({
|
|
|
+ path: '/music-album'
|
|
|
+ })
|
|
|
}}
|
|
|
/>
|
|
|
- ))
|
|
|
- : null}
|
|
|
- </List>
|
|
|
+
|
|
|
+ <MusicGrid
|
|
|
+ list={albumDetail.value?.relatedMusicAlbum}
|
|
|
+ onGoto={(n: any) =>
|
|
|
+ router.push({
|
|
|
+ path: '/music-album-detail/' + n.id
|
|
|
+ })
|
|
|
+ }
|
|
|
+ />
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
)
|
|
|
}
|