179 lines
4.2 KiB
Vue
179 lines
4.2 KiB
Vue
<template>
|
||
<view class="page_container replacement_record_box flex flex-col">
|
||
<view class="nav flex items-center">
|
||
<view class="line"></view>
|
||
<text class="title">仪表换新记录</text>
|
||
</view>
|
||
<TabsComponents :tabslist="tabslist" @update="handleChangeTabs"></TabsComponents>
|
||
<view class="instrument_body flex-1 flex">
|
||
<scroll-view scroll-y lower-threshold="160" @scrolltolower="scrolltolower">
|
||
<view
|
||
class="instrument_items flex items-center flex-between"
|
||
v-for="(item, index) in infolist"
|
||
:key="index"
|
||
>
|
||
<view class="flex items-center">
|
||
<image src="/static/imgs/home.png" class="icon" mode=""></image>
|
||
<view class="instrument_info">
|
||
<view class="instrument_title">
|
||
<text>{{ item.title }}</text>
|
||
</view>
|
||
<view class="instrument_time">
|
||
<text>换新时间时间：{{ item.time }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="instrument_type">
|
||
<text v-if="item.type === 2">电表</text>
|
||
<text v-else>水表</text>
|
||
</view>
|
||
</view>
|
||
<!-- 底部加载状态提示 -->
|
||
<uni-load-more :status="statusmore"></uni-load-more>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed, nextTick, ref } from 'vue'
|
||
import TabsComponents from '@/components/tabs/tabs.vue'
|
||
/** 加载状态 */
|
||
const statusmore = computed(() => {
|
||
if (isLoading.value === true) {
|
||
return 'loading'
|
||
} else if (isLoading.value === false) {
|
||
if (hasMore.value) {
|
||
return 'more'
|
||
} else {
|
||
return 'noMore'
|
||
}
|
||
}
|
||
})
|
||
const isLoading = ref(false) // 加载锁
|
||
const hasMore = ref(true) // 是否还有更多数据
|
||
|
||
const tabslist = [
|
||
{
|
||
name: '全部',
|
||
value: 0
|
||
},
|
||
{
|
||
name: '水表',
|
||
value: 1
|
||
},
|
||
{
|
||
name: '电表',
|
||
value: 2
|
||
}
|
||
]
|
||
function handleChangeTabs(val: number) {
|
||
queryParmas.value.pageNum = 1
|
||
infolist.value = []
|
||
getlist()
|
||
}
|
||
// ---------------------------------------------------------------------
|
||
const queryParmas = ref({
|
||
pageNum: 1,
|
||
pageSize: 15
|
||
})
|
||
const infolist = ref([])
|
||
function scrolltolower() {
|
||
if (hasMore.value) {
|
||
queryParmas.value.pageNum += 1
|
||
getlist()
|
||
}
|
||
}
|
||
|
||
function getlist() {
|
||
uni.showLoading({
|
||
title: '加载中',
|
||
mask: true
|
||
})
|
||
// 1. 如果正在加载或没有更多数据，直接返回
|
||
if (isLoading.value || !hasMore.value) return
|
||
// 2. 开启锁
|
||
isLoading.value = true
|
||
const all = queryParmas.value.pageNum * queryParmas.value.pageSize
|
||
if (all > 50) {
|
||
isLoading.value = false
|
||
uni.hideLoading()
|
||
hasMore.value = false
|
||
return
|
||
}
|
||
const arr = Array.from({ length: all }).map((_, index) => {
|
||
return {
|
||
title: 'M2栋3单元18' + index + '室（M2-3-1801）',
|
||
time: '2023-08-01 10:05:46',
|
||
type: 1 //1水表 2电表
|
||
}
|
||
})
|
||
hasMore.value = true
|
||
nextTick(() => {
|
||
infolist.value = [...infolist.value, ...arr]
|
||
isLoading.value = false
|
||
uni.hideLoading()
|
||
})
|
||
}
|
||
getlist()
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.replacement_record_box {
|
||
background: #f9f9f9;
|
||
.nav {
|
||
margin-bottom: 40rpx;
|
||
font-weight: 550;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
.line {
|
||
width: 6rpx;
|
||
height: 28rpx;
|
||
background: #4d5dfa;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.instrument_body {
|
||
overflow: hidden;
|
||
margin-top: 20rpx;
|
||
box-sizing: border-box;
|
||
background-color: #4d5dfa;
|
||
.instrument_items {
|
||
box-sizing: border-box;
|
||
background: #ffffff;
|
||
padding: 40rpx 20rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.icon {
|
||
width: 40rpx;
|
||
height: 32rpx;
|
||
}
|
||
.instrument_info {
|
||
margin-left: 22rpx;
|
||
.instrument_title {
|
||
font-weight: 550;
|
||
font-size: 32rpx;
|
||
color: #222222;
|
||
line-height: 40rpx;
|
||
}
|
||
.instrument_time {
|
||
margin-top: 5rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
line-height: 30rpx;
|
||
}
|
||
}
|
||
.instrument_type {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #4d5dfa;
|
||
line-height: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|