150 lines
3.2 KiB
Vue
150 lines
3.2 KiB
Vue
<template>
|
|
<view class="tabbar-list border-box pad-sx40 background-white pad-zy20 flex">
|
|
<!-- 底部导航 -->
|
|
<view class="tabbar-item color-88 flex" :class="current==index ? 'active' : ''" @tap="chooseFootTab(index)" v-for="(item,index) in footBarList" :key="index">
|
|
<view class="icon flex"><image :style="{width:[41,38][index]+'rpx',height:[41,40][index]+'rpx'}" :src="item.iconPath" mode="widthFix"></image></view>
|
|
<view class="title font26">{{item.title}}</view>
|
|
</view>
|
|
<!-- 发布按钮 -->
|
|
<view class="release-btn background-blue color-ff radius100 flex" @tap="goRelease">
|
|
<image src="/static/icon-release.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { mapState } from 'vuex'; //引入mapState
|
|
export default {
|
|
name:'tabbar',
|
|
props:{
|
|
// 当前选中项
|
|
current:{
|
|
type:Number,
|
|
default:0
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
footBarList:[], //底部列表
|
|
};
|
|
},
|
|
mounted() {
|
|
// 获取当前页面路径
|
|
this.$toolAll.tools.obtainPagePath();
|
|
// 获取底部信息
|
|
this.getTabbarList();
|
|
},
|
|
methods:{
|
|
// 获取底部信息
|
|
getTabbarList(){
|
|
this.footBarList = [
|
|
{iconPath:'/static/icon-idle.png',title:'闲置'},
|
|
{iconPath:'/static/icon-my.png',title:'我的'}
|
|
]
|
|
// this.$requst.get('/api/index/mini-program-setting').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;
|
|
// }
|
|
// })
|
|
},
|
|
// 跳转tabbar
|
|
chooseFootTab(index){
|
|
switch (index){
|
|
case 0:
|
|
uni.reLaunch({
|
|
url:'/pages/idle/idle',
|
|
})
|
|
break;
|
|
case 1:
|
|
if(this.$toolAll.tools.judgeAuth()) {
|
|
uni.reLaunch({
|
|
url:'/pages/my/my',
|
|
})
|
|
}
|
|
break;
|
|
}
|
|
},
|
|
|
|
// 发布商品
|
|
goRelease(){
|
|
uni.navigateTo({
|
|
url:'/pages/idle/release',
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tabbar-list{
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100rpx;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 99;
|
|
}
|
|
.tabbar-item{
|
|
flex-wrap: wrap;
|
|
justify-items: center;
|
|
width: 25%;
|
|
text-align: center;
|
|
}
|
|
.tabbar-item .icon{
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 40rpx;
|
|
}
|
|
.tabbar-item .icon>image{
|
|
filter: grayscale(100%);
|
|
}
|
|
.tabbar-item .title{
|
|
width: 100%;
|
|
margin-top: 6rpx;
|
|
line-height: 1.2;
|
|
}
|
|
.tabbar-item.active{
|
|
color: #1981ff;
|
|
}
|
|
.tabbar-item.active .icon>image{
|
|
filter: grayscale(0);
|
|
}
|
|
/* 发布按钮 */
|
|
.release-btn{
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
font-size: 50rpx;
|
|
line-height: 80rpx;
|
|
animation: scale_name 1s linear alternate infinite;
|
|
position: fixed;
|
|
right: 20rpx;
|
|
bottom: 120rpx;
|
|
z-index: 99;
|
|
}
|
|
.release-btn>image{
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
@keyframes scale_name {
|
|
from {
|
|
transform: scale(.9);
|
|
}
|
|
to {
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
</style>
|