yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

营销：适配商城装修组件【菜单导航】

pull/14/head
owen 2023-11-09 09:18:45 +08:00
parent a40aa1218d
commit e4af437545
2 changed files with 11 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sheep/components/s-block-item/s-block-item.vue
View File

@ -5,7 +5,7 @@
<!-- 基础组件：公告栏 --> <!-- 基础组件：公告栏 -->
<s-notice-block v-if="type === 'NoticeBar'" :data="data" /> <s-notice-block v-if="type === 'NoticeBar'" :data="data" />
<!-- 基础组件：菜单导航 --> <!-- 基础组件：菜单导航 -->
<s-menu-button v-if="type === 'menuButton'" :data="data" :styles="styles" /> <s-menu-button v-if="type === 'MenuSwiper'" :data="data" :styles="styles" />
<!-- 基础组件：列表导航 --> <!-- 基础组件：列表导航 -->
<s-menu-list v-if="type === 'MenuList'" :data="data" /> <s-menu-list v-if="type === 'MenuList'" :data="data" />
<!-- 基础组件：宫格导航 --> <!-- 基础组件：宫格导航 -->

26
sheep/components/s-menu-button/s-menu-button.vue
View File

@ -21,12 +21,12 @@
:class="{ cur: state.cur == index }" :class="{ cur: state.cur == index }"
> >
<!-- 宫格 --> <!-- 宫格 -->
<view class="grid-wrap" :col="data.rowNum"> <view class="grid-wrap">
<view <view
v-for="(item, index) in arr" v-for="(item, index) in arr"
:key="index" :key="index"
class="grid-item ss-flex ss-flex-col ss-col-center ss-row-center" class="grid-item ss-flex ss-flex-col ss-col-center ss-row-center"
:style="[{ width: clWidth + 'px', height: '200rpx' }]" :style="[{ width: `${100 * (1 / data.column)}%`, height: '200rpx' }]"
hover-class="ss-hover-btn" hover-class="ss-hover-btn"
@tap="sheep.$router.go(item.url)" @tap="sheep.$router.go(item.url)"
> >
@ -34,12 +34,12 @@
<view <view
v-if="item.badge.show" v-if="item.badge.show"
class="tag-box" class="tag-box"
:style="[{ background: item.badge.bgColor, color: item.badge.color }]" :style="[{ background: item.badge.bgColor, color: item.badge.textColor }]"
> >
{{ item.badge.text }} {{ item.badge.text }}
</view> </view>
<image <image
v-if="item.src" v-if="item.iconUrl"
class="menu-icon" class="menu-icon"
:style="[ :style="[
{ {
@ -47,15 +47,15 @@
height: props.iconSize + 'rpx', height: props.iconSize + 'rpx',
}, },
]" ]"
:src="sheep.$url.cdn(item.src)" :src="sheep.$url.cdn(item.iconUrl)"
mode="aspectFill" mode="aspectFill"
></image> ></image>
<view <view
v-if="data.layout == 1" v-if="data.layout === 'iconText'"
class="menu-title" class="menu-title"
:style="[{ color: item.title.color }]" :style="[{ color: item.titleColor }]"
> >
{{ item.title.text }} {{ item.title }}
</view> </view>
</view> </view>
</view> </view>
@ -206,15 +206,9 @@
}); });
// 生成数据 // 生成数据
const menuList = computed(() => splitData(props.data.list, props.data.row * props.data.col)); const menuList = computed(() => splitData(props.data.list, props.data.row * props.data.column));
const swiperHeight = computed(() => props.data.row * (props.data.layout == 1 ? 200 : 180)); const swiperHeight = computed(() => props.data.row * (props.data.layout === 'iconText' ? 200 : 180));
const windowWidth = sheep.$platform.device.windowWidth; const windowWidth = sheep.$platform.device.windowWidth;
const clWidth = computed(
() =>
(windowWidth -
(props.styles.marginLeft + props.styles.marginRight + props.styles.padding * 2)) /
props.data.col,
);
// current 改变时会触发 change 事件 // current 改变时会触发 change 事件
const swiperChange = (e) => { const swiperChange = (e) => {