zyronon
4 years ago
6 changed files with 865 additions and 312 deletions
@ -0,0 +1,167 @@
@@ -0,0 +1,167 @@
|
||||
<script> |
||||
import bus from "../../utils/bus"; |
||||
|
||||
export default { |
||||
name: "IndicatorLight", |
||||
props: { |
||||
activeIndex: { |
||||
type: Number, |
||||
default: () => 0 |
||||
}, |
||||
tabStyleWidth: { |
||||
type: String, |
||||
default: () => '' |
||||
}, |
||||
tabTexts: { |
||||
type: Array, |
||||
default: () => [] |
||||
}, |
||||
tabRender: { |
||||
type: Function, |
||||
default: null |
||||
}, |
||||
//用于和slidList绑定，因为一个页面可能有多个slidList，但只有一个indicator组件 |
||||
name: { |
||||
type: String, |
||||
default: () => '' |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
currentSlideItemIndex: this.activeIndex, |
||||
tabIndicatorRelationActiveIndexLefts: [],//指标和slideItem的index的对应left, |
||||
indicatorSpace: 0,//indicator之间的间距 |
||||
} |
||||
}, |
||||
computed: {}, |
||||
render() { |
||||
/* |
||||
* <div class="tabs" ref="tabs"> |
||||
<div class="tab" |
||||
style="{width : tabStyleWidth}" |
||||
v-for="(item,index) in tabTexts" |
||||
:class="currentSlideItemIndex === index?'active':''" |
||||
@click="changeIndex(index)"> |
||||
<span>{{ item }}</span></div> |
||||
</div> |
||||
* */ |
||||
return ( |
||||
<div className='indicator-ctn'> |
||||
{this.tabRender ? |
||||
this.tabRender() : |
||||
<div className="tabs" ref="tabs"> |
||||
{ |
||||
this.tabTexts.map((item, index) => { |
||||
return ( |
||||
<div className={this.currentSlideItemIndex === index ? 'active tab' : 'tab'} |
||||
style={{width: this.tabStyleWidth || 100 / this.tabTexts.length + '%'}} |
||||
onClick={e => this.changeIndex(index)} |
||||
> |
||||
< span> {item}</span> |
||||
</div> |
||||
) |
||||
}) |
||||
} |
||||
</div> |
||||
} |
||||
<div className="indicator" ref="indicator"/> |
||||
</div> |
||||
) |
||||
}, |
||||
mounted() { |
||||
this.initTabs() |
||||
bus.on(this.name + '-moved', this.move) |
||||
bus.on(this.name + '-end', this.end) |
||||
}, |
||||
methods: { |
||||
changeIndex(index) { |
||||
this.currentSlideItemIndex = index |
||||
this.$attrs['onUpdate:active-index'] && this.$emit('update:active-index', this.currentSlideItemIndex) |
||||
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`) |
||||
this.$setCss(this.indicatorRef, 'left', this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px') |
||||
}, |
||||
initTabs() { |
||||
let tabs = this.$refs.tabs |
||||
this.indicatorRef = this.$refs.indicator |
||||
let indicatorWidth = this.$getCss(this.indicatorRef, 'width') |
||||
for (let i = 0; i < tabs.children.length; i++) { |
||||
let item = tabs.children[i] |
||||
this.tabWidth = this.$getCss(item, 'width') |
||||
this.tabIndicatorRelationActiveIndexLefts.push( |
||||
item.getBoundingClientRect().x - tabs.children[0].getBoundingClientRect().x + (this.tabWidth * 0.5 - indicatorWidth / 2)) |
||||
} |
||||
|
||||
this.indicatorSpace = this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[0] |
||||
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`) |
||||
this.$setCss(this.indicatorRef, 'left', this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px') |
||||
}, |
||||
move(e) { |
||||
this.$setCss(this.indicatorRef, 'left', |
||||
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] - |
||||
e.x.distance / (this.$store.state.bodyWidth / this.indicatorSpace) + 'px') |
||||
}, |
||||
end(index) { |
||||
// console.log(index) |
||||
this.currentSlideItemIndex = index |
||||
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`) |
||||
this.$setCss(this.indicatorRef, 'left', |
||||
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px') |
||||
setTimeout(() => { |
||||
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`) |
||||
}, 300) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="less"> |
||||
@import "../../assets/less/index"; |
||||
|
||||
.indicator-ctn { |
||||
font-size: 1.4rem; |
||||
width: 100%; |
||||
height: @indicator-height; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
z-index: 1; |
||||
|
||||
.tabs { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
font-weight: bold; |
||||
|
||||
.tab { |
||||
height: 4.5rem; |
||||
width: 45%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
color: @second-text-color; |
||||
transition: color .3s; |
||||
|
||||
&.active { |
||||
color: white; |
||||
} |
||||
|
||||
img { |
||||
margin-left: .5rem; |
||||
@width: 1.2rem; |
||||
width: @width; |
||||
height: @width; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.indicator { |
||||
height: 3px; |
||||
width: 2.5rem; |
||||
background: #fff; |
||||
border-radius: 5px; |
||||
position: relative; |
||||
transition: all .3s; |
||||
} |
||||
} |
||||
|
||||
|
||||
</style> |
||||
@ -0,0 +1,432 @@
@@ -0,0 +1,432 @@
|
||||
<template> |
||||
<div class="SlideItemMusic"> |
||||
<div v-show="!isFullLyrics"> |
||||
<div class="cover"> |
||||
<img v-lazy="$imgPreview(currentMusic.cover)" alt=""> |
||||
</div> |
||||
<div class="lyrics-wrapper" ref="lyrics-wrapper" @click="isFullLyrics = true"> |
||||
<div class="container"> |
||||
<div class="lyrics" v-for="item in lyricsFullTexts">{{ item.c }}</div> |
||||
</div> |
||||
</div> |
||||
<!-- <div class="lyrics-mask" @click="isFullLyrics = true"></div>--> |
||||
</div> |
||||
<div class="lyrics-full" v-show="isFullLyrics" @click="isFullLyrics = false"> |
||||
<div class="list" style="overflow:auto;"> |
||||
<div class="item" v-for="item in lyricsFullTexts">{{ item.c }}</div> |
||||
</div> |
||||
</div> |
||||
<div class="bottom"> |
||||
<div class="desc"> |
||||
<div class="left"> |
||||
<div class="name">{{ currentMusic.name }}</div> |
||||
<div class="author">{{ currentMusic.author }}</div> |
||||
</div> |
||||
<div class="right"> |
||||
<div class="btn"> |
||||
<img src="@/assets/img/icon/star-white.png" v-show="!isCollect" @click="isCollect = !isCollect"> |
||||
<img src="@/assets/img/icon/star-yellow.png" v-show="isCollect" @click="isCollect = !isCollect"> |
||||
<span>收藏</span> |
||||
</div> |
||||
<div class="btn"> |
||||
<img src="@/assets/img/icon/share-white-full.png" alt=""> |
||||
<span>分享</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="progress"> |
||||
<div class="start">{{ $durationTime(currentTime) }}</div> |
||||
<div class="bar"> |
||||
<div class="slide-bar" |
||||
ref="slideBar" |
||||
@touchstart="start" |
||||
@touchmove="move" |
||||
@touchend="end"></div> |
||||
<div class="bar-line" :style="durationStyle(1)"></div> |
||||
<div class="bar-point" :style="durationStyle(2)"></div> |
||||
</div> |
||||
<div class="end">{{ $durationTime(duration) }}</div> |
||||
</div> |
||||
<div class="options"> |
||||
<img v-show="isLoop" src="@/assets/img/icon/me/loop.png" @click="isLoop = !isLoop"> |
||||
<img v-show="!isLoop" src="@/assets/img/icon/me/play-normal.png" @click="isLoop = !isLoop"> |
||||
<div class="center"> |
||||
<img src="@/assets/img/icon/me/previous.png" @click="t"> |
||||
<!-- <img v-show="isPlay" class="control" src="@/assets/img/icon/me/pause.png" @click="togglePlay">--> |
||||
<!-- <img v-show="!isPlay" class="control" src="@/assets/img/icon/me/play.png" @click="togglePlay">--> |
||||
<img v-show="currentMusic.is_play" class="control" src="@/assets/img/icon/me/pause.png" |
||||
@click="togglePlay()"> |
||||
<img v-show="!currentMusic.is_play" class="control" src="@/assets/img/icon/me/play.png" |
||||
@click="togglePlay()"> |
||||
<img src="@/assets/img/icon/me/next.png"> |
||||
</div> |
||||
<img src="@/assets/img/icon/me/music-list.png"> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import {nextTick} from "_vue@3.2.4@vue"; |
||||
import globalMethods from "../../../utils/global-methods"; |
||||
|
||||
export default { |
||||
name: "SlideItemMusic", |
||||
components: {}, |
||||
props: { |
||||
modelValue: false |
||||
}, |
||||
data() { |
||||
return { |
||||
slideIndex: 1, |
||||
currentMusic: { |
||||
name: '告白气球', |
||||
mp3: 'https://mp32.9ku.com/upload/128/2017/02/05/858423.mp3', |
||||
cover: require('../../../assets/img/music-cover/7.png'), |
||||
author: '周杰伦', |
||||
duration: 60, |
||||
use_count: 37441000, |
||||
is_collect: false, |
||||
is_play: false, |
||||
}, |
||||
collectMusic: [], |
||||
recommendMusic: [], |
||||
guessMusic: [], |
||||
lyricsTexts: [], |
||||
lyricsFullTexts: [], |
||||
isShowCollectDialog: false, |
||||
isPlay: false, |
||||
isAutoPlay: true, |
||||
isLoop: false, |
||||
isMove: false, |
||||
isCollect: false, |
||||
isFullLyrics: false, |
||||
lastPageX: 0, |
||||
pageX: 0, |
||||
audio: new Audio(), |
||||
duration: 0, |
||||
currentTime: 0, |
||||
step: 0, |
||||
startX: 0, |
||||
slideBarWidth: 0 |
||||
} |
||||
}, |
||||
computed: {}, |
||||
created() { |
||||
}, |
||||
methods: { |
||||
playMusic(item) { |
||||
this.collectMusic.map(v => v.is_play = false) |
||||
this.recommendMusic.map(v => v.is_play = false) |
||||
item.is_play = true |
||||
this.currentMusic = item |
||||
this.audio.src = this.currentMusic.mp3 |
||||
this.togglePlay(true) |
||||
}, |
||||
togglePlay(state) { |
||||
this.currentMusic.is_play = state || !this.currentMusic.is_play |
||||
if (this.currentMusic.is_play) { |
||||
this.audio.play() |
||||
} else { |
||||
this.audio.pause() |
||||
} |
||||
}, |
||||
async getCollectMusic() { |
||||
this.loading = true |
||||
let res = await this.$api.videos.collect() |
||||
this.loading = false |
||||
if (res.code === this.SUCCESS) { |
||||
this.collectMusic = res.data.music.list.slice(0, 2) |
||||
this.guessMusic = this.recommendMusic = res.data.music.list.slice(2, -1) |
||||
} |
||||
}, |
||||
createLrcObj(lrc) { |
||||
let oLRC = { |
||||
ti: "", //歌曲名 |
||||
ar: "", //演唱者 |
||||
al: "", //专辑名 |
||||
by: "", //歌词制作人 |
||||
offset: 0, //时间补偿值，单位毫秒，用于调整歌词整体位置 |
||||
ms: [] //歌词数组{t:时间,c:歌词} |
||||
}; |
||||
if (lrc.length === 0) return; |
||||
let lrcs = lrc.split('\n');//用回车拆分成数组 |
||||
for (let i in lrcs) {//遍历歌词数组 |
||||
lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, ""); //去除前后空格 |
||||
let t = lrcs[i].substring(lrcs[i].indexOf("[") + 1, lrcs[i].indexOf("]"));//取[]间的内容 |
||||
let s = t.split(":");//分离:前后文字 |
||||
if (isNaN(parseInt(s[0]))) { //不是数值 |
||||
for (let i in oLRC) { |
||||
if (i != "ms" && i == s[0].toLowerCase()) { |
||||
oLRC[i] = s[1]; |
||||
} |
||||
} |
||||
} else { //是数值 |
||||
let arr = lrcs[i].match(/\[(\d+:.+?)\]/g);//提取时间字段，可能有多个 |
||||
let start = 0; |
||||
for (let k in arr) { |
||||
start += arr[k].length; //计算歌词位置 |
||||
} |
||||
let content = lrcs[i].substring(start);//获取歌词内容 |
||||
for (let k in arr) { |
||||
let t = arr[k].substring(1, arr[k].length - 1);//取[]间的内容 |
||||
let s = t.split(":");//分离:前后文字 |
||||
oLRC.ms.push({//对象{t:时间,c:歌词}加入ms数组 |
||||
t: (parseFloat(s[0]) * 60 + parseFloat(s[1])).toFixed(3), |
||||
c: content |
||||
}); |
||||
} |
||||
} |
||||
} |
||||
oLRC.ms.sort(function (a, b) {//按时间顺序排序 |
||||
return a.t - b.t; |
||||
}); |
||||
return oLRC |
||||
/* |
||||
for(let i in oLRC){ //查看解析结果 |
||||
console.log(i,":",oLRC[i]); |
||||
}*/ |
||||
}, |
||||
t(txt) { |
||||
// if (this.test.length === 2) return |
||||
this.lyricsTexts.push(txt) |
||||
nextTick(() => { |
||||
let comments = this.$refs['lyrics-wrapper'] |
||||
comments.scrollTo({top: comments.scrollHeight - comments.clientHeight, behavior: 'smooth'}) |
||||
}) |
||||
}, |
||||
start(e) { |
||||
this.startX = e.touches[0].pageX |
||||
}, |
||||
move(e) { |
||||
this.isMove = true |
||||
this.pageX = this.lastPageX + (e.touches[0].pageX - this.startX) |
||||
if (this.pageX < 0) this.pageX = 0 |
||||
if (this.pageX > this.slideBarWidth) this.pageX = this.slideBarWidth - 5 |
||||
this.currentTime = Math.ceil(this.pageX / this.step) |
||||
globalMethods.$stopPropagation(e) |
||||
}, |
||||
end(e) { |
||||
this.lastPageX = this.pageX |
||||
this.currentTime = Math.ceil(this.pageX / this.step) |
||||
this.audio.currentTime = this.currentTime |
||||
this.audio.play() |
||||
this.isMove = false |
||||
globalMethods.$stopPropagation(e) |
||||
}, |
||||
$durationTime(time) { |
||||
if (time === 0) return '00:00' |
||||
else { |
||||
return this.$duration(time) |
||||
} |
||||
}, |
||||
durationStyle(type) { |
||||
// return {} |
||||
if (type === 1) { |
||||
return {width: this.pageX + 'px'} |
||||
} |
||||
return {left: this.pageX + 'px'} |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="less"> |
||||
@import "@/assets/less/index.less"; |
||||
|
||||
.SlideItemMusic { |
||||
color: white; |
||||
font-size: 1.4rem; |
||||
min-width: 100vw; |
||||
min-height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
position: relative; |
||||
background: linear-gradient(to bottom right, rgba(136, 132, 133, 1), rgba(136, 132, 133, .7)); |
||||
|
||||
|
||||
.cover { |
||||
margin-top: 8rem; |
||||
width: 80vw; |
||||
height: 80vw; |
||||
|
||||
img { |
||||
border-radius: 2.5rem; |
||||
object-fit: cover; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
} |
||||
|
||||
.lyrics-wrapper { |
||||
margin-top: 3rem; |
||||
overflow: auto; |
||||
height: 8rem; |
||||
|
||||
.container { |
||||
min-height: 8rem; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: flex-end; |
||||
} |
||||
|
||||
.lyrics { |
||||
height: 4rem; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
} |
||||
|
||||
.lyrics-mask { |
||||
top: calc(80vw + 7rem); |
||||
height: 8rem; |
||||
width: 100vw; |
||||
position: absolute; |
||||
} |
||||
|
||||
.lyrics-full { |
||||
width: 100vw; |
||||
height: 60vh; |
||||
display: flex; |
||||
//align-items: center; |
||||
justify-content: center; |
||||
overflow: hidden; |
||||
|
||||
.list { |
||||
.item { |
||||
display: flex; |
||||
justify-content: center; |
||||
height: 4rem; |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
.bottom { |
||||
position: absolute; |
||||
bottom: 0; |
||||
width: 100vw; |
||||
|
||||
.desc { |
||||
width: 100vw; |
||||
padding: @padding-page; |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: flex-end; |
||||
|
||||
img { |
||||
width: 3.5rem; |
||||
} |
||||
|
||||
.left { |
||||
.name { |
||||
font-size: 1.8rem; |
||||
margin-bottom: .4rem; |
||||
} |
||||
|
||||
.author { |
||||
font-size: 1.4rem; |
||||
} |
||||
} |
||||
|
||||
.right { |
||||
.btn { |
||||
display: flex; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
margin-top: 2rem; |
||||
font-size: 1.2rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.progress { |
||||
width: 100vw; |
||||
font-size: 1.2rem; |
||||
padding: 0 @padding-page; |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
color: gainsboro; |
||||
|
||||
.bar { |
||||
margin: 0 .6rem; |
||||
flex: 1; |
||||
position: relative; |
||||
|
||||
.slide-bar { |
||||
position: absolute; |
||||
height: 2rem; |
||||
width: 100%; |
||||
top: -1rem; |
||||
z-index: 11; |
||||
} |
||||
|
||||
&:before { |
||||
z-index: 9; |
||||
content: ' '; |
||||
height: 1.5px; |
||||
width: 100%; |
||||
background: gray; |
||||
position: absolute; |
||||
top: 0; |
||||
} |
||||
|
||||
.bar-line { |
||||
z-index: 10; |
||||
content: ''; |
||||
position: absolute; |
||||
top: 0; |
||||
height: 1.5px; |
||||
width: 50vw; |
||||
background: white; |
||||
} |
||||
|
||||
.bar-point { |
||||
z-index: 10; |
||||
position: absolute; |
||||
left: 50vw; |
||||
top: -3px; |
||||
height: .8rem; |
||||
width: .8rem; |
||||
border-radius: 50%; |
||||
background: white; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.options { |
||||
width: 100vw; |
||||
padding: @padding-page; |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
|
||||
img { |
||||
width: 3.8rem; |
||||
height: 3.8rem; |
||||
} |
||||
|
||||
.center { |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
img { |
||||
margin: 0 1rem; |
||||
} |
||||
|
||||
.control { |
||||
width: 5.5rem; |
||||
height: 5.5rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue