开始开发"正在播放"
This commit is contained in:
zilong
parent
17c34faa18
commit
8448b293a9
37
src/App.vue
37
src/App.vue
@ -34,6 +34,8 @@ const store = useStore();
|
||||
store.commit("loadSettings");
|
||||
store.commit("loadCaches");
|
||||
|
||||
const showPlaying = ref(false); //是否显示播放列表
|
||||
|
||||
//处理route消息
|
||||
const routeToken = pubsub.subscribe(
|
||||
"router",
|
||||
@ -49,9 +51,18 @@ const routeToken = pubsub.subscribe(
|
||||
}
|
||||
);
|
||||
|
||||
const token = pubsub.subscribe("zp", (msg, data) => {
|
||||
switch (msg) {
|
||||
case "zp.togglePlaying":
|
||||
showPlaying.value = !showPlaying.value;
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
//卸载组件
|
||||
onUnmounted(() => {
|
||||
pubsub.unsubscribe(routeToken);
|
||||
pubsub.unsubscribe(token);
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -77,6 +88,9 @@ onUnmounted(() => {
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
<div id="wpPlaying" v-show="showPlaying" @click.self="showPlaying = false">
|
||||
<div id="playing"></div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<div id="songDetail"></div>
|
||||
<div id="songProgress">
|
||||
@ -160,16 +174,35 @@ body {
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
#wpPlaying {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
|
||||
#playing {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: 0;
|
||||
bottom: 64px;
|
||||
// left: 0;
|
||||
width: 600px;
|
||||
background-color: #f6f6f6;
|
||||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
|
||||
#footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
#songDetail {
|
||||
|
||||
}
|
||||
#songProgress {
|
||||
height: 3px;
|
||||
// background-color: red;
|
||||
z-index: 100;
|
||||
z-index: 2000;
|
||||
}
|
||||
#songCtrl {
|
||||
height: 64px;
|
||||
|
||||
@ -18,5 +18,6 @@ createApp(App)
|
||||
// loaded: () => {
|
||||
// console.log('loaded')
|
||||
// }
|
||||
log: false, //关闭log
|
||||
})
|
||||
.mount("#app");
|
||||
|
||||
@ -50,6 +50,7 @@ const createColumns = ({ play ,singerInfo }) => {
|
||||
title: "音乐标题",
|
||||
key: "name",
|
||||
align: "left",
|
||||
ellipsis: true,
|
||||
render(row){
|
||||
return h(
|
||||
NButton,
|
||||
@ -70,6 +71,7 @@ const createColumns = ({ play ,singerInfo }) => {
|
||||
{
|
||||
title: "歌手",
|
||||
key: "artists",
|
||||
ellipsis: true,
|
||||
render(row) {
|
||||
const ars = row.artists.map((ar, idx) => {
|
||||
let r = h(
|
||||
|
||||
@ -149,7 +149,7 @@ onUnmounted(() => {
|
||||
id="songCtrl"
|
||||
align="center"
|
||||
:size="[6]"
|
||||
style="padding-top: 2px"
|
||||
style="padding-top: 2px;margin: 0 4px"
|
||||
>
|
||||
<n-button circle @click="favorite">
|
||||
<template #icon>
|
||||
|
||||
@ -98,6 +98,7 @@ export default {};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "@/assets/css/common.less";
|
||||
#songInfo {
|
||||
flex: 3;
|
||||
display: flex;
|
||||
@ -111,11 +112,14 @@ export default {};
|
||||
.w-song {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.song-name{
|
||||
.text-el-line();
|
||||
}
|
||||
.song-author {
|
||||
margin-left: 4px;
|
||||
color: #aaa;
|
||||
font-size: 13px;
|
||||
|
||||
.text-el-line();
|
||||
}
|
||||
}
|
||||
.song-time {
|
||||
|
||||
@ -7,6 +7,7 @@ import RepeatOutline from "@/assets/svgs/RepeatOutline.svg";
|
||||
import RepeatOne from "@/assets/svgs/RepeatOne.svg";
|
||||
import Playlist from "@/assets/svgs/Playlist.svg";
|
||||
import Random from "@/assets/svgs/Random.svg";
|
||||
import pubsub from 'pubsub-js';
|
||||
|
||||
|
||||
//播放模式：0-3，顺序，循环，单曲，随机。
|
||||
@ -51,7 +52,7 @@ const playMode = ref(0)
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
<n-button circle>
|
||||
<n-button circle @click="pubsub.publish('zp.togglePlaying',)">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<PlaylistMusic />
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="lmt-width">
|
||||
<!-- 轮播 -->
|
||||
<n-carousel
|
||||
show-arrow
|
||||
trigger="hover"
|
||||
@ -11,7 +12,7 @@
|
||||
v-for="(b, idx) in banners"
|
||||
:key="idx"
|
||||
>
|
||||
<img class="carousel-img" :src="b.imageUrl" />
|
||||
<img class="carousel-img" :src="b.imageUrl" @click="clickBanner(b.targetId, b.targetType)" />
|
||||
<span class="title">{{ b.typeTitle }}</span>
|
||||
</div>
|
||||
</n-carousel>
|
||||
@ -224,7 +225,6 @@ const play = (id) => {
|
||||
pubsub.publish("zp.play", { id, im: true });
|
||||
};
|
||||
|
||||
|
||||
//#region 轮播图片
|
||||
let banners = ref([]);
|
||||
banners.value = store.getters.cache('banners')
|
||||
@ -240,6 +240,13 @@ getBanner(0)
|
||||
console.log("getBanner err", err);
|
||||
});
|
||||
|
||||
const clickBanner = (id, type) => {
|
||||
switch(type){
|
||||
case 1: //新歌首发...
|
||||
pubsub.publish('zp.play', {id, im: true})
|
||||
break;
|
||||
}
|
||||
}
|
||||
//#endregion
|
||||
|
||||
//#region 最新音乐
|
||||
@ -322,6 +329,7 @@ getPersonalizedMV()
|
||||
.carousel-img {
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.title {
|
||||
position: absolute;
|
||||
|
||||
89
yarn.lock
89
yarn.lock
@ -1465,9 +1465,9 @@
|
||||
integrity sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==
|
||||
|
||||
"@vue/babel-plugin-jsx@^1.0.3":
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.1.0.tgz#eb73871cbe468bc12141441a0052d8948ac4f67d"
|
||||
integrity sha512-RGesLuTa+/0dHw7Ai3oQK0PoZbHPgtnjRQMTA/RRarqTWqMcFQ1BWYW47nSCkJAPYfd9hkUC0BWqokiOlJjJyg==
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.1.1.tgz#0c5bac27880d23f89894cd036a37b55ef61ddfc1"
|
||||
integrity sha512-j2uVfZjnB5+zkcbc/zsOc0fSNGCMMjaEXP52wdwdIfn0qjFfEYpYZBFKFg+HHnQeJCVrjOeO0YxgaL7DMrym9w==
|
||||
dependencies:
|
||||
"@babel/helper-module-imports" "^7.0.0"
|
||||
"@babel/plugin-syntax-jsx" "^7.0.0"
|
||||
@ -1491,10 +1491,10 @@
|
||||
lodash.kebabcase "^4.1.1"
|
||||
svg-tags "^1.0.0"
|
||||
|
||||
"@vue/babel-preset-app@^4.5.13":
|
||||
version "4.5.13"
|
||||
resolved "https://registry.yarnpkg.com/@vue/babel-preset-app/-/babel-preset-app-4.5.13.tgz#cb475321e4c73f7f110dac29a48c2a9cb80afeb6"
|
||||
integrity sha512-pM7CR3yXB6L8Gfn6EmX7FLNE3+V/15I3o33GkSNsWvgsMp6HVGXKkXgojrcfUUauyL1LZOdvTmu4enU2RePGHw==
|
||||
"@vue/babel-preset-app@^4.5.14":
|
||||
version "4.5.14"
|
||||
resolved "https://registry.yarnpkg.com/@vue/babel-preset-app/-/babel-preset-app-4.5.14.tgz#30883e23bfea35031434db231db77e8784f0dd12"
|
||||
integrity sha512-P13AJv5FDt2XnpZ92K0VMxBS7Pe+gnibxtXMsa8rXLBkEE1NkmtaG5pyXh3fulkmF2/21efOcuh6yFP7k0KuZg==
|
||||
dependencies:
|
||||
"@babel/core" "^7.11.0"
|
||||
"@babel/helper-compilation-targets" "^7.9.6"
|
||||
@ -1582,24 +1582,24 @@
|
||||
integrity sha512-jhUIg3klgi5Cxhs8dnat5hi/W2tQJvsqCxR0u6hgfSob0ORODgUBlN+F/uwq7cKIe/pzedVUk1y07F13GQvPqg==
|
||||
|
||||
"@vue/cli-plugin-babel@~4.5.0":
|
||||
version "4.5.13"
|
||||
resolved "https://registry.yarnpkg.com/@vue/cli-plugin-babel/-/cli-plugin-babel-4.5.13.tgz#a89c482edcc4ea1d135645cec502a7f5fd4c30e7"
|
||||
integrity sha512-ykvEAfD8PgGs+dGMGqr7l/nRmIS39NRzWLhMluPLTvDV1L+IxcoB73HNLGA/aENDpl8CuWrTE+1VgydcOhp+wg==
|
||||
version "4.5.14"
|
||||
resolved "https://registry.yarnpkg.com/@vue/cli-plugin-babel/-/cli-plugin-babel-4.5.14.tgz#50f0291a50defc7fc081d350256cbd8536970aca"
|
||||
integrity sha512-8+K684NwmN7TitdCLB9GVts36582ohusfxAL/v6cWnUgrw79gbdGkY8SqyXWrbXCyWYDJrhB25LQIrqGfsJ6Dg==
|
||||
dependencies:
|
||||
"@babel/core" "^7.11.0"
|
||||
"@vue/babel-preset-app" "^4.5.13"
|
||||
"@vue/cli-shared-utils" "^4.5.13"
|
||||
"@vue/babel-preset-app" "^4.5.14"
|
||||
"@vue/cli-shared-utils" "^4.5.14"
|
||||
babel-loader "^8.1.0"
|
||||
cache-loader "^4.1.0"
|
||||
thread-loader "^2.1.3"
|
||||
webpack "^4.0.0"
|
||||
|
||||
"@vue/cli-plugin-eslint@~4.5.0":
|
||||
version "4.5.13"
|
||||
resolved "https://registry.yarnpkg.com/@vue/cli-plugin-eslint/-/cli-plugin-eslint-4.5.13.tgz#8baf22d0d96d76720c7506646b96f4f62c05bdfa"
|
||||
integrity sha512-yc2uXX6aBiy3vEf5TwaueaDqQbdIXIhk0x0KzEtpPo23jBdLkpOSoU5NCgE06g/ZiGAcettpmBSv73Hfp4wHEw==
|
||||
version "4.5.14"
|
||||
resolved "https://registry.yarnpkg.com/@vue/cli-plugin-eslint/-/cli-plugin-eslint-4.5.14.tgz#7fdea4cae783f696521fd635d264fee52b0b836a"
|
||||
integrity sha512-8leK9mZ4Ia4hARWMfVAbcgPBFKjdeOW9S0nG+pt6OBnnwK+V1jf/C7ytfXH+H086KgisU8R9nz1xNaz+9QET0g==
|
||||
dependencies:
|
||||
"@vue/cli-shared-utils" "^4.5.13"
|
||||
"@vue/cli-shared-utils" "^4.5.14"
|
||||
eslint-loader "^2.2.1"
|
||||
globby "^9.2.0"
|
||||
inquirer "^7.1.0"
|
||||
@ -1699,6 +1699,24 @@
|
||||
semver "^6.1.0"
|
||||
strip-ansi "^6.0.0"
|
||||
|
||||
"@vue/cli-shared-utils@^4.5.14":
|
||||
version "4.5.14"
|
||||
resolved "https://registry.yarnpkg.com/@vue/cli-shared-utils/-/cli-shared-utils-4.5.14.tgz#4cdc98544205795144fa1a712966a33450d9a4c7"
|
||||
integrity sha512-OJeabPep8yvQ7n2lgbsw6lzBXmjaBHlCt7k9wnsPiXKtNAnHsv40ejARRnj4HTOuMaW6i1QQ17X3WaozI0zaMw==
|
||||
dependencies:
|
||||
"@hapi/joi" "^15.0.1"
|
||||
chalk "^2.4.2"
|
||||
execa "^1.0.0"
|
||||
launch-editor "^2.2.1"
|
||||
lru-cache "^5.1.1"
|
||||
node-ipc "^9.1.1"
|
||||
open "^6.3.0"
|
||||
ora "^3.4.0"
|
||||
read-pkg "^5.1.1"
|
||||
request "^2.88.2"
|
||||
semver "^6.1.0"
|
||||
strip-ansi "^6.0.0"
|
||||
|
||||
"@vue/compiler-core@3.2.20":
|
||||
version "3.2.20"
|
||||
resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.20.tgz#af5a3c5237818835b0d0be837eb5885a8d21c160"
|
||||
@ -2675,7 +2693,7 @@ browserify-zlib@^0.2.0:
|
||||
dependencies:
|
||||
pako "~1.0.5"
|
||||
|
||||
browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.16.6, browserslist@^4.17.3:
|
||||
browserslist@^4.0.0, browserslist@^4.12.0:
|
||||
version "4.17.3"
|
||||
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.17.3.tgz#2844cd6eebe14d12384b0122d217550160d2d624"
|
||||
integrity sha512-59IqHJV5VGdcJZ+GZ2hU5n4Kv3YiASzW6Xk5g9tf5a/MAzGeFwgGWU39fVzNIOVcgB3+Gp+kiQu0HEfTVU/3VQ==
|
||||
@ -2686,6 +2704,17 @@ browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.16.6, browserslist@^4
|
||||
node-releases "^1.1.77"
|
||||
picocolors "^0.2.1"
|
||||
|
||||
browserslist@^4.16.6, browserslist@^4.17.3:
|
||||
version "4.17.4"
|
||||
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.17.4.tgz#72e2508af2a403aec0a49847ef31bd823c57ead4"
|
||||
integrity sha512-Zg7RpbZpIJRW3am9Lyckue7PLytvVxxhJj1CaJVlCWENsGEAOlnlt8X0ZxGRPp7Bt9o8tIRM5SEXy4BCPMJjLQ==
|
||||
dependencies:
|
||||
caniuse-lite "^1.0.30001265"
|
||||
electron-to-chromium "^1.3.867"
|
||||
escalade "^3.1.1"
|
||||
node-releases "^2.0.0"
|
||||
picocolors "^1.0.0"
|
||||
|
||||
buffer-alloc-unsafe@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
|
||||
@ -2951,6 +2980,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001264:
|
||||
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001265.tgz#0613c9e6c922e422792e6fcefdf9a3afeee4f8c3"
|
||||
integrity sha512-YzBnspggWV5hep1m9Z6sZVLOt7vrju8xWooFAgN6BA5qvy98qPAPb7vNUzypFaoh2pb3vlfzbDO8tB57UPGbtw==
|
||||
|
||||
caniuse-lite@^1.0.30001265:
|
||||
version "1.0.30001269"
|
||||
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001269.tgz#3a71bee03df627364418f9fd31adfc7aa1cc2d56"
|
||||
integrity sha512-UOy8okEVs48MyHYgV+RdW1Oiudl1H6KolybD6ZquD0VcrPSgj25omXO1S7rDydjpqaISCwA8Pyx+jUQKZwWO5w==
|
||||
|
||||
case-sensitive-paths-webpack-plugin@^2.3.0:
|
||||
version "2.4.0"
|
||||
resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4"
|
||||
@ -3458,9 +3492,9 @@ copy-webpack-plugin@^5.1.1:
|
||||
webpack-log "^2.0.0"
|
||||
|
||||
core-js-compat@^3.16.0, core-js-compat@^3.16.2, core-js-compat@^3.6.5:
|
||||
version "3.18.2"
|
||||
resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.18.2.tgz#e40c266fbd613948dd8d2d2156345da8ac03c142"
|
||||
integrity sha512-25VJYCJtGjZwLguj7d66oiHfmnVw3TMOZ0zV8DyMJp/aeQ3OjR519iOOeck08HMyVVRAqXxafc2Hl+5QstJrsQ==
|
||||
version "3.18.3"
|
||||
resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.18.3.tgz#e0e7e87abc55efb547e7fa19169e45fa9df27a67"
|
||||
integrity sha512-4zP6/y0a2RTHN5bRGT7PTq9lVt3WzvffTNjqnTKsXhkAYNDTkdCLOIfAdOLcQ/7TDdyRj3c+NeHe1NmF1eDScw==
|
||||
dependencies:
|
||||
browserslist "^4.17.3"
|
||||
semver "7.0.0"
|
||||
@ -4263,6 +4297,11 @@ electron-to-chromium@^1.3.857:
|
||||
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.864.tgz#6a993bcc196a2b8b3df84d28d5d4dd912393885f"
|
||||
integrity sha512-v4rbad8GO6/yVI92WOeU9Wgxc4NA0n4f6P1FvZTY+jyY7JHEhw3bduYu60v3Q1h81Cg6eo4ApZrFPuycwd5hGw==
|
||||
|
||||
electron-to-chromium@^1.3.867:
|
||||
version "1.3.873"
|
||||
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.873.tgz#c238c9199e4951952fe815a65c1beab5db4826b8"
|
||||
integrity sha512-TiHlCgl2uP26Z0c67u442c0a2MZCWZNCRnPTQDPhVJ4h9G6z2zU0lApD9H0K9R5yFL5SfdaiVsVD2izOY24xBQ==
|
||||
|
||||
electron@^15.1.2:
|
||||
version "15.1.2"
|
||||
resolved "https://registry.yarnpkg.com/electron/-/electron-15.1.2.tgz#be1e362ab7307e38155709b0862e6a87f5e748b3"
|
||||
@ -7429,6 +7468,11 @@ node-releases@^1.1.77:
|
||||
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.77.tgz#50b0cfede855dd374e7585bf228ff34e57c1c32e"
|
||||
integrity sha512-rB1DUFUNAN4Gn9keO2K1efO35IDK7yKHCdCaIMvFO7yUYmmZYeDjnGKle26G4rwj+LKRQpjyUUvMkPglwGCYNQ==
|
||||
|
||||
node-releases@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.0.tgz#67dc74903100a7deb044037b8a2e5f453bb05400"
|
||||
integrity sha512-aA87l0flFYMzCHpTM3DERFSYxc6lv/BltdbRTOMZuxZ0cwZCD3mejE5n9vLhSJCN++/eOqr77G1IO5uXxlQYWA==
|
||||
|
||||
normalize-package-data@^2.5.0:
|
||||
version "2.5.0"
|
||||
resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
|
||||
@ -7956,6 +8000,11 @@ picocolors@^0.2.1:
|
||||
resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
|
||||
integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==
|
||||
|
||||
picocolors@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
|
||||
integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
|
||||
|
||||
picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user