@@ -41,56 +41,68 @@
scroll -y
: style = "{ height: `calc(100vh - ${navHeight + statusTabHeight + typeTabHeight}px)` }"
>
<!-- 空状态 -- >
< view v-if = "filteredRecords.length === 0" class="empty-state" >
< uni -icons type = "empty" size = "60" color = "#ccc" > < / uni-icons >
< text class = "empty-text" > 暂无上报记录 < / text >
< / view >
<!-- 记录卡片 -- >
< view
v-for = "record in filtered Records"
v-for = "record in report Records"
:key = "record.id"
class = "record-card"
>
<!-- 标题 + 状态标签 -- >
< view class = "card-header" >
< text class = "card-title" > { { record . t itl e} } < / text >
< view class = "status-tag" :class = "record.s tatus" >
{ { getStatusText ( record . s tatus) } }
< text class = "card-title" > { { record . item } } < / text >
< view class = "status-tag" :class = "getStatusClass(record.problemS tatus) " >
{ { getStatusText ( record . problemS tatus) } }
< / view >
< / view >
<!-- 类型标签 -- >
< view class = "tag-group" >
< view class = "tag-item" > { { record . reportType } } < / view >
< view class = "tag-item" > { { record . category } } < / view >
< view class = "tag-item" > { { record . projectTypeStr || '无 ' } } < / view >
< view class = "tag-item" > { { record . maintenanceItemName || '无' } } < / view >
< / view >
<!-- 内容 -- >
< view class = "card-content" >
{ { record . content } }
{ { record . problem } }
< / view >
<!-- 底部信息 -- >
< view class = "card-footer" >
< text class = "create-time" > { { record . createTime } } < / text >
< text v-if = "record.repairman " class="repairman" > 维修师傅 ： {{ record.repairman }} < / text >
< text v-if = "record.repairName " class="repairman" > 维修师傅 ： {{ record.repairName }} < / text >
< / view >
< / view >
< ! - - 加载提示 + 没有更多数据 - - >
< view class = "load-more" v-if = "reportRecords.length > 0" >
< text v-if = "loading" > 加载中... < / text >
< text v-else-if = "noMore" > 没有更多数据了 < / text >
< / view >
< ! - - 空数据 - - >
< view class = "empty" v-if = "reportRecords.length === 0 && !loading" >
暂无上报记录
< / view >
< / scroll -view >
< / view >
< / template >
< script setup >
import { ref , computed } from 'vue'
import { onReady } from "@dcloudio/uni-app"
import { ref } from 'vue'
import { onReady , onReachBottom , onPullDownRefresh , onShow from "@dcloudio/uni-app"
import { getMyOrderList } from '../../api/api.js'
// 导航栏/标签高度（适配不同设备）
const navHeight = ref ( 44 )
const statusTabHeight = ref ( 88 )
const typeTabHeight = ref ( 88 )
// 分页
const pageNum = ref ( 1 ) // 当前页
const pageSize = ref ( 5 ) // 每页条数
const total = ref ( 0 ) // 总条数
const loading = ref ( false ) // 加载状态
const noMore = ref ( false ) // 是否没有更多
// 筛选状态
const activeStatus = ref ( 'all' ) // 全部/待分配/待解决/已完成
const activeType = ref ( 'all' ) // 全部/公共报修/个人报修
@@ -98,71 +110,95 @@ const activeType = ref('all') // 全部/公共报修/个人报修
// 状态筛选选项
const statusTabs = ref ( [
{ label : '全部' , value : 'all' } ,
{ label : '待分配' , value : 'pending' } ,
{ label : '待解决' , value : 'processing ' } ,
{ label : '已完成' , value : 'completed ' }
// { label: '待分配', value: 'pending' },
{ label : '待解决' , value : '1 ' } ,
{ label : '已完成' , value : '2 ' }
] )
// 类型筛选选项
const typeTabs = ref ( [
{ label : '全部' , value : 'all' } ,
{ label : '公共报修' , value : 'public ' } ,
{ label : '个人报修' , value : 'private ' }
{ label : '公共报修' , value : '0 ' } ,
{ label : '个人报修' , value : '1 ' }
] )
// 模拟 上报记录数据（实际项目替换为接口请求）
const reportRecords = ref ( [
{
id : 1 ,
title : '标题巴拉巴拉巴拉' ,
status : 'pending' , // pending/processing/completed
reportType : '公共报修' ,
category : '路灯' ,
content : '1栋楼下道路路灯不亮， ， ， ,
createTime : '2026-08-01 10:05:46' ,
repairman : ''
} ,
{
id : 2 ,
title : '标题巴拉巴拉巴拉' ,
status : 'processing' ,
reportType : '公共报修' ,
category : '路灯' ,
content : '1栋楼下道路路灯不亮， ， ， ,
createTime : '2026-08-01 10:05:46' ,
repairman : '张三'
} ,
{
id : 3 ,
title : '标题巴拉巴拉巴拉' ,
status : 'completed' ,
reportType : '公共报修' ,
category : '路灯' ,
content : '1栋楼下道路路灯不亮， ， ， ,
createTime : '2026-08-01 10:05:46' ,
repairman : '张三'
// 上报记录数据
const reportRecords = ref ( [ ] )
// 获取列表数据
const getReportList = ( isRefresh = false ) => {
// 防止重复请求
if ( loading . value || noMore . value ) return
loading . value = true
const params = {
pageSize : pageSize . value ,
pageNum : pageNum . value
}
] )
if ( activeType . value !== 'all' ) {
params . itemType = activeType . value
}
if ( activeStatus . value !== 'all' ) {
params . problemStatus = activeStatus . value
}
getMyOrderList ( params ) . then ( res => {
if ( res . code === 200 ) {
total . value = res . total || 0
const data = res . rows || [ ]
// 筛选后的记录
const filteredRecords = computed ( ( ) => {
return reportRecords . value . filter ( record => {
// 状态筛选
const statusMatch = activeStatus . value === 'all' || r ecord. status === activeStatus . value
// 类型筛选
const typeMatch = activeType . value === 'all' || record . reportType === typeTabs . value . find ( item => item . value === activeType . value ) ? . label
return statusMatch && typeMatch
// 第一页：覆盖，分页：追加
if ( pageNum . value === 1 ) {
reportRecords . value = data
} else {
reportRecords . value = [ ... reportR ecords . value , ... data ]
}
// 判断是否还有更多
noMore . value = reportRecords . 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 ++
getReportList ( )
} )
// 切换状态（全部/待分配/待解决/已完成）筛选
// 下拉刷新
onPullDownRefresh ( ( ) => {
pageNum . value = 1
noMore . value = false
getReportList ( true )
} )
// 筛选/分页重置后重新拉数据
const reloadList = ( ) => {
pageNum . value = 1
noMore . value = false
reportRecords . value = [ ]
getReportList ( )
}
// 切换状态（全部/待解决/已完成）筛选
const switchStatus = ( value ) => {
if ( activeStatus . value === value ) return
activeStatus . value = value
reloadList ( )
}
// 切换类型（公共/个人）筛选
const switchType = ( value ) => {
if ( activeType . value === value ) return
activeType . value = value
reloadList ( )
}
// 返回上一页
@@ -175,12 +211,25 @@ const navBack = () => {
// 获取状态文本
const getStatusText = ( status ) => {
const statusMap = {
pending : '待分配' ,
processing : '待解决' ,
completed : '已完成'
// "pending": '已分配',
"1" : '待解决' ,
'2' : '已完成'
}
return statusMap [ status ] || ''
}
// 获取状态标签样式类名
const getStatusClass = ( status ) => {
const classMap = {
'1' : 'processing' ,
'2' : 'completed'
}
return classMap [ status ] || ''
}
onShow ( ( ) => {
pageNum . value = 1
noMore . value = false
getReportList ( )
} )
// 页面渲染完成后适配高度
onReady ( ( ) => {
@@ -278,22 +327,6 @@ onReady(() => {
box - sizing : border - box ;
}
/* 空状态 */
. empty - state {
display : flex ;
flex - direction : column ;
align - items : center ;
justify - content : center ;
padding : 100 rpx 0 ;
color : # ccc ;
}
. empty - text {
font - size : 32 rpx ;
color : # 999 ;
margin - top : 20 rpx ;
}
/* 记录卡片 */
. record - card {
background - color : # fff ;
@@ -373,4 +406,17 @@ onReady(() => {
. repairman {
color : # 999 ;
}
. load - more {
text - align : center ;
padding : 30 rpx ;
color : # 999 ;
font - size : 26 rpx ;
}
. empty {
text - align : center ;
padding : 100 rpx 0 ;
color : # 999 ;
font - size : 28 rpx ;
}
< / style >
zhouyanli