dy_app/src/pages/collectPage/index.vue

<script setup>
import TopNav from "@/components/topNav.vue";
import Search from "@/components/search.vue";
import {onMounted, reactive, ref} from "vue";
import ListItemWrapper from "@/pages/collectPage/copmonents/listItemWrapper.vue";
import router from "@/router";
import {getSelectPage} from "@/api/collectPage";

const finished = ref(false);
const loading = ref(false);
const loadingRefresh = ref(false);
const searchValue = ref("")
const pageData = reactive({
  pageSize: 10,
  pageCurrent: 1,
  total: 0,
})

const data = reactive({
  list: []
})

const onSearch = (value) => {
  loading.value = true;
  pageData.pageCurrent = 1;
  data.list = []
  getData()
}

const onRefresh = () => {
  loading.value = false;
  loadingRefresh.value = true;
  finished.value = false;
  pageData.pageCurrent = 1;
  data.list = []
  getData()
}

const getData = async () => {
  loading.value = true;
  try {
    const { total, ...ret }  = pageData
    const res = await getSelectPage({ ...ret, bddMc: searchValue.value })
    if (res?.records.length > 0) {
      data.list = data.list.concat(res?.records) || []
      pageData.total = res?.total
      loading.value = false;
    }
    loadingRefresh.value = false;
  } catch (error) {
    loading.value = false;
    loadingRefresh.value = false;
  }
}
const onLoad = () => {
  if (data.list.length >= pageData?.total) {
    finished.value = true;
    return
  }

  pageData.pageCurrent++
  getData()
}

onMounted(() => {
  data.list = []
  getData()
})

const handleTo = () => {
  router.push("/collectAndAdd")
}
</script>

<template>
  <div>
    <TopNav navTitle="必到点采集列表" :showLeft="true" />

    <van-sticky>
      <div class="header">
        <search placeholder="请输入部门、所属方格或必到点名称进行查询"
          v-model="searchValue"
          @update:modelValue="onSearch"
        />
      </div>
    </van-sticky>

    <div class="content">
      <van-pull-refresh v-model="loadingRefresh" @refresh="onRefresh">
        <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="onLoad" offset="1" :immediate-check="false">
          <list-item-wrapper :list="data.list" />

          <van-empty description="暂无采集数据" image="default" v-if="data.list.length <= 0 && loadingRefresh === false" />
        </van-list>
      </van-pull-refresh>
    </div>

    <div class="footer" @click="handleTo">
      <van-button
        round
        native-type="submit"
        block
        type="primary"
      >
        新增必到点采集
      </van-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "@/assets/styles/mixin.scss";

.header {
  margin-top: 13vw;
  @include bg_color($background-color-theme);
}

.content {
  margin-bottom: 16vw;
}

.footer {
  position: fixed;
  padding: 2vw;
  bottom: 0;
  left: 0;
  width: calc(100% - 4vw);
}
</style>