gwlz/jp-mobile/pages/index/index.vue

<template>
	<view>
		<addressbook v-if="PageCur=='addressbook'"></addressbook>
		<message v-if="PageCur=='message'"></message>
		<workbench v-if="PageCur=='workbench'"></workbench>
		<apps v-if="PageCur=='apps'"></apps>
		<person v-if="PageCur=='my'"></person>
		<view class="cu-bar tabbar bg-white shadow foot">
			<view class="action" @click="NavChange" data-cur="addressbook">
				<view :class="PageCur=='addressbook'?'text-blue':'text-gray'">
					<text class="lg" :class="PageCur=='addressbook'?'cuIcon-addressbook':'cuIcon-addressbook'"></text>
					<text>通讯录</text>
				</view>
			</view>
			<view class="action" @click="NavChange" data-cur="message">
				<view :class="PageCur=='message'?'text-blue':'text-gray'">
					<text class="lg" :class="PageCur=='message'?'cuIcon-messagefill':'cuIcon-message'">
						<text class='cu-tag badge'>0</text>
					</text>
					<text>消息</text>
				</view>
			</view>
			<view class="action text-gray add-action"  @click="NavChange" data-cur="workbench">
				<button class="cu-btn  shadow" :class="PageCur=='workbench'?'cuIcon-homefill bg-blue':'cuIcon-home bg-grey'"></button>
				工作台
			</view>
			
			<view class="action" @click="NavChange" data-cur="apps">
				<view :class="PageCur=='apps'?'text-blue':'text-gray'">
					<text class="lg" :class="PageCur=='apps'?'cuIcon-circlefill':'cuIcon-circle'"></text>
					<text>应用</text>
				</view>
			</view>
			
			<view class="action" @click="NavChange" data-cur="my">
				<view :class="PageCur=='my'?'text-blue':'text-gray'">
					<text class="lg" :class="PageCur=='my'?'cuIcon-profilefill':'cuIcon-profile'"></text>
					<text>我的</text>
				</view>
			</view>
	
		</view>
	</view>
</template>

<script>
	import addressbook from '@/pages/addressbook/addressbook.vue'
	import person from '@/pages/user/person/person.vue'
	import message from '@/pages/message/message.vue'
	import workbench from '@/pages/workbench/workbench.vue'
	import apps from '@/pages/apps/apps.vue'
	export default {
		components:{
			person,
			message,
			workbench,
			apps,
			addressbook
		},
		data() {
			return {
				PageCur: 'workbench'
			}
		},
		methods: {
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur
			}
		}
	}
</script>

<style>
.cu-tag.badge {
	right: 4px;
}
</style>