306 lines
7.1 KiB
Vue
306 lines
7.1 KiB
Vue
<template>
|
||
<view class="contentStyle">
|
||
<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">
|
||
<!-- 时间选择器 -->
|
||
<view class="timebox">
|
||
<view class="daybox flex ">
|
||
<uni-datetime-picker type="date" :clear-icon="false" @change="handleChangeTime" v-model="datetime">
|
||
<view class="inner-date-box">
|
||
<view class="day">{{ showDate }}</view>
|
||
<view class="searchiconbox">
|
||
<view class="arrow"> </view>
|
||
<view class="arrow1"> </view>
|
||
</view>
|
||
</view>
|
||
</uni-datetime-picker>
|
||
</view>
|
||
</view>
|
||
<!-- 巡检列表 -->
|
||
<scroll-view scroll-y class="scroll-view">
|
||
<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.locationName }}</text>
|
||
<text class="status">{{ item.status }}</text>
|
||
</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>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
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([])
|
||
const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight || 0)
|
||
|
||
// ---------- 分页状态 ----------
|
||
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 = (item) => {
|
||
uni.navigateTo({
|
||
url: `/pageSubPack/inspection-revenue/inspection-details?id=${item.id}`
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.contentStyle {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
|
||
}
|
||
|
||
.content-wrap {
|
||
flex: 1;
|
||
padding: 20rpx 40rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.status-bar {
|
||
width: 100%;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.timebox {
|
||
width: 188rpx;
|
||
height: 48rpx;
|
||
background: #ffffff;
|
||
border-radius: 24rpx;
|
||
text-align: center;
|
||
line-height: 48rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
margin-bottom: 20rpx;
|
||
|
||
.daybox {
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
|
||
.inner-date-box {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.day {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
text-align: left;
|
||
padding-left: 15rpx;
|
||
}
|
||
|
||
.searchiconbox {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 38rpx;
|
||
height: 48rpx;
|
||
padding-right: 10rpx;
|
||
flex-shrink: 0;
|
||
margin-left: auto;
|
||
|
||
.arrow,
|
||
.arrow1 {
|
||
border: 1rpx solid #ccc;
|
||
width: 8rpx;
|
||
height: 8rpx;
|
||
}
|
||
|
||
.arrow {
|
||
border-right-color: transparent;
|
||
border-top-color: transparent;
|
||
transform: rotateZ(135deg);
|
||
}
|
||
|
||
.arrow1 {
|
||
border-left-color: transparent;
|
||
border-bottom-color: transparent;
|
||
transform: rotateZ(135deg);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
//滚动容器 App重点：高度自适应 \*/
|
||
.scroll-view {
|
||
height: calc(100vh - 140rpx);
|
||
}
|
||
.list-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
//卡片 \*/
|
||
.card-item {
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 32rpx;
|
||
}
|
||
.card-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.address {
|
||
font-size: 32rpx;
|
||
color: #222;
|
||
font-weight: 500;
|
||
}
|
||
.status {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
|
||
// 标签 蓝色边框 \*/
|
||
.tag-label {
|
||
display: inline-block;
|
||
border: 2rpx solid #2F77FD;
|
||
color: #222;
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 28rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.text-row {
|
||
font-size: 28rpx;
|
||
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> |