feat(uniapp): 启用积分商城楼层组件（翻新为view/rpx并接入样式配置）

pages/product/shopPage.vue

@@ -191,7 +191,7 @@
 
           <group v-if="item.type == 'group'" :res="item.options" />
           <!-- <joinGroup v-if="item.type == 'joinGroup'" :res="item.options" /> -->
-          <!-- <integral v-if="item.type == 'integral'" :res="item.options" /> -->
+          <integral v-if="item.type == 'integral'" :res="item.options" />
           <!-- <spike v-if="item.type == 'spike'" :res="item.options" /> -->
           <blank v-if="item.type == 'blank'" :res="item.options" />
           <lineLayout v-if="item.type == 'line'" :res="item.options" />
@@ -231,6 +231,7 @@ import GoodsFloor from '@/pages/tabbar/home/template/tpl_goods.vue'
 import blank from '@/pages/tabbar/home/template/tpl_blank.vue'
 import lineLayout from '@/pages/tabbar/home/template/tpl_line.vue'
 import richText from '@/pages/tabbar/home/template/tpl_rich_text.vue'
+import integral from '@/pages/tabbar/home/template/tpl_integral.vue'
 import goodsTemplate from '@/components/m-goods-list/list.vue'
 import { getStoreBaseInfo, getStoreCategory } from '@/api/store.js'
 import {

pages/tabbar/home/index.vue

@@ -46,6 +46,7 @@
       <blank v-if="item.type == 'blank'" :res="item.options" />
       <lineLayout v-if="item.type == 'line'" :res="item.options" />
       <richText v-if="item.type == 'richText'" :res="item.options" />
+      <integral v-if="item.type == 'integral'" :res="item.options" />
     </view>
     <fetchCoupon ref="couponRef" />
   </view>
@@ -84,6 +85,7 @@ import fetchCoupon from '@/pages/tabbar/home/template/fetch_coupon.vue'
 import blank from '@/pages/tabbar/home/template/tpl_blank.vue'
 import lineLayout from '@/pages/tabbar/home/template/tpl_line.vue'
 import richText from '@/pages/tabbar/home/template/tpl_rich_text.vue'
+import integral from '@/pages/tabbar/home/template/tpl_integral.vue'
 import { getFloorData } from '@/api/home'
 
 const HOME_LAYOUT_PADDING_RPX = 16

pages/tabbar/home/template/tpl_integral.vue

@@ -1,54 +1,62 @@
 <template>
-  <div class="layout" v-if="goodsList.length">
+  <view class="layout" :style="wrapperStyle" v-if="goodsList.length">
-    <div class="join-list">
+    <view class="join-list">
-      <div class="join-title" @click="goMore">
+      <view class="join-title" @click="goMore">
-        <div class="join-title-name">{{ res.list[0].title }}</div>
+        <view class="join-title-name">{{ title }}</view>
-        <div class="join-title-more">更多</div>
+        <view class="join-title-more">更多</view>
-      </div>
+      </view>
-      <div class="join-box">
+      <view class="join-box">
-        <div
+        <view
           class="join-item"
           @click="goDetail(item)"
           v-for="(item, index) in goodsList"
           :key="index"
         >
-          <div class="item-img-box">
+          <view class="item-img-box">
             <u-image
               class="item-img"
               width="150rpx"
               height="150rpx"
               :src="item.goodsImage || item.thumbnail"
             />
-          </div>
+          </view>
-          <div class="item-price">
+          <view class="item-price">
             <span class="price-text">{{ item.points != null ? item.points : 0 }}积分</span>
-          </div>
+          </view>
-          <div class="item-line-through" v-if="item.originalPrice">
+          <view class="item-line-through" v-if="item.originalPrice">
             <span class="price-text">￥{{ item.originalPrice }}</span>
-          </div>
+          </view>
-        </div>
+        </view>
-      </div>
+      </view>
-    </div>
+    </view>
-  </div>
+  </view>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, computed, onMounted } from "vue";
 import * as API_Promotions from "@/api/promotions";
 
 const props = defineProps<{ res: any }>();
 
 const goodsList = ref<any[]>([]);
 
+const title = computed(() => props.res?.list?.[0]?.title || "积分商城");
+const count = computed(() => props.res?.list?.[0]?.count || 3);
+
+const wrapperStyle = computed(() => ({
+  background: props.res?.bgColor || "#FFFFFF",
+  padding: `0 ${props.res?.paddingX ?? 0}rpx`,
+  marginBottom: `${props.res?.pageGap ?? 10}rpx`,
+  borderRadius: `${props.res?.borderRadius ?? 0}rpx`,
+  overflow: "hidden",
+}));
+
 onMounted(() => {
   API_Promotions.getPointsGoods({
     pageNumber: 1,
-    pageSize: props.res.list[0].count || 3,
+    pageSize: count.value,
   }).then((res) => {
     if (res.data.success && res.data.result && res.data.result.records) {
-      goodsList.value = res.data.result.records.slice(
+      goodsList.value = res.data.result.records.slice(0, count.value);
-        0,
-        props.res.list[0].count || 3
-      );
     }
   });
 });
@@ -68,7 +76,7 @@ function goDetail(item: any) {
 }
 .item-price {
   .price-text {
-    font-size: 15px;
+    font-size: 30rpx;
     font-weight: 500;
     color: $main-color;
   }
@@ -77,18 +85,12 @@ function goDetail(item: any) {
   flex: 1;
   text-align: center;
 }
-.item-img {
-  width: 75px;
-  height: 75px;
-  margin: 0 auto;
-  display: block;
-}
 .item-img-box {
   position: relative;
 }
 .item-line-through {
   .price-text {
-    font-size: 10px;
+    font-size: 20rpx;
     font-weight: 400;
     text-decoration: line-through;
     color: #999;
@@ -99,13 +101,14 @@ function goDetail(item: any) {
   justify-content: space-between;
   align-items: center;
   background: #fff;
-  height: 50px;
+  height: 100rpx;
+  padding: 0 20rpx;
   .join-title-name {
-    font-size: 16px;
+    font-size: 32rpx;
     font-weight: bold;
   }
   .join-title-more {
-    font-size: 12px;
+    font-size: 24rpx;
     color: #999;
   }
 }

pages/tabbar/special/special.vue

@@ -41,7 +41,7 @@
       <group v-if="item.type == 'group'" :res="item.options" />
       <notice v-if="item.type == 'notice'" :res="item.options" />
       <promotions v-if="item.type == 'promotionDetail'" :res="item.options" />
-      <!-- <integral v-if="item.type == 'integral'" :res="item.options" /> -->
+      <integral v-if="item.type == 'integral'" :res="item.options" />
       <!-- <spike v-if="item.type == 'spike'" :res="item.options" /> -->
       <videoLayout v-if="item.type == 'video'" :res="item.options" />
       <blank v-if="item.type == 'blank'" :res="item.options" />
@@ -77,6 +77,7 @@ import promotions from '@/pages/tabbar/home/template/tpl_promotions_detail'
 import blank from '@/pages/tabbar/home/template/tpl_blank'
 import lineLayout from '@/pages/tabbar/home/template/tpl_line'
 import richText from '@/pages/tabbar/home/template/tpl_rich_text'
+import integral from '@/pages/tabbar/home/template/tpl_integral'
 import { toSpecial, getSpecial } from '@/api/home'
 import permision from '@/js_sdk/wa-permission/permission.js'
 import config from '@/config/config'