CarRental/pages_store/components/tab-bar/tab-bar.vue

166 lines
4.3 KiB
Vue
Raw Permalink Normal View History

2025-01-06 11:51:31 +08:00
<template>
<view class="cont">
<view class="tab" @tap.stop="changeTabbar(0)">
<image src="https://lxnapi.ccttiot.com/bike/img/static/uepTgCFFKWhZEBbkkYZ0" mode="" v-show="indexs!=0"></image>
<image src="https://lxnapi.ccttiot.com/bike/img/static/ugarCC8fcoM2jeG4D019" mode="" v-show="indexs==0"></image>
<!-- <view class="txt" :class="indexs==0?'act1':''" >工作台</view> -->
</view>
<view class="tab" @tap.stop="changeTabbar(1)">
<image src="https://lxnapi.ccttiot.com/bike/img/static/ue07Q8M85W2KzWtM26SS" mode="" v-show="indexs!=1" style="width: 64rpx;height: 94rpx;"></image>
<image src="https://lxnapi.ccttiot.com/bike/img/static/uhm1Qa2DbHcRp1CSaoUK" mode="" v-show="indexs==1" style="width: 64rpx;height: 94rpx;"></image>
<!-- <view class="txt" :class="indexs==1?'act1':''">地图</view> -->
</view>
<view class="tab" @tap.stop="changeTabbar(2)">
<image src="https://lxnapi.ccttiot.com/bike/img/static/udPk2xAMcEmiMLGb2AYf" mode="" v-show="indexs!=2" style="width: 126rpx;height: 94rpx;"></image>
<image src="https://lxnapi.ccttiot.com/bike/img/static/ulWneeSBglPyM3CpB5sc" mode="" v-show="indexs==2" style="width: 126rpx;height: 94rpx;"></image>
<!-- <view class="txt" :class="indexs==1?'act1':''">地图</view> -->
</view>
</view>
<!-- 与包裹页面所有内容的元素u-page同级且在它的下方 -->
<!-- <u-tabbar v-model="current" :list="list" icon-size='40rpx' active-color='#3996fd' inactive-color="#c8c7cb"></u-tabbar> -->
</view>
</template>
<script>
export default {
props: {
indexs: [Number, String], //题目id
},
data() {
return {
currentTabbarIndex: 0,
// 自定义底栏对应页面的加载情况
tabberPageLoadFlag: [],
ispop: false,
userInfo:{}
}
},
mounted() {
this.currentTabbarIndex = this.indexs
// const index = Number(this.indexs || 0)
// // 根据底部tabbar菜单列表设置对应页面的加载情况
// for (let i = 0; i < 5; i++) {
// this.tabberPageLoadFlag.push(i === index)
// }
// this.changeTabbar(index)
this.getUserInfo()
},
methods:{
getUserInfo(){
this.$u.get("/getInfo").then((res) => {
if(res.code==200){
this.userInfo=res.user
console.log(this.userInfo);
}
});
},
changeTabbar(index) {
let that =this
if (this.currentTabbarIndex === index) return
// this._switchTabbarPage(index)
if(index==0){
uni.redirectTo({
url:'/pages_store/merchant',
routeType: 'wx://modal',
success() {
that.currentTabbarIndex = index
}
})
console.log('点击了',index);
}else if(index==1){
console.log(this.userInfo);
if(this.userInfo.userId){
uni.redirectTo({
url:'/pages_store/storeIndex',
routeType: 'wx://modal',
success() {
that.currentTabbarIndex = index
}
})
}else{
uni.navigateTo({
url:'/pages/login/login'
})
}
}else if(index==2){
console.log(this.userInfo);
if(this.userInfo.userId){
uni.redirectTo({
url:'/pages_store/marchantHome',
routeType: 'wx://modal',
success() {
that.currentTabbarIndex = index
}
})
}else{
uni.navigateTo({
url:'/pages/login/login'
})
}
}
},
}
}
</script>
<style lang="scss" scoped>
/deep/.u-tabbar__content__item__button {
top: 20rpx !important;
}
/deep/.u-tabbar {
.u-tabbar__content__item:nth-child(2) {
.u-tabbar__content__item__button {
width: 32rpx !important;
}
}
}
.cont {
padding: 15rpx 0 30rpx;
position: fixed;
// left: 60rpx;
bottom: 0rpx;
width: 750rpx;
height: 130rpx;
background: #FFFFFF;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(53, 140, 255, 0.1);
// border-radius: 60rpx;
display: flex;
// align-items: center;
justify-content: space-around;
z-index: 1000;
// border-top: 2rpx solid #95989D;
.tab{
width: 150rpx;
display: flex;
flex-wrap: wrap;
justify-content: center;
image{
width: 64rpx;
height: 94rpx;
}
.txt{
text-align: center;
width: 100%;
margin-top: 4rpx;
font-size: 20rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #95989D;
}
.act1{
color: #8883F0;
}
}
}
</style>