jje_uniapp/components/tabBar/tabBar.vue

<template>
	<view>
		<view class="box  flex-col justify-end">
			<view class="tabbar  flex-row justify-around">
				<view class="item flex-col justify-center" @click="goPages(0)">
					<view class="imageView flex-row justify-center">
						<image class="image" :src="tabIndex===0? '/static/tabBar/index_cur.png':'/static/tabBar/index.png'"></image>
					</view>
					<view class=" flex-row justify-center" :class="tabIndex ===0?'title':'title1'">
						<text>首页</text>
					</view>
				</view>

				<view class="item  flex-col justify-center" @click="goPages(1)">
					<view class="imageView flex-row justify-center">
						<image class="image" :src="tabIndex===1? '/static/tabBar/shop_cur.png':'/static/tabBar/shop.png'"></image>
					</view>
					<view class=" flex-row justify-center" :class="tabIndex ===1?'title':'title1'">
						<text>点单</text>
					</view>
				</view>

				<view class="item  flex-col justify-center" @click="goPages(2)">
					<view class="qrcodeView flex-row justify-center">
						<image class="qrcode" src="/static/tabBar/qrcode.png"></image>
					</view>

				</view>


				<view class="item  flex-col justify-center" @click="goPages(3)">
					<view class="imageView flex-row justify-center">
						<image class="image" :src="tabIndex===3? '/static/tabBar/order_cur.png':'/static/tabBar/order.png'"></image>
					</view>
					<view class=" flex-row justify-center" :class="tabIndex ===3?'title':'title1'">
						<text>订单</text>
					</view>
				</view>

				<view class="item  flex-col justify-center" @click="goPages(4)">
					<view class="imageView flex-row justify-center">
						<image class="image" :src="tabIndex===4? '/static/tabBar/me_cur.png':'/static/tabBar/me.png'"></image>
					</view>
					<view class=" flex-row justify-center" :class="tabIndex ===4?'title':'title1'">
						<text>我的</text>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tabBar",
		props: {
			tabIndex: {
				type: Number,
				default () {
					return 0
				}
			}
		},
		data() {
			return {

			};
		},
		methods:{
			goPages(num){

				console.log(num)

				if (num === 0){
					uni.switchTab({
						url:'/pages/index/index'
					})
				}

				if (num === 1){
					uni.switchTab({
						url:'/pages/orderMeal/index'
					})
				}

				if (num === 2){
					uni.switchTab({
						url:'/pages/qrCode/index'
					})
				}

				if (num === 3){
					uni.switchTab({
						url:'/pages/order/index'
					})
				}

				if (num===4){
					uni.switchTab({
						url:'/pages/my/index'
					})
				}

			}
		}
	}
</script>

<style>
	@import '/common/css/common.css';

	.box {
		width: 750rpx;
		height: 138rpx;
		background: #F7F7F7;
	}

	.tabbar {
		width: 750rpx;
		height: 108rpx;
		background: #FFFFFF;
	}
	.imageView{
		width: 100%;
	}

	.image {
		width: 40rpx;
		height: 40rpx;
	}
	.title{
		width: 44rpx;
		height: 32rpx;
		font-size: 22rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 32rpx;
	}
	.title1{
		width: 44rpx;
		height: 32rpx;
		font-size: 22rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 32rpx;
	}
	.qrcodeView{
		width: 120rpx;
		height: 120rpx;
		position: relative;
	}
	.qrcode{
		width: 120rpx;
		height: 120rpx;
		position: absolute;
		bottom: 20rpx;
	}

</style>