updates

package.json

@@ -23,6 +23,7 @@
     "swiper": "^8.1.1",
     "vant": "^3.4.8",
     "vue": "^3.2.33",
+    "vue-infinite-scroll": "^2.0.2",
     "vue-router": "^4.0.14"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -26,6 +26,7 @@ specifiers:
   vite: ^2.9.5
   vite-plugin-checker: ^0.4.6
   vue: ^3.2.33
+  vue-infinite-scroll: ^2.0.2
   vue-router: ^4.0.14
   vue-tsc: ^0.34.7
 
@@ -40,6 +41,7 @@ dependencies:
   swiper: 8.1.1
   vant: 3.4.8_vue@3.2.33
   vue: 3.2.33
+  vue-infinite-scroll: 2.0.2
   vue-router: 4.0.14_vue@3.2.33
 
 devDependencies:
@@ -2580,6 +2582,10 @@ packages:
       - supports-color
     dev: true
 
+  /vue-infinite-scroll/2.0.2:
+    resolution: {integrity: sha512-n+YghR059YmciANGJh9SsNWRi1YZEBVlODtmnb/12zI+4R72QZSWd+EuZ5mW6auEo/yaJXgxzwsuhvALVnm73A==}
+    dev: false
+
   /vue-router/4.0.14_vue@3.2.33:
     resolution: {integrity: sha512-wAO6zF9zxA3u+7AkMPqw9LjoUCjSxfFvINQj3E/DceTt6uEz1XZLraDhdg2EYmvVwTBSGlLYsUw8bDmx0754Mw==}
     peerDependencies:

src/modules/query/api.ts

@@ -14,10 +14,10 @@ export function getCertificate(params: {phone:string;code:string}) {
 }
 // 持证人权益-持证人列表
 
-export function getLicenseList() {
-  return httpRequest.post('/api/psp/v1/welfare/avatar-list')
+export function getLicenseList(params:{page_size?: number; page?: number}) {
+  return httpRequest.get('/api/psp/v1/welfare/avatar-list',{params})
 }
 // 获取用户信息
 export function getUserInfo() {
-  return httpRequest.post('/api/psp/v1/my/info')
+  return httpRequest.get('/api/psp/v1/my/info')
 }

src/modules/query/components/LicenseeView.vue

 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { useInfiniteScroll } from '@vueuse/core'
+import { ref, onMounted, reactive } from 'vue'
 import * as api from '../api'
-import type { licenseeList } from '../types'
-const data = ref<licenseeList>({
-  list: []
-})
+// import type { licenseeList } from '../types'
+// const data = ref<licenseeList>({
+//   list: []
+// })
+interface licenseeList {
+  loading: boolean
+  page: number
+  total: number
+  list: any[]
+}
+const dataset = reactive<licenseeList>({ loading: false, page: 1, total: 0, list: [] })
 
+// 获取持证人列表
+const handleLicenseList = () => {
+  const params = { page_size: 10, page: dataset.page }
+  api
+    .getLicenseList(params)
+    .then(res => {
+      console.log(dataset.page, 'dataset.page')
+      const { total, list } = res.data
+      dataset.total = total
+      dataset.list = dataset.list.concat(list)
+      if (dataset.list.length <= total) {
+        dataset.page++
+      }
+    })
+    .finally(() => {
+      dataset.loading = false
+    })
+}
 onMounted(() => {
+  dataset.page = 1
+  dataset.list = []
   // 获取持证人列表
   handleLicenseList()
 })
-// 获取持证人列表
-const handleLicenseList = () => {
-  api.getLicenseList().then(res => {
-    data.value = res.data
-  })
-}
+// 滚动加载
+const el = ref<Document>()
+useInfiniteScroll(
+  document,
+  () => {
+    // load more
+    !dataset.loading && handleLicenseList()
+  },
+  { distance: 10 }
+)
 </script>
 <template>
   <div>
-    <div v-if="data.list.length > 0" class="main_content">
-      <div class="main_content_list" v-for="(item, index) in data.list" :key="index">
+    <div v-if="dataset.list.length > 0" class="main_content" ref="el">
+      <div class="main_content_list" v-for="(item, index) in dataset.list" :key="index">
         <div class="img_top">
           <img class="img" :src="item.avatar" />
         </div>
@@ -41,11 +73,11 @@ const handleLicenseList = () => {
   background: #ffffff;
   border-radius: 0.2rem;
   display: flex;
-  justify-content: space-around;
+  justify-content: flex-start;
   flex-wrap: wrap;
-
   .main_content_list {
     // margin-top: 0.2rem;
+    margin-left: 0.15rem;
     border-radius: 0.2rem;
     box-sizing: border-box;
 
@@ -98,4 +130,8 @@ const handleLicenseList = () => {
     }
   }
 }
+// .main_content:last-child {
+//   display: flex;
+//   justify-content: flex-start;
+// }
 </style>

src/modules/query/views/Index.vue

 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
 import BusinessBusinessCardQuery from '../components/BusinessCardQuery.vue'
 import CertificateQuery from '../components/CertificateQuery.vue'
 import LicenseeView from '../components/LicenseeView.vue'
 
 const active = ref<number>(0)
+const router = useRouter()
+
+onMounted(() => {
+  if (router.currentRoute.value.query.active === '0') {
+    active.value = 0
+  } else if (router.currentRoute.value.query.active === '1') {
+    active.value = 1
+  } else if (router.currentRoute.value.query.active === '2') {
+    active.value = 2
+  }
+  console.log(router.currentRoute.value.query.active, '123')
+  console.log('9999')
+})
 </script>
 
 <template>