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

修复已知bug

Browse Source
This commit is contained in:
zhouyanli
2026-07-21 09:41:54 +08:00
parent 7b1864f439
commit e68579a5d3
15 changed files with 1143 additions and 839 deletions
Download Patch File Download Diff File Expand all files Collapse all files

344
property-uniapp-project/pageSubPack/inspection-revenue/inspection-details.vue
View File

@@ -1,124 +1,240 @@
<template>
<view class="page">
<scroll-view scroll-y class="scroll">
<!-- 第一块信息卡片 -->
<view class="card">
<view class="row-title">
<text>幸福苑小区1号楼1单元电梯间</text>
<text class="status">已巡检</text>
</view>
<view class="text-item">巡检项目：设备巡检</view>
<view class="text-item">巡检时间：07:00:00 –09:00:00</view>
<view class="text-item">巡检小区：幸福苑小区</view>
<view class="text-item">巡检路线：常规巡检路线1</view>
<view class="text-item">巡检点：安全出口1号；巡检点2；巡检点3</view>
</view>
<view class="page">
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
<uni-nav-bar title="巡检详情" backgroundColor="transparent" :border="false" left-icon="left"
@click-left="goBack" />
<scroll-view scroll-y class="scroll">
<!-- 加载中 -->
<view class="loading-wrap" v-if="loading">
<uni-load-more status="loading" :content-text="{ contentdown: '上拉加载更多', contentrefresh: '加载中...', contentnomore: '没有更多了' }" />
</view>
<!-- 第二块巡检结果卡片 -->
<view class="card">
<view class="card-subtitle">巡检结果</view>
<view class="text-item">巡检人：李祥龙</view>
<view class="text-item">手机号码：13013001300</view>
<view class="text-item">巡检时间：2026-10-25 08:10:10</view>
<view class="text-item">巡检结果：</view>
<view class="result-desc">
<text>1.设备正常，无任何异动和意向</text>
<text>2.电力系统正常、无故障提示</text>
<text>3.设备使用正常，无异常提示</text>
</view>
<view class="text-item">巡检照片：</view>
<!-- 图片区域 flex自动换行 -->
<view class="img-wrap">
<view
class="img-box"
v-for="(img, idx) in imgList"
:key="idx"
>
<image
class="img"
:src="img"
mode="aspectFill"
></image>
</view>
</view>
</view>
</scroll-view>
</view>
<template v-if="!loading && detail">
<!-- 第一块：基本信息 -->
<view class="card">
<view class="row-title">
<text>{{ detail.locationName }}</text>
<text class="status">{{ detail.status }}</text>
</view>
<view class="text-item">巡检项目：{{ detail.inspectionType }}</view>
<view class="text-item">巡检时间：{{ detail.taskTime }}</view>
<view class="text-item">巡检小区：{{ detail.villageName }}</view>
<view class="text-item">巡检路线：{{ detail.routeName }}</view>
<view class="text-item">巡检点：{{ detail.pointNames }}</view>
</view>
<!-- 第二块：巡检结果 -->
<view class="card">
<view class="card-subtitle">巡检结果</view>
<view class="text-item">巡检人：{{ detail.inspectorName }}</view>
<view class="text-item">手机号码：{{ detail.phoneNumber }}</view>
<view class="text-item">巡检时间：{{ detail.inspectTime }}</view>
<view class="text-item">巡检结果：</view>
<view class="result-desc">
<text v-for="(r, idx) in detail.results" :key="idx">{{ idx + 1 }}.{{ r }}</text>
</view>
<view class="text-item">巡检照片：</view>
<view class="img-wrap">
<view class="img-box" v-for="(img, idx) in detail.photos" :key="idx" @click="previewImage(img)">
<image class="img" :src="img" mode="aspectFill"></image>
</view>
<view class="empty-img-tip" v-if="!detail.photos || detail.photos.length === 0">暂无照片</view>
</view>
</view>
<!-- 第三块：巡检明细列表 -->
<view class="card" v-for="(sub, idx) in detail.details" :key="sub.id">
<view class="card-subtitle">{{ sub.pointName }}</view>
<view class="text-item">巡检时间：{{ sub.checkTime }}</view>
<view class="text-item">巡检结果：{{ sub.checkResult }}</view>
<view class="text-item" v-if="sub.remark">备注：{{ sub.remark }}</view>
<view class="text-item" v-if="sub.photos">巡检照片：</view>
<view class="img-wrap" v-if="sub.photos">
<view class="img-box" v-for="(img, i) in sub.photos.split(',')" :key="i" @click="previewImage(img)">
<image class="img" :src="img" mode="aspectFill"></image>
</view>
</view>
</view>
</template>
<!-- 加载失败 -->
<view class="error-wrap" v-if="!loading && !detail">
<text class="empty-text">数据加载失败</text>
<view class="retry-btn" @click="fetchDetail">点击重试</view>
</view>
</scroll-view>
</view>
</template>
<script setup>
import { ref } from 'vue'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { inspectionDetails } from '../api/apiSub.js'
// 图片列表，空图片占位，真实环境替换成接口图片地址
const imgList = ref([
'',
'',
'',
''
])
const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight || 0)
const loading = ref(false)
const detail = ref(null)
let recordId = ''
onLoad((options) => {
if (options.id) {
recordId = options.id
fetchDetail()
}
})
const fetchDetail = async () => {
if (!recordId) return
loading.value = true
detail.value = null
try {
const res = await inspectionDetails({ id: recordId })
if (res.code === 200) {
detail.value = res.data
} else {
uni.showToast({ title: res.msg || '获取详情失败', icon: 'none' })
}
} catch (err) {
console.error('获取巡检详情失败', err)
uni.showToast({ title: '网络异常，请重试', icon: 'none' })
} finally {
loading.value = false
}
}
const goBack = () => {
uni.navigateBack()
}
const previewImage = (url) => {
if (!url) return
// 收集当前所有可预览图片
const allPhotos = []
if (detail.value.photos) allPhotos.push(...detail.value.photos)
if (detail.value.details) {
detail.value.details.forEach(d => {
if (d.photos) allPhotos.push(...d.photos.split(','))
})
}
uni.previewImage({
current: url,
urls: allPhotos
})
}
</script>
<style scoped>
page {
background-color: #f7f8fa;
}
.page {
padding: 24rpx;
}
.scroll {
height: 100vh;
}
.card {
background: #fff;
border-radius: 20rpx;
padding: 36rpx;
margin-bottom: 24rpx;
}
.row-title {
display: flex;
justify-content: space-between;
font-size: 32rpx;
color: #222;
margin-bottom: 24rpx;
}
.status {
font-size: 24rpx;
color: #555;
}
.card-subtitle {
font-size: 32rpx;
font-weight: 500;
color: #222;
margin-bottom: 24rpx;
}
.text-item {
font-size: 28rpx;
color: #333;
line-height: 2;
}
.result-desc {
font-size: 28rpx;
color: #333;
display: flex;
flex-direction: column;
line-height: 1.8;
margin: 12rpx 0;
}
/* 图片容器 flex-wrap换行 */
.img-wrap {
margin-top: 16rpx;
display: flex;
flex-wrap: wrap;
gap: 16rpx;
}
.img-box {
width: 140rpx;
height: 140rpx;
background-color: #d8d9db;
border-radius: 8rpx;
}
.img {
width: 100%;
height: 100%;
}
page {
background-color: #f7f8fa;
}
.status-bar {
width: 100%;
flex-shrink: 0;
}
.page {
height: 100vh;
display: flex;
flex-direction: column;
}
.scroll {
flex: 1;
padding: 24rpx;
box-sizing: border-box;
}
.card {
background: #fff;
border-radius: 20rpx;
padding: 36rpx;
margin-bottom: 24rpx;
}
.row-title {
display: flex;
justify-content: space-between;
font-size: 32rpx;
color: #222;
margin-bottom: 24rpx;
}
.status {
font-size: 24rpx;
color: #555;
}
.card-subtitle {
font-size: 32rpx;
font-weight: 500;
color: #222;
margin-bottom: 24rpx;
}
.text-item {
font-size: 28rpx;
color: #333;
line-height: 2;
}
.result-desc {
font-size: 28rpx;
color: #333;
display: flex;
flex-direction: column;
line-height: 1.8;
margin: 12rpx 0;
}
/* 图片容器 flex-wrap换行 */
.img-wrap {
margin-top: 16rpx;
display: flex;
flex-wrap: wrap;
gap: 16rpx;
}
.img-box {
width: 140rpx;
height: 140rpx;
background-color: #d8d9db;
border-radius: 8rpx;
overflow: hidden;
}
.img {
width: 100%;
height: 100%;
}
.empty-img-tip {
font-size: 26rpx;
color: #999;
}
.loading-wrap {
padding-top: 200rpx;
}
.error-wrap {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 200rpx;
}
.empty-text {
font-size: 28rpx;
color: #999;
}
.retry-btn {
margin-top: 24rpx;
padding: 12rpx 48rpx;
border: 2rpx solid #2F77FD;
border-radius: 8rpx;
color: #2F77FD;
font-size: 28rpx;
}
</style>

167
property-uniapp-project/pageSubPack/inspection-revenue/inspection.vue
View File

@@ -1,6 +1,6 @@
<template>
<view class="contentStyle">
<view class="status-bar"></view>
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
<uni-nav-bar title="巡检记录" backgroundColor="transparent" :border="false" left-icon="left" @click-left="goBack" />
<view class="content-wrap">
<!-- 时间选择器 -->
@@ -19,17 +19,22 @@
</view>
<!-- 巡检列表 -->
<scroll-view scroll-y class="scroll-view">
<view class="list-container" @click="goToInspectionDetail">
<view class="card-item" v-for="(item, index) in listData" :key="index">
<view class="list-container" v-if="listData.length > 0">
<view class="card-item" v-for="(item, index) in listData" :key="index" @click="goToInspectionDetail(item)">
<view class="card-head">
<text class="address">{{ item.address }}</text>
<text class="address">{{ item.locationName }}</text>
<text class="status">{{ item.status }}</text>
</view>
<view class="tag-label">{{ item.type }}</view>
<view class="text-row">巡检时间：{{ item.time }}</view>
<view class="text-row">巡检人：{{ item.inspector }}</view>
<view class="tag-label">{{ item.inspectionType }}</view>
<view class="text-row">巡检时间：{{ item.executeDate }}</view>
<view class="text-row">巡检人：{{ item.inspectorName }}</view>
</view>
</view>
<!-- 暂无数据 -->
<view class="empty-wrap" v-if="!loading && listData.length === 0">
<uni-icons type="info" size="30" color="#ccc"></uni-icons>
<text class="empty-text">暂无数据</text>
</view>
</scroll-view>
</view>
@@ -37,51 +42,117 @@
</template>
<script setup>
import {
ref
} from 'vue';
import {ref} from 'vue'
import {onLoad,onReachBottom,onPullDownRefresh} from '@dcloudio/uni-app'
import {getInspectionList} from '../api/apiSub.js'
import moment from 'moment' // 新增
// ---------- 基础状态 ----------
const datetime = ref('')
const showDate = ref('选择日期')
const listData = ref([
{
address: '幸福苑小区1号楼1单元电梯间',
status: '已巡检',
type: '设备巡检',
time: '07:00:00 –09:00:00',
inspector: '李祥龙'
},
{
address: '幸福苑小区1号楼1单元电梯间',
status: '已巡检',
type: '设备巡检',
time: '07:00:00 –09:00:00',
inspector: '李祥龙'
}
])
const listData = ref([])
const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight || 0)
const handleChangeTime = (e) => {
if (e) {
// e 格式为 YYYY-MM-DD，只取 MM-DD
showDate.value = e.slice(5)
} else {
showDate.value = '选择日期'
// ---------- 分页状态 ----------
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)
const loading = ref(false)
const noMore = ref(false)
// ---------- 初始化 ----------
onLoad(() => {
// 使用 moment 格式化今天
const today = moment().format('YYYY-MM-DD')
datetime.value = today
showDate.value = moment().format('MM-DD') // 显示 MM-DD
fetchList(true)
})
// ---------- 获取列表 ----------
const fetchList = async (reset = false) => {
if (loading.value) return
if (!reset && noMore.value) return
loading.value = true
try {
const params = {
date: datetime.value, // 已经是 YYYY-MM-DD
pageNum: reset ? 1 : pageNum.value,
pageSize: pageSize.value
}
const res = await getInspectionList(params)
if (res.code === 200) {
const rows = res.rows
total.value = res.total || 0
if (reset) {
listData.value = rows
pageNum.value = 1
noMore.value = rows.length < pageSize.value
} else {
listData.value = [...listData.value, ...rows]
noMore.value = rows.length < pageSize.value || listData.value.length >= total.value
}
if (!reset && rows.length > 0) {
pageNum.value += 1
}
} else {
uni.showToast({ title: res.msg || '获取列表失败', icon: 'none' })
}
} catch (err) {
console.error('获取巡检列表失败', err)
uni.showToast({ title: '网络异常，请重试', icon: 'none' })
} finally {
loading.value = false
uni.stopPullDownRefresh()
}
}
// 返回
// ---------- 日期变更（使用 moment） ----------
const handleChangeTime = (e) => {
if (e) {
// e 格式为 YYYY-MM-DD，用 moment 解析并格式化为 MM-DD
showDate.value = moment(e).format('MM-DD')
datetime.value = e
} else {
// 用户清空日期，可根据业务设置默认值或置空
showDate.value = '选择日期'
datetime.value = ''
// 如果希望清空时不请求，可 return，否则也重置列表
}
// 重置分页并刷新
pageNum.value = 1
noMore.value = false
fetchList(true)
}
// ---------- 上拉加载更多 ----------
onReachBottom(() => {
if (!noMore.value && !loading.value) {
fetchList(false)
}
})
// ---------- 下拉刷新 ----------
onPullDownRefresh(() => {
pageNum.value = 1
noMore.value = false
fetchList(true)
})
// ---------- 返回 ----------
const goBack = () => {
uni.switchTab({
url: '/pages/serviceIndex/serviceIndex'
})
}
// 跳转详情
const goToInspectionDetail = () =>{
// ---------- 跳转详情 ----------
const goToInspectionDetail = (item) => {
uni.navigateTo({
url: `/pageSubPack/inspection-revenue/inspection-details`
url: `/pageSubPack/inspection-revenue/inspection-details?id=${item.id}`
})
}
</script>
<style lang="scss" scoped>
@@ -99,8 +170,8 @@
}
.status-bar {
height: 46px;
width: 100%;
flex-shrink: 0;
}
.timebox {
@@ -214,4 +285,22 @@
color: #333;
line-height: 2;
}
// 暂无数据
.empty-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 200rpx;
}
.empty-img {
width: 240rpx;
height: 240rpx;
}
.empty-text {
font-size: 28rpx;
color: #999;
margin-top: 20rpx;
}
</style>