288 lines
8.8 KiB
Vue
288 lines
8.8 KiB
Vue
<template>
|
|
<div ref="nav" class="main-nav hidden lg:flex justify-between bg-white">
|
|
<!-- 网站Logo -->
|
|
<div class="px-5 items-centerflex" slot="brand" @click="goHome">
|
|
<img :src="logo" alt="柚子的网站" class="h-9 align-middle" />
|
|
</div>
|
|
<!-- 主导航菜单 -->
|
|
<d-menu mode="horizontal" router class="ml-5 h-14 text-[16px] " :default-select-keys="[key]">
|
|
<d-menu-item key="home">
|
|
<d-icon :component="homeSvg" class="w-5 mr-1"></d-icon>
|
|
首页
|
|
</d-menu-item>
|
|
<d-menu-item key="gallery">
|
|
<d-icon :component="picSvg" class="w-5 mr-1"></d-icon>
|
|
画廊
|
|
</d-menu-item>
|
|
<d-menu-item key="article">
|
|
<d-icon :component="artiSvg" class="w-5 mr-1 "></d-icon>
|
|
文章
|
|
</d-menu-item>
|
|
<d-menu-item key="widget">
|
|
<d-icon :component="settingSvg" class="w-5 mr-1 "></d-icon>
|
|
工具
|
|
</d-menu-item>
|
|
<d-menu-item key="appshare">
|
|
<d-icon :component="downSvg" class="w-5 mr-1 "></d-icon>
|
|
软件分享
|
|
</d-menu-item>
|
|
<d-menu-item key="plink">
|
|
<d-icon :component="linkSvg" class="w-5 mr-1 "></d-icon>
|
|
友链
|
|
</d-menu-item>
|
|
</d-menu>
|
|
<!-- 用户区域 -->
|
|
<div class="!text-[#ec66ab] flex items-center" @click="gotoHf">
|
|
<span class="flex items-center location-info truncate">
|
|
<d-icon color="#ec66ab" class="mr-1" name="location-new"></d-icon>
|
|
{{ locationInfo }}
|
|
</span>
|
|
<span class="mx-3 text-gray-300">|</span>
|
|
<span class="weather-info mr-2 truncate">{{ wea }}</span>
|
|
<i :class="'qiIcon qi-' + weaIcon + '-fill'"></i>
|
|
<span class="weather-info ml-4">{{ temp }}°C</span>
|
|
</div>
|
|
|
|
<div class="flex items-center mr-8">
|
|
<d-dropdown class="cursor-pointer w-[100px]" v-if="userinfo" trigger="hover">
|
|
<div class="flex items-center">
|
|
<d-avatar :img-src="userinfo.ava_url" class="cursor-pointer" alt="用户的头" />
|
|
<div class="cursor-pointer ml-2 text-gray text-sm">{{ userinfo.nickname }}</div>
|
|
</div>
|
|
<template #menu>
|
|
<ul class="list-menu">
|
|
<!-- hover为淡粉色 -->
|
|
<li class="w-full p-2 text-center hover:text-primary hover:bg-[#f5f0f0] cursor-pointer" @click="logout">
|
|
登出
|
|
</li>
|
|
<li class="w-full p-2 text-center hover:text-primary hover:bg-[#f5f0f0] cursor-pointer" @click="">
|
|
控制台
|
|
</li>
|
|
<li class="w-full p-2 text-center hover:text-primary hover:bg-[#f5f0f0] cursor-pointer" @click="">
|
|
设置
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
</d-dropdown>
|
|
<div v-else class="flex items-center">
|
|
<d-avatar class="cursor-pointer" @click="toLogin"></d-avatar>
|
|
<div class="cursor-pointer ml-2 text-gray text-sm" @click="toLogin">登录</div>
|
|
</div>
|
|
</div>
|
|
<!-- 登录弹窗 -->
|
|
<d-modal class="!w-120" v-model="visible">
|
|
<login-modal v-model:visible="visible"></login-modal>
|
|
</d-modal>
|
|
</div>
|
|
<div class="flex justify-between bg-white">
|
|
<div class="pl-2 items-centerflex" slot="brand" @click="">
|
|
<img :src="logo" alt="柚子的网站" class="h-9 align-middle" />
|
|
</div>
|
|
<div class="flex items-center mr-2">
|
|
<div v-if="userinfo" class="flex items-center">
|
|
<d-avatar :img-src="userinfo.ava_url" class="cursor-pointer" alt="用户的头" />
|
|
<div class="cursor-pointer ml-2 text-gray text-sm">{{ userinfo.nickname }}</div>
|
|
</div>
|
|
<div v-else class="flex items-center">
|
|
<d-avatar class="cursor-pointer" @click="toLogin"></d-avatar>
|
|
<div class="cursor-pointer ml-2 text-gray text-sm" @click="toLogin">登录</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// 从@/icon/menu引入所有的svg文件
|
|
import logo from '@/assets/images/logo.png';
|
|
import artiSvg from '@/icon/menu/arti.svg';
|
|
import downSvg from '@/icon/menu/download.svg';
|
|
import homeSvg from '@/icon/menu/home.svg';
|
|
import linkSvg from '@/icon/menu/link.svg';
|
|
import picSvg from '@/icon/menu/pic.svg';
|
|
import settingSvg from '@/icon/menu/setting.svg';
|
|
import loginModal from '@/components/Login.vue'
|
|
|
|
|
|
import { onMounted, ref, watch } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
|
|
|
const route = useRoute();
|
|
const visible = ref(false);
|
|
const router = useRouter();
|
|
const key = ref("home");
|
|
const locationInfo = ref("获取位置中...");
|
|
const latitude = ref<number | null>(null);
|
|
const longitude = ref<number | null>(null);
|
|
const fxlink = ref<string>("#")
|
|
const wea = ref("")
|
|
const weaIcon = ref<string>("")
|
|
const temp = ref<number>(0);
|
|
const userinfo: any = ref(null)
|
|
const nav: any = useTemplateRef('nav')
|
|
const navx = $store.nav.useNavStore()
|
|
const usrLog = $store.log.useLogStore()
|
|
console.log('>>> --> route:', route)
|
|
// 获取地理位置
|
|
const getLocation = () => {
|
|
if (!navigator.geolocation) {
|
|
locationInfo.value = "您的浏览器不支持地理位置定位";
|
|
return;
|
|
}
|
|
|
|
navigator.geolocation.getCurrentPosition(
|
|
async (position) => {
|
|
latitude.value = position.coords.latitude;
|
|
longitude.value = position.coords.longitude;
|
|
const jw = `${longitude.value.toFixed(2)},${latitude.value.toFixed(2)}`;
|
|
|
|
// 这里可以添加调用后端API获取具体位置名称的逻辑
|
|
handdleJw(jw);
|
|
|
|
|
|
},
|
|
async (error) => {
|
|
switch (error.code) {
|
|
case error.PERMISSION_DENIED:
|
|
locationInfo.value = "正在定位...";
|
|
break;
|
|
case error.POSITION_UNAVAILABLE:
|
|
locationInfo.value = "正在定位...";
|
|
break;
|
|
case error.TIMEOUT:
|
|
locationInfo.value = "正在定位...";
|
|
break;
|
|
}
|
|
const res = await $http.mix.getIp();
|
|
latitude.value = Number(res.data.data.lat);
|
|
longitude.value = Number(res.data.data.lng);
|
|
const jw = `${longitude.value?.toFixed(4)},${latitude.value?.toFixed(4)}`;
|
|
|
|
// 这里可以添加调用后端API获取具体位置名称的逻辑
|
|
handdleJw(jw);
|
|
},
|
|
{
|
|
enableHighAccuracy: false,
|
|
timeout: 5000,
|
|
maximumAge: 0
|
|
}
|
|
);
|
|
};
|
|
|
|
async function handdleJw(jw: string) {
|
|
const zxs = ['北京', '重庆', '天津', '上海']
|
|
// 根据经纬度获取物理位置
|
|
const loc = await $http.mix.getLocation({ location: jw });
|
|
console.log('>>> --> handdleJw --> loc:', loc)
|
|
fxlink.value = loc.data.fxLink
|
|
if (loc.code == 200) {
|
|
const data = loc.data;
|
|
if (zxs.includes(data.adm2)) {
|
|
locationInfo.value = `${data.adm1}${data.name}`;
|
|
} else {
|
|
locationInfo.value = `${data.adm1}${data.adm2}${data.name}`;
|
|
}
|
|
} else {
|
|
$msg.console.error(loc.msg);
|
|
return
|
|
}
|
|
const res = await $http.mix.getWeather({ location: jw });
|
|
console.log('>>> --> handdleJw --> res:', res)
|
|
if (res.code == 200) {
|
|
wea.value = res.data.text;
|
|
weaIcon.value = res.data.icon;
|
|
temp.value = res.data.temp;
|
|
} else {
|
|
$msg.console.error(loc.msg);
|
|
}
|
|
}
|
|
|
|
watch(() => route.name, (newVal) => {
|
|
key.value = newVal as string
|
|
})
|
|
|
|
function goHome() {
|
|
if (route.name == 'home') return
|
|
router.push('/home');
|
|
}
|
|
|
|
function toLogin() {
|
|
console.log('>>> --> toLogin --> toLogin:', 'toLogin')
|
|
|
|
if ($cookies.get('token')) return
|
|
visible.value = true
|
|
}
|
|
|
|
function logout() {
|
|
console.log('>>> --> logout --> logout:', 'logout')
|
|
$cookies.remove('token');
|
|
$cookies.remove('userinfo');
|
|
usrLog.setIsLogin(false)
|
|
userinfo.value = null;
|
|
}
|
|
|
|
function gotoHf() {
|
|
console.log('>>> --> gotoHf --> fxlink:', fxlink)
|
|
window.open(fxlink.value, "_BLACK")
|
|
|
|
}
|
|
onMounted(() => {
|
|
|
|
userinfo.value = $cookies.get('userinfo');
|
|
console.log('>>>>>>>>>>', userinfo.value);
|
|
key.value = route.name as string;
|
|
console.log('>>> --> route.name:', route.name)
|
|
getLocation(); // 组件挂载时获取位置
|
|
|
|
const h: number = nav.value.clientHeight
|
|
if (h > 0) navx.setNavH(h)
|
|
|
|
|
|
|
|
});
|
|
onBeforeUpdate(() => {
|
|
userinfo.value = $cookies.get('userinfo');
|
|
key.value = route.name as string;
|
|
const h: number = nav.value.clientHeight
|
|
// console.log('******>>> --> nav.value:', nav.value)
|
|
// console.log('()()()()()>>> --> h:', h)
|
|
if (h > 0) navx.setNavH(h)
|
|
})
|
|
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.main-nav {
|
|
box-shadow: 0 1px 15px 0 @primary;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
:deep(.devui-menu-horizontal .devui-menu-item:hover span .icon) {
|
|
color: var(--devui-brand, #5e7ce0) !important;
|
|
fill: var(--devui-brand, #5e7ce0) !important;
|
|
}
|
|
|
|
:deep(.devui-menu-item-select span svg) {
|
|
color: var(--devui-brand, #5e7ce0) !important;
|
|
fill: var(--devui-brand, #5e7ce0) !important;
|
|
line-height: 100% !important;
|
|
}
|
|
|
|
:deep(.devui-menu-item-select span) {
|
|
color: var(--devui-brand, #5e7ce0) !important;
|
|
}
|
|
|
|
:deep(.devui-menu-horizontal) {
|
|
padding: 14px 20px 6px;
|
|
}
|
|
|
|
:deep(.devui-menu-item span) {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.devui-icon__container {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
</style> |