feats

src/pages/index.vue

@@ -65,7 +65,7 @@ const goRecord = () => {
   router.push({ name: 'invoice.records'})
 }
 const goPromulgate = () => {
-  router.push({ name: 'invoice.promulgate'})
+  router.push({ name: 'publicity.list'})
 }
 onMounted(() => {
   getInvoiceFill(formData.data.invoiceId).then(res => {

src/pages/invoice/promulgate.vue

@@ -1,65 +0,0 @@
-<template>
-  <div class="list">
-    <h2>信息公示</h2>
-    <van-list>
-      <van-cell
-        class="item"
-        v-for="item in recordList"
-        :key="item.invoiceId"
-        :title="item.orgName"
-        @click="() => goDetail(item.invoiceId)"
-      >
-        <template #value>
-          <span>{{ item.name }}</span>
-        </template>
-      </van-cell>
-    </van-list>
-  </div>
-</template>
-<script setup>
-import { onMounted, ref } from "vue"
-import { useRouter } from 'vue-router'
-
-const router = useRouter();
-
-const recordList = ref([
-  {
-    orgName:'江苏林业集团',
-    name: '张九九',
-    invoiceId: '1',
-  },
-  {
-    orgName:'南京云致科技有限公司',
-    name: '李盼',
-    invoiceId: '2',
-  },
-  {
-    orgName:'邓州市源盛农机专业合作社',
-    name: '印雪彬',
-    invoiceId: '3',
-  },
-  {
-    orgName:'杭州昱恒科技有限公司',
-    name: '陈康',
-    invoiceId: '4',
-  },
-])
-
-onMounted(() => {
-  //获取提交记录
-})
-const goDetail = (val) => {
-  router.push({ name: 'invoice.fill', params: { id: val } })
-}
-</script>
-<style lang="less" scoped>
-.list {
-  padding: 16px;
-  h2 {
-    text-align: center;
-  }
-  .item + .item {
-    margin-top: 16px;
-  }
-}
-</style>

src/pages/publicity/list.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="publicity-page">
+    <h3>信息公示</h3>
+    <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.orgName"
+        is-link
+        :to="{ name: 'invoice.fill', query: { invoiceId, personId: item.personId } }"
+      >
+        <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 = 'f11ab8d28fd097e7aa4877ae7068a876' } = route;
+
+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) => {
+  getList(invoiceId, params).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>
+.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;
+  // }
+}
+</style>

src/router/index.js

@@ -7,7 +7,7 @@ const routes = [
   { path: '/', name: 'index', component: () => import('@/pages/index.vue') },
   { path: '/invoice/fill', name: 'invoice.fill', component: () => import('@/pages/invoice/fill.vue') },
   { path: '/invoice/records', name: 'invoice.records', component: () => import('@/pages/invoice/records.vue') },
-  { path: '/invoice/promulgate', name: 'invoice.promulgate', component: () => import('@/pages/invoice/promulgate.vue') },
+  { path: '/publicity/list', name: 'publicity.list', component: () => import('@/pages/publicity/list.vue') },
   { path: '/login', name: 'login', component: () => import('@/pages/login.vue') },
 ];
 

src/services/invoice.js

@@ -8,4 +8,9 @@ export function getInvoiceFill(id) {
 // 获取报销模板详情
 export function getInvoiceModel(id,params) {
   return request.get(`/invoice/${id}/detail/info`,{params})
-}
+}
+
+// 获取报销列表
+export function getList(invoiceId, params) {
+  return request.get(`/invoice/${invoiceId}/detail`,{params})
+}