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