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

对接切换小区接口

Browse Source
This commit is contained in:
zhouyanli
2026-04-22 18:00:48 +08:00
parent c71102f256
commit 057758772e
9 changed files with 493 additions and 404 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
property-uniapp-project/pageSubPack/notice-list/noticeList.vue
View File

@@ -1,10 +1,12 @@
<template>
<!-- 通知列表 -->
<scroll-view
class="notice-list"
scroll-y
:refresher-enabled="true"
:refresher-triggered="refreshing"
<scroll-view
class="notice-list"
scroll-y
:refresher-enabled="true"
:refresher-triggered="refreshing"
@refresherrefresh="onRefresh"
@scrolltolower="loadMore"
:style="{ height: `calc(100vh - ${statusBarHeight + navBarHeight}px)` }"
>
<view class="status_bar"></view>
@@ -17,25 +19,25 @@
<uni-icons type="spinner-cycle" size="20" color="#999" class="loading"></uni-icons>
<text class="refresh-text">刷新中...</text>
</view>
<!-- 通知列表项 -->
<view
v-for="(notice, index) in noticeList"
:key="notice.id"
<view
v-for="(notice, index) in noticeList"
:key="notice.noticeId"
class="notice-item"
@click="goToDetail(notice)"
>
<!-- 通知标题 -->
<view class="notice-header">
<view class="notice-title">
{{notice.title}}
{{notice.noticeTitle}}
</view>
<view class="unread-dot" v-if="notice.hasRead"></view>
<view class="unread-dot" v-if="notice.readStatus"></view>
</view>
<!-- 红点 -->
<!-- 发布者和时间 -->
<view class="notice-meta">
<view class="notice-author">
@@ -44,11 +46,11 @@
<text class="publish-time">{{notice.publishTime}}</text>
</view>
</view>
<!-- 通知摘要 -->
<view class="notice-summary">
{{ notice.summary }}
</view>
{{ notice.noticeContent }}
</view>
<!-- 详情 -->
<view class="notice-actions" @click.stop="goToDetail(notice)">
<!-- <view class="read-status" :class="{ unread: !notice.hasRead }">
@@ -63,63 +65,101 @@
<!-- </button> -->
</view>
</view>
<!-- 加载更多 -->
<view v-if="loadingMore" class="load-more">
<uni-icons type="spinner-cycle" size="18" color="#999" class="loading"></uni-icons>
<text>加载中...</text>
</view>
<!-- 没有更多数据 -->
<view v-if="noMoreData && noticeList.length > 0" class="no-more">
没有更多通知了
</view>
<!-- 空状态 -->
<view v-if="noticeList.length === 0 && !loading" class="empty-state">
<image src="/static/empty-notice.png" mode="aspectFit" class="empty-image"></image>
<!-- <image src="/static/empty-notice.png" mode="aspectFit" class="empty-image"></image> -->
<text class="empty-text">暂无通知</text>
<button class="btn-refresh" @click="loadNotices">刷新试试</button>
</view>
</scroll-view>
</template>
<script setup>
import { ref } from 'vue';
const noticeList = ref([
{
id:'1',
title:'我那我是咖啡牛奶附件说的都是vv的v给v梵蒂冈v辅导报告发布',
author:'张三',
publishTime:'2026.3.5',
summary:'为保障社区居民生命财产安全，维护社区和谐稳定，根据上级部门要求，结合我社区实际情况，现就进一步加强社区安全管理工作通知如下',
hasRead:true
},
{
id:'2',
title:'今天停水了',
author:'张三',
publishTime:'2026.3.5',
summary:'为保障社区居民生命财产安全，维护社区和谐稳定，根据上级部门要求，结合我社区实际情况，现就进一步加强社区安全管理工作通知如下',
hasRead:true
}
])
import { onLoad } from '@dcloudio/uni-app'
import { getNoticeList } from '../api/api.js'
const noticeList = ref([])
const refreshing = ref(false)
const loadingMore = ref(false)
const noMoreData = ref(false)
const loading = ref(false)
const pageNum = ref(1)
const pageSize = 10
const statusBarHeight = ref(0)
const navBarHeight = 44
// --方法----
const goToDetail = () =>{
const goToDetail = (notice) =>{
uni.navigateTo({
url:'/pageSubPack/notice-list/noticeListDetails'
url:'/pageSubPack/notice-list/noticeListDetails?id=' + (notice.id || '')
})
}
// 获取列表接口
const loadNotices = async (isRefresh = false) => {
if (loading.value) return
loading.value = true
if (isRefresh) {
pageNum.value = 1
noMoreData.value = false
}
try {
const res = await getNoticeList({
pageNum: pageNum.value,
pageSize: pageSize
})
if (res.code === 200) {
const list = res.data.rows
if (isRefresh) {
noticeList.value = list
} else {
noticeList.value = [...noticeList.value, ...list]
}
if (list.length < pageSize) {
noMoreData.value = true
}
} else {
uni.showToast({ title: res.msg || '加载失败', icon: 'none' })
}
} catch (err) {
uni.showToast({ title: '网络异常', icon: 'none' })
} finally {
loading.value = false
refreshing.value = false
loadingMore.value = false
}
}
// 下拉刷新
const onRefresh = () => {
refreshing.value = true
loadNotices(true)
}
// 上拉加载更多
const loadMore = () => {
if (noMoreData.value || loadingMore.value || loading.value) return
loadingMore.value = true
pageNum.value++
loadNotices()
}
// 返回
const narBack = () =>{
if(uni.getStorageSync('sourcePage') === "index"){
@@ -133,7 +173,13 @@
}
uni.removeStorageSync('sourcePage')
}
onLoad(() => {
const sysInfo = uni.getSystemInfoSync()
statusBarHeight.value = sysInfo.statusBarHeight || 0
loadNotices(true)
})
</script>
<style lang="scss">
@@ -162,12 +208,12 @@
padding: 20px 0;
color: #999;
font-size: 14px;
.loading {
animation: rotate 1s linear infinite;
margin-bottom: 8px;
}
.refresh-text {
font-size: 12px;
}
@@ -181,11 +227,11 @@
margin-bottom: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
position: relative;
&:active {
background-color: #f9f9f9;
}
/* 重要通知标记 */
&.important::before {
content: '';
@@ -215,8 +261,8 @@
// -webkit-line-clamp: 2;
width: 290px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-overflow: ellipsis;
white-space: nowrap;
}
// 未读红点
.unread-dot {
@@ -234,29 +280,29 @@
margin-bottom: 12px;
color: #666;
font-size: 12px;
.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;
@@ -283,20 +329,20 @@
display: flex;
align-items: center;
justify-content: space-between;
.read-status {
font-size: 12px;
padding: 2px 8px;
border-radius: 10px;
background-color: #f0f0f0;
color: #999;
&.unread {
background-color: #e6f7ff;
color: #1890ff;
}
}
.detail-btn {
display: flex;
align-items: flex-end;
@@ -306,11 +352,11 @@
font-size: 14px;
padding: 0;
margin-right: 10rpx;
&::after {
border: none;
}
text {
margin-right: 4px;
}
@@ -332,7 +378,7 @@
padding: 20px 0;
color: #999;
font-size: 14px;
.loading {
animation: rotate 1s linear infinite;
margin-right: 8px;
@@ -353,31 +399,31 @@
align-items: center;
justify-content: center;
padding: 60px 20px;
.empty-image {
width: 200px;
height: 150px;
margin-bottom: 20px;
}
.empty-text {
font-size: 16px;
color: #999;
margin-bottom: 20px;
}
.btn-refresh {
background-color: #007AFF;
color: #fff;
padding: 8px 20px;
border-radius: 20px;
font-size: 14px;
&::after {
border: none;
}
}
}
</style>
</style>

10
property-uniapp-project/pageSubPack/notice-list/noticeListDetails.vue
View File

@@ -75,9 +75,17 @@
<script setup>
import { ref, onMounted } from 'vue'
// import { onLoad, onShow } from '@dcloudio/uni-app'
import { onLoad, onShow } from '@dcloudio/uni-app'
const isLoading = ref(false)
// =====方法====
onLoad((options) =>{
console.log('options',options.id)
})
// 下载文件
const downloadFile = (fileName) => {
uni.showModal({

336
property-uniapp-project/pageSubPack/notice-list/selectHome.vue
View File

@@ -4,9 +4,9 @@
<view class="search-container">
<view class="search-input-wrapper">
<uni-icons class="search-icon" type="search" size="20" color="#999"></uni-icons>
<input
class="search-input"
placeholder="请输入关键字进行搜索"
<input
class="search-input"
placeholder="请输入关键字进行搜索"
placeholder-class="placeholder"
v-model="searchText"
@input="handleSearchInput"
@@ -19,34 +19,32 @@
</view>
<!-- 小区列表 -->
<scroll-view
class="community-list"
<scroll-view
class="community-list"
scroll-y
:scroll-into-view="scrollIntoViewId"
@scrolltolower="loadMoreData"
:lower-threshold="100"
>
<view
v-for="item in displayedCommunities"
:key="item.villageId"
<view
v-for="item in displayedCommunities"
:key="item.villageId"
class="community-item"
:class="{ 'active-item': selectedItem && selectedItem.villageId === item.villageId }"
:id="'item-' + item.villageId"
@tap="selectCommunity(item)"
>
<view class="community-item-left">
<image src="http://47.104.199.163:9090/images/home/community.png" style="width: 60rpx;height: 60rpx;"></image>
<!-- <uni-icons class="house-icon" type="home" size="24" color="#666"></uni-icons> -->
<image src="http://47.104.199.163:9090/images/home/community.png" style="width: 60rpx;height: 60rpx;"></image>
<view class="community-info">
<text class="community-name">{{ item.villageName }}</text>
<!-- <text class="community-address">{{ item.address }}</text> -->
<!-- <text class="community-id">ID: {{ item.id }}</text> -->
</view>
</view>
<view v-if="selectedItem && selectedItem.villageId === item.villageId" class="selected-icon">
<uni-icons type="checkbox-filled" size="24" color="#007AFF"></uni-icons>
</view>
</view>
<!-- 加载更多 -->
<view v-if="hasMoreData" class="load-more-container">
<view v-if="!isLoading" class="load-more-btn" @tap="loadMoreData">
@@ -57,22 +55,21 @@
<uni-icons type="spinner-cycle" size="20" color="#007AFF" class="loading-icon"></uni-icons>
<text>正在加载...</text>
</view>
<!-- <text class="page-info">第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</text> -->
</view>
<!-- 没有更多数据 -->
<view v-if="!hasMoreData && displayedCommunities.length > 0" class="no-more-data">
<text>没有更多数据了</text>
</view>
<!-- 空状态 -->
<view v-if="displayedCommunities.length === 0 && !isSearching" class="empty-state">
<view v-if="displayedCommunities.length === 0 && !isSearching && !isLoading" class="empty-state">
<uni-icons type="info" size="60" color="#ccc"></uni-icons>
<text class="empty-text">暂无小区数据</text>
</view>
<!-- 搜索无结果 -->
<view v-if="displayedCommunities.length === 0 && isSearching" class="empty-state">
<view v-if="displayedCommunities.length === 0 && isSearching && !isLoading" class="empty-state">
<uni-icons type="search" size="60" color="#ccc"></uni-icons>
<text class="empty-text">未找到相关小区</text>
<text class="empty-tip">请尝试其他关键词</text>
@@ -81,35 +78,33 @@
<!-- 确认按钮 -->
<view class="confirm-area">
<button
class="confirm-btn"
<button
class="confirm-btn"
:disabled="!selectedItem"
:class="{ 'disabled-btn': !selectedItem }"
@tap="handleConfirm"
>
确认选择
</button>
<view v-if="selectedItem" class="selected-info">
已选: {{ selectedItem.name }}
</view>
</view>
</view>
</template>
<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import {onLoad} from '@dcloudio/uni-app'
// import {getVillageList} from "/pages/api/api.js"
import { onLoad } from '@dcloudio/uni-app'
import { getVillageList, getVillageSwitch } from "../api/api.js"
// 响应式数据
const searchText = ref('')
const selectedItem = ref(null)
const scrollIntoViewId = ref('')
const currentVillageIdFromHome = ref('') // 首页传入的当前选中小区ID
// 分页相关
const currentPage = ref(1)
const pageSize = 5
const totalCommunities = ref([])
const totalCount = ref(0)
const displayedCommunities = ref([])
const hasMoreData = ref(true)
const isLoading = ref(false)
@@ -118,100 +113,84 @@ const isLoading = ref(false)
const isSearching = ref(false)
let searchTimeout = null
// 所有小区数据
const allCommunities = ref([
// { id: 1, name: '北境碧桂园小区', address: '北境市光明区碧桂路1号' },
// { id: 2, name: '南湖花园小区', address: '南湖市滨湖区湖滨路28号' },
// { id: 3, name: '东城国际社区', address: '东城市新城区人民路156号' },
// { id: 4, name: '西湖雅苑', address: '西湖市风景区梅灵路88号' },
// { id: 5, name: '北境锦绣家园', address: '北境市朝阳区朝阳路56号' },
// { id: 6, name: '阳光100小区', address: '阳光市高新区创业路100号' },
// { id: 7, name: '绿城玫瑰园', address: '绿城市西湖区学院路188号' },
// { id: 8, name: '金地自在城', address: '金城市江干区金沙大道200号' },
// { id: 9, name: '万科城市花园', address: '万城市余杭区文一西路299号' },
// { id: 10, name: '保利中央公园', address: '保利市拱墅区莫干山路500号' },
// { id: 11, name: '龙湖天街小区', address: '龙湖市滨江区江南大道100号' },
])
// 计算属性
const totalPages = computed(() => {
return Math.ceil(totalCommunities.value.length / pageSize)
})
// =====方法======
// 查询小区列表
const getCommunityList = () =>{
let params = {
keyword:searchText.value
}
getVillageList(params).then(res =>{
console.log('1111',res)
if(res.code === 200){
allCommunities.value = res.data
uni.showToast({
title:"查询成功",
icon:'success'
})
}else{
allCommunities.value = []
uni.showToast({
title:"查询失败",
icon:'error'
})
}
})
}
onLoad(() =>{
// getCommunityList()
})
// 加载分页数据
const loadPageData = (pageNum) => {
// 查询已认证小区列表
const getCommunityList = async (pageNum = 1, keyword = '') => {
isLoading.value = true
// 模拟网络请求延迟
setTimeout(() => {
const startIndex = (pageNum - 1) * pageSize
const endIndex = startIndex + pageSize
const pageData = totalCommunities.value.slice(startIndex, endIndex)
if (pageNum === 1) {
displayedCommunities.value = pageData
try {
const params = {
pageNum,
pageSize,
keyword: keyword.trim()
}
const res = await getVillageList(params)
if (res.code === 200) {
const listData = res.data?.rows || res.data?.list || res.data || []
const total = res.data?.total || listData.length
if (pageNum === 1) {
displayedCommunities.value = listData
} else {
displayedCommunities.value = [...displayedCommunities.value, ...listData]
}
totalCount.value = total
hasMoreData.value = displayedCommunities.value.length < totalCount.value
// 默认选中：优先匹配传入的 villageId，否则选第一条（仅第一页时）
if (pageNum === 1 && displayedCommunities.value.length > 0) {
const targetId = currentVillageIdFromHome.value || uni.getStorageSync('currentVillageId') || ''
if (targetId) {
const matched = displayedCommunities.value.find(
item => String(item.villageId) === String(targetId)
)
selectedItem.value = matched || displayedCommunities.value[0]
} else {
selectedItem.value = displayedCommunities.value[0]
}
}
} else {
displayedCommunities.value = [...displayedCommunities.value, ...pageData]
displayedCommunities.value = []
hasMoreData.value = false
uni.showToast({
title: res.msg || "查询失败",
icon: 'error'
})
}
currentPage.value = pageNum
hasMoreData.value = displayedCommunities.value.length < totalCommunities.value.length
} catch (err) {
console.error('获取小区列表失败：', err)
displayedCommunities.value = []
hasMoreData.value = false
uni.showToast({
title: "网络异常",
icon: 'error'
})
} finally {
isLoading.value = false
// 滚动到新加载的内容
if (pageNum > 1 && pageData.length > 0) {
setTimeout(() => {
scrollIntoViewId.value = 'item-' + pageData[0].id
}, 100)
}
}, 500)
}
}
// 页面加载时初始化
onLoad((options) => {
currentVillageIdFromHome.value = options?.villageId || ''
getCommunityList(1)
})
// 加载更多数据
const loadMoreData = () => {
if (isLoading.value || !hasMoreData.value) return
loadPageData(currentPage.value + 1)
getCommunityList(currentPage.value + 1, searchText.value)
currentPage.value += 1
}
// 处理搜索输入
// 处理搜索输入（防抖）
const handleSearchInput = () => {
// 防抖处理
if (searchTimeout) {
clearTimeout(searchTimeout)
}
searchTimeout = setTimeout(() => {
handleSearch()
}, 300)
@@ -219,30 +198,18 @@ const handleSearchInput = () => {
// 处理搜索
const handleSearch = () => {
const keyword = searchText.value.trim().toLowerCase()
if (!keyword) {
isSearching.value = false
totalCommunities.value = [...allCommunities.value]
loadPageData(1)
return
}
isSearching.value = true
totalCommunities.value = allCommunities.value.filter(community =>
community.name.toLowerCase().includes(keyword) ||
community.address.toLowerCase().includes(keyword)
)
loadPageData(1)
const keyword = searchText.value.trim()
isSearching.value = !!keyword
currentPage.value = 1
getCommunityList(1, keyword)
}
// 清空搜索
const clearSearch = () => {
searchText.value = ''
isSearching.value = false
totalCommunities.value = [...allCommunities.value]
loadPageData(1)
currentPage.value = 1
getCommunityList(1)
}
// 选择小区
@@ -251,7 +218,7 @@ const selectCommunity = (item) => {
}
// 确认选择
const handleConfirm = () => {
const handleConfirm = async () => {
if (!selectedItem.value) {
uni.showToast({
title: '请先选择小区',
@@ -260,28 +227,50 @@ const handleConfirm = () => {
})
return
}
uni.showModal({
title: '确认选择',
content: `您已选择: ${selectedItem.value.name}\n地址: ${selectedItem.value.address}`,
success: (res) => {
if (res.confirm) {
uni.showToast({
title: '选择成功',
icon: 'success',
duration: 1500
})
// 这里可以触发回调或页面跳转
// uni.navigateBack() 或 emit('confirm', selectedItem.value)
uni.$emit('confirm', selectedItem.value)
// 模拟2秒后返回上一页
setTimeout(() => {
uni.navigateBack()
}, 1500)
}
try {
uni.showLoading({
title: '切换小区中...',
mask: true
})
const params = {
villageId: selectedItem.value.villageId,
}
})
const res = await getVillageSwitch(params)
uni.hideLoading()
if (res.code === 200) {
if (res.data.villageId) {
selectedItem.value.villageId = res.data.villageId
}
uni.showToast({
title: '选择成功',
icon: 'success',
duration: 1500
})
// 更新缓存并通知首页
uni.setStorageSync('currentVillageId', selectedItem.value.villageId)
uni.$emit('confirm', {
name: selectedItem.value.villageName,
villageId: selectedItem.value.villageId
})
setTimeout(() => {
uni.navigateBack()
}, 1000)
} else {
uni.showToast({
title: res.msg || '切换小区失败',
icon: 'error',
duration: 2000
})
}
} catch (err) {
uni.hideLoading()
uni.showToast({
title: '网络异常，请重试',
icon: 'error',
duration: 2000
})
}
}
// 监听搜索文本变化
@@ -293,19 +282,13 @@ watch(searchText, (newVal) => {
// 初始化
onMounted(() => {
// 初始化数据
totalCommunities.value = [...allCommunities.value]
loadPageData(1)
// 默认选中第一项
if (displayedCommunities.value.length > 0) {
selectedItem.value = displayedCommunities.value[0]
if (displayedCommunities.value.length === 0 && !isLoading.value) {
getCommunityList(1)
}
})
</script>
<style scoped>
/* 页面容器 */
.container {
min-height: 100vh;
background-color: #f5f5f5;
@@ -314,7 +297,6 @@ onMounted(() => {
padding: 40rpx;
}
/* 搜索区域 */
.search-container {
padding: 20rpx 30rpx;
background-color: #ffffff;
@@ -372,13 +354,10 @@ onMounted(() => {
white-space: nowrap;
}
/* 小区列表 */
.community-list {
flex: 1;
/* padding: 0 30rpx; */
margin-top: 20rpx;
margin-bottom: 180rpx;
}
.community-item {
@@ -393,9 +372,9 @@ onMounted(() => {
transition: all 0.2s;
}
.community-item:active {
background-color: #f9f9f9;
transform: translateY(2rpx);
.community-item:active,
.community-item.active-item {
background-color: #e6f2ff;
}
.community-item-left {
@@ -404,39 +383,23 @@ onMounted(() => {
flex: 1;
}
.house-icon {
margin-right: 20rpx;
}
.community-info {
display: flex;
flex-direction: column;
flex: 1;
margin-left: 20rpx;
}
.community-name {
font-size: 32rpx;
color: #333;
font-weight: 500;
margin-bottom: 8rpx;
}
.community-address {
font-size: 24rpx;
color: #999;
margin-bottom: 5rpx;
}
.community-id {
font-size: 22rpx;
color: #ccc;
}
.selected-icon {
margin-left: 20rpx;
}
/* 加载更多容器 */
.load-more-container {
display: flex;
flex-direction: column;
@@ -483,12 +446,6 @@ onMounted(() => {
to { transform: rotate(360deg); }
}
.page-info {
font-size: 24rpx;
color: #999;
}
/* 没有更多数据 */
.no-more-data {
text-align: center;
padding: 40rpx 0;
@@ -496,7 +453,6 @@ onMounted(() => {
font-size: 28rpx;
}
/* 空状态 */
.empty-state {
display: flex;
flex-direction: column;
@@ -517,7 +473,6 @@ onMounted(() => {
color: #ccc;
}
/* 确认区域 */
.confirm-area {
position: fixed;
bottom: 0;
@@ -544,17 +499,6 @@ onMounted(() => {
color: #fff;
}
.selected-info {
text-align: center;
font-size: 24rpx;
color: #666;
margin-top: 20rpx;
padding: 10rpx;
background-color: #f8f8f8;
border-radius: 8rpx;
}
/* 适配不同屏幕 */
@media (min-width: 768px) {
.container {
max-width: 500px;