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

<template name="navserver">
	<!-- 优选分类 -->
	<view class="tabbar clearfix">
		<view class="cate-item" @click="showTost">
			<image :src="navServerList[0].icon"></image>
			<text>{{navServerList[0].text}}</text>
		</view>
		<view class="cate-item" @click="navto(navServerList[1].path)">
			<image :src="navServerList[1].icon"></image>
			<text>{{navServerList[1].text}}</text>
		</view>
		<view class="cate-item" @click="navto(navServerList[2].path)">
			<image :src="navServerList[2].icon"></image>
			<text>{{navServerList[2].text}}</text>
		</view>
		<view class="cate-item" @click="telPhoneTo">
			<image :src="navServerList[3].icon"></image>
			<text>{{navServerList[3].text}}</text>
		</view>
	</view>
</template>

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

			}
		},
		created() {

		},
		onLoad(){
			
		},
		methods:{
			showTost(){
				uni.showToast({
					icon: 'none',
					title: '正在开发中，敬请期待~',
					duration: 2000
				})
			},
			navto(url){
				uni.navigateTo({
					url
				})
			},
			telPhoneTo(){
				let self = this;
				uni.makePhoneCall({
				    phoneNumber:self.telPhone //仅为示例
				});
			}
		},
		onShow(){
	
		}
	}
</script>

<style lang="scss">
	/*底部服务导航*/
	.cate-item {
		width: 99rpx;
		margin-right: 102rpx;
		float: left;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: $font-size-24;
		color: $text-color;
		&:last-child{
			margin-right: 0;
		}
		image {
			width: 75rpx;
			height: 75rpx;
			margin-bottom: 8rpx;
			border-radius: 50%;
		}
	}
</style>