feat: 首页侧边抽屉调整

src/pages/index/components/DrawerSection/components/MineSetting/index.vue

@@ -42,7 +42,7 @@ import { NOTICE_EVENT_LOGOUT } from "@/constant/constant";
 import { useAppStore } from "@/store";
 
 const appStore = useAppStore();
-const emits = defineEmits(["closeDrawer"]);
+const emits = defineEmits(["close"]);
 
 // 假数据
 const userInfo = ref({
@@ -107,7 +107,7 @@ const handleLogout = () => {
         uni.clearStorageSync();
         appStore.setHasToken(false);
         appStore.setTokenExpired(true);
-        emits("closeDrawer");
+        emits("close");
         uni.$emit(NOTICE_EVENT_LOGOUT);
       }
     },

src/pages/index/components/DrawerSection/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <uni-drawer ref="drawerRef" mode="left" :width="320">
+    <view class="drawer-home">
+      <view class="drawer-home-nav">
+        <uni-icons
+          type="closeempty"
+          size="22"
+          color="#333333"
+          class="close-icon"
+          @click="close"
+        />
+        <text class="title">我的</text>
+      </view>
+
+      <MineSetting @close="close" />
+    </view>
+  </uni-drawer>
+</template>
+
+<script setup>
+import { ref, defineExpose } from "vue";
+import MineSetting from "./components/MineSetting/index.vue";
+
+const drawerRef = ref(null);
+
+// 监听抽屉显示事件
+const open = () => drawerRef.value.open();
+
+// 监听抽屉隐藏事件
+const close = () => drawerRef.value.close();
+
+defineExpose({
+  open,
+  close,
+});
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>

src/pages/index/components/chat/ChatTopNavBar/index.vue

@@ -1,35 +1,16 @@
 <template>
   <view class="nav-bar">
-    <view class="nav-item" @click="showDrawer('showLeft')">
+    <view class="nav-item" @click="showDrawer">
-      <uni-icons type="bars" size="24" color="#333"></uni-icons>
+      <uni-icons type="bars" size="24" color="#333" />
     </view>
-
-    <uni-drawer ref="showLeft" mode="left" :width="320">
-      <DrawerHome @closeDrawer="closeDrawer('showLeft')" />
-    </uni-drawer>
   </view>
 </template>
 
 <script setup>
 import { ref } from "vue";
-import DrawerHome from "../../drawer/DrawerHome/index.vue";
 import { checkToken } from "@/hooks/useGoLogin";
-const showLeft = ref(false);
 
-// 打开窗口
+const showDrawer = () => uni.$emit("SHOW_DRAWER");
-const showDrawer = async (e) => {
-  await checkToken();
-
-  showLeft.value.open();
-  // 发送抽屉显示事件
-  uni.$emit("drawerShow");
-};
-// 关闭窗口
-const closeDrawer = (e) => {
-  showLeft.value.close();
-  // 发送抽屉隐藏事件
-  uni.$emit("drawerHide");
-};
 </script>
 
 <style lang="scss" scoped>

src/pages/index/components/drawer/DrawerHome/index.vue

@@ -1,54 +0,0 @@
-<template>
-  <view class="drawer-home">
-    <view class="drawer-home-nav">
-      <uni-icons
-        type="closeempty"
-        size="22"
-        color="#333333"
-        class="close-icon"
-        @click="closeDrawer"
-      />
-      <text class="title">我的</text>
-    </view>
-
-    <MineSetting v-if="isDrawerVisible" @closeDrawer="closeDrawer" />
-  </view>
-</template>
-
-<script setup>
-import { defineEmits, ref, onMounted, onUnmounted } from "vue";
-import MineSetting from "../MineSetting/index.vue";
-
-const emits = defineEmits(["closeDrawer"]);
-
-const isDrawerVisible = ref(false);
-const closeDrawer = () => {
-  console.log("关闭抽屉");
-  isDrawerVisible.value = false;
-  emits("closeDrawer");
-};
-
-// 监听抽屉显示事件
-const handleDrawerShow = () => {
-  isDrawerVisible.value = true;
-};
-
-// 监听抽屉隐藏事件
-const handleDrawerHide = () => {
-  isDrawerVisible.value = false;
-};
-
-onMounted(() => {
-  uni.$on("drawerShow", handleDrawerShow);
-  uni.$on("drawerHide", handleDrawerHide);
-});
-
-onUnmounted(() => {
-  uni.$off("drawerShow", handleDrawerShow);
-  uni.$off("drawerHide", handleDrawerHide);
-});
-</script>
-
-<style lang="scss" scoped>
-@import "./styles/index.scss";
-</style>

src/pages/index/index.vue

@@ -14,6 +14,9 @@
 
   <!-- 更多服务 -->
   <MoreService />
+
+  <!-- 抽屉组件 -->
+  <DrawerSection ref="drawerRef" @close="closeDrawer" />
 </template>
 
 <script setup>
@@ -21,9 +24,11 @@ import { onLoad } from "@dcloudio/uni-app";
 import { ref, onUnmounted } from "vue";
 import { getUrlParams } from "@/utils/UrlParams";
 import { useAppStore } from "@/store";
+import { checkToken } from "@/hooks/useGoLogin";
 import ChatMainList from "./components/chat/ChatMainList/index.vue";
 import Calender from "@/components/Calender/index.vue";
 import MoreService from "./components/module/MoreService/index.vue";
+import DrawerSection from "./components/DrawerSection/index.vue";
 
 const appStore = useAppStore();
 
@@ -56,6 +61,19 @@ const getWeixinMiniProgramParams = (e) => {
   }
 };
 
+// 打开窗口
+const drawerRef = ref(null);
+const showDrawer = async (e) => {
+  await checkToken();
+
+  drawerRef.value.open();
+};
+
+uni.$on("SHOW_DRAWER", showDrawer);
+
+// 关闭窗口
+const closeDrawer = (e) => drawerRef.value.close();
+
 onLoad((e) => {
   getWeixinMiniProgramParams(e);
 });