feat: 侧边栏

src/components/Navbar/LeftMenu.vue

@@ -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>

src/components/Navbar/index.vue

@@ -9,11 +9,23 @@
     >
       <span class="iconfont icon-menu" style="font-size: 24px"></span>
     </div>
+
+    <van-popup
+      v-model:show="isMenuShow"
+      position="left"
+      :style="{ height: '100%', width: '70%' }"
+    >
+      <NavBarLeftMenu v-if="isMenuShow" @on-hide="isMenuShow = false" />
+    </van-popup>
   </div>
 </template>
 
 <script setup>
-function handleClickMenu() {}
+const isMenuShow = ref(false);
+
+function handleClickMenu() {
+  isMenuShow.value = true;
+}
 </script>
 
 <style lang="scss" scoped></style>

src/pages/travel-projects/index.client.vue

@@ -1,6 +1,9 @@
 <template>
-  <div class="px-15">
+  <div class="">
     <van-sticky :offset-top="60">
+      <!-- <van-dropdown-menu ref="menuRef"></van-dropdown-menu> -->
+      <!-- <van-dropdown-item title="区域选择"> </van-dropdown-item> -->
+
       <div class="h-40 flex items-center justify-end bg-white">
         <div @click="filterOption.show = true" class="text-black-6 text-base">
           <span>{{ filterLabel }}</span>
@@ -13,22 +16,23 @@
       image="search"
       description="暂无相关旅游项目"
     />
-    <van-list
-      v-else-if="listData.length"
-      class=""
-      v-model:loading="loading"
-      :finished="finished"
-      finished-text="-- 没有更多了 --"
-      @load="onLoadMore"
-      :immediate-check="false"
-    >
-      <TravelProjectItem
-        v-for="item in listData"
-        :key="item.id"
-        :item-data="item"
+    <div class="px-15" v-else-if="listData.length">
+      <van-list
+        class=""
+        v-model:loading="loading"
+        :finished="finished"
+        finished-text="-- 没有更多了 --"
+        @load="onLoadMore"
+        :immediate-check="false"
       >
-      </TravelProjectItem>
-    </van-list>
+        <TravelProjectItem
+          v-for="item in listData"
+          :key="item.id"
+          :item-data="item"
+        >
+        </TravelProjectItem>
+      </van-list>
+    </div>
     <van-popup v-model:show="filterOption.show" round position="bottom">
       <van-cascader
         title="请选择国家"