mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2026-11-10 02:48:53 +08:00
2d4a316129
- 将所有模板组件的 pageGap/marginBottom 默认值从 10rpx 调整为 0 - 重构店铺卡片样式一为全景大片橱窗布局，添加自营标签与图片加载容错 - 重构店铺卡片样式二为大牌名店街 + 精品橱窗风格，优化商品封面与价格展示 - 促销详情模板添加 isRealGoods 过滤，无有效数据时整块不渲染 - 修复 u-notice-bar 横向滚动模式下 text 需为字符串的类型兼容问题 - 统一将模板中 HTML 实体 > 改为插值表达式避免转义异常
115 lines
2.9 KiB
Vue
115 lines
2.9 KiB
Vue
<template>
|
||
<view class="layout" :class="{ styled: styled }" v-if="texts.length" :style="wrapperStyle">
|
||
<view class="notice-bar">
|
||
<image
|
||
v-if="styled && item.img"
|
||
class="notice-icon"
|
||
:src="item.img"
|
||
mode="aspectFit"
|
||
/>
|
||
<view class="notice-body" :style="{ textAlign: alignValue }">
|
||
<u-notice-bar
|
||
:direction="directionValue"
|
||
:bg-color="styled ? 'transparent' : item.bk_color"
|
||
:color="item.color"
|
||
:text="noticeText"
|
||
@click="clickNotice"
|
||
></u-notice-bar>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed } from "vue";
|
||
import { modelNavigateTo } from "./tpl";
|
||
|
||
const props = defineProps<{ res: any }>();
|
||
|
||
const item = computed(() => props.res?.list?.[0] || {});
|
||
|
||
// 面板保存过样式字段才启用自定义样式，老数据保持原样
|
||
const styled = computed(() => props.res && props.res.paddingX !== undefined);
|
||
|
||
const wrapperStyle = computed(() => {
|
||
const res = props.res || {};
|
||
if (!styled.value) return {};
|
||
const bg =
|
||
!res.bgColor2 || res.bgColor1 === res.bgColor2
|
||
? res.bgColor1
|
||
: `linear-gradient(180deg, ${res.bgColor1}, ${res.bgColor2})`;
|
||
const radius = Number(res.borderRadius) || 0;
|
||
return {
|
||
padding: `${Number(res.paddingTop) || 0}rpx ${Number(res.paddingX) || 0}rpx ${Number(res.paddingBottom) || 0}rpx`,
|
||
background: bg,
|
||
borderRadius: `${radius}rpx`,
|
||
marginBottom: `${Number(res.pageGap) || 0}rpx`,
|
||
overflow: radius > 0 ? "hidden" : "visible",
|
||
};
|
||
});
|
||
|
||
const directionValue = computed(() =>
|
||
styled.value && item.value.direction === "horizontal" ? "row" : "column"
|
||
);
|
||
const alignValue = computed(() =>
|
||
styled.value ? item.value.textAlign || "left" : "left"
|
||
);
|
||
|
||
const titleList = computed(() => {
|
||
const titles = item.value?.title;
|
||
if (!Array.isArray(titles)) return [];
|
||
return titles.filter(
|
||
(t: any) => t && t.context != null && String(t.context).length > 0
|
||
);
|
||
});
|
||
|
||
const texts = computed(() =>
|
||
titleList.value.map((t: any) => String(t.context))
|
||
);
|
||
|
||
// uView-plus 的 notice-bar 在横向滚动（direction="row"）时要求 text 为字符串，竖向（column）可为数组
|
||
const noticeText = computed(() => {
|
||
if (directionValue.value === "row") {
|
||
return texts.value.join(" ");
|
||
}
|
||
return texts.value;
|
||
});
|
||
|
||
function clickNotice(index?: number) {
|
||
const target =
|
||
typeof index === "number"
|
||
? titleList.value[index] || titleList.value[0]
|
||
: titleList.value[0];
|
||
if (target && target.url) {
|
||
modelNavigateTo(target);
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import "./tpl.scss";
|
||
.layout {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 84rpx;
|
||
background: #ffffff;
|
||
}
|
||
.layout.styled {
|
||
height: auto;
|
||
}
|
||
.notice-bar {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.notice-icon {
|
||
width: 130rpx;
|
||
height: 36rpx;
|
||
flex-shrink: 0;
|
||
margin: 0 16rpx;
|
||
}
|
||
.notice-body {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
</style>
|