mall-laonong/components/tabbar/tabbar.vue

<template>
	<view class="tabbar-box border-box pad-sx40 background-white pad-zy20 flex" v-if="isLoading">
		<view class="content background-grey border-box  color-ff flex">
			<view class="nav flex" @tap="chooseFootTab(index)" v-for="(item,index) in footBarList" :key="index" v-if="current == index">
				<image :style="{width:[39,32][index]+'rpx',height:[40,38][index]+'rpx'}" :src="item.iconPath" mode="widthFix"></image>
				<view class="title fon24" :class="current==index ? 'active' : ''">{{item.title}}</view>
			</view>
			<view class="price font60">
				<view><text>￥</text>{{cartPrice>0?this.$toolAll.tools.addXiaoShu(cartPrice):'0'}}</view>
			</view>
		</view>
		<view class="cart background-orange font36 color-48 flex" @tap="goCart">
			<text>购物车</text>
			<view class="amount font26" v-if="cartNum*1 <= 99">
				(<text>{{cartNum}}</text>)
			</view>
			<view class="amount font26" v-if="cartNum*1 > 99">
				(<text>99</text>)
			</view>
		</view>
	</view>
</template>
<script>
	import {getCartInfo} from '@/jsFile/public-api.js';
	import { mapState } from 'vuex'; //引入mapState
    export default {
        name:'tabbar',
		props:{
			// 当前选中项
			current:{
				type:String,
				default:'1'
			},
		},
        data() {
            return {
				footBarList:[], //底部列表
				isLoading:false,
            };
        },
		mounted() {
			// 获取当前页面路径
			this.$toolAll.tools.obtainPagePath();
			// 获取底部信息
			this.getTabbarList();
		},
		computed:{
			...mapState({
				cartNum: state=> state.moduleA.cartNum,
				cartPrice: state=> state.moduleA.cartPrice
			}),
		},
        methods:{
			// 获取底部信息
			getTabbarList(){
				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;
						// 查询购物车信息
						getCartInfo();
						this.isLoading = true;
					}
				})
			},
			// 跳转tabbar
            chooseFootTab(index){
				if(index==0){
					uni.reLaunch({url:'/pages/index/index'})
				}else {
					if(this.$toolAll.tools.judgeAuth()) {
						// 已授权
						switch (index){
							case 1:
							uni.reLaunch({url:'/pages/my/my'})
								break;
						}
					}
				}
            },
			// 去购物车
			goCart(){
				if(this.$toolAll.tools.judgeAuth()) {
					uni.navigateTo({
						url:'/pages/cart/cart',
					})
				}
			}
        }
    }
</script>

<style>
	.tabbar-box{
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 20rpx 20rpx 40rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
	}
	.content{
		align-items: center;
		width: 70.5%;
		height: 130rpx;
		padding: 22rpx 7rpx;
		border-radius: 30rpx 0 0 30rpx;
	}
	.content .nav{
		justify-content: center;
		flex-wrap: wrap;
		width: 144rpx;
		height: 100%;
		border-right: 2rpx solid #FFFFFF;
	}
	.nav>image{
		margin-top: 7rpx;
	}
	.nav>.title{
		width: 100%;
		font-size: 24rpx;
		line-height: 1.5;
		text-align: center;
	}
	.content .price{
		width: calc(100% - 144rpx);
		text-indent: 36rpx;
	}
	.cart{
		justify-content: center;
		align-items: center;
		width: 29.5%;
		height: 130rpx;
		border-radius: 0 30rpx 30rpx 0;
	}
	.cart>.amount{
		line-height: 2;
		margin-left: 10rpx;
	}
	.cart>.amount text{
		margin: 0 4rpx;
	}
</style>