feat(uniapp): 新增首页组合组件 homeComb 并完善页面及楼层装修样式

pages/tabbar/home/index.vue

@@ -13,7 +13,7 @@
         :placeholder="index === 1 ? false : true"
         left-icon=""
         title=""
-        bg-color="#ffffff"
+        :bg-color="topColor"
       >
         <template #left>
           <view class="navbar-search-wrap" :style="searchBarStyle" @click.stop>
@@ -21,6 +21,7 @@
           </view>
         </template>
       </u-navbar>
+      <homeComb v-if="item.type == 'homeComb'" :res="item.options" />
       <carousel v-if="item.type == 'carousel'" :res="item.options" />
       <titleLayout v-if="item.type == 'title'" :res="item.options" />
       <leftOneRightTwo v-if="item.type == 'leftOneRightTwo'" :res="item.options" />
@@ -92,6 +93,7 @@ import integral from '@/pages/tabbar/home/template/tpl_integral.vue'
 import coupon from '@/pages/tabbar/home/template/tpl_coupon.vue'
 import articleList from '@/pages/tabbar/home/template/tpl_article.vue'
 import shopList from '@/pages/tabbar/home/template/tpl_shop.vue'
+import homeComb from '@/pages/tabbar/home/template/tpl_home_comb.vue'
 import { getFloorData } from '@/api/home'
 
 const HOME_LAYOUT_PADDING_RPX = 16
@@ -100,11 +102,13 @@ const store = useStore()
 const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const couponRef = ref<InstanceType<typeof fetchCoupon>>()
-const pageData = ref<{ list: any[] }>({ list: [] })
+const pageData = ref<Record<string, any>>({ list: [] })
 const enableLoad = ref(false)
 const loading = ref(false)
 const searchBarWidth = ref(0)
 
+const topColor = computed(() => pageData.value?.topColor || '#ffffff')
+
 // 页面设置-样式：画布背景（背景色 / 背景图 + 填充方式）
 const pageBgStyle = computed(() => {
   const data: any = pageData.value
@@ -175,6 +179,13 @@ function init() {
         if (result?.title) {
           uni.setNavigationBarTitle({ title: result.title })
         }
+        // 页面设置-样式：顶部颜色与标题颜色同步到导航栏
+        if (result?.topColor || result?.titleColor) {
+          uni.setNavigationBarColor({
+            frontColor: result?.titleColor === 'white' ? '#ffffff' : '#000000',
+            backgroundColor: result?.topColor || '#ffffff',
+          })
+        }
         const lastItem = pageData.value.list[pageData.value.list.length - 1]
         enableLoad.value =
           lastItem?.type === 'goods' || lastItem?.model === 'goods'

pages/tabbar/home/template/tpl_coupon.vue

@@ -43,6 +43,7 @@
         class="cp1-item"
         v-for="item in couponList"
         :key="item.id"
+        :style="itemGapStyle"
         @click="receive(item)"
       >
         <view class="cp1-left">
@@ -77,6 +78,7 @@
         class="cp2-item"
         v-for="item in couponList"
         :key="item.id"
+        :style="itemGapStyle"
         @click="receive(item)"
       >
         <view class="cp2-top">
@@ -107,6 +109,7 @@
         class="cp3-item"
         v-for="item in couponList"
         :key="item.id"
+        :style="itemGapStyle"
         @click="receive(item)"
       >
         <view class="cp3-left">
@@ -136,6 +139,7 @@
         class="cp4-item"
         v-for="item in couponList"
         :key="item.id"
+        :style="itemGapStyle"
         @click="receive(item)"
       >
         <view class="cp4-left">
@@ -177,6 +181,11 @@ const layoutStyle = computed(() => (props.res && props.res.layoutStyle) || "1");
 
 // 面板保存过样式字段才启用自定义样式，老数据保持原样
 const styled = computed(() => props.res && props.res.paddingTop !== undefined);
+const itemGapStyle = computed(() => {
+  if (!styled.value) return {};
+  const gap = props.res?.contentGap !== undefined ? Number(props.res.contentGap) || 0 : 5;
+  return { marginRight: `${gap}rpx` };
+});
 const wrapperStyle = computed(() => {
   const res = props.res || {};
   if (styled.value) {
@@ -291,6 +300,12 @@ function receive(item: any) {
 .cp-scroll {
   white-space: nowrap;
 }
+.cp1-item:last-child,
+.cp2-item:last-child,
+.cp3-item:last-child,
+.cp4-item:last-child {
+  margin-right: 0 !important;
+}
 .cp-notch {
   position: absolute;
   right: 60rpx;

pages/tabbar/home/template/tpl_flex_one.vue

@@ -26,13 +26,22 @@ const hasHotZone = computed(() => {
   return Array.isArray(zoneInfo) ? zoneInfo.length > 0 : !!zoneInfo;
 });
 
-const wrapperStyle = computed(() => ({
+const wrapperStyle = computed(() => {
-  background: props.res?.bgColor ?? "transparent",
+  const r = props.res || {};
-  padding: `${props.res?.paddingTop ?? 0}rpx ${props.res?.paddingX ?? 0}rpx ${props.res?.paddingBottom ?? 0}rpx`,
+  const bg =
-  marginBottom: `${props.res?.pageGap ?? 0}rpx`,
+    r.bgColor1 !== undefined
-  borderRadius: `${props.res?.borderRadius ?? 0}rpx`,
+      ? !r.bgColor2 || r.bgColor1 === r.bgColor2
-  overflow: (props.res?.borderRadius ?? 0) > 0 ? "hidden" : "visible",
+        ? r.bgColor1
-}));
+        : `linear-gradient(180deg, ${r.bgColor1}, ${r.bgColor2})`
+      : r.bgColor ?? "transparent";
+  return {
+    background: bg,
+    padding: `${r.paddingTop ?? 0}rpx ${r.paddingX ?? 0}rpx ${r.paddingBottom ?? 0}rpx`,
+    marginBottom: `${r.pageGap ?? 0}rpx`,
+    borderRadius: `${r.borderRadius ?? 0}rpx`,
+    overflow: (r.borderRadius ?? 0) > 0 ? "hidden" : "visible",
+  };
+});
 
 const contentStyle = computed(() => ({
   borderRadius: `${props.res?.imgRadius ?? 0}rpx`,

pages/tabbar/home/template/tpl_goods.vue

@@ -165,7 +165,7 @@ const nameStyle = computed(() =>
 const salesStyle = computed(() =>
   props.res?.salesColor ? { color: props.res.salesColor } : {}
 );
-const rpx = (v: any) => `${(Number(v) || 0) * 2}rpx`;
+const rpx = (v: any) => `${Number(v) || 0}rpx`;
 const wrapperStyle = computed(() => {
   const res = props.res || {};
   const bg =
@@ -175,11 +175,15 @@ const wrapperStyle = computed(() => {
   return {
     background: bg,
     padding: `${rpx(res.paddingTop)} ${rpx(res.paddingX)} ${rpx(res.paddingBottom)}`,
+    marginBottom: rpx(res.pageGap),
     borderRadius: rpx(res.borderRadius),
     overflow: Number(res.borderRadius) > 0 ? "hidden" : "visible",
   };
 });
-const listStyle = computed(() => ({ gap: rpx(props.res?.contentGap ?? 10) }));
+const listStyle = computed(() => {
+  const gap = rpx(props.res?.contentGap ?? 10);
+  return { gap, "--g-gap": gap };
+});
 const itemStyle = computed(() => ({
   borderRadius: rpx(props.res?.contentRadius ?? 7),
   overflow: Number(props.res?.contentRadius ?? 7) > 0 ? "hidden" : "visible",
@@ -242,14 +246,15 @@ async function loadNewGoods(reset = true) {
       sales: g.buyCount != null ? g.buyCount : null,
     }));
     if (reset) {
-      // 指定商品：按选择顺序排列
+      // 指定商品：按选择顺序排列（兼容 SKU id 与 goodsId）
       if (first.value.dataMode === "goods") {
-        const byGoodsId: Record<string, any> = {};
+        const byId: Record<string, any> = {};
         mapped.forEach((g: any) => {
-          byGoodsId[g.goodsId] = g;
+          if (g.id) byId[g.id] = g;
+          if (g.goodsId) byId[g.goodsId] = g;
         });
         newGoodsData.value = (first.value.goodsList || [])
-          .map((g: any) => byGoodsId[g.id])
+          .map((g: any) => byId[g.id] || byId[g.goodsId])
           .filter(Boolean);
       } else {
         newGoodsData.value = mapped;
@@ -479,41 +484,62 @@ $w_94: 94%;
 
 .cart-plus,
 .cart-cart {
-  width: 36rpx;
+  width: 48rpx;
-  height: 36rpx;
+  height: 48rpx;
   border-radius: 50%;
 }
 
 .cart-plus-label {
-  font-size: 28rpx;
+  font-size: 30rpx;
   line-height: 1;
 }
 
 .cart-text {
-  border-radius: 18rpx;
+  border-radius: 24rpx;
-  padding: 4rpx 18rpx;
+  padding: 6rpx 20rpx;
 }
 
 .cart-text-label {
-  font-size: 22rpx;
+  font-size: 24rpx;
 }
 
-/* 卡片：左图右文 */
+/* 卡片：左图右文（参考 CRMEB 详细列表，左侧 224rpx 缩略图，右侧标题置顶、价格销量置底） */
 .mode-card {
   flex-direction: column;
   .g-item {
     flex-direction: row;
-    align-items: center;
+    align-items: stretch;
-    padding: 16rpx;
+    padding: 20rpx;
   }
   .g-imgbox {
-    width: 140rpx;
+    width: 224rpx;
-    height: 140rpx;
+    height: 224rpx;
-    margin-right: 16rpx;
+    margin-right: 24rpx;
+    border-radius: 12rpx;
+    overflow: hidden;
+  }
+  .g-info {
+    min-height: 224rpx;
+    justify-content: space-between;
   }
   .g-name {
+    font-size: 28rpx;
+    font-weight: 500;
+    line-height: 40rpx;
+    margin-bottom: 12rpx;
+  }
+  .g-price {
+    font-size: 32rpx;
+    font-weight: 700;
+    margin-top: auto;
     margin-bottom: 8rpx;
   }
+  .g-bottom {
+    margin-top: 0;
+  }
+  .g-sales {
+    font-size: 24rpx;
+  }
   .g-cart {
     align-self: center;
   }
@@ -522,7 +548,7 @@ $w_94: 94%;
 /* 列表：两列网格 */
 .mode-list {
   .g-item {
-    width: calc(50% - 10rpx);
+    width: calc((100% - var(--g-gap, 10rpx)) / 2);
     flex-direction: column;
   }
   .g-imgbox {
@@ -541,7 +567,7 @@ $w_94: 94%;
 /* 三列 */
 .mode-three {
   .g-item {
-    width: calc(33.33% - 12rpx);
+    width: calc((100% - var(--g-gap, 10rpx) * 2) / 3);
     flex-direction: column;
   }
   .g-imgbox {

pages/tabbar/home/template/tpl_home_comb.vue

@@ -0,0 +1,497 @@
+<template>
+  <view class="tpl-home-comb" :style="wrapperStyle">
+    <!-- 高斯模糊轮播图背景 + 底部渐变遮罩 -->
+    <view class="comb-bg">
+      <image
+        v-if="currentBannerImg"
+        class="comb-bg-img"
+        :src="currentBannerImg"
+        mode="aspectFill"
+      />
+      <view class="comb-mask"></view>
+    </view>
+
+    <!-- 顶部状态栏占位（小程序/App） -->
+    <view v-if="statusBarHeight" :style="{ height: statusBarHeight + 'px' }"></view>
+
+    <!-- 1. 搜索栏 -->
+    <view class="comb-search-row" :style="searchRowStyle">
+      <image
+        v-if="res.searType === 'logo' && res.logoUrl"
+        class="comb-logo"
+        :src="res.logoUrl"
+        mode="aspectFit"
+      />
+      <view class="comb-search-box" :style="searchBoxStyle" @click="onSearchTap">
+        <u-icon name="search" :color="res.textColor || '#303133'" size="28rpx" />
+        <text class="comb-search-text">{{ displayHotWord }}</text>
+      </view>
+    </view>
+
+    <!-- 2. 分类选项卡 -->
+    <view v-if="res.showTabs !== false" class="comb-tabs-wrap">
+      <view class="comb-tabs">
+        <scroll-view scroll-x class="comb-tabs-scroll" :show-scrollbar="false">
+          <view class="comb-tabs-inner">
+            <view
+              v-for="(tab, idx) in displayTabs"
+              :key="idx"
+              class="comb-tab-item"
+              :class="{ active: activeTabIndex === idx }"
+              :style="{
+                color:
+                  activeTabIndex === idx
+                    ? res.tabActiveColor || '#E93323'
+                    : res.tabColor || '#FFFFFF',
+              }"
+              @click="onTabTap(tab, idx)"
+            >
+              <text>{{ tab.title || "未命名" }}</text>
+              <view
+                v-if="activeTabIndex === idx"
+                class="comb-tab-line"
+                :style="{ background: res.tabActiveColor || '#E93323' }"
+              ></view>
+            </view>
+          </view>
+        </scroll-view>
+        <view class="comb-tab-toggle" @click="showMoreTabs = !showMoreTabs">
+          <u-icon
+            :name="showMoreTabs ? 'arrow-up' : 'arrow-down'"
+            :color="res.tabColor || '#FFFFFF'"
+            size="28rpx"
+          />
+        </view>
+      </view>
+
+      <!-- 下拉展开全部分类面板 -->
+      <view v-if="showMoreTabs" class="comb-tabs-dropdown">
+        <view
+          v-for="(tab, idx) in displayTabs"
+          :key="idx"
+          class="dropdown-chip"
+          :class="{ active: activeTabIndex === idx }"
+          :style="
+            activeTabIndex === idx
+              ? {
+                  color: res.tabActiveColor || '#E93323',
+                  borderColor: res.tabActiveColor || '#E93323',
+                }
+              : {}
+          "
+          @click="onTabTap(tab, idx)"
+        >
+          {{ tab.title || "未命名" }}
+        </view>
+      </view>
+    </view>
+
+    <!-- 3. 轮播图区域 -->
+    <view
+      v-if="bannerList.length"
+      class="comb-banner"
+      :class="{ 'no-tabs': res.showTabs === false }"
+    >
+      <swiper
+        class="comb-swiper"
+        autoplay
+        :interval="4500"
+        :duration="500"
+        circular
+        :previous-margin="cardMode ? '48rpx' : '0rpx'"
+        :next-margin="cardMode ? '48rpx' : '0rpx'"
+        @change="onSwiperChange"
+      >
+        <swiper-item v-for="(item, i) in bannerList" :key="i">
+          <view
+            class="comb-slide-item"
+            :class="{ 'is-card': cardMode, active: i === currentSlide }"
+            @click="onBannerTap(item)"
+          >
+            <image
+              class="comb-slide-img"
+              :style="bannerImgStyle"
+              :src="item.img"
+              mode="scaleToFill"
+            />
+          </view>
+        </swiper-item>
+      </swiper>
+
+      <!-- 指示器 -->
+      <view
+        v-if="res.indicatorStyle !== 'none' && bannerList.length > 1"
+        class="comb-indicator"
+        :class="'pos-' + (res.indicatorPosition || 'center')"
+      >
+        <view
+          v-for="(item, i) in bannerList"
+          :key="i"
+          class="dot"
+          :class="[res.indicatorStyle || 'round', { active: i === currentSlide }]"
+          :style="
+            i === currentSlide
+              ? { background: res.indicatorColor || '#E93323' }
+              : {}
+          "
+        ></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
+import { modelNavigateTo } from "./tpl";
+
+const props = defineProps<{ res: any }>();
+
+const toRpx = (v: any) => `${Number(v) || 0}rpx`;
+
+// 状态栏与胶囊避让
+const statusBarHeight = ref(0);
+const capsuleRightPad = ref(0);
+
+onMounted(() => {
+  try {
+    const info = uni.getWindowInfo();
+    // #ifdef MP-WEIXIN || APP-PLUS
+    statusBarHeight.value = info.statusBarHeight || 0;
+    // #endif
+    // #ifdef MP-WEIXIN
+    const menu = uni.getMenuButtonBoundingClientRect();
+    capsuleRightPad.value = Math.max(0, info.windowWidth - menu.left + 8);
+    // #endif
+  } catch (e) {
+    statusBarHeight.value = 0;
+  }
+});
+
+// 搜索热词轮换
+const hotIndex = ref(0);
+let hotTimer: ReturnType<typeof setInterval> | null = null;
+const validHotWords = computed(() =>
+  (props.res?.hotWords || []).filter((w: string) => w && String(w).trim())
+);
+const displayHotWord = computed(() => {
+  if (validHotWords.value.length) {
+    return validHotWords.value[hotIndex.value % validHotWords.value.length];
+  }
+  return props.res?.placeWords || "搜索商品名称";
+});
+
+function stopHotTimer() {
+  if (hotTimer) {
+    clearInterval(hotTimer);
+    hotTimer = null;
+  }
+}
+
+watch(
+  () => [validHotWords.value.length, props.res?.hotInterval],
+  () => {
+    stopHotTimer();
+    hotIndex.value = 0;
+    if (validHotWords.value.length > 1) {
+      hotTimer = setInterval(() => {
+        hotIndex.value = (hotIndex.value + 1) % validHotWords.value.length;
+      }, (Number(props.res?.hotInterval) || 3) * 1000);
+    }
+  },
+  { immediate: true }
+);
+
+onBeforeUnmount(stopHotTimer);
+
+// 选项卡
+const activeTabIndex = ref(0);
+const showMoreTabs = ref(false);
+const displayTabs = computed(() => {
+  const custom = Array.isArray(props.res?.tabList) ? props.res.tabList : [];
+  return [{ title: "首页", isHome: true }, ...custom];
+});
+
+function onTabTap(tab: any, idx: number) {
+  activeTabIndex.value = idx;
+  showMoreTabs.value = false;
+  if (tab.isHome || !tab.value) return;
+  if (tab.dataType === "special") {
+    uni.navigateTo({
+      url: `/pages/tabbar/special/special?id=${tab.value}`,
+    });
+  } else if (tab.dataType === "category") {
+    uni.navigateTo({
+      url: `/pages/navigation/search/searchPage?category=${tab.value}`,
+    });
+  }
+}
+
+// 轮播图
+const currentSlide = ref(0);
+const bannerList = computed(() =>
+  Array.isArray(props.res?.list) ? props.res.list : []
+);
+const cardMode = computed(() => (props.res?.swiperStyle || "card") === "card");
+const currentBannerImg = computed(() => {
+  const list = bannerList.value;
+  if (!list.length) return "";
+  const item = list[currentSlide.value % list.length] || list[0];
+  return item?.img || "";
+});
+
+function onSwiperChange(e: any) {
+  currentSlide.value = e?.detail?.current ?? 0;
+}
+
+function onBannerTap(item: any) {
+  if (item) modelNavigateTo(item);
+}
+
+function onSearchTap() {
+  const keyword = validHotWords.value.length ? displayHotWord.value : "";
+  const query = keyword ? `?keyword=${encodeURIComponent(keyword)}` : "";
+  uni.navigateTo({
+    url: `/pages/navigation/search/searchPage${query}`,
+  });
+}
+
+// 样式计算
+const wrapperStyle = computed(() => ({
+  marginBottom: toRpx(props.res?.pageGap ?? 0),
+}));
+
+const searchRowStyle = computed(() =>
+  capsuleRightPad.value ? { paddingRight: `${capsuleRightPad.value}px` } : {}
+);
+
+const searchBoxStyle = computed(() => {
+  const r = props.res || {};
+  const align = r.textAlign || "left";
+  return {
+    background: r.boxColor || "#FFFFFF",
+    color: r.textColor || "#303133",
+    borderRadius: toRpx(r.searchRadius ?? 30),
+    justifyContent:
+      align === "center"
+        ? "center"
+        : align === "right"
+          ? "flex-end"
+          : "flex-start",
+  };
+});
+
+const bannerImgStyle = computed(() => ({
+  borderRadius: toRpx(props.res?.bannerRadius ?? 14),
+}));
+</script>
+
+<style lang="scss" scoped>
+.tpl-home-comb {
+  position: relative;
+  overflow: hidden;
+  padding: 16rpx 20rpx 20rpx;
+  box-sizing: border-box;
+}
+
+.comb-bg {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 0;
+  overflow: hidden;
+  background: linear-gradient(180deg, #e93323 0%, #f5f5f5 100%);
+  .comb-bg-img {
+    width: 100%;
+    height: 100%;
+    transform: scale(1.25);
+    filter: blur(40rpx);
+    display: block;
+  }
+  .comb-mask {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 180rpx;
+    background: linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #f5f5f5 100%);
+  }
+}
+
+.comb-search-row {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+}
+
+.comb-logo {
+  width: 138rpx;
+  height: 48rpx;
+  flex-shrink: 0;
+}
+
+.comb-search-box {
+  flex: 1;
+  min-width: 0;
+  height: 60rpx;
+  padding: 0 20rpx;
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  font-size: 24rpx;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.comb-search-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.comb-tabs-wrap {
+  position: relative;
+  z-index: 3;
+  margin-top: 8rpx;
+}
+
+.comb-tabs {
+  display: flex;
+  align-items: center;
+  height: 72rpx;
+}
+
+.comb-tabs-scroll {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+}
+
+.comb-tabs-inner {
+  display: inline-flex;
+  align-items: center;
+  gap: 32rpx;
+}
+
+.comb-tab-item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  height: 68rpx;
+  font-size: 26rpx;
+  white-space: nowrap;
+  &.active {
+    font-size: 28rpx;
+    font-weight: 600;
+  }
+  .comb-tab-line {
+    position: absolute;
+    left: 50%;
+    bottom: 4rpx;
+    transform: translateX(-50%);
+    width: 36rpx;
+    height: 4rpx;
+    border-radius: 4rpx;
+  }
+}
+
+.comb-tab-toggle {
+  flex-shrink: 0;
+  padding-left: 16rpx;
+  display: flex;
+  align-items: center;
+}
+
+.comb-tabs-dropdown {
+  background: #ffffff;
+  border-radius: 16rpx;
+  padding: 20rpx;
+  margin-top: 8rpx;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx;
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
+}
+
+.dropdown-chip {
+  padding: 8rpx 24rpx;
+  background: #f5f5f5;
+  border: 2rpx solid transparent;
+  border-radius: 8rpx;
+  font-size: 24rpx;
+  color: #333333;
+}
+
+.comb-banner {
+  position: relative;
+  z-index: 2;
+  margin-top: 12rpx;
+  height: 300rpx;
+  &.no-tabs {
+    margin-top: 20rpx;
+  }
+}
+
+.comb-swiper {
+  width: 100%;
+  height: 300rpx;
+}
+
+.comb-slide-item {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  &.is-card {
+    padding: 0 8rpx;
+    transform: scale(0.92);
+    transition: transform 0.35s ease;
+    &.active {
+      transform: scale(1);
+    }
+  }
+}
+
+.comb-slide-img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  overflow: hidden;
+}
+
+.comb-indicator {
+  position: absolute;
+  bottom: 16rpx;
+  display: flex;
+  align-items: center;
+  z-index: 3;
+  &.pos-left {
+    left: 32rpx;
+  }
+  &.pos-center {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  &.pos-right {
+    right: 32rpx;
+  }
+  .dot {
+    background: rgba(255, 255, 255, 0.65);
+    transition: all 0.25s ease;
+    &.round {
+      width: 12rpx;
+      height: 12rpx;
+      border-radius: 50%;
+      margin: 0 6rpx;
+    }
+    &.line {
+      width: 24rpx;
+      height: 6rpx;
+      border-radius: 4rpx;
+      margin: 0 4rpx;
+    }
+  }
+}
+</style>

pages/tabbar/home/template/tpl_integral.vue

@@ -36,7 +36,7 @@
       </view>
     </view>
     <!-- 样式一：两列大卡片 -->
-    <view v-else-if="layoutStyle === '1'" class="ig-grid2">
+    <view v-else-if="layoutStyle === '1'" class="ig-grid2" :style="gapStyle">
       <view
         class="ig-g2-item"
         v-for="(item, index) in goodsList"
@@ -46,7 +46,7 @@
         <view class="ig-g2-img-box" :style="imgRadiusStyle">
           <image class="ig-img" :src="item.goodsImage || item.thumbnail" mode="aspectFill" />
         </view>
-        <view class="ig-g2-name">{{ item.goodsName || item.promotionName || '' }}</view>
+        <view class="ig-g2-name" :style="nameStyle">{{ item.goodsName || item.promotionName || '' }}</view>
         <view class="ig-price-row">
           <view class="ig-price" :style="pointStyle">
             <text class="ig-coin">¥</text>{{ item.points != null ? item.points : 0 }}积分
@@ -56,7 +56,7 @@
       </view>
     </view>
     <!-- 样式二：三列，积分价在名称上方 -->
-    <view v-else-if="layoutStyle === '2'" class="ig-grid3">
+    <view v-else-if="layoutStyle === '2'" class="ig-grid3" :style="gapStyle">
       <view
         class="ig-g3-item"
         v-for="(item, index) in goodsList"
@@ -69,11 +69,11 @@
         <view class="ig-price ig-price-sm" :style="pointStyle">
           <text class="ig-coin ig-coin-sm">¥</text>{{ item.points != null ? item.points : 0 }}积分
         </view>
-        <view class="ig-g3-name">{{ item.goodsName || item.promotionName || '' }}</view>
+        <view class="ig-g3-name" :style="nameStyle">{{ item.goodsName || item.promotionName || '' }}</view>
       </view>
     </view>
     <!-- 样式三：三列，仅积分价 -->
-    <view v-else class="ig-grid3">
+    <view v-else class="ig-grid3" :style="gapStyle">
       <view
         class="ig-g3-item"
         v-for="(item, index) in goodsList"
@@ -136,7 +136,9 @@ const headStyle = computed(() => {
   const res = props.res;
   if (res.headBgType === "image" && res.headBgImage) {
     return {
-      backgroundImage: `url(${res.headBgImage});background-size:cover;background-position:center;`,
+      backgroundImage: `url(${res.headBgImage})`,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
     };
   }
   const bg =
@@ -162,9 +164,14 @@ const moreStyle = computed(() =>
 const pointStyle = computed(() =>
   styled.value && props.res.pointColor ? { color: props.res.pointColor } : {}
 );
-const gapStyle = computed(() =>
+const nameStyle = computed(() =>
-  styled.value ? { gap: `${Number(props.res.contentGap) || 0}rpx` } : {}
+  styled.value && props.res.nameColor ? { color: props.res.nameColor } : {}
 );
+const gapStyle = computed(() => {
+  if (!styled.value) return {};
+  const gap = `${Number(props.res.contentGap ?? 10) || 0}rpx`;
+  return { gap, "--ig-gap": gap };
+});
 const imgRadiusStyle = computed(() =>
   styled.value ? { borderRadius: `${Number(props.res.imgRadius) || 0}rpx`, overflow: "hidden" } : {}
 );
@@ -252,16 +259,14 @@ function goDetail(item: any) {
 .ig-grid2 {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
 }
 .ig-g2-item {
-  width: 49%;
+  width: calc((100% - var(--ig-gap, 10rpx)) / 2);
   background: #fff;
   border-radius: 16rpx;
   overflow: hidden;
   padding-bottom: 16rpx;
   box-sizing: border-box;
-  margin-bottom: 16rpx;
 }
 .ig-g2-img-box {
   width: 100%;
@@ -323,16 +328,14 @@ function goDetail(item: any) {
 .ig-grid3 {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
 }
 .ig-g3-item {
-  width: 32.5%;
+  width: calc((100% - var(--ig-gap, 10rpx) * 2) / 3);
   background: #fff;
   border-radius: 16rpx;
   overflow: hidden;
   padding-bottom: 16rpx;
   box-sizing: border-box;
-  margin-bottom: 16rpx;
 }
 .ig-g3-img-box {
   width: 100%;

pages/tabbar/special/special.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="wrapper">
+  <div class="wrapper" :style="pageBgStyle">
     <!-- uni 中不能使用 vue component 所以用if判断每个组件 -->
     <div v-for="(item, index) in pageData.list" :key="index">
       <!-- 搜索栏，如果在楼层装修顶部则会自动浮动，否则不浮动 -->
-      <div class="navbar" v-if="item.type == 'search'">
+      <div class="navbar" v-if="item.type == 'search'" :style="{ background: topColor }">
         <search style="width: 100%" :res="item.options" />
         <!-- #ifndef H5 -->
         <!-- 扫码功能 不兼容h5 详情文档: https://uniapp.dcloud.io/api/system/barcode?id=scancode -->
@@ -12,6 +12,7 @@
         </div>
         <!-- #endif -->
       </div>
+      <homeComb v-if="item.type == 'homeComb'" :res="item.options" />
       <carousel v-if="item.type == 'carousel'" :res="item.options" />
       <titleLayout v-if="item.type == 'title'" :res="item.options" />
       <leftOneRightTwo
@@ -56,7 +57,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import carousel from '@/pages/tabbar/home/template/tpl_banner'
 import titleLayout from '@/pages/tabbar/home/template/tpl_title'
@@ -84,6 +85,7 @@ import integral from '@/pages/tabbar/home/template/tpl_integral'
 import coupon from '@/pages/tabbar/home/template/tpl_coupon'
 import articleList from '@/pages/tabbar/home/template/tpl_article'
 import shopList from '@/pages/tabbar/home/template/tpl_shop'
+import homeComb from '@/pages/tabbar/home/template/tpl_home_comb.vue'
 import { toSpecial, getSpecial } from '@/api/home'
 import permision from '@/js_sdk/wa-permission/permission.js'
 import config from '@/config/config'
@@ -93,6 +95,42 @@ const pageData = ref<any>('')
 const bodyParam = ref('')
 const isIos = ref('')
 
+const topColor = computed(() => pageData.value?.topColor || '#ffffff')
+const pageBgStyle = computed(() => {
+  const data: any = pageData.value
+  if (data?.bgType === 'image' && data?.bgImage) {
+    const size =
+      data.bgFill === 'contain'
+        ? 'contain'
+        : data.bgFill === 'cover'
+          ? 'cover'
+          : '100% 100%'
+    return {
+      backgroundImage: `url(${data.bgImage})`,
+      backgroundSize: size,
+      backgroundRepeat: 'no-repeat',
+      backgroundColor: data.bgColor || '#f9f9f9',
+    }
+  }
+  if (data?.bgColor) {
+    return { backgroundColor: data.bgColor }
+  }
+  return {}
+})
+
+function applyPageSettings(parsed: any) {
+  if (!parsed) return
+  if (parsed.title) {
+    uni.setNavigationBarTitle({ title: parsed.title })
+  }
+  if (parsed.topColor || parsed.titleColor) {
+    uni.setNavigationBarColor({
+      frontColor: parsed.titleColor === 'white' ? '#ffffff' : '#000000',
+      backgroundColor: parsed.topColor || '#ffffff',
+    })
+  }
+}
+
 onMounted(() => {
   init()
   // #ifdef MP-WEIXIN
@@ -116,6 +154,7 @@ function init() {
           parsed.list = parsed.list.filter((i: any) => !i?.hidden)
         }
         pageData.value = parsed
+        applyPageSettings(parsed)
       }
     })
   } else {
@@ -126,6 +165,7 @@ function init() {
           parsed.list = parsed.list.filter((i: any) => !i?.hidden)
         }
         pageData.value = parsed
+        applyPageSettings(parsed)
       }
     })
   }