205 lines
4.3 KiB
Vue
205 lines
4.3 KiB
Vue
<template>
|
|
<view>
|
|
<u-tabbar
|
|
:value="current ? current : 0"
|
|
:fixed="true"
|
|
:placeholder="false"
|
|
:border="false"
|
|
:safeAreaInsetBottom="true"
|
|
inactiveColor="#666666"
|
|
activeColor="#333333"
|
|
>
|
|
<u-tabbar-item name="index" @click="handleClick" :text="'首页'">
|
|
<image
|
|
class="u-page__item__slot-icon"
|
|
slot="active-icon"
|
|
src="@/static/images/one1.png"
|
|
></image>
|
|
<image
|
|
class="u-page__item__slot-icon"
|
|
slot="inactive-icon"
|
|
src="@/static/images/one2.png"
|
|
></image>
|
|
</u-tabbar-item>
|
|
|
|
<u-tabbar-item
|
|
@click="handleClick"
|
|
v-if="!newShareMember"
|
|
:text="'个人推广'"
|
|
name="share"
|
|
>
|
|
<image
|
|
class="u-page__item__slot-icon"
|
|
slot="active-icon"
|
|
src="@/static/images/share-act.svg"
|
|
></image>
|
|
<image
|
|
class="u-page__item__slot-icon"
|
|
slot="inactive-icon"
|
|
src="@/static/images/share.svg"
|
|
></image>
|
|
</u-tabbar-item>
|
|
|
|
<u-tabbar-item
|
|
@click="handleClick"
|
|
:text="'购物车'"
|
|
:badge="shopCarLength"
|
|
name="shoppingCar"
|
|
>
|
|
<image
|
|
class="u-page__item__slot-icon"
|
|
slot="active-icon"
|
|
src="@/static/images/three1.png"
|
|
></image>
|
|
<image
|
|
class="u-page__item__slot-icon"
|
|
slot="inactive-icon"
|
|
src="@/static/images/three2.png"
|
|
></image>
|
|
</u-tabbar-item>
|
|
|
|
<u-tabbar-item @click="handleClick" :text="'我的'" name="mine">
|
|
<image
|
|
class="u-page__item__slot-icon"
|
|
slot="active-icon"
|
|
src="@/static/images/fore1.png"
|
|
></image>
|
|
<image
|
|
class="u-page__item__slot-icon"
|
|
slot="inactive-icon"
|
|
src="@/static/images/fore2.png"
|
|
></image>
|
|
</u-tabbar-item>
|
|
</u-tabbar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
export default {
|
|
props: {
|
|
current: String,
|
|
},
|
|
data() {
|
|
return {
|
|
newShareMember: false,
|
|
currentTab: 0,
|
|
list: [
|
|
{
|
|
text: '首页',
|
|
path: 'pages/index/index',
|
|
name: 'index',
|
|
},
|
|
{
|
|
text: '个人推广',
|
|
path: 'pages/mine/share/index',
|
|
name: 'share',
|
|
},
|
|
|
|
{
|
|
text: '购物车',
|
|
path: 'pages/shoppingCar/index',
|
|
name: 'shoppingCar',
|
|
},
|
|
|
|
{
|
|
text: '我的',
|
|
path: 'pages/mine/index',
|
|
name: 'mine',
|
|
},
|
|
],
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['shopCarLength', 'user']),
|
|
systemSkin() {
|
|
return this.user?.skin || 0
|
|
},
|
|
},
|
|
mounted() {
|
|
this.newShareMember = uni.getStorageSync('User')?.loginType !== 0
|
|
if (this.newShareMember) {
|
|
this.list.splice(1, 1)
|
|
}
|
|
},
|
|
methods: {
|
|
tabbarChange(e) {
|
|
uni.switchTab({
|
|
url: '/' + this.list[e].path,
|
|
})
|
|
},
|
|
handleClick(tab) {
|
|
const index = this.list.findIndex(item => item.name === tab)
|
|
if (index === -1) {
|
|
return
|
|
}
|
|
uni.switchTab({
|
|
url: '/' + this.list[index].path,
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.u-page__item__slot-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.u-page__item__slot-icon1 {
|
|
width: 35px;
|
|
height: 35px;
|
|
// margin-bottom: 20px
|
|
}
|
|
|
|
.u-page__item__slot-icon2 {
|
|
width: 35px;
|
|
height: 35px;
|
|
// margin-bottom: 20px
|
|
}
|
|
|
|
.greenEd {
|
|
::v-deep .u-tabbar__content {
|
|
background: linear-gradient(to bottom, #fff, #b6fdda);
|
|
}
|
|
|
|
::v-deep .u-tabbar__content__item-wrapper {
|
|
height: 80px;
|
|
}
|
|
|
|
::v-deep .u-tabbar-item {
|
|
// margin-bottom: 30px;
|
|
}
|
|
}
|
|
|
|
/* iPhone安全区域适配 */
|
|
|
|
/* 绿色主题的安全区域适配 */
|
|
.greenEd {
|
|
::v-deep .u-tabbar__content {
|
|
background: linear-gradient(to bottom, #fff, #b6fdda);
|
|
|
|
/* 绿色主题的安全区域背景 */
|
|
&::after {
|
|
background: #b6fdda;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 针对不同屏幕尺寸的优化 */
|
|
@media screen and (max-height: 667px) {
|
|
/* iPhone SE等小屏设备 */
|
|
::v-deep .u-tabbar__content__item-wrapper {
|
|
height: 70px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-height: 812px) {
|
|
/* iPhone X及以上机型 */
|
|
::v-deep .u-tabbar__content__item-wrapper {
|
|
height: 80px;
|
|
}
|
|
}
|
|
</style>
|