<template>
|
<view class="" v-if="detail.is_auto!=0 && hasTab" @click.stop>
|
<view class="foot-bottom"></view>
|
<view class="foot-tavbar-container d-a-c" :style="'background:'+detail.backgroundColor || '' + ';' "
|
v-if="detail.list!=''">
|
<view class="item d-c-c" :class="{'active':getLinkUrl(item.link_url) == getRoute()}"
|
v-for="(item, index) in detail.list" :key="index" @click="tabBarFunc(item)">
|
<view style="height: 0;width: 0;opacity: 0;">{{getRoute()}}</view>
|
<view class="inner d-c-c d-c">
|
<image v-if="detail.type!=2" :src="getLinkUrl(item.link_url)== getRoute()?item.selectedIconPath:item.iconPath"
|
mode="aspectFill">
|
</image>
|
<text v-if="detail.type!=1"
|
:style="getLinkUrl(item.link_url) == getRoute()?'color:'+detail.textHoverColor+';':'color:'+detail.textColor+';'"
|
class="text-name">{{ item.text}}</text>
|
</view>
|
</view>
|
</view>
|
<!--发布弹窗-->
|
<uniPopup :show="is_release" type='bottom' backgroundColor='#f2f2f2' width="700" msg=" "
|
@hidePopup="hideNotePopup">
|
<view class="release">
|
<view class="release-data d-c-c d-c" @click="gotoPage(release.demandindex_url)">
|
<image :src="release.iconPath"></image>
|
<text>{{release.demandindex_text}}</text>
|
</view>
|
<view class="release-data d-c-c d-c" @click="gotoPage(release.supplyindex_url)">
|
<image :src="release.selectedIconPath"></image>
|
<text>{{release.supplyindex_text}}</text>
|
</view>
|
</view>
|
<view class="guanbiannu" @click="hideNotePopup">
|
<text class="icon-guanbi icon iconfont guanbi"></text>
|
</view>
|
</uniPopup>
|
</view>
|
</template>
|
|
<script>
|
import uniPopup from '@/components/uni-popup.vue';
|
export default {
|
components: {
|
uniPopup
|
},
|
props: ['vars'],
|
data() {
|
return {
|
is_release: false,
|
/*当前选中*/
|
activeTabber: '首页',
|
/*打开直播菜单*/
|
open_liveMenu: false,
|
/*底部菜单*/
|
detail: {},
|
/*是否微信小程序*/
|
platform: 'wx',
|
hasTab: false,
|
release: {}
|
};
|
},
|
watch: {
|
// 'footTabberData': {
|
// handler(n, o) {
|
// if (n != o) {
|
// console.log('watch:' + n.active)
|
// this.activeTabber = n.active;
|
// if (uni.getStorageSync('TabBar').is_auto && uni.getStorageSync('TabBar').is_auto != 0) {
|
// uni.hideTabBar()
|
// }
|
// }
|
// },
|
// deep: true,
|
// immediate: true
|
// }
|
},
|
created() {
|
let pages = getCurrentPages();
|
if (pages.length) {
|
let currentPage = pages[pages.length - 1];
|
if (currentPage.route == 'pages/index/index') {
|
this.$store.commit('changefootTab', '首页');
|
}
|
}
|
this.platform = this.getPlatform();
|
this.detail = uni.getStorageSync('ShopTabBar');
|
// this.hasmenu();
|
this.getData();
|
|
},
|
methods: {
|
hasmenu() {
|
let self = this;
|
let curRoute = self.getRoute();
|
let link_url = '';
|
let res = self.detail.list.some(item => {
|
link_url = item.link_url;
|
if (link_url.indexOf('?') !== -1) {
|
link_url = link_url.split('?')[0];
|
}
|
if (link_url == curRoute) {
|
return true
|
}
|
})
|
self.hasTab = res;
|
if (uni.getStorageSync('ShopTabBar').is_auto && uni.getStorageSync('ShopTabBar').is_auto != 0) {
|
uni.hideTabBar()
|
}
|
},
|
getLinkUrl(link_url){
|
if (link_url.indexOf('?') !== -1) {
|
return link_url = link_url.split('?')[0];
|
}
|
return link_url;
|
},
|
getRoute() {
|
let self = this;
|
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
|
let curRoute = '/' + routes[routes.length - 1].route //获取当前页面路由
|
if (curRoute == '/pages/diy-page/diy-page' || curRoute == '/pages/article/detail/detail') {
|
if (routes[routes.length - 1]['$page']) {
|
curRoute = routes[routes.length - 1]['$page'].fullPath
|
}
|
}
|
// 如果当前路由包含查询参数，则只取路径部分进行匹配
|
return curRoute
|
},
|
/*点击菜单*/
|
tabBarFunc(e) {
|
if (e.link_url == '/pages3/release/chat/release') {
|
this.is_release = true;
|
this.release = e.release;
|
return
|
}
|
if (this.shopFootTabberData.active == e.text&&this.getLinkUrl(e.link_url) == this.getRoute()) {
|
return
|
}
|
this.shopFootTabberData.active = e.text
|
this.$store.commit('changefootTab', e.text);
|
this.gotoPage(e.link_url);
|
},
|
hideNotePopup() {
|
this.is_release = false
|
},
|
/*获取首页分类*/
|
getData() {
|
let self = this;
|
self._get('supplier.page/nav', {
|
shop_supplier_id: uni.getStorageSync('shop_supplier_id')
|
}, function(res) {
|
self.detail = res.data.vars.data;
|
uni.setStorageSync('ShopTabBar', res.data.vars.data);
|
self.hasmenu();
|
});
|
},
|
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.foot-bottom {
|
width: 100%;
|
height: 98rpx;
|
padding-bottom: env(safe-area-inset-bottom);
|
}
|
|
.foot-tavbar-container {
|
box-shadow: 0 0 6rpx 0 rgba(0, 0, 0, 0.3);
|
position: fixed;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
height: 98rpx;
|
background: #FFFFFF;
|
z-index: 999;
|
padding-bottom: env(safe-area-inset-bottom);
|
}
|
|
.foot-tavbar-container .item {
|
flex: 1;
|
height: 98rpx;
|
}
|
|
.foot-tavbar-container .item.add-btn .inner {
|
margin-bottom: 70rpx;
|
width: 100rpx;
|
height: 100rpx;
|
border-radius: 50%;
|
background: $dominant-color;
|
box-shadow: 0 0 10rpx 0 rgba(232, 38, 100, .6);
|
}
|
|
.foot-tavbar-container image {
|
width: 50rpx;
|
height: 50rpx;
|
}
|
|
.foot-tavbar-container .text-name {
|
font-size: 24rpx;
|
color: #666666;
|
}
|
|
.foot-tavbar-container .item.active .text-name {
|
color: #f8c341;
|
}
|
|
.release {
|
display: flex;
|
justify-content: space-between;
|
padding: 0 50rpx;
|
}
|
|
.release-data {
|
background-color: #FFFFFF;
|
padding: 20rpx;
|
font-size: 30rpx;
|
}
|
|
.release-data image {
|
width: 200rpx;
|
height: 200rpx;
|
margin-bottom: 20rpx;
|
}
|
|
.guanbiannu {
|
padding: 30rpx 40rpx;
|
margin: 20rpx auto;
|
}
|
|
.guanbi {
|
background-color: #dae5f9;
|
color: #a9adb8;
|
padding: 20rpx 40rpx;
|
font-size: 40rpx;
|
border-radius: 20rpx;
|
margin: 20rpx auto;
|
}
|
</style>
|
