feat；消息与天气接口对接

2026-05-07 17:16:45 +08:00
parent 9455beec4d
commit 42e0e4920f
8 changed files with 218 additions and 90 deletions
--- a/src/pages.json
+++ b/src/pages.json
@@ -38,6 +38,12 @@
      "style": {
        "navigationStyle": "custom"
      }
+    },
+    {
+      "path": "pages/ChatMain/NoticeMessage/detail",
+      "style": {
+        "navigationStyle": "custom"
+      }
    }
  ],
  "subPackages": [
--- a/src/pages/ChatMain/ChatMainList/index.vue
+++ b/src/pages/ChatMain/ChatMainList/index.vue
@@ -9,7 +9,7 @@
    </view>

    <view class="relative">
-      <image class="w-full block" :src="mainPageDataModel.initPageImages.backgroundImageUrl"
+      <image class="w-full block" :src="mainPageDataModel?.initPageImages?.backgroundImageUrl"
        mode="aspectFill" style="height: 252px;" />
      <view class="absolute bottom-0 left-0 right-0 flex-full">
        <view class="px-12 pt-12">
@@ -204,8 +204,6 @@ import HomeWelcome from "../HomeWelcome/index.vue";
 import AiTabSwitch from "@/components/AiTabSwitch/index.vue";
 import Discovery from "../../Discovery/index.vue";

-import ChatTopWelcome from "../ChatTopWelcome/index.vue";
-import NoticeMessage from "../NoticeMessage/index.vue";
 import ChatTopNavBar from "../ChatTopNavBar/index.vue";
 import ChatCardAI from "../ChatCardAi/index.vue";
 import ChatCardMine from "../ChatCardMine/index.vue";
--- a/src/pages/ChatMain/HomeWelcome/index.vue
+++ b/src/pages/ChatMain/HomeWelcome/index.vue
@@ -7,58 +7,21 @@
    <view class="flex flex-col flex-full min-width-0">
      <view class="flex flex-row flex-items-center flex-justify-between min-width-0">
        <text class="flex-full min-width-0 font-size-20 font-500 color-white ellipsis-1">{{ mainPageDataModel.welcomeContent }}</text>
-        <text class="flex-shrink-0 font-size-20 font-500 color-white mt-4"> 26°C ☀️ </text>
+        <text class="flex-shrink-0 font-size-20 font-500 color-white mt-4"> {{ weatherText }} </text>
      </view>

-      <swiper @change="onSwiperChange" class="swiper" circular :autoplay="autoplay" :interval="interval"
-        :duration="duration" :indicator-dots="false">
-        <swiper-item v-for="item in bannerList" :key="item.title">
-          <view class="swiper-item flex flex-col flex-items-start flex-justify-between px-10">
-            <text class="font-size-12 font-600 color-B45309">
-              {{ item.title }}
-            </text>
-            <view class="flex flex-row flex-justify-between">
-              <text class="font-size-10 font-500 color-D97706">
-                发布时间：{{ item.time }}
-              </text>
-              <text class="font-size-10 font-500 color-B45309 underline-text">
-                详情
-              </text>
-            </view>
-          </view>
-        </swiper-item>
-      </swiper>
-
-      <yo-indicator-dot :current-index="currentIndex" :length="bannerList.length" duration="0.5" default-width="4px"
-        active-width="16px" dot-height="4px" shape="circle" default-color="rgba(255,255,255,0.5)"
-        active-color="rgba(255,255,255,1)" />
+      <NoticeMessage />
    </view>
  </view>
 </template>
 <script setup>
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import { defineProps, computed } from "vue";
 import SpriteAnimator from "@/components/Sprite/SpriteAnimator.vue";
+import NoticeMessage from "../NoticeMessage/index.vue";
+import { getLocalWeather } from "@/request/api/MainPageDataApi";

-const autoplay = ref(true);
-const interval = ref(7000);
-const duration = ref(500);
-
-const currentIndex = ref(0);
-const bannerList = ref([
-  {
-    title: "小七欢迎你～",
-    time: "2025年7月12日 09:30",
-  },
-  {
-    title: "小8欢迎你～",
-    time: "2025年7月13日 09:30",
-  },
-  {
-    title: "小9欢迎你～",
-    time: "2025年7月15日 09:30",
-  },
-]);
+const weatherText = ref("26°C ☀️");

 const props = defineProps({
  mainPageDataModel: {
@@ -92,29 +55,18 @@ const spriteStyle = computed(() => {
  };
 });

-const onSwiperChange = (e) => {
-  currentIndex.value = e.detail.current;
-};
+const getLocalWeatherData = async () => {
+  const res = await getLocalWeather();
+  if (res && res.code === 0) {
+    const { temperature, weather } = res.data;
+    weatherText.value = `${temperature}°C ${weather}`;
+  }
+}
+
+onMounted(() => {
+  getLocalWeatherData();
+});

 </script>

-<style scoped>
-.swiper {
-  height: 50px;
-  margin-top: 8px;
-}
-
-.swiper-item {
-  display: block;
-  height: 46px;
-  background: #fffbeb;
-  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
-  border-radius: 12px;
-  border: 2px solid #fef3c7;
-}
-
-.underline-text {
-  text-decoration: underline;
-  text-decoration-color: #b45309;
-}
-</style>
+<style scoped></style>
--- a/src/pages/ChatMain/NoticeMessage/detail.vue
+++ b/src/pages/ChatMain/NoticeMessage/detail.vue
@@ -0,0 +1,96 @@
+<template>
+  <view class="flex flex-col bg-liner h-screen overflow-hidden">
+    <!-- ✅ 顶部固定导航 -->
+    <view class="flex-shrink-0">
+      <TopNavBar :title="detailTitle" background="transparent" />
+    </view>
+
+    <!-- ✅ 滚动区域 -->
+    <scroll-view class="flex-full overflow-hidden" scroll-y >
+      <view class="pb-24 border-box overflow-hidden">
+        <image class="w-full block" :src="coverImage" mode="aspectFill" />
+
+        <view class="pt-16 px-12 pb-24 border-box">
+          <view class="color-171717 font-size-16 font-weight-600">{{ detailTitle }}</view>
+
+          <view v-if="publishTime" class="notice-time-tag flex flex-row flex-items-center mt-16">
+            <uni-icons type="clock" size="18" color="#5A6780" />
+            <text class="color-171717 font-size-12 font-weight-600 ml-8">发布时间：{{ publishTime }}</text>
+          </view>
+
+          <view class="mt-16 mx-12 bg-gray w-full height-1"></view>
+
+          <view class="mt-16 color-171717 font-size-14">{{ noticeContent }}</view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup>
+import TopNavBar from "@/components/TopNavBar/index.vue";
+import defaultCover from "@/components/ImageSwiper/images/2025-07-12_180248.jpg";
+import { computed, ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+
+const noticeData = ref({});
+const fallbackContent = [
+  "因近日持续降雨导致景区内水位明显上升，为保障游客人身安全，景区管理部门决定自即日起临时封闭卧龙潭至鸳鸯湖沿溪步道，封闭时间视水位情况另行通知。",
+  "受影响游客可改走景区主干道绕行，全程增加约15分钟。观光车服务正常运营，建议优先乘车前往鸳鸯湖区域。",
+  "因近日持续降雨导致景区内水位明显上升，为保障游客人身安全，景区管理部门决定自即日起临时封闭卧龙潭至鸳鸯湖沿溪步道，封闭时间视水位情况另行通知。",
+  "因近日持续降雨导致景区内水位明显上升，为保障游客人身安全，景区管理部门决定自即日起临时封闭卧龙潭至鸳鸯湖沿溪步道，封闭时间视水位情况另行通知。",
+  "因近日持续降雨导致景区内水位明显上升，为保障游客人身安全，景区管理部门决定自即日起临时封闭卧龙潭至鸳鸯湖沿溪步道，封闭时间视水位情况另行通知。",
+  "因近日持续降雨导致景区内水位明显上升，为保障游客人身安全，景区管理部门决定自即日起临时封闭卧龙潭至鸳鸯湖沿溪步道，封闭时间视水位情况另行通知。",
+  "因近日持续降雨导致景区内水位明显上升，为保障游客人身安全，景区管理部门决定自即日起临时封闭卧龙潭至鸳鸯湖沿溪步道，封闭时间视水位情况另行通知。",
+  "如水位下降恢复安全标准，景区将第一时间通过广播及公告重新开放步道，请游客留意景区实时公告。"
+];
+
+const detailTitle = computed(() => {
+  return noticeData.value.entityName?.trim() || "消息详情";
+});
+
+const publishTime = computed(() => {
+  return noticeData.value.effectiveStartTime?.trim() || "";
+});
+
+const coverImage = computed(() => {
+  return noticeData.value.eventImage?.trim() || defaultCover;
+});
+
+const noticeContent = computed(() => {
+  return noticeData.value.eventDescription?.trim() || fallbackContent.join("\n");
+});
+
+onLoad((query = {}) => {
+  if (query.noticeData) {
+    try {
+      noticeData.value = JSON.parse(decodeURIComponent(query.noticeData));
+    } catch (error) {
+      console.warn("noticeData parse failed:", error);
+    }
+  }
+});
+
+</script>
+
+<style lang="scss" scoped>
+
+.notice-title {
+  font-size: 48rpx;
+  font-weight: 700;
+  line-height: 68rpx;
+  color: #2d3a57;
+}
+
+.notice-time-tag {
+  display: inline-flex;
+  min-height: 76rpx;
+  padding: 0 28rpx;
+  background: linear-gradient(180deg, #f4f7fb 0%, #e9eef6 100%);
+  border: 2rpx solid #d6dde8;
+  border-radius: 999rpx;
+  box-sizing: border-box;
+}
+
+
+</style>
--- a/src/pages/ChatMain/NoticeMessage/index.vue
+++ b/src/pages/ChatMain/NoticeMessage/index.vue
@@ -1,40 +1,100 @@
 <template>

-  <view class="border-box pl-12 pr-12">
-    <view class="wrap rounded-20 bg-white relative overflow-hidden">
-      <view class="flex flex-col p-16 mr-110 border-box">
-        <view class="flex flex-row flex-items-center justify-center">
-          <view class="w-24 h-24 rounded-full bg-theme-color-500 flex flex-items-center flex-justify-center">
-            <uni-icons type="sound" size="16" color="#ffffff"/>
+  <view >
+    <swiper @change="onSwiperChange" class="swiper" circular :autoplay="autoplay" :interval="interval"
+      :duration="duration" :indicator-dots="false">
+      <swiper-item v-for="item in bannerList" :key="item.entityName">
+        <view class="swiper-item flex flex-col flex-items-start flex-justify-between px-10" @click="clickItem(item)">
+          <text class="font-size-12 font-600 color-B45309">
+            {{ item.entityName }}
+          </text>
+          <view class="flex flex-row flex-justify-between">
+            <text class="font-size-10 font-500 color-D97706">
+              发布时间：{{ item.effectiveStartTime }}
+            </text>
+            <text class="font-size-10 font-500 color-B45309 underline-text">
+              详情
+            </text>
          </view>
-          <text class="font-size-16 font-500 text-color-900 ml-6">临时提醒</text>
        </view>
-        <view class="font-size-12 font-color-600 mt-8">{{ props.noticeContent.eventMessageContent }}</view>
-      </view>
-      <image class="mt-4 object-cover absolute right-0 bottom-0 bg-image" src="./notice_bg_img.png"/>
-    </view>
+      </swiper-item>
+    </swiper>
+
+    <yo-indicator-dot :current-index="currentIndex" :length="bannerList.length" duration="0.5" default-width="4px"
+      active-width="16px" dot-height="4px" shape="circle" default-color="rgba(255,255,255,0.5)"
+      active-color="rgba(255,255,255,1)" />
+    
  </view>

 </template>

 <script setup>
-import { defineProps } from "vue";
+import { onMounted, ref } from "vue";
+import { getTimeNoticeList } from "@/request/api/MainPageDataApi";

-const props = defineProps({
-  noticeContent: {
-    type: Object,
-    default: () => ({}),
+const autoplay = ref(true);
+const interval = ref(7000);
+const duration = ref(500);
+
+const currentIndex = ref(0);
+// const bannerList = ref([]);
+const bannerList = ref([
+  {
+    entityName: "小七欢迎你～",
+    effectiveStartTime: "2025年7月12日 09:30",
  },
+  {
+    entityName: "小8欢迎你～",
+    effectiveStartTime: "2025年7月13日 09:30",
+  },
+  {
+    entityName: "小9欢迎你～",
+    effectiveStartTime: "2025年7月15日 09:30",
+  },
+]);
+
+
+const onSwiperChange = (e) => {
+  currentIndex.value = e.detail.current;
+};
+
+const getTimeNoticeListData = async () => {
+  const res = await getTimeNoticeList();
+  if (res && res.code === 0) {
+    bannerList.value = res.data;
+  }
+}
+
+onMounted(() => {
+  getTimeNoticeListData();
 });

+const clickItem = (item) => {
+  uni.navigateTo({
+    url: `/pages/ChatMain/NoticeMessage/detail?noticeData=${encodeURIComponent(JSON.stringify(item))}`
+  });
+}
+
 </script>

 <style lang="scss" scoped>
-.bg-image {
-  width: 140px;
-  height: 96px;
+.swiper {
+  height: 50px;
+  margin-top: 8px;
 }
-.mr-110 {
-    margin-right: 110px;
+
+.swiper-item {
+  display: block;
+  height: 46px;
+  background: #fffbeb;
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+  border-radius: 12px;
+  border: 2px solid #fef3c7;
 }
+
+.underline-text {
+  text-decoration: underline;
+  text-decoration-color: #b45309;
+}
+
 </style>
--- a/src/pages/ChatMain/NoticeMessage/notice_bg_img.png
+++ b/src/pages/ChatMain/NoticeMessage/notice_bg_img.png
--- a/src/request/api/MainPageDataApi.js
+++ b/src/request/api/MainPageDataApi.js
@@ -10,6 +10,16 @@ function homeTabContentData(args) {
  return request.post("/hotelBiz/mainScene/queryContentListWithCache", args);
 }

+/// 获取本地天气
+function getLocalWeather(args) {
+  return request.get("/hotelBiz/mainScene/getLocalWeather", args);
+}
+
+/// 获取时间公告列表
+function getTimeNoticeList(args) {
+  return request.get("/hotelBiz/mainScene/eventList", args);
+}
+
 /// 快速问题列表
 function homeQuickQuestionData(args) {
  return request.post("/hotelBiz/mainScene/queryQuickQuestionListWithCache", args);
@@ -34,6 +44,8 @@ function discoveryCradComponent() {
 export { 
  homeTabsData, 
  homeTabContentData,
+  getLocalWeather,
+  getTimeNoticeList,
  homeQuickQuestionData, 
  mainPageData, 
  quickBookingComponent, 
--- a/src/static/scss/height.scss
+++ b/src/static/scss/height.scss
@@ -6,6 +6,10 @@
  height: 100%;
 }

+.h-1 {
+  height: 1px;
+}
+
 .h-8 {
  height: 8px;
 }