195 lines
4.1 KiB
Vue
195 lines
4.1 KiB
Vue
<!--
|
|
* @Date: 2022-06-28 10:24:32
|
|
* @LastEditTime: 2022-06-29 11:37:17
|
|
* @Description: 自定义tabbar
|
|
-->
|
|
<template>
|
|
<view class="_tab-bar fade" >
|
|
<view class="_tab-bar-content" ></view>
|
|
<view class="_tab-bar-inner">
|
|
<view class="_tab-bar-inner-bg"></view>
|
|
<view @click="toPage(item)" v-for="(item, i) of list" :key="i" class="_tab-bar-inner-item">
|
|
<image v-if="index+1 == item.id" :src="item.actIcon" mode="scaleToFill" />
|
|
<image v-else :src="item.icon" mode="scaleToFill" />
|
|
<view :style="index+1 == item.id ? 'color:#70EDE8' : 'color:#999'">{{item.title}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'tab-bar',
|
|
props: {
|
|
index: {
|
|
type: [String, Number],
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
list: []
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* @description: 跳转页面
|
|
* @return {*}
|
|
*/
|
|
toPage(e) {
|
|
uni.redirectTo({
|
|
url: e.path
|
|
})
|
|
}
|
|
|
|
|
|
},
|
|
created() {
|
|
let that = this
|
|
this.req({
|
|
url: 'open_card',
|
|
success(res) {
|
|
// uni.setStorageSync('empty', res.data.userinfo.is_y_quota)
|
|
console.log('aaaaaaaaaaaaaaaa');
|
|
if (res.data.data.open_card == 1) {
|
|
that.list = [{
|
|
id: 1,
|
|
icon: '/static/tabbar/chousang.png',
|
|
actIcon: '/static/tabbar/chousang_sel.png',
|
|
title: '首页',
|
|
path: '/pages/shouye/index'
|
|
},
|
|
{
|
|
id: 2,
|
|
icon: '/static/tabbar/wuxian.png',
|
|
actIcon: '/static/tabbar/wuxian_sel.png',
|
|
title: '无限赏',
|
|
path: '/pages/infinite/index'
|
|
},
|
|
{
|
|
id: 3,
|
|
icon: '/static/tabbar/ka.png',
|
|
actIcon: '/static/tabbar/ka_sel.png',
|
|
title: '抽卡',
|
|
path: '/pages/DrawCard/index'
|
|
},
|
|
{
|
|
id: 4,
|
|
icon: '/static/tabbar/hegui.png',
|
|
actIcon: '/static/tabbar/hegui_sel.png',
|
|
title: '盒柜',
|
|
path: '/pages/hegui/hegui'
|
|
},
|
|
{
|
|
id: 5,
|
|
icon: '/static/tabbar/mine.png',
|
|
actIcon: '/static/tabbar/mine_sel.png',
|
|
title: '我的',
|
|
path: '/pages/user/index'
|
|
}
|
|
|
|
]
|
|
} else {
|
|
that.list = [{
|
|
id: 1,
|
|
icon: '/static/tabbar/chousang.png',
|
|
actIcon: '/static/tabbar/chousang_sel.png',
|
|
title: '首页',
|
|
path: '/pages/shouye/index'
|
|
},
|
|
{
|
|
id: 2,
|
|
icon: '/static/tabbar/shop.png',
|
|
actIcon: '/static/tabbar/shop_sel.png',
|
|
title: '商城',
|
|
path: '/pages/shop/index'
|
|
},
|
|
{
|
|
id: 3,
|
|
icon: '/static/tabbar/hegui.png',
|
|
actIcon: '/static/tabbar/hegui_sel.png',
|
|
title: '盒柜',
|
|
path: '/pages/hegui/hegui'
|
|
},
|
|
{
|
|
id: 4,
|
|
icon: '/static/tabbar/wuxian.png',
|
|
actIcon: '/static/tabbar/wuxian_sel.png',
|
|
title: '无限赏',
|
|
path: '/pages/infinite/index'
|
|
},
|
|
{
|
|
id: 5,
|
|
icon: '/static/tabbar/mine.png',
|
|
actIcon: '/static/tabbar/mine_sel.png',
|
|
title: '我的',
|
|
path: '/pages/user/index'
|
|
}
|
|
|
|
]
|
|
}
|
|
}
|
|
})
|
|
|
|
},
|
|
mounted() {
|
|
// console.log(uni.getStorageSync('empty'));
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
._tab-bar {
|
|
image {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
|
|
width: 100%;
|
|
|
|
&-content {
|
|
width: 100%;
|
|
height: 100rpx;
|
|
}
|
|
|
|
&-inner {
|
|
width: 100%;
|
|
padding-top: 20rpx;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 518;
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
&-bg {
|
|
width: 100%;
|
|
height: 98rpx;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 0;
|
|
background: #0A0A0A;
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
&-item {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 100rpx;
|
|
height: 98rpx;
|
|
top: 10rpx;
|
|
color: #999;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
font-size: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|