pupil/pages/index/tabbar.vue

<template>
	<view>
		<index @ShowNews="ShowNews" v-if="PageCur=='index'"></index>
		<report v-if="PageCur=='report'"></report>
		<release v-if="PageCur=='release'"></release>
		<industry v-if="PageCur=='industry'"></industry>
		<product v-if="PageCur=='product'"></product>
		<my v-if="PageCur=='my'"></my>

		<view class="box">
			<view class="cu-bar tabbar bg-white shadow foot">
				<view class="action" @click="NavChange" data-cur="index">
					<view class='cuIcon-cu-image'>
						<image v-if="PageCur=='index'" src="../../static/tabBar/index_cur.png"></image>
						<image v-if="PageCur != 'index'" src="../../static/tabBar/index.png"></image>
					</view>
					<view :class="PageCur=='index'?'color_main':'text-gray'">首页</view>
				</view>

				<view class="action" @click="NavChange" data-cur="report">
					<view class='cuIcon-cu-image'>
						<!-- <view class="cu-tag badge"> -->
						<!-- 红点 -->
						<!-- </view> -->
						<image v-if="PageCur=='report'" src="../../static/tabBar/shop_cur.png"></image>
						<image v-if="PageCur != 'report'" src="../../static/tabBar/shop.png"></image>
					</view>
					<view :class="PageCur=='report'?'color_main':'text-gray'">行业报告</view>
				</view>

				<view class="action text-gray add-action">
					<u-popup :show="show" mode="bottom" @close="close" safeAreaInsetBottom
						overlay-class="header-overlay">
						<view class="more_box">
							<!-- 需求发布 -->
							<view class="more_action" @close="close" @click="NavChange" data-cur="release">
								<view class='more_image'>
									<image src="../../static/tabBar/index.png"></image>
								</view>
								<view class="img_text">需求发布</view>
							</view>
							<!-- 创意工厂 -->
							<view class="more_action" @close="close" @click="NavChange" data-cur="industry">
								<view class='more_image'>
									<image src="../../static/tabBar/index.png"></image>
								</view>
								<view class="img_text">创意工厂</view>
							</view>
						</view>
						<view class="more_jian"></view>
					</u-popup>
					<image class="logo_btn" mode="widthFix" src="../../static/logo.png" @click="show = true"></image>
				</view>

				<view class="action" @click="NavChange" data-cur="product">
					<view class='cuIcon-cu-image'>
						<!-- <view class="cu-tag badge">{{message}}</view> -->
						<image v-if="PageCur=='product'" src="../../static/tabBar/order_cur.png"></image>
						<image v-if="PageCur != 'product'" src="../../static/tabBar/order.png"></image>
					</view>
					<view :class="PageCur=='product'?'color_main':'text-gray'">产品分类</view>
				</view>

				<view class="action" @click="NavChange" data-cur="my">
					<view class='cuIcon-cu-image'>
						<image v-if="PageCur=='my'" src="../../static/tabBar/me_cur.png"></image>
						<image v-if="PageCur != 'my'" src="../../static/tabBar/me.png"></image>
					</view>
					<view :class="PageCur=='my'?'color_main':'text-gray'">我的</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import index from "./index.vue"; //首页
	import report from "./report.vue"; //行业报告
	import release from "./release.vue"; //需求发布
	import industry from "./industry.vue"; //需求发布
	import product from "./product.vue"; //产品分类
	import my from "./my.vue"; //我的
	export default {
		components: {
			index,
			report,
			release,
			industry,
			product,
			my
		},
		data() {
			return {
				PageCur: 'index',
				// message: '0',
				openId: '',
				access_token: '',
				tip: "我是提示",
				duration: 1,
				// 显示更多tabbar
				show: false
			};
		},
		methods: {
			ShowNews(e) {
				console.log(e)
				this.PageCur = e;
			},
			close() {
				this.show = false
			},
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur;
			}

		}
	}
</script>

<style lang="scss">
	.color_main {
		color: #000000;
		font-weight: 900;
	}

	.box {
		margin: 20upx 0;
	}

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

	}

	.cu-bar {
		z-index: 9999999999;
	}

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

	.cu-bar.tabbar .action {
		// margin-bottom: 50px;
	}

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

	.more_box {
		display: flex;
		align-items: center;
		min-height: 100upx;
		justify-content: space-around;

		.more_action {
			.more_image {
				image {
					width: 50upx;
					height: 50upx;
					display: inline-block;
				}
			}

			.img_text {}
		}
	}

	.more_jian {
		// width: 0px;
		// height: 0px;
		position: absolute;
		bottom: -10px;
		left: 45%;
		width: 0;
		height: 0;
		border-top: 10px solid white;
		border-right: 10px solid transparent;
		border-left: 10px solid transparent;
	}

	/deep/ .u-popup__content {
		background-color: #fff;
		position: relative;
		width: 180px;
		height: 80px;
		margin: 0 auto 86px auto;
		border-radius: 10px;
	}

	/deep/.header-overlay {}
</style>