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

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';

sheep/components/s-point-card/s-point-card.vue

@@ -4,7 +4,7 @@
   <view>
     <!-- 布局1. 单列大图（上图，下内容）-->
     <view
-      v-if="layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.spuList.length"
+      v-if="state.property.layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.spuList.length"
       class="goods-sl-box"
     >
       <view
@@ -28,7 +28,7 @@
           <!-- 购买按钮 -->
           <template v-slot:cart>
             <button class="ss-reset-button cart-btn" :style="[buyStyle]">
-              {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
+              {{ state.property.btnBuy.type === 'text' ? state.property.btnBuy.text : '' }}
             </button>
           </template>
         </s-goods-column>
@@ -37,7 +37,7 @@
 
     <!-- 布局2. 单列小图（左图，右内容） -->
     <view
-      v-if="layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.spuList.length"
+      v-if="state.property.layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.spuList.length"
       class="goods-lg-box"
     >
       <view
@@ -61,7 +61,7 @@
           <!-- 购买按钮 -->
           <template v-slot:cart>
             <button class="ss-reset-button cart-btn" :style="[buyStyle]">
-              {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
+              {{ state.property.btnBuy.type === 'text' ? state.property.btnBuy.text : '' }}
             </button>
           </template>
         </s-goods-column>
@@ -70,7 +70,7 @@
 
     <!-- 布局3. 双列（每一列：上图，下内容）-->
     <view
-      v-if="layoutType === LayoutTypeEnum.TWO_COL && state.spuList.length"
+      v-if="state.property.layoutType === LayoutTypeEnum.TWO_COL && state.spuList.length"
       class="goods-md-wrap ss-flex ss-flex-wrap ss-col-top"
     >
       <view class="goods-list-box">
@@ -97,7 +97,7 @@
             <!-- 购买按钮 -->
             <template v-slot:cart>
               <button class="ss-reset-button cart-btn" :style="[buyStyle]">
-                {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
+                {{ state.property.btnBuy.type === 'text' ? state.property.btnBuy.text : '' }}
               </button>
             </template>
           </s-goods-column>
@@ -127,7 +127,7 @@
             <!-- 购买按钮 -->
             <template v-slot:cart>
               <button class="ss-reset-button cart-btn" :style="[buyStyle]">
-                {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
+                {{ state.property.btnBuy.type === 'text' ? state.property.btnBuy.text : '' }}
               </button>
             </template>
           </s-goods-column>
@@ -141,7 +141,7 @@
   /**
    * 商品卡片
    */
-  import { computed, onMounted, reactive, watch } from 'vue';
+  import { computed, nextTick, onMounted, reactive, watch } from 'vue';
   import sheep from '@/sheep';
   import SpuApi from '@/sheep/api/product/spu';
   import { PromotionActivityTypeEnum } from '@/sheep/util/const';
@@ -222,23 +222,22 @@
   watch(() => props.property, (newVal) => {
     state.property = { ...state.property, ...newVal };
   }, { immediate: true, deep: true });
-  const { layoutType, btnBuy } = state.property || {};
-  const { marginLeft, marginRight } = state.styles || {};
+  const { marginLeft, marginRight } = state.property.styles || {};
 
   // 购买按钮样式
   const buyStyle = computed(() => {
-    if (btnBuy.type === 'text') {
+    if (state.property.btnBuy.type === 'text') {
       // 文字按钮：线性渐变背景颜色
       return {
-        background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,
+        background: `linear-gradient(to right, ${state.property.btnBuy.bgBeginColor}, ${state.property.btnBuy.bgEndColor})`,
       };
     }
-    if (btnBuy.type === 'img') {
+    if (state.property.btnBuy.type === 'img') {
       // 图片按钮
       return {
         width: '54rpx',
         height: '54rpx',
-        background: `url(${sheep.$url.cdn(btnBuy.imgUrl)}) no-repeat`,
+        background: `url(${sheep.$url.cdn(state.property.btnBuy.imgUrl)}) no-repeat`,
         backgroundSize: '100% 100%',
       };
     }
@@ -309,20 +308,16 @@
         spu.activityType = PromotionActivityTypeEnum.POINT.type;
       }
     });
-  }
-  function getActivityCount() {
-    return state.spuList.length;
-  }
-  defineExpose({ concatActivity,getActivityCount });
-
-  // 初始化
-  onMounted(async () => {
     // 只有双列布局时需要
-    if (layoutType === LayoutTypeEnum.TWO_COL) {
+    if (state.property.layoutType === LayoutTypeEnum.TWO_COL) {
       // 分列
       calculateGoodsColumn();
     }
-  });
+  }
+  function getActivityCount() {
+    return state.spuList.length;
+  }
+  defineExpose({ concatActivity,getActivityCount,calculateGoodsColumn });
 </script>
 
 <style lang="scss" scoped>