qier222
4 years ago
parent
861125ea8c
commit
5f0ef06786
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 550 B |
|
After Width: | Height: | Size: 700 B |
|
After Width: | Height: | Size: 516 B |
|
After Width: | Height: | Size: 645 B |
@ -0,0 +1,12 @@
|
||||
import Cookies from "js-cookie";
|
||||
import { logout } from "@/api/auth";
|
||||
|
||||
export function doLogout() {
|
||||
console.log("logout");
|
||||
logout();
|
||||
Cookies.remove("loginMode");
|
||||
}
|
||||
|
||||
export function isLoggedIn() {
|
||||
return Cookies.get("MUSIC_U") !== undefined ? true : false;
|
||||
}
|
||||
@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<div>
|
||||
<div class="title">用户名登录</div>
|
||||
<div class="sestion">
|
||||
<div class="search-box">
|
||||
<div class="container">
|
||||
<svg-icon icon-class="search" />
|
||||
<div class="input">
|
||||
<input
|
||||
placeholder="请输入你的网易云用户名"
|
||||
v-model="keyword"
|
||||
@keydown.enter="search"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sestion">
|
||||
<div class="name" v-show="activeUser.nickname === undefined">
|
||||
按Enter搜索
|
||||
</div>
|
||||
<div class="name" v-show="activeUser.nickname !== undefined">
|
||||
在列表中选中你的账号
|
||||
</div>
|
||||
<div class="user-list">
|
||||
<div
|
||||
class="user"
|
||||
v-for="user in result"
|
||||
:key="user.id"
|
||||
:class="{ active: user.nickname === activeUser.nickname }"
|
||||
@click="activeUser = user"
|
||||
>
|
||||
<img class="head" :src="user.avatarUrl | resizeImage" />
|
||||
<div class="nickname">
|
||||
{{ user.nickname }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ButtonTwoTone
|
||||
@click.native="confirm"
|
||||
v-show="activeUser.nickname !== undefined"
|
||||
>确定</ButtonTwoTone
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations } from "vuex";
|
||||
import NProgress from "nprogress";
|
||||
import { search } from "@/api/others";
|
||||
import Cookies from "js-cookie";
|
||||
import { userPlaylist } from "@/api/user";
|
||||
|
||||
import ButtonTwoTone from "@/components/ButtonTwoTone.vue";
|
||||
|
||||
export default {
|
||||
name: "loginUsername",
|
||||
components: {
|
||||
ButtonTwoTone,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
keyword: "",
|
||||
result: [],
|
||||
activeUser: {},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
NProgress.done();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(["updateUser", "updateUserInfo"]),
|
||||
search() {
|
||||
search({ keywords: this.keyword, limit: 9, type: 1002 }).then((data) => {
|
||||
this.result = data.result.userprofiles;
|
||||
this.activeUser = this.result[0];
|
||||
});
|
||||
},
|
||||
confirm() {
|
||||
this.updateUser(this.activeUser);
|
||||
Cookies.set("loginMode", "username", { expires: 3650 });
|
||||
userPlaylist({
|
||||
uid: this.activeUser.userId,
|
||||
limit: 1,
|
||||
}).then((data) => {
|
||||
this.updateUserInfo({
|
||||
key: "likedSongPlaylistID",
|
||||
value: data.playlist[0].id,
|
||||
});
|
||||
this.$router.push({ path: "/library" });
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 42px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.sestion {
|
||||
margin-top: 18px;
|
||||
.name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
color: rgba(0, 0, 0, 0.78);
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
border-radius: 11px;
|
||||
width: 326px;
|
||||
background: #eaeffd;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
color: #335eea;
|
||||
margin: {
|
||||
left: 12px;
|
||||
right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
font-size: 22px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
width: 115%;
|
||||
font-weight: 600;
|
||||
margin-top: -1px;
|
||||
color: #335eea;
|
||||
&::placeholder {
|
||||
color: #335eeac4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.user {
|
||||
margin-right: 16px;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 12px 12px 16px;
|
||||
border-radius: 8px;
|
||||
width: 256px;
|
||||
transition: 0.2s;
|
||||
user-select: none;
|
||||
.head {
|
||||
border-radius: 50%;
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
}
|
||||
.nickname {
|
||||
font-size: 18px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
&:hover {
|
||||
background: #f5f5f7;
|
||||
}
|
||||
}
|
||||
|
||||
.user.active {
|
||||
transition: 0.2s;
|
||||
background: #eaeffd;
|
||||
.name {
|
||||
color: #335eea;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue