invoice_fill_h5/src/pages/invoice/history.vue

<template>
  <div class="history-page">
    <h3>填写记录</h3>
    <van-list
      class="history-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.invoiceName"
        is-link
        :to="{ name: 'invoice.fill', query: { invoiceId, personId: item.personId } }"
      >
        <template #value>
          <span class="pname">{{ item.createDate.substr(0, 10) }}</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";
import { useModel } from "@zjxpcyc/vue-tiny-store";

const { user } = useModel('user')

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

const list = 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 = {}) => {
  console.log('-------------', user.personId)
  getList(invoiceId, { ...params, personId: user.personId }).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)
}

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

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

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

  .history-list {
    flex: 1;
  }

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