144 lines
3.7 KiB
Vue
144 lines
3.7 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="component-tab-bar" v-if="tabBarList && tabBarList.length">
|
||
<view class="tab-bar-main" :style="{'--theme-color': themeColor}">
|
||
<view class="main-item wbcentre" v-for="(item, index) in tabBarList" :key="index" @click="tabBarPages(index)">
|
||
<image class="item-img" :src="item.selicon" mode="aspectFit" v-if="item.path == currentPath"></image>
|
||
<image class="item-img" :src="item.icon" mode="aspectFit" v-else></image>
|
||
<view class="item-text" :class="{active: item.path == currentPath}">{{ item.name }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState } from "vuex"
|
||
export default {
|
||
name: "tabBar",
|
||
data() {
|
||
return {
|
||
// 当前页面路径
|
||
currentPath: ""
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState({
|
||
themeColor: state => state.app.themeColor,
|
||
tabBarList: state => {
|
||
let list = state.app.tabBarList
|
||
let pages = getCurrentPages();
|
||
let isShow = false
|
||
if (pages && pages.length) {
|
||
let currentPath = "/" + pages[pages.length - 1].route;
|
||
if (list.length) {
|
||
for (let i in list) {
|
||
if (currentPath == list[i].path) {
|
||
isShow = true
|
||
// #ifdef MP-WEIXIN
|
||
wx.hideHomeButton();
|
||
// #endif
|
||
}
|
||
}
|
||
}
|
||
}
|
||
if (!isShow) list = []
|
||
return list
|
||
},
|
||
})
|
||
},
|
||
mounted() {
|
||
let pages = getCurrentPages();
|
||
this.currentPath = "/" + pages[pages.length - 1].route;
|
||
},
|
||
methods: {
|
||
// 跳转底部导航
|
||
tabBarPages(index) {
|
||
const item = this.tabBarList[index]
|
||
if (item.jump_type == 1) {
|
||
// 图文
|
||
if (item.path == this.currentPath) return
|
||
uni.navigateTo({
|
||
url: "/pages/webview/imageText?type=2&id=" + item.id
|
||
})
|
||
} else if (item.jump_type == 2) {
|
||
// 内部页面
|
||
if (item.path == this.currentPath) return
|
||
this.$util.toPage({
|
||
path: item.path,
|
||
mode: 3
|
||
})
|
||
} else if (item.jump_type == 3) {
|
||
// 外部链接
|
||
this.$util.toPage({
|
||
path: item.path,
|
||
mode: 4,
|
||
})
|
||
} else if (item.jump_type == 4) {
|
||
// 小程序
|
||
this.$util.toPage({
|
||
appId: JSON.parse(item.path).appid,
|
||
path: JSON.parse(item.path).path,
|
||
mode: 5,
|
||
})
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.component-tab-bar {
|
||
width: 100%;
|
||
height: 126rpx;
|
||
|
||
.tab-bar-main {
|
||
background: #fff;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 998;
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
display: flex;
|
||
justify-content: space-around;
|
||
border-top: 2rpx solid #F6F7FB;
|
||
|
||
.main-item {
|
||
flex: 1;
|
||
height: 124rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
|
||
.item-img {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.item-text {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
margin-top: 4rpx;
|
||
text-align: center;
|
||
|
||
&.active {
|
||
color: var(--theme-color);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |