feat: add notice page and route, clean up UI and refactor drawer

add new `/notice` application route and standalone notice detail page format vue-router import to follow project code style guidelines hide myOrder entries from ChatQuickAccess and MoreService component lists comment out unused book now button in goods page and location navigation card refactor home page drawer event listeners with proper types and optional chaining fix NoticeMessage component: remove redundant swiper indicators, adjust container padding, update navigation to use the new notice route comment out weather fetching logic in Welcome component to disable weather display
2026-06-26 11:02:14 +08:00
parent 563b72ff90
commit 131cf599ad
9 changed files with 144 additions and 129 deletions
--- a/src/pages/goods/components/LocationCard/index.vue
+++ b/src/pages/goods/components/LocationCard/index.vue
@@ -7,12 +7,12 @@
    </div>

    <div class="flex items-center gap-[10px] ml-[16px]">
-      <div>
+      <!-- <div>
        <div class="w-[28px] h-[28px] rounded-[10px] bg-[#F5F5F5] flex items-center justify-center">
          <Navigation size="16" color="#171717" />
        </div>
        <span class="text-[12px] text-ink-600">{{ t("goods.location.navigation") }}</span>
-      </div>
+      </div> -->

      <div>
        <div class="w-[28px] h-[28px] rounded-[10px] bg-[#F5F5F5] flex items-center justify-center"
--- a/src/pages/goods/index.vue
+++ b/src/pages/goods/index.vue
@@ -47,12 +47,12 @@
        </span>
      </div>

-      <div
+      <!-- <div
        class="flex items-center ml-auto pl-[8px] rounded-[10px] w-[120px] h-[48px] [background:linear-gradient(90deg,#ff3d60_57%,#ff990c_100%)]"
        @click="navigateToPay(goodsData)">
        <img class="w-[34px] h-[48px]" src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png" />
        <span class="text-[16px] font-medium text-white">{{ t("goods.actions.bookNow") }}</span>
-      </div>
+      </div> -->
    </div>

    <!-- 日历组件 -->
--- a/src/pages/home/components/ChatQuickAccess/index.vue
+++ b/src/pages/home/components/ChatQuickAccess/index.vue
@@ -30,11 +30,11 @@ const itemList = computed(() => [
    title: t("home.quickAccess.quickBooking"),
    type: Command.quickBooking,
  },
-  {
-    icon: "",
-    title: t("home.quickAccess.myOrder"),
-    type: Command.myOrder,
-  },
+  // {
+  //   icon: "",
+  //   title: t("home.quickAccess.myOrder"),
+  //   type: Command.myOrder,
+  // },
  {
    icon: "",
    title: t("home.quickAccess.service"),
--- a/src/pages/home/components/MoreService/index.vue
+++ b/src/pages/home/components/MoreService/index.vue
@@ -62,14 +62,14 @@ const list = computed(() => [
    type: Command.discovery,
    path: "",
  },
-  {
-    icon: "https://oss.nianxx.cn/mp/static/version_101/home/mddd.png",
-    title: t("home.moreService.myOrder.title"),
-    content: t("home.moreService.myOrder.content"),
-    btnText: t("home.moreService.myOrder.button"),
-    type: Command.myOrder,
-    path: "/order",
-  },
+  // {
+  //   icon: "https://oss.nianxx.cn/mp/static/version_101/home/mddd.png",
+  //   title: t("home.moreService.myOrder.title"),
+  //   content: t("home.moreService.myOrder.content"),
+  //   btnText: t("home.moreService.myOrder.button"),
+  //   type: Command.myOrder,
+  //   path: "/order",
+  // },
  {
    icon: "https://oss.nianxx.cn/mp/static/version_101/home/wdgd.png",
    title: t("home.moreService.service.title"),
--- a/src/pages/home/components/NoticeMessage/index.vue
+++ b/src/pages/home/components/NoticeMessage/index.vue
@@ -1,8 +1,8 @@
 <template>
  <div v-if="hasBannerList">
-    <van-swipe class="h-[50px] mt-[8px]" loop vertical :autoplay="autoplay" @change="onSwiperChange">
+    <van-swipe class="h-[50px] mt-[8px]" loop vertical :show-indicators="false">
      <van-swipe-item v-for="item in bannerList" :key="item.entityName">
-        <div class="swiper-item bg-white flex flex-col items-start justify-between px-10" @click="clickItem(item)">
+        <div class="swiper-item bg-white flex flex-col items-start justify-between px-[12px]" @click="clickItem(item)">
          <span class="text-[#0CCD58] text-[12px] text-[600]">
            {{ item.entityName }}
          </span>
@@ -31,6 +31,7 @@

 <script setup>
 import { computed, onMounted, ref } from "vue";
+import { useRouter } from 'vue-router'
 import { useI18n } from "vue-i18n";
 import { getTimeNoticeList } from "@/api/home";
 import { NOTICE_EVENT_LOGIN_SUCCESS } from "@/constants/constant";
@@ -43,19 +44,16 @@ const props = defineProps({
  },
 });

+const router = useRouter()
+
 const { t } = useI18n();
 const tipsMessage = computed(() => props.tipsMessage || t("home.notice.defaultTip"));

 const autoplay = ref(3000);

-const currentIndex = ref(0);
 const bannerList = ref([]);
 const hasBannerList = computed(() => Array.isArray(bannerList.value) && bannerList.value.length > 0);

-const onSwiperChange = (e) => {
-  currentIndex.value = e.detail.current;
-};
-
 const getTimeNoticeListData = async () => {
  const res = await getTimeNoticeList();
  if (res && res.code === 0) {
@@ -73,7 +71,7 @@ onMounted(() => {

 const clickItem = (item) => {
  router.push({
-    path: '/pages/ChatMain/NoticeMessage/detail',
+    path: '/notice',
    query: {
      noticeData: encodeURIComponent(JSON.stringify(item))
    }
--- a/src/pages/home/components/Welcome/index.vue
+++ b/src/pages/home/components/Welcome/index.vue
@@ -5,9 +5,9 @@
        <span class="flex-1 min-width-0 text-[20px] font-semibold text-white truncate">
          {{ mainPageDataModel.welcomeContent }}
        </span>
-        <span class="shrink-0 text-[20px] font-semibold text-white mt-[4px]">
+        <!-- <span class="shrink-0 text-[20px] font-semibold text-white mt-[4px]">
          {{ weatherText }}
-        </span>
+        </span> -->
      </div>

      <NoticeMessage :tipsMessage="props.mainPageDataModel.tipsMessage" />
@@ -23,9 +23,9 @@
 import { defineProps, computed, onMounted, ref } from "vue";
 import SpriteAnimator from "@/components/SpriteAnimator/index.vue";
 import NoticeMessage from "../NoticeMessage/index.vue";
-import { getLocalWeather } from "@/api/home";
+// import { getLocalWeather } from "@/api/home";

-const weatherText = ref('');
+// const weatherText = ref('');

 const props = defineProps({
  mainPageDataModel: {
@@ -59,98 +59,98 @@ const spriteStyle = computed(() => {
  };
 });

-const getLocalWeatherData = async () => {
-  const res = await getLocalWeather();
-  if (res && res.code === 0) {
-    const { temperature, weather } = res.data;
-    weatherText.value = `${temperature}°C ${getWeatherEmoji(weather)}`;
-  }
-}
-
-onMounted(() => {
-  getLocalWeatherData();
-});
-
-const getWeatherEmoji = (text) => {
-  if (weatherTextMap[text]) return weatherTextMap[text];
-  if (text.includes("晴")) return "☀️";
-  if (text.includes("云")) return "☁️";
-  if (text.includes("雨")) return "🌧️";
-  if (text.includes("雷")) return "⛈️";
-  if (text.includes("雪")) return "🌨️";
-  if (text.includes("雾") || text.includes("霾")) return "😷";
-  if (text.includes("风")) return "🌬️";
-  if (text.includes("沙")) return "🌪️";
-  return "❓";
-}
-
-const weatherTextMap = {
-  // 晴 / 云
-  "晴": "☀️",
-  "少云": "🌤️",
-  "晴间多云": "⛅",
-  "多云": "☁️",
-  "阴": "☁️",
-
-  // 风
-  "有风": "🌬️",
-  "平静": "🍃",
-  "微风": "🌬️",
-  "和风": "🌬️",
-  "清风": "🌬️",
-  "强风/劲风": "💨",
-  "疾风": "💨",
-  "大风": "💨",
-  "烈风": "💨",
-  "风暴": "🌪️",
-  "狂爆风": "🌪️",
-  "飓风": "🌀",
-  "龙卷风": "🌪️",
-
-  // 雨
-  "阵雨": "🌦️",
-  "雷阵雨": "⛈️",
-  "雷阵雨并伴有冰雹": "⛈️",
-  "小雨": "🌧️",
-  "中雨": "🌧️",
-  "大雨": "🌧️",
-  "暴雨": "🌧️",
-  "大暴雨": "🌧️",
-  "特大暴雨": "🌧️",
-  "强阵雨": "🌦️",
-  "毛毛雨/细雨": "🌦️",
-
-  // 雪
-  "小雪": "🌨️",
-  "中雪": "🌨️",
-  "大雪": "❄️",
-  "暴雪": "❄️",
-  "雨夹雪": "🌨️",
-  "阵雪": "🌨️",
-
-  // 雾霾 / 沙尘
-  "雾": "🌁",          // 有能见度的雾（城市感）
-  "轻雾": "🌫️",        // 轻微雾气
-  "浓雾": "🌁",        // 更厚的雾（用城市雾更直观）
-  "大雾": "🌁",
-  "强浓雾": "🌁",
-  "特强浓雾": "🌁",
-
-  // 😷 霾（偏污染）
-  "霾": "😷",         // 直接表达空气差（用户感知最强）
-  "中度霾": "😷",
-  "重度霾": "🤢",     // 更严重一点
-  "严重霾": "☠️",     // 极端情况（视觉冲击强）
-
-  "扬沙": "🌪️",
-  "浮尘": "🌪️",
-  "沙尘暴": "🌪️",
-  "强沙尘暴": "🌪️",
-
-  // 特殊
-  "热": "🔥",
-  "冷": "🥶"
-};
+// const getLocalWeatherData = async () => {
+//   const res = await getLocalWeather();
+//   if (res && res.code === 0) {
+//     const { temperature, weather } = res.data;
+//     weatherText.value = `${temperature}°C ${getWeatherEmoji(weather)}`;
+//   }
+// }
+//
+// onMounted(() => {
+//   getLocalWeatherData();
+// });
+//
+// const getWeatherEmoji = (text) => {
+//   if (weatherTextMap[text]) return weatherTextMap[text];
+//   if (text.includes("晴")) return "☀️";
+//   if (text.includes("云")) return "☁️";
+//   if (text.includes("雨")) return "🌧️";
+//   if (text.includes("雷")) return "⛈️";
+//   if (text.includes("雪")) return "🌨️";
+//   if (text.includes("雾") || text.includes("霾")) return "😷";
+//   if (text.includes("风")) return "🌬️";
+//   if (text.includes("沙")) return "🌪️";
+//   return "❓";
+// }
+//
+// const weatherTextMap = {
+//   // 晴 / 云
+//   "晴": "☀️",
+//   "少云": "🌤️",
+//   "晴间多云": "⛅",
+//   "多云": "☁️",
+//   "阴": "☁️",
+//
+//   // 风
+//   "有风": "🌬️",
+//   "平静": "🍃",
+//   "微风": "🌬️",
+//   "和风": "🌬️",
+//   "清风": "🌬️",
+//   "强风/劲风": "💨",
+//   "疾风": "💨",
+//   "大风": "💨",
+//   "烈风": "💨",
+//   "风暴": "🌪️",
+//   "狂爆风": "🌪️",
+//   "飓风": "🌀",
+//   "龙卷风": "🌪️",
+//
+//   // 雨
+//   "阵雨": "🌦️",
+//   "雷阵雨": "⛈️",
+//   "雷阵雨并伴有冰雹": "⛈️",
+//   "小雨": "🌧️",
+//   "中雨": "🌧️",
+//   "大雨": "🌧️",
+//   "暴雨": "🌧️",
+//   "大暴雨": "🌧️",
+//   "特大暴雨": "🌧️",
+//   "强阵雨": "🌦️",
+//   "毛毛雨/细雨": "🌦️",
+//
+//   // 雪
+//   "小雪": "🌨️",
+//   "中雪": "🌨️",
+//   "大雪": "❄️",
+//   "暴雪": "❄️",
+//   "雨夹雪": "🌨️",
+//   "阵雪": "🌨️",
+//
+//   // 雾霾 / 沙尘
+//   "雾": "🌁",          // 有能见度的雾（城市感）
+//   "轻雾": "🌫️",        // 轻微雾气
+//   "浓雾": "🌁",        // 更厚的雾（用城市雾更直观）
+//   "大雾": "🌁",
+//   "强浓雾": "🌁",
+//   "特强浓雾": "🌁",
+//
+//   // 😷 霾（偏污染）
+//   "霾": "😷",         // 直接表达空气差（用户感知最强）
+//   "中度霾": "😷",
+//   "重度霾": "🤢",     // 更严重一点
+//   "严重霾": "☠️",     // 极端情况（视觉冲击强）
+//
+//   "扬沙": "🌪️",
+//   "浮尘": "🌪️",
+//   "沙尘暴": "🌪️",
+//   "强沙尘暴": "🌪️",
+//
+//   // 特殊
+//   "热": "🔥",
+//   "冷": "🥶"
+// };

 </script>

--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -46,21 +46,29 @@ const openCalendar = () => {
  calendarVisible.value = true;
 };

-// 打开窗口
-const drawerRef = ref();
-emitter.on("SHOW_DRAWER", () => {
-  drawerRef.value.open();
-});
+type DrawerExpose = {
+  open: () => void | Promise<void>;
+  close: () => void;
+};

-// 关闭窗口
-const closeDrawer = () => drawerRef.value.close();
+const drawerRef = ref<DrawerExpose | null>(null);
+
+const handleShowDrawer = () => {
+  drawerRef.value?.open();
+};
+
+const closeDrawer = () => {
+  drawerRef.value?.close();
+};


 onMounted(() => {
+  emitter.on("SHOW_DRAWER", handleShowDrawer);
  emitter.on("openCalendar", openCalendar);
 });

 onUnmounted(() => {
+  emitter.off("SHOW_DRAWER", handleShowDrawer);
  emitter.off("openCalendar", openCalendar);
 });
 </script>
--- a/src/pages/home/components/NoticeMessage/detail.vue
+++ b/src/pages/home/components/NoticeMessage/detail.vue
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,4 +1,8 @@
-import { createMemoryHistory, createRouter, createWebHistory } from "vue-router";
+import {
+  createMemoryHistory,
+  createRouter,
+  createWebHistory,
+} from "vue-router";
 import type { RouteRecordRaw } from "vue-router";

 export const routes = [
@@ -52,6 +56,11 @@ export const routes = [
    name: "service",
    component: () => import("@/pages/service/index.vue"),
  },
+  {
+    path: "/notice",
+    name: "notice",
+    component: () => import("@/pages/notice/index.vue"),
+  },
 ] satisfies RouteRecordRaw[];

 function resolveRouterBase(): string {