直播间需要添加签到功能

pages/mall/list.vue

@@ -4,11 +4,14 @@
   import { getCategory, getProductList } from '@/api/mall'
   import { navigateTo } from '@/utils/router'
 
+  const paging = ref(null)
   /** 顶部分类选项 */
   const topNavOptions = ref([])
   const formData = reactive({
     name: '',
-    type: '0'
+    type: '',
+    pageNum: 1,
+    pageSize: 15
   })
   /** 商品列表 */
   const cardList = ref([])
@@ -18,14 +21,24 @@
     topNavOptions.value = res.data
   }
 
-  const getListData = async () => {
-    const res = await getProductList()
-    cardList.value = res.rows
-    console.log(res.rows)
+  const getListData = async (pageNum, pageSize) => {
+    try {
+      const res = await getProductList({
+        pageNum,
+        pageSize,
+        categoryId: formData.type,
+        productName: formData.name
+      })
+      paging.value.complete(res.rows)
+    } catch (error) {
+      paging.value.complete(false)
+    }
   }
 
   const onTop = value => {
     formData.type = value
+    formData.name = ''
+    getListData(1, formData.pageSize)
   }
 
   const onGo = item => {
@@ -34,53 +47,77 @@
 
   onLoad(async () => {
     await categoryList()
-    await getListData()
+    // await getListData(1, formData.pageSize)
   })
 </script>
 
 <template>
-  <view class="mall-list">
-    <view class="top-box">
-      <cb-search v-model="formData.name"></cb-search>
-      <view class="top-options">
-        <view
-          v-for="(item, index) in topNavOptions"
-          :key="index"
-          :class="{ active: item.id === formData.type }"
-          class="text"
-          @click="onTop(item.id)"
-        >
-          {{ item.categoryName }}
-        </view>
-      </view>
-    </view>
-
-    <!-- 商品卡片 -->
-    <view class="card-list">
-      <view
-        v-for="item in cardList"
-        :key="item.id"
-        class="card-item"
-        @click="onGo(item)"
-      >
-        <image
-          :src="item.mainImage"
-          mode="scaleToFill"
-          class="imghead"
-        ></image>
-        <text class="title">{{ item.productName }}</text>
-        <view class="price">
-          <view class="num-box">
-            <text class="num">￥</text>
-            <text class="num">{{ item.minPrice }}</text>
+  <z-paging
+    ref="paging"
+    v-model="cardList"
+    :default-page-no="formData.pageNum"
+    :default-page-size="formData.pageSize"
+    safe-area-inset-bottom
+    use-safe-area-placeholder
+    :show-loading-more-no-more-view="false"
+    :paging-style="{ 'background-color': '#f9f9f9' }"
+    @query="getListData"
+  >
+    <view class="mall-list">
+      <view class="top-box">
+        <cb-search
+          v-model="formData.name"
+          @search="getListData()"
+        ></cb-search>
+        <view class="top-options">
+          <view
+            :class="{ active: formData.type === '' }"
+            class="text"
+            @click="onTop('')"
+          >
+            全部
+          </view>
+          <view
+            v-for="(item, index) in topNavOptions"
+            :key="index"
+            :class="{ active: item.id === formData.type }"
+            class="text"
+            @click="onTop(item.id)"
+          >
+            {{ item.categoryName }}
           </view>
-          <!-- <text class="buy">好评率：99%</text> -->
         </view>
-        <!-- 拼单数量 -->
-        <text class="bottom-name">拼单数量:{{ item.salesCount }}件</text>
+      </view>
+
+      <!-- 商品卡片 -->
+      <view class="card-list">
+        <view
+          v-for="item in cardList"
+          :key="item.id"
+          class="card-item"
+          @click="onGo(item)"
+        >
+          <image
+            :src="item.mainImage"
+            mode="scaleToFill"
+            class="imghead"
+          ></image>
+          <text class="title">{{ item.productName }}</text>
+          <view class="price">
+            <view class="num-box">
+              <text class="num">￥</text>
+              <text class="num">{{ item.minPrice }}</text>
+            </view>
+            <!-- <text class="buy">好评率：99%</text> -->
+          </view>
+          <!-- 拼单数量 -->
+          <text class="bottom-name">
+            拼单数量:{{ item.salesCount }}件
+          </text>
+        </view>
       </view>
     </view>
-  </view>
+  </z-paging>
 </template>
 
 <style lang="scss" scoped>