Ci2Order.vue/App/components/z-tabbar/z-tabbar.vue

<template>
	<view>
		<view class="seat"></view>
		<view class="tabbar flex-n fac fja">
			<view class="item" :class="$store.state.tabbarRouter==item.router?'choose':''" :key="index"
				v-for="(item,index) in menuList" @click="gotoPage(item.router)">
				<image class="icon" :src="$store.state.tabbarRouter==item.router?item.selecetedIcon:item.icon"></image>
				<view class="text">{{item.name}}</view>
				<view class="num" v-if="item.router=='remind/index/index'&&askOrderCount>0">{{askOrderCount}}</view>
				<view class="num" v-if="item.router=='book/index/index'&&orderCount>0">{{orderCount}}</view>
				<view class="num" v-if="item.router=='settlement/index/index'&&orderUnfinishedCount>0">{{orderUnfinishedCount}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp({
		allowDefault: true
	});
	export default {
		name: 'z-tabbar',
		data() {
			return {
				askOrderCount: 0,
				orderCount: 0,
				orderUnfinishedCount: 0,
				choose: 1,
				menuList: [{
						icon: require('../../static/tabbar-1-0.png'),
						selecetedIcon: require('../../static/tabbar-1-1.png'),
						name: '提醒',
						router: 'remind/index/index'
					},
					{
						icon: require('../../static/tabbar-2-0.png'),
						selecetedIcon: require('../../static/tabbar-2-1.png'),
						name: '预订',
						router: 'book/index/index'
					},
					{
						icon: require('../../static/tabbar-3-0.png'),
						selecetedIcon: require('../../static/tabbar-3-1.png'),
						name: '结算',
						router: 'settlement/index/index'
					},
					{
						icon: require('../../static/tabbar-4-0.png'),
						selecetedIcon: require('../../static/tabbar-4-1.png'),
						name: '我的',
						router: 'center/index/index'
					},
				],
			}
		},
		mounted() {
			var that = this;
			uni.getStorage({
				key: 'tabbarRouter',
				success: (res) => {
					console.log(res.data)
					this.$store.state.tabbarRouter = res.data;
					this.gotoPage(res.data);
				},
				fail: () => {
					this.$store.state.tabbarRouter = 'book/index/index';
					this.gotoPage('book/index/index');
				}
			})
			this.getMenu();
		},
		methods: {
			getMenu() {
				this.$axios.get('storeAuth/findAppIdByRoleId/' + uni.getStorageSync('roleId')).then(res => {
					console.log('菜单', res.data)
					var menu = [];
					for (var i = 0, len = res.data.list.length; i < len; i++) {
						menu.push(res.data.list[i].app_menu_id);
					}
					console.log(menu)
					if (menu.indexOf('101') == -1 && menu.indexOf('102') == -1) {
						for (var i = 0, len = this.menuList.length; i < len; i++) {
							if (this.menuList[i].name == '提醒') {
								this.menuList.splice(i, 1);
								break;
							}
						}
					}
					console.log('42343')
					if (menu.indexOf('103') == -1) {
						for (var i = 0, len = this.menuList.length; i < len; i++) {
							if (this.menuList[i].name == '预订') {
								this.menuList.splice(i, 1);
								break;
							}
						}
					}
					if (menu.indexOf('104') == -1 && menu.indexOf('105') == -1) {
						for (var i = 0, len = this.menuList.length; i < len; i++) {
							if (this.menuList[i].name == '结算') {
								this.menuList.splice(i, 1);
								break;
							}
						}
					}
					// menuList
					console.warn('431344')
					uni.setStorage({
						key: 'menu',
						data: menu
					})
				}).catch(err => {
					// this.$refs.uToast.error(err.msg);
				})
			},
			gotoPage(router) {
				console.log('当前tabbar', router)
				uni.setStorage({
					key: 'tabbarRouter',
					data: router
				})

				this.$store.state.tabbarRouter = router;
				var that = this;
				uni.switchTab({
					url: '/pages/' + router,
					success: res => {
						console.log(this.$route)
						uni.$emit('switchTab',router);
						that.getTotal();
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getTotal() {
				this.$axios.post('app/common/getCalcCount/', {
					"storeId": uni.getStorageSync('storeId'),
					"startTime": this.$Date.getDayDate().date,
					"endTime": this.$Date.getDayDate().date
				}).then(res => {
					console.log(res)
					this.askOrderCount = res.data.askOrderCount;
					this.orderCount = res.data.orderCount;
					this.orderUnfinishedCount = res.data.orderUnfinishedCount;
				}).catch(err => {
					// this.$refs.uToast.error(err.msg);
				})
			}
		}

	}
</script>

<style scoped lang="scss">
	.seat {
		height: 98rpx;
	}

	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 500;
		width: 100%;
		height: 98rpx;
		background: white;
		box-shadow: 0px 1rpx 30rpx 0rpx rgba(53, 64, 84, 0.1);

		.choose {
			color: #2481EE !important;
		}

		.item {
			color: #333333;
			text-align: center;
			position: relative;

			.icon {
				width: 40rpx;
				height: 40rpx;
				// background: #F1F1F1;
				margin: 0 auto;
			}

			.text {
				font-size: 24rpx;
				margin-top: -4rpx;
			}

			.num {
				font-size: 24rpx;
				min-width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				line-height: 36rpx;
				text-align: center;
				background: #DD524D;
				color: white;
				position: absolute;
				top: -10rpx;
				right: -14rpx;
			}
		}
	}
</style>