147 lines
3.3 KiB
Vue
147 lines
3.3 KiB
Vue
<template>
|
|
<view class="foot-box">
|
|
<view class="item-box" @tap="chooseFootTab(index)" v-for="(item,index) in footBarList" :key="index">
|
|
<view class="item-icon flex" :class="current*1===index ? 'active' : ''">
|
|
<image :style="{width:[38,40,38,37,40][index]+'rpx',height:[39,40,38,39,40][index]+'rpx'}" :src="item.iconPath" mode="widthFix"></image>
|
|
</view>
|
|
<view class="foot-title" :class="current==index ? 'active' : ''">{{item.title}}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name:'foot-tab',
|
|
props:{
|
|
// 当前选中项
|
|
current:{
|
|
type:String,
|
|
default:'0'
|
|
},
|
|
// 默认哪个图标突出
|
|
isIcon:{
|
|
type:String,
|
|
default:'-1'
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
ifCustomerService:true,//是否存在客服 默认不存在客服
|
|
footBarList:[], //底部列表
|
|
};
|
|
},
|
|
mounted() {
|
|
// 缓存状态栏+标题栏的高度
|
|
const query = wx.createSelectorQuery().in(this)
|
|
query.select('.foot-box').boundingClientRect((rect) => {
|
|
this.$store.commit('footHeightEv',rect.height);
|
|
}).exec()
|
|
// 获取底部信息
|
|
this.getTabbarList();
|
|
},
|
|
methods:{
|
|
// 获取底部信息
|
|
getTabbarList(){
|
|
this.$requst.get('/api/index/tarbar').then(res=>{
|
|
if(res.code == 0){
|
|
console.log(res,'底部信息')
|
|
let tabbarArr = [];
|
|
res.data.footBar.forEach(item=>{
|
|
let obj = {
|
|
iconPath:this.$hostHttp+item.icon,
|
|
title:item.name,
|
|
}
|
|
tabbarArr.push(obj)
|
|
})
|
|
this.footBarList = tabbarArr;
|
|
}
|
|
})
|
|
},
|
|
// 跳转
|
|
chooseFootTab(index){
|
|
if(index==0){
|
|
uni.reLaunch({url:'/pages/tabbar/index/index'})
|
|
}else if(index==1){
|
|
uni.reLaunch({url:'/pages/tabbar/cate/cate'})
|
|
}else if(index==2){
|
|
uni.reLaunch({url:'/pages/tabbar/kit/kit'})
|
|
}else if(index==3){
|
|
uni.reLaunch({url:'/pages/tabbar/news/news'})
|
|
}else {
|
|
if(this.$toolAll.tools.judgeAuth()) {
|
|
// 已授权
|
|
switch (index){
|
|
case 4:
|
|
uni.reLaunch({url:'/pages/tabbar/my/my'})
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 外框样式 start */
|
|
.foot-box{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
height: 130rpx;
|
|
font-size: 24rpx;
|
|
background-color: #FFFFFF;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
|
|
}
|
|
/* 外框样式 end */
|
|
.item-box {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 16rpx 10rpx;
|
|
width: 100%;
|
|
}
|
|
.item-icon{
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 65rpx;
|
|
height: 60rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
.item-icon.active {
|
|
background-color: #0073bc;
|
|
}
|
|
.item-icon.active image{
|
|
-webkit-filter: brightness(1000%);
|
|
-moz-filter: brightness(1000%);
|
|
-ms-filter: brightness(1000%);
|
|
-o-filter: brightness(1000%);
|
|
filter: brightness(1000%);
|
|
}
|
|
.foot-title{
|
|
margin-top: 10rpx;
|
|
letter-spacing: 4rpx;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
.foot-title.active{
|
|
color: #000000;
|
|
}
|
|
/* 凸出样式 */
|
|
.bulge {
|
|
position: absolute;
|
|
top: -30rpx;
|
|
width: 80rpx!important;
|
|
height: 80rpx!important;
|
|
border: 8rpx solid #FFFFFF;
|
|
border-radius: 100%;
|
|
vertical-align: middle;
|
|
box-shadow: 0rpx -3rpx 6rpx rgba(0,0,0,.1);
|
|
background-color: #FFFFFF;
|
|
}
|
|
</style>
|