添加我的小区模块的默认公告内容

packages/community/defaultNotice/index.css

@@ -0,0 +1,307 @@
+page {
+  background-color: #F6F6FA;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100vh - 120rpx);
+  width: 100%;
+}
+
+
+.searchBox {
+  display: flex;
+  align-items: center;
+  padding: 0 20rpx;
+  /* margin-top: 35rpx; */
+  justify-content: space-between;
+  background-color: #fff;
+}
+
+.searchBox_add {
+  display: flex;
+  align-items: center;
+  font-weight: 400;
+  font-size: 30rpx;
+  color: #000000;
+}
+
+.searchBox_add image {
+  width: 30rpx;
+  height: 30rpx;
+  margin-right: 16rpx;
+}
+
+.myRealEstate {
+  font-weight: 700;
+  padding-top: 36rpx;
+  font-weight: normal;
+  font-size: 36rpx;
+  color: #222222;
+  text-align: center;
+  background-color: #fff;
+  padding-bottom: 27rpx;
+}
+
+
+.myRealEstate .btn {
+  width: 600rpx;
+  height: 90rpx;
+  background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
+  border-radius: 100rpx 100rpx 100rpx 100rpx;
+  font-weight: normal;
+  font-size: 36rpx;
+  color: #FFFFFF;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+  margin-top: 30rpx;
+}
+
+.nearby {
+  padding: 0 20rpx;
+  margin-top: 20rpx;
+  background-color: #fff;
+  padding-top: 20rpx;
+  box-sizing: border-box;
+  flex: 1;
+}
+
+.nearbyTit {
+  display: flex;
+  justify-content: space-between;
+}
+
+.nearbyTit_left {
+  font-size: 36rpx;
+  color: #222222;
+  font-weight: 700;
+}
+
+.nearbyTit_right {
+  font-size: 26rpx;
+  color: #999999;
+  display: flex;
+  align-items: center;
+}
+
+.nearbyTit_right image {
+  width: 30rpx;
+  height: 30rpx;
+}
+
+.empty {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-weight: normal;
+  font-size: 28rpx;
+  color: #999999;
+  margin-top: 110rpx;
+  width: 100%;
+}
+
+.empty image {
+  width: 366rpx;
+  height: 226rpx;
+  margin-bottom: 27rpx;
+}
+
+
+
+.communityItem {
+  border-bottom: 1rpx solid #EBEBEB;
+  margin-top: 32rpx;
+}
+
+.communityItem_msg {
+  font-size: 26rpx;
+  color: #999999;
+  margin-top: 20rpx;
+  padding-bottom: 30rpx;
+}
+
+.communityItem_Box {
+  display: flex;
+}
+
+.communityItem_Box_left {
+  width: 180rpx;
+  overflow: hidden;
+  height: 180rpx;
+  border-radius: 20rpx 20rpx 20rpx 20rpx;
+  margin-right: 20rpx;
+}
+
+.communityItem_Box_left image {
+  width: 100%;
+  height: 100%;
+}
+
+.communityItem_Box_right {
+  flex: 1;
+}
+
+.communityItem_Box_right_tit {
+  font-size: 32rpx;
+  color: #222222;
+  margin-bottom: 8rpx;
+}
+
+
+.communityItem_Box_right_com {
+  font-size: 26rpx;
+  color: #555555;
+  margin-top: 8rpx;
+  height: 72rpx;
+  line-height: 36rpx;
+  -webkit-line-clamp: 2;
+  /* 限制显示 2 行 */
+  -webkit-box-orient: vertical;
+  /* 垂直排列 */
+  overflow: hidden;
+  /* 超出部分隐藏 */
+  text-overflow: ellipsis;
+  display: -webkit-box;
+}
+
+
+
+.communityItem_Box_right_msg {
+  margin-top: 14rpx;
+}
+
+.communityItem_Box_right_msg_right {
+  width: 140rpx;
+  height: 40rpx;
+  background: #FF370B;
+  border-radius: 100rpx 100rpx 100rpx 100rpx;
+  font-size: 26rpx;
+  color: #FFFFFF;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.communityItem_Box_right_msg {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.communityItem_Box_right_msg_left {
+  display: flex;
+  align-items: center;
+}
+
+.communityItem_Box_right_msg_left1 {
+  width: 110rpx;
+  height: 40rpx;
+  background: rgba(255, 81, 42, 0.1);
+  border-radius: 100rpx 100rpx 100rpx 100rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22rpx;
+  color: #555555;
+  margin-right: 20rpx;
+}
+
+.communityItem_Box_right_msg_left1 image {
+  width: 24rpx;
+  height: 24rpx;
+  margin-right: 10rpx;
+}
+
+.communityItem_Box_right_msg_left2 {
+  width: 110rpx;
+  height: 40rpx;
+  background: #FFF2DA;
+  border-radius: 100rpx 100rpx 100rpx 100rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22rpx;
+  color: #555555;
+}
+
+.communityItem_Box_right_msg_left2 image {
+  width: 24rpx;
+  height: 24rpx;
+  margin-right: 10rpx;
+}
+
+.myRealEstateEmpty {
+  display: flex;
+}
+
+.myRealEstates {
+  width: 710rpx;
+  height: 200rpx;
+  margin: 0 auto;
+  position: relative;
+}
+
+.myRealEstates image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  position: absolute;
+  z-index: 1;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.name {
+  font-size: 50rpx;
+  color: #FFFFFF;
+  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.6);
+  text-align: center;
+  position: relative;
+  z-index: 2;
+  padding-top: 24rpx;
+}
+
+.Visitor {
+  font-weight: normal;
+  font-size: 24rpx;
+  color: #FFFFFF;
+  width: 380rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 52rpx;
+  margin: 0 auto;
+  margin-top: 30rpx;
+  position: relative;
+  z-index: 2;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 10rpx 10rpx 10rpx 10rpx;
+}
+
+
+.Tit {
+  font-size: 40rpx;
+  color: #222222;
+  text-align: center;
+  margin-top: 20rpx;
+  margin-bottom: 5rpx;
+}
+
+.subTit {
+  font-size: 24rpx;
+  color: #999999;
+  text-align: center;
+  margin-bottom: 30rpx;
+}
+
+.Con{
+  padding: 0 20rpx;
+  box-sizing: border-box;
+  line-height: 1.8;
+}

packages/community/defaultNotice/index.vue

@@ -0,0 +1,83 @@
+<template>
+	<view class="container">
+		<view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
+			<view class="searchBox_add">
+				<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
+			</view>
+		</view>
+
+
+		<view class="Tit">{{ Info.title }}</view>
+		<!-- <view class="subTit" v-if="Info.author || Info.publish_time">{{ Info.author }} {{ Info.publish_time }}</view>
+		<view class="subTit" v-else>
+			<text>发布时间：{{ new Date().toLocaleDateString() }}</text>
+		</view> -->
+		<view class="Con">
+			<rich-text :nodes="Info.content"></rich-text>
+		</view>
+
+	</view>
+
+</template>
+
+<script>
+import {
+	picUrl,
+	uniqueByField,
+	menuButtonInfo
+} from '../../../utils';
+
+// 引入数据文件
+import dataJson from '../index/data.json';
+
+export default {
+	data() {
+		return {
+			top: "",
+			localHeight: "",
+			id: "",
+			Info: {},
+			defaultNoticeList: dataJson.defaultNoticeList
+		}
+	},
+	onLoad(options) {
+		const meun = menuButtonInfo();
+		this.top = meun.top;
+		// this.top = meun.height + meun.top;
+		this.localHeight = meun.height;
+		this.id = options.id;
+		this.getInfo();
+	},
+
+
+	methods: {
+		// 获取公告详情
+		getInfo() {
+			console.log("🚀 ~ getInfo ~ this.defaultNoticeList:", this.defaultNoticeList)
+			// 从本地数据中查找对应ID的内容
+			const detailData = this.defaultNoticeList.find(item => item.id === Number(this.id));
+			console.log("🚀 ~ getInfo ~ detailData:", detailData)
+			if (detailData) {
+				// 复制数据以避免修改原始数据
+				const info = { ...detailData };
+				// 将换行符转换为HTML的<br>标签，确保rich-text正确渲染换行
+				if (info.content) {
+					info.content = info.content.replace(/\n/g, '<br>');
+				}
+				this.Info = info;
+			}
+		},
+		back() {
+			uni.navigateBack({
+				delta: 1
+			});
+		},
+	},
+
+
+}
+</script>
+
+<style>
+@import url("./index.css");
+</style>

packages/community/index/data.json

@@ -17,10 +17,48 @@
       "category_name": "报事报修"
     }
   ],
-  "defaultInfoList": {
+  "defaultInfoList": [
-    "1": "11",
+    {
-    "2": "22",
+      "id": 1,
-    "3": "33",
+      "title": "物业介绍",
-    "4": "44"
+      "pic": "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/Group_3677.png"
+    },
+    {
+      "id": 2,
+      "title": "物业缴费",
+      "pic": "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/Group_3680.png"
+    },
+    {
+      "id": 3,
+      "title": "物业公积金",
+      "pic": "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/Group_3679.png"
+    },
+    {
+      "id": 4,
+      "title": "报事报修",
+      "pic": "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/Group_3678.png"
     }
+  ],
+  "defaultNoticeList": [
+    {
+      "id": 1,
+      "title": "物业介绍",
+      "content": "您好！\n     物业服务中心是小区专属服务团队，核心服务包括：物业费收缴、公共区域清洁维护、设施设备(电梯/水电/绿化)检修、秩序安全管理，及应急事件响应、活动组织等日常事务。\n     我们始终以\"用心服务、共建美好\"为宗旨，欢迎大家监督并提出改进建议。感谢您的理解与配合，让我们携手维护舒心的园区环境！"
+    },
+    {
+      "id": 2,
+      "title": "物业缴费",
+      "content": "各位业主：\n     为简化缴费流程，提升服务效率，物业已上线\"线上+线下\"一体化缴费功能，支持物业费、车位费、公共能耗费等各类费用便捷缴纳，具体使用说明如下：\n一、线上缴费（推荐）\n     1. 小程序端操作：打开物业专属小程序，进入\"我的-物业缴费\"页面，系统将自动展示您需缴纳的费用账单（含费用类型、金额、缴费周期等明细）；确认账单无误后，选择微信支付，点击\"确认缴费\"即可完成。\n     2. 账单查询：在缴费页面点击\"缴费记录\"，可查看缴费明细（含缴费时间、金额、凭证号）。\n二、线下缴费（备用）\n若您偏好线下办理，可前往物业前台，通过现金、银行卡、移动支付（微信/支付宝扫码）完成缴费。"
+    },
+    {
+      "id": 3,
+      "title": "物业公积金",
+      "content": "各位业主：\n     上线\"物业公积金\"功能，其核心规则与使用方式如下，覆盖所有房产通用场景：\n一、物业公积金的获取方式\n     通过周边合作门店消费，即可获得物业公积金；\n二、跨房产通用：一份公积金，多房产可用\n     您的个人物业公积金不绑定单一房产，可通用至您已加入的所有房产。例如：您的个人公积金，既可抵扣A小区的物业费，也可抵扣您加入的B小区的水电费、C小区的燃气费，无需额外转移或申请。\n三、查询与透明化\n     在物业平台\"我的-物业公积金\"页面，可实时查看：个人公积金余额、所属房产的总额、抵扣记录（含抵扣房产、金额、个人扣除份额），确保每笔使用清晰可溯。"
+    },
+    {
+      "id": 4,
+      "title": "报事报修",
+      "content": "各位业主：\n     小程序\"报事报修\"功能，覆盖全物业类型通用场景，操作简单、响应高效，具体介绍如下：\n一、报修流程\n1、进入功能：打开物业小程序，点击\"报事报修\"图标，选择报修页面；\n2、填写信息：选择\"详细地址\"、\"报修类型\"（水电故障/家电维修/公共设施损坏等），补充问题描述（如\"厨房水龙头漏水\"\"办公室空调不制冷\"），可上传现场照片（便于维修人员预判问题）；\n3、提交确认：核对信息后点击\"提交报修\"，系统自动生成报修单号，同步推送至物业维修部。\n二、报修范围：室内水电、家电、门窗、厨卫设施维修等；\n三、进度追踪\n1、实时查进度：在\"我的报修\"页面，可查看报修单状态，维修人员接单后会主动联系确认上门时间；\n2、紧急情况（如水管爆裂、断电）可先拨打物业24小时热线，再补填在线报修单，确保问题快速解决！"
+    }
+  ]
 }

packages/community/index/index.vue

@@ -44,7 +44,7 @@
         </u-grid>
       </view>
 
-      <!-- <view class="tabs" v-if="defaultCategoryList.length > 0">
+      <view class="tabs" v-if="defaultCategoryList.length > 0">
         <view v-for="(item, index) in defaultCategoryList" :key="index"
           :class="['tabItem', selectedTab === index ? 'active2' : '']" @click="selectTab(index, item)">
           {{ item.category_name }}
@@ -52,16 +52,16 @@
       </view>
 
       <view class="newsList" v-if="defaultCategoryList.length > 0">
-        <view class="newsItem" v-for="item in defaultInfoList" @click="detail(item)" :key="item.id">
+        <view class="newsItem" v-for="item in defaultInfoList" @click="defaultDetail(item)" :key="item.id">
           <view class="newsItem_left">
             <view class="newsItem_left_tit">{{ item.title }}</view>
             <view class="newsItem_left_sub">{{ item.author }}</view>
           </view>
           <view class="newsItem_right">
-            <image :src="item.list_image" mode="aspectFill" />
+            <image :src="item.pic" mode="aspectFill" />
+          </view>
         </view>
       </view>
-      </view> -->
 
     </view>
     <view v-else>
@@ -116,6 +116,13 @@
         </view>
       </view>
 
+      <view class="tabs" v-else>
+        <view v-for="(item, index) in defaultCategoryList" :key="index"
+          :class="['tabItem', selectedTab === index ? 'active2' : '']" @click="selectTab(index, item)">
+          {{ item.category_name }}
+        </view>
+      </view>
+
       <view class="newsList" v-if="categoryList.length > 0">
         <view class="newsItem" v-for="item in infoList" @click="detail(item)" :key="item.id">
           <view class="newsItem_left">
@@ -128,6 +135,18 @@
         </view>
       </view>
 
+      <view class="newsList" v-else>
+        <view class="newsItem" v-for="item in defaultInfoList" @click="defaultDetail(item)" :key="item.id">
+          <view class="newsItem_left">
+            <view class="newsItem_left_tit">{{ item.title }}</view>
+            <view class="newsItem_left_sub">{{ item.author }}</view>
+          </view>
+          <view class="newsItem_right">
+            <image :src="item.pic" mode="aspectFill" />
+          </view>
+        </view>
+      </view>
+
       <view class="tips">{{ loadMoreText }}</view>
 
       <view class="bigAds" v-if="ads1Show">
@@ -269,6 +288,8 @@ export default {
       // 从JSON文件中获取默认数据
       defaultCategoryList: dataJson.defaultCategoryList,
       defaultInfoList: dataJson.defaultInfoList,
+      // 用于存储原始的defaultInfoList数据
+      originalDefaultInfoList: null
     };
   },
   async onLoad(options) {
@@ -342,6 +363,18 @@ export default {
     this.getfunctionNum();
     this.getAdvertising();
     this.getCategoryList();
+
+    // 初始化默认数据，确保在没有绑定社区时选中第一个分类
+    setTimeout(() => {
+      if (this.categoryList.length === 0 && this.defaultCategoryList.length > 0) {
+        this.selectedTab = 0;
+        if (!this.originalDefaultInfoList) {
+          this.originalDefaultInfoList = JSON.parse(JSON.stringify(dataJson.defaultInfoList));
+        }
+        // 默认选中第一个分类并展示对应数据
+        this.defaultInfoList = this.originalDefaultInfoList.filter(info => info.id === this.defaultCategoryList[0].id);
+      }
+    }, 100);
   },
 
   //上拉刷新
@@ -694,11 +727,23 @@ export default {
     },
 
     async selectTab(index, item) {
+      // 检查是否使用的是默认数据（没有绑定社区时）
+      if (this.categoryList.length === 0) {
+        this.selectedTab = index;
+        if (!this.originalDefaultInfoList) {
+          this.originalDefaultInfoList = JSON.parse(JSON.stringify(dataJson.defaultInfoList));
+        }
+
+        // 根据选中的分类ID筛选数据
+        this.defaultInfoList = this.originalDefaultInfoList.filter(info => info.id === item.id);
+        return;
+      }
+
+      // 原有逻辑（有绑定社区时）
       const isTabChange = this.selectedTab !== index;
       if (isTabChange) {
         this.page_num = 1;
         this.infoList = [];
-        // this.loadMoreText = "下拉加载后续10条，共计30条";
       }
       this.selectedTab = index;
 
@@ -756,6 +801,11 @@ export default {
       console.log(e);
       NavgateTo("../noticeDesc/index?id=" + e.id);
     },
+
+    defaultDetail(e) {
+      console.log(e);
+      NavgateTo("../defaultNotice/index?id=" + e.id);
+    },
   },
 };
 </script>

pages.json

@@ -251,6 +251,13 @@
 						"navigationStyle": "custom"
 					}
 				},
+				{
+					"path": "defaultNotice/index",
+					"style": {
+						"navigationBarTitleText": "公告详情",
+						"navigationStyle": "custom"
+					}
+				},
 				{
 					"path": "applyOwer/index",
 					"style": {