orderSystemJp/raising-vue-uniapp/components/custom-tabbar/index.vue

<!-- 自定义Tabbar组件  -->
<template>
	<view class="custom-tabbar" :class="isIPad ? 'ipad' : ''">
		<view class="cu-bar tabbar bg-white">
			<view class="action" @click="onChange(0, '/patient/views/home/index')"
			 :class="activeIndex == 0 ? ' text-blue' : 'text-gray'">
				<view class="cuIcon-home"></view> 首页
			</view>
			<view class="flex justify-center align-center">
				<view class="action" @click="onChange(0, '/patient/views/home/index')"
				 :class="activeIndex == 1 ? ' text-blue' : 'text-gray'">
					<view class="cuIcon-group_fill"></view> 群组
				</view>
			</view>
			<view class="action" @click="onChange(0, '/patient/views/user-center/index')"
				:class="activeIndex == 2 ? ' text-blue' : 'text-gray'">
				<view class="cuIcon-friendfavor"></view> 我的
			</view>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	import api from '@/utils/api'
	import util from '@/utils/util'
	import __config from '@/config/env';

	export default {
		props: {
			active: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				isIPad: app.globalData.isIPad,
				activeIndex: this.active,
				tabbarImg: util.spliceBgImgUrl('/tabbar-btn.png'),
			};
		},
		methods: {
			onChange(index, url) {
				util.reLaunchToPage(url)
			},
			
			/* 跳转到预约页面 */
			goToSubscribePage(){
				let _this = this
				let params = {
					pageNum: 1, 
					pageSize: 1
				}
				api.getPatientPageList(params).then(res => {
					if(res.data.total > 0){
						util.navigateToPage('/patient/views/subscribe/index')
					}else{
						uni.showModal({
							title: '提示',
							content: '查询到您还没有添加就诊人, 是否前去添加就诊人?',
							showCancel: true,
							confimrText: '前往添加',
							confirmColor: '#1857EA',
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
									util.navigateToPage('/patient/views/user-center/patient-manage/index')
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				})
			}
		}
	};
</script>
<style lang="scss">
	.custom-tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1;
		clear: both;
		
		.tabbar-icon-btn{
			background-repeat: no-repeat;
			background-size: 100%;
			width: 110upx;
			height: 70rpx;
			text-align: center;
		}
	}
	
	
	.custom-tabbar.ipad {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1;
		clear: both;
		
		.tabbar-icon-btn{
			background-repeat: no-repeat;
			background-size: 100%;
			width: 110upx;
			height: 40rpx;
			text-align: center;
		}
	}
</style>