dnyAppTruck/pages/index/tabbar.vue

<template>
	<view>
		<workTable ref="workTableRef" v-if="pageCurrent=='workTable'"></workTable>
		<me v-if="pageCurrent=='me'"></me>
    <me v-if="pageCurrent=='order'"></me>

		<view class="box">
			<view class="cu-bar tabbar bg-white shadow foot">
				<view class="action" @click="navChange" data-cur="order">
					<view class='cuIcon-cu-image'>
						<image v-if="pageCurrent=='order'" src="../../static/tabbar/order_cur.png"></image>
						<image v-if="pageCurrent != 'order'" src="../../static/tabbar/order.png"></image>
					</view>
					<view :class="pageCurrent=='order'?'color_main':'text-gray'">配送列表</view>
				</view>
				<view class="action" @click="navChange" data-cur="workTable">
					<view class='cuIcon-cu-image'>
						<image v-if="pageCurrent=='workTable'" src="../../static/tabbar/workTable_cur.png"></image>
						<image v-if="pageCurrent != 'workTable'" src="../../static/tabbar/workTable.png"></image>
					</view>
					<view :class="pageCurrent=='workTable'?'color_main':'text-gray'">工作台</view>
				</view>

<!-- 				<view @click="navChange" class="action text-gray add-action" data-cur="workTable">
					<image class="logo_btn" mode="widthFix" src="../../static/logo.png"></image>
					<view :class="pageCurrent=='workTable'?'color_main':'text-gray'">工作台</view>
				</view> -->

				<view class="action" @click="navChange" data-cur="me">
					<view class='cuIcon-cu-image'>
						<view class="cu-tag badge">
							<!-- 红点 -->
						</view>
						<image v-if="pageCurrent=='me'" src="../../static/tabbar/me_cur.png"></image>
						<image v-if="pageCurrent != 'me'" src="../../static/tabbar/me.png"></image>
					</view>
					<view :class="pageCurrent=='me'?'color_main':'text-gray'">个人中心</view>
				</view>

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

<script>
	import order from "./order.vue"; //配送列表
	import workTable from "./workTable.vue"; //工作台
	import me from "./me.vue"; //个人中心
	export default {
		components: {
			order,
			workTable,
			me
		},
		data() {
			return {
				pageCurrent: 'workTable'
			}
		},
		methods: {

			navChange: function(e) {
				this.pageCurrent = e.currentTarget.dataset.cur;
			}
		},

	}
</script>

<style>
	.box {
		margin: 20upx 0;
	}

	.box view.cu-bar {
		margin-top: 20upx;
	}

	.logo_btn{
		width: 38*2rpx;
		height: 38*2rpx;
		position: absolute;
		z-index: 2;
		border: #09BB07;
		border-radius: 50%;
		top: -50rpx;
		left: 0rpx;
		right: 0;
		margin: auto;
		padding: 0;
	}

	.cu-bar.tabbar .action.add-action {
	    padding-top: 56rpx !important;
	}
</style>