hengmei-one/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>
		<!-- 弹框授权 -->
		<empower :vision="vision" @cancleEv="cancleEv"></empower>
    </view>
</template>
<script>
	import empower from '@/components/empower.vue';
    export default {
		components:{
			empower
		},
        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,
				jieDuan:false
            };
        },
		mounted() {
			if(uni.getStorageSync('is_active')==0) this.isKef = false
		},
        methods:{
			cancleEv(e){
				if(e==0) this.vision = false
			},
            choosefoot(index){
                // this.current = index
				switch (index){
					case 0:
					// console.log(this.imgList[index].selectedIcoPath);
					uni.reLaunch({url:'/pages/tabbar/pagehome/pagehome'})
						break;
					case 1:
					if(!this.jieDuan){
						let isAuth = this.$toolAll.tools.returnAuth()
						if(!isAuth){
							uni.reLaunch({url:'/pages/tabbar/cate/cate'})
						} else this.jieDuan = true
					}
						break;
					case 2:
					if(!this.jieDuan){
						let isAuth = this.$toolAll.tools.returnAuth()
						if(!isAuth){
							this.$toolAll.tools.closeTimer()//清空埋点倒计时
							// uni.navigateTo({url:'/pages/tabbar/pagehome/pagehome'})
							this.$requst.post('user/record',{type:'other',action:'ask',id:0}).then(res=>{},error=>{})
							let maiOjb = {
								e:5,//内容咨询
								t:new Date().getTime()//当前时间戳
							}
							this.$toolAll.tools.maiDian(maiOjb)
						} else this.jieDuan = true
					}
						break;
					case 3:
					if(!this.jieDuan){
						let isAuth = this.$toolAll.tools.returnAuth()
						if(!isAuth){
							// uni.reLaunch({url:'/pages/tabbar/shop/shop'})
							this.isShowT = true
						} else this.jieDuan = true
					}
					// uni.navigateTo({url:'/pages/tabbar/shop/shop'})
						break;
					case 4:
					if(!this.jieDuan){
						let isAuth = this.$toolAll.tools.returnAuth()
						if(!isAuth){
							uni.reLaunch({url:'/pages/tabbar/my/my'})
						} else this.jieDuan = true
					}
						break;
				}
            },
			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>