H5-ThreeDoorder/components/b-restaurant-nav/b-restaurant-nav.vue

<template>
	<!-- 肯德基底部导航 -->
	<view class="b-restaurant-nav">
		<!-- 肯德基底部导航 -->
		<template v-if="BrandInfor['brand_id'] == 1">
			<view class="nav-KFC">
				<view class="b-restaurant-nav-item" @tap="SETNAVINDEX(index)" v-for="(item,index) in navtab">
					<image :src="Getnavindex == index?item['activation']:item['icon']" class="b-restaurant-nav-item-img"
						mode="">
					</image>
					<view class="b-restaurant-nav-item-title" :style="{color:Getnavindex == index?'#C63836':'#999999'}">
						{{item['title']}}
					</view>
				</view>
			</view>
		</template>
		<!-- 肯德基底部导航 -->
		<template v-if=" BrandInfor['brand_id'] == 5">
			<view class="nav-KFC">
				<view class="b-restaurant-nav-item" @tap="SETNAVINDEX(index)" v-for="(item,index) in mdlbtnnav">
					<image :src="Getnavindex == index?item['activation']:item['icon']" class="b-restaurant-nav-item-img"
						mode="">
					</image>
					<view class="b-restaurant-nav-item-title" :style="{color:Getnavindex == index?'#FFA200':'#999999'}">
						{{item['title']}}
					</view>
				</view>
			</view>
		</template>
		<!-- 瑞幸底部导航 -->
		<template v-if="BrandInfor['brand_id'] == 13">
			<view class="nav-rx">
				<view class="b-restaurant-nav-item-RX" @tap="SETNAVINDEX(index)" v-for="(item,index) in navtab">
					<view class="b-restaurant-nav-item-RX-title">
						{{item['title']}}
					</view>
				</view>
			</view>
		</template>
		<!-- 星巴克 -->
		<template v-if="BrandInfor['brand_id'] == 10">
			<view class="nav-xbk">
				<view class="b-restaurant-nav-item-xbk" @tap="SETNAVINDEX(index)" v-for="(item,index) in xbkbtnnav">
					<image :src="item['activation']" class="b-restaurant-nav-item-xbk-img"
						mode="">
					</image>
					<view class="b-restaurant-nav-item-xbk-title" >
						{{item['title']}}
					</view>
				</view>
			</view>
		</template>
		<b-Bottom-Fit></b-Bottom-Fit>
	</view>
</template>

<script>
	import Vue from 'vue'
	/**
	 * @底部导航组件
	 * */
	import config from '@/static/js/config.js';
	import {
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		name: "b-restaurant-nav",
		data() {
			return {
				navtab: config['btnnav'],
				xbkbtnnav:config['xbkbtnnav'],
				mdlbtnnav:config['mdlbtnnav'],
			};
		},
		computed: {
			...mapGetters({
				Getnavindex: 'shopping/Getnavindex',
				// 获取品牌Id
				BrandInfor: 'shopping/BrandInfor',
			})
		},
		watch: {
			Getnavindex: {
				immediate: true,
				handler(val) {
					console.log(val, '导航索引变化');
					uni.setNavigationBarTitle({
						// 此处配置在/config/config/config.js
						title: config['btnnav'][val]['title']
					});
				}
			}
		},
		mounted() {
			
		},
		methods: {
			...mapMutations({
				SETNAVINDEX: 'shopping/SETNAVINDEX'
			}),
			/**
			 * @获取导航高度
			*/
			GetEMH(){
				return new Promise((resolve,reject)=>{
					let query = uni.createSelectorQuery().in(this);
					query.select('.b-restaurant-nav').boundingClientRect();
					query.exec(res => {
						Vue.prototype.NAVHEIGHT = res[0]['height'];
						console.log(this['NAVHEIGHT'],'NAVHEIGHT----');
						resolve();
					});
				})
			}
			// PageGo(index) {
			// 	this.SETNAVINDEX(index);
			// }
		}
	}
</script>

<style lang="scss">
	.b-restaurant-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;

		.nav-KFC,
		.nav-rx,
		.nav-xbk{
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding-top: 20rpx;
		}

		// 肯德基样式
		&-item {
			width: 50%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			&-img {
				width: 43rpx;
				height: 43rpx;
				margin-bottom: 13rpx;
			}

			&-title {
				font-size: $FONTSIZE24;
				font-weight: 700;
			}
		}
		
		// 瑞幸
		&-item-RX {
			width: 335rpx;
			height: 85rpx;
			text-align: center;
			line-height: 85rpx;
			border: 1rpx solid #4A6FE7;
			border-radius: 43rpx;
			color: $THEMECOLOR6;
			font-size: $FONTSIZE30;
		}
		
		
		// 星巴克样式
		&-item-xbk {
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
		
			&-img {
				width: 43rpx;
				height: 43rpx;
				margin-right: 15rpx;
			}
		
			&-title {
				font-size: $FONTSIZE24;
				font-weight: 700;
			}
		}
	}
</style>