hengmei-two/components/foot-tab.vue

170 lines
5.7 KiB
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>