pimhwang
/
douyin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

音乐界面

pull/19/head
zyronon 4 years ago
parent
6c908b6b9c
commit
db94917754
5 changed files with 231 additions and 44 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 31
      src/components/Posters.vue
  2. 8
      src/config/index.js
  3. 59
      src/pages/home/Music.vue
  4. 174
      src/pages/home/MusicRankList.vue
  5. 3
      src/utils/global-methods.js

31
src/components/Posters.vue
Unescape View File

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

8
src/config/index.js
Unescape View File

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

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

@ -8,8 +8,11 @@
</div> </div>
</transition> </transition>
<div class="right"> <div class="right">
<!-- TODO　没有淡入淡出的特效--> <!-- TODO　没有淡入淡出的特效-->
<img class="star" v-if="isFixed" src="../../assets/img/icon/star-white.png" alt=""> <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> <div class="logo" v-if="!isFixed" @click="$nav('/home/music-rank-list')">抖音音乐榜</div>
<img class="share" src="../../assets/img/icon/share-white.png" alt=""> <img class="share" src="../../assets/img/icon/share-white.png" alt="">
</div> </div>
@ -33,10 +36,20 @@
</div> </div>
</div> </div>
</div> </div>
<Posters mode="none" :list="videos"/> <Posters mode="music" :list="videos"/>
<Loading :is-full-screen="false" v-if="loading"/> <Loading :is-full-screen="false" v-if="loading"/>
</Scroll> </Scroll>
</div> </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> </div>
</template> </template>
<script> <script>
@ -50,6 +63,7 @@ export default {
data() { data() {
return { return {
isFixed: false, isFixed: false,
isCollect: false,
loading: false, loading: false,
videos: [ videos: [
{ {
@ -2414,6 +2428,9 @@ export default {
}, },
computed: {}, computed: {},
methods: { methods: {
toggleCollect() {
this.isCollect = !this.isCollect
},
async loadData() { async loadData() {
this.loading = true this.loading = true
await this.$sleep(1500) 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> </style>

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

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

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

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

Write Preview
Loading…
Cancel
Save