招聘会列表加载更多

api/jobFair.js

@@ -1,10 +1,11 @@
 import request from "@/utils/request"
 
 // 获得招聘会列表
-export const getJobFairList = () => {
+export const getJobFairList = (params) => {
   return request({
     url: '/app-api/menduner/system/recruit/job-fair/list',
     method: 'GET',
+	params,
     custom: {
       showLoading: false,
       auth: true

pages/index/jobFair.vue

@@ -5,11 +5,22 @@
       <view class="defaultBgc" style="padding-bottom: 100px;" :style="{'height': `calc(100vh - ${(navbarHeight + 100)}px)`, 'padding-top': navbarHeight + 'px'}">
         <view v-if="items.length">
           <view class="commonBackground"></view>
-          <view v-for="val in items" :key="val.id" @tap="handleToJobFairEnterprises(val)" class="list-item default-border">
-            <image v-if="val?.previewImg" class="ss-m-t-10" :src="val.previewImg" mode="widthFix" style="width: 100%; height: auto; border-radius: 6px;"></image>
-            <view class="ss-m-t-20">活动时间：{{ timesTampChange(val.startTime, 'Y-M-D') }}至{{ timesTampChange(val.endTime, 'Y-M-D') }}</view>
-            <button class="ss-m-t-20 ss-m-b-10" style="background-color: #00B760; color: #fff;" type="primary">立即加入</button>
-          </view>
+          <scroll-view class="scrollBox" :scroll-y="true" @scrolltolower="loadingMore" style="position:relative;">
+            <view v-for="val in items" :key="val.id" @tap="handleToJobFairEnterprises(val)" class="list-item default-border">
+              <image v-if="val?.previewImg" class="ss-m-t-10" :src="val.previewImg" mode="widthFix" style="width: 100%; height: auto; border-radius: 6px;"></image>
+              <view class="ss-m-t-20 ss-m-b-10">
+                活动状态：
+                <span class="font-weight-bold" :style="{'color': val.status === '0' ? '#00b760' : '#ff5252'}">
+                  {{ val.status === '0' ? '进行中' : '已结束' }}
+                </span>
+              </view>
+              <view>活动时间：{{ timesTampChange(val.startTime, 'Y-M-D') }}至{{ timesTampChange(val.endTime, 'Y-M-D') }}</view>
+              <button class="ss-m-t-20 ss-m-b-10" style="background-color: #00B760; color: #fff;" type="primary">
+                {{ val.status === '0' ? '立即加入' : '查看详情' }}
+              </button>
+            </view>
+            <uni-load-more :status="more" />
+          </scroll-view>
         </view>
         <view v-else>
           <view class="commonBackground"></view>
@@ -39,18 +50,50 @@ import payPopup from '@/components/payPopup'
 const useUserStore = userStore()
 const items = ref([])
 const navbarHeight = ref(uni.getStorageSync('navbarHeight'))
+const total = ref(0)
+const query = ref({
+	pageNo: 1,
+	pageSize: 20
+})
+const more = ref('more')
 
 // 获得招聘会列表
 const getList = async () => {
+	if (query.value.pageNo < 1) return
+	if (query.value.pageNo === 1) items.value = []
   try {
+	  more.value = 'loading'
 	  uni.showLoading({ title: '加载中' })
-    const res = await getJobFairList()
-    items.value = res?.data || []
+    const res = await getJobFairList(query.value)
+    const list = res?.data?.list || []
+    if (!list?.length) {
+      more.value = 'noMore'
+      return
+    }
+    items.value = items.value.concat(...list)
+    total.value = res.data.total
+    more.value = 'more'
+    if (items.value.length === +total.value) {
+      more.value = 'noMore'
+      return
+    }
+  } catch (error) {
+	  query.value.pageNo--
+	  more.value = 'more'
   } finally {
     uni.hideLoading()
   }
 }
 
+// 加载更多
+const loadingMore = () => {
+  if (more.value === 'noMore') return
+
+  more.value = 'loading'
+  query.value.pageNo++
+  getList()
+}
+
 watch(() => useUserStore.refreshToken, () => {
 	if (!useUserStore.refreshToken) return items.value = []
 	getList()
@@ -117,6 +160,10 @@ const paySuccess = () => {
 </script>
 
 <style scoped lang="scss">
+.scrollBox {
+	height: 100vh;
+	box-sizing: border-box;
+}
 .list-item {
   margin: 0 30rpx 30rpx 30rpx;
   border-radius: 20rpx;