503 lines
16 KiB
Vue
503 lines
16 KiB
Vue
<template>
|
||
<div style="margin-top: 20px">
|
||
<van-row justify="space-between" v-if="searchResult.length !== 0">
|
||
<van-col span="24">
|
||
<van-search
|
||
v-model="keyword"
|
||
shape="round"
|
||
show-action
|
||
@search="onSearch"
|
||
placeholder="网页链接 / 歌名"
|
||
input-align="center"
|
||
>
|
||
<template #action>
|
||
<div @click="onSearch">搜索</div>
|
||
</template>
|
||
</van-search>
|
||
</van-col>
|
||
</van-row>
|
||
<van-loading
|
||
v-show="searchResult.length !== 0 && isSearching"
|
||
type="spinner"
|
||
/>
|
||
<div v-if="searchResult.length === 0">
|
||
<van-row style="margin-top: 150px">
|
||
<van-col span="24">
|
||
<van-search
|
||
v-model="keyword"
|
||
shape="round"
|
||
@search="onSearch"
|
||
placeholder="网页链接 / 歌名"
|
||
input-align="center"
|
||
>
|
||
</van-search>
|
||
</van-col>
|
||
</van-row>
|
||
<van-row style="margin-top: 19px">
|
||
<van-col span="24">
|
||
<van-button
|
||
round
|
||
color="#07c160"
|
||
icon="search"
|
||
type="primary"
|
||
@click="onSearch"
|
||
:loading="isSearching"
|
||
loading-text="搜索中"
|
||
style="height: 32px"
|
||
>
|
||
搜 索
|
||
</van-button>
|
||
</van-col>
|
||
</van-row>
|
||
</div>
|
||
|
||
<!-- 精准搜索卡片 -->
|
||
<van-row
|
||
v-if="songMetaInfo !== null"
|
||
style="padding: 0 8px"
|
||
@click="playTheSong(songMetaInfo)"
|
||
>
|
||
<van-col span="6">
|
||
<img
|
||
:src="songMetaInfo.coverUrl"
|
||
onerror="this.src='https://cdnmusic.migu.cn/v3/static/img/common/default/img_default_240x240.jpg'"
|
||
style="width: 100%; height: 100%"
|
||
/>
|
||
</van-col>
|
||
<van-col span="18">
|
||
<div
|
||
style="
|
||
position: relative;
|
||
z-index: 2;
|
||
overflow: hidden;
|
||
width: 100%;
|
||
height: 100%;
|
||
"
|
||
>
|
||
<div
|
||
style="
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
color: white;
|
||
margin-top: 10px;
|
||
padding-left: 18px;
|
||
"
|
||
>
|
||
<van-row style="font-size: 14px; text-align: left">
|
||
{{ ellipsis(songMetaInfo.songName, 16) }}
|
||
</van-row>
|
||
|
||
<van-row>
|
||
<van-col>
|
||
<van-row
|
||
style="margin-top: 6px; font-size: 10px; text-align: left"
|
||
>
|
||
{{ songMetaInfo.artist }} 《{{ songMetaInfo.album }}》
|
||
</van-row>
|
||
<van-row
|
||
style="margin-top: 6px; font-size: 10px; text-align: left"
|
||
>
|
||
时长： {{ songMetaInfo.duration }}
|
||
</van-row>
|
||
</van-col>
|
||
</van-row>
|
||
</div>
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
filter: blur(32px);
|
||
transform: scale(1.2);
|
||
top: 0;
|
||
z-index: -1;
|
||
width: 100%;
|
||
height: 100%;
|
||
"
|
||
>
|
||
<img
|
||
:src="songMetaInfo.coverUrl"
|
||
onerror="this.src='https://cdnmusic.migu.cn/v3/static/img/common/default/img_default_240x240.jpg'"
|
||
style="width: 100%; height: 100%"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</van-col>
|
||
</van-row>
|
||
|
||
<van-row style="margin-top: 10px">
|
||
<SearchResultList
|
||
:playTheSong="playTheSong"
|
||
:suggestMatchSongId="suggestMatchSongId"
|
||
:searchResult="searchResult"
|
||
>
|
||
</SearchResultList>
|
||
</van-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { searchSongs, getSongsMeta, createSyncSongFromUrlJob } from "../../api";
|
||
import SearchResultList from "../../components/SearchResultListForMobile.vue";
|
||
import {
|
||
secondDurationToDisplayDuration,
|
||
sourceCodeToName,
|
||
ellipsis,
|
||
} from "../../utils";
|
||
import { startTaskListener } from "../../components/TaskNotification";
|
||
import storage from "../../utils/storage";
|
||
import { getProperPlayUrl } from "../../utils/audio";
|
||
|
||
export default {
|
||
data: () => {
|
||
return {
|
||
suggestMatchSongId: "",
|
||
songMetaInfo: null,
|
||
// songMetaInfo: {
|
||
// songName: "搁浅",
|
||
// artist: "单依纯",
|
||
// album: "专辑",
|
||
// duration: "03:06",
|
||
// coverUrl:
|
||
// "http://d.musicapp.migu.cn/prod/file-service/file-down/8121e8df41a5c12f48b69aea89b71dab/ba75041e9311e62d10b6fc32d11d84aa/1c51d605f00caeb4643414c6eb3f5fbe",
|
||
// url: "https://www.kuwo.cn/play_detail/157612752",
|
||
// resourceForbidden: false,
|
||
// source: "kuwo",
|
||
// fromMusicPlatform: true,
|
||
// score: 173.50300000000001,
|
||
// sourceName: "酷我音乐",
|
||
// },
|
||
playUrl: "",
|
||
keyword: "",
|
||
searchTip: "",
|
||
isSearching: false,
|
||
searchResult: [],
|
||
// searchResult: [
|
||
// {
|
||
// songName: "搁浅(中国新歌声)",
|
||
// artist: "羽田",
|
||
// album: "《中国新歌声第十一期》",
|
||
// duration: " - ",
|
||
// url: "https://music.migu.cn/v3/music/song/6404689Z0BD",
|
||
// resourceForbidden: false,
|
||
// source: "migu",
|
||
// fromMusicPlatform: true,
|
||
// score: 651.854,
|
||
// sourceName: "咪咕音乐",
|
||
// },
|
||
// {
|
||
// songName: "搁浅",
|
||
// artist: "周杰伦",
|
||
// album: "《七里香》",
|
||
// duration: " - ",
|
||
// url: "https://music.migu.cn/v3/music/song/60054701938",
|
||
// resourceForbidden: false,
|
||
// source: "migu",
|
||
// fromMusicPlatform: true,
|
||
// score: 640.803,
|
||
// sourceName: "咪咕音乐",
|
||
// },
|
||
// {
|
||
// songName: "搁浅 (Live)",
|
||
// artist: "杨丞琳",
|
||
// album: "《蒙面唱将猜猜猜第五期》",
|
||
// duration: " - ",
|
||
// url: "https://music.migu.cn/v3/music/song/64046801877",
|
||
// resourceForbidden: false,
|
||
// source: "migu",
|
||
// fromMusicPlatform: true,
|
||
// score: 583.073,
|
||
// sourceName: "咪咕音乐",
|
||
// },
|
||
// {
|
||
// songName: "搁浅",
|
||
// artist: "刘大壮",
|
||
// album: " - ",
|
||
// duration: "00:14",
|
||
// url: "https://www.kuwo.cn/play_detail/97836012",
|
||
// resourceForbidden: false,
|
||
// source: "kuwo",
|
||
// fromMusicPlatform: true,
|
||
// score: 173.50300000000001,
|
||
// sourceName: "酷我音乐",
|
||
// },
|
||
// {
|
||
// songName: "搁浅",
|
||
// artist: "周杰伦",
|
||
// album: " - ",
|
||
// duration: "03:38",
|
||
// url: "https://www.kuwo.cn/play_detail/171708289",
|
||
// resourceForbidden: false,
|
||
// source: "kuwo",
|
||
// fromMusicPlatform: true,
|
||
// score: 173.50300000000001,
|
||
// sourceName: "酷我音乐",
|
||
// },
|
||
// {
|
||
// songName: "搁浅",
|
||
// artist: "单依纯",
|
||
// album: " - ",
|
||
// duration: "03:06",
|
||
// url: "https://www.kuwo.cn/play_detail/157612752",
|
||
// resourceForbidden: false,
|
||
// source: "kuwo",
|
||
// fromMusicPlatform: true,
|
||
// score: 173.50300000000001,
|
||
// sourceName: "酷我音乐",
|
||
// },
|
||
// {
|
||
// songName: "【1080P修复版】周杰伦 - 搁浅MV",
|
||
// artist: "zyl2012",
|
||
// album: " - ",
|
||
// duration: "04:25",
|
||
// url: "https://www.bilibili.com/video/BV1M4411P7gM",
|
||
// resourceForbidden: false,
|
||
// source: "bilibili",
|
||
// fromMusicPlatform: false,
|
||
// score: 145.13400000000001,
|
||
// sourceName: "Bilibili",
|
||
// },
|
||
// {
|
||
// songName: "搁浅",
|
||
// artist: "张杰",
|
||
// album: "《搁浅》",
|
||
// duration: "04:34",
|
||
// url: "https://music.163.com/#/song?id=190964",
|
||
// resourceForbidden: false,
|
||
// source: "netease",
|
||
// fromMusicPlatform: true,
|
||
// score: 70.99400000000001,
|
||
// sourceName: "网易云音乐",
|
||
// },
|
||
// {
|
||
// songName: "搁浅",
|
||
// artist: "文太Vent.T",
|
||
// album: "《Losing Boat》",
|
||
// duration: "04:03",
|
||
// url: "https://music.163.com/#/song?id=523239317",
|
||
// resourceForbidden: false,
|
||
// source: "netease",
|
||
// fromMusicPlatform: true,
|
||
// score: 57.970000000000006,
|
||
// sourceName: "网易云音乐",
|
||
// },
|
||
// {
|
||
// songName: "搁浅",
|
||
// artist: "周杰伦",
|
||
// album: "《七里香》",
|
||
// duration: "04:00",
|
||
// url: "https://www.kugou.com/song/#hash=fbc234520fed713c30c1c026e7352770&album_id=971783",
|
||
// resourceForbidden: true,
|
||
// source: "kugou",
|
||
// fromMusicPlatform: true,
|
||
// score: 23.092,
|
||
// sourceName: "酷狗音乐",
|
||
// },
|
||
// {
|
||
// songName: "搁浅",
|
||
// artist: "周杰伦",
|
||
// album: "《七里香》",
|
||
// duration: "04:00",
|
||
// url: "https://y.qq.com/n/ryqq/songDetail/001Bbywq2gicae",
|
||
// resourceForbidden: true,
|
||
// source: "qq",
|
||
// fromMusicPlatform: true,
|
||
// score: 23.092,
|
||
// sourceName: "QQ音乐",
|
||
// },
|
||
// {
|
||
// songName: "周姐查房Npc点播翻唱《搁浅》 被惊艳到赞不绝口",
|
||
// artist: "周姐日常事",
|
||
// album: " - ",
|
||
// duration: "04:41",
|
||
// url: "https://www.bilibili.com/video/BV1uq4y157Fb",
|
||
// resourceForbidden: false,
|
||
// source: "bilibili",
|
||
// fromMusicPlatform: false,
|
||
// score: 12.318,
|
||
// sourceName: "Bilibili",
|
||
// },
|
||
// {
|
||
// songName:
|
||
// "4K60P丨《搁浅》有多难唱？听听未修音的周董唱得怎么样！周杰伦.2004无与伦比演唱会",
|
||
// artist: "诶呦葛格",
|
||
// album: " - ",
|
||
// duration: "04:24",
|
||
// url: "https://www.bilibili.com/video/BV1KA411H78W",
|
||
// resourceForbidden: false,
|
||
// source: "bilibili",
|
||
// fromMusicPlatform: false,
|
||
// score: 11.714,
|
||
// sourceName: "Bilibili",
|
||
// },
|
||
// {
|
||
// songName:
|
||
// '"明明看透了还深陷其中，真的很可怜"#周杰伦 《#搁浅 》#无损音乐 #周杰伦音乐 #音乐推荐 #jay #七里香周杰伦 ',
|
||
// artist: "周杰伦F.M首播",
|
||
// album: " - ",
|
||
// duration: "03:55",
|
||
// url: "https://www.douyin.com/video/7082032090337922334",
|
||
// resourceForbidden: false,
|
||
// source: "douyin",
|
||
// fromMusicPlatform: false,
|
||
// score: 11.238,
|
||
// sourceName: "抖音",
|
||
// },
|
||
// {
|
||
// songName: "搁浅 (Live)",
|
||
// artist: "杨丞琳",
|
||
// album: "《蒙面唱将猜猜猜 第五期》",
|
||
// duration: "03:51",
|
||
// url: "https://www.kugou.com/song/#hash=b0f400f85edea59951dbedff35d6fbb9&album_id=1796966",
|
||
// resourceForbidden: false,
|
||
// source: "kugou",
|
||
// fromMusicPlatform: true,
|
||
// score: 4.767,
|
||
// sourceName: "酷狗音乐",
|
||
// },
|
||
// {
|
||
// songName: "搁浅 (Live)",
|
||
// artist: "周杰伦",
|
||
// album: "《周杰伦 2004 无与伦比 演唱会 Live CD》",
|
||
// duration: "04:21",
|
||
// url: "https://y.qq.com/n/ryqq/songDetail/001d94K71ipdTB",
|
||
// resourceForbidden: false,
|
||
// source: "qq",
|
||
// fromMusicPlatform: true,
|
||
// score: 4.767,
|
||
// sourceName: "QQ音乐",
|
||
// },
|
||
// {
|
||
// songName: "搁浅 (Live)",
|
||
// artist: "杨丞琳",
|
||
// album: "《蒙面唱将猜猜猜 第5期》",
|
||
// duration: "03:51",
|
||
// url: "https://y.qq.com/n/ryqq/songDetail/001Gn3RQ0IDwEK",
|
||
// resourceForbidden: false,
|
||
// source: "qq",
|
||
// fromMusicPlatform: true,
|
||
// score: 4.767,
|
||
// sourceName: "QQ音乐",
|
||
// },
|
||
// {
|
||
// songName: "搁浅(抖音原版)",
|
||
// artist: "王梦露",
|
||
// album: "《爱恋之音》",
|
||
// duration: "02:14",
|
||
// url: "https://music.163.com/#/song?id=1831481912",
|
||
// resourceForbidden: false,
|
||
// source: "netease",
|
||
// fromMusicPlatform: true,
|
||
// score: 4.152,
|
||
// sourceName: "网易云音乐",
|
||
// },
|
||
// {
|
||
// songName: "搁浅 (Live)",
|
||
// artist: "曹杨",
|
||
// album: "《2020中国好声音 第7期》",
|
||
// duration: "03:50",
|
||
// url: "https://www.kugou.com/song/#hash=feeaa10cefb9b03d6a7d2a92d9db5b04&album_id=39445387",
|
||
// resourceForbidden: true,
|
||
// source: "kugou",
|
||
// fromMusicPlatform: true,
|
||
// score: -30.773999999999997,
|
||
// sourceName: "酷狗音乐",
|
||
// },
|
||
// ],
|
||
wyAccount: null,
|
||
};
|
||
},
|
||
props: {
|
||
playTheSong: {
|
||
type: Function,
|
||
required: true,
|
||
},
|
||
},
|
||
mounted() {
|
||
this.wyAccount = storage.get("wyAccount");
|
||
},
|
||
watch: {
|
||
$route(to, from) {
|
||
this.wyAccount = storage.get("wyAccount");
|
||
},
|
||
},
|
||
setup(props, { emit }) {
|
||
const playTheSong = (songMeta, pageUrl) => {
|
||
props.playTheSong(songMeta, pageUrl);
|
||
};
|
||
return {
|
||
playTheSong,
|
||
ellipsis,
|
||
};
|
||
},
|
||
components: {
|
||
SearchResultList,
|
||
},
|
||
methods: {
|
||
async uploadToCloud(pageUrl) {
|
||
const ret = await createSyncSongFromUrlJob(pageUrl); // TODO: add songID
|
||
console.log(ret);
|
||
|
||
if (ret.data && ret.data.jobId) {
|
||
startTaskListener(ret.data.jobId);
|
||
}
|
||
},
|
||
async onSearch() {
|
||
if (this.keyword.trim().length === 0) {
|
||
return;
|
||
}
|
||
this.songMetaInfo = null;
|
||
this.searchTip = `正在搜索 ${this.keyword}`;
|
||
this.isSearching = true;
|
||
|
||
if (
|
||
this.keyword.indexOf("163.com") >= 0 &&
|
||
this.keyword.indexOf("/song") >= 0
|
||
) {
|
||
const songIdMatch = this.keyword.match(/id=([\d]+)/);
|
||
if (songIdMatch && songIdMatch.length > 1) {
|
||
this.suggestMatchSongId = songIdMatch[1];
|
||
}
|
||
}
|
||
|
||
try {
|
||
if (this.keyword.indexOf("http") >= 0) {
|
||
getSongsMeta({ url: this.keyword }).then((ret) => {
|
||
const info = ret.data.songMeta;
|
||
if (info) {
|
||
info.album = info.album != "" ? info.album : "未知";
|
||
info.duration = secondDurationToDisplayDuration(info.duration);
|
||
info.sourceName = sourceCodeToName(info.source);
|
||
this.songMetaInfo = info;
|
||
} else {
|
||
this.songMetaInfo = null;
|
||
}
|
||
});
|
||
}
|
||
|
||
const result = await searchSongs({ keyword: this.keyword });
|
||
console.log(result);
|
||
const songs = result.data.songs
|
||
.map((song) => {
|
||
song.album = song.album != "" ? `《${song.album}》` : " - ";
|
||
song.duration = secondDurationToDisplayDuration(song.duration);
|
||
song.sourceName = sourceCodeToName(song.source);
|
||
return song;
|
||
})
|
||
.filter((song) => song.songName.length > 0);
|
||
|
||
console.log(JSON.stringify(songs));
|
||
|
||
this.searchResult = songs;
|
||
|
||
this.searchTip = "";
|
||
} catch (e) {
|
||
this.searchTip = "搜索失败";
|
||
} finally {
|
||
this.isSearching = false;
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|