上报记录
This commit is contained in:
373
wuye-manager-uniapp/pageSubPack/report-record/report-record.vue
Normal file
373
wuye-manager-uniapp/pageSubPack/report-record/report-record.vue
Normal file
@@ -0,0 +1,373 @@
|
|||||||
|
<template>
|
||||||
|
<view class="report-record-page">
|
||||||
|
<view class="status-bar"></view>
|
||||||
|
<!-- 顶部导航栏 -->
|
||||||
|
<uni-nav-bar
|
||||||
|
left-icon="back"
|
||||||
|
title="上报记录"
|
||||||
|
backgroundColor="transparent"
|
||||||
|
:border= "false"
|
||||||
|
@clickLeft="navBack"/>
|
||||||
|
|
||||||
|
<!-- 状态筛选标签 -->
|
||||||
|
<view class="status-tabs">
|
||||||
|
<view
|
||||||
|
v-for="item in statusTabs"
|
||||||
|
:key="item.value"
|
||||||
|
class="status-tab-item"
|
||||||
|
:class="{ active: activeStatus === item.value }"
|
||||||
|
@tap="switchStatus(item.value)"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 类型筛选标签 -->
|
||||||
|
<view class="type-tabs">
|
||||||
|
<view
|
||||||
|
v-for="item in typeTabs"
|
||||||
|
:key="item.value"
|
||||||
|
class="type-tab-item"
|
||||||
|
:class="{ active: activeType === item.value }"
|
||||||
|
@tap="switchType(item.value)"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 上报记录列表 -->
|
||||||
|
<scroll-view
|
||||||
|
class="record-list"
|
||||||
|
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 filteredRecords"
|
||||||
|
:key="record.id"
|
||||||
|
class="record-card"
|
||||||
|
>
|
||||||
|
<!-- 标题 + 状态标签 -->
|
||||||
|
<view class="card-header">
|
||||||
|
<text class="card-title">{{ record.title }}</text>
|
||||||
|
<view class="status-tag" :class="record.status">
|
||||||
|
{{ getStatusText(record.status) }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 类型标签 -->
|
||||||
|
<view class="tag-group">
|
||||||
|
<view class="tag-item">{{ record.reportType }}</view>
|
||||||
|
<view class="tag-item">{{ record.category }}</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 内容 -->
|
||||||
|
<view class="card-content">
|
||||||
|
{{ record.content }}
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部信息 -->
|
||||||
|
<view class="card-footer">
|
||||||
|
<text class="create-time">{{ record.createTime }}</text>
|
||||||
|
<text v-if="record.repairman" class="repairman">维修师傅:{{ record.repairman }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
|
import {onReady} from "@dcloudio/uni-app"
|
||||||
|
|
||||||
|
// 导航栏/标签高度(适配不同设备)
|
||||||
|
const navHeight = ref(44)
|
||||||
|
const statusTabHeight = ref(88)
|
||||||
|
const typeTabHeight = ref(88)
|
||||||
|
|
||||||
|
// 筛选状态
|
||||||
|
const activeStatus = ref('all') // 全部/待分配/待解决/已完成
|
||||||
|
const activeType = ref('all') // 全部/公共报修/个人报修
|
||||||
|
|
||||||
|
// 状态筛选选项
|
||||||
|
const statusTabs = ref([
|
||||||
|
{ label: '全部', value: 'all' },
|
||||||
|
{ label: '待分配', value: 'pending' },
|
||||||
|
{ label: '待解决', value: 'processing' },
|
||||||
|
{ label: '已完成', value: 'completed' }
|
||||||
|
])
|
||||||
|
|
||||||
|
// 类型筛选选项
|
||||||
|
const typeTabs = ref([
|
||||||
|
{ label: '全部', value: 'all' },
|
||||||
|
{ label: '公共报修', value: 'public' },
|
||||||
|
{ label: '个人报修', value: 'private' }
|
||||||
|
])
|
||||||
|
|
||||||
|
// 模拟上报记录数据(实际项目替换为接口请求)
|
||||||
|
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 filteredRecords = computed(() => {
|
||||||
|
return reportRecords.value.filter(record => {
|
||||||
|
// 状态筛选
|
||||||
|
const statusMatch = activeStatus.value === 'all' || record.status === activeStatus.value
|
||||||
|
// 类型筛选
|
||||||
|
const typeMatch = activeType.value === 'all' || record.reportType === typeTabs.value.find(item => item.value === activeType.value)?.label
|
||||||
|
return statusMatch && typeMatch
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// 切换状态(全部/待分配/待解决/已完成)筛选
|
||||||
|
const switchStatus = (value) => {
|
||||||
|
activeStatus.value = value
|
||||||
|
}
|
||||||
|
|
||||||
|
// 切换类型(公共/个人)筛选
|
||||||
|
const switchType = (value) => {
|
||||||
|
activeType.value = value
|
||||||
|
}
|
||||||
|
|
||||||
|
// 返回上一页
|
||||||
|
const navBack = () => {
|
||||||
|
uni.switchTab({
|
||||||
|
url:"/pages/my/my"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取状态文本
|
||||||
|
const getStatusText = (status) => {
|
||||||
|
const statusMap = {
|
||||||
|
pending: '待分配',
|
||||||
|
processing: '待解决',
|
||||||
|
completed: '已完成'
|
||||||
|
}
|
||||||
|
return statusMap[status] || ''
|
||||||
|
}
|
||||||
|
|
||||||
|
// 页面渲染完成后适配高度
|
||||||
|
onReady(() => {
|
||||||
|
// 可根据实际设备调整高度
|
||||||
|
uni.getSystemInfo({
|
||||||
|
success: (res) => {
|
||||||
|
if (res.platform === 'ios') {
|
||||||
|
navHeight.value = 44
|
||||||
|
} else {
|
||||||
|
navHeight.value = 48
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.report-record-page {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%)
|
||||||
|
}
|
||||||
|
.status-bar{
|
||||||
|
width: 100%;
|
||||||
|
height: 46px;
|
||||||
|
}
|
||||||
|
/* 状态筛选标签 */
|
||||||
|
.status-tabs {
|
||||||
|
display: flex;
|
||||||
|
/* background-color: #fff; */
|
||||||
|
padding: 0 20rpx;
|
||||||
|
height: 88rpx;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tab-item {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #666;
|
||||||
|
height: 100%;
|
||||||
|
line-height: 88rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tab-item.active {
|
||||||
|
color: #4D5DFA;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tab-item.active::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 80rpx;
|
||||||
|
height: 8rpx;
|
||||||
|
background: linear-gradient(to bottom, #4D5DFA, #BAC0FA);
|
||||||
|
border-radius: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 类型筛选标签 */
|
||||||
|
.type-tabs {
|
||||||
|
display: flex;
|
||||||
|
/* background-color: #fff; */
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 20rpx;
|
||||||
|
margin: 0rpx 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-tab-item {
|
||||||
|
padding: 12rpx 30rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999;
|
||||||
|
border: 2rpx solid #999;
|
||||||
|
border-radius: 25rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-tab-item.active {
|
||||||
|
color: #4D5DFA;
|
||||||
|
border: 2rpx solid #4D5DFA;
|
||||||
|
border-radius: 25rpx;
|
||||||
|
/* background-color: #007AFF; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 记录列表 */
|
||||||
|
.record-list {
|
||||||
|
padding: 20rpx 40rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 空状态 */
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 100rpx 0;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 记录卡片 */
|
||||||
|
.record-card {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 状态标签 */
|
||||||
|
.status-tag {
|
||||||
|
padding: 6rpx 16rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 198rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tag.pending {
|
||||||
|
background-color: #E34D59; /* 待分配-红色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tag.processing {
|
||||||
|
background-color: #09C2BD; /* 待解决-绿色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tag.completed {
|
||||||
|
background-color: #4D5DFA; /* 已完成-蓝色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 类型标签组 */
|
||||||
|
.tag-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 15rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-item {
|
||||||
|
padding: 6rpx 20rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666;
|
||||||
|
border: 1rpx solid #999;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 内容 */
|
||||||
|
.card-content {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底部信息 */
|
||||||
|
.card-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.repairman {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -85,7 +85,7 @@
|
|||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "公告详情"
|
"navigationBarTitleText": "公告详情"
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@@ -100,7 +100,20 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"root": "pageSubPack/report-record",
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "report-record",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "上报记录",
|
||||||
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
],
|
],
|
||||||
"easycom": {
|
"easycom": {
|
||||||
"autoscan": true,
|
"autoscan": true,
|
||||||
|
|||||||
@@ -275,7 +275,8 @@
|
|||||||
|
|
||||||
.swiper-box {
|
.swiper-box {
|
||||||
height: 300rpx;
|
height: 300rpx;
|
||||||
border-radius: 16rpx;
|
border-radius: 16rpx !important;
|
||||||
|
overflow: hidden !important
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper-item {
|
.swiper-item {
|
||||||
|
|||||||
@@ -75,7 +75,7 @@
|
|||||||
const onItemClick = (item) => {
|
const onItemClick = (item) => {
|
||||||
if (item.title == '上报记录') {
|
if (item.title == '上报记录') {
|
||||||
uni.redirectTo({
|
uni.redirectTo({
|
||||||
url: '',
|
url: '/pageSubPack/report-record/report-record',
|
||||||
});
|
});
|
||||||
} else if (item.title == '巡检记录') {
|
} else if (item.title == '巡检记录') {
|
||||||
uni.redirectTo({
|
uni.redirectTo({
|
||||||
|
|||||||
Reference in New Issue
Block a user