266 lines
6.7 KiB
Vue
266 lines
6.7 KiB
Vue
<template>
|
||
<!-- 顶部导航栏 -->
|
||
<view class="page_padding">
|
||
<view class="inspection_record_box flex-1 flex flex-col">
|
||
<navBar @clickLeft="navBack" title="巡检记录"></navBar>
|
||
|
||
<TabsComponents :tabslist="tabslist" @update="handleChangeTabs"></TabsComponents>
|
||
<scroll-view
|
||
class="record_body record-list"
|
||
scroll-y
|
||
lower-threshold="60"
|
||
@scrolltolower="scrolltolower"
|
||
>
|
||
<!-- v-for -->
|
||
<view class="record_item" v-for="(item, index) in list" :key="index">
|
||
<view class="time">
|
||
<view>{{ item.day }}</view>
|
||
</view>
|
||
<view class="record_list_box">
|
||
<!-- v-for -->
|
||
<view class="record_list_item" v-for="(ite, ind) in item.list" :key="ind">
|
||
<view class="title flex items-center">
|
||
<view class="title_name"> {{ ite.title }} </view>
|
||
<view class="title_status" v-if="ite.status === 0"> 已巡检 </view>
|
||
<view class="title_status noinspection" v-else> 未巡检 </view>
|
||
</view>
|
||
<view class="items">
|
||
<!-- v-for -->
|
||
<view class="item" v-for="(it, inde) in ite.items" :key="inde">
|
||
<text>{{ it }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="time">
|
||
<text>巡检时间：</text>
|
||
<text>{{ ite.time }}</text>
|
||
</view>
|
||
<view class="time user">
|
||
<text>巡检人：</text>
|
||
<text>{{ ite.user }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import TabsComponents from '@/components/tabs/tabs.vue'
|
||
import navBar from '@/components/navbar/navbar.vue'
|
||
import { ref } from 'vue'
|
||
const tabslist = [
|
||
{
|
||
name: '全部',
|
||
value: 0
|
||
},
|
||
{
|
||
name: '未巡检',
|
||
value: 1
|
||
},
|
||
{
|
||
name: ' 已巡检',
|
||
value: 2
|
||
}
|
||
]
|
||
function handleChangeTabs(val: number) {}
|
||
// ---------------------------------------------------------------------
|
||
|
||
// ---------------------------------------------------------------------
|
||
const list = ref([
|
||
{
|
||
day: '10月11日',
|
||
list: [
|
||
{
|
||
title: '标题1',
|
||
status: 0,
|
||
items: ['设备巡检'],
|
||
time: '07:00:00-09:00:00',
|
||
user: '李兴'
|
||
},
|
||
{
|
||
title: '标题3',
|
||
status: 0,
|
||
items: ['设备巡检'],
|
||
time: '07:00:00-09:00:00',
|
||
user: '湖色'
|
||
}
|
||
]
|
||
}
|
||
])
|
||
|
||
const queryParmas = ref({
|
||
pageNum: 1,
|
||
pageSize: 5
|
||
})
|
||
const isLoading = ref(false) // 加载锁
|
||
const hasMore = ref(true) // 是否还有更多数据
|
||
const total = ref(21)
|
||
function scrolltolower() {
|
||
// 必须加这两个判断！
|
||
if (isLoading.value || !hasMore.value) {
|
||
return
|
||
}
|
||
queryParmas.value.pageNum += 1
|
||
getlist()
|
||
}
|
||
function getlist() {
|
||
// 1. 如果正在加载或没有更多数据，直接返回
|
||
if (isLoading.value || !hasMore.value) return
|
||
// 2. 开启锁
|
||
isLoading.value = true
|
||
uni.showLoading({
|
||
title: '加载中',
|
||
mask: true
|
||
})
|
||
const { pageNum, pageSize } = queryParmas.value
|
||
|
||
const startId = (pageNum - 1) * pageSize + 1
|
||
const arr = Array.from({ length: pageSize }).map((_, index) => {
|
||
const realId = startId + index // ✅ 修复 ID 错误
|
||
|
||
// ✅ 随机生成 0、1、2
|
||
const randomStatus = Math.floor(Math.random() * 2)
|
||
return {
|
||
day: '10月' + realId + '日',
|
||
list: [
|
||
{
|
||
title: '标题1',
|
||
status: randomStatus,
|
||
items: ['设备巡检'],
|
||
time: '07:00:00-09:00:00',
|
||
user: '李兴'
|
||
},
|
||
{
|
||
title: '标题3',
|
||
status: randomStatus,
|
||
items: ['设备巡检'],
|
||
time: '07:00:00-09:00:00',
|
||
user: '湖色'
|
||
}
|
||
]
|
||
}
|
||
})
|
||
|
||
// 追加数据（正确方式）
|
||
list.value = [...list.value, ...arr]
|
||
// 判断是否还有更多
|
||
hasMore.value = list.value.length < total.value
|
||
isLoading.value = false
|
||
uni.hideLoading()
|
||
}
|
||
getlist()
|
||
function resetList() {
|
||
list.value = []
|
||
queryParmas.value.pageNum = 1
|
||
hasMore.value = true
|
||
getlist()
|
||
}
|
||
// ---------------------------------------------------------------------
|
||
|
||
// 返回上一页
|
||
const navBack = () => {
|
||
uni.navigateBack()
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.inspection_record_box {
|
||
background: linear-gradient(225deg, #e2f0ff 0%, #f9f9f9 50.71%);
|
||
padding: 20rpx 40rpx;
|
||
position: relative;
|
||
flex: 1;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
.record_body {
|
||
margin-top: 20rpx;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
overflow-y: auto;
|
||
box-sizing: border-box;
|
||
.record_item {
|
||
& > .time {
|
||
width: 168rpx;
|
||
height: 48rpx;
|
||
background: #ffffff;
|
||
border-radius: 24rpx;
|
||
text-align: center;
|
||
line-height: 48rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.record_list_box {
|
||
margin-bottom: 20rpx;
|
||
.record_list_item {
|
||
margin-bottom: 20rpx;
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
box-sizing: border-box;
|
||
padding: 32rpx;
|
||
// 巡检标题
|
||
.title {
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #222222;
|
||
line-height: 40rpx;
|
||
height: 40rpx;
|
||
margin-bottom: 25rpx;
|
||
|
||
.title_status {
|
||
width: 86rpx;
|
||
height: 30rpx;
|
||
background: #4d5dfa;
|
||
border-radius: 198rpx 198rpx 198rpx 198rpx;
|
||
text-align: center;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #ffffff;
|
||
line-height: 30rpx;
|
||
margin-left: 5rpx;
|
||
|
||
&.noinspection {
|
||
background-color: #ccc;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 巡检项目
|
||
.items {
|
||
margin-bottom: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
.item {
|
||
padding: 0 10rpx;
|
||
height: 42rpx;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
border: 1rpx solid #4d5dfa;
|
||
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #4d5dfa;
|
||
text-align: center;
|
||
line-height: 42rpx;
|
||
margin-right: 20rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
}
|
||
|
||
// 巡检人 巡检时间
|
||
& > .time {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|