feat(uniapp): 新增辅助空白/辅助线/富文本楼层渲染

pages/product/shopPage.vue

@@ -193,6 +193,9 @@
           <!-- <joinGroup v-if="item.type == 'joinGroup'" :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" />
+          <richText v-if="item.type == 'richText'" :res="item.options" />
         </view>
       </view>
       <u-no-network></u-no-network>
@@ -225,6 +228,9 @@ import menuLayout from '@/pages/tabbar/home/template/tpl_menu.vue'
 import search from '@/pages/tabbar/home/template/tpl_search.vue'
 import group from '@/pages/tabbar/home/template/tpl_group.vue'
 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 goodsTemplate from '@/components/m-goods-list/list.vue'
 import { getStoreBaseInfo, getStoreCategory } from '@/api/store.js'
 import {

pages/tabbar/home/index.vue

@@ -43,6 +43,9 @@
       <notice v-if="item.type == 'notice'" :res="item.options" />
       <promotions v-if="item.type == 'promotionDetail'" :res="item.options" />
       <videoLayout v-if="item.type == 'video'" :res="item.options" />
+      <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" />
     </view>
     <fetchCoupon ref="couponRef" />
   </view>
@@ -78,6 +81,9 @@ import goods from '@/pages/tabbar/home/template/tpl_goods.vue'
 import notice from '@/pages/tabbar/home/template/tpl_notice.vue'
 import promotions from '@/pages/tabbar/home/template/tpl_promotions_detail.vue'
 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 { getFloorData } from '@/api/home'
 
 const HOME_LAYOUT_PADDING_RPX = 16

pages/tabbar/home/template/tpl_blank.vue

@@ -0,0 +1,15 @@
+<template>
+  <view class="tpl-blank" :style="blankStyle"></view>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{ res: any }>();
+
+const blankStyle = computed(() => ({
+  background: props.res?.bgColor || "#f5f5f5",
+  height: `${props.res?.height ?? 10}rpx`,
+  margin: `0 ${props.res?.paddingX ?? 0}rpx ${props.res?.pageGap ?? 10}rpx`,
+}));
+</script>

pages/tabbar/home/template/tpl_line.vue

@@ -0,0 +1,21 @@
+<template>
+  <view class="tpl-line" :style="wrapperStyle">
+    <view :style="lineStyle"></view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{ res: any }>();
+
+const wrapperStyle = computed(() => ({
+  background: props.res?.bgColor || "#FFFFFF",
+  padding: `0 ${props.res?.paddingX ?? 0}rpx`,
+  marginBottom: `${props.res?.pageGap ?? 10}rpx`,
+}));
+
+const lineStyle = computed(() => ({
+  borderTop: `${props.res?.lineHeight ?? 1}rpx ${props.res?.lineStyle || "dashed"} ${props.res?.lineColor || "#979797"}`,
+}));
+</script>

pages/tabbar/home/template/tpl_rich_text.vue

@@ -0,0 +1,26 @@
+<template>
+  <view class="tpl-rich-text" :style="wrapperStyle">
+    <rich-text :nodes="processedHtml"></rich-text>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{ res: any }>();
+
+const wrapperStyle = computed(() => ({
+  background: props.res?.bgColor || "#FFFFFF",
+  padding: `0 ${props.res?.paddingX ?? 12}rpx`,
+  marginBottom: `${props.res?.pageGap ?? 10}rpx`,
+  borderRadius: `${props.res?.borderRadius ?? 0}rpx`,
+  overflow: "hidden",
+}));
+
+// 防止富文本内图片超宽撑破布局
+const processedHtml = computed(() => {
+  const html = props.res?.content;
+  if (!html) return "";
+  return String(html).replace(/<img/gi, '<img style="max-width:100%;height:auto;"');
+});
+</script>

pages/tabbar/special/special.vue

@@ -44,6 +44,9 @@
       <!-- <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" />
+      <lineLayout v-if="item.type == 'line'" :res="item.options" />
+      <richText v-if="item.type == 'richText'" :res="item.options" />
     </div>
     <u-no-network></u-no-network>
   </div>
@@ -71,6 +74,9 @@ import videoLayout from '@/pages/tabbar/home/template/tpl_video'
 import goods from '@/pages/tabbar/home/template/tpl_goods'
 import notice from '@/pages/tabbar/home/template/tpl_notice'
 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 { toSpecial, getSpecial } from '@/api/home'
 import permision from '@/js_sdk/wa-permission/permission.js'
 import config from '@/config/config'