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

<template>
  <view class="page_padding">
    <view class="replacement_record_box flex-1 flex flex-col">
      <view class="nav flex items-center">
        <view class="line"></view>
        <text class="title">仪表换新记录</text>
      </view>
      <TabsComponents
        :activeValue="activeValue"
        :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 lazy-load src="/static/imgs/home.png" class="icon" mode=""></image>
              <view class="instrument_info">
                <view class="instrument_title">
                  <text>{{ item.addressCn }}</text>
                </view>
                <view class="instrument_time">
                  <text>换新时间时间：{{ item.createTime }}</text>
                </view>
              </view>
            </view>
            <view class="instrument_type">
              <text v-if="item.deviceType === '1'">电表</text>
              <text v-else-if="item.deviceType === '2'">水表</text>
            </view>
          </view>
          <!-- 底部加载状态提示 -->
          <uni-load-more :status="statusmore"></uni-load-more>
        </scroll-view>
      </view>
      <view class="action_btn" @tap="handleClick">
        <text>新增</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, nextTick, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import TabsComponents from '@/components/tabs/tabs.vue'
import { getReplaceMainList } from '@/api/instrument.js'

/** 加载状态 */
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: 2
  },
  {
    name: '电表',
    value: 1
  }
]
const activeValue = ref(0)
// 切换tabs
function handleChangeTabs(val: number) {
  queryParmas.value.deviceType = val
  activeValue.value = val
  if (val === 0) {
    queryParmas.value.deviceType = undefined
  }
  queryParmas.value.pageNum = 1
  infolist.value = []
  hasMore.value = true
  getlist()
}
// ---------------------------------------------------------------------
const infolist = ref([])
const queryParmas = ref({
  pageNum: 1,
  pageSize: 10,
  deviceType: undefined
})
// 总数
const total = ref(0)
// 上滑加载
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
  const { pageNum, pageSize, deviceType } = queryParmas.value
  getReplaceMainList({
    pageNum,
    pageSize,
    deviceType
  })
    .then(res => {
      infolist.value = [...infolist.value, ...res.rows]
      total.value = res.total
      hasMore.value = infolist.value.length < total.value
    })
    .catch(() => {
      uni.showToast({
        icon: 'error',
        title: '网络异常'
      })
    })
    .finally(() => {
      isLoading.value = false
    })
}
onShow(() => {
  resetList()
})

// 重置
function resetList() {
  infolist.value = []
  queryParmas.value.pageNum = 1
  hasMore.value = true
  getlist()
}

// 跳转到 仪表换新
function handleClick() {
  uni.navigateTo({
    url: '/pageSubPack/instrument/addreplacement'
  })
}
</script>

<style scoped lang="scss">
.replacement_record_box {
  background: #f9f9f9;
  padding: 20rpx 40rpx;
  position: relative;
  flex: 1;
  overflow: hidden;
  box-sizing: border-box;
  .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;
    .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;
      }
    }
  }

  .action_btn {
    width: 100%;
    height: 80rpx;
    background: #4d5dfa;
    border-radius: 8rpx;
    text-align: center;
    font-weight: 400;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 80rpx;
    margin-top: 20rpx;
  }
}
</style>