Skip to content

Y
Yz Music

zacharyzlj / Yz Music

通知 1
Star 0
Fork 0
Y
Yz Music

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 3202d840 编写于 作者: Z Zachary
浏览文件
操作

feat: add login function 

* add user module
* add new api for login
* imporve nav bar
上级 91ac0386
隐藏空白更改
内联 并排
Showing with 316 addition and 54 deletion
src/api/base.js
浏览文件 @ 3202d840
...@@ -4,7 +4,7 @@ import axios from "axios"; ...@@ -4,7 +4,7 @@ import axios from "axios";
const BASIC_URL = "http://192.168.31.152:3000/"; const BASIC_URL = "http://192.168.31.152:3000/";
function createBaseInstance() { function createBaseInstance() {
const instance = axios.create({ baseURL: BASIC_URL }); const instance = axios.create({ baseURL: BASIC_URL, withCredentials: true });
return instance; return instance;
} }
......
src/api/index.js
浏览文件 @ 3202d840
export * from "./login";
export * from "./data"; export * from "./data";
export * from "./toplist"; export * from "./toplist";
export * from "./playlist"; export * from "./playlist";
......
src/api/login.js 0 → 100644
浏览文件 @ 3202d840
import { requset } from "./base";
export const getLoginKey = () =>
requset.get("/login/qr/key", {
params: { timerstamp: new Date().getTime() }
});
export const getLoginQrCode = key =>
requset.get("/login/qr/create", {
params: { key: key, qrimg: true, timerstamp: new Date().getTime() }
});
// 800为二维码过期,801为等待扫码,802为待确认,803为授权登录成功(803状态码下会返回cookies)
export const getLoginQrScanState = key =>
requset.get(`/login/qr/check`, {
params: { key: key, timerstamp: new Date().getTime() }
});
export const getLoginStatus = () => requset.get("/login/status");
export const logout = () => requset.get("/logout");
src/components/common/Banner.vue
浏览文件 @ 3202d840
...@@ -28,7 +28,6 @@ export default { ...@@ -28,7 +28,6 @@ export default {
updateBanner() { updateBanner() {
getBanner() getBanner()
.then((res) => { .then((res) => {
console.log(res.data.banners);
this.banners = res.data.banners; this.banners = res.data.banners;
this.bannerLoading = false; this.bannerLoading = false;
}) })
......
src/components/common/HomeTop.vue
浏览文件 @ 3202d840
...@@ -63,7 +63,7 @@ export default { ...@@ -63,7 +63,7 @@ export default {
methods: { methods: {
updateTopList(toplistType) { updateTopList(toplistType) {
getTopList(toplistType).then((res) => { getTopList(toplistType).then((res) => {
console.log(res); //console.log(res);
this.toplists.push(res.data.playlist); this.toplists.push(res.data.playlist);
}); });
}, },
......
src/components/common/RecommendedBar.vue
浏览文件 @ 3202d840
...@@ -91,7 +91,7 @@ export default { ...@@ -91,7 +91,7 @@ export default {
let limit = 10; let limit = 10;
getPlayList(limit, 1, key) getPlayList(limit, 1, key)
.then((res) => { .then((res) => {
console.log(res); //console.log(res);
this.playList = res.data.playlists; this.playList = res.data.playlists;
this.listLoading = false; this.listLoading = false;
}) })
...@@ -121,7 +121,7 @@ export default { ...@@ -121,7 +121,7 @@ export default {
img: al.picUrl, img: al.picUrl,
}); });
}); });
console.log(songs); //console.log(songs);
playSonglist(songs); playSonglist(songs);
}); });
}); });
......
src/components/content/NavBar.vue
浏览文件 @ 3202d840
...@@ -51,53 +51,48 @@ ...@@ -51,53 +51,48 @@
</div> </div>
</div> </div>
<div class="header__opt"> <div class="header__opt">
<!-- 未登录 -->
<span class="mod_top_login"> <span class="mod_top_login">
<!-- 登录 -->
<a <a
class="top_login__link js_logined" class="top_login__link js_logined"
href="//y.qq.com/portal/profile.html#stat=y_new.top.user_pic"
onclick="setStatCookie&amp;&amp;setStatCookie();" onclick="setStatCookie&amp;&amp;setStatCookie();"
style="" :style="{ display: isLogged ? '' : 'none' }"
@mouseover="showUserPopup"
@mouseleave="hiddenUserPopup"
><img ><img
src="http://thirdqq.qlogo.cn/g?b=sdk&amp;k=uwNbKsMJia8ASG007iakGJXA&amp;s=140&amp;t=1586579228"
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/person_300.png?max_age=2592000';this.onerror=null;" onerror="this.src='//y.gtimg.cn/mediastyle/global/img/person_300.png?max_age=2592000';this.onerror=null;"
style="background-color: gray"
class="top_login__cover js_user_img" class="top_login__cover js_user_img"
:src="$store.state.user.user.avatarUrl"
/> />
</a> </a>
<!-- 未登录 -->
<a <a
class="top_login__link js_login" class="top_login__link js_login"
data-stat="y_new.top.login"
href="javascript:;" href="javascript:;"
style="display: none" :style="{ display: isLogged ? 'none' : '' }"
@click="showLoginPopup"
> >
登录 登录
</a> </a>
<a
class="login__link header__link js_login"
data-stat="y_new.top.login"
href="javascript:;"
style="display: none"
>登录</a
>
</span> </span>
<!-- 用户信息 --> <!-- 用户信息 -->
<div class="popup_user"> <div
class="popup_user"
:class="isShowPopup ? 'drop' : ''"
@mouseover="showUserPopup"
@mouseleave="hiddenUserPopup"
>
<div class="popup_user_data"> <div class="popup_user_data">
<a <a
href="//y.qq.com/portal/profile.html#stat=y_new.top.pop.user_pic"
class="popup_user_data__cover_link" class="popup_user_data__cover_link"
onclick="setStatCookie&amp;&amp;setStatCookie();" onclick="setStatCookie&amp;&amp;setStatCookie();"
> >
<img <img
src="http://thirdqq.qlogo.cn/g?b=sdk&amp;k=uwNbKsMJia8ASG007iakGJXA&amp;s=140&amp;t=1586579228"
onerror="this.src=\'//y.gtimg.cn/mediastyle/global/img/person_300.png?max_age=2592000\';this.onerror=null;" onerror="this.src=\'//y.gtimg.cn/mediastyle/global/img/person_300.png?max_age=2592000\';this.onerror=null;"
class="popup_user_data__cover js_user_img" class="popup_user_data__cover js_user_img"
/> style="background-color: gray"
:src="$store.state.user.user.avatarUrl"
<img
src="//y.gtimg.cn/mediastyle/yqq/img/login_qq.png?max_age=2592000"
class="popup_user_data__icon"
/> />
</a> </a>
<!-- 自动垂直居中 --> <!-- 自动垂直居中 -->
...@@ -107,40 +102,25 @@ ...@@ -107,40 +102,25 @@
href="//y.qq.com/portal/profile.html#stat=y_new.top.pop.user_nickname" href="//y.qq.com/portal/profile.html#stat=y_new.top.pop.user_nickname"
onclick="setStatCookie&amp;&amp;setStatCookie();" onclick="setStatCookie&amp;&amp;setStatCookie();"
class="" class=""
>Zachary_</a >{{ $store.state.user.user.nickname }}</a
> >
</div> </div>
<div class="popup_user_data__lv"> <div class="popup_user_data__lv" style="overflow: hidden">
<a class="js_vip_jump" rel="noopener" target="_blank" <a class="js_vip_jump" rel="noopener" target="_blank"
><img >签名：{{ $store.state.user.user.signature }}
src="" </a>
alt="one"
class="popup_user_data__lv_icon" /></a
><a class="js_vip_jump" rel="noopener" target="_blank"
><img src="" alt="two" class="popup_user_data__lv_icon"
/></a>
</div> </div>
</div> </div>
</div> </div>
<div class="popup_user_toolbar"> <div class="popup_user_toolbar">
<div class="popup_user_toolbar__item"> <div class="popup_user_toolbar__item">
<div class="popup_user_toolbar__tit js_msgcenterdiv"> <div class="popup_user_toolbar__tit js_msgcenterdiv">
<a <a>评论通知</a>
href="//y.qq.com/portal/msg_center.html#stat=y_new.top.pop.msg_center"
onclick="setStatCookie&amp;&amp;setStatCookie();"
>评论通知</a
>
</div> </div>
</div> </div>
<div class="popup_user_toolbar__item"> <div class="popup_user_toolbar__item">
<div class="popup_user_toolbar__tit"> <div class="popup_user_toolbar__tit">
<a <a class="js_logout" @click="logout">退出QQ登录</a>
href="javascript:;"
class="js_logout"
data-stat="y_new.top.pop.logout"
>退出QQ登录</a
>
</div> </div>
</div> </div>
</div> </div>
...@@ -149,15 +129,75 @@ ...@@ -149,15 +129,75 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 登陆弹框 -->
<div
id="divdialog_0"
class="mod_popup popup_login popup_login--download large"
data-aria="popup"
style="
position: fixed;
z-index: 100000;
top: 154.5px;
margin: 10px;
left: 369px;
"
v-if="isShowLoginPopup"
>
<div class="popup__hd">
<h2 class="popup__tit">
<a
href="javascript:;"
class="popup__tit_item current js_iframe_login"
data-type="qq"
style=""
>扫码登陆</a
>
</h2>
</div>
<a
href="javascript:;"
class="popup__close"
title="关闭"
@click="hiddenLoginPopup"
><i class="popup__icon_close"></i><i class="icon_txt">关闭</i>
</a>
<div class="popup__bd" id="dialogbox">
<div class="phone"></div>
<img
id="frame_tips"
:src="qrurl"
class="popup_login_qq"
width="100%"
height="400px;"
frameborder="0"
/>
</div>
</div>
<div
class="mod_popup_mask"
:style="{ display: isShowLoginPopup ? 'block' : 'none' }"
></div>
</template> </template>
<script> <script>
import SearchInput from "components/common/SearchInput"; import SearchInput from "components/common/SearchInput";
import {
getLoginKey,
getLoginQrCode,
getLoginQrScanState,
getLoginStatus,
logout,
} from "api";
export default { export default {
name: "NavBar", name: "NavBar",
data() { data() {
return { return {
active: 0, isShowLoginPopup: false,
isShowPopup: false,
qrurl: "",
navData: [ navData: [
{ title: "音乐库", path: "/" }, { title: "音乐库", path: "/" },
{ title: "我的音乐", path: "/My" }, { title: "我的音乐", path: "/My" },
...@@ -177,9 +217,85 @@ export default { ...@@ -177,9 +217,85 @@ export default {
], ],
}; };
}, },
computed: {
isLogged() {
return this.$store.state.user.isLogged;
},
},
mounted() {
this.getLoginStatus();
},
methods: { methods: {
text() { getQr() {
console.log("test", this.$route.meta.index); getLoginKey().then((res) => {
let key = res.data.data.unikey;
getLoginQrCode(key).then((res) => {
console.log(res);
let qrimg = res.data.data.qrimg;
console.log(qrimg);
this.qrurl = qrimg;
console.log(this.qrurl);
this.checkScanState(key);
});
});
},
checkScanState(key) {
let timer = setInterval(async () => {
let res = await getLoginQrScanState(key);
console.log(res);
let code = res.data.code;
let cookie = res.data.cookie;
switch (code) {
case 800:
console.log("二维码过期");
clearInterval(timer);
break;
case 801:
break;
case 802:
console.log("已扫描");
break;
case 803:
console.log(cookie);
clearInterval(timer);
this.isShowLoginPopup = false;
this.getLoginStatus();
break;
default:
break;
}
}, 3000);
},
getLoginStatus() {
getLoginStatus().then((res) => {
console.log(res);
let profile = res.data.data.profile;
if (profile) {
this.$store.commit("user/setLoginStatus", true);
this.$store.commit("user/setUser", profile);
console.log(this.$store.state.user.isLogged);
console.log(this.$store.state.user.user);
}
});
},
logout() {
logout().then((res) => {
this.$store.commit("user/setLoginStatus", false);
alert("成功退出");
});
},
showLoginPopup() {
this.isShowLoginPopup = true;
this.getQr();
},
hiddenLoginPopup() {
this.isShowLoginPopup = false;
},
showUserPopup() {
this.isShowPopup = true;
},
hiddenUserPopup() {
this.isShowPopup = false;
}, },
}, },
components: { components: {
...@@ -279,7 +395,7 @@ p { ...@@ -279,7 +395,7 @@ p {
.header__opt { .header__opt {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 200px;
height: 90px; height: 90px;
line-height: 90px; line-height: 90px;
} }
...@@ -315,7 +431,8 @@ p { ...@@ -315,7 +431,8 @@ p {
.popup_user { .popup_user {
position: absolute; position: absolute;
right: 0; /*right: 0;*/
left: -15px;
top: 90px; top: 90px;
width: 288px; width: 288px;
background-color: #fff; background-color: #fff;
...@@ -369,6 +486,7 @@ p { ...@@ -369,6 +486,7 @@ p {
.popup_user_toolbar { .popup_user_toolbar {
padding: 13px 20px 6px; padding: 13px 20px 6px;
font-size: 15px; font-size: 15px;
text-align: center;
} }
.popup_user_toolbar__item { .popup_user_toolbar__item {
position: relative; position: relative;
...@@ -387,4 +505,99 @@ a:hover { ...@@ -387,4 +505,99 @@ a:hover {
font-size: 38px; font-size: 38px;
padding-left: 20px; padding-left: 20px;
} }
/* login popup */
.mod_popup {
position: absolute;
border: 1px solid #bfbfbf;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 999;
background-color: #fff;
font-size: 14px;
color: #333;
}
.popup_login {
width: 560px;
height: 410px;
overflow: hidden;
}
.popup_login--download {
position: relative;
z-index: 2;
height: 387px;
}
.popup_login.large {
width: 700px;
}
.popup__hd {
position: relative;
line-height: 55px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
}
.popup__tit {
font-size: 16px;
font-weight: 400;
}
.popup__tit_item {
margin: 0 60px;
}
.popup__tit_item.current {
color: #31c27c;
}
.popup__close {
position: absolute;
top: 6px;
right: 6px;
width: 24px;
height: 24px;
overflow: hidden;
z-index: 2;
}
.popup__icon_close {
display: block;
margin: 6px auto;
width: 12px;
height: 12px;
background-position: 0 -200px;
}
.popup_login.large .popup__bd {
position: relative;
overflow: hidden;
height: 348px;
}
.popup_login.large iframe {
position: absolute;
top: 0;
left: 0;
width: 704px;
margin-left: -2px;
}
.popup_login.large .popup_login_qq {
width: 200px;
height: 200px;
margin-left: 150px;
}
.mod_popup_mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#33000000', endColorstr='#33000000');
background: rgba(0, 0, 0, 0.2);
z-index: 999;
}
.phone {
float: left;
margin-left: 120px;
width: 125px;
height: 220px;
background: url(../../assets/img/qr_guide.png);
background-size: auto;
background-size: contain;
}
</style> </style>
src/store/index.js
浏览文件 @ 3202d840
import { createStore } from "vuex"; import { createStore } from "vuex";
import musicModule from "./module/music"; import musicModule from "./module/music";
import userModule from "./module/user";
export default createStore({ export default createStore({
modules: { modules: {
music: musicModule music: musicModule,
user: userModule
} }
}); });
src/store/module/user/index.js 0 → 100644
浏览文件 @ 3202d840
import state from "./state";
import getters from "./getters";
import mutations from "./mutations";
import actions from "./actions";
export default {
namespaced: true,
state,
getters,
mutations,
actions
};
src/store/module/user/mutations.js 0 → 100644
浏览文件 @ 3202d840
export default {
setUser(state, user) {
state.user = user;
},
setLoginStatus(state, status) {
state.isLogged = status;
}
};
src/store/module/user/state.js 0 → 100644
浏览文件 @ 3202d840
export default {
user: {},
isLogged: false
};
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或