mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2026-11-06 17:09:01 +08:00
feat(uniapp): 新增辅助空白/辅助线/富文本楼层渲染
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -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
|
||||
|
||||
15
pages/tabbar/home/template/tpl_blank.vue
Normal file
15
pages/tabbar/home/template/tpl_blank.vue
Normal file
@@ -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>
|
||||
21
pages/tabbar/home/template/tpl_line.vue
Normal file
21
pages/tabbar/home/template/tpl_line.vue
Normal file
@@ -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>
|
||||
26
pages/tabbar/home/template/tpl_rich_text.vue
Normal file
26
pages/tabbar/home/template/tpl_rich_text.vue
Normal file
@@ -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>
|
||||
@@ -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'
|
||||
|
||||
Reference in New Issue
Block a user