140 lines
4.2 KiB
Vue
140 lines
4.2 KiB
Vue
<!-- +----------------------------------------------------------------------
|
||
| 麦沃德科技赋能开发者，助力商协会发展
|
||
+----------------------------------------------------------------------
|
||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||
+----------------------------------------------------------------------
|
||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||
+----------------------------------------------------------------------
|
||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||
+----------------------------------------------------------------------
|
||
| 组件-导航组 开发者: 麦沃德科技-半夏
|
||
+---------------------------------------------------------------------- -->
|
||
|
||
<template>
|
||
<view class="diy-nav" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
|
||
<block v-if="!showStyle.rowsLimit || showStyle.rowsLimit == -1">
|
||
<menu-diy :showStyle="showStyle" :showData="showData" :domain="domain" @onClick="onClick"></menu-diy>
|
||
</block>
|
||
<block v-else-if="menuList.length == 1">
|
||
<menu-diy :showStyle="showStyle" :showData="menuList[0]" :domain="domain" @onClick="onClick"></menu-diy>
|
||
</block>
|
||
<block v-else>
|
||
<swiper :style="{height: carouselHeight}" @change="carouselChange">
|
||
<swiper-item v-for="(menu, number) in menuList" :key="number">
|
||
<menu-diy :showStyle="showStyle" :showData="menu" :domain="domain" @onClick="onClick"></menu-diy>
|
||
</swiper-item>
|
||
</swiper>
|
||
<view class="carousel-dots">
|
||
<view class="dots-item" :style="{background: carouseIndex == i ? (showStyle.dotColor || themeColor) : '#F1F1F1'}" v-for="(d, i) in menuList" :key="i"></view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState } from "vuex"
|
||
import menuDiy from './menuDiy.vue'
|
||
export default {
|
||
name: 'navDiy',
|
||
components: {
|
||
menuDiy
|
||
},
|
||
props: ['showStyle', 'showData', 'showParams', 'domain'],
|
||
data() {
|
||
return {
|
||
// 已选索引
|
||
carouseIndex: 0,
|
||
// 菜单列表
|
||
menuList: [],
|
||
// 轮播图高度
|
||
carouselHeight: 0,
|
||
};
|
||
},
|
||
watch: {
|
||
showData: {
|
||
handler(value) {
|
||
if (value && value.length) {
|
||
console.log(value,'==========value============')
|
||
this.menuList = this.splitArray(value);
|
||
}
|
||
},
|
||
immediate: true,
|
||
deep: true
|
||
},
|
||
showStyle: {
|
||
handler(value) {
|
||
if (value) {
|
||
let height = 0
|
||
let iconSize = value.iconSize || 44
|
||
let fontSize = value.fontSize || 14
|
||
if (value.rowsLimit) {
|
||
height = `calc(${uni.upx2px(((iconSize + fontSize) * value.rowsLimit + value.itemSpace * (value.rowsLimit - 1)) * 2)}px + ${12 * value.rowsLimit}rpx)`
|
||
}
|
||
this.carouselHeight = height;
|
||
}
|
||
},
|
||
immediate: true,
|
||
deep: true
|
||
},
|
||
},
|
||
computed: {
|
||
...mapState({
|
||
themeColor: state => state.app.themeColor,
|
||
}),
|
||
itemBorderRadius() {
|
||
return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
|
||
},
|
||
paddingTop() {
|
||
return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
|
||
},
|
||
paddingLeft() {
|
||
return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
|
||
},
|
||
},
|
||
methods: {
|
||
// 轮播图切换
|
||
carouselChange(e) {
|
||
this.carouseIndex = e.detail.current
|
||
},
|
||
// 切割数组
|
||
splitArray(arr) {
|
||
var result = [];
|
||
if (this.showStyle.rowsLimit && this.showStyle.rowsLimit > 0 && arr.length > this.showStyle.rowsNum * this.showStyle.rowsLimit) {
|
||
for (var i = 0; i < arr.length; i += parseInt(this.showStyle.rowsNum * this.showStyle.rowsLimit)) {
|
||
var chunk = arr.slice(i, i + parseInt(this.showStyle.rowsNum * this.showStyle.rowsLimit));
|
||
result.push(chunk);
|
||
}
|
||
} else {
|
||
result[0] = arr
|
||
}
|
||
return result;
|
||
},
|
||
// 点击事件
|
||
onClick(e) {
|
||
if (!e) return;
|
||
this.$emit("onClick", e)
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
.diy-nav {
|
||
.carousel-dots {
|
||
display: flex;
|
||
justify-content: center;
|
||
padding-top: 20px;
|
||
|
||
.dots-item {
|
||
width: 24rpx;
|
||
height: 8rpx;
|
||
border-radius: 8rpx;
|
||
background: #F1F1F1;
|
||
margin-right: 4rpx;
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |