添加我的小区模块的默认公告内容
This commit is contained in:
赵毅
parent
9be3eecd0f
commit
2046ab60f0
307
packages/community/defaultNotice/index.css
Normal file
307
packages/community/defaultNotice/index.css
Normal file
@ -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;
|
||||
}
|
||||
83
packages/community/defaultNotice/index.vue
Normal file
83
packages/community/defaultNotice/index.vue
Normal file
@ -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>
|
||||
@ -17,10 +17,48 @@
|
||||
"category_name": "报事报修"
|
||||
}
|
||||
],
|
||||
"defaultInfoList": {
|
||||
"1": "11",
|
||||
"2": "22",
|
||||
"3": "33",
|
||||
"4": "44"
|
||||
}
|
||||
"defaultInfoList": [
|
||||
{
|
||||
"id": 1,
|
||||
"title": "物业介绍",
|
||||
"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小时热线，再补填在线报修单，确保问题快速解决！"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -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);
|
||||
},
|
||||
|
||||
//上拉刷新
|
||||
@ -409,7 +442,7 @@ export default {
|
||||
if (targetItem.front_end_display == 1) {
|
||||
uni.removeStorageSync("changeCommData");
|
||||
}
|
||||
}else{
|
||||
} else {
|
||||
uni.removeStorageSync("changeCommData");
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -251,6 +251,13 @@
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "defaultNotice/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "公告详情",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "applyOwer/index",
|
||||
"style": {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user