|
@@ -0,0 +1,154 @@
|
|
|
+<template>
|
|
|
+ <div class="pt-70 px-20 pb-30 flex flex-col h-screen">
|
|
|
+ <NuxtLink v-if="!token" to="/login" class="flex items-center space-x-15">
|
|
|
+ <div
|
|
|
+ class="flex items-center justify-center bg-[#d9d9d9] rounded-full h-60 w-60"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="iconfont icon-profile text-black-6"
|
|
|
+ style="font-size: 30px"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ <span class="text-black-6 text-base">登录</span>
|
|
|
+ </NuxtLink>
|
|
|
+
|
|
|
+ <div v-else-if="token" class="flex items-center space-x-15">
|
|
|
+ <van-image
|
|
|
+ :src="userInfo.headImageUrl"
|
|
|
+ height="60"
|
|
|
+ width="60"
|
|
|
+ radius="30px"
|
|
|
+ class="shrink-0"
|
|
|
+ ></van-image>
|
|
|
+ <div class="flex-1 flex flex-col">
|
|
|
+ <div class="text-black-3 text-base">{{ userInfo.showName }}</div>
|
|
|
+ <div v-if="userInfo.personalSign" class="text-black-6 text-sm">
|
|
|
+ <span class="text-black-6">个性签名:</span>
|
|
|
+ <span class="text-black-3">{{ userInfo.personalSign }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex flex-col mt-20 divide-y flex-1 overflow-scroll">
|
|
|
+ <div
|
|
|
+ v-for="item in menuData"
|
|
|
+ :key="item.title"
|
|
|
+ @click="handleClickMenu(item)"
|
|
|
+ class="flex items-center h-50 space-x-5"
|
|
|
+ >
|
|
|
+ <img :src="item.icon" class="w-23 h-23" alt="" srcset="" />
|
|
|
+ <span class="text-base text-black-3">{{ item.title }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <van-button
|
|
|
+ v-if="token"
|
|
|
+ @click="handleLogout"
|
|
|
+ plain
|
|
|
+ style="width: 100%; margin-top: 20px"
|
|
|
+ >退出登录</van-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import menu_travel_home from "~/assets/img/navbar/menu_home.png";
|
|
|
+import menu_car from "@/assets/img/navbar/menu_car.png";
|
|
|
+import menu_create_note from "@/assets/img/navbar/menu_create_note.png";
|
|
|
+import menu_house from "@/assets/img/navbar/menu_house.png";
|
|
|
+import menu_labour from "@/assets/img/navbar/menu_loubar.png";
|
|
|
+import menu_tickets from "@/assets/img/navbar/menu_tickets.png";
|
|
|
+import menu_travel_note from "@/assets/img/navbar/menu_travel_note.png";
|
|
|
+import menu_travel_project from "@/assets/img/navbar/menu_travel_project.png";
|
|
|
+import menu_visa from "@/assets/img/navbar/menu_visa.png";
|
|
|
+
|
|
|
+const emit = defineEmits("onHide");
|
|
|
+
|
|
|
+const authStore = useAuthStore();
|
|
|
+const { token } = storeToRefs(authStore);
|
|
|
+
|
|
|
+const userInfoStore = useUserInfoStore();
|
|
|
+const { userInfo } = storeToRefs(userInfoStore);
|
|
|
+
|
|
|
+const needLoginMenus = [
|
|
|
+ {
|
|
|
+ title: "写游记",
|
|
|
+ icon: menu_create_note,
|
|
|
+ to: "/note-create",
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+const menuData = reactive([
|
|
|
+ {
|
|
|
+ title: "首页",
|
|
|
+ icon: menu_travel_home,
|
|
|
+ to: "/",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "游记",
|
|
|
+ icon: menu_travel_note,
|
|
|
+ to: "/travel-notes",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "旅游项目",
|
|
|
+ icon: menu_travel_project,
|
|
|
+ to: "/travel-projects",
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // title: "签证居留",
|
|
|
+ // icon: menu_visa,
|
|
|
+ // to: "/visa",
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // title: "全球包车",
|
|
|
+ // icon: menu_car,
|
|
|
+ // to: "/car",
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // title: "买房卖房",
|
|
|
+ // icon: menu_house,
|
|
|
+ // to: "/house",
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // title: "出国劳务",
|
|
|
+ // icon: menu_labour,
|
|
|
+ // to: "/labour",
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // title: "门票代订",
|
|
|
+ // icon: menu_tickets,
|
|
|
+ // to: "/labour",
|
|
|
+ // },
|
|
|
+]);
|
|
|
+
|
|
|
+watch(
|
|
|
+ token,
|
|
|
+ (val) => {
|
|
|
+ if (!val) return;
|
|
|
+ userInfoStore.getUserInfo();
|
|
|
+ menuData.splice(1, 0, ...needLoginMenus);
|
|
|
+ },
|
|
|
+ {
|
|
|
+ immediate: true,
|
|
|
+ }
|
|
|
+);
|
|
|
+
|
|
|
+function handleClickMenu(item) {
|
|
|
+ navigateTo({
|
|
|
+ path: item.to,
|
|
|
+ });
|
|
|
+ emit("onHide");
|
|
|
+}
|
|
|
+
|
|
|
+function handleLogout() {
|
|
|
+ try {
|
|
|
+ request("/website/web/doLogout", { method: "post" });
|
|
|
+ emit("onHide");
|
|
|
+ } finally {
|
|
|
+ authStore.cleanToken();
|
|
|
+ navigateTo("/");
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped></style>
|