caimei-applets-caimei/components/cm-module/home/navInfor.vue

<template name="navinfor">
	<!-- 优选分类 -->
	<view class="tabbar clearfix">
		<view class="cate-item" @click="this.$api.navToListPage({type:'星范优惠',value:navInforList[0].text})">
			<image :src="navInforList[0].icon"></image>
			<text>{{navInforList[0].text}}</text>
		</view>
		<view class="cate-item" @click="this.$api.navToListPage({type:'惊喜特惠',value:navInforList[1].text})">
			<image :src="navInforList[1].icon"></image>
			<text>{{navInforList[1].text}}</text>
		</view>
		<view class="cate-item" @click="showTost">
			<image :src="navInforList[2].icon"></image>
			<text>{{navInforList[2].text}}</text>
		</view>
		<view class="cate-item">
			<!-- #ifdef MP-WEIXIN -->
			<button class="contact-btn" open-type="contact" @bindcontact="handleContact">
				<image :src="navInforList[3].icon"></image>
			</button>	
			<!-- #endif -->
			<text>{{navInforList[3].text}}</text>
		</view>
	</view>
</template>

<script>
	var self; 
	export default{
		name:'navinfor',
		props:{
		    navInforList: { // 由父页面传递的数据
				type: Array,
				value: [],
		    },
		},
		data() {
			return{

			}
		},
		created() {
		},
		onLoad(){
			
		},
		methods:{
			handleContact(e){
				console.log(e.detail.path)
				console.log(e.detail.query)
			},
			showTost(){
				uni.showToast({
					icon: 'none',
					title: '正在开发中，敬请期待~',
					duration: 2000
				})
			}
		},
		onShow(){
	
		}
	}
</script>

<style lang="scss">
	.cate-item {
		width: 160rpx;
		margin-right:20.666rpx;
		display: flex;
		float: left;
		flex-direction: column;
		align-items: center;
		font-size: $font-size-26;
		color: $text-color;
		line-height: 36rpx;
		&:last-child{
			margin-right: 0;
		}
		image {
			width: 160rpx;
			height: 90rpx;
			margin-bottom: 16rpx;
		}	
		button.contact-btn{
			width: 160rpx;
			height: 90rpx;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			box-sizing: border-box;
			text-align: center;
			text-decoration: none;
			border-radius: 0;
			-webkit-tap-highlight-color: transparent;
			overflow: hidden;
			background-color:#FFFFFF;
			margin-bottom: 16rpx;
			image{
				width: 160rpx;
				height: 90rpx;
				margin-bottom: 0;
			}
		}
	}
</style>