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 17:53:17 +08:00
parent c91afa6bd5
commit 6c908b6b9c
21 changed files with 381 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/music-cover/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
src/assets/img/music-cover/10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
src/assets/img/music-cover/11.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
src/assets/img/music-cover/12.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
src/assets/img/music-cover/13.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
src/assets/img/music-cover/14.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
src/assets/img/music-cover/15.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
src/assets/img/music-cover/16.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
src/assets/img/music-cover/17.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

BIN
src/assets/img/music-cover/18.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
src/assets/img/music-cover/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
src/assets/img/music-cover/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
src/assets/img/music-cover/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
src/assets/img/music-cover/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
src/assets/img/music-cover/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/img/music-cover/7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
src/assets/img/music-cover/8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/assets/img/music-cover/9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

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/'
}

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

@ -6,7 +6,8 @@
</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>
<div class="content">
<Indicator
@ -15,44 +16,106 @@
:tabTexts="['热歌榜','飙升樘','原创榜']"
v-model:active-index="contentIndex">
</Indicator>
<!-- TODO 点击收藏后，如果歌手在抖音有账号，就在item下面展示歌手条目-->
<SlideRowList
name="musicRankList"
v-model:active-index="contentIndex">
<SlideItem>
<!-- TODO 点击收藏后，如果歌手在抖音有账号，就在item下面展示歌手条目-->
<div class="list">
<div class="item" v-for="(item,index) in hotList" @click="togglePlay(item)">
<div class="left">
<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 class="music">
<div class="cover-wrapper">
<img src="../../assets/img/icon/avatar/1.png" 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="bottom">
<div class="duration">{{ $duration(item.duration) }}</div>
<div class="use_count">{{ $likeNum(item.use_count) }}人使用</div>
<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="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="right">
<img v-if="item.is_collect" src="../../assets/img/icon/star-yellow.png" alt=""
@click="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 class="bottom" v-if="item.is_collect">
<div class="left">
<img src="../../assets/img/icon/avatar/1.png" alt="" class="avatar">
<div class="desc">
<div class="name">周</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)">
<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 src="../../assets/img/icon/avatar/1.png" 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="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/icon/avatar/1.png" alt="" class="avatar">
<div class="desc">
<div class="name">周</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></SlideItem>
<SlideItem></SlideItem>
</SlideRowList>
</div>
@ -63,15 +126,16 @@ export default {
name: "MusicRankList",
components: {},
props: {
modelValue: false
modelValue: false,
},
data() {
return {
contentIndex: 0,
hotList: [
{
name: '阳光宅男阳光宅男阳光宅男阳光宅男阳光宅男',
cover: '',
name: '龙卷风',
"mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
cover: require('../../assets/img/music-cover/1.png'),
author: '周杰伦',
duration: 99,
use_count: 37441000,
@ -79,8 +143,8 @@ export default {
is_play: false,
},
{
name: '阳光宅男',
cover: '',
name: '爱在西元前',
cover: require('../../assets/img/music-cover/2.png'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
@ -88,8 +152,8 @@ export default {
is_play: false,
},
{
name: '阳光宅男',
cover: '',
name: '蜗牛',
cover: require('../../assets/img/music-cover/3.png'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
@ -97,19 +161,147 @@ export default {
is_play: false,
},
{
name: '阳光宅男',
cover: '',
name: '半岛铁盒',
cover: require('../../assets/img/music-cover/4.png'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
]
{
name: '轨迹',
cover: require('../../assets/img/music-cover/5.png'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '七里香',
cover: require('../../assets/img/music-cover/6.png'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '发如雪',
cover: require('../../assets/img/music-cover/7.png'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '霍元甲',
cover: require('../../assets/img/music-cover/8.png'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '千里之外(周杰伦/费玉清)',
cover: require('../../assets/img/music-cover/9.png'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '菊花台',
cover: require('../../assets/img/music-cover/10.png'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '不能说的秘密',
cover: require('../../assets/img/music-cover/11.png'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '牛仔很忙',
cover: require('../../assets/img/music-cover/12.png'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '给我一首歌的时间',
cover: require('../../assets/img/music-cover/13.jpg'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '烟花易冷',
cover: require('../../assets/img/music-cover/14.jpg'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '惊叹号',
cover: require('../../assets/img/music-cover/15.jpg'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '明明就',
cover: require('../../assets/img/music-cover/16.jpg'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '算什么男人',
cover: require('../../assets/img/music-cover/17.jpg'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '告白气球',
cover: require('../../assets/img/music-cover/18.jpg'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
],
updateTime: Date.now()
}
},
computed: {},
created() {
this.hotList = this.hotList.concat(this.hotList).concat(this.hotList).concat(this.hotList)
},
methods: {
toggleCollect(item) {
@ -140,97 +332,172 @@ export default {
color: white;
font-size: 1.4rem;
#BaseHeader {
opacity: 0;
}
.l-header {
position: relative;
display: flex;
justify-content: center;
img {
width: 100vw;
}
.update-time {
position: absolute;
background: rgba(172, 107, 251, .5);
bottom: 2rem;
border-radius: .1rem;
padding: .2rem 3rem;
}
}
.content {
padding-top: 6rem;
display: flex;
flex-direction: column;
align-items: center;
.indicator-ctn {
width: 85%;
}
.list {
.item {
padding: 1rem 1.5rem;
padding: 2rem 1.5rem;
padding-bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
.left {
width: 73%;
.top {
display: flex;
align-items: center;
.rank {
width: 1.8rem;
height: 1.8rem;
line-height: 1.8rem;
text-align: center;
margin-right: 1.5rem;
.rank-wrapper {
.rank {
width: 1.8rem;
height: 1.8rem;
line-height: 1.8rem;
text-align: center;
margin-right: 1.5rem;
}
}
.music {
.right {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
.cover-wrapper {
margin-right: 1rem;
position: relative;
.music {
display: flex;
align-items: center;
justify-content: center;
.play {
width: 3rem;
height: 3rem;
position: absolute;
}
.cover {
border-radius: .2rem;
@width: 6rem;
width: @width;
height: @width;
}
}
.desc {
display: flex;
flex-direction: column;
justify-content: space-between;
.name {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 60%;
}
.author, .bottom {
font-size: 1.2rem;
color: @second-text-color;
}
.bottom {
.cover-wrapper {
margin-right: 1rem;
position: relative;
display: flex;
align-items: center;
justify-content: center;
.duration {
margin-right: 1.4rem;
position: relative;
.play {
width: 3rem;
height: 3rem;
position: absolute;
}
&:after {
content: '';
position: absolute;
width: 1.5px;
height: 1.5px;
background: white;
right: -7px;
top: 7px;
.cover {
border-radius: .2rem;
@width: 6rem;
width: @width;
height: @width;
}
}
.desc {
display: flex;
flex-direction: column;
justify-content: space-between;
.name {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 40vw;
}
.author, .desc-bottom {
font-size: 1.2rem;
color: @second-text-color;
}
.desc-bottom {
display: flex;
.duration {
margin-right: 1.4rem;
position: relative;
&:after {
content: '';
position: absolute;
width: 1.5px;
height: 1.5px;
border-radius: 50%;
background: white;
right: -7px;
top: 7px;
}
}
}
}
}
.option {
img {
width: 2rem;
height: 2rem;
margin-left: 2rem;
}
}
}
}
.right {
img {
width: 2rem;
height: 2rem;
margin-left: 2rem;
.bottom {
background: @second-btn-color-tran;
padding: 1rem 1.5rem;
margin-left: 3.3rem;
margin-top: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
.arrow {
width: 0;
height: 0;
border: .8rem solid transparent;
border-bottom: .8rem solid @second-btn-color-tran;
position: absolute;
left: 2rem;
top: -1.5rem;
}
.left {
display: flex;
.avatar {
width: 3.5rem;
height: 3.5rem;
margin-right: 1rem;
border-radius: 50%;
}
}
.button {
width: 6rem;
height: 2.5rem;
}
}
}

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

@ -300,11 +300,15 @@ export default {
$dateFormat(val, type) {
if (!val) return
if (val.length === 10) {
val += '000'
}
if (typeof val === 'string' && (val.length === 10 || val.length === 13)) {
val = Number(val)
if (typeof val === 'number') {
}else {
if (val.length === 10) {
val += '000'
}
if (typeof val === 'string' && (val.length === 10 || val.length === 13)) {
val = Number(val)
}
}
switch (type) {
case 'Y':