【功能完善】积分商城：完善活动列表

pages/activity/point/list.vue

@@ -1,77 +1,80 @@
 <!-- 页面  -->
 <template>
-  <s-layout title="积分商城">
-    <view class="ss-p-20">
-      <view v-for="item in state.pagination.data" :key="item.id" class="ss-m-b-20">
-        <s-point-card
-          size="sl"
-          :data="item"
-          priceColor="#FF3000"
-          @tap="sheep.$router.go('/pages/goods/point', { id: item.id })"
-        ></s-point-card>
-      </view>
-    </view>
-    <s-empty
-      v-if="state.pagination.total === 0"
-      icon="/static/goods-empty.png"
-      text="暂无积分商品"
-    ></s-empty>
-    <uni-load-more
-      v-if="state.pagination.total > 0"
-      :status="state.loadStatus"
-      :content-text="{
-        contentdown: '上拉加载更多',
-      }"
-      @tap="loadmore"
-    />
+  <s-layout title="积分商城" navbar="normal" :leftWidth="0" :rightWidth="0">
+    <scroll-view
+      class="scroll-box"
+      :style="{ height: pageHeight + 'rpx' }"
+      scroll-y="true"
+      :scroll-with-animation="false"
+      :enable-back-to-top="true"
+    >
+      <s-point-card ref="sPointCardRef" :property="sPointCardData" />
+      <s-empty
+        v-if="activityTotal === 0"
+        icon="/static/goods-empty.png"
+        text="暂无积分商品"
+      ></s-empty>
+      <uni-load-more
+        v-if="activityTotal > 0"
+        :status="loadStatus"
+        :content-text="{
+            contentdown: '上拉加载更多',
+          }"
+        @tap="loadMore"
+      />
+    </scroll-view>
   </s-layout>
 </template>
 <script setup>
   import sheep from '@/sheep';
   import { onLoad, onReachBottom } from '@dcloudio/uni-app';
-  import { reactive } from 'vue';
-  import _ from 'lodash';
+  import { reactive, ref } from 'vue';
+  import PointApi from '@/sheep/api/promotion/point';
+  import SLayout from '@/sheep/components/s-layout/s-layout.vue';
 
-  const state = reactive({
-    pagination: {
-      data: [],
-      current_page: 1,
-      total: 1,
-      last_page: 1,
-    },
-    loadStatus: '',
+  // 计算页面高度
+  const { safeAreaInsets, safeArea } = sheep.$platform.device;
+  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
+  const pageHeight =
+    (safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sheep.$platform.navbar - 350;
+
+  const sPointCardData = ref({
+    'layoutType': 'oneColBigImg',
   });
-  async function getData(page = 1, list_rows = 5) {
-    state.loadStatus = 'loading';
-    let res = await sheep.$api.app.scoreShop.list({
-      list_rows,
-      page,
-    });
-    if (res.error === 0) {
-      let couponlist = _.concat(state.pagination.data, res.data.data);
-      state.pagination = {
-        ...res.data,
-        data: couponlist,
-      };
-      if (state.pagination.current_page < state.pagination.last_page) {
-        state.loadStatus = 'more';
-      } else {
-        state.loadStatus = 'noMore';
-      }
-    }
+  const sPointCardRef = ref();
+
+  // 查询活动列表
+  const activityPageParams = reactive({
+    pageNo: 1, // 页码
+    pageSize: 5, // 每页数量
+  });
+
+  const activityTotal = ref(0); // 活动总数
+  const activityCount = ref(0); // 已加载活动数量
+  const loadStatus = ref(''); // 页面加载状态
+  async function getActivityList() {
+    loadStatus.value = 'loading';
+    const { data } = await PointApi.getPointActivityPage(activityPageParams);
+    await sPointCardRef.value.concatActivity(data.list)
+    activityCount.value = sPointCardRef.value.getActivityCount()
+    activityTotal.value = data.total;
+
+    loadStatus.value = activityCount.value < activityTotal.value ? 'more' : 'noMore';
   }
+
   // 加载更多
-  function loadmore() {
+  function loadMore() {
     if (state.loadStatus !== 'noMore') {
-      getData(state.pagination.current_page + 1);
+      activityPageParams.pageNo += 1;
+      getActivityList();
     }
   }
 
   // 上拉加载更多
   onReachBottom(() => {
-    loadmore();
+    loadMore();
   });
   onLoad(() => {
-    getData();
+    getActivityList();
   });
 </script>