【功能完善】积分商城：完善活动列表布局切换

pages/activity/point/list.vue

@@ -1,6 +1,18 @@
 <!-- 页面  -->
 <template>
   <s-layout title="积分商城" navbar="normal" :leftWidth="0" :rightWidth="0">
+    <!-- 筛选 -->
+    <su-sticky bgColor="#fff">
+      <view class="ss-flex">
+        <view class="ss-flex-1">
+
+        </view>
+        <view class="list-icon" @tap="iconStatus = !iconStatus">
+          <text v-if="iconStatus" class="sicon-goods-list" />
+          <text v-else class="sicon-goods-card" />
+        </view>
+      </view>
+    </su-sticky>
     <scroll-view
       class="scroll-box"
       :style="{ height: pageHeight + 'rpx' }"
@@ -8,7 +20,7 @@
       :scroll-with-animation="false"
       :enable-back-to-top="true"
     >
-      <s-point-card ref="sPointCardRef" :property="sPointCardData" />
+      <s-point-card ref="sPointCardRef" :property="sPointCardData" class="ss-p-x-20 ss-m-t-20"/>
       <s-empty
         v-if="activityTotal === 0"
         icon="/static/goods-empty.png"
@@ -28,7 +40,7 @@
 <script setup>
   import sheep from '@/sheep';
   import { onLoad, onReachBottom } from '@dcloudio/uni-app';
-  import { reactive, ref } from 'vue';
+  import { computed, reactive, ref } from 'vue';
   import PointApi from '@/sheep/api/promotion/point';
   import SLayout from '@/sheep/components/s-layout/s-layout.vue';
 
@@ -39,10 +51,31 @@
     (safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sheep.$platform.navbar - 350;
 
   const sPointCardData = ref({
-    'layoutType': 'oneColBigImg',
+    'layoutType': 'twoCol',
   });
+  // 布局类型
+  const LayoutTypeEnum = {
+    // 单列大图
+    ONE_COL_BIG_IMG: 'oneColBigImg',
+    // 双列
+    TWO_COL: 'twoCol',
+  };
   const sPointCardRef = ref();
-
+  // true - 单列布局；false - 双列布局
+  const iconStatus = computed({
+    get() {
+      return sPointCardData.value.layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG;
+    },
+    set(newValue) {
+      newValue ? (sPointCardData.value.layoutType = LayoutTypeEnum.ONE_COL_BIG_IMG) :
+        (sPointCardData.value.layoutType = LayoutTypeEnum.TWO_COL);
+      // 只有双列布局时需要
+      if (sPointCardData.value.layoutType === LayoutTypeEnum.TWO_COL) {
+        // 分列
+        sPointCardRef.value.calculateGoodsColumn();
+      }
+    },
+  });
   // 查询活动列表
   const activityPageParams = reactive({
     pageNo: 1, // 页码
@@ -55,8 +88,8 @@
   async function getActivityList() {
     loadStatus.value = 'loading';
     const { data } = await PointApi.getPointActivityPage(activityPageParams);
-    await sPointCardRef.value.concatActivity(data.list)
-    activityCount.value = sPointCardRef.value.getActivityCount()
+    await sPointCardRef.value.concatActivity(data.list);
+    activityCount.value = sPointCardRef.value.getActivityCount();
     activityTotal.value = data.total;
 
     loadStatus.value = activityCount.value < activityTotal.value ? 'more' : 'noMore';