uniapp 仿网易云音乐播放器 微信小程序

效果视频:

效果截图:

 上代码:
 

<template>
 
	<view class="">
		<scroll-view :style="{ height: 100 + 'vh' }" v-if="isExamine" scroll-y="true" class="scroll_my">
			<view class="bgs">
				<image :src="musicArr[bottom_music_index].arr[bottom_music_row_index].img" mode="heightFix"></image>
				<view class="inner">
 
				</view>
			</view>
			<swiper class="swiper" :current="pageOneBoxIndex" @animationfinish="pageOneChange">
				<swiper-item>
					<view :class="['conts',pageOneBoxIndex == 0?'opacityShow':'']">
						<view class="box">
							<view class="top">
								<view class="title">
									{{musicArr[bottom_music_index].arr[bottom_music_row_index].name}}
								</view>
								<view class="name">
									{{musicArr[bottom_music_index].arr[bottom_music_row_index].singer}}
								</view>
							</view>
							<view class="center" style="position: relative;">
								<view class="">
									<view class="one">
										<view :class="['zhen',isLoop?'zhuan':'']">
											<image src="../../static/needle-ab.png" mode="widthFix"></image>
										</view>
									</view>
									<view class="swiper_box">
										<view class="yuan_top">
											<view class="box_yuan">
												<view class="box_yuan_cont">
 
												</view>
											</view>
										</view>
										<swiper v-if="swiperMusicShow" class="swiper_img" :circular="true"
											:duration="durationTime" :current="bottom_music_row_index"
											@transition="startMy" @animationfinish="endMy" @change="changeMy"
											style="z-index: 0;">
											<swiper-item v-for="(item , index) in musicArr[bottom_music_index].arr"
												:key="index" style="z-index: 0;">
												<view class="two" @click="showLyric" style="z-index: -1;">
													<view class="yuan" style="z-index: -1;">
														<image src="../../static/disc.png" mode="widthFix"></image>
													</view>
													<view class="logos_w" >
														<view :class="['logos',isLoop?'yes':'no']" >
															<image :src="item.img" mode="widthFix"></image>
														</view>
													</view>
												</view>
											</swiper-item>
										</swiper>
									</view>
									<view class="lyrics_box">
										<view v-if="textArr.length > 0" class=""
											:style="[{ transform: `translateY(-${offset}px)`}]">
											<view :class="['lyrics_item']" v-for="(item,index) in textArr" :key="index">
												{{item.text}}
											</view>
										</view>
										<view v-else class="no_geci_one lyrics_item">
											纯音乐，暂无歌词
										</view>
									</view>
								</view>
							</view>
							<view class="bottoms">
								<view class="one">
									<view class="">
										{{formatTime(timeThe)}}
									</view>
									<view class="time">
										<slider :value="timeThe" activeColor="#e60026" block-size="10"
											block-color="#fdfdfe" backgroundColor="#888" :min="timeMin" :max="timeMax"
											@change="sliderChange" step="1" />
									</view>
									<view class="">
										{{formatTime(timeMax)}}
									</view>
								</view>
 
 
								<view class="two">
									<view class="left" @click="refreshs">
										<uni-icons type="refreshempty" size="30" color="#fff"></uni-icons>
										<view class="once" v-show="isCycle">
											1
										</view>
									</view>
									<view class="two_c">
										<view class="l" @click="gos(1)">
											<image src="../../static/l.png" mode="widthFix"></image>
										</view>
										<view class="c" @click="musicChange">
											<image style="margin-left: 10rpx;" v-show="!isLoop"
												src="../../static/no.png" mode="widthFix">
											</image>
											<image v-show="isLoop" src="../../static/yes.png" mode="widthFix"></image>
										</view>
										<view class="r" @click="gos(2)">
											<image src="../../static/r.png" mode="widthFix"></image>
										</view>
									</view>
									<view class="right" @click="show">
										<uni-icons type="list" size="30" color="#fff"></uni-icons>
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="my_page_two">
					<view   :class="['conts twoPage',pageOneBoxIndex == 1?'opacityShow':'']" style="transition: all 0s; ">
						<view class="">
							<view class="one">
								<view class="title">
									{{musicArr[bottom_music_index].arr[bottom_music_row_index].name}}
								</view>
								<view class="name">
									{{musicArr[bottom_music_index].arr[bottom_music_row_index].singer}}
								</view>
							</view>
							<view class="" style="position: relative;">
								<scroll-view v-if="textArr.length > 0" :style="{ height: pageHeightOne +'px' }"
									scroll-y="true" :scroll-top="twoPageOffset" class="scroll_my_two" @scroll="scrolls">
									<view class="lyrics_box_two">
										<view class="">
											<view
												:class="['lyrics_item',lyricsIndex == index?'activate':'',go_index == index?'activate_two':'']"
												v-for="(item,index) in textArr" :key="index">
												{{item.text}}
											</view>
										</view>
									</view>
								</scroll-view>
								<view v-else class="no_geci_two" :style="{ height: pageHeightOne +'px' }">
									纯音乐，暂无歌词
								</view>
								<view class="fexd" v-if="textArr.length > 0">
									<view class="boxs" @click="goTos">
										<view class="imgs">
											<image src="../../static/no.png" mode="widthFix"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="three">
							<view class="c" @click="musicChange">
								<image v-show="!isLoop" src="../../static/2.png" mode="widthFix">
								</image>
								<image v-show="isLoop" src="../../static/1.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
 
 
			<uni-popup ref="popup" background-color="rgba(0,0,0,0)" type="bottom" :safe-area="false">
				<view class="popup_box">
					<view class="popup_box_title">
						<view :class="['item',bottom_index == 0 ?'activate':'']" style="margin-right: 40rpx;"
							@click="bottom_index = 0">
							歌曲排行
						</view>
						<view :class="['item',bottom_index == 1 ?'activate':'']" class="item" @click="bottom_index = 1">
							当前播放
						</view>
					</view>
					<swiper class="swiper_bottom" :current="bottom_index" @change="swiperChange">
						<swiper-item>
							<view class="swiper-item">
								<view class="musicArr_one_list">
									<scroll-view :style="{ height: 100 + '%' }" scroll-y="true">
										<view class="" style="padding-bottom: 50rpx;">
											<view :class="['item',bottom_music_index == index?'item_activate':'']"
												v-for="(item,index) in musicArr" :key="index"
												@click="changPlaylist(index)">
												<view class="tops">
													<view class="l">
														{{item.name}}
													</view>
												</view>
												<view class="bottoms_swiper">
													<view class="l">
														<image :src="item.img" mode="widthFix"></image>
													</view>
													<view class="r">
														<view class="r_item">
															<view class="one">
																<text>1</text>
																{{item.arr[0].name}}
															</view>
															<view class="two">
																{{item.arr[0].singer}}
															</view>
														</view>
														<view class="r_item">
															<view class="one">
																<text>2</text>
																{{item.arr[1].name}}
															</view>
															<view class="two">
																{{item.arr[1].singer}}
															</view>
														</view>
														<view class="r_item">
															<view class="one">
																<text>3</text>
																{{item.arr[2].name}}
															</view>
															<view class="two">
																{{item.arr[2].singer}}
															</view>
														</view>
													</view>
												</view>
											</view>
										</view>
									</scroll-view>
								</view>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">
								<view class="musicArr_two_list">
									<scroll-view :style="{ height: 100 + '%' }" scroll-y="true">
										<view class="" style="padding-bottom: 50rpx;">
											<view
												:class="['two_item',bottom_music_row_index == index?'two_item_activate':'']"
												v-for="(item ,index) in musicArr[bottom_music_index].arr" :key="index"
												@click="changSong(index)">
												<view class="l">
													<text>{{item.name}}</text>
													<view class="play_s" v-if="bottom_music_row_index == index">
														<image src="../../static/play_row.png" mode="widthFix"></image>
													</view>
												</view>
												<view class="r">
													{{item.singer}}
												</view>
											</view>
										</view>
									</scroll-view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</uni-popup>
		</scroll-view>
		<view v-else class="">
			<view class="meng">
				<view class="meng_n">
					<image src="../../static/new_bg.jpg" mode="widthFix"></image>
				</view>
				<view class="wyy_logo_w">
					<view class="datas">
						<view class="imgs">
							<image src="../../static/wyy.png" mode="widthFix"></image>
						</view>
						我们已经相爱了 {{diffDays}} 天了
					</view>
				</view>
			</view>
		</view>
		<view v-if="isMeng" :class="['meng',countdown<=0?'fade-out':'']">
			<view class="meng_n">
				<image src="../../static/new_bg.jpg" mode="widthFix"></image>
			</view>
			<view class="wyy_logo_w">
				<view class="wyy_logo">
					<image src="../../static/wyy.png" mode="widthFix"></image>
				</view>
				<view class="wyy_title">
					我们已经相爱了 {{diffDays}} 天了
				</view>
			</view>
			<view class="skip_w">
				<view class="skip" @click="skip">
					跳过( {{countdown}}s )
				</view>
			</view>
		</view>
	</view>
</template>
 
<script>
	const musicArrStatic = require('../../utils/musicArr.js')
	export default {
		components: {},
		data() {
			return {
				pageOneBoxIndex: 0,
				durationTime: 500, //滑动时长
				musicArr: musicArrStatic.musicArr,
				textArr: [],
				timeMin: 0,
				timeMax: 10,
				timeThe: 0,
				audioSrc: '',
				isLoop: false,
				offset: 0, //第一屏歌词滚动距离
				pageHeightOne: 0, //第二屏歌词高度
				lyricsIndex: 0, //第二屏使用
				twoPageOffset: 0,
				maxOffset: 0,
				go_index: 4, //第二页前往的下标
				pageOneBoxHeightOne: 0, //整屏高度
				bottom_index: 1, //底部弹出轮播下标
				bottom_music_index: 0, // 选中的歌单下标
				bottom_music_row_index: 0, // 选中的歌单中的歌曲下标
				isCycle: false, //是否循环播放
				countdown: 60, //倒计时
				timer: null,
				isMeng: true, //是否显示蒙版
				isBackLoop: false, //背景音乐是否关闭
				isExamine: false,
				diffDays: "", //在一起时间
				swiperMusicShow: true, //音乐轮播是否显示
				isTabMusic: false,
			}
		},
		onShareAppMessage() {
			return {
				title: '等风来云空间', // 分享标题
				path: "pages/index/index", // 分享路径
				imageUrl: "../../static/wyy.png", // 分享图片
			}
		},
		created() {
			const bottom_music_index = uni.getStorageSync('bottom_music_index'); //歌单下标
			const bottom_music_row_index = uni.getStorageSync('bottom_music_row_index'); //歌曲下标
			if (bottom_music_index) this.bottom_music_index = bottom_music_index
			if (bottom_music_row_index) this.bottom_music_row_index = bottom_music_row_index
			// 获取当前时间戳
			const nowTimeStamp = new Date().getTime();
			// 指定时间戳
			const targetTimeStamp = 1686300316 * 1000;
 
			if (nowTimeStamp > targetTimeStamp) {
				this.isExamine = true
			}
 
			// 获取当前时间
			const today = new Date();
 
			// 设置2018/7/11的时间
			const target = new Date('2018/7/11');
 
			// 计算两个时间的时间差
			const diffTime = today.getTime() - target.getTime();
 
			// 计算时间差的天数
			const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
			this.diffDays = diffDays
			this.timer = setInterval(() => {
				if (this.isMeng) {
					this.countdown--
					if (this.countdown <= 0) {
						clearInterval(this.timer)
						setTimeout(() => {
							this.isMeng = false //关闭蒙版
							if (this.isExamine) {
								this.setMusicOne(this.musicArr[this.bottom_music_index].arr[this
										.bottom_music_row_index].src,
									this.musicArr[this.bottom_music_index].arr[this
										.bottom_music_row_index]
									.time, this
									.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index]
									.lrc
								)
								this.setLyric()
							}
						}, 400)
					}
				} else {
					clearInterval(this.timer)
				}
			}, 1000)
			if (this.isExamine) {
				const token = uni.getStorageSync('isCycleToken'); //是否循环播放
				if (token) {
					this.isCycle = token
				}
				if (uni.getWindowInfo().windowHeight < 750) {
					this.pageOneBoxHeightOne = 800
				} else {
					this.pageOneBoxHeightOne = uni.getWindowInfo().windowHeight
				}
				console.log(uni.getWindowInfo().windowHeight, '电脑');
				this.pageHeightOne = uni.getWindowInfo().windowHeight * 0.7
				this.maxOffset = this.textArr.length * 50 - this.pageHeightOne / 2
				this.audioSrc = uni.getBackgroundAudioManager()
 
 
				this.audioSrc.onTimeUpdate(res => {
					const time = this.formatTime(this.audioSrc.duration)
					this.timeThe = this.audioSrc.currentTime
					const index = this.getIndex(this.audioSrc.currentTime)
					this.lyricsIndex = index
					this.setOffset(index)
					this.isBackLoop = false
				})
				this.audioSrc.onPlay(() => {
					this.isLoop = true
					this.isBackLoop = false
				})
 
				// 监听音频暂停事件
				this.audioSrc.onPause(() => {
					this.isLoop = false
					this.isBackLoop = false
				})
 
				// 监听音频停止事件
				this.audioSrc.onStop(() => {
					this.isLoop = false
					this.isBackLoop = true
				})
 
				// 音乐播放失败
				this.audioSrc.onError(() => {
					this.isLoop = false
					if (!this.isMeng) {
						uni.showToast({
							icon: "none",
							title: '音乐失效,请切换别的音乐',
							duration: 1000
						});
					}
				})
				// 系统按钮上一首
				this.audioSrc.onPrev(() => {
					this.gos(1)
				})
				// 系统按钮下一首
				this.audioSrc.onNext(() => {
					this.gos(2)
				})
				//监听播放完成
				this.audioSrc.onEnded(() => {
					if (this.isCycle) {
						//单曲循环
						this.setMusic(this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].src,
							this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].time, this
							.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].lrc)
						this.$nextTick(() => {
							this.audioSrc.play()
							this.isLoop = true
						})
					} else {
						//列表循环
						if (this.bottom_music_row_index == this.musicArr[this.bottom_music_index].arr.length - 1) {
							this.bottom_music_row_index = 0
							this.setMusic(this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index]
								.src,
								this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].time,
								this
								.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].lrc)
							this.$nextTick(() => {
								this.audioSrc.play()
								this.isLoop = true
							})
						} else {
							this.bottom_music_row_index++
							this.setMusic(this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index]
								.src,
								this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].time,
								this
								.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].lrc)
							this.$nextTick(() => {
								this.audioSrc.play()
								this.isLoop = true
							})
						}
					}
				})
			}
		},
		methods: {
			// 跳过关闭蒙版
			skip() {
				setTimeout(() => {
					this.isMeng = false //关闭蒙版
					if (this.isExamine) {
						this.setMusicOne(this.musicArr[this.bottom_music_index].arr[this
								.bottom_music_row_index].src,
							this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index]
							.time, this
							.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].lrc
						)
						this.setLyric()
					}
				}, 400)
			},
			// 轮播开始
			startMy() {
				this.audioSrc.pause()
				this.isLoop = false
			},
			changeMy(e) {
				this.audioSrc.seek(0)
				uni.setStorageSync('bottom_music_row_index', e.detail.current);
			},
			// 轮播结束
			endMy(e) {
				this.bottom_music_row_index = e.detail.current
				this.setMusic(this.musicArr[this.bottom_music_index].arr[this
						.bottom_music_row_index].src,
					this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index]
					.time, this
					.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].lrc
				)
			},
			//第一次设置音乐
			setMusicOne(src, nums, musicText) {
				if (this.isExamine) {
					console.log('我出发了');
					const text_Arr = musicText.split("\n");
					this.textArr = []
					text_Arr.forEach(item => {
						let one_text = item.split("]");
						let time = one_text[0].split("[")[1]
						if (time) {
							this.textArr.push({
								time: this.timeConversion(time),
								// time: 0,
								text: one_text[1]
							})
						}
					})
					this.textArr.pop()
					this.audioSrc.title = this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].name;
					this.audioSrc.singer = this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].singer;
					this.audioSrc.coverImgUrl = this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index]
						.img;
					// let num = 198.034286 //写死的长度  ios无法获取音频总长度
					this.timeMax = this.timeConversion(nums) //设置时间
				}
			},
			// 设置歌词
			setLyric() {
				console.log('设置歌词');
				const text_Arr = this
					.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].lrc.split("\n");
				this.textArr = []
				text_Arr.forEach(item => {
					let one_text = item.split("]");
					let time = one_text[0].split("[")[1]
					if (time) {
						this.textArr.push({
							time: this.timeConversion(time),
							// time: 0,
							text: one_text[1]
						})
					}
				})
				this.textArr.pop()
			},
			//设置音乐
			setMusic(src, nums, musicText) {
				if (this.isExamine) {
					console.log('我出发了');
					const text_Arr = musicText.split("\n");
					this.textArr = []
					text_Arr.forEach(item => {
						let one_text = item.split("]");
						let time = one_text[0].split("[")[1]
						if (time) {
							this.textArr.push({
								time: this.timeConversion(time),
								// time: 0,
								text: one_text[1]
							})
						}
					})
					this.textArr.pop()
					//防止自动播放
					if (!this.isMeng) {
						this.audioSrc.src = src
					}
					this.audioSrc.title = this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].name;
					this.audioSrc.singer = this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].singer;
					this.audioSrc.coverImgUrl = this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index]
						.img;
					this.timeMax = this.timeConversion(nums) //设置时间
					uni.setStorageSync('bottom_music_row_index', this.bottom_music_row_index);
					uni.setStorageSync('bottom_music_index', this.bottom_music_index);
				}
			},
			// 设置图片
			setImg(oneIndex, twoIndex) {
 
			},
			// 歌词与音乐唱片切换
			pageOneChange(e) {
				this.pageOneBoxIndex = e.detail.current
			},
			// 显示歌词
			showLyric() {
				this.pageOneBoxIndex = 1
				// this.isTabMusic = true
			},
			//进度条
			sliderChange(e) {
				if (!this.audioSrc.src) {
					this.setMusic(this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].src,
						this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].time, this
						.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].lrc)
						uni.showToast({
							icon: "none",
							title: '音乐未加载完成',
							duration: 1000
						});
						this.$nextTick(()=>{
							this.audioSrc.seek(e.detail.value)
							this.audioSrc.play()
							this.isLoop = true
						})
						return
				}
				// console.log(e.detail.value);
				this.audioSrc.seek(e.detail.value)
				this.audioSrc.play()
				this.isLoop = true
			},
			//播放暂停按钮事件
			musicChange() {
				console.log(this.audioSrc.src);
				if (!this.audioSrc.src) {
					this.setMusic(this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].src,
						this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].time, this
						.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].lrc)
					return
				}
				if (this.isLoop) {
					this.audioSrc.pause()
					this.isLoop = false
				} else {
					if (this.isBackLoop) {
						//背景音乐关闭
						this.setMusic(this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].src,
							this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].time, this
							.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].lrc)
					} else {
						//背景音乐没有关闭
						this.audioSrc.play()
						this.isLoop = true
					}
				}
			},
			// 换算秒数
			formatTime(time) {
				let minute = Math.floor(time / 60)
				let second = Math.floor(time % 60)
				return `${minute}:${second < 10 ? '0' + second : second}`
			},
			// 前进后退
			gos(index) {
				if (index == 1) {
					//上一首
					if (this.bottom_music_row_index == 0) {
						this.bottom_music_row_index = this.musicArr[this.bottom_music_index].arr.length - 1
						this.setMusic(this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].src, this
							.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].time, this.musicArr[
								this.bottom_music_index].arr[this.bottom_music_row_index].lrc)
						this.$nextTick(() => {
							this.audioSrc.play()
							this.isLoop = true
						})
					} else {
						this.bottom_music_row_index--
						this.setMusic(this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].src, this
							.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].time, this.musicArr[
								this.bottom_music_index].arr[this.bottom_music_row_index].lrc)
						this.$nextTick(() => {
							this.audioSrc.play()
							this.isLoop = true
						})
					}
				} else {
					//下一首
					if (this.bottom_music_row_index == this.musicArr[this.bottom_music_index].arr.length - 1) {
						console.log('没有下一首');
						this.bottom_music_row_index = 0
						this.setMusic(this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].src, this
							.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].time, this.musicArr[
								this.bottom_music_index].arr[this.bottom_music_row_index].lrc)
						this.$nextTick(() => {
							this.audioSrc.play()
							this.isLoop = true
						})
					} else {
						console.log('有下一首');
						this.bottom_music_row_index++
						this.setMusic(this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].src, this
							.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].time, this.musicArr[
								this.bottom_music_index].arr[this.bottom_music_row_index].lrc)
						this.$nextTick(() => {
							this.audioSrc.play()
							this.isLoop = true
						})
					}
				}
				console.log(this.bottom_music_row_index, '下标');
				this.isLoop = true
				this.audioSrc.play()
			},
			//转换时间
			timeConversion(time) {
				// console.log(time,'我的');
				if (time) {
					let parts = time.split(':')
					return +parts[0] * 60 + +parts[1]
				} else {
					return 0
				}
			},
			//获取高亮歌词下标
			getIndex(times) {
				for (var i = 0; i < this.textArr.length; i++) {
					if (times < this.textArr[i].time) {
						return i - 1
					}
				}
				return this.textArr.length - 1
			},
			// 设置歌词偏移量
			setOffset(index) {
				let offset = 50 * index
				let offsetTwo = 50 * index - 50 * 4
 
				if (offsetTwo < 0) {
					offsetTwo = 0
				}
				this.offset = offset
				this.twoPageOffset = offsetTwo
			},
			// 第二屏滚动
			scrolls(e) {
				let index = Math.floor(e.detail.scrollTop / 50)
				if (index == 0) {
					this.go_index = 0 + 4
 
				} else {
					this.go_index = index - 1 + 5
				}
			},
			// 第二屏前往
			goTos() {
				if (!this.audioSrc.src) {
					this.setMusic(this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].src,
						this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].time, this
						.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].lrc)
						uni.showToast({
							icon: "none",
							title: '音乐未加载完成',
							duration: 1000
						});
						this.$nextTick(()=>{
							this.audioSrc.seek(this.textArr[this.go_index].time)
							this.timeThe = this.textArr[this.go_index].time
							this.isLoop = true
							this.audioSrc.play()
						})
						return
				}
				this.audioSrc.seek(this.textArr[this.go_index].time)
				this.timeThe = this.textArr[this.go_index].time
				this.isLoop = true
				this.audioSrc.play()
				// console.log(this.textArr[this.go_index].time);
			},
			// 更改循环方式
			refreshs() {
				if (this.isCycle) {
					//列表循环
					uni.setStorageSync('isCycleToken', false);
					this.isCycle = false
					uni.showToast({
						icon: "none",
						title: '列表循环',
						duration: 1000
					});
				} else {
					//单曲循环
					uni.setStorageSync('isCycleToken', true);
					this.isCycle = true
					uni.showToast({
						icon: "none",
						title: '单曲循环',
						duration: 1000
					});
				}
			},
			// 显示
			show() {
				this.$refs.popup.open('bottom')
			},
			// 底部轮播触发
			swiperChange(e) {
				this.bottom_index = e.detail.current
			},
			// 更换歌曲
			changSong(index) {
				this.swiperMusicShow = false
				this.bottom_music_row_index = index
				this.setMusic(this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].src, this.musicArr[
					this.bottom_music_index].arr[this.bottom_music_row_index].time, this.musicArr[this
					.bottom_music_index].arr[this.bottom_music_row_index].lrc)
				this.$nextTick(() => {
					this.isLoop = true
					this.swiperMusicShow = true
				})
 
			},
			// 更换歌单
			changPlaylist(index) {
				this.swiperMusicShow = false
				this.bottom_index = 1
				this.bottom_music_index = index
				this.bottom_music_row_index = 0
				this.setMusic(this.musicArr[this.bottom_music_index].arr[this.bottom_music_row_index].src, this.musicArr[
					this.bottom_music_index].arr[this.bottom_music_row_index].time, this.musicArr[this
					.bottom_music_index].arr[this.bottom_music_row_index].lrc)
				this.$nextTick(() => {
					this.isLoop = true
					this.swiperMusicShow = true
				})
			}
		}
	}
</script>
 
<style lang="scss" scoped>
	.conts {
		opacity: 0;
		transition: all .3s; 
	}
	// .my_page_two {
	// 	opacity: 0;
	// 	transition: all 1s; 
	// }
	.opacityShow {
		opacity: 1;
	}
	.zhen {
		position: absolute;
		width: 210rpx;
		left: 47%;
		transform: matrix(-50%);
		top: 0;
		transform: rotate(-40deg);
		transform-origin: 16px 20px;
		transition: all 0.5s;
		z-index: 9999;
	}
 
	@media screen and (min-width: 500px) {
		.zhen {
			width: 150rpx;
		}
	}
 
	.zhuan {
		transform: rotate(-10deg);
	}
 
	.yuan_top {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 84%;
 
		.box_yuan {
			position: relative;
			width: 100%;
			padding-bottom: 100%;
			border-radius: 50%;
			background-color: rgba(225, 225, 225, 0.2);
			display: flex;
			align-items: center;
			justify-content: center;
 
			.box_yuan_cont {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 90%;
				height: 90%;
				background-color: rgba(0, 0, 0, 0.2);
				border-radius: 50%;
			}
		}
	}
 
	.swiper_box {
		position: relative;
		padding-bottom: 84%;
		z-index: 1;
		// background: url('../../static/fff.png') no-repeat;
		// background-size: 100% auto;
	}
 
	.swiper_img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
	}
 
	@media screen and (min-width: 500px) {
		.swiper_box {
			padding-bottom: 61%;
		}
 
		.yuan_top {
			top: 49%;
			max-width: 450rpx;
		}
	}
 
	.datas {
		// position: fixed;
		// width: 100%;
		// height: 100%;
		// left: 0;
		// top: 0;
		font-size: 32rpx;
 
		.imgs {
			width: 120rpx;
			border-radius: 15rpx;
			overflow: hidden;
			margin: 0 auto;
			margin-bottom: 15rpx;
		}
	}
 
	::v-deep .uni-popup .uni-popup__wrapper {
		// max-width: 450px;
		margin: 0 auto;
	}
 
	.fade-out {
		opacity: 0;
		/* 初始透明度为 0 */
		transition: opacity 0.5s ease-out;
		/* 添加过渡效果 */
	}
 
	.meng {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #fff;
		z-index: 99999999;
 
		.meng_n {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 100%;
			// max-width: 450px;
			opacity: .36;
 
		}
 
		.meng_n::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: -10px;
			z-index: 3;
			width: 100%;
			height: 20%;
			background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
			z-index: 1;
		}
 
		.meng_n::before {
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			z-index: 3;
			width: 100%;
			height: 20%;
			background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
			z-index: 1;
		}
 
		.wyy_logo_w {
			z-index: 10;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 60rpx;
			width: 100%;
			// max-width: 450px;
			padding-bottom: env(safe-area-inset-bottom);
			text-align: center;
			font-size: 28rpx;
 
			.wyy_logo {
				width: 100rpx;
				margin: 0 auto;
				margin-bottom: 20rpx;
				border-radius: 15rpx;
				overflow: hidden;
			}
		}
 
		.skip_w {
			z-index: 10;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			top: 15px;
			width: 100%;
			// max-width: 450px;
			display: flex;
			justify-content: flex-end;
			padding-right: 30px;
		}
	}
 
	.no_geci_two {
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
	.no_geci_one {
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
	.swiper_bottom {
		// background-color: red;
		height: calc(54vh - env(safe-area-inset-bottom));
 
		.swiper-item {
			padding: 0 15rpx;
			height: 100%;
		}
	}
 
	.popup_box {
		background-color: #fff;
		height: 60vh;
		border-radius: 30rpx 30rpx 0 0;
		box-sizing: border-box;
		// padding: 30rpx;
		padding-top: 15rpx;
		padding-bottom: env(safe-area-inset-bottom);
 
		.popup_box_title {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			color: #a1a2a5;
			height: 40px;
			margin-bottom: 15rpx;
 
			.activate {
				color: #000;
				font-weight: 700;
				position: relative;
			}
 
			.activate::after {
				position: absolute;
				left: 50%;
				bottom: -30%;
				transform: translateX(-50%);
				content: '';
				width: 40%;
				height: 8rpx;
				background-color: #d6454f;
				border-radius: 20rpx;
			}
		}
 
		.musicArr_one_list {
			height: 100%;
 
			.item {
				margin-bottom: 20rpx;
				padding: 20rpx;
				padding-bottom: 20rpx;
				border-radius: 20rpx;
 
				// background-color: red;
				.tops {
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					margin-bottom: 15rpx;
 
					.l {
						font-size: 40rpx;
						color: #000;
						font-weight: 700;
					}
 
					.r {
						font-size: 24rpx;
						color: #666;
					}
				}
 
				.bottoms_swiper {
					display: flex;
					align-items: center;
 
					.l {
						width: 150rpx;
						border-radius: 10rpx;
						overflow: hidden;
						margin-right: 30rpx;
					}
 
					.r {
						flex: 1;
 
						.r_item {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 4rpx;
 
							.one {
								flex: 2;
								font-size: 28rpx;
								display: flex;
								align-items: center;
								margin-right: 20rpx;
								-webkit-line-clamp: 1;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
 
 
								text {
									margin-right: 15rpx;
									font-size: 34rpx;
									font-weight: 700;
								}
							}
 
							.two {
								flex: 1;
								color: #888;
								font-size: 28rpx;
								-webkit-line-clamp: 1;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								text-align: right;
							}
						}
 
						.r_item:last-child {
							margin: 0;
						}
					}
				}
			}
 
			.item_activate {
				background-color: #f9f9fb;
				border: 1px solid #f8f8f9;
			}
		}
 
		.musicArr_two_list {
			height: 100%;
 
			.two_item {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10rpx 20rpx;
				box-sizing: border-box;
				border-radius: 15rpx;
				margin-bottom: 15rpx;
 
				.l {
					font-size: 30rpx;
					display: flex;
					align-items: center;
					flex: 2;
 
					text {
						-webkit-line-clamp: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
					}
 
					.play_s {
						margin-left: 10rpx;
						width: 40rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
 
				.r {
					font-size: 28rpx;
					color: #888;
					flex: 1.5;
					-webkit-line-clamp: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					text-align: right;
				}
			}
 
			.two_item_activate {
				background-color: #f9f9fb;
				border: 1px solid #f8f8f9;
				color: #e60026;
 
				.r {
					color: #e60026;
				}
			}
		}
	}
 
	.bgs {
		position: relative;
		width: 100%;
		height: 100%;
		text-align: center;
		background-color: #1e1e25;
 
		image {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			width: auto;
			height: 100% !important;
			filter: blur(30px);
		}
 
		.inner {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			backdrop-filter: blur(10px);
			// z-index: -1;
		}
	}
 
	.box {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
	}
 
	.top {
		text-align: center;
		color: #d0d1d0;
 
		.title {
			color: #fff;
			font-size: 34rpx;
			margin-top: 40rpx;
			margin-bottom: 10rpx;
		}
 
		.name {
			font-size: 24rpx;
		}
	}
 
	.center {
		position: relative;
		margin: 0 auto;
		// margin-top: 40rpx;
 
		.one {
			height: 150rpx;
 
		}
 
		@media screen and (min-width: 500px) {
			.one {
				height: 100rpx;
				margin-top: 10rpx;
			}
		}
 
		.two {
			width: 84%;
			position: relative;
			margin: 0 auto;
			z-index: 0;
 
			.logos_w {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 0;
			}
 
			.logos {
				width: 64%;
				border-radius: 50%;
				overflow: hidden;
				animation: rotate 20s linear infinite;
			}
 
			.no {
				animation-play-state: paused;
			}
 
			.yes {
				animation-play-state: running;
			}
		}
 
		@media screen and (min-width: 500px) {
			.two {
				max-width: 450rpx;
				// height: 500rpx;
			}
		}
	}
 
	@media screen and (min-width: 500px) {
		.center {
			// max-width: 500rpx;
		}
	}
 
	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}
 
		to {
			transform: rotate(360deg);
		}
	}
 
	.bottoms {
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 0;
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
		color: #8a8c96;
		font-size: 24rpx;
 
		.one {
			display: flex;
			align-items: center;
			width: 90%;
			margin: 0 auto;
 
			.time {
				flex: 1;
			}
 
			margin-bottom: 20rpx;
		}
 
		.two {
			width: 86%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
 
			.left {
				position: relative;
 
				.once {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					color: #fff;
					font-size: 24rpx;
				}
			}
 
			.two_c {
				display: flex;
				align-items: center;
			}
 
			.l {
				width: 50rpx;
			}
 
			.r {
				width: 50rpx;
			}
 
			.c {
				width: 100rpx;
				height: 100rpx;
				border: 2px solid #fff;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 90rpx;
 
				image {
					width: 45% !important;
				}
			}
		}
	}
 
	.lyrics_box {
		height: 50px;
		overflow: hidden;
		transition: all 0.5s;
		text-align: center;
		margin-top: 10rpx;
		// margin-top: 40rpx;
 
		.lyrics_item {
			width: 90%;
			margin: 0 auto;
			font-size: 28rpx;
			// line-height: 40px;
			line-height: 25px;
			color: #fff;
			height: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
 
	.swiper {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
 
	.scroll_my {
		position: relative;
	}
 
	.twoPage {
		box-sizing: border-box;
		padding: 30rpx 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		color: #fff;
 
		.one {
			position: relative;
			z-index: 7;
 
			.title {
				font-size: 36rpx;
			}
 
			.name {
				font-size: 28rpx;
				color: #d0d1d0;
				margin-top: 10rpx;
			}
		}
 
		.two {}
 
		.three {
			display: flex;
			justify-content: flex-end;
			padding-bottom: calc(env(safe-area-inset-bottom));
 
			.c {
				position: relative;
				z-index: 9;
				width: 80rpx;
				height: 80rpx;
				// border: 2px solid #fff;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #fff;
 
				image {
					width: 105% !important;
				}
			}
		}
	}
 
	.mo {
		width: 100rpx;
		height: 100rpx;
		background-color: red;
	}
 
	.lyrics_box_two {
		.lyrics_item {
			height: 50px;
			line-height: 20px;
			font-size: 18px;
			color: #9e9e9e;
			display: flex;
			align-items: center;
		}
 
		.activate {
			font-size: 20px;
			// line-height: 50px;
			color: #fff !important;
			position: relative;
			z-index: 9;
		}
 
		.activate_two {
			color: #e60026;
		}
	}
 
	.scroll_my_two {
		margin-top: 50rpx;
		position: relative;
	}
 
	.my_page_two {
		// position: relative;
	}
 
	.my_page_two::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 3;
		width: 100%;
		height: 20%;
		background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
	}
 
	.my_page_two::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		z-index: 3;
		width: 100%;
		height: 20%;
		background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
	}
 
	.fexd {
		position: absolute;
		z-index: 999;
		// background-color: red;
		width: 100%;
		height: 50px;
		top: 200px;
		left: 0;
		// line-height: 40px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
 
		.boxs {
			position: relative;
			background-color: rgba(0, 0, 0, 0.2);
			// line-height: 44rpx;
			height: 44rpx;
			// width: 80rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			// justify-content: center;''
			justify-content: flex-end;
			border-radius: 0 20rpx 20rpx 0;
			padding-top: 2rpx;
 
			.imgs {
				position: absolute;
				left: 40%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 10rpx;
			}
		}
 
		.boxs::after {
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			transform: translateX(-100%);
			left: 0;
			top: 0;
			width: 0;
			height: 0;
			line-height: 0;
			font-size: 0;
			border-top: 23rpx solid transparent;
			border-right: 22rpx solid rgba(0, 0, 0, 0.2);
			border-bottom: 23rpx solid transparent;
			border-left: 22rpx solid transparent;
		}
	}
 
	.fexd::after {
		content: '';
		position: absolute;
		width: 80%;
		left: 0;
		height: 1px;
		top: 50%;
		transform: translateY(-50%);
		background-color: rgba(0, 0, 0, 0.2);
	}
 
	::v-deep .uni-scroll-view::-webkit-scrollbar {
		display: none;
	}
</style>