dengrui/components/footTab.vue

78 lines
3.4 KiB
Vue
Raw Normal View History

2021-08-26 01:49:06 +00:00
<template>
<view>
<view style="height: 56px;font-size: 10px;border-top: 1rpx solid #FFFFFF;background-color: #FFFFFF;
2021-08-28 06:23:27 +00:00
position: fixed;bottom: 0;left: 0;right: 0;display: flex;justify-content: space-around;align-items: center;z-index: 10;">
2021-09-03 07:12:07 +00:00
<view v-if="userType=='personal' && index!=2" :style="{width:(userType=='personal')?'33.3%':'25%'}" @tap="choosefoot(index)" v-for="(item,index) in tabArr" :key="index" style="display: flex;justify-content: center;flex-direction: column;align-items: center;">
2021-08-26 01:49:06 +00:00
<image v-if="current==index" :src="item.selectedIconPath" style="width: 22px;height: 22px;"></image>
<image v-else :src="item.iconPath" style="width: 22px;height: 22px;"></image>
<view :class="current==index?'footactive':'footmo'" style="margin-top: 4px;">{{item.text}}</view>
</view>
2021-09-03 07:12:07 +00:00
<view v-if="userType!='personal'" @tap="choosefoot(index)" v-for="(item,index) in tabArr" :key="index" style="display: flex;justify-content: center;flex-direction: column;align-items: center;">
2021-08-29 02:59:58 +00:00
<image v-if="current==index" :src="item.selectedIconPath" style="width: 22px;height: 22px;"></image>
<image v-else :src="item.iconPath" style="width: 22px;height: 22px;"></image>
<view :class="current==index?'footactive':'footmo'" style="margin-top: 4px;">{{item.text}}</view>
</view>
2021-08-26 01:49:06 +00:00
</view>
</view>
</template>
<script>
export default {
name:'footTab',
2021-08-28 06:23:27 +00:00
props:{
current:{
type:Number,
default:0
2021-09-03 07:12:07 +00:00
},
userType:{
type:String,
default:uni.getStorageSync('user_type')
2021-08-28 06:23:27 +00:00
}
},
2021-08-26 01:49:06 +00:00
data() {
return {
tabArr:[
{
'pagePath': 'pages/tabbar/homePage/homePage',
'iconPath': '../static/img/tabbar/pagem.png',
'selectedIconPath': '../static/img/tabbar/pageh.png',
'text': '首页'
},
{
'pagePath': 'pages/tabbar/product/product',
'iconPath': '../static/img/tabbar/productm.png',
'selectedIconPath': '../static/img/tabbar/product.png',
'text': '产品'
},
{
'pagePath': 'pages/tabbar/shoppingCart/shoppingCart',
'iconPath': '../static/img/tabbar/chem.png',
'selectedIconPath': '../static/img/tabbar/chem.png',
'text': '购物车'
},
{
'pagePath': 'pages/tabbar/my/my',
'iconPath': '../static/img/tabbar/mym.png',
'selectedIconPath': '../static/img/tabbar/my.png',
'text': '我的'
},
],
2021-08-28 06:23:27 +00:00
// current:0
2021-08-26 01:49:06 +00:00
};
},
methods:{
choosefoot(index){
2021-08-28 06:23:27 +00:00
if(index==0) uni.reLaunch({url:'/pages/tabbar/homePage/homePage'})
if(index==1) uni.reLaunch({url:'/pages/tabbar/product/product'})
if(index==2) uni.reLaunch({url:'/pages/tabbar/shoppingCart/shoppingCart'})
if(index==3) uni.reLaunch({url:'/pages/tabbar/my/my'})
// this.current = index
2021-08-26 01:49:06 +00:00
}
}
}
</script>
<style>
.footactive{color: #214995;}
.footmo{color: #aaaeb7;}
</style>