增加音乐,摇一摇,服务等页面

2026-02-15 19:41:13 +08:00
parent abd279e7a7
commit 271ec4b9c2
74 changed files with 14021 additions and 2 deletions
@@ -0,0 +1,130 @@
+<template>
+	 <view v-if="currentPlaySong != null" class="play-bar flex-v-center" @click="bindOnShowPlayViewPopup">
+		<view class="music-cover flex-v-h-center" :class="currentPlayer.playState ? 'spin-start':'spin-stop'">
+			<u-avatar :src="currentPlaySong.pic" mode="circle" size='70'></u-avatar>
+		</view>
+		<view style="width: 64%;">
+			<view class="music-info flex-v-center text-line-1">
+				<view class="music-name text-line-1">{{currentPlaySong.songName}}</view>
+				<view class="line">-</view>
+				<view class="music-singer text-line-1">{{currentPlaySong.artist}}</view>
+			</view>
+			<view class="u-p-l-20 u-p-r-20 u-flex u-row-between u-col-center">
+				<view  style="width: 80%;">
+					<u-line-progress active-color="#19be6b"
+									 :striped="true" 
+									 :height="8"
+									 :striped-active="true"
+									 :show-percent="false"
+									:percent="currentPlayer.progress"></u-line-progress>
+				</view>
+				<view class="u-font-24 u-tips-color">
+					<text> {{currentPlaySong.songTimeMinutes}}</text>
+				</view>					
+			</view>
+		</view>
+		<view class="bars flex-v-center flex-space-between">
+			<view style="width: 64rpx;">
+				<view class="u-progress-content flex-v-h-center btn-active" @tap.stop="bindOnControllerPlay">
+					<u-icon :class="currentPlayer.playState ? 'play' : 'pause'" 
+					:name="currentPlayer.playState ? 'pause-circle' : 'play-circle'" size="54"></u-icon>
+				</view>
+			</view>
+			<view class="tools-item btn-active"  style="display: inline-block;" @tap.stop="bindOnShowPlayListPopup">
+				<u-icon name="music-list" custom-prefix="custom-icon" size="54"></u-icon>
+			</view>
+		</view>
+	</view>
+	<view v-else class="play-bar flex-v-center test-border u-tips-color">
+		<view  style="text-align: center;width: 100%;">
+			<text>当前暂无播放歌曲记录</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+			
+			};
+		},
+		methods:{
+			bindOnControllerPlay(){
+				this.$emit("changePlayStatus");
+			},
+			bindOnShowPlayListPopup(){
+				this.$emit("showPlayList")
+			},
+			bindOnShowPlayViewPopup(){
+				this.$emit("showPlayView")
+			},
+		}
+	}
+</script>
+<style>
+	@import "@/static/music/music.css";
+</style>
+<style lang="scss" scoped>
+	.play-bar{
+		position: fixed;
+		bottom: 30px;
+		left: 0;
+		width: 100%;
+		height: 120rpx;
+		background-color: #ffffff;
+		padding:  0 40rpx;
+		z-index: 1000;
+		.music-cover{
+			width: 100rpx;
+			height: 100rpx;
+			background-image: url('@/static/music/disc-plus.png');
+			background-size: 100% 100%;
+			flex-shrink:0;
+			-webkit-transform: rotate(360deg);
+			animation: rotation 10s linear infinite;
+			-moz-animation: rotation 10s linear infinite;
+			-webkit-animation: rotation 10s linear infinite;
+			-o-animation: rotation 10s linear infinite;
+		}
+		@-webkit-keyframes rotation{
+			from {-webkit-transform: rotate(0deg);}
+			to {-webkit-transform: rotate(360deg);}
+		}
+		.spin-stop{
+			-webkit-animation-play-state:paused
+		}
+		.spin-start{
+			-webkit-animation-play-state:running
+		}
+		.music-info{
+			display: flex;
+			padding: 0 20rpx;
+			flex: 1;
+			.music-name{
+				max-width: 65%;
+				flex-shrink:0;
+			}
+			.line{
+				padding: 0 10rpx;
+				color: $uni-text-color-disable;
+				font-size: $uni-font-size-sm;
+			}
+			.music-singer{
+				max-width: 35%;
+				color: $uni-text-color-disable;
+				font-size: $uni-font-size-sm;
+			}
+		}
+		.bars{
+			width: 160rpx;
+			text-align: right;
+			height: 100%;
+			.u-progress-content{
+				width: 100%;
+				height: 100%;
+				padding-left: 4rpx;
+			}
+		}
+	}
+</style>