feat； 消息与天气接口对接

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>