feat(uniapp): 首页楼层模板支持装修样式字段，修复 tpl_notice 样式缺少闭合括号

pages/tabbar/home/template/tpl_shop.vue

@@ -1,62 +1,357 @@
 <template>
   <view class="tpl-shop" :style="wrapperStyle" v-if="shopList.length">
-    <view class="shop-title" v-if="title">{{ title }}</view>
-    <view class="shop-grid">
+    <view class="shop-head" v-if="headIcon || title || moreUrl">
+      <image v-if="headIcon" class="shop-head-icon" :src="headIcon" mode="aspectFit" />
+      <view class="shop-title" :style="titleStyle">{{ title }}</view>
+      <view v-if="moreUrl" class="shop-more" :style="moreStyle" @click="goMore">更多 &gt;</view>
+    </view>
+
+    <!-- 老数据：两列网格 -->
+    <view v-if="!styled" class="shop-grid-legacy">
       <view
         class="shop-item"
         v-for="item in shopList"
         :key="item.id"
         @click="goShop(item)"
       >
-        <image class="shop-logo" :src="item.storeLogo" mode="aspectFill" />
-        <view class="shop-name">{{ item.storeName }}</view>
+        <image
+          v-if="showLogo"
+          class="shop-logo"
+          :src="item.storeLogo"
+          mode="aspectFill"
+        />
+        <view v-if="showName" class="shop-name">{{ item.storeName }}</view>
+      </view>
+    </view>
+
+    <!-- 样式一：店铺卡片（商品图背景 + Logo + 名称 + 类型标签） -->
+    <view v-else-if="shopStyle === 'one'" class="shop-grid">
+      <view
+        class="shop-card"
+        v-for="item in shopList"
+        :key="item.id"
+        @click="goShop(item)"
+      >
+        <image
+          v-if="(item.goodsImages && item.goodsImages.length) || item.storeBanner"
+          class="shop-card-bg"
+          :style="logoStyle"
+          :src="item.goodsImages && item.goodsImages.length ? item.goodsImages[0] : item.storeBanner"
+          mode="aspectFill"
+        />
+        <view v-else class="shop-card-bg shop-card-bg-empty" :style="logoStyle"></view>
+        <view class="shop-card-body">
+          <image
+            v-if="showLogo"
+            class="shop-card-logo"
+            :src="item.storeLogo"
+            mode="aspectFit"
+          />
+          <view v-if="showName" class="shop-card-name" :style="nameStyle">{{ item.storeName }}</view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 样式二：店铺卡片 + 商品列表 -->
+    <view v-else class="shop-street-list">
+      <view
+        class="shop-street-card"
+        v-for="item in shopList"
+        :key="item.id"
+        @click="goShop(item)"
+      >
+        <view class="shop-street-head">
+          <image v-if="showLogo" class="shop-street-logo" :src="item.storeLogo" mode="aspectFit" />
+          <view v-if="showName" class="shop-street-name" :style="nameStyle">{{ item.storeName }}</view>
+          <image
+            v-if="(item.goods && item.goods.length) || item.storeBanner"
+            class="shop-street-banner"
+            :style="logoStyle"
+            :src="item.goods && item.goods.length ? item.goods[0].img : item.storeBanner"
+            mode="aspectFill"
+          />
+        </view>
+        <view class="shop-street-goods">
+          <view
+            class="street-goods-item"
+            v-for="(g, gi) in item.goods || []"
+            :key="gi"
+          >
+            <image class="street-goods-img" :src="g.img" mode="aspectFill" />
+            <view class="street-goods-name">{{ g.name }}</view>
+            <view class="street-goods-price">
+              ¥{{ goodsFormatPrice(g.price)[0] }}.{{ goodsFormatPrice(g.price)[1] }}
+            </view>
+          </view>
+        </view>
       </view>
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
+import { ref, computed, watch } from "vue";
 import { getStoreList } from "@/api/store.js";
+import { getGoodsList } from "@/api/goods.js";
+import { goodsFormatPrice } from "@/utils/filters.js";
+import { modelNavigateTo } from "./tpl";
 
 const props = defineProps<{ res: any }>();
 
 const shopList = ref<any[]>([]);
 
-const title = computed(() => props.res?.list?.[0]?.title || "");
-const count = computed(() => props.res?.list?.[0]?.count || 4);
+const first = computed(() => props.res?.list?.[0] || {});
+const title = computed(() => first.value.title || "");
+const count = computed(() => first.value.count || 4);
+const headIcon = computed(() => first.value.icon || "");
+const moreUrl = computed(() => first.value.moreUrl || "");
+const showLogo = computed(() => first.value.showLogo !== false);
+const showName = computed(() => first.value.showName !== false);
+const shopStyle = computed(() => first.value.shopStyle || "one");
 
-const wrapperStyle = computed(() => ({
-  background: props.res?.bgColor || "#FFFFFF",
-  padding: `20rpx ${props.res?.paddingX ?? 0}rpx`,
-  marginBottom: `${props.res?.pageGap ?? 10}rpx`,
-  borderRadius: `${props.res?.borderRadius ?? 0}rpx`,
-  overflow: "hidden",
-}));
+// 面板保存过样式字段才启用自定义样式，老数据保持原样
+const styled = computed(() => props.res && props.res.paddingTop !== undefined);
+const wrapperStyle = computed(() => {
+  const res = props.res || {};
+  if (styled.value) {
+    const bg =
+      !res.bgColor2 || res.bgColor1 === res.bgColor2
+        ? res.bgColor1
+        : `linear-gradient(180deg, ${res.bgColor1}, ${res.bgColor2})`;
+    const radius = Number(res.borderRadius) || 0;
+    return {
+      background: bg,
+      padding: `${Number(res.paddingTop) || 0}rpx ${Number(res.paddingX) || 0}rpx ${Number(res.paddingBottom) || 0}rpx`,
+      marginBottom: `${Number(res.pageGap) || 0}rpx`,
+      borderRadius: `${radius}rpx`,
+      overflow: radius > 0 ? "hidden" : "visible",
+    };
+  }
+  return {
+    background: res.bgColor || "#FFFFFF",
+    padding: `20rpx ${res.paddingX ?? 0}rpx`,
+    marginBottom: `${res.pageGap ?? 10}rpx`,
+    borderRadius: `${res.borderRadius ?? 0}rpx`,
+    overflow: "hidden",
+  };
+});
+const titleStyle = computed(() =>
+  styled.value && props.res.titleColor ? { color: props.res.titleColor } : {}
+);
+const nameStyle = computed(() =>
+  styled.value && props.res.nameColor ? { color: props.res.nameColor } : {}
+);
+const moreStyle = computed(() =>
+  styled.value && props.res.moreColor ? { color: props.res.moreColor } : {}
+);
+const logoStyle = computed(() =>
+  styled.value ? { borderRadius: `${Number(props.res.imgRadius) || 0}rpx` } : {}
+);
 
-onMounted(() => {
-  getStoreList({ pageNumber: 1, pageSize: count.value }).then((res) => {
+async function loadShops() {
+  const item = first.value;
+  if (item.dataMode === "custom" && Array.isArray(item.shopList) && item.shopList.length) {
+    shopList.value = item.shopList;
+  } else {
+    const res = await getStoreList({ pageNumber: 1, pageSize: count.value });
     if (res.data.success && res.data.result) {
       shopList.value = (res.data.result.records || []).slice(0, count.value);
     }
+  }
+  loadGoodsImages();
+}
+
+// 样式二：按店铺拉取商品（图片、名称、价格）
+function loadGoodsImages() {
+  if (shopStyle.value !== "two") return;
+  shopList.value.forEach((shop: any, i: number) => {
+    getGoodsList({ storeId: shop.id, pageNumber: 1, pageSize: 3 }).then((res: any) => {
+      const records = res?.data?.result?.records || res?.data?.result || [];
+      const goods = (Array.isArray(records) ? records : [])
+        .map((g: any) => ({
+          name: g.goodsName,
+          price: g.price,
+          img: g.thumbnail || g.small || g.goodsImage,
+        }))
+        .filter((g: any) => g.img);
+      shopList.value[i].goods = goods;
+      shopList.value[i].goodsImages = goods.map((g: any) => g.img);
+    }).catch(() => {});
   });
-});
+}
+
+watch(
+  () => [first.value.dataMode, first.value.shopList, count.value],
+  () => loadShops(),
+  { immediate: true, deep: true }
+);
 
 function goShop(item: any) {
   uni.navigateTo({ url: `/pages/product/shopPage?id=${item.id}` });
 }
+
+function goMore() {
+  modelNavigateTo({ url: moreUrl.value });
+}
 </script>
 
 <style lang="scss" scoped>
-.shop-title {
-  font-size: 30rpx;
-  font-weight: 600;
+.shop-head {
+  display: flex;
+  align-items: center;
   padding: 8rpx 24rpx 20rpx;
 }
+.shop-head-icon {
+  width: 124rpx;
+  height: 32rpx;
+  flex-shrink: 0;
+  margin-right: 12rpx;
+}
+.shop-title {
+  flex: 1;
+  min-width: 0;
+  font-size: 30rpx;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.shop-more {
+  flex-shrink: 0;
+  font-size: 24rpx;
+  color: #999;
+}
+
+// 样式一：三列店铺卡片
 .shop-grid {
   display: flex;
   flex-wrap: wrap;
   padding: 0 24rpx;
+  gap: 16rpx;
+}
+.shop-card {
+  width: calc((100% - 32rpx) / 3);
+  border-radius: 12rpx;
+  overflow: hidden;
+  background: #f7f7f7;
+}
+.shop-card-bg {
+  width: 100%;
+  height: 140rpx;
+  display: block;
+  background: #eee;
+}
+.shop-card-bg-empty {
+  background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
+}
+.shop-card-body {
+  padding: 8rpx;
+  text-align: center;
+}
+.shop-card-logo {
+  position: relative;
+  z-index: 1;
+  display: block;
+  width: 96rpx;
+  height: 32rpx;
+  margin: -16rpx auto 0;
+  background: #fff;
+}
+.shop-card-name {
+  font-size: 24rpx;
+  color: #333;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-top: 6rpx;
+}
+// 样式二：店铺卡片 + 商品列表
+.shop-street-list {
+  padding: 0 24rpx;
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+.shop-street-card {
+  border-radius: 12rpx;
+  overflow: hidden;
+  background: #f7f7f7;
+}
+.shop-street-head {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 68rpx;
+  padding: 0 16rpx;
+  box-sizing: border-box;
+  background: var(--theme-primary, #ff3c2a);
+  overflow: hidden;
+}
+.shop-street-logo {
+  flex-shrink: 0;
+  width: 88rpx;
+  height: 32rpx;
+  padding: 2rpx 6rpx;
+  box-sizing: border-box;
+  background: #fff;
+  border-radius: 4rpx;
+}
+.shop-street-name {
+  max-width: calc(100% - 220rpx);
+  margin-left: 12rpx;
+  color: #fff;
+  font-size: 26rpx;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.shop-street-banner {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 160rpx;
+  height: 68rpx;
+}
+.shop-street-goods {
+  display: flex;
+  gap: 12rpx;
+  padding: 12rpx;
+  box-sizing: border-box;
+}
+.street-goods-item {
+  flex: 1;
+  min-width: 0;
+  border-radius: 8rpx;
+  overflow: hidden;
+  background: #fff;
+}
+.street-goods-img {
+  width: 100%;
+  height: 116rpx;
+  display: block;
+  background: #eee;
+}
+.street-goods-name {
+  padding: 8rpx 8rpx 0;
+  color: #282828;
+  font-size: 22rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.street-goods-price {
+  padding: 4rpx 8rpx 10rpx;
+  color: var(--theme-primary, #ff3c2a);
+  font-size: 22rpx;
+  font-weight: 600;
+}
+
+// 老数据两列网格（未配置样式时）
+.shop-grid-legacy {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 24rpx;
 }
 .shop-item {
   width: 50%;
@@ -68,10 +363,11 @@ function goShop(item: any) {
   width: 72rpx;
   height: 72rpx;
   border-radius: 50%;
-  background: #f0f0f0;
   flex-shrink: 0;
 }
 .shop-name {
+  flex: 1;
+  min-width: 0;
   font-size: 26rpx;
   color: #333;
   margin-left: 16rpx;