junzitang/components/PageDesign/components/NavBar.vue

<template>
	<div class="NavBar clearfix" :style="{ backgroundColor: modelData.bgColor }">
		<div class="nav-li" v-for="(item, index) in modelData.navList" :key="index"
			:style="{ width: 100 / modelData.num + '%' }" @click="navTo(item.url, item.switchTab,item)">
			<image class="nav-icon" :src="item.image.url" mode="aspectFit"></image>
			<div :style="{ color: modelData.color }" class="nav-text">{{ item.text || '文字标题' }}</div>
		</div>
		<NoLoginTip @cancel="cancelTip" :show="loginTip" v-if="loginTip" />
	</div>
</template>

<script>
	import NoLoginTip from '../../NoLoginTip.vue';
	export default {
		name: 'NavBar',
		components: {
			NoLoginTip
		},
		props: {
			modelData: {
				type: Object,
				default: () => {
					return {};
				}
			}
		},
		data() {
			return {
				loginTip: false
			};
		},
		methods: {
			cancelTip() {
				this.loginTip = false;
			},
			navTo(url, switchTab, item) {
				if (!this.$common.isLogin()) {
					this.loginTip = true;
				} else {
					if (item.text == '企业文化') {
						this.goPage('/pagesT/unit/artdetail?type=2', switchTab);
					} else if (item.text == '高管') {
						this.goPage('/pagesT/unit/official?type=4', switchTab);
					} else if (item.text == '员工') {
						this.goPage('/pagesT/unit/official?type=5', switchTab);
					} else if (item.text == '项目') {
						this.goPage('/pagesT/unit/item', switchTab);
					} else if (item.text == '会员') {
						this.goPage('/pagesT/user/VipList',switchTab)
					} else if (item.text == '股权') {
						this.goPage('/pagesT/user/guquan', switchTab);
					} else if (item.text == '共享股东') {
						this.goPage('/pagesT/unit/official?type=3', switchTab);
					} else if (item.text == '招商') {
						this.goPage('/pagesT/unit/officialT?state=0', switchTab);
					} else if (item.text == '招聘') {
						this.goPage('/pagesT/unit/artdetail?type=1', switchTab);
					}else if (item.text == '邀请好友') {
						this.goPage('/pagesT/Distribution/Poster', switchTab);
					}else {
						this.goPage(url, switchTab);
					}
				}
			}
		}
	};
</script>

<style scoped>
	.NavBar {
		padding: 32rpx 0 8rpx;
		display: -webkit-flex;
		display: flex;
		width: 100%;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.nav-icon {
		width: 88upx;
		height: 88upx;
		border-radius: 20rpx;
		margin: 0 auto;
		display: block;
	}

	.nav-text {
		padding-top: 12upx;
	}

	.nav-li {
		font-size: 24upx;
		text-align: center;
		font-weight: 400rpx;
		margin-bottom: 24upx;
	}
</style>