zhouyanli/property-manager-side
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

对接首页消息通知、巡检点 切换小区获取最新数据

Browse Source
This commit is contained in:
zhouyanli
2026-05-15 16:06:32 +08:00
parent 8324d096c0
commit 856f36455c
17 changed files with 425 additions and 770 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
wuye-manager-uniapp/pageSubPack/notice-list/notice-list.vue
View File

@@ -1,48 +1,120 @@
<template>
<view class="news-detail-page">
<!-- 单条资讯卡片 -->
<view class="news-card">
<!-- 标题 + 右上角未读红点 -->
<!-- 循环渲染通知列表 -->
<view class="news-card" v-for="item in noticeList" :key="item.id">
<view class="news-header">
<text class="news-title">以实干担当不断开创中国特色大国外交实干担当不断开创中国特色大国外交</text>
<view class="unread-dot"></view>
<text class="news-title">{{ item.item || '暂无标题' }}</text>
<view class="unread-dot" v-if="item.isCheck === '0' "></view>
</view>
<!-- 发布人 + 时间 -->
<view class="news-meta">
<text class="author">张三</text>
<text class="publish-time">2026-07-01</text>
<text class="author">{{ item.residentName || '管理员' }}</text>
<text class="publish-time">{{ item.createTime }}</text>
</view>
<!-- 内容区域：浅背景卡片 -->
<view class="news-content">
<text class="content-text">
学习贯彻习近平新时代中国特色社会主义思想主题教育开展以来，外交外事战线认真学习贯彻习近平总书记重要讲话精神和党中央部署要求，全面准确把...
</text>
<text class="content-text">{{ item.notice || item.problem }}</text>
</view>
<!-- 详情按钮 -->
<view class="detail-btn" @click="goToDetail">
<view class="detail-btn" @click="goToDetail(item)">
<text class="detail-text">详情</text>
<uni-icons type="right" size="14" color="#4D5DFA"></uni-icons>
</view>
</view>
<!-- 加载提示 + 没有更多数据 -->
<view class="load-more" v-if="noticeList.length > 0">
<text v-if="loading">加载中...</text>
<text v-else-if="noMore">没有更多数据了</text>
</view>
<!-- 空数据 -->
<view class="empty" v-if="noticeList.length === 0 && !loading">
暂无通知消息
</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
import { onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import { getNoticeList } from '../../api/api.js'
// 跳转到详情页方法
const goToDetail = () => {
uni.navigateTo({
url: '/pageSubPack/notice-list/noticeListDetails'
// 列表数据
const noticeList = ref([])
// 分页相关
const pageNum = ref(1) // 当前页
const pageSize = ref(5) // 每页条数
const total = ref(0) // 总条数
const loading = ref(false) // 加载状态
const noMore = ref(false) // 是否没有更多
// 获取列表数据
const getNoticeData = (isRefresh = false) => {
// 防止重复请求
if (loading.value || noMore.value) return
loading.value = true
getNoticeList({
pageSize: pageSize.value,
pageNum: pageNum.value
}).then(res => {
if (res.code === 200) {
total.value = res.total || 0
const data = res.rows || []
// 第一页：覆盖，分页：追加
if (pageNum.value === 1) {
noticeList.value = data
} else {
noticeList.value = [...noticeList.value, ...data]
}
// 判断是否还有更多
noMore.value = noticeList.value.length >= total.value
}
}).catch(() => {
uni.showToast({ title: '加载失败', icon: 'none' })
}).finally(() => {
loading.value = false
if (isRefresh) {
uni.stopPullDownRefresh()
}
})
}
// 上拉加载更多
onReachBottom(() => {
if (noMore.value || loading.value) return
pageNum.value++
getNoticeData()
})
// 下拉刷新
onPullDownRefresh(() => {
pageNum.value = 1
noMore.value = false
getNoticeData(true)
})
// 跳详情（即时标记已读）
const goToDetail = (item) => {
item.isCheck = '1'
uni.navigateTo({
url: `/pageSubPack/ticket/repairMain?id=${item.id}`
})
}
// 页面显示时刷新（从详情页返回也会触发）
onShow(() => {
pageNum.value = 1
noMore.value = false
getNoticeData()
})
</script>
<style lang="scss" scoped>
// 页面基础样式
.news-detail-page {
padding: 20rpx;
background-color: #f9f9f9;
@@ -50,15 +122,13 @@ const goToDetail = () => {
box-sizing: border-box;
}
// 资讯卡片：白色背景 + 圆角
.news-card {
background-color: #ffffff;
background-color: #fff;
border-radius: 12rpx;
padding: 30rpx;
box-sizing: border-box;
margin-bottom: 20rpx;
}
// 标题行：标题 + 红点
.news-header {
display: flex;
justify-content: space-between;
@@ -66,20 +136,16 @@ const goToDetail = () => {
margin-bottom: 20rpx;
}
// 资讯标题
.news-title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
line-height: 1.4;
color: #333;
flex: 1;
margin-right: 10rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// 右上角未读红点
.unread-dot {
width: 16rpx;
height: 16rpx;
@@ -88,46 +154,53 @@ const goToDetail = () => {
margin-top: 6rpx;
}
// 发布人+时间行
.news-meta {
margin-bottom: 20rpx;
.author {
font-size: 26rpx;
color: #666;
margin-right: 20rpx;
}
.publish-time {
font-size: 26rpx;
color: #999;
}
}
.author {
font-size: 26rpx;
color: #666666;
margin-right: 20rpx;
}
.publish-time {
font-size: 26rpx;
color: #999999;
}
// 内容区域：浅背景卡片
.news-content {
background-color: #f5f5f5;
border-radius: 8rpx;
padding: 20rpx;
margin-bottom: 20rpx;
.content-text {
font-size: 28rpx;
color: #333;
line-height: 1.5;
}
}
.content-text {
font-size: 28rpx;
color: #333333;
line-height: 1.5;
}
// 详情按钮：蓝色文字 + 右箭头
.detail-btn {
display: flex;
align-items: center;
justify-content: space-between;
.detail-text {
font-size: 28rpx;
color: #4D5DFA;
margin-right: 8rpx;
}
}
.detail-text {
.load-more {
text-align: center;
padding: 30rpx;
color: #999;
font-size: 26rpx;
}
.empty {
text-align: center;
padding: 100rpx 0;
color: #999;
font-size: 28rpx;
color: #4D5DFA;
margin-right: 8rpx;
}
</style>

531
wuye-manager-uniapp/pageSubPack/notice-list/noticeListDetails.vue
View File

@@ -1,531 +0,0 @@
<template>
<view class="container">
<!-- 内容区域 -->
<!-- <scroll-view class="content-scroll" scroll-y> -->
<!-- 文章标题 -->
<view class="article-header">
<view class="article-title">
{{noticeDetail.noticeTitle}}
</view>
</view>
<!-- 作者和日期 -->
<view class="notice-meta">
<view class="notice-author">
<text class="author-name">{{noticeDetail.author}}</text>
<text class="separator">·</text>
<text class="publish-time">{{noticeDetail.publishTime}}</text>
</view>
</view>
<!-- 文章内容 -->
<view class="article-content">
<view class="paragraph">
{{noticeDetail.noticeContent}}
</view>
<view class="articleimg">
<image src="http://47.104.199.163:9090/images/home/notice-1.png" mode="" style="width: 100%;height: 100%;border-radius: 20rpx;"></image>
<image src="http://47.104.199.163:9090/images/home/notice-2.png" mode="" style="width: 100%;height: 100%;border-radius: 20rpx;"></image>
</view>
</view>
<!-- 附件区域 -->
<!-- <view class="attachments-section">
<view class="section-title">
<view class="title-text">相关附件</view>
<view class="title-line"></view>
</view>
<view class="attachments-list"> -->
<!-- DOC文件 -->
<!-- <view class="attachment-item" @click="downloadFile('filename.DOC')">
<view class="attachment-left">
<view class="file-icon doc-icon">📄</view>
<view class="file-info">
<view class="file-name">文件名.DOC</view>
<view class="file-size">299kb</view>
</view>
</view>
<view class="download-btn">
<view class="download-icon">↓</view>
</view>
</view> -->
<!-- PDF文件 -->
<!-- <view class="attachment-item" @click="downloadFile('filename.PDF')">
<view class="attachment-left">
<view class="file-icon pdf-icon">📄</view>
<view class="file-info">
<view class="file-name">文件名.PDF</view>
<view class="file-size">299kb</view>
</view>
</view>
<view class="download-btn">
<view class="download-icon">↓</view>
</view>
</view>
</view>
</view> -->
<!-- </scroll-view> -->
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
// import {getNoticeDetails} from '../api/api.js'
const isLoading = ref(false)
const noticeDetail = ref({})
const currentNoticeId = ref('') // 接收公告跳转的id
// =====方法====
onLoad((options) =>{
currentNoticeId.value = options?.id
// console.log('currentNoticeId',currentNoticeId.value)
if(currentNoticeId.value){
getDetailsData(currentNoticeId.value)
}
// console.log('currentNoticeId',currentNoticeId.value)
})
// 获取详情数据
const getDetailsData = async (noticeId) =>{
try{
const res = await getNoticeDetails(noticeId)
if(res.code === 200){
noticeDetail.value = res.data || {}
uni.$emit('noticeRead',{
noticeId:noticeId,
readStatus:noticeDetail.value.readStatus
})
}
}catch(err){
uni.showToast({
title:"加载失败",
icon:"none"
})
}
}
// 下载文件
const downloadFile = (fileName) => {
uni.showModal({
title: '下载确认',
content: `确定要下载 "${fileName}" 吗？`,
success: (res) => {
if (res.confirm) {
isLoading.value = true
// 显示下载进度
uni.showLoading({
title: '下载中...',
mask: true
})
// 模拟下载过程
setTimeout(() => {
uni.hideLoading()
isLoading.value = false
// 根据文件类型打开文件
if (fileName.endsWith('.PDF')) {
uni.showToast({
title: 'PDF文件已保存到下载目录',
icon: 'success',
duration: 2000
})
// 在真实项目中，这里应该调用下载API
// uni.downloadFile({
// url: 'https://example.com/files/filename.PDF',
// success: (res) => {
// if (res.statusCode === 200) {
// uni.saveFile({
// tempFilePath: res.tempFilePath,
// success: (saveRes) => {
// uni.showToast({ title: '下载成功', icon: 'success' })
// }
// })
// }
// }
// })
} else if (fileName.endsWith('.DOC')) {
uni.showToast({
title: 'DOC文件已保存到下载目录',
icon: 'success',
duration: 2000
})
}
}, 1500)
}
}
})
}
</script>
<style lang="scss" scoped>
.container {
min-height: 100vh;
background-color: #ffffff;
padding: 20px;
// font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* 内容滚动区域 */
.content-scroll {
padding-top: 15px;
box-sizing: border-box;
background-color: #ffffff;
}
/* 文章头部 */
.article-header {
// padding: 24px 20px 20px;
// border-bottom: 1px solid #f0f0f0;
.article-title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
line-height: 1.4;
margin-bottom: 16px;
text-align: center;
}
.article-meta {
display: flex;
align-items: center;
justify-content: center;
color: #666666;
font-size: 14px;
.meta-item {
display: flex;
align-items: center;
.meta-icon {
font-size: 14px;
margin-right: 4px;
}
.meta-text {
font-size: 14px;
}
}
.meta-divider {
margin: 0 12px;
color: #cccccc;
}
}
}
/* 元信息 */
.notice-meta {
display: flex;
align-items: center;
justify-content: center;
// margin-bottom: 12px;
color: #666;
font-size: 16px;
margin: 0 30rpx;
.notice-author {
display: flex;
align-items: center;
.author-name {
color: #666;
}
.separator {
margin: 0 6px;
color: #ccc;
}
.publish-time {
color: #999;
}
}
.notice-time {
display: flex;
align-items: center;
.date-text {
margin-left: 4px;
color: #999;
}
}
}
/* 文章内容 */
.article-content {
padding: 20px;
color: #333333;
line-height: 1.8;
font-size: 16px;
.articleimg{
width: 100%;
height: 249rpx;
}
.paragraph {
margin-bottom: 20px;
text-align: justify;
text-indent: 2em;
}
.bullet-list {
margin: 20px 0 20px 2em;
.bullet-item {
display: flex;
margin-bottom: 12px;
.bullet-dot {
color: #666666;
margin-right: 8px;
flex-shrink: 0;
}
.bullet-text {
flex: 1;
color: #333333;
}
}
}
}
/* 附件区域 */
.attachments-section {
padding: 20px;
background-color: #f9f9f9;
border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
margin-top: 20px;
.section-title {
display: flex;
align-items: center;
margin-bottom: 20px;
.title-text {
font-size: 18px;
font-weight: 600;
color: #333333;
white-space: nowrap;
margin-right: 12px;
}
.title-line {
flex: 1;
height: 1px;
background-color: #e0e0e0;
}
}
.attachments-list {
.attachment-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
background-color: #ffffff;
border-radius: 8px;
margin-bottom: 12px;
border: 1px solid #e8e8e8;
&:active {
background-color: #f5f5f5;
}
&:last-child {
margin-bottom: 0;
}
.attachment-left {
display: flex;
align-items: center;
flex: 1;
.file-icon {
font-size: 24px;
margin-right: 12px;
&.doc-icon {
color: #2b579a; /* Word文档蓝色 */
}
&.pdf-icon {
color: #e74c3c; /* PDF红色 */
}
}
.file-info {
.file-name {
font-size: 16px;
color: #333333;
margin-bottom: 4px;
font-weight: 500;
}
.file-size {
font-size: 13px;
color: #666666;
}
}
}
.download-btn {
width: 40px;
height: 40px;
border-radius: 20px;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
.download-icon {
font-size: 18px;
color: #333333;
}
}
}
}
}
/* 页面底部 */
.page-footer {
padding: 30px 20px 40px;
display: flex;
flex-direction: column;
align-items: center;
.footer-text {
font-size: 16px;
color: #999999;
margin-bottom: 20px;
}
.footer-info {
display: flex;
align-items: center;
font-size: 13px;
color: #999999;
.info-item {
padding: 0 8px;
}
.info-divider {
color: #dddddd;
}
}
}
/* 响应式调整 */
@media (min-width: 768px) {
.container {
max-width: 768px;
margin: 0 auto;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.article-header,
.article-content,
.attachments-section,
.page-footer {
padding-left: 40px;
padding-right: 40px;
}
}
/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
.container {
background-color: #1a1a1a;
}
.custom-navbar {
background-color: #1a1a1a;
border-bottom-color: #333333;
.nav-back,
.nav-title {
color: #ffffff;
}
.nav-actions .action-icon {
color: #ffffff;
}
}
.content-scroll {
background-color: #1a1a1a;
}
.article-header {
border-bottom-color: #333333;
.article-title {
color: #ffffff;
}
.article-meta {
color: #999999;
}
}
.article-content {
color: #e0e0e0;
.bullet-item .bullet-text {
color: #e0e0e0;
}
}
.attachments-section {
background-color: #2a2a2a;
border-top-color: #333333;
border-bottom-color: #333333;
.section-title .title-text {
color: #ffffff;
}
.attachment-item {
background-color: #2a2a2a;
border-color: #333333;
&:active {
background-color: #333333;
}
.file-info .file-name {
color: #ffffff;
}
.file-info .file-size {
color: #999999;
}
}
}
.page-footer {
.footer-text,
.footer-info {
color: #666666;
}
}
}
</style>

4
wuye-manager-uniapp/pageSubPack/notice-list/select-community.vue
View File

@@ -17,13 +17,13 @@
<view v-for="item in displayedCommunities" :key="item.id" class="community-item"
@tap="selectCommunity(item)" :class="{active: selectedItem?.id === item.id}">
<view class="community-item-left">
<image src="http://47.104.199.163:9090/images/imgs/community.png" style="width: 48rpx;height: 48rpx;"></image>
<image src="https://wuyeadmin.bugtc.com/images/imgs/community.png" style="width: 48rpx;height: 48rpx;"></image>
<view class="community-info">
<text class="community-name">{{ item.villageName }}</text>
</view>
</view>
<view v-if="selectedItem && selectedItem.id === item.id" class="selected-icon">
<image src="http://47.104.199.163:9090/images/imgs/check.png" style="width: 48rpx;height: 48rpx;"></image>
<image src="https://wuyeadmin.bugtc.com/images/imgs/check.png" style="width: 48rpx;height: 48rpx;"></image>
</view>
</view>