MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

音乐界面

Browse Source
This commit is contained in:
zyronon 2021-09-15 21:59:20 +08:00
parent 6c908b6b9c
commit db94917754
5 changed files with 231 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/Posters.vue
View File

@ -1,16 +1,21 @@
<template>
<div class="posters">
<div class="poster-item" v-for="i in list">
<!-- @click="$nav('/video-detail')"-->
<img class="poster" v-lazy="$imgPreview(i.cover)" alt="">
<div class="poster-item" v-for="(i,index) in list">
<!-- @click="$nav('/video-detail')"-->
<img class="poster" v-lazy="$imgPreview(i.cover)" alt="">
<div class="num" v-if="mode === 'normal'">
<img class="love" src="../assets/img/icon/love.svg" alt="">
<span>{{ $likeNum(i.digg_count) }}</span>
</div>
<div class="date" v-if="mode === 'date'">
<div class="date" v-if="mode === 'date'">
<div class="day">{{ getDay(i.create_time) }}</div>
<div class="month">{{ getMonth(i.create_time) }}</div>
</div>
<template v-if="mode === 'music'">
<div class="music" v-if="index === 0">
首发
</div>
</template>
</div>
</div>
</template>
@ -28,7 +33,7 @@ export default {
},
mode: {
type: String,
default: 'normal'//date,none
default: 'normal'//date,music
}
},
methods: {
@ -88,6 +93,17 @@ export default {
display: block;
}
.music {
position: absolute;
font-size: 1.2rem;
background: gold;
color: black;
padding: .2rem .3rem;
border-radius: .2rem;
top: .7rem;
left: .7rem;
}
.num {
color: white;
position: absolute;
@ -117,10 +133,11 @@ export default {
padding: .6rem;
border-radius: .6rem;
.day{
.day {
font-weight: bold;
}
.month{
.month {
font-size: 1rem;
}
}

8
src/config/index.js
View File

@ -1,8 +1,8 @@
export default {
// baseUrl: 'http://192.168.0.103/index.php/v1',
// filePreview:'http://192.168.0.103/static/uploads/',
baseUrl: 'http://192.168.10.164/index.php/v1',
filePreview:'http://192.168.10.164/static/uploads/'
baseUrl: 'http://192.168.0.103/index.php/v1',
filePreview:'http://192.168.0.103/static/uploads/',
// baseUrl: 'http://192.168.10.164/index.php/v1',
// filePreview:'http://192.168.10.164/static/uploads/'
// baseUrl: 'http://localhost/index.php/v1',
// filePreview:'http://localhost/static/uploads/'
}

59
src/pages/home/Music.vue
View File

@ -8,8 +8,11 @@
</div>
</transition>
<div class="right">
<!-- TODO　没有淡入淡出的特效-->
<img class="star" v-if="isFixed" src="../../assets/img/icon/star-white.png" alt="">
<!-- TODO　没有淡入淡出的特效-->
<template v-if="isFixed">
<img class="star" v-if="isCollect" src="../../assets/img/icon/star-yellow.png" @click.stop="toggleCollect()">
<img class="star" v-else src="../../assets/img/icon/star-white.png" @click.stop="toggleCollect()">
</template>
<div class="logo" v-if="!isFixed" @click="$nav('/home/music-rank-list')">抖音音乐榜</div>
<img class="share" src="../../assets/img/icon/share-white.png" alt="">
</div>
@ -33,10 +36,20 @@
</div>
</div>
</div>
<Posters mode="none" :list="videos"/>
<Posters mode="music" :list="videos"/>
<Loading :is-full-screen="false" v-if="loading"/>
</Scroll>
</div>
<div class="options">
<div class="l-button white" @click="$no">
<img src="../../assets/img/icon/home/music3.png" alt="">
<span>分享到日常</span>
</div>
<div class="l-button primary" @click="$no">
<img src="../../assets/img/icon/home/record.png" alt="">
<span>拍同款</span>
</div>
</div>
</div>
</template>
<script>
@ -50,6 +63,7 @@ export default {
data() {
return {
isFixed: false,
isCollect: false,
loading: false,
videos: [
{
@ -2414,6 +2428,9 @@ export default {
},
computed: {},
methods: {
toggleCollect() {
this.isCollect = !this.isCollect
},
async loadData() {
this.loading = true
await this.$sleep(1500)
@ -2543,6 +2560,42 @@ export default {
}
}
.options {
font-size: 1.4rem;
width: 100vw;
position: fixed;
bottom: 2rem;
display: flex;
justify-content: center;
img {
width: 2rem;
height: 2rem;
margin-right: .5rem;
}
.l-button {
margin-left: .5rem;
margin-right: .5rem;
width: 14rem;
border-radius: 5rem;
display: flex;
padding: 1.5rem 0;
align-items: center;
justify-content: center;
}
.white {
color: black;
background: white;
}
.primary {
background: @primary-btn-color;
color: white;
}
}
}
</style>

174
src/pages/home/MusicRankList.vue
View File

@ -1,28 +1,32 @@
<template>
<div class="MusicRankList">
<BaseHeader>
<template v-slot:center>
<span class="f16">抖音音乐榜</span>
</template>
</BaseHeader>
<div class="l-header">
<img src="../../assets/img/icon/music-rank-list.webp" alt="">
<div class="update-time">更新于：{{ $dateFormat(updateTime, 'D') }}</div>
<div class="MusicRankList" @scroll="scroll">
<back
mode="light"
img="back"
@click="$back()"
class="fixed-back"
direction="left"/>
<div class="fixed-header" :style="fixedStyle">
<span class="f16">抖音音乐榜</span>
</div>
<!-- indicator没有像me页面那样做，应该那样做-->
<div class="content">
<div class="l-header">
<img src="../../assets/img/icon/music-rank-list.webp" alt="">
<div class="update-time">更新于：{{ $dateFormat(updateTime, 'D') }}</div>
</div>
<Indicator
name="musicRankList"
tabStyleWidth="33%"
:tabTexts="['热歌榜','飙升樘','原创榜']"
v-model:active-index="contentIndex">
</Indicator>
<!-- TODO 点击收藏后，如果歌手在抖音有账号，就在item下面展示歌手条目-->
<SlideRowList
name="musicRankList"
v-model:active-index="contentIndex">
<SlideItem>
<div class="list">
<div class="item" v-for="(item,index) in hotList" @click="togglePlay(item)">
<div class="item" v-for="(item,index) in hotList" @click="togglePlay(item,hotList)">
<div class="top">
<div class="rank-wrapper">
<img v-if="index === 0" src="../../assets/img/icon/rank1.webp" alt="" class="rank">
@ -48,7 +52,7 @@
</div>
<div class="option">
<img v-if="item.is_collect" src="../../assets/img/icon/star-yellow.png" alt=""
@click="toggleCollect(item)">
@click.stop="toggleCollect(item)">
<img v-else src="../../assets/img/icon/star-white.png" alt="" @click.stop="toggleCollect(item)">
<img src="../../assets/img/icon/menu2-white.png" alt="" @click.stop="$nav('/home/music')">
</div>
@ -56,9 +60,9 @@
</div>
<div class="bottom" v-if="item.is_collect">
<div class="left">
<img src="../../assets/img/icon/avatar/1.png" alt="" class="avatar">
<img src="../../assets/img/music-cover/2.png" alt="" class="avatar">
<div class="desc">
<div class="name">周</div>
<div class="name">{{ item.author }}</div>
<div class="follow_count">粉丝：83.4w</div>
</div>
</div>
@ -70,7 +74,7 @@
</SlideItem>
<SlideItem>
<div class="list">
<div class="item" v-for="(item,index) in hotList" @click="togglePlay(item)">
<div class="item" v-for="(item,index) in hotList" @click="togglePlay(item,hotList)">
<div class="top">
<div class="rank-wrapper">
<img v-if="index === 0" src="../../assets/img/icon/rank1.webp" alt="" class="rank">
@ -81,7 +85,7 @@
<div class="right">
<div class="music">
<div class="cover-wrapper">
<img src="../../assets/img/icon/avatar/1.png" alt="" class="cover">
<img v-lazy="$imgPreview(item.cover)" alt="" class="cover">
<img v-if="!item.is_play" src="../../assets/img/icon/play-white.png" alt="" class="play">
<img v-if="item.is_play" src="../../assets/img/icon/pause-white.png" alt="" class="play">
</div>
@ -96,7 +100,7 @@
</div>
<div class="option">
<img v-if="item.is_collect" src="../../assets/img/icon/star-yellow.png" alt=""
@click="toggleCollect(item)">
@click.stop="toggleCollect(item)">
<img v-else src="../../assets/img/icon/star-white.png" alt="" @click.stop="toggleCollect(item)">
<img src="../../assets/img/icon/menu2-white.png" alt="" @click.stop="$nav('/home/music')">
</div>
@ -104,9 +108,57 @@
</div>
<div class="bottom" v-if="item.is_collect">
<div class="left">
<img src="../../assets/img/icon/avatar/1.png" alt="" class="avatar">
<img src="../../assets/img/music-cover/2.png" alt="" class="avatar">
<div class="desc">
<div class="name">周</div>
<div class="name">{{ item.author }}</div>
<div class="follow_count">粉丝：83.4w</div>
</div>
</div>
<b-button type="primary">关注</b-button>
<div class="arrow"></div>
</div>
</div>
</div>
</SlideItem>
<SlideItem>
<div class="list">
<div class="item" v-for="(item,index) in hotList" @click="togglePlay(item,hotList)">
<div class="top">
<div class="rank-wrapper">
<img v-if="index === 0" src="../../assets/img/icon/rank1.webp" alt="" class="rank">
<img v-else-if="index === 1" src="../../assets/img/icon/rank2.webp" alt="" class="rank">
<img v-else-if="index === 2" src="../../assets/img/icon/rank3.webp" alt="" class="rank">
<div v-else class="rank">{{ index + 1 }}</div>
</div>
<div class="right">
<div class="music">
<div class="cover-wrapper">
<img v-lazy="$imgPreview(item.cover)" alt="" class="cover">
<img v-if="!item.is_play" src="../../assets/img/icon/play-white.png" alt="" class="play">
<img v-if="item.is_play" src="../../assets/img/icon/pause-white.png" alt="" class="play">
</div>
<div class="desc">
<span class="name">{{ item.name }}</span>
<div class="author">{{ item.author }}</div>
<div class="desc-bottom">
<div class="duration">{{ $duration(item.duration) }}</div>
<div class="use_count">{{ $likeNum(item.use_count) }}人使用</div>
</div>
</div>
</div>
<div class="option">
<img v-if="item.is_collect" src="../../assets/img/icon/star-yellow.png" alt=""
@click.stop="toggleCollect(item)">
<img v-else src="../../assets/img/icon/star-white.png" alt="" @click.stop="toggleCollect(item)">
<img src="../../assets/img/icon/menu2-white.png" alt="" @click.stop="$nav('/home/music')">
</div>
</div>
</div>
<div class="bottom" v-if="item.is_collect">
<div class="left">
<img src="../../assets/img/music-cover/2.png" alt="" class="avatar">
<div class="desc">
<div class="name">{{ item.author }}</div>
<div class="follow_count">粉丝：83.4w</div>
</div>
</div>
@ -116,7 +168,6 @@
</div>
</div>
</SlideItem>
<SlideItem></SlideItem>
</SlideRowList>
</div>
</div>
@ -125,16 +176,13 @@
export default {
name: "MusicRankList",
components: {},
props: {
modelValue: false,
},
data() {
return {
contentIndex: 0,
hotList: [
{
name: '龙卷风',
"mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
"mp3": "http://im5.tongbu.com/rings/singerring/zt_uunGo_1/5605.mp3",
cover: require('../../assets/img/music-cover/1.png'),
author: '周杰伦',
duration: 99,
@ -144,6 +192,7 @@ export default {
},
{
name: '爱在西元前',
mp3: 'https://m3.8js.net:99/1916/501204165042405.mp3',
cover: require('../../assets/img/music-cover/2.png'),
author: '周杰伦',
duration: 60,
@ -153,6 +202,7 @@ export default {
},
{
name: '蜗牛',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/3684.mp3',
cover: require('../../assets/img/music-cover/3.png'),
author: '周杰伦',
duration: 60,
@ -162,6 +212,7 @@ export default {
},
{
name: '半岛铁盒',
mp3: 'https://m3.8js.net:99/2016n/46/94745.mp3',
cover: require('../../assets/img/music-cover/4.png'),
author: '周杰伦',
duration: 60,
@ -171,6 +222,7 @@ export default {
},
{
name: '轨迹',
mp3: 'https://m3.8js.net:99/1832/411204324135934.mp3',
cover: require('../../assets/img/music-cover/5.png'),
author: '周杰伦',
duration: 60,
@ -180,6 +232,7 @@ export default {
},
{
name: '七里香',
mp3: 'https://m3.8js.net:99/2016n/14/53717.mp3',
cover: require('../../assets/img/music-cover/6.png'),
author: '周杰伦',
duration: 60,
@ -189,6 +242,7 @@ export default {
},
{
name: '发如雪',
mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3',
cover: require('../../assets/img/music-cover/7.png'),
author: '周杰伦',
duration: 60,
@ -198,6 +252,7 @@ export default {
},
{
name: '霍元甲',
mp3: 'https://m3.8js.net:99/1921/261204212643140.mp3',
cover: require('../../assets/img/music-cover/8.png'),
author: '周杰伦',
duration: 60,
@ -207,6 +262,7 @@ export default {
},
{
name: '千里之外(周杰伦/费玉清)',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/121.mp3',
cover: require('../../assets/img/music-cover/9.png'),
author: '周杰伦',
duration: 60,
@ -216,6 +272,7 @@ export default {
},
{
name: '菊花台',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/2022.mp3',
cover: require('../../assets/img/music-cover/10.png'),
author: '周杰伦',
duration: 60,
@ -225,6 +282,7 @@ export default {
},
{
name: '不能说的秘密',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/165.mp3',
cover: require('../../assets/img/music-cover/11.png'),
author: '周杰伦',
duration: 60,
@ -234,6 +292,7 @@ export default {
},
{
name: '牛仔很忙',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/219.mp3',
cover: require('../../assets/img/music-cover/12.png'),
author: '周杰伦',
duration: 60,
@ -243,6 +302,7 @@ export default {
},
{
name: '给我一首歌的时间',
mp3: 'https://m3.8js.net:99/1938/041204380445445.mp3',
cover: require('../../assets/img/music-cover/13.jpg'),
author: '周杰伦',
duration: 60,
@ -252,6 +312,7 @@ export default {
},
{
name: '烟花易冷',
mp3: 'https://m3.8js.net:99/1828/051204280535192.mp3',
cover: require('../../assets/img/music-cover/14.jpg'),
author: '周杰伦',
duration: 60,
@ -261,6 +322,7 @@ export default {
},
{
name: '惊叹号',
mp3: 'https://m3.8js.net:99/20111103/150.mp3',
cover: require('../../assets/img/music-cover/15.jpg'),
author: '周杰伦',
duration: 60,
@ -270,6 +332,7 @@ export default {
},
{
name: '明明就',
mp3: 'https://m3.8js.net:99/2016n/27/96537.mp3',
cover: require('../../assets/img/music-cover/16.jpg'),
author: '周杰伦',
duration: 60,
@ -279,6 +342,7 @@ export default {
},
{
name: '算什么男人',
mp3: 'https://m3.8js.net:99/20150107/429.mp3',
cover: require('../../assets/img/music-cover/17.jpg'),
author: '周杰伦',
duration: 60,
@ -288,6 +352,7 @@ export default {
},
{
name: '告白气球',
mp3: 'https://m3.8js.net:99/20161016/481.mp3',
cover: require('../../assets/img/music-cover/18.jpg'),
author: '周杰伦',
duration: 60,
@ -296,14 +361,26 @@ export default {
is_play: false,
},
],
updateTime: Date.now()
updateTime: Date.now(),
audio: new Audio(),
scrollTop: -1
}
},
computed: {
fixedStyle() {
return {
opacity: this.scrollTop / 120 > 1 ? 1 : this.scrollTop / 120
}
}
},
computed: {},
created() {
this.hotList = this.hotList.concat(this.hotList).concat(this.hotList).concat(this.hotList)
this.hotList = this.hotList.slice(0, 50)
},
methods: {
scroll(e) {
this.scrollTop = e.target.scrollTop
},
toggleCollect(item) {
item.is_collect = !item.is_collect
if (item.is_collect) {
@ -312,9 +389,34 @@ export default {
this.$notice('取消收藏')
}
},
togglePlay(item) {
togglePlay(item, list) {
list.map(v => {
if (v.name !== item.name) {
v.is_play = false
}
})
item.is_play = !item.is_play
if (item.is_play) {
this.audio.pause()
this.audio.src = item.mp3
this.audio.currentTime = 0
this.audio.play();
this.audio.addEventListener('ended', () => item.is_play = false)
} else {
this.stopPlay()
}
},
stopPlay() {
this.audio.pause()
this.audio.currentTime = 0
this.audio.removeEventListener('ended', null)
}
},
unmounted() {
this.stopPlay()
},
deactivated() {
this.stopPlay()
}
}
</script>
@ -332,8 +434,22 @@ export default {
color: white;
font-size: 1.4rem;
#BaseHeader {
opacity: 0;
.fixed-back {
position: fixed;
left: 1rem;
top: 2rem;
z-index: 3;
}
.fixed-header {
background: @main-bg;
width: 100%;
position: fixed;
z-index: 2;
height: 6rem;
display: flex;
align-items: center;
justify-content: center;
}
.l-header {

3
src/utils/global-methods.js
View File

@ -251,9 +251,10 @@ export default {
}
},
$imgPreview(url) {
// console.log(url)
if (!url) return
//本地图片
if (url.includes('img')) {
if (url.includes('img') ||url.includes('data:image')) {
return url
}
//网络，全路径图片