feat: 抽屉效果再app不兼容问题处理

src/pages/ChatMain/ChatMainList/index.vue

@@ -5,6 +5,7 @@
       <ChatTopNavBar
         ref="topNavBarRef"
         :mainPageDataModel="mainPageDataModel"
+        @showDrawer="handleShowDrawer"
       />
     </view>
 
@@ -257,6 +258,7 @@ import { checkToken } from "@/hooks/useGoLogin";
 import { useAppStore } from "@/store";
 import { getAccessToken } from "@/constant/token";
 
+const emit = defineEmits(["showDrawer"]);
 const appStore = useAppStore();
 /// 导航栏相关
 const statusBarHeight = ref(20);
@@ -331,6 +333,10 @@ const handleChange = (i) => {
   console.log("切换:", i);
 };
 
+const handleShowDrawer = () => {
+  emit("showDrawer");
+};
+
 /// =============事件函数↓================
 const handleTouchEnd = () => {
   clearTimeout(holdKeyboardTimer.value);

src/pages/ChatMain/ChatTopNavBar/index.vue

@@ -1,6 +1,8 @@
 <template>
   <view class="border-box h-44 flex flex-items-center pl-12 pr-12">
-    <uni-icons type="bars" size="24" color="#333" @click="showDrawer" />
+    <view class="nav-icon-button" @tap.stop="showDrawer">
+      <uni-icons type="bars" size="24" color="#ffffff" />
+    </view>
 
     <!-- 隐藏 -->
     <view class="flex-full h-full flex flex-items-center flex-justify-center">
@@ -54,7 +56,9 @@ const spriteStyle = computed(() => {
   };
 });
 
-const showDrawer = () => uni.$emit("SHOW_DRAWER");
+const emit = defineEmits(["showDrawer"]);
+
+const showDrawer = () => emit("showDrawer");
 
 defineExpose({ show });
 </script>

src/pages/ChatMain/ChatTopNavBar/styles/index.scss

@@ -1,3 +1,11 @@
+.nav-icon-button {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 // 图片从0%到100%动画
 .image-animated {
   animation: logo-scale 0.3s ease-in-out;

src/pages/DrawerSection/index.vue

@@ -26,15 +26,20 @@ const drawerRef = ref(null);
 
 // 监听抽屉显示事件
 const mineSettingRef = ref(null);
-const open = () => {
-  checkToken().then(async () => {
-    await mineSettingRef.value.getLoginUserPhoneInfo();
-    drawerRef.value.open();
-  });
+const open = async () => {
+  await checkToken();
+
+  drawerRef.value?.open?.();
+
+  try {
+    await mineSettingRef.value?.getLoginUserPhoneInfo?.();
+  } catch (error) {
+    console.warn("获取登录用户手机号失败:", error);
+  }
 };
 
 // 监听抽屉隐藏事件
-const close = () => drawerRef.value.close();
+const close = () => drawerRef.value?.close?.();
 
 defineExpose({
   open,

src/pages/index/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="index-page w-full h-screen overflow-hidden bg-liner">
-    <ChatMainList />
+    <ChatMainList @showDrawer="showDrawer" />
 
     <!-- 日历组件 -->
     <Calender
@@ -47,9 +47,9 @@ const handleDateSelect = (data) => {
   uni.$emit("selectCalendarDate", selectedDate.value); // 传回父组件
 };
 
-uni.$on("openCalendar", () => {
+const openCalendar = () => {
   calendarVisible.value = true;
-});
+};
 
 
 // 打开窗口
@@ -57,11 +57,10 @@ const drawerRef = ref(null);
 const showDrawer = async (e) => {
   await checkToken();
 
-  drawerRef.value.open();
+  drawerRef.value?.open?.();
 };
-uni.$on("SHOW_DRAWER", showDrawer);
 // 关闭窗口
-const closeDrawer = (e) => drawerRef.value.close();
+const closeDrawer = (e) => drawerRef.value?.close?.();
 
 ///获取到二维码原始链接内容
 const getWeixinMiniProgramParams = (e) => {
@@ -78,11 +77,13 @@ onLoad((e) => {
 });
 
 onMounted(() => {
-  
+  uni.$on("openCalendar", openCalendar);
+  uni.$on("SHOW_DRAWER", showDrawer);
 });
 
 onUnmounted(() => {
-  // uni.$off('openCalendar')
+  uni.$off("openCalendar", openCalendar);
+  uni.$off("SHOW_DRAWER", showDrawer);
 });
 
 </script>