AlgerMusicPlayer/src/layout/components/SearchBar.vue

<template>
    <div class="search-box flex">
        <div class="search-box-input flex-1">
            <n-input
                size="medium"
                round
                v-model:value="searchValue"
                :placeholder="hotSearchKeyword"
                class="border border-gray-600"
                @keydown.enter="search"
            >
                <template #prefix>
                    <i class="iconfont icon-search"></i>
                </template>
                <template #suffix>
                  <div class="w-20 px-3 flex justify-between items-center">
                    <div>{{ searchTypeOptions.find(item => item.key === searchType)?.label }}</div>
                    <n-dropdown trigger="hover" @select="selectSearchType" :options="searchTypeOptions">
                      <i class="iconfont icon-xiasanjiaoxing"></i>
                    </n-dropdown>
                  </div>
                </template>
            </n-input>
        </div>
        <div class="user-box">
            <n-dropdown trigger="hover" @select="selectItem" :options="options">
                <i class="iconfont icon-xiasanjiaoxing"></i>
            </n-dropdown>
            <n-avatar
                class="ml-2 cursor-pointer"
                circle
                size="medium"
                :src="getImgUrl(store.state.user.avatarUrl)"
                v-if="store.state.user"
            />
            <n-avatar
                class="ml-2 cursor-pointer"
                circle
                size="medium"
                src="https://picsum.photos/200/300?random=1"
                @click="toLogin()"
                v-else
            >登录</n-avatar>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { getSearchKeyword, getHotSearch } from '@/api/home';
import { getUserDetail, logout } from '@/api/login';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import request from '@/utils/request_mt'
import { getImgUrl } from '@/utils';

const router = useRouter()
const store = useStore();

// 推荐热搜词
const hotSearchKeyword = ref("搜索点什么吧...")
const hotSearchValue = ref("")
const loadHotSearchKeyword = async () => {
    const { data } = await getSearchKeyword();
    hotSearchKeyword.value = data.data.showKeyword
    hotSearchValue.value = data.data.realkeyword
}

store.state.user = JSON.parse(localStorage.getItem('user') || '{}')

const loadPage = async () => {
    const { data } = await getUserDetail()
    store.state.user = data.profile
    localStorage.setItem('user', JSON.stringify(data.profile))
}

const toLogin = () => {
    router.push('/login')
}



// 页面初始化
onMounted(() => {
    loadHotSearchKeyword()
    loadPage()
})


// 搜索词
const searchValue = ref("")
const searchType = ref(1)
const search = () => {

    let value = searchValue.value
    if (value == "") {
        searchValue.value = hotSearchValue.value
    } else {
        router.push({
            path: "/search",
            query: {
                keyword: value,
                type: searchType.value
            }
        })
    }
}

const selectSearchType = (key: any) => {
    searchType.value = key
}

const SEARCH_TYPES = [
    {
        label: '单曲',
        key: 1
    },
    {
        label: '专辑',
        key: 10
    },
    {
        label: '歌手',
        key: 100
    },
    {
        label: '歌单',
        key: 1000
    },
    {
        label: '用户',
        key: 1002
    },
    {
        label: 'MV',
        key: 1004
    },
    {
        label: '歌词',
        key: 1006
    },
    {
        label: '电台',
        key: 1009
    },
    {
        label: '视频',
        key: 1014
    },
    {
        label: '综合',
        key: 1018
    }
]

const searchTypeOptions = ref(SEARCH_TYPES)

const value = 'Drive My Car'
const options = [
    {
        label: '打卡',
        key: 'card'
    },
    {
        label: '听歌升级',
        key: 'card_music'
    },
    {
        label: '歌曲次数',
        key: 'listen'
    },
    {
        label: '登录',
        key: 'login'
    },
    {
        label: '退出登录',
        key: 'logout'
    }
]

const selectItem = async (key: any) => {
    // switch 判断
    switch (key) {
        case 'card':
            await request.get('/?do=sign')
                .then(res => {
                    console.log(res)
                })
            break;
        case 'card_music':
            await request.get('/?do=daka')
                .then(res => {
                    console.log(res)
                })
            break;
        case 'listen':
            await request.get('/?do=listen&id=1885175990&time=300')
                .then(res => {
                    console.log(res)
                })
            break;
        case 'logout':
            logout().then(() => {
                store.state.user = null
                localStorage.clear()
            })
            break;
        case 'login':
            router.push("/login")
            break;
    }
}

</script>

<style lang="scss" scoped>
.user-box {
    @apply ml-4 flex text-lg justify-center items-center rounded-full pl-3 border border-gray-600;
    background: #1a1a1a;
}

.search-box-input {
    @apply relative;
}
</style>