hengmei-two/components/foot-tab.vue

<template>
    <view>
		<!-- 方案一 -->
       <!-- <view class="foot-box">
            <view @tap="choosefoot(index)" v-for="(item,index) in tabArr" :key="index" style="display: flex;justify-content: center;flex-direction: column;align-items: center;">
				<image class="moImg" v-if="newcurrent==index" :src="item.selectedIconPath"></image>
				<image class="moImg" v-else :src="item.iconPath"></image>
                <view :class="newcurrent==index?'footactive':'footmo'" style="margin-top: 8rpx;">{{item.text}}</view>
            </view>
        </view> -->
		
		<!-- 方案二 -->
		<view class="foot-boxtwo">
			<!-- 图片列表 -->
			<view class="item-box">
				<view v-for="(itemi,index) in imgList" :key="index" @tap="choosefoot(index)" :class="index==2 ? 'centerBox':''">
					<view class="posir" :class="index==2 ? 'centerBox-item':''">
						<image :class="index==2 ? 'centerImg':'moImg'" v-if="newcurrent==index" :src="itemi.selectedIconPath"></image>
						<image :class="index==2 ? 'centerImg':'moImg'" v-else :src="itemi.iconPath"></image>
						<button v-if="index==2 && isKef" class="fon24 posia" style="opacity: 0;top: 0;left: 0;right: 0;bottom: 0;" open-type="contact">客服</button>
					</view>
				</view>
			</view>
			<!-- 标题列表 -->
			<view class="item-box">
				<view @tap="choosefoot(index)" :class="newcurrent==index ? 'footactive':'footmo'"
				 v-for="(itemt,index) in titleList" :key="index">{{itemt}}</view>
			</view>
		</view>
		<!-- 弹框 -->
		<pu-po :isShowT="isShowT" :comfrimVal="'好的'" :contentVal="'暂未开放此功能，请耐心等候'" 
		:isCenter="true" @comfirmev="comfirmev"></pu-po>
    </view>
</template>
<script>
    export default {
        name:'footTab',
		props:{
			newcurrent:{
				type:Number,
				default:0
			},
			titleList:{
				type:Array,
				default:function(){
					return uni.getStorageSync('footTitle')
					// return ['首页','分类','客服','商城','我的']
				}
			},
			imgList:{
				type:Array,
				default:function(){
					return uni.getStorageSync('imgList')
					// return [
					// 	{
					// 		iconPath: '/static/tabbar/homem.png',//默认icon
					// 		selectedIconPath: '/static/tabbar/homeAc.png',//选中icon
					// 	},
					// 	{
					// 		iconPath: '/static/tabbar/catem.png',//默认icon
					// 		selectedIconPath: '/static/tabbar/cates.png',//选中icon
					// 	},
					// 	{
					// 		iconPath: '/static/tabbar/customerm.png',//默认icon
					// 		selectedIconPath: '/static/tabbar/customerm.png',//选中icon
					// 	},
					// 	{
					// 		iconPath: '/static/tabbar/shopm.png',//默认icon
					// 		selectedIconPath: '/static/tabbar/shopa.png',//选中icon
					// 	},
					// 	{
					// 		iconPath: '/static/tabbar/mym.png',//默认icon
					// 		selectedIconPath: '/static/tabbar/mya.png',//选中icon
					// 	}
					// ]
				}
			}
		},
        data() {
            return {
				vision:false,
				isShowT:false,
				isKef:true,
            };
        },
		mounted() {
			if(uni.getStorageSync('phone_active')==0) this.isKef = false
		},
        methods:{
			cancleEv(e){
				if(e==0) this.vision = false
			},
            choosefoot(index){
				let existMobile = uni.getStorageSync('phone_active');
                // this.current = index
				switch (index){
					case 0:
					uni.reLaunch({url:'/pages/tabbar/pagehome/pagehome'})
						break;
					case 1:
					existMobile!='' ? uni.reLaunch({url:'/pages/tabbar/cate/cate?index=0'}) : this.goLogin();
						break;
					case 2:
					if(existMobile!=''){
						// wx.openCustomerServiceChat({
						// 	extInfo: {url: `https://work.weixin.qq.com/kfid/kfcb3bba5b57d9a42ba?enc_scene=ENC616HXDjLYNcmsR49PBE75UERg8Ncv3dygpYjfnh3XVvA&scene_param=${uni.getStorageSync('openid')}`},
						// 	corpId: 'ww1f86f258d4ff5817',
						// 	success(res) {}
						// })
						this.$requst.post('user/rand-bind-service').then(res=>{})
						this.$toolAll.tools.closeTimer()//清空埋点倒计时
						this.$requst.post('user/record',{type:'other',action:'ask',id:0}).then(res=>{},error=>{})
						// 调用tools.js中的种植埋点事件
						this.$toolAll.tools.plantPoint(5);
					} else this.goLogin()
						break;
					case 3:
					existMobile!='' ? uni.reLaunch({url:'/pages/tabbar/shop/shop'}) : this.goLogin();
						break;
					case 4:
					existMobile!='' ? uni.reLaunch({url:'/pages/tabbar/my/staffDuan'}) : this.goLogin();
						break;
				}
            },
			// 前往登录页
			goLogin(){
				uni.reLaunch({
					url:'/pages/login/login'
				})
			},
			comfirmev(){
				this.isShowT = false
			}
        }
    }
</script>

<style>
	/* 方案一 */
	/* .foot-box{
		height: 140rpx;
		font-size: 24rpx;
		border-top: 1rpx solid #FFFFFF;
		background-color: #FFFFFF;
        position: fixed;bottom: 0;left: 0;right: 0;
		display: flex;justify-content: space-around;align-items: center;
	}*/
	
	/* 方案二 */
	.foot-boxtwo{
		height: 140rpx;
		font-size: 24rpx;
		border-top: 1rpx solid #FFFFFF;
		background-color: #FFFFFF;
		position: fixed;bottom: 0;left: 0;right: 0;z-index: 10;
		display: flex;flex-direction: column;justify-content: center;
	}
	.item-box{display: flex;justify-content: space-around;align-items: center;}
	.item-box>view{width: 25%;text-align: center;}
	.centerBox{display: flex;justify-content: center;align-items: center;}
	/* .centerBox-item{width: 124rpx;height: 124rpx;background-color: rgba(244, 244, 244, 1);margin-top: -100rpx;border-radius: 100%;display: flex;justify-content: center;align-items: center;} */
	.centerBox-item{width: 124rpx;height: 124rpx;margin-top: -100rpx;border-radius: 100%;display: flex;justify-content: center;align-items: center;}
	.centerImg{width: 112rpx;height: 112rpx;}
	
	/* 公共 */
	.moImg{width: 64rpx;height: 64rpx;}
	.footactive{color: #000000;}
	.footmo{color: #999999;}
</style>