mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-23 23:57:22 +08:00
🐞 fix: 修复用户头像显示问题
This commit is contained in:
alger
+166
-165
@@ -1,166 +1,167 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="search-box flex">
|
<div class="search-box flex">
|
||||||
<div class="search-box-input flex-1">
|
<div class="search-box-input flex-1">
|
||||||
<n-input
|
<n-input
|
||||||
size="large"
|
size="large"
|
||||||
round
|
round
|
||||||
v-model:value="searchValue"
|
v-model:value="searchValue"
|
||||||
:placeholder="hotSearchKeyword"
|
:placeholder="hotSearchKeyword"
|
||||||
class="border border-gray-600"
|
class="border border-gray-600"
|
||||||
@keydown.enter="search"
|
@keydown.enter="search"
|
||||||
>
|
>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<i class="iconfont icon-search"></i>
|
<i class="iconfont icon-search"></i>
|
||||||
</template>
|
</template>
|
||||||
</n-input>
|
</n-input>
|
||||||
</div>
|
</div>
|
||||||
<div class="user-box">
|
<div class="user-box">
|
||||||
<n-dropdown trigger="hover" @select="selectItem" :options="options">
|
<n-dropdown trigger="hover" @select="selectItem" :options="options">
|
||||||
<i class="iconfont icon-xiasanjiaoxing"></i>
|
<i class="iconfont icon-xiasanjiaoxing"></i>
|
||||||
</n-dropdown>
|
</n-dropdown>
|
||||||
<n-avatar
|
<n-avatar
|
||||||
class="ml-2 cursor-pointer"
|
class="ml-2 cursor-pointer"
|
||||||
circle
|
circle
|
||||||
size="large"
|
size="large"
|
||||||
:src="store.state.user.avatarUrl"
|
:src="getImgUrl(store.state.user.avatarUrl)"
|
||||||
v-if="store.state.user"
|
v-if="store.state.user"
|
||||||
/>
|
/>
|
||||||
<n-avatar
|
<n-avatar
|
||||||
class="ml-2 cursor-pointer"
|
class="ml-2 cursor-pointer"
|
||||||
circle
|
circle
|
||||||
size="large"
|
size="large"
|
||||||
src="https://picsum.photos/200/300?random=1"
|
src="https://picsum.photos/200/300?random=1"
|
||||||
@click="toLogin()"
|
@click="toLogin()"
|
||||||
v-else
|
v-else
|
||||||
>登录</n-avatar>
|
>登录</n-avatar>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { getSearchKeyword, getHotSearch } from '@/api/home';
|
import { getSearchKeyword, getHotSearch } from '@/api/home';
|
||||||
import { getUserDetail, logout } from '@/api/login';
|
import { getUserDetail, logout } from '@/api/login';
|
||||||
import { onMounted, ref } from 'vue';
|
import { onMounted, ref } from 'vue';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
import { useStore } from 'vuex';
|
import { useStore } from 'vuex';
|
||||||
import request from '@/utils/request_mt'
|
import request from '@/utils/request_mt'
|
||||||
|
import { getImgUrl } from '@/utils';
|
||||||
const router = useRouter()
|
|
||||||
const store = useStore();
|
const router = useRouter()
|
||||||
|
const store = useStore();
|
||||||
// 推荐热搜词
|
|
||||||
const hotSearchKeyword = ref("搜索点什么吧...")
|
// 推荐热搜词
|
||||||
const hotSearchValue = ref("")
|
const hotSearchKeyword = ref("搜索点什么吧...")
|
||||||
const loadHotSearchKeyword = async () => {
|
const hotSearchValue = ref("")
|
||||||
const { data } = await getSearchKeyword();
|
const loadHotSearchKeyword = async () => {
|
||||||
hotSearchKeyword.value = data.data.showKeyword
|
const { data } = await getSearchKeyword();
|
||||||
hotSearchValue.value = data.data.realkeyword
|
hotSearchKeyword.value = data.data.showKeyword
|
||||||
}
|
hotSearchValue.value = data.data.realkeyword
|
||||||
|
}
|
||||||
store.state.user = JSON.parse(localStorage.getItem('user') || '{}')
|
|
||||||
|
store.state.user = JSON.parse(localStorage.getItem('user') || '{}')
|
||||||
const loadPage = async () => {
|
|
||||||
const { data } = await getUserDetail()
|
const loadPage = async () => {
|
||||||
store.state.user = data.profile
|
const { data } = await getUserDetail()
|
||||||
localStorage.setItem('user', JSON.stringify(data.profile))
|
store.state.user = data.profile
|
||||||
}
|
localStorage.setItem('user', JSON.stringify(data.profile))
|
||||||
|
}
|
||||||
const toLogin = () => {
|
|
||||||
router.push('/login')
|
const toLogin = () => {
|
||||||
}
|
router.push('/login')
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// 页面初始化
|
|
||||||
onMounted(() => {
|
// 页面初始化
|
||||||
loadHotSearchKeyword()
|
onMounted(() => {
|
||||||
loadPage()
|
loadHotSearchKeyword()
|
||||||
})
|
loadPage()
|
||||||
|
})
|
||||||
|
|
||||||
// 搜索词
|
|
||||||
const searchValue = ref("")
|
// 搜索词
|
||||||
const search = () => {
|
const searchValue = ref("")
|
||||||
|
const search = () => {
|
||||||
let value = searchValue.value
|
|
||||||
if (value == "") {
|
let value = searchValue.value
|
||||||
searchValue.value = hotSearchValue.value
|
if (value == "") {
|
||||||
} else {
|
searchValue.value = hotSearchValue.value
|
||||||
router.push({
|
} else {
|
||||||
path: "/search",
|
router.push({
|
||||||
query: {
|
path: "/search",
|
||||||
keyword: value
|
query: {
|
||||||
}
|
keyword: value
|
||||||
})
|
}
|
||||||
}
|
})
|
||||||
}
|
}
|
||||||
|
}
|
||||||
const value = 'Drive My Car'
|
|
||||||
const options = [
|
const value = 'Drive My Car'
|
||||||
{
|
const options = [
|
||||||
label: '打卡',
|
{
|
||||||
key: 'card'
|
label: '打卡',
|
||||||
},
|
key: 'card'
|
||||||
{
|
},
|
||||||
label: '听歌升级',
|
{
|
||||||
key: 'card_music'
|
label: '听歌升级',
|
||||||
},
|
key: 'card_music'
|
||||||
{
|
},
|
||||||
label: '歌曲次数',
|
{
|
||||||
key: 'listen'
|
label: '歌曲次数',
|
||||||
},
|
key: 'listen'
|
||||||
{
|
},
|
||||||
label: '登录',
|
{
|
||||||
key: 'login'
|
label: '登录',
|
||||||
},
|
key: 'login'
|
||||||
{
|
},
|
||||||
label: '退出登录',
|
{
|
||||||
key: 'logout'
|
label: '退出登录',
|
||||||
}
|
key: 'logout'
|
||||||
]
|
}
|
||||||
|
]
|
||||||
const selectItem = async (key: any) => {
|
|
||||||
// switch 判断
|
const selectItem = async (key: any) => {
|
||||||
switch (key) {
|
// switch 判断
|
||||||
case 'card':
|
switch (key) {
|
||||||
await request.get('/?do=sign')
|
case 'card':
|
||||||
.then(res => {
|
await request.get('/?do=sign')
|
||||||
console.log(res)
|
.then(res => {
|
||||||
})
|
console.log(res)
|
||||||
break;
|
})
|
||||||
case 'card_music':
|
break;
|
||||||
await request.get('/?do=daka')
|
case 'card_music':
|
||||||
.then(res => {
|
await request.get('/?do=daka')
|
||||||
console.log(res)
|
.then(res => {
|
||||||
})
|
console.log(res)
|
||||||
break;
|
})
|
||||||
case 'listen':
|
break;
|
||||||
await request.get('/?do=listen&id=1885175990&time=300')
|
case 'listen':
|
||||||
.then(res => {
|
await request.get('/?do=listen&id=1885175990&time=300')
|
||||||
console.log(res)
|
.then(res => {
|
||||||
})
|
console.log(res)
|
||||||
break;
|
})
|
||||||
case 'logout':
|
break;
|
||||||
logout().then(() => {
|
case 'logout':
|
||||||
store.state.user = null
|
logout().then(() => {
|
||||||
localStorage.clear()
|
store.state.user = null
|
||||||
})
|
localStorage.clear()
|
||||||
break;
|
})
|
||||||
case 'login':
|
break;
|
||||||
router.push("/login")
|
case 'login':
|
||||||
break;
|
router.push("/login")
|
||||||
}
|
break;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</script>
|
|
||||||
|
</script>
|
||||||
<style lang="scss" scoped>
|
|
||||||
.user-box {
|
<style lang="scss" scoped>
|
||||||
@apply ml-6 flex text-lg justify-center items-center rounded-full pl-3 border border-gray-600;
|
.user-box {
|
||||||
background: #1a1a1a;
|
@apply ml-6 flex text-lg justify-center items-center rounded-full pl-3 border border-gray-600;
|
||||||
}
|
background: #1a1a1a;
|
||||||
|
}
|
||||||
.search-box-input {
|
|
||||||
@apply relative;
|
.search-box-input {
|
||||||
}
|
@apply relative;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user