You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
343 lines
8.7 KiB
343 lines
8.7 KiB
<template>
|
|
<view v-if="!!TabBarsData">
|
|
<view class="diy-tabbar" :style="{'background':TabBarsData?TabBarsData.style.bgcolor:'#ffffff','padding-bottom':isPadding?'20px':'','borderTop': '1px solid #efefef'}">
|
|
<view class="tabbar-item" v-for="(item,index) in TabBarsData.data" :key="index" @click="onTabItem(item.linkurl,item.name,index)">
|
|
<view v-if="TabBarsData.params.navstyle==='1'">
|
|
<image class="image" :src="item.imgurl"></image>
|
|
</view>
|
|
<view v-if="TabBarsData.params.navstyle==='0'">
|
|
<view class="tabbar-sever" v-if="item.page_path == 'pages/subPages2/homemaking/postDemand/postDemand'">
|
|
<image class="tabbar-severImg" :src="imgfixUrls + 'homemakingImg/enterCheck.png'" mode=""></image>
|
|
</view>
|
|
<view v-else>
|
|
<view class="iconfont tabbar-item-icon" :class="item.iconclass" :style="current===index?'color:'+TabBarsData.style.iconcoloron:'color:'+TabBarsData.style.iconcolor"></view>
|
|
<view class="f-24" :style="current===index?'color:'+'#509DFD':'color:'+TabBarsData.style.textcolor">{{item.text}}</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="navstyle-3-item" v-if="TabBarsData.params.navstyle==='2'" :class="(isTip && index=='2')?'msg_tip':''">
|
|
<view class="navstyle-image" :style="{'background-image':current===index?'url('+item.select_img+')':'url('+item.default_img+')'}"></view>
|
|
<!-- <view class="f-24 t-c" :style="current===index?'color:'+TabBarsData.style.textcoloron:'color:'+TabBarsData.style.textcolor">{{item.text}}</view> -->
|
|
<view class="f-24 t-c" :style="current===index?'color:'+'#509DFD':'color:'+TabBarsData.style.textcolor">{{item.text}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import App from '@/common/js/app.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
current: 0,
|
|
isPadding: null,
|
|
menu: null,
|
|
isTip: false,//是否红点消息提示
|
|
}
|
|
},
|
|
props: {
|
|
tabBarAct: {
|
|
type: Number,
|
|
default: function() {
|
|
return 0
|
|
}
|
|
},
|
|
|
|
tabBarData: {
|
|
default: function() {
|
|
return null
|
|
}
|
|
},
|
|
|
|
|
|
|
|
pageType: {
|
|
type: String,
|
|
default: function() {
|
|
return ""
|
|
}
|
|
},
|
|
pageId: {
|
|
type: String,
|
|
default: function() {
|
|
return ""
|
|
}
|
|
},
|
|
menuList: {
|
|
default: function() {
|
|
return ""
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
let _this = this;
|
|
_this.current = uni.getStorageSync('tabbarindex');
|
|
uni.getSystemInfo({
|
|
success(res) {
|
|
let model = res.model,
|
|
iphoneModel = ["iPhone10,3", "iPhone10,6", "iPhone11,8", "iPhone11,2", "iPhone11,6"];
|
|
_this.isPadding = iphoneModel.includes(model) || model.indexOf("iPhone X") !== -1 || model.indexOf("iPhone12") !== -1;
|
|
}
|
|
});
|
|
_this.getbtmNavBar()
|
|
},
|
|
methods: {
|
|
onTabItem(url, pageName,index) {
|
|
uni.setStorageSync('tabbarindex',index);
|
|
if(url.indexOf('indet') != -1){
|
|
//#ifdef H5
|
|
// let loc = url.split('?')[1];
|
|
// debugger
|
|
App.navigationToH5(false,`${App.base}#/${url}`);
|
|
window.location.reload();
|
|
//#endif
|
|
//#ifndef H5
|
|
App.navigationTo({
|
|
url:url
|
|
});
|
|
//#endif
|
|
return
|
|
}
|
|
// #ifdef H5
|
|
App.navigationTo({
|
|
url: url
|
|
});
|
|
// #endif
|
|
// #ifndef H5
|
|
App.navigationTo({
|
|
url: url,
|
|
navType:'rediRect'
|
|
});
|
|
// #endif
|
|
|
|
},
|
|
getbtmNavBar() {
|
|
let _this = this,
|
|
requestData = {};
|
|
if (!!_this.pageType) {
|
|
requestData = {
|
|
type: _this.pageType
|
|
}
|
|
}
|
|
if (!!_this.pageId) {
|
|
Object.assign(requestData, {
|
|
id: _this.pageId
|
|
})
|
|
}
|
|
if(_this.pageType == 'draw'){
|
|
_this.setData({
|
|
menu: _this.tabBarData
|
|
});
|
|
let pages = getCurrentPages(),
|
|
currentPage = pages[pages.length - 1],
|
|
pageRoute = currentPage.route || currentPage.__route__;
|
|
let tablist = [];
|
|
// for (let i in _this.menu.data) {
|
|
// tablist.push(_this.menu.data[i]);
|
|
// };
|
|
|
|
// let result_one = tablist.m(function(item) {
|
|
// if (item.page_path.split('?')[0] == pageRoute) {
|
|
// return true; //返回false
|
|
// }
|
|
// });
|
|
let result_one = false;
|
|
tablist = _this.menu.data;
|
|
// for(let i = 0;i<tablist.length;i++){
|
|
// if(tablist[i].page_path.split('?')[0] == pageRoute){
|
|
// result_one = true;
|
|
// return //返回false
|
|
// }
|
|
// }
|
|
for (let key in tablist) {
|
|
if(tablist[key].page_path.split('?')[0] == pageRoute){
|
|
result_one = true;
|
|
//返回false
|
|
}
|
|
};
|
|
if(!result_one){
|
|
uni.removeStorageSync('tabbarindex');
|
|
_this.current = 0;
|
|
}
|
|
}else{
|
|
App._post_form('&do=BottomMenu', requestData, res => {
|
|
_this.setData({
|
|
menu: res.data.data
|
|
});
|
|
// uni.showToast({
|
|
// title:'成功了'
|
|
// })
|
|
let pages = getCurrentPages(),
|
|
currentPage = pages[pages.length - 1],
|
|
pageRoute = currentPage.route || currentPage.__route__;
|
|
let tablist = [];
|
|
// for (let i in _this.menu.data) {
|
|
// tablist.push(_this.menu.data[i]);
|
|
// };
|
|
|
|
// let result_one = tablist.m(function(item) {
|
|
// if (item.page_path.split('?')[0] == pageRoute) {
|
|
// return true; //返回false
|
|
// }
|
|
// });
|
|
let result_one = false;
|
|
tablist = _this.menu.data;
|
|
// for(let i = 0;i<tablist.length;i++){
|
|
// if(tablist[i].page_path.split('?')[0] == pageRoute){
|
|
// result_one = true;
|
|
// return //返回false
|
|
// }
|
|
// }
|
|
for (let key in tablist) {
|
|
if(tablist[key].page_path.split('?')[0] == pageRoute){
|
|
result_one = true;
|
|
//返回false
|
|
}
|
|
};
|
|
if(!result_one){
|
|
uni.removeStorageSync('tabbarindex');
|
|
_this.current = 0;
|
|
}
|
|
if(res.data.data.is_icon){
|
|
//有新消息
|
|
// _this.isTip = true;
|
|
}else{
|
|
// _this.isTip = false;
|
|
}
|
|
})
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
TabBarsData() {
|
|
let pages = getCurrentPages(),
|
|
currentPage = pages[pages.length - 1],
|
|
pageRoute = currentPage.route || currentPage.__route__,
|
|
TabBarsData = {
|
|
data: !!this.tabBarData && this.tabBarData.length > 0 ? this.tabBarData : this.menu
|
|
},
|
|
pageIndex;
|
|
console.log(this.tabBarData, this.menu)
|
|
// #ifdef H5
|
|
let pageObj = currentPage.$mp.query;
|
|
// debugger
|
|
// #endif
|
|
|
|
// #ifdef MP-WEIXIN
|
|
let pageObj = currentPage.$vm.$mp.query;
|
|
// #endif
|
|
//#ifdef APP-PLUS
|
|
let pageObj = currentPage.options;
|
|
//#endif
|
|
if(!!TabBarsData.data) {
|
|
let tablist = [];
|
|
for (let key in TabBarsData.data.data) {
|
|
tablist.push(TabBarsData.data.data[key])
|
|
};
|
|
// debugger
|
|
if (pageRoute === 'pages/mainPages/index/diypage') {
|
|
// 检测自定义页面的参数，判断高亮
|
|
pageRoute = pageRoute + '?i=' + pageObj.i + (pageObj['aid']?'&aid=' + pageObj['aid']:'') + (pageObj['id']?'&id=' + pageObj['id']:'') + '&type=' + pageObj['type'];
|
|
//之前使用for in 循环给每一个K添加上链接，但是因为小程序在移动端表现参数的位置不同，所以修改为固定位置添加参数
|
|
pageIndex = tablist.findIndex(item => item.linkurl === pageRoute);
|
|
this.current = pageIndex;
|
|
}else{
|
|
pageIndex = tablist.findIndex(item => item.linkurl.split('?')[0] === pageRoute);
|
|
this.current = pageIndex;
|
|
|
|
}
|
|
TabBarsData.data.data = tablist;
|
|
console.log(TabBarsData.data)
|
|
return TabBarsData.data
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.diy-tabbar {
|
|
border-color: rgba(0, 0, 0, 0.33);
|
|
position: fixed;
|
|
z-index: 9999;
|
|
height: 130upx;
|
|
left: 0;
|
|
background-color: rgb(255, 255, 255);
|
|
color: rgb(110, 109, 107);
|
|
bottom: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
}
|
|
|
|
.tabbar-item {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
font-size: 0;
|
|
color: #6e6d6b;
|
|
text-align: center;
|
|
z-index: 5;
|
|
padding-bottom: 30upx;
|
|
}
|
|
|
|
.tabbar-sever{
|
|
|
|
}
|
|
.tabbar-severImg{
|
|
width: 84upx;
|
|
height: 84upx;
|
|
position: relative;
|
|
top: -20upx;
|
|
}
|
|
.tabbar-item .tabbar-item-icon {
|
|
font-size: 44upx;
|
|
}
|
|
|
|
.tabbar-item.item-on {
|
|
/* color: #fd4a5f; */
|
|
|
|
}
|
|
|
|
.tabbar-item .image {
|
|
display: inline-block;
|
|
width: 100upx;
|
|
height: 100upx;
|
|
}
|
|
|
|
.tabbat-item-text {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
font-size: 20upx;
|
|
line-height: 1.8;
|
|
text-align: center;
|
|
}
|
|
|
|
.navstyle-image {
|
|
width: 60upx;
|
|
height: 60upx;
|
|
background-repeat: no-repeat;
|
|
background-size: 60upx 60upx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.navstyle-3-item {
|
|
padding: 10upx 0;
|
|
}
|
|
.msg_tip{
|
|
position: relative;
|
|
}
|
|
.msg_tip::after{
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 0px;
|
|
content: '';
|
|
background-color: #f00;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
}
|
|
</style>
|
|
|