caimei-applets-caimei/components/cm-module/bottomMenu/bottomMenu.vue

<template name="menu">
	<view class="menu">
		<view class="isLower" v-if="disabled">该商品已下架~</view>
		<view class="bottom-btn">
			<view class="bottom-le">
				<view class="item-bt" @click="navSwitchTab('/pages/tabBar/home/index')">
					<image src="../../../static/tab-home-current.png"></image>
					<text>首页</text>
				</view>
				<view class="item-bt">
					<!-- #ifdef MP-WEIXIN -->
					<button class="contact-btn" open-type="contact" @bindcontact="handleContact">
						<image src="../../../static/severs@3x.png"></image>
						<text>客服</text>
					</button>	
					<!-- #endif -->
				</view>
				<view class="item-bt" @click="navSwitchTab('/pages/tabBar/cart/cart')">
					<image src="../../../static/tab-cart-current.png"></image>
					<text>购物车</text>
					<text  	v-if="cartCount !==''"
							class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
							:class="[cartCount < 10 ? 'goleft':'']">
							{{ cartCount >= 100 ? '99+': cartCount }}
					</text>
				</view>
			</view>
			<view class="bottom-ri">
				<button  
						:disabled="disabled" 
						class="btn btn-cart" 
						:class="[disabled ? 'disabled':'']"
						@tap="btnConfirm('add')">加入购物车</button>
				<button  
						:disabled="disabled" 
						class="btn btn-bay" 
						:class="[disabled ? 'disabled':'']"
						@tap="btnConfirm('buy')">立即购买</button>
			</view>
		</view>	
	</view>
</template>

<script>
	export default{
		name:'menu',
		props:{
			goodsData:Object
		},
		data() {
			return{
				 cartCount:0,
				 disabled:false
			}
		},
		created() {
			this.cartCount = this.goodsData.cartCount
			this.disabled = this.goodsData.disabled
		},
		methods:{
			handleContact(e){//跳转客服
				console.log(e.detail.query)
			},
			//点击事件
			btnConfirm(type){
				console.log(type)
				this.$emit('showSpec',type)
			},	
			navSwitchTab(url){
				uni.switchTab({
				    url
				});
			},
			navto(url){
				uni.navigateTo({
					url
				})
			},
		},
	}
</script>

<style lang="scss">
	.isLower{
		width: 100%;
		height: 90rpx;
		background-color: rgba(0,0,0,.8);
		line-height: 90rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: $font-size-28;
		position: fixed;
		bottom: 110rpx;
		left: 0;
	}
	.bottom-btn{
		width: 100%;
		height: 110rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #FFFFFF;
		z-index: 99;
		.bottom-le{
			width: 302rpx;
			height: 86rpx;
			padding:12rpx 24rpx;
			float: left;
			.item-bt{
				width: 86rpx;
				height: 100%;
				margin-right:22rpx;
				display: flex;
				float: left;
				flex-direction: column;
				align-items: center;
				font-size: $font-size-24;
				color: $text-color;
				line-height: 34rpx;
				position: relative;
				.icon-num{
					position: absolute;
					right:-9rpx;
					top: -9rpx;
				}
				.icon-num.goleft{
					right: 4rpx;
				}
				&:last-child{
					margin-right: 0;
				}
				image {
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 8rpx;
				}
				button.contact-btn{
					width: 100%;
					height: 100%;
					margin: 0;
					padding: 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					box-sizing: border-box;
					font-size: $font-size-24;
					text-align: center;
					text-decoration: none;
					line-height: 34rpx;
					border-radius: 0;
					-webkit-tap-highlight-color: transparent;
					overflow: hidden;
					color: $text-color;
					background-color:#FFFFFF;
				}
			}
		}
		.bottom-ri{
			width: 400rpx;
			height: 100%;
			float: left;
			display: flex;
			.btn{
				flex: 1;
				width: 200rpx;
				line-height: 110rpx;
				text-align: center;
				font-size: $font-size-28;
				color: #FFFFFF;
			}
			.btn-cart{
				background-color: #000000;
			}
			.btn-cart.disabled{
				background-color: #7F7F7F;
			}
			.btn-bay{
				background-color: #FF2A2A;
			}
			.btn-bay.disabled{
				background-color: #FF9494;
			}
		}
	}
	.uni-badge--small {
		-webkit-transform: scale(.8);
		-ms-transform: scale(.8);
		transform: scale(.8);
		-webkit-transform-origin: center center;
		-ms-transform-origin: center center;
		transform-origin: center center;
	}
	.uni-badge {
		font-family: 'Helvetica Neue', Helvetica, sans-serif;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		font-size: 12px;
		line-height: 1;
		display: inline-block;
		padding: 3px 6px;
		color: #333;
		border-radius: 100px;
		background-color: #f1f1f1;
	}
	.uni-badge-error {
		color: #fff;
		background-color: #dd524d;
	}
</style>