invoice_fill_h5/src/pages/publicity/list.vue

<template>
  <div class="publicity-page">
    <back-button />
    <h3>信息公示</h3>
    <div class="picker-search">
      <van-search v-model="searchValue" placeholder="请输入报销人姓名" @search="onSearch" />
    </div>
    <van-list
      class="publicity-list"
      v-model:loading="loading"
      :finished="finished"
      @load="onLoad"
      finished-text="我们是有底线的"
    >
      <van-cell
        class="item"
        v-for="item in list"
        :key="item.detailId"
        :title="item.invoiceOrgName"
        is-link
        :to="{ name: 'invoice.fill', query: { invoiceId, personId: item.personId,isFinished:true } }"
      >
        <template #value>
          <span class="pname">{{ item.personName }}</span>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>
<script setup>
import { computed, onMounted, reactive, ref } from "vue"
import { useRouter, useRoute } from 'vue-router'
import { getList } from "@/services/invoice";

const router = useRouter();
const route = useRoute();
const { invoiceId } = route.query;

const list = ref([])
const searchValue = ref()
const error = ref(false);
const loading = ref(false);
const pagenavi = reactive({ pageNum: 1, pageSize: 10, total: 0 })
const finished = computed(() => pagenavi.pageNum * pagenavi.pageSize > pagenavi.total)

const queryData = (params = {}) => {
  getList(invoiceId, { ...params, invoiceId }).then(res => {
    const { records, ...pageInfo } = res;
    if (pageInfo.current === 1) {
      list.value = records || []
    } else {
      list.value = list.value.concat(records || [])
    }

    pagenavi.pageNum = pageInfo.current
    pagenavi.total = pageInfo.total
    error.value = false
    loading.value = false
  }).catch(() => {
    error.value = true
    loading.value = false
  })
}

const onLoad = () => {
  const params = { pageNum: pagenavi.pageNum + 1, pageSize: pagenavi.pageSize }
  queryData(params)
}
const onSearch=()=>{
  const params = { pageNum: pagenavi.pageNum, pageSize: pagenavi.pageSize,personName:searchValue.value }
  queryData(params)
}

onMounted(() => {
  //获取提交记录
  const params = { pageNum: pagenavi.pageNum, pageSize: pagenavi.pageSize }
  queryData(params)
})

</script>
<style lang="less" scoped>
.publicity-page {
  height: 100%;
  display: flex;
  flex-direction: column;

  h3 {
    flex: none;
    text-align: center;
    letter-spacing: 2px;
  }

  .publicity-list {
    flex: 1;
  }

  .pname {
    color: #333;
  }
  // .item + .item {
  //   margin-top: 16px;
  // }
  .picker-search {
    flex: none;
  }
}
</style>