仪表换新列表优化

wuye-manager-uniapp/pageSubPack/instrument/replacement_record.vue

@@ -1,39 +1,58 @@
 <template>
-  <view class="page_container replacement_record_box">
+  <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">
-      <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 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>
-        <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 { ref } from 'vue'
+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: '全部',
@@ -49,32 +68,54 @@ const tabslist = [
   }
 ]
 function handleChangeTabs(val: number) {
-  console.log('选择了：', val)
+  queryParmas.value.pageNum = 1
+  infolist.value = []
+  getlist()
 }
 // ---------------------------------------------------------------------
-
-const infolist = ref([
-  {
-    title: 'M2栋3单元1801室（M2-3-1801）',
-    time: '2023-08-01 10:05:46',
-    type: 1 //1水表 2电表
-  },
-  {
-    title: 'M2栋3单元1801室（M2-3-1801）',
-    time: '2023-08-01 10:05:46',
-    type: 2 //1水表 2电表
-  },
-  {
-    title: 'M2栋3单元1801室（M2-3-1801）',
-    time: '2023-08-01 10:05:46',
-    type: 1 //1水表 2电表
-  },
-  {
-    title: 'M2栋3单元1801室（M2-3-1801）',
-    time: '2023-08-01 10:05:46',
-    type: 2 //1水表 2电表
+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">
@@ -95,11 +136,16 @@ const infolist = ref([
   }
 
   .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;